Skip to content

Commit 4d3f4fc

Browse files
Lukas742Lukas742
authored
feat(charts): allow configuring the zoomingTool (#6489)
This commit also fixes an issue where in rare cases data point labels were covered by the `Brush` ("zoomingTool") component. Reducing the `y` coordinate solves this issue.
1 parent 464f2fd commit 4d3f4fc

File tree

15 files changed

+74
-41
lines changed

15 files changed

+74
-41
lines changed

‎cypress/support/utils.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,3 +70,17 @@ export const cssVarToRgb = (cssVar) => {
7070
const rgbVal = getRGBColor(cssVarValue);
7171
return `rgb(${rgbVal.r}, ${rgbVal.g}, ${rgbVal.b})`;
7272
};
73+
74+
export function testChartZoomingTool(Component, props) {
75+
it('zoomingTool', () => {
76+
cy.mount(<Component {...props} chartConfig={{ zoomingTool: true }} />);
77+
cy.get('.recharts-brush').should('be.visible');
78+
79+
cy.mount(<Component {...props} chartConfig={{ zoomingTool: false }} />);
80+
cy.get('.recharts-brush').should('not.exist');
81+
82+
cy.mount(<Component {...props} chartConfig={{ zoomingTool: { stroke: 'red' } }} />);
83+
cy.get('.recharts-brush').should('be.visible');
84+
cy.get('.recharts-brush [stroke="red"]').should('be.visible');
85+
});
86+
}

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { complexDataSet } from '../../resources/DemoProps.js';
22
import { BarChart } from './BarChart.js';
3-
import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
3+
import { cypressPassThroughTestsFactory, testChartZoomingTool } from '@/cypress/support/utils';
44

55
const dimensions = [
66
{
@@ -88,5 +88,7 @@ describe('BarChart', () => {
8888
cy.contains('Loading...').should('exist');
8989
});
9090

91+
testChartZoomingTool(BarChart, { dataset: complexDataSet, dimensions, measures });
92+
9193
cypressPassThroughTestsFactory(BarChart, { dimensions: [], measures: [] });
9294
});

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

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ import type { IChartMeasure } from '../../interfaces/IChartMeasure.js';
3333
import { ChartContainer } from '../../internal/ChartContainer.js';
3434
import { ChartDataLabel } from '../../internal/ChartDataLabel.js';
3535
import { defaultFormatter } from '../../internal/defaults.js';
36-
import { tickLineConfig, tooltipContentStyle, tooltipFillOpacity } from '../../internal/staticProps.js';
36+
import { brushProps, tickLineConfig, tooltipContentStyle, tooltipFillOpacity } from '../../internal/staticProps.js';
3737
import { getCellColors, resolvePrimaryAndSecondaryMeasures } from '../../internal/Utils.js';
3838
import { XAxisTicks } from '../../internal/XAxisTicks.js';
3939
import { YAxisTicks } from '../../internal/YAxisTicks.js';
@@ -382,14 +382,12 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
382382
{...tooltipConfig}
383383
/>
384384
)}
385-
{chartConfig.zoomingTool && (
385+
{!!chartConfig.zoomingTool && (
386386
<Brush
387-
y={10}
388387
dataKey={primaryDimensionAccessor}
389388
tickFormatter={primaryDimension?.formatter}
390-
stroke={ThemingParameters.sapObjectHeader_BorderColor}
391-
travellerWidth={10}
392-
height={20}
389+
{...brushProps}
390+
{...(typeof chartConfig.zoomingTool === 'object' ? chartConfig.zoomingTool : {})}
393391
/>
394392
)}
395393
{children}

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { complexDataSet } from '../../resources/DemoProps.js';
22
import { BulletChart } from './BulletChart.js';
3-
import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
3+
import { cypressPassThroughTestsFactory, testChartZoomingTool } from '@/cypress/support/utils';
44

55
const dimensions = [
66
{
@@ -81,5 +81,7 @@ describe('BulletChart', () => {
8181
cy.contains('Loading...').should('exist');
8282
});
8383

84+
testChartZoomingTool(BulletChart, { dataset: complexDataSet, dimensions, measures });
85+
8486
cypressPassThroughTestsFactory(BulletChart, { dimensions: [], measures: [] });
8587
});

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

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import type { IChartMeasure } from '../../interfaces/IChartMeasure.js';
3030
import { ChartContainer } from '../../internal/ChartContainer.js';
3131
import { ChartDataLabel } from '../../internal/ChartDataLabel.js';
3232
import { defaultFormatter } from '../../internal/defaults.js';
33-
import { tickLineConfig, tooltipContentStyle, tooltipFillOpacity } from '../../internal/staticProps.js';
33+
import { brushProps, tickLineConfig, tooltipContentStyle, tooltipFillOpacity } from '../../internal/staticProps.js';
3434
import { getCellColors, resolvePrimaryAndSecondaryMeasures } from '../../internal/Utils.js';
3535
import { XAxisTicks } from '../../internal/XAxisTicks.js';
3636
import { YAxisTicks } from '../../internal/YAxisTicks.js';
@@ -507,14 +507,12 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
507507
</Bar>
508508
);
509509
})}
510-
{chartConfig.zoomingTool && (
510+
{!!chartConfig.zoomingTool && (
511511
<Brush
512-
y={10}
513512
dataKey={primaryDimensionAccessor}
514513
tickFormatter={primaryDimension?.formatter}
515-
stroke={ThemingParameters.sapObjectHeader_BorderColor}
516-
travellerWidth={10}
517-
height={20}
514+
{...brushProps}
515+
{...(typeof chartConfig.zoomingTool === 'object' ? chartConfig.zoomingTool : {})}
518516
/>
519517
)}
520518
{children}

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { complexDataSet } from '../../resources/DemoProps.js';
22
import { ColumnChart } from './ColumnChart.js';
3-
import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
3+
import { cypressPassThroughTestsFactory, testChartZoomingTool } from '@/cypress/support/utils';
44

55
const dimensions = [
66
{
@@ -78,5 +78,7 @@ describe('ColumnChart', () => {
7878
cy.contains('Loading...').should('exist');
7979
});
8080

81+
testChartZoomingTool(ColumnChart, { dataset: complexDataSet, dimensions, measures });
82+
8183
cypressPassThroughTestsFactory(ColumnChart, { dimensions: [], measures: [] });
8284
});

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

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ import type { IChartMeasure } from '../../interfaces/IChartMeasure.js';
3333
import { ChartContainer } from '../../internal/ChartContainer.js';
3434
import { ChartDataLabel } from '../../internal/ChartDataLabel.js';
3535
import { defaultFormatter } from '../../internal/defaults.js';
36-
import { tickLineConfig, tooltipContentStyle, tooltipFillOpacity } from '../../internal/staticProps.js';
36+
import { brushProps, tickLineConfig, tooltipContentStyle, tooltipFillOpacity } from '../../internal/staticProps.js';
3737
import { getCellColors, resolvePrimaryAndSecondaryMeasures } from '../../internal/Utils.js';
3838
import { XAxisTicks } from '../../internal/XAxisTicks.js';
3939
import { YAxisTicks } from '../../internal/YAxisTicks.js';
@@ -376,14 +376,12 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
376376
{...tooltipConfig}
377377
/>
378378
)}
379-
{chartConfig.zoomingTool && (
379+
{!!chartConfig.zoomingTool && (
380380
<Brush
381-
y={10}
382381
dataKey={primaryDimensionAccessor}
383382
tickFormatter={primaryDimension?.formatter}
384-
stroke={ThemingParameters.sapObjectHeader_BorderColor}
385-
travellerWidth={10}
386-
height={20}
383+
{...brushProps}
384+
{...(typeof chartConfig.zoomingTool === 'object' ? chartConfig.zoomingTool : {})}
387385
/>
388386
)}
389387
{children}

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { complexDataSet } from '../../resources/DemoProps.js';
22
import { ColumnChartWithTrend } from './ColumnChartWithTrend.js';
3-
import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
3+
import { cypressPassThroughTestsFactory, testChartZoomingTool } from '@/cypress/support/utils';
44

55
const dimensions = [
66
{
@@ -85,5 +85,7 @@ describe('ColumnChartWithTrend', () => {
8585
cy.contains('Loading...').should('exist');
8686
});
8787

88+
testChartZoomingTool(ColumnChartWithTrend, { dataset: complexDataSet, dimensions, measures });
89+
8890
cypressPassThroughTestsFactory(ColumnChartWithTrend, { dimensions: [], measures: [] });
8991
});

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { complexDataSet } from '../../resources/DemoProps.js';
22
import { ComposedChart } from './index.js';
3-
import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
3+
import { cypressPassThroughTestsFactory, testChartZoomingTool } from '@/cypress/support/utils';
44

55
const dimensions = [
66
{
@@ -85,5 +85,7 @@ describe('ComposedChart', () => {
8585
cy.contains('Loading...').should('exist');
8686
});
8787

88+
testChartZoomingTool(ComposedChart, { dataset: complexDataSet, dimensions, measures });
89+
8890
cypressPassThroughTestsFactory(ComposedChart, { dimensions: [], measures: [] });
8991
});

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

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ import type { IChartMeasure } from '../../interfaces/IChartMeasure.js';
3434
import { ChartContainer } from '../../internal/ChartContainer.js';
3535
import { ChartDataLabel } from '../../internal/ChartDataLabel.js';
3636
import { defaultFormatter } from '../../internal/defaults.js';
37-
import { tickLineConfig, tooltipContentStyle, tooltipFillOpacity } from '../../internal/staticProps.js';
37+
import { brushProps, tickLineConfig, tooltipContentStyle, tooltipFillOpacity } from '../../internal/staticProps.js';
3838
import { getCellColors, resolvePrimaryAndSecondaryMeasures } from '../../internal/Utils.js';
3939
import { XAxisTicks } from '../../internal/XAxisTicks.js';
4040
import { YAxisTicks } from '../../internal/YAxisTicks.js';
@@ -529,14 +529,12 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
529529
</ChartElement>
530530
);
531531
})}
532-
{chartConfig.zoomingTool && (
532+
{!!chartConfig.zoomingTool && (
533533
<Brush
534-
y={10}
535534
dataKey={primaryDimensionAccessor}
536535
tickFormatter={primaryDimension?.formatter}
537-
stroke={ThemingParameters.sapObjectHeader_BorderColor}
538-
travellerWidth={10}
539-
height={20}
536+
{...brushProps}
537+
{...(typeof chartConfig.zoomingTool === 'object' ? chartConfig.zoomingTool : {})}
540538
/>
541539
)}
542540
{children}

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { complexDataSet } from '../../resources/DemoProps.js';
22
import { LineChart } from './LineChart.js';
3-
import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
3+
import { cypressPassThroughTestsFactory, testChartZoomingTool } from '@/cypress/support/utils';
44

55
const dimensions = [
66
{
@@ -32,6 +32,7 @@ describe('LineChart', () => {
3232
cy.get('.recharts-responsive-container').should('be.visible');
3333
cy.get('.recharts-line').should('have.length', 3);
3434
cy.get('.recharts-line-curve').should('have.length', 3);
35+
cy.get('.recharts-brush').should('not.exist');
3536
});
3637

3738
it('click handlers', () => {
@@ -77,5 +78,7 @@ describe('LineChart', () => {
7778
cy.contains('Loading...').should('exist');
7879
});
7980

81+
testChartZoomingTool(LineChart, { dataset: complexDataSet, dimensions, measures });
82+
8083
cypressPassThroughTestsFactory(LineChart, { dimensions: [], measures: [] });
8184
});

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

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,13 @@ import type { IChartMeasure } from '../../interfaces/IChartMeasure.js';
2727
import { ChartContainer } from '../../internal/ChartContainer.js';
2828
import { ChartDataLabel } from '../../internal/ChartDataLabel.js';
2929
import { defaultFormatter } from '../../internal/defaults.js';
30-
import { tickLineConfig, tooltipContentStyle, tooltipFillOpacity, xAxisPadding } from '../../internal/staticProps.js';
30+
import {
31+
brushProps,
32+
tickLineConfig,
33+
tooltipContentStyle,
34+
tooltipFillOpacity,
35+
xAxisPadding
36+
} from '../../internal/staticProps.js';
3137
import { resolvePrimaryAndSecondaryMeasures } from '../../internal/Utils.js';
3238
import { XAxisTicks } from '../../internal/XAxisTicks.js';
3339
import { YAxisTicks } from '../../internal/YAxisTicks.js';
@@ -344,14 +350,12 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
344350
{...tooltipConfig}
345351
/>
346352
)}
347-
{chartConfig.zoomingTool && (
353+
{!!chartConfig.zoomingTool && (
348354
<Brush
349-
y={10}
350355
dataKey={primaryDimensionAccessor}
351356
tickFormatter={primaryDimension?.formatter}
352-
stroke={ThemingParameters.sapObjectHeader_BorderColor}
353-
travellerWidth={10}
354-
height={20}
357+
{...brushProps}
358+
{...(typeof chartConfig.zoomingTool === 'object' ? chartConfig.zoomingTool : {})}
355359
/>
356360
)}
357361
{children}

‎packages/charts/src/interfaces/ICartesianChartConfig.ts

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { ReferenceLineProps, XAxisProps, YAxisProps } from 'recharts';
1+
import type { BrushProps, ReferenceLineProps, XAxisProps, YAxisProps } from 'recharts';
22

33
export interface ICartesianChartConfig {
44
/**
@@ -26,11 +26,15 @@ export interface ICartesianChartConfig {
2626
gridVertical?: boolean;
2727
gridHorizontal?: boolean;
2828

29+
//todo: remove "Omit" once ref type has been fixed
2930
/**
3031
* Defines whether it should be possible to zoom in on the chart.
31-
* If this prop is `true`, a range slider is displayed on top of the chart, making it possible to zoom-in/zoom-out.
32+
* 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.
33+
*
34+
* __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.
35+
* Please keep in mind that it's possible to override internal APIs, so please use with caution!
3236
*/
33-
zoomingTool?: boolean;
37+
zoomingTool?: boolean | Partial<Omit<BrushProps, 'ref'>>;
3438

3539
/**
3640
* Defines the gab between bars.

‎packages/charts/src/internal/staticProps.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,11 @@ import { ThemingParameters } from '@ui5/webcomponents-react-base';
22

33
export const tickLineConfig = { stroke: 'transparent' };
44
export const tooltipContentStyle = { backgroundColor: ThemingParameters.sapBackgroundColor };
5-
export const tooltipFillOpacity: any = { fillOpacity: 0.3 }; // we need type any due to recharts typing error
5+
export const tooltipFillOpacity = { fillOpacity: 0.3 };
66
export const xAxisPadding = { left: 25, right: 25 };
7+
export const brushProps = {
8+
y: 4,
9+
stroke: ThemingParameters.sapObjectHeader_BorderColor,
10+
travellerWidth: 10,
11+
height: 20
12+
};

‎packages/charts/src/resources/DemoProps.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ export const complexDataSet = [
118118
name: 'September',
119119
users: 200,
120120
sessions: 360,
121-
volume: 879
121+
volume: 1000
122122
},
123123
{
124124
name: 'October',

0 commit comments

Comments
 (0)