fix(charts): prevent data points from being covered by zoomingTool

cypress/support/utils.tsx

@@ -70,3 +70,13 @@ export const cssVarToRgb = (cssVar) => {
   const rgbVal = getRGBColor(cssVarValue);
   return `rgb(${rgbVal.r}, ${rgbVal.g}, ${rgbVal.b})`;
 };
+
+export function testChartZoomingTool(Component, props) {
+  it('zoomingTool', () => {
+    cy.mount(<Component {...props} chartConfig={{ zoomingTool: true }} />);
+    cy.get('.recharts-brush').should('be.visible');
+
+    cy.mount(<Component {...props} chartConfig={{ zoomingTool: false }} />);
+    cy.get('.recharts-brush').should('not.exist');
+  });
+}

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

@@ -1,6 +1,6 @@
 import { complexDataSet } from '../../resources/DemoProps.js';
 import { BarChart } from './BarChart.js';
-import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
+import { cypressPassThroughTestsFactory, testChartZoomingTool } from '@/cypress/support/utils';
 
 const dimensions = [
   {
@@ -88,5 +88,7 @@ describe('BarChart', () => {
     cy.contains('Loading...').should('exist');
   });
 
+  testChartZoomingTool(BarChart, { dataset: complexDataSet, dimensions, measures });
+
   cypressPassThroughTestsFactory(BarChart, { dimensions: [], measures: [] });
 });

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

@@ -33,7 +33,7 @@
 import { ChartContainer } from '../../internal/ChartContainer.js';
 import { ChartDataLabel } from '../../internal/ChartDataLabel.js';
 import { defaultFormatter } from '../../internal/defaults.js';
-import { tickLineConfig, tooltipContentStyle, tooltipFillOpacity } from '../../internal/staticProps.js';
+import { brushProps, tickLineConfig, tooltipContentStyle, tooltipFillOpacity } from '../../internal/staticProps.js';
 import { getCellColors, resolvePrimaryAndSecondaryMeasures } from '../../internal/Utils.js';
 import { XAxisTicks } from '../../internal/XAxisTicks.js';
 import { YAxisTicks } from '../../internal/YAxisTicks.js';
@@ -76,7 +76,7 @@
    * @param measure {IChartMeasure} Current measure object
    * @param dataElement {object} Current data element
    */
   highlightColor?: (value: number, measure: MeasureConfig, dataElement: Record<string, any>) => CSSProperties['color'];
 }
 
 interface DimensionConfig extends IChartDimension {
@@ -185,7 +185,7 @@
     ? dataKeys.findIndex((key) => key === chartConfig.secondYAxis?.dataKey)
     : 0;
 
   const [componentRef, chartRef] = useSyncRef<any>(ref);
 
   const onItemLegendClick = useLegendItemClick(onLegendClick);
   const labelFormatter = useLabelFormatter(primaryDimension);
@@ -377,14 +377,7 @@
           />
         )}
         {chartConfig.zoomingTool && (
-          <Brush
-            y={10}
-            dataKey={primaryDimensionAccessor}
-            tickFormatter={primaryDimension?.formatter}
-            stroke={ThemingParameters.sapObjectHeader_BorderColor}
-            travellerWidth={10}
-            height={20}
-          />
+          <Brush dataKey={primaryDimensionAccessor} tickFormatter={primaryDimension?.formatter} {...brushProps} />
         )}
         {children}
       </BarChartLib>

packages/charts/src/components/BulletChart/BulletChart.cy.tsx

@@ -1,6 +1,6 @@
 import { complexDataSet } from '../../resources/DemoProps.js';
 import { BulletChart } from './BulletChart.js';
-import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
+import { cypressPassThroughTestsFactory, testChartZoomingTool } from '@/cypress/support/utils';
 
 const dimensions = [
   {
@@ -81,5 +81,7 @@ describe('BulletChart', () => {
     cy.contains('Loading...').should('exist');
   });
 
+  testChartZoomingTool(BulletChart, { dataset: complexDataSet, dimensions, measures });
+
   cypressPassThroughTestsFactory(BulletChart, { dimensions: [], measures: [] });
 });

packages/charts/src/components/BulletChart/BulletChart.tsx

@@ -30,7 +30,7 @@
 import { ChartContainer } from '../../internal/ChartContainer.js';
 import { ChartDataLabel } from '../../internal/ChartDataLabel.js';
 import { defaultFormatter } from '../../internal/defaults.js';
-import { tickLineConfig, tooltipContentStyle, tooltipFillOpacity } from '../../internal/staticProps.js';
+import { brushProps, tickLineConfig, tooltipContentStyle, tooltipFillOpacity } from '../../internal/staticProps.js';
 import { getCellColors, resolvePrimaryAndSecondaryMeasures } from '../../internal/Utils.js';
 import { XAxisTicks } from '../../internal/XAxisTicks.js';
 import { YAxisTicks } from '../../internal/YAxisTicks.js';
@@ -66,7 +66,7 @@
    * @param measure {IChartMeasure} Current measure object
    * @param dataElement {object} Current data element
    */
   highlightColor?: (value: number, measure: MeasureConfig, dataElement: Record<string, any>) => CSSProperties['color'];
 }
 
 interface DimensionConfig extends IChartDimension {
@@ -143,7 +143,7 @@
     ...rest
   } = props;
 
   const [componentRef, chartRef] = useSyncRef<any>(ref);
 
   const chartConfig = {
     yAxisVisible: false,
@@ -222,7 +222,7 @@
           );
         } else {
           onDataPointClick(
             enrichEventWithDetails({} as any, {
               value: eventOrIndex.value,
               dataKey: eventOrIndex.dataKey,
               dataIndex: eventOrIndex.index,
@@ -296,7 +296,7 @@
         {chartConfig.xAxisVisible &&
           dimensions.map((dimension, index) => {
             let AxisComponent;
             const axisProps: any = {
               dataKey: dimension.accessor,
               interval: dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0),
               tickLine: index < 1,
@@ -434,7 +434,7 @@
           />
         )}
         {sortedMeasures?.map((element, index) => {
           const chartElementProps: any = {
             isAnimationActive: noAnimation === false
           };
           let labelPosition = 'top';
@@ -499,14 +499,7 @@
           );
         })}
         {chartConfig.zoomingTool && (
-          <Brush
-            y={10}
-            dataKey={primaryDimensionAccessor}
-            tickFormatter={primaryDimension?.formatter}
-            stroke={ThemingParameters.sapObjectHeader_BorderColor}
-            travellerWidth={10}
-            height={20}
-          />
+          <Brush dataKey={primaryDimensionAccessor} tickFormatter={primaryDimension?.formatter} {...brushProps} />
         )}
         {children}
       </ComposedChartLib>

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

@@ -1,6 +1,6 @@
 import { complexDataSet } from '../../resources/DemoProps.js';
 import { ColumnChart } from './ColumnChart.js';
-import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
+import { cypressPassThroughTestsFactory, testChartZoomingTool } from '@/cypress/support/utils';
 
 const dimensions = [
   {
@@ -78,5 +78,7 @@ describe('ColumnChart', () => {
     cy.contains('Loading...').should('exist');
   });
 
+  testChartZoomingTool(ColumnChart, { dataset: complexDataSet, dimensions, measures });
+
   cypressPassThroughTestsFactory(ColumnChart, { dimensions: [], measures: [] });
 });

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

@@ -33,7 +33,7 @@ import type { IChartMeasure } from '../../interfaces/IChartMeasure.js';
 import { ChartContainer } from '../../internal/ChartContainer.js';
 import { ChartDataLabel } from '../../internal/ChartDataLabel.js';
 import { defaultFormatter } from '../../internal/defaults.js';
-import { tickLineConfig, tooltipContentStyle, tooltipFillOpacity } from '../../internal/staticProps.js';
+import { brushProps, tickLineConfig, tooltipContentStyle, tooltipFillOpacity } from '../../internal/staticProps.js';
 import { getCellColors, resolvePrimaryAndSecondaryMeasures } from '../../internal/Utils.js';
 import { XAxisTicks } from '../../internal/XAxisTicks.js';
 import { YAxisTicks } from '../../internal/YAxisTicks.js';
@@ -372,14 +372,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
           />
         )}
         {chartConfig.zoomingTool && (
-          <Brush
-            y={10}
-            dataKey={primaryDimensionAccessor}
-            tickFormatter={primaryDimension?.formatter}
-            stroke={ThemingParameters.sapObjectHeader_BorderColor}
-            travellerWidth={10}
-            height={20}
-          />
+          <Brush dataKey={primaryDimensionAccessor} tickFormatter={primaryDimension?.formatter} {...brushProps} />
         )}
         {children}
       </ColumnChartLib>

packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.cy.tsx

@@ -1,6 +1,6 @@
 import { complexDataSet } from '../../resources/DemoProps.js';
 import { ColumnChartWithTrend } from './ColumnChartWithTrend.js';
-import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
+import { cypressPassThroughTestsFactory, testChartZoomingTool } from '@/cypress/support/utils';
 
 const dimensions = [
   {
@@ -85,5 +85,7 @@ describe('ColumnChartWithTrend', () => {
     cy.contains('Loading...').should('exist');
   });
 
+  testChartZoomingTool(ColumnChartWithTrend, { dataset: complexDataSet, dimensions, measures });
+
   cypressPassThroughTestsFactory(ColumnChartWithTrend, { dimensions: [], measures: [] });
 });

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

@@ -1,6 +1,6 @@
 import { complexDataSet } from '../../resources/DemoProps.js';
 import { ComposedChart } from './index.js';
-import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
+import { cypressPassThroughTestsFactory, testChartZoomingTool } from '@/cypress/support/utils';
 
 const dimensions = [
   {
@@ -85,5 +85,7 @@ describe('ComposedChart', () => {
     cy.contains('Loading...').should('exist');
   });
 
+  testChartZoomingTool(ComposedChart, { dataset: complexDataSet, dimensions, measures });
+
   cypressPassThroughTestsFactory(ComposedChart, { dimensions: [], measures: [] });
 });

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

@@ -34,7 +34,7 @@ import type { IChartMeasure } from '../../interfaces/IChartMeasure.js';
 import { ChartContainer } from '../../internal/ChartContainer.js';
 import { ChartDataLabel } from '../../internal/ChartDataLabel.js';
 import { defaultFormatter } from '../../internal/defaults.js';
-import { tickLineConfig, tooltipContentStyle, tooltipFillOpacity } from '../../internal/staticProps.js';
+import { brushProps, tickLineConfig, tooltipContentStyle, tooltipFillOpacity } from '../../internal/staticProps.js';
 import { getCellColors, resolvePrimaryAndSecondaryMeasures } from '../../internal/Utils.js';
 import { XAxisTicks } from '../../internal/XAxisTicks.js';
 import { YAxisTicks } from '../../internal/YAxisTicks.js';
@@ -523,14 +523,7 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
           );
         })}
         {chartConfig.zoomingTool && (
-          <Brush
-            y={10}
-            dataKey={primaryDimensionAccessor}
-            tickFormatter={primaryDimension?.formatter}
-            stroke={ThemingParameters.sapObjectHeader_BorderColor}
-            travellerWidth={10}
-            height={20}
-          />
+          <Brush dataKey={primaryDimensionAccessor} tickFormatter={primaryDimension?.formatter} {...brushProps} />
         )}
         {children}
       </ComposedChartLib>

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

@@ -1,6 +1,6 @@
 import { complexDataSet } from '../../resources/DemoProps.js';
 import { LineChart } from './LineChart.js';
-import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
+import { cypressPassThroughTestsFactory, testChartZoomingTool } from '@/cypress/support/utils';
 
 const dimensions = [
   {
@@ -32,6 +32,7 @@ describe('LineChart', () => {
     cy.get('.recharts-responsive-container').should('be.visible');
     cy.get('.recharts-line').should('have.length', 3);
     cy.get('.recharts-line-curve').should('have.length', 3);
+    cy.get('.recharts-brush').should('not.exist');
   });
 
   it('click handlers', () => {
@@ -77,5 +78,7 @@ describe('LineChart', () => {
     cy.contains('Loading...').should('exist');
   });
 
+  testChartZoomingTool(LineChart, { dataset: complexDataSet, dimensions, measures });
+
   cypressPassThroughTestsFactory(LineChart, { dimensions: [], measures: [] });
 });

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

@@ -27,7 +27,13 @@ import type { IChartMeasure } from '../../interfaces/IChartMeasure.js';
 import { ChartContainer } from '../../internal/ChartContainer.js';
 import { ChartDataLabel } from '../../internal/ChartDataLabel.js';
 import { defaultFormatter } from '../../internal/defaults.js';
-import { tickLineConfig, tooltipContentStyle, tooltipFillOpacity, xAxisPadding } from '../../internal/staticProps.js';
+import {
+  brushProps,
+  tickLineConfig,
+  tooltipContentStyle,
+  tooltipFillOpacity,
+  xAxisPadding
+} from '../../internal/staticProps.js';
 import { resolvePrimaryAndSecondaryMeasures } from '../../internal/Utils.js';
 import { XAxisTicks } from '../../internal/XAxisTicks.js';
 import { YAxisTicks } from '../../internal/YAxisTicks.js';
@@ -340,14 +346,7 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
           />
         )}
         {chartConfig.zoomingTool && (
-          <Brush
-            y={10}
-            dataKey={primaryDimensionAccessor}
-            tickFormatter={primaryDimension?.formatter}
-            stroke={ThemingParameters.sapObjectHeader_BorderColor}
-            travellerWidth={10}
-            height={20}
-          />
+          <Brush dataKey={primaryDimensionAccessor} tickFormatter={primaryDimension?.formatter} {...brushProps} />
         )}
         {children}
       </LineChartLib>

packages/charts/src/internal/staticProps.ts

@@ -2,5 +2,11 @@ import { ThemingParameters } from '@ui5/webcomponents-react-base';
 
 export const tickLineConfig = { stroke: 'transparent' };
 export const tooltipContentStyle = { backgroundColor: ThemingParameters.sapBackgroundColor };
-export const tooltipFillOpacity: any = { fillOpacity: 0.3 }; // we need type any due to recharts typing error
+export const tooltipFillOpacity = { fillOpacity: 0.3 };
 export const xAxisPadding = { left: 25, right: 25 };
+export const brushProps = {
+  y: 4,
+  stroke: ThemingParameters.sapObjectHeader_BorderColor,
+  travellerWidth: 10,
+  height: 20
+};

packages/charts/src/resources/DemoProps.ts

@@ -74,7 +74,7 @@ export const complexDataSet = [
     name: 'September',
     users: 200,
     sessions: 360,
-    volume: 879
+    volume: 1000
   },
   {
     name: 'October',