From a6e6ebc8375761b4dcadc7dd8e99fb1d42c2dcd2 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Mon, 14 Oct 2024 12:37:40 +0200
Subject: [PATCH 1/5] feat(charts): allow configuring the `zoomingTool`

---
 .../charts/src/components/BarChart/BarChart.tsx  | 10 ++++------
 .../src/components/BulletChart/BulletChart.tsx   | 10 ++++------
 .../src/components/ColumnChart/ColumnChart.tsx   | 10 ++++------
 .../src/components/ComposedChart/index.tsx       | 10 ++++------
 .../src/components/LineChart/LineChart.tsx       | 16 ++++++++++------
 .../src/interfaces/ICartesianChartConfig.ts      | 10 +++++++---
 packages/charts/src/internal/staticProps.ts      |  8 +++++++-
 packages/charts/src/resources/DemoProps.ts       |  2 +-
 8 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/packages/charts/src/components/BarChart/BarChart.tsx b/packages/charts/src/components/BarChart/BarChart.tsx
index 5fd946cc85f..982d99c19f7 100644
--- a/packages/charts/src/components/BarChart/BarChart.tsx
+++ b/packages/charts/src/components/BarChart/BarChart.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';
@@ -376,14 +376,12 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
             {...tooltipConfig}
           />
         )}
-        {chartConfig.zoomingTool && (
+        {!!chartConfig.zoomingTool && (
           <Brush
-            y={10}
             dataKey={primaryDimensionAccessor}
             tickFormatter={primaryDimension?.formatter}
-            stroke={ThemingParameters.sapObjectHeader_BorderColor}
-            travellerWidth={10}
-            height={20}
+            {...brushProps}
+            {...(typeof chartConfig.zoomingTool === 'object' ? chartConfig.zoomingTool : {})}
           />
         )}
         {children}
diff --git a/packages/charts/src/components/BulletChart/BulletChart.tsx b/packages/charts/src/components/BulletChart/BulletChart.tsx
index d877e6b4227..dc08d66fbf8 100644
--- a/packages/charts/src/components/BulletChart/BulletChart.tsx
+++ b/packages/charts/src/components/BulletChart/BulletChart.tsx
@@ -30,7 +30,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';
@@ -498,14 +498,12 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
             </Bar>
           );
         })}
-        {chartConfig.zoomingTool && (
+        {!!chartConfig.zoomingTool && (
           <Brush
-            y={10}
             dataKey={primaryDimensionAccessor}
             tickFormatter={primaryDimension?.formatter}
-            stroke={ThemingParameters.sapObjectHeader_BorderColor}
-            travellerWidth={10}
-            height={20}
+            {...brushProps}
+            {...(typeof chartConfig.zoomingTool === 'object' ? chartConfig.zoomingTool : {})}
           />
         )}
         {children}
diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
index 5d2696ebafa..9800e758a9e 100644
--- a/packages/charts/src/components/ColumnChart/ColumnChart.tsx
+++ b/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';
@@ -371,14 +371,12 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
             {...tooltipConfig}
           />
         )}
-        {chartConfig.zoomingTool && (
+        {!!chartConfig.zoomingTool && (
           <Brush
-            y={10}
             dataKey={primaryDimensionAccessor}
             tickFormatter={primaryDimension?.formatter}
-            stroke={ThemingParameters.sapObjectHeader_BorderColor}
-            travellerWidth={10}
-            height={20}
+            {...brushProps}
+            {...(typeof chartConfig.zoomingTool === 'object' ? chartConfig.zoomingTool : {})}
           />
         )}
         {children}
diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
index d390a74721e..d0402881ccb 100644
--- a/packages/charts/src/components/ComposedChart/index.tsx
+++ b/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';
@@ -522,14 +522,12 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
             </ChartElement>
           );
         })}
-        {chartConfig.zoomingTool && (
+        {!!chartConfig.zoomingTool && (
           <Brush
-            y={10}
             dataKey={primaryDimensionAccessor}
             tickFormatter={primaryDimension?.formatter}
-            stroke={ThemingParameters.sapObjectHeader_BorderColor}
-            travellerWidth={10}
-            height={20}
+            {...brushProps}
+            {...(typeof chartConfig.zoomingTool === 'object' ? chartConfig.zoomingTool : {})}
           />
         )}
         {children}
diff --git a/packages/charts/src/components/LineChart/LineChart.tsx b/packages/charts/src/components/LineChart/LineChart.tsx
index 452d22bc3fb..326b6e2087b 100644
--- a/packages/charts/src/components/LineChart/LineChart.tsx
+++ b/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';
@@ -339,14 +345,12 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
             {...tooltipConfig}
           />
         )}
-        {chartConfig.zoomingTool && (
+        {!!chartConfig.zoomingTool && (
           <Brush
-            y={10}
             dataKey={primaryDimensionAccessor}
             tickFormatter={primaryDimension?.formatter}
-            stroke={ThemingParameters.sapObjectHeader_BorderColor}
-            travellerWidth={10}
-            height={20}
+            {...brushProps}
+            {...(typeof chartConfig.zoomingTool === 'object' ? chartConfig.zoomingTool : {})}
           />
         )}
         {children}
diff --git a/packages/charts/src/interfaces/ICartesianChartConfig.ts b/packages/charts/src/interfaces/ICartesianChartConfig.ts
index 87d53e82fbf..bd6cab2655f 100644
--- a/packages/charts/src/interfaces/ICartesianChartConfig.ts
+++ b/packages/charts/src/interfaces/ICartesianChartConfig.ts
@@ -1,4 +1,4 @@
-import type { ReferenceLineProps, XAxisProps, YAxisProps } from 'recharts';
+import type { BrushProps, ReferenceLineProps, XAxisProps, YAxisProps } from 'recharts';
 
 export interface ICartesianChartConfig {
   /**
@@ -26,11 +26,15 @@ export interface ICartesianChartConfig {
   gridVertical?: boolean;
   gridHorizontal?: boolean;
 
+  //todo: remove "Omit" once ref type has been fixed
   /**
    * Defines whether it should be possible to zoom in on the chart.
-   * If this prop is `true`, a range slider is displayed on top of the chart, making it possible to zoom-in/zoom-out.
+   * If this prop is applied and doesn't have a falsy value, a range slider is displayed on top of the chart, making it possible to zoom-in/zoom-out.
+   *
+   * __Note:__ Since v2.3.0 you can also define custom props for the internal [recharts `Brush` component](https://recharts.org/en-US/api/Brush) via the`zoomingTool` prop.
+   * Please keep in mind that it's possible to override internal APIs, so please use with caution!
    */
-  zoomingTool?: boolean;
+  zoomingTool?: boolean | Omit<BrushProps, 'ref'>;
 
   /**
    * Defines the gab between bars.
diff --git a/packages/charts/src/internal/staticProps.ts b/packages/charts/src/internal/staticProps.ts
index ee6b86d6981..fb8406a8d57 100644
--- a/packages/charts/src/internal/staticProps.ts
+++ b/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
+};
diff --git a/packages/charts/src/resources/DemoProps.ts b/packages/charts/src/resources/DemoProps.ts
index ad2b41ab6d6..9d9d593e64f 100644
--- a/packages/charts/src/resources/DemoProps.ts
+++ b/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',

From daf618429a8fee85fc172d4287450e75c7941027 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Mon, 14 Oct 2024 13:01:22 +0200
Subject: [PATCH 2/5] tests

---
 .../charts/src/components/BarChart/BarChart.cy.tsx  |  3 +++
 .../src/components/BulletChart/BulletChart.cy.tsx   |  3 +++
 .../src/components/ColumnChart/ColumnChart.cy.tsx   |  3 +++
 .../ColumnChartWithTrend.cy.tsx                     |  3 +++
 .../components/ComposedChart/ComposedChart.cy.tsx   |  3 +++
 .../src/components/LineChart/LineChart.cy.tsx       |  4 ++++
 .../charts/src/interfaces/ICartesianChartConfig.ts  |  2 +-
 packages/charts/src/internal/testUtils.tsx          | 13 +++++++++++++
 8 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 packages/charts/src/internal/testUtils.tsx

diff --git a/packages/charts/src/components/BarChart/BarChart.cy.tsx b/packages/charts/src/components/BarChart/BarChart.cy.tsx
index 518c8e710cd..a346fa89abe 100644
--- a/packages/charts/src/components/BarChart/BarChart.cy.tsx
+++ b/packages/charts/src/components/BarChart/BarChart.cy.tsx
@@ -1,3 +1,4 @@
+import { testZoomingTool } from '../../internal/testUtils.js';
 import { complexDataSet } from '../../resources/DemoProps.js';
 import { BarChart } from './BarChart.js';
 import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
@@ -88,5 +89,7 @@ describe('BarChart', () => {
     cy.contains('Loading...').should('exist');
   });
 
+  testZoomingTool(BarChart, { dataset: complexDataSet, dimensions, measures });
+
   cypressPassThroughTestsFactory(BarChart, { dimensions: [], measures: [] });
 });
diff --git a/packages/charts/src/components/BulletChart/BulletChart.cy.tsx b/packages/charts/src/components/BulletChart/BulletChart.cy.tsx
index 21867c819b7..1a8056c0891 100644
--- a/packages/charts/src/components/BulletChart/BulletChart.cy.tsx
+++ b/packages/charts/src/components/BulletChart/BulletChart.cy.tsx
@@ -1,3 +1,4 @@
+import { testZoomingTool } from '../../internal/testUtils.js';
 import { complexDataSet } from '../../resources/DemoProps.js';
 import { BulletChart } from './BulletChart.js';
 import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
@@ -81,5 +82,7 @@ describe('BulletChart', () => {
     cy.contains('Loading...').should('exist');
   });
 
+  testZoomingTool(BulletChart, { dataset: complexDataSet, dimensions, measures });
+
   cypressPassThroughTestsFactory(BulletChart, { dimensions: [], measures: [] });
 });
diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.cy.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.cy.tsx
index ac4361eae89..6bceae7c0b4 100644
--- a/packages/charts/src/components/ColumnChart/ColumnChart.cy.tsx
+++ b/packages/charts/src/components/ColumnChart/ColumnChart.cy.tsx
@@ -1,3 +1,4 @@
+import { testZoomingTool } from '../../internal/testUtils.js';
 import { complexDataSet } from '../../resources/DemoProps.js';
 import { ColumnChart } from './ColumnChart.js';
 import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
@@ -78,5 +79,7 @@ describe('ColumnChart', () => {
     cy.contains('Loading...').should('exist');
   });
 
+  testZoomingTool(ColumnChart, { dataset: complexDataSet, dimensions, measures });
+
   cypressPassThroughTestsFactory(ColumnChart, { dimensions: [], measures: [] });
 });
diff --git a/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.cy.tsx b/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.cy.tsx
index 1f395709752..dbfd8118d37 100644
--- a/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.cy.tsx
+++ b/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.cy.tsx
@@ -1,3 +1,4 @@
+import { testZoomingTool } from '../../internal/testUtils.js';
 import { complexDataSet } from '../../resources/DemoProps.js';
 import { ColumnChartWithTrend } from './ColumnChartWithTrend.js';
 import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
@@ -85,5 +86,7 @@ describe('ColumnChartWithTrend', () => {
     cy.contains('Loading...').should('exist');
   });
 
+  testZoomingTool(ColumnChartWithTrend, { dataset: complexDataSet, dimensions, measures });
+
   cypressPassThroughTestsFactory(ColumnChartWithTrend, { dimensions: [], measures: [] });
 });
diff --git a/packages/charts/src/components/ComposedChart/ComposedChart.cy.tsx b/packages/charts/src/components/ComposedChart/ComposedChart.cy.tsx
index 6c9cbffca5d..ade22572f4f 100644
--- a/packages/charts/src/components/ComposedChart/ComposedChart.cy.tsx
+++ b/packages/charts/src/components/ComposedChart/ComposedChart.cy.tsx
@@ -1,3 +1,4 @@
+import { testZoomingTool } from '../../internal/testUtils.js';
 import { complexDataSet } from '../../resources/DemoProps.js';
 import { ComposedChart } from './index.js';
 import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
@@ -85,5 +86,7 @@ describe('ComposedChart', () => {
     cy.contains('Loading...').should('exist');
   });
 
+  testZoomingTool(ComposedChart, { dataset: complexDataSet, dimensions, measures });
+
   cypressPassThroughTestsFactory(ComposedChart, { dimensions: [], measures: [] });
 });
diff --git a/packages/charts/src/components/LineChart/LineChart.cy.tsx b/packages/charts/src/components/LineChart/LineChart.cy.tsx
index 9f0ae91f8d6..4226e2b38a1 100644
--- a/packages/charts/src/components/LineChart/LineChart.cy.tsx
+++ b/packages/charts/src/components/LineChart/LineChart.cy.tsx
@@ -1,3 +1,4 @@
+import { testZoomingTool } from '../../internal/testUtils.js';
 import { complexDataSet } from '../../resources/DemoProps.js';
 import { LineChart } from './LineChart.js';
 import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
@@ -32,6 +33,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 +79,7 @@ describe('LineChart', () => {
     cy.contains('Loading...').should('exist');
   });
 
+  testZoomingTool(LineChart, { dataset: complexDataSet, dimensions, measures });
+
   cypressPassThroughTestsFactory(LineChart, { dimensions: [], measures: [] });
 });
diff --git a/packages/charts/src/interfaces/ICartesianChartConfig.ts b/packages/charts/src/interfaces/ICartesianChartConfig.ts
index bd6cab2655f..b6559ce9c6c 100644
--- a/packages/charts/src/interfaces/ICartesianChartConfig.ts
+++ b/packages/charts/src/interfaces/ICartesianChartConfig.ts
@@ -34,7 +34,7 @@ export interface ICartesianChartConfig {
    * __Note:__ Since v2.3.0 you can also define custom props for the internal [recharts `Brush` component](https://recharts.org/en-US/api/Brush) via the`zoomingTool` prop.
    * Please keep in mind that it's possible to override internal APIs, so please use with caution!
    */
-  zoomingTool?: boolean | Omit<BrushProps, 'ref'>;
+  zoomingTool?: boolean | Partial<Omit<BrushProps, 'ref'>>;
 
   /**
    * Defines the gab between bars.
diff --git a/packages/charts/src/internal/testUtils.tsx b/packages/charts/src/internal/testUtils.tsx
new file mode 100644
index 00000000000..ee44290cf31
--- /dev/null
+++ b/packages/charts/src/internal/testUtils.tsx
@@ -0,0 +1,13 @@
+export function testZoomingTool(Component, props) {
+  it.only('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');
+
+    cy.mount(<Component {...props} chartConfig={{ zoomingTool: { stroke: 'red' } }} />);
+    cy.get('.recharts-brush').should('be.visible');
+    cy.get('.recharts-brush [stroke="red"]').should('be.visible');
+  });
+}

From 4520253402529ef34f528146637f49b88f77a3c8 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Mon, 14 Oct 2024 13:01:44 +0200
Subject: [PATCH 3/5] Update testUtils.tsx

---
 packages/charts/src/internal/testUtils.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/charts/src/internal/testUtils.tsx b/packages/charts/src/internal/testUtils.tsx
index ee44290cf31..31f8013dba2 100644
--- a/packages/charts/src/internal/testUtils.tsx
+++ b/packages/charts/src/internal/testUtils.tsx
@@ -1,5 +1,5 @@
 export function testZoomingTool(Component, props) {
-  it.only('zoomingTool', () => {
+  it('zoomingTool', () => {
     cy.mount(<Component {...props} chartConfig={{ zoomingTool: true }} />);
     cy.get('.recharts-brush').should('be.visible');
 

From 2387cc1a76f5a3a6fe68418f027eb5635627e455 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Mon, 14 Oct 2024 13:15:49 +0200
Subject: [PATCH 4/5] move reusable test

---
 cypress/support/utils.tsx                          | 14 ++++++++++++++
 .../charts/src/components/BarChart/BarChart.cy.tsx |  5 ++---
 .../src/components/BulletChart/BulletChart.cy.tsx  |  5 ++---
 .../src/components/ColumnChart/ColumnChart.cy.tsx  |  5 ++---
 .../ColumnChartWithTrend.cy.tsx                    |  5 ++---
 .../components/ComposedChart/ComposedChart.cy.tsx  |  5 ++---
 .../src/components/LineChart/LineChart.cy.tsx      |  5 ++---
 packages/charts/src/internal/testUtils.tsx         | 13 -------------
 8 files changed, 26 insertions(+), 31 deletions(-)
 delete mode 100644 packages/charts/src/internal/testUtils.tsx

diff --git a/cypress/support/utils.tsx b/cypress/support/utils.tsx
index 7f781e1a480..9c82f5f6baa 100644
--- a/cypress/support/utils.tsx
+++ b/cypress/support/utils.tsx
@@ -70,3 +70,17 @@ 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');
+
+    cy.mount(<Component {...props} chartConfig={{ zoomingTool: { stroke: 'red' } }} />);
+    cy.get('.recharts-brush').should('be.visible');
+    cy.get('.recharts-brush [stroke="red"]').should('be.visible');
+  });
+}
diff --git a/packages/charts/src/components/BarChart/BarChart.cy.tsx b/packages/charts/src/components/BarChart/BarChart.cy.tsx
index a346fa89abe..ae3b8e0642a 100644
--- a/packages/charts/src/components/BarChart/BarChart.cy.tsx
+++ b/packages/charts/src/components/BarChart/BarChart.cy.tsx
@@ -1,7 +1,6 @@
-import { testZoomingTool } from '../../internal/testUtils.js';
 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 = [
   {
@@ -89,7 +88,7 @@ describe('BarChart', () => {
     cy.contains('Loading...').should('exist');
   });
 
-  testZoomingTool(BarChart, { dataset: complexDataSet, dimensions, measures });
+  testChartZoomingTool(BarChart, { dataset: complexDataSet, dimensions, measures });
 
   cypressPassThroughTestsFactory(BarChart, { dimensions: [], measures: [] });
 });
diff --git a/packages/charts/src/components/BulletChart/BulletChart.cy.tsx b/packages/charts/src/components/BulletChart/BulletChart.cy.tsx
index 1a8056c0891..ada1cf749e0 100644
--- a/packages/charts/src/components/BulletChart/BulletChart.cy.tsx
+++ b/packages/charts/src/components/BulletChart/BulletChart.cy.tsx
@@ -1,7 +1,6 @@
-import { testZoomingTool } from '../../internal/testUtils.js';
 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 = [
   {
@@ -82,7 +81,7 @@ describe('BulletChart', () => {
     cy.contains('Loading...').should('exist');
   });
 
-  testZoomingTool(BulletChart, { dataset: complexDataSet, dimensions, measures });
+  testChartZoomingTool(BulletChart, { dataset: complexDataSet, dimensions, measures });
 
   cypressPassThroughTestsFactory(BulletChart, { dimensions: [], measures: [] });
 });
diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.cy.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.cy.tsx
index 6bceae7c0b4..a1c6d8e3b96 100644
--- a/packages/charts/src/components/ColumnChart/ColumnChart.cy.tsx
+++ b/packages/charts/src/components/ColumnChart/ColumnChart.cy.tsx
@@ -1,7 +1,6 @@
-import { testZoomingTool } from '../../internal/testUtils.js';
 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 = [
   {
@@ -79,7 +78,7 @@ describe('ColumnChart', () => {
     cy.contains('Loading...').should('exist');
   });
 
-  testZoomingTool(ColumnChart, { dataset: complexDataSet, dimensions, measures });
+  testChartZoomingTool(ColumnChart, { dataset: complexDataSet, dimensions, measures });
 
   cypressPassThroughTestsFactory(ColumnChart, { dimensions: [], measures: [] });
 });
diff --git a/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.cy.tsx b/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.cy.tsx
index dbfd8118d37..6983e1d41df 100644
--- a/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.cy.tsx
+++ b/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.cy.tsx
@@ -1,7 +1,6 @@
-import { testZoomingTool } from '../../internal/testUtils.js';
 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 = [
   {
@@ -86,7 +85,7 @@ describe('ColumnChartWithTrend', () => {
     cy.contains('Loading...').should('exist');
   });
 
-  testZoomingTool(ColumnChartWithTrend, { dataset: complexDataSet, dimensions, measures });
+  testChartZoomingTool(ColumnChartWithTrend, { dataset: complexDataSet, dimensions, measures });
 
   cypressPassThroughTestsFactory(ColumnChartWithTrend, { dimensions: [], measures: [] });
 });
diff --git a/packages/charts/src/components/ComposedChart/ComposedChart.cy.tsx b/packages/charts/src/components/ComposedChart/ComposedChart.cy.tsx
index ade22572f4f..6caa364364c 100644
--- a/packages/charts/src/components/ComposedChart/ComposedChart.cy.tsx
+++ b/packages/charts/src/components/ComposedChart/ComposedChart.cy.tsx
@@ -1,7 +1,6 @@
-import { testZoomingTool } from '../../internal/testUtils.js';
 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 = [
   {
@@ -86,7 +85,7 @@ describe('ComposedChart', () => {
     cy.contains('Loading...').should('exist');
   });
 
-  testZoomingTool(ComposedChart, { dataset: complexDataSet, dimensions, measures });
+  testChartZoomingTool(ComposedChart, { dataset: complexDataSet, dimensions, measures });
 
   cypressPassThroughTestsFactory(ComposedChart, { dimensions: [], measures: [] });
 });
diff --git a/packages/charts/src/components/LineChart/LineChart.cy.tsx b/packages/charts/src/components/LineChart/LineChart.cy.tsx
index 4226e2b38a1..c7266a64252 100644
--- a/packages/charts/src/components/LineChart/LineChart.cy.tsx
+++ b/packages/charts/src/components/LineChart/LineChart.cy.tsx
@@ -1,7 +1,6 @@
-import { testZoomingTool } from '../../internal/testUtils.js';
 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 = [
   {
@@ -79,7 +78,7 @@ describe('LineChart', () => {
     cy.contains('Loading...').should('exist');
   });
 
-  testZoomingTool(LineChart, { dataset: complexDataSet, dimensions, measures });
+  testChartZoomingTool(LineChart, { dataset: complexDataSet, dimensions, measures });
 
   cypressPassThroughTestsFactory(LineChart, { dimensions: [], measures: [] });
 });
diff --git a/packages/charts/src/internal/testUtils.tsx b/packages/charts/src/internal/testUtils.tsx
deleted file mode 100644
index 31f8013dba2..00000000000
--- a/packages/charts/src/internal/testUtils.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-export function testZoomingTool(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');
-
-    cy.mount(<Component {...props} chartConfig={{ zoomingTool: { stroke: 'red' } }} />);
-    cy.get('.recharts-brush').should('be.visible');
-    cy.get('.recharts-brush [stroke="red"]').should('be.visible');
-  });
-}

From ffe9777de5d7cdef81b62ebdb806abcfe69c2c49 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Mon, 14 Oct 2024 13:57:51 +0200
Subject: [PATCH 5/5] fix(charts): prevent data points from being covered by
 `zoomingTool`

---
 cypress/support/utils.tsx                              |  4 ----
 packages/charts/src/components/BarChart/BarChart.tsx   |  9 ++-------
 .../charts/src/components/BulletChart/BulletChart.tsx  |  9 ++-------
 .../charts/src/components/ColumnChart/ColumnChart.tsx  |  9 ++-------
 packages/charts/src/components/ComposedChart/index.tsx |  9 ++-------
 packages/charts/src/components/LineChart/LineChart.tsx |  9 ++-------
 .../charts/src/interfaces/ICartesianChartConfig.ts     | 10 +++-------
 7 files changed, 13 insertions(+), 46 deletions(-)

diff --git a/cypress/support/utils.tsx b/cypress/support/utils.tsx
index 9c82f5f6baa..015d7faa99e 100644
--- a/cypress/support/utils.tsx
+++ b/cypress/support/utils.tsx
@@ -78,9 +78,5 @@ export function testChartZoomingTool(Component, props) {
 
     cy.mount(<Component {...props} chartConfig={{ zoomingTool: false }} />);
     cy.get('.recharts-brush').should('not.exist');
-
-    cy.mount(<Component {...props} chartConfig={{ zoomingTool: { stroke: 'red' } }} />);
-    cy.get('.recharts-brush').should('be.visible');
-    cy.get('.recharts-brush [stroke="red"]').should('be.visible');
   });
 }
diff --git a/packages/charts/src/components/BarChart/BarChart.tsx b/packages/charts/src/components/BarChart/BarChart.tsx
index 982d99c19f7..00cc7ab7189 100644
--- a/packages/charts/src/components/BarChart/BarChart.tsx
+++ b/packages/charts/src/components/BarChart/BarChart.tsx
@@ -376,13 +376,8 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
             {...tooltipConfig}
           />
         )}
-        {!!chartConfig.zoomingTool && (
-          <Brush
-            dataKey={primaryDimensionAccessor}
-            tickFormatter={primaryDimension?.formatter}
-            {...brushProps}
-            {...(typeof chartConfig.zoomingTool === 'object' ? chartConfig.zoomingTool : {})}
-          />
+        {chartConfig.zoomingTool && (
+          <Brush dataKey={primaryDimensionAccessor} tickFormatter={primaryDimension?.formatter} {...brushProps} />
         )}
         {children}
       </BarChartLib>
diff --git a/packages/charts/src/components/BulletChart/BulletChart.tsx b/packages/charts/src/components/BulletChart/BulletChart.tsx
index dc08d66fbf8..32f80a4356a 100644
--- a/packages/charts/src/components/BulletChart/BulletChart.tsx
+++ b/packages/charts/src/components/BulletChart/BulletChart.tsx
@@ -498,13 +498,8 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
             </Bar>
           );
         })}
-        {!!chartConfig.zoomingTool && (
-          <Brush
-            dataKey={primaryDimensionAccessor}
-            tickFormatter={primaryDimension?.formatter}
-            {...brushProps}
-            {...(typeof chartConfig.zoomingTool === 'object' ? chartConfig.zoomingTool : {})}
-          />
+        {chartConfig.zoomingTool && (
+          <Brush dataKey={primaryDimensionAccessor} tickFormatter={primaryDimension?.formatter} {...brushProps} />
         )}
         {children}
       </ComposedChartLib>
diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
index 9800e758a9e..5744368474c 100644
--- a/packages/charts/src/components/ColumnChart/ColumnChart.tsx
+++ b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
@@ -371,13 +371,8 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
             {...tooltipConfig}
           />
         )}
-        {!!chartConfig.zoomingTool && (
-          <Brush
-            dataKey={primaryDimensionAccessor}
-            tickFormatter={primaryDimension?.formatter}
-            {...brushProps}
-            {...(typeof chartConfig.zoomingTool === 'object' ? chartConfig.zoomingTool : {})}
-          />
+        {chartConfig.zoomingTool && (
+          <Brush dataKey={primaryDimensionAccessor} tickFormatter={primaryDimension?.formatter} {...brushProps} />
         )}
         {children}
       </ColumnChartLib>
diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
index d0402881ccb..0cac6b3ec52 100644
--- a/packages/charts/src/components/ComposedChart/index.tsx
+++ b/packages/charts/src/components/ComposedChart/index.tsx
@@ -522,13 +522,8 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
             </ChartElement>
           );
         })}
-        {!!chartConfig.zoomingTool && (
-          <Brush
-            dataKey={primaryDimensionAccessor}
-            tickFormatter={primaryDimension?.formatter}
-            {...brushProps}
-            {...(typeof chartConfig.zoomingTool === 'object' ? chartConfig.zoomingTool : {})}
-          />
+        {chartConfig.zoomingTool && (
+          <Brush dataKey={primaryDimensionAccessor} tickFormatter={primaryDimension?.formatter} {...brushProps} />
         )}
         {children}
       </ComposedChartLib>
diff --git a/packages/charts/src/components/LineChart/LineChart.tsx b/packages/charts/src/components/LineChart/LineChart.tsx
index 326b6e2087b..ab73dc71f2d 100644
--- a/packages/charts/src/components/LineChart/LineChart.tsx
+++ b/packages/charts/src/components/LineChart/LineChart.tsx
@@ -345,13 +345,8 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
             {...tooltipConfig}
           />
         )}
-        {!!chartConfig.zoomingTool && (
-          <Brush
-            dataKey={primaryDimensionAccessor}
-            tickFormatter={primaryDimension?.formatter}
-            {...brushProps}
-            {...(typeof chartConfig.zoomingTool === 'object' ? chartConfig.zoomingTool : {})}
-          />
+        {chartConfig.zoomingTool && (
+          <Brush dataKey={primaryDimensionAccessor} tickFormatter={primaryDimension?.formatter} {...brushProps} />
         )}
         {children}
       </LineChartLib>
diff --git a/packages/charts/src/interfaces/ICartesianChartConfig.ts b/packages/charts/src/interfaces/ICartesianChartConfig.ts
index b6559ce9c6c..87d53e82fbf 100644
--- a/packages/charts/src/interfaces/ICartesianChartConfig.ts
+++ b/packages/charts/src/interfaces/ICartesianChartConfig.ts
@@ -1,4 +1,4 @@
-import type { BrushProps, ReferenceLineProps, XAxisProps, YAxisProps } from 'recharts';
+import type { ReferenceLineProps, XAxisProps, YAxisProps } from 'recharts';
 
 export interface ICartesianChartConfig {
   /**
@@ -26,15 +26,11 @@ export interface ICartesianChartConfig {
   gridVertical?: boolean;
   gridHorizontal?: boolean;
 
-  //todo: remove "Omit" once ref type has been fixed
   /**
    * Defines whether it should be possible to zoom in on the chart.
-   * If this prop is applied and doesn't have a falsy value, a range slider is displayed on top of the chart, making it possible to zoom-in/zoom-out.
-   *
-   * __Note:__ Since v2.3.0 you can also define custom props for the internal [recharts `Brush` component](https://recharts.org/en-US/api/Brush) via the`zoomingTool` prop.
-   * Please keep in mind that it's possible to override internal APIs, so please use with caution!
+   * If this prop is `true`, a range slider is displayed on top of the chart, making it possible to zoom-in/zoom-out.
    */
-  zoomingTool?: boolean | Partial<Omit<BrushProps, 'ref'>>;
+  zoomingTool?: boolean;
 
   /**
    * Defines the gab between bars.