feat(charts): allow configuring the zoomingTool

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');
+  });
+}

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 {
@@ -186,7 +186,7 @@
     ? dataKeys.findIndex((key) => key === chartConfig.secondYAxis?.dataKey)
     : 0;
 
   const [componentRef, chartRef] = useSyncRef<any>(ref);
 
   const onItemLegendClick = useLegendItemClick(onLegendClick);
   const labelFormatter = useLabelFormatter(primaryDimension);
@@ -382,14 +382,12 @@
             {...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}

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 {
@@ -146,7 +146,7 @@
     ...rest
   } = props;
 
   const [componentRef, chartRef] = useSyncRef<any>(ref);
 
   const chartConfig: BulletChartProps['chartConfig'] = {
     yAxisVisible: false,
@@ -225,7 +225,7 @@
           );
         } else {
           onDataPointClick(
             enrichEventWithDetails({} as any, {
               value: eventOrIndex.value,
               dataKey: eventOrIndex.dataKey,
               dataIndex: eventOrIndex.index,
@@ -303,7 +303,7 @@
         {chartConfig.xAxisVisible &&
           dimensions.map((dimension, index) => {
             let AxisComponent;
             const axisProps: any = {
               dataKey: dimension.accessor,
               interval: dimension?.interval ?? (isBigDataSet ? 'preserveStartEnd' : 0),
               tickLine: index < 1,
@@ -443,7 +443,7 @@
           />
         )}
         {sortedMeasures?.map((element, index) => {
           const chartElementProps: any = {
             isAnimationActive: !noAnimation
           };
           let labelPosition = 'top';
@@ -507,14 +507,12 @@
             </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}

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';
@@ -376,14 +376,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}

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';
@@ -529,14 +529,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}

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';
@@ -344,14 +350,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}

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 | Partial<Omit<BrushProps, 'ref'>>;
 
   /**
    * Defines the gab between bars.

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

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