Skip to content

Commit e902c1a

Browse files
Lukas742Lukas742
authored
fix(charts): prevent data points from being covered by zoomingTool (#6490)
1 parent 252c2ea commit e902c1a

File tree

14 files changed

+53
-53
lines changed

14 files changed

+53
-53
lines changed

‎cypress/support/utils.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,3 +70,13 @@ 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+
}

‎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: 2 additions & 9 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';
@@ -377,14 +377,7 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
377377
/>
378378
)}
379379
{chartConfig.zoomingTool && (
380-
<Brush
381-
y={10}
382-
dataKey={primaryDimensionAccessor}
383-
tickFormatter={primaryDimension?.formatter}
384-
stroke={ThemingParameters.sapObjectHeader_BorderColor}
385-
travellerWidth={10}
386-
height={20}
387-
/>
380+
<Brush dataKey={primaryDimensionAccessor} tickFormatter={primaryDimension?.formatter} {...brushProps} />
388381
)}
389382
{children}
390383
</BarChartLib>

‎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: 2 additions & 9 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';
@@ -499,14 +499,7 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
499499
);
500500
})}
501501
{chartConfig.zoomingTool && (
502-
<Brush
503-
y={10}
504-
dataKey={primaryDimensionAccessor}
505-
tickFormatter={primaryDimension?.formatter}
506-
stroke={ThemingParameters.sapObjectHeader_BorderColor}
507-
travellerWidth={10}
508-
height={20}
509-
/>
502+
<Brush dataKey={primaryDimensionAccessor} tickFormatter={primaryDimension?.formatter} {...brushProps} />
510503
)}
511504
{children}
512505
</ComposedChartLib>

‎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: 2 additions & 9 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';
@@ -372,14 +372,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
372372
/>
373373
)}
374374
{chartConfig.zoomingTool && (
375-
<Brush
376-
y={10}
377-
dataKey={primaryDimensionAccessor}
378-
tickFormatter={primaryDimension?.formatter}
379-
stroke={ThemingParameters.sapObjectHeader_BorderColor}
380-
travellerWidth={10}
381-
height={20}
382-
/>
375+
<Brush dataKey={primaryDimensionAccessor} tickFormatter={primaryDimension?.formatter} {...brushProps} />
383376
)}
384377
{children}
385378
</ColumnChartLib>

‎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: 2 additions & 9 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';
@@ -523,14 +523,7 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
523523
);
524524
})}
525525
{chartConfig.zoomingTool && (
526-
<Brush
527-
y={10}
528-
dataKey={primaryDimensionAccessor}
529-
tickFormatter={primaryDimension?.formatter}
530-
stroke={ThemingParameters.sapObjectHeader_BorderColor}
531-
travellerWidth={10}
532-
height={20}
533-
/>
526+
<Brush dataKey={primaryDimensionAccessor} tickFormatter={primaryDimension?.formatter} {...brushProps} />
534527
)}
535528
{children}
536529
</ComposedChartLib>

‎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: 8 additions & 9 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';
@@ -340,14 +346,7 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
340346
/>
341347
)}
342348
{chartConfig.zoomingTool && (
343-
<Brush
344-
y={10}
345-
dataKey={primaryDimensionAccessor}
346-
tickFormatter={primaryDimension?.formatter}
347-
stroke={ThemingParameters.sapObjectHeader_BorderColor}
348-
travellerWidth={10}
349-
height={20}
350-
/>
349+
<Brush dataKey={primaryDimensionAccessor} tickFormatter={primaryDimension?.formatter} {...brushProps} />
351350
)}
352351
{children}
353352
</LineChartLib>

‎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
@@ -74,7 +74,7 @@ export const complexDataSet = [
7474
name: 'September',
7575
users: 200,
7676
sessions: 360,
77-
volume: 879
77+
volume: 1000
7878
},
7979
{
8080
name: 'October',

0 commit comments

Comments
 (0)