fix(ComponsedChart): use scale band where possible

Author: MarcusNotheis

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

@@ -7,8 +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 debounce from 'lodash.debounce';
-import React, { FC, forwardRef, Ref, useCallback, useMemo, useState } from 'react';
+import React, { FC, forwardRef, Ref, useCallback, useMemo } from 'react';
 import {
   Area,
   Bar,
@@ -31,7 +30,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, xAxisPadding } from '../../internal/staticProps';
+import { tickLineConfig, tooltipContentStyle, tooltipFillOpacity } from '../../internal/staticProps';
 
 const dimensionDefaults = {
   formatter: defaultFormatter
@@ -103,8 +102,6 @@ enum ChartTypes {
   area = Area
 }
 
-const BAR_DEFAULT_PADDING = 20;
-
 type AvailableChartTypes = 'line' | 'bar' | 'area' | string;
 
 /**
@@ -127,9 +124,6 @@ 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 chartConfig = useMemo(() => {
     return {
@@ -166,34 +160,34 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
     (payload, eventOrIndex, event) => {
       if (payload.name) {
         typeof onDataPointClick === 'function' &&
-          onDataPointClick(
-            enrichEventWithDetails(event ?? eventOrIndex, {
-              value: payload.value.length ? payload.value[1] - payload.value[0] : payload.value,
-              dataIndex: payload.index ?? eventOrIndex,
-              dataKey: payload.value.length
-                ? Object.keys(payload).filter((key) =>
-                    payload.value.length
-                      ? payload[key] === payload.value[1] - payload.value[0]
-                      : payload[key] === payload.value && key !== 'value'
-                  )[0]
-                : payload.dataKey ??
-                  Object.keys(payload).find((key) => payload[key] === payload.value && key !== 'value'),
-              payload: payload.payload
-            })
-          );
+        onDataPointClick(
+          enrichEventWithDetails(event ?? eventOrIndex, {
+            value: payload.value.length ? payload.value[1] - payload.value[0] : payload.value,
+            dataIndex: payload.index ?? eventOrIndex,
+            dataKey: payload.value.length
+              ? Object.keys(payload).filter((key) =>
+                payload.value.length
+                  ? payload[key] === payload.value[1] - payload.value[0]
+                  : payload[key] === payload.value && key !== 'value'
+              )[0]
+              : payload.dataKey ??
+              Object.keys(payload).find((key) => payload[key] === payload.value && key !== 'value'),
+            payload: payload.payload
+          })
+        );
       } else {
         typeof onDataPointClick === 'function' &&
-          onDataPointClick(
-            enrichEventWithDetails(
-              {},
-              {
-                value: eventOrIndex.value,
-                dataKey: eventOrIndex.dataKey,
-                dataIndex: eventOrIndex.index,
-                payload: eventOrIndex.payload
-              }
-            )
-          );
+        onDataPointClick(
+          enrichEventWithDetails(
+            {},
+            {
+              value: eventOrIndex.value,
+              dataKey: eventOrIndex.dataKey,
+              dataIndex: eventOrIndex.index,
+              payload: eventOrIndex.payload
+            }
+          )
+        );
       }
     },
     [onDataPointClick]
@@ -217,30 +211,8 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
   };
 
   const Placeholder = useCallback(() => {
-    return <ComposedChartPlaceholder layout={layout} measures={measures} />;
+    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, props.dimensions]
-  );
-
-  const chartDoesNotContainAnyBars = !props.measures.some((measure) => measure.type === 'bar');
-
   return (
     <ChartContainer
       ref={chartRef}
@@ -259,51 +231,43 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
           stroke={chartConfig.gridStroke}
         />
         {chartConfig.xAxisVisible &&
-          dimensions.map((dimension, index) => {
-            let AxisComponent;
-            const axisProps = {
-              key: dimension.accessor,
-              dataKey: dimension.accessor,
-              interval: dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0),
-              tickLine: index < 1,
-              axisLine: index < 1,
-              allowDuplicatedCategory: index === 0
-            };
-
-            if (layout === 'vertical') {
-              axisProps.type = 'category';
-              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} />;
-              axisProps.xAxisId = index;
-              if (chartDoesNotContainAnyBars) {
-                axisProps.padding = xAxisPadding;
-              } else {
-                axisProps.padding = { left: currentBarWidth, right: currentBarWidth };
-              }
+        dimensions.map((dimension, index) => {
+          let AxisComponent;
+          const axisProps: any = {
+            dataKey: dimension.accessor,
+            interval: dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0),
+            tickLine: index < 1,
+            axisLine: index < 1,
+            allowDuplicatedCategory: index === 0,
+            scale: dimensions.length === 1 ? 'band' : 'auto'
+          };
 
-              axisProps.height = xAxisHeights[index];
-              // axisProps.height = 100
-              AxisComponent = XAxis;
-            }
+          if (layout === 'vertical') {
+            axisProps.type = 'category';
+            axisProps.tick = <YAxisTicks config={dimension}/>;
+            axisProps.yAxisId = index;
+            axisProps.width = yAxisWidth;
+            AxisComponent = YAxis;
+          } else {
+            axisProps.dataKey = dimension.accessor;
+            axisProps.tick = <XAxisTicks config={dimension}/>;
+            axisProps.xAxisId = index;
+            axisProps.height = xAxisHeights[index];
+            AxisComponent = XAxis;
+          }
 
-            return <AxisComponent {...axisProps} />;
-          })}
+          return <AxisComponent key={dimension.accessor} {...axisProps} />;
+        })}
         {layout === 'horizontal' && (
           <YAxis
             {...measureAxisProps}
             yAxisId="primary"
             width={yAxisWidth}
-            tick={<YAxisTicks config={primaryMeasure} />}
+            tick={<YAxisTicks config={primaryMeasure}/>}
           />
         )}
         {layout === 'vertical' && (
-          <XAxis {...measureAxisProps} xAxisId="primary" type="number" tick={<XAxisTicks config={primaryMeasure} />} />
+          <XAxis {...measureAxisProps} xAxisId="primary" type="number" tick={<XAxisTicks config={primaryMeasure}/>}/>
         )}
 
         {chartConfig.secondYAxis?.dataKey && layout === 'horizontal' && (
@@ -337,7 +301,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
             xAxisId={layout === 'vertical' ? 'primary' : undefined}
           />
         )}
-        <Tooltip cursor={tooltipFillOpacity} formatter={tooltipValueFormatter} contentStyle={tooltipContentStyle} />
+        <Tooltip cursor={tooltipFillOpacity} formatter={tooltipValueFormatter} contentStyle={tooltipContentStyle}/>
         {!noLegend && (
           <Legend
             verticalAlign={chartConfig.legendPosition}
@@ -350,7 +314,6 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
           const ChartElement = (ChartTypes[element.type] as any) as FC<any>;
 
           const chartElementProps: any = {
-            onAnimationEnd: updateChartPadding,
             isAnimationActive: noAnimation === false
           };
           let labelPosition = 'top';
@@ -376,7 +339,6 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
               } else {
                 labelPosition = 'insideTop';
               }
-              chartElementProps.maxBarSize = 40;
               break;
             case 'area':
               chartElementProps.dot = !isBigDataSet;
@@ -398,7 +360,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
               name={element.label ?? element.accessor}
               label={
                 isBigDataSet ? null : (
-                  <ChartDataLabel config={element} chartType={element.type} position={labelPosition} />
+                  <ChartDataLabel config={element} chartType={element.type} position={labelPosition}/>
                 )
               }
               stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}