fix(ComposedChart): fix padding calculation for vertical layout (#464)

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

@@ -25,6 +25,7 @@ import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
 import { ChartDataLabel } from '@ui5/webcomponents-react-charts/lib/components/ChartDataLabel';
 import { XAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/XAxisTicks';
 import { YAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/YAxisTicks';
+import { tickLineConfig } from '../../internal/MeasureAxisProps';
 
 const formatYAxisTicks = (tick = '') => {
   const splitTick = tick.split(' ');
@@ -195,7 +196,8 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
             interval={0}
             type="number"
             tick={<XAxisTicks config={primaryMeasure} chartRef={chartRef} />}
-            axisLine={chartConfig.xAxisVisible ?? true}
+            axisLine={chartConfig.xAxisVisible ?? false}
+            tickLine={tickLineConfig}
             tickFormatter={primaryMeasure?.formatter}
           />
         )}

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

@@ -25,6 +25,7 @@ import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
 import { IChartDimension } from '../../interfaces/IChartDimension';
 import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
+import { tickLineConfig } from '../../internal/MeasureAxisProps';
 
 interface MeasureConfig extends IChartMeasure {
   /**
@@ -208,7 +209,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
           })}
         <YAxis
           axisLine={chartConfig.yAxisVisible ?? false}
-          tickLine={false}
+          tickLine={tickLineConfig}
           yAxisId="left"
           interval={0}
           tick={<YAxisTicks config={primaryMeasure} />}

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

@@ -7,7 +7,7 @@ import { XAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/XAxis
 import { YAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/YAxisTicks';
 import { ChartContainer } from '@ui5/webcomponents-react-charts/lib/next/ChartContainer';
 import { useLegendItemClick } from '@ui5/webcomponents-react-charts/lib/useLegendItemClick';
-import React, { FC, forwardRef, Ref, useCallback, useMemo } from 'react';
+import React, { FC, forwardRef, Ref, useCallback, useState } from 'react';
 import {
   Area,
   Bar,
@@ -21,12 +21,14 @@ import {
   XAxis,
   YAxis
 } from 'recharts';
+import debounce from 'lodash.debounce';
 import { useChartMargin } from '../../hooks/useChartMargin';
 import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures';
 import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
 import { IChartDimension } from '../../interfaces/IChartDimension';
 import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
+import { tickLineConfig } from '../../internal/MeasureAxisProps';
 
 const dimensionDefaults = {
   formatter: (d) => d
@@ -144,6 +146,9 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
   } = props;
 
   const chartRef = useConsolidatedRef<any>(ref);
+  const [currentBarWidth, setCurrentBarWidth] = useState(
+    dataset.some(({ type }) => type === 'bar') ? BAR_DEFAULT_PADDING : 0
+  );
 
   const { dimensions, measures } = usePrepareDimensionsAndMeasures(
     props.dimensions,
@@ -199,17 +204,6 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
 
   const onItemLegendClick = useLegendItemClick(onLegendClick);
 
-  const paddingCharts = useMemo(() => {
-    let stackId = '';
-    return measures?.reduce((acc, chartElement) => {
-      if (chartElement.type === 'bar' && stackId !== chartElement.stackId) {
-        stackId = chartElement.stackId ?? '';
-        acc += chartElement?.width ?? BAR_DEFAULT_PADDING;
-      }
-      return acc;
-    }, 5);
-  }, [measures]);
-
   const isBigDataSet = dataset?.length > 30 ?? false;
   const primaryDimensionAccessor = primaryDimension?.accessor;
 
@@ -224,7 +218,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
 
   const measureAxisProps = {
     axisLine: chartConfig.yAxisVisible ?? false,
-    tickLine: false,
+    tickLine: tickLineConfig,
     tickFormatter: primaryMeasure?.formatter,
     interval: 0
   };
@@ -233,6 +227,25 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
     return <ComposedChartPlaceholder layout={layout} measures={measures} />;
   }, [layout, measures]);
 
+  const updateChartPadding = useCallback(
+    debounce(() => {
+      if (chartRef.current) {
+        const bars = chartRef.current.querySelectorAll(
+          '.recharts-bar-rectangles .recharts-bar-rectangle:first-child path'
+        );
+        if (bars.length) {
+          let totalBarWidth = 0;
+          bars.forEach((bar) => {
+            const bBox = bar.getBBox();
+            totalBarWidth += layout === 'vertical' ? bBox.height : bBox.width;
+          });
+          setCurrentBarWidth(totalBarWidth);
+        }
+      }
+    }, 50),
+    [chartRef, setCurrentBarWidth, layout]
+  );
+
   return (
     <ChartContainer
       ref={chartRef}
@@ -258,19 +271,20 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
               dataKey: dimension.accessor,
               interval: dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0),
               tickLine: index < 1,
-              axisLine: index < 1,
-              padding: { left: paddingCharts, right: paddingCharts }
+              axisLine: index < 1
             };
 
             if (layout === 'vertical') {
               axisProps.type = 'category';
               axisProps.tick = <YAxisTicks config={dimension} level={index} />;
               axisProps.yAxisId = index;
+              axisProps.padding = { top: currentBarWidth, bottom: currentBarWidth };
               AxisComponent = YAxis;
             } else {
               axisProps.dataKey = dimension.accessor;
               axisProps.tick = <XAxisTicks config={dimension} chartRef={chartRef} level={index} />;
               axisProps.xAxisId = index;
+              axisProps.padding = { left: currentBarWidth, right: currentBarWidth };
               AxisComponent = XAxis;
             }
 
@@ -337,6 +351,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
               chartElementProps.dot = !isBigDataSet;
               break;
             case 'bar':
+              chartElementProps.onAnimationEnd = updateChartPadding;
               chartElementProps.fillOpacity = element.opacity;
               chartElementProps.strokeOpacity = element.opacity;
               chartElementProps.barSize = element.width;

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

@@ -25,6 +25,7 @@ import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
 import { IChartDimension } from '../../interfaces/IChartDimension';
 import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
+import { tickLineConfig } from '../../internal/MeasureAxisProps';
 
 interface MeasureConfig extends IChartMeasure {
   /**
@@ -199,7 +200,7 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
           })}
         <YAxis
           axisLine={chartConfig.yAxisVisible ?? false}
-          tickLine={false}
+          tickLine={tickLineConfig}
           yAxisId="left"
           tickFormatter={primaryMeasure?.formatter}
           interval={0}

packages/charts/src/internal/MeasureAxisProps.ts

@@ -0,0 +1 @@
+export const tickLineConfig = { stroke: 'transparent' };