fix(Charts-New): fix labels of donut chart, fix yAxis width calculation of bar chart

packages/charts/src/components/BarChart/BarChart.tsx

@@ -20,7 +20,6 @@ import {
   YAxis
 } from 'recharts';
 import { useChartMargin } from '../../hooks/useChartMargin';
-import { useLongestYAxisLabel } from '../../hooks/useLongestYAxisLabel';
 import { useObserveXAxisHeights } from '../../hooks/useObserveXAxisHeights';
 import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures';
 import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
@@ -29,6 +28,7 @@ import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
 import { defaultFormatter } from '../../internal/defaults';
 import { tickLineConfig, tooltipContentStyle, tooltipFillOpacity } from '../../internal/staticProps';
+import { useLongestYAxisLabelBar } from '../../hooks/useLongestYAxisLabelBar';
 
 const dimensionDefaults = {
   formatter: defaultFormatter
@@ -159,10 +159,8 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
   const isBigDataSet = dataset?.length > 30;
   const primaryDimensionAccessor = primaryDimension?.accessor;
 
-  const [width, legendPosition] = useLongestYAxisLabel(dataset, dimensions);
-
+  const [width, legendPosition] = useLongestYAxisLabelBar(dataset, dimensions);
   const marginChart = useChartMargin(chartConfig.margin, chartConfig.zoomingTool);
-
   const [xAxisHeight] = useObserveXAxisHeights(chartRef, 1);
 
   return (
@@ -202,11 +200,12 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
                 key={dimension.accessor}
                 dataKey={dimension.accessor}
                 xAxisId={index}
-                tick={<YAxisTicks config={dimension} level={index} />}
+                tick={<YAxisTicks config={dimension} />}
                 tickLine={index < 1}
                 axisLine={index < 1}
                 yAxisId={index}
-                width={width}
+                width={width[index]}
+                allowDuplicatedCategory={index === 0}
               />
             );
           })}

packages/charts/src/components/BarChart/BarRechart.stories.tsx

@@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions';
 import { boolean } from '@storybook/addon-knobs';
 import { BarChart } from '@ui5/webcomponents-react-charts/lib/next/BarChart';
 import React from 'react';
-import { bigDataSet, complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps';
+import { complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps';
 
 export default {
   title: 'Charts - Unstable /  BarChart',

packages/charts/src/components/ColumnChart/ColumnChart.tsx

@@ -193,10 +193,11 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
                 dataKey={dimension.accessor}
                 xAxisId={index}
                 interval={dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0)}
-                tick={<XAxisTicks config={dimension} level={index} />}
+                tick={<XAxisTicks config={dimension} />}
                 tickLine={index < 1}
                 axisLine={index < 1}
                 height={xAxisHeights[index]}
+                allowDuplicatedCategory={index === 0}
               />
             );
           })}

packages/charts/src/components/ComposedChart/index.tsx

@@ -31,7 +31,7 @@ import { IChartDimension } from '../../interfaces/IChartDimension';
 import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
 import { defaultFormatter } from '../../internal/defaults';
-import { tickLineConfig, tooltipContentStyle, tooltipFillOpacity } from '../../internal/staticProps';
+import { tickLineConfig, tooltipContentStyle, tooltipFillOpacity, xAxisPadding } from '../../internal/staticProps';
 
 const dimensionDefaults = {
   formatter: defaultFormatter
@@ -238,6 +238,8 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
     [chartRef, setCurrentBarWidth, layout, props.dimensions]
   );
 
+  const chartDoesNotContainAnyBars = !props.measures.some((measure) => measure.type === 'bar');
+
   return (
     <ChartContainer
       ref={chartRef}
@@ -263,21 +265,27 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
               dataKey: dimension.accessor,
               interval: dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0),
               tickLine: index < 1,
-              axisLine: index < 1
+              axisLine: index < 1,
+              allowDuplicatedCategory: index === 0
             };
 
             if (layout === 'vertical') {
               axisProps.type = 'category';
-              axisProps.tick = <YAxisTicks config={dimension} level={index} />;
+              axisProps.tick = <YAxisTicks config={dimension} />;
               axisProps.yAxisId = index;
               axisProps.padding = { top: currentBarWidth, bottom: currentBarWidth };
               axisProps.width = yAxisWidth;
               AxisComponent = YAxis;
             } else {
               axisProps.dataKey = dimension.accessor;
-              axisProps.tick = <XAxisTicks config={dimension} level={index} />;
+              axisProps.tick = <XAxisTicks config={dimension} />;
               axisProps.xAxisId = index;
-              axisProps.padding = { left: currentBarWidth, right: currentBarWidth };
+              if (chartDoesNotContainAnyBars) {
+                axisProps.padding = xAxisPadding;
+              } else {
+                axisProps.padding = { left: currentBarWidth, right: currentBarWidth };
+              }
+
               axisProps.height = xAxisHeights[index];
               // axisProps.height = 100
               AxisComponent = XAxis;

packages/charts/src/components/LineChart/LineChart.tsx

@@ -28,7 +28,7 @@ import { IChartDimension } from '../../interfaces/IChartDimension';
 import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
 import { defaultFormatter } from '../../internal/defaults';
-import { tickLineConfig, tooltipContentStyle, tooltipFillOpacity } from '../../internal/staticProps';
+import { tickLineConfig, tooltipContentStyle, tooltipFillOpacity, xAxisPadding } from '../../internal/staticProps';
 
 interface MeasureConfig extends IChartMeasure {
   /**
@@ -183,10 +183,12 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
                 dataKey={dimension.accessor}
                 xAxisId={index}
                 interval={dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0)}
-                tick={<XAxisTicks config={dimension} level={index} />}
+                tick={<XAxisTicks config={dimension} />}
                 tickLine={index < 1}
                 axisLine={index < 1}
                 height={xAxisHeights[index]}
+                padding={xAxisPadding}
+                allowDuplicatedCategory={index === 0}
               />
             );
           })}

packages/charts/src/components/PieChart/PieChart.tsx

@@ -89,6 +89,7 @@ const PieChart: FC<PieChartProps> = forwardRef((props: PieChartProps, ref: Ref<a
     }),
     [props.dimension]
   );
+
   const measure: MeasureConfig = useMemo(
     () => ({
       formatter: defaultFormatter,
@@ -97,37 +98,36 @@ const PieChart: FC<PieChartProps> = forwardRef((props: PieChartProps, ref: Ref<a
     [props.measure]
   );
 
+  const label = useMemo(() => {
+    return {
+      position: 'outside',
+      content: measure.DataLabel,
+      formatter: measure.formatter
+    };
+  }, [measure]);
+
   const tooltipValueFormatter = useCallback((value) => measure.formatter(value), [measure.formatter]);
   const chartRef = useConsolidatedRef<any>(ref);
 
   const onItemLegendClick = useLegendItemClick(onLegendClick, () => measure.accessor);
 
   const onDataPointClickInternal = useCallback(
-    (payload, index, event) => {
-      if (payload && onDataPointClick && payload.value) {
+    (payload, event) => {
+      if (payload && payload?.activePayload && onDataPointClick) {
         onDataPointClick(
           enrichEventWithDetails(event, {
-            value: payload.value,
-            dataKey: measure.accessor,
-            name: payload.name,
-            payload: payload.payload,
-            dataIndex: index
+            value: payload.activePayload[0].value,
+            dataKey: payload.activePayload[0].dataKey,
+            name: payload.activePayload[0].payload.name,
+            payload: payload.activePayload[0].payload,
+            dataIndex: payload.activeTooltipIndex
           })
         );
       }
     },
     [onDataPointClick]
   );
 
-  const label = useMemo(() => {
-    if(measure.hideDataLabel) return null;
-    return {
-      position: 'outside',
-      content: measure.DataLabel,
-      formatter: measure.formatter
-    };
-  }, [measure]);
-
   return (
     <ChartContainer
       dataset={dataset}
@@ -139,15 +139,16 @@ const PieChart: FC<PieChartProps> = forwardRef((props: PieChartProps, ref: Ref<a
       tooltip={tooltip}
       slot={slot}
     >
-      <PieChartLib margin={chartConfig.margin}>
+      <PieChartLib onClick={onDataPointClickInternal} margin={chartConfig.margin}>
         <Pie
           innerRadius={chartConfig.innerRadius}
           paddingAngle={chartConfig.paddingAngle}
           nameKey={dimension.accessor}
           dataKey={measure.accessor}
           data={dataset}
+          animationBegin={0}
+          isAnimationActive={false}
           label={label}
-          onClick={onDataPointClickInternal}
         >
           {centerLabel && <Label position={'center'}>{centerLabel}</Label>}
           {dataset &&

packages/charts/src/hooks/useLongestYAxisLabel.ts

@@ -19,5 +19,6 @@ export const useLongestYAxisLabel = (dataset: unknown[], elements): [number, obj
     }
 
     labelLength = Math.min(labelLength, defaultMaxYAxisWidth);
+
     return [labelLength, { marginLeft: labelLength, maxWidth: `calc(100% - ${labelLength + 10}px)` }];
   }, [dataset, elements]);

packages/charts/src/hooks/useLongestYAxisLabelBar.ts

@@ -0,0 +1,30 @@
+import { getTextWidth } from '@ui5/webcomponents-react-charts/lib/Utils';
+import { useMemo } from 'react';
+import { getValueByDataKey } from 'recharts/lib/util/ChartUtils';
+import { defaultMaxYAxisWidth } from '../internal/defaults';
+
+export const useLongestYAxisLabelBar = (dataset: unknown[], elements): [number[], object] =>
+  useMemo(() => {
+    let axisWidths = Array(elements.length).fill(0);
+    let marginLeft = 0;
+
+    if (dataset instanceof Array && elements) {
+      const resolveAllMeasureLabels = (item): string[] => {
+        return elements.map((elementConfig) =>
+          elementConfig.formatter(getValueByDataKey(item, elementConfig.accessor, ''))
+        );
+      };
+
+      const allFormattedDataLabels = dataset.map(resolveAllMeasureLabels);
+      allFormattedDataLabels.forEach((dimensionLabels) => {
+        dimensionLabels.forEach((label, dimensionIndex) => {
+          axisWidths[dimensionIndex] = Math.max(getTextWidth(label), axisWidths[dimensionIndex]);
+        });
+      });
+
+      axisWidths = axisWidths.map((length) => Math.min(defaultMaxYAxisWidth, length));
+      marginLeft = axisWidths.reduce((acc, val) => acc + val, 0);
+    }
+
+    return [axisWidths, { marginLeft, maxWidth: `calc(100% - ${marginLeft + 8}px)` }];
+  }, [dataset, elements]);

packages/charts/src/internal/XAxisTicks.tsx

@@ -2,7 +2,6 @@ import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingPara
 import { getTextWidth, truncateLongLabel } from '@ui5/webcomponents-react-charts/lib/Utils';
 import React, { FC } from 'react';
 import { IChartMeasure } from '../interfaces/IChartMeasure';
-import { SecondaryDimensionTicksXAxis } from './SecondaryDimensionXAxisTick';
 
 interface XAxisTicksProps {
   visibleTicksCount?: number;
@@ -11,19 +10,14 @@ interface XAxisTicksProps {
   y?: number;
   payload?: any;
   config: IChartMeasure;
-  level?: number;
 }
 
 export const XAxisTicks: FC<XAxisTicksProps> = (props: XAxisTicksProps) => {
-  const { x, y, payload, config, level = 0, visibleTicksCount, width } = props;
+  const { x, y, payload, config, visibleTicksCount, width } = props;
 
   const bandWidth = width / visibleTicksCount;
   const shouldRotate = bandWidth <= 100;
 
-  if (level > 0) {
-    return <SecondaryDimensionTicksXAxis {...props} />;
-  }
-
   const formattedValue = config.formatter(payload.value);
   let textToDisplay = formattedValue;
   if (shouldRotate) {

packages/charts/src/internal/YAxisTicks.tsx

@@ -3,22 +3,17 @@ import { getTextWidth, truncateLongLabel } from '@ui5/webcomponents-react-charts
 import React, { FC } from 'react';
 import { IChartMeasure } from '../interfaces/IChartMeasure';
 import { defaultMaxYAxisWidth } from './defaults';
-import { SecondaryDimensionTicksYAxis } from './SecondaryDimensionYAxisTick';
 
 interface YAxisTicksProps {
   x?: number;
   y?: number;
   payload?: any;
   config: IChartMeasure;
-  level?: number;
 }
 
 export const YAxisTicks: FC<YAxisTicksProps> = (props: YAxisTicksProps) => {
-  const { x, y, payload, config, level = 0 } = props;
+  const { x, y, payload, config } = props;
 
-  if (level > 0) {
-    return <SecondaryDimensionTicksYAxis {...props} />;
-  }
   const formattedValue = config.formatter(payload.value);
   let textToDisplay = formattedValue;
   if (getTextWidth(formattedValue) > defaultMaxYAxisWidth) {

packages/charts/src/internal/staticProps.ts

@@ -3,3 +3,4 @@ import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingPara
 export const tickLineConfig = { stroke: 'transparent' };
 export const tooltipContentStyle = { backgroundColor: ThemingParameters.sapBackgroundColor };
 export const tooltipFillOpacity = { fillOpacity: 0.3 };
+export const xAxisPadding = { left: 25, right: 25 };