Skip to content

Commit 1bc98f9

Browse files
Lukas742Lukas742
authored
feat(charts): allow configuring the internal Legend component (#6493)
Closes #5777
1 parent 88580f0 commit 1bc98f9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+248
-24
lines changed

‎cypress/support/utils.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,3 +84,19 @@ export function testChartZoomingTool(Component, props) {
8484
cy.get('.recharts-brush [stroke="red"]').should('be.visible');
8585
});
8686
}
87+
88+
export function testChartLegendConfig(Component, props) {
89+
it('legendConfig', () => {
90+
cy.mount(
91+
<Component
92+
{...props}
93+
chartConfig={{
94+
legendConfig: {
95+
formatter: (value) => <span data-testid="catval">{value}🐱</span>
96+
}
97+
}}
98+
/>
99+
);
100+
cy.findAllByTestId('catval').should('be.visible');
101+
});
102+
}

‎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, testChartZoomingTool } from '@/cypress/support/utils';
3+
import { cypressPassThroughTestsFactory, testChartLegendConfig, testChartZoomingTool } from '@/cypress/support/utils';
44

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

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

9395
cypressPassThroughTestsFactory(BarChart, { dimensions: [], measures: [] });

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
22
import { Canvas, Meta } from '@storybook/addon-docs';
33
import TooltipStory from '../../resources/TooltipConfig.mdx';
4+
import LegendStory from '../../resources/LegendConfig.mdx';
45
import * as ComponentStories from './BarChart.stories';
56

67
<Meta of={ComponentStories} />
@@ -65,4 +66,9 @@ You can set a reference line to any value by using the `referenceLine` `chartCon
6566

6667
<TooltipStory of={ComponentStories.WithCustomTooltipConfig} />
6768

69+
<LegendStory of={ComponentStories.WithCustomLegendConfig} />
70+
71+
<br />
72+
<br />
73+
6874
<Footer />

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import type { Meta, StoryObj } from '@storybook/react';
2-
import { complexDataSet, secondaryDimensionDataSet, simpleDataSet, tooltipConfig } from '../../resources/DemoProps.js';
2+
import {
3+
complexDataSet,
4+
legendConfig,
5+
secondaryDimensionDataSet,
6+
simpleDataSet,
7+
tooltipConfig
8+
} from '../../resources/DemoProps.js';
39
import { BarChart } from './BarChart.js';
410

511
const meta = {
@@ -156,3 +162,7 @@ export const WithHighlightedMeasure: Story = {
156162
export const WithCustomTooltipConfig: Story = {
157163
args: tooltipConfig
158164
};
165+
166+
export const WithCustomLegendConfig: Story = {
167+
args: legendConfig
168+
};

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -362,6 +362,7 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
362362
align={chartConfig.legendHorizontalAlign}
363363
onClick={onItemLegendClick}
364364
wrapperStyle={legendPosition}
365+
{...chartConfig.legendConfig}
365366
/>
366367
)}
367368
{referenceLine && (

‎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, testChartZoomingTool } from '@/cypress/support/utils';
3+
import { cypressPassThroughTestsFactory, testChartLegendConfig, testChartZoomingTool } from '@/cypress/support/utils';
44

55
const dimensions = [
66
{
@@ -83,5 +83,7 @@ describe('BulletChart', () => {
8383

8484
testChartZoomingTool(BulletChart, { dataset: complexDataSet, dimensions, measures });
8585

86+
testChartLegendConfig(BulletChart, { dataset: complexDataSet, dimensions, measures });
87+
8688
cypressPassThroughTestsFactory(BulletChart, { dimensions: [], measures: [] });
8789
});

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
22
import { Canvas, Meta } from '@storybook/addon-docs';
33
import TooltipStory from '../../resources/TooltipConfig.mdx';
4+
import LegendStory from '../../resources/LegendConfig.mdx';
45
import * as ComponentStories from './BulletChart.stories';
56

67
<Meta of={ComponentStories} />
@@ -67,4 +68,9 @@ You can do this via the `measures` array:
6768

6869
<TooltipStory of={ComponentStories.WithCustomTooltipConfig} />
6970

71+
<LegendStory of={ComponentStories.WithCustomLegendConfig} />
72+
73+
<br />
74+
<br />
75+
7076
<Footer />

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Meta, StoryObj } from '@storybook/react';
2-
import { complexBulletDataset, tooltipConfig } from '../../resources/DemoProps.js';
2+
import { complexBulletDataset, legendConfig, tooltipConfig } from '../../resources/DemoProps.js';
33
import { BulletChart } from './BulletChart.js';
44

55
const meta = {
@@ -120,3 +120,7 @@ export const LoadingPlaceholder: Story = {
120120
export const WithCustomTooltipConfig: Story = {
121121
args: tooltipConfig
122122
};
123+
124+
export const WithCustomLegendConfig: Story = {
125+
args: legendConfig
126+
};

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -440,6 +440,7 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
440440
align={chartConfig.legendHorizontalAlign}
441441
onClick={onItemLegendClick}
442442
wrapperStyle={legendPosition}
443+
{...chartConfig.legendConfig}
443444
/>
444445
)}
445446
{sortedMeasures?.map((element, index) => {

‎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, testChartZoomingTool } from '@/cypress/support/utils';
3+
import { cypressPassThroughTestsFactory, testChartLegendConfig, testChartZoomingTool } from '@/cypress/support/utils';
44

55
const dimensions = [
66
{
@@ -80,5 +80,7 @@ describe('ColumnChart', () => {
8080

8181
testChartZoomingTool(ColumnChart, { dataset: complexDataSet, dimensions, measures });
8282

83+
testChartLegendConfig(ColumnChart, { dataset: complexDataSet, dimensions, measures });
84+
8385
cypressPassThroughTestsFactory(ColumnChart, { dimensions: [], measures: [] });
8486
});

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
22
import { Canvas, Meta } from '@storybook/addon-docs';
33
import TooltipStory from '../../resources/TooltipConfig.mdx';
4+
import LegendStory from '../../resources/LegendConfig.mdx';
45
import * as ComponentStories from './ColumnChart.stories';
56

67
<Meta of={ComponentStories} />
@@ -64,4 +65,9 @@ You can set a reference line to any value by using the `referenceLine` `chartCon
6465

6566
<TooltipStory of={ComponentStories.WithCustomTooltipConfig} />;
6667

68+
<LegendStory of={ComponentStories.WithCustomLegendConfig} />
69+
70+
<br />
71+
<br />
72+
6773
<Footer />

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import type { Meta, StoryObj } from '@storybook/react';
2-
import { complexDataSet, secondaryDimensionDataSet, simpleDataSet, tooltipConfig } from '../../resources/DemoProps.js';
2+
import {
3+
complexDataSet,
4+
legendConfig,
5+
secondaryDimensionDataSet,
6+
simpleDataSet,
7+
tooltipConfig
8+
} from '../../resources/DemoProps.js';
39
import { ColumnChart } from './ColumnChart.js';
410

511
const meta = {
@@ -147,3 +153,7 @@ export const WithHighlightedMeasure: Story = {
147153
export const WithCustomTooltipConfig: Story = {
148154
args: tooltipConfig
149155
};
156+
157+
export const WithCustomLegendConfig: Story = {
158+
args: legendConfig
159+
};

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -355,6 +355,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
355355
align={chartConfig.legendHorizontalAlign}
356356
onClick={onItemLegendClick}
357357
wrapperStyle={legendPosition}
358+
{...chartConfig.legendConfig}
358359
/>
359360
)}
360361
{referenceLine && (

‎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, testChartZoomingTool } from '@/cypress/support/utils';
3+
import { cypressPassThroughTestsFactory, testChartLegendConfig, testChartZoomingTool } from '@/cypress/support/utils';
44

55
const dimensions = [
66
{
@@ -87,5 +87,7 @@ describe('ColumnChartWithTrend', () => {
8787

8888
testChartZoomingTool(ColumnChartWithTrend, { dataset: complexDataSet, dimensions, measures });
8989

90+
testChartLegendConfig(ColumnChartWithTrend, { dataset: complexDataSet, dimensions, measures });
91+
9092
cypressPassThroughTestsFactory(ColumnChartWithTrend, { dimensions: [], measures: [] });
9193
});

‎packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.mdx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
22
import { Canvas, Meta } from '@storybook/addon-docs';
33
import * as ComponentStories from './ColumnChartWithTrend.stories';
4+
import LegendStory from '../../resources/LegendConfig.mdx';
45

56
<Meta of={ComponentStories} />
67

@@ -16,4 +17,9 @@ import * as ComponentStories from './ColumnChartWithTrend.stories';
1617

1718
<Canvas of={ComponentStories.LoadingPlaceholder} />
1819

20+
<LegendStory of={ComponentStories.WithCustomLegendConfig} />
21+
22+
<br />
23+
<br />
24+
1925
<Footer />

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Meta, StoryObj } from '@storybook/react';
2-
import { complexDataSet } from '../../resources/DemoProps.js';
2+
import { complexDataSet, legendConfig } from '../../resources/DemoProps.js';
33
import { ColumnChartWithTrend } from './ColumnChartWithTrend.js';
44

55
const meta = {
@@ -40,3 +40,7 @@ export const LoadingPlaceholder: Story = {
4040
dataset: []
4141
}
4242
};
43+
44+
export const WithCustomLegendConfig: Story = {
45+
args: legendConfig
46+
};

‎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, testChartZoomingTool } from '@/cypress/support/utils';
3+
import { cypressPassThroughTestsFactory, testChartLegendConfig, testChartZoomingTool } from '@/cypress/support/utils';
44

55
const dimensions = [
66
{
@@ -87,5 +87,7 @@ describe('ComposedChart', () => {
8787

8888
testChartZoomingTool(ComposedChart, { dataset: complexDataSet, dimensions, measures });
8989

90+
testChartLegendConfig(ComposedChart, { dataset: complexDataSet, dimensions, measures });
91+
9092
cypressPassThroughTestsFactory(ComposedChart, { dimensions: [], measures: [] });
9193
});

‎packages/charts/src/components/ComposedChart/ComposedChart.mdx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
22
import { Canvas, Meta } from '@storybook/addon-docs';
33
import TooltipStory from '../../resources/TooltipConfig.mdx';
4+
import LegendStory from '../../resources/LegendConfig.mdx';
45
import * as ComponentStories from './ComposedChart.stories';
56

67
<Meta of={ComponentStories} />
@@ -65,4 +66,9 @@ You can set a reference line to any value by using the `referenceLine` `chartCon
6566

6667
<TooltipStory of={ComponentStories.WithCustomTooltipConfig} />
6768

69+
<LegendStory of={ComponentStories.WithCustomLegendConfig} />
70+
71+
<br />
72+
<br />
73+
6874
<Footer />

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Meta, StoryObj } from '@storybook/react';
2-
import { bigDataSet, complexDataSet, simpleDataSet, tooltipConfig } from '../../resources/DemoProps.js';
2+
import { bigDataSet, complexDataSet, legendConfig, simpleDataSet, tooltipConfig } from '../../resources/DemoProps.js';
33
import { ComposedChart } from './index.js';
44

55
const meta = {
@@ -207,3 +207,7 @@ export const LoadingPlaceholder: Story = {
207207
export const WithCustomTooltipConfig: Story = {
208208
args: tooltipConfig
209209
};
210+
211+
export const WithCustomLegendConfig: Story = {
212+
args: legendConfig
213+
};

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -444,6 +444,7 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
444444
align={chartConfig.legendHorizontalAlign}
445445
onClick={onItemLegendClick}
446446
wrapperStyle={legendPosition}
447+
{...chartConfig.legendConfig}
447448
/>
448449
)}
449450
{measures?.map((element, index) => {

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

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

55
const dimension = {
66
accessor: 'name'
@@ -61,4 +61,6 @@ describe('DonutChart', () => {
6161
});
6262

6363
cypressPassThroughTestsFactory(DonutChart, { dimension: {}, measure: {} });
64+
65+
testChartLegendConfig(DonutChart, { dataset: complexDataSet, dimension, measure });
6466
});

‎packages/charts/src/components/DonutChart/DonutChart.mdx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Canvas, Meta } from '@storybook/addon-docs';
22
import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
33
import TooltipStory from '../../resources/TooltipConfig.mdx';
44
import * as ComponentStories from './DonutChart.stories';
5+
import LegendStory from '../../resources/LegendConfig.mdx';
56

67
<Meta of={ComponentStories} />
78

@@ -50,4 +51,9 @@ import * as ComponentStories from './DonutChart.stories';
5051

5152
<TooltipStory of={ComponentStories.WithCustomTooltipConfig} />
5253

54+
<LegendStory of={ComponentStories.WithCustomLegendConfig} />
55+
56+
<br />
57+
<br />
58+
5359
<Footer />

‎packages/charts/src/components/DonutChart/DonutChart.stories.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Meta, StoryObj } from '@storybook/react';
2-
import { simpleDataSet, simpleDataSetWithSmallValues, tooltipConfig } from '../../resources/DemoProps.js';
2+
import { legendConfig, simpleDataSet, simpleDataSetWithSmallValues, tooltipConfig } from '../../resources/DemoProps.js';
33
import { DonutChart } from './DonutChart.js';
44

55
const meta = {
@@ -99,3 +99,7 @@ export const HideLabels: Story = {
9999
export const WithCustomTooltipConfig: Story = {
100100
args: tooltipConfig
101101
};
102+
103+
export const WithCustomLegendConfig: Story = {
104+
args: legendConfig
105+
};

‎packages/charts/src/components/LineChart/LineChart.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 { LineChart } from './LineChart.js';
3-
import { cypressPassThroughTestsFactory, testChartZoomingTool } from '@/cypress/support/utils';
3+
import { cypressPassThroughTestsFactory, testChartLegendConfig, testChartZoomingTool } from '@/cypress/support/utils';
44

55
const dimensions = [
66
{
@@ -80,5 +80,7 @@ describe('LineChart', () => {
8080

8181
testChartZoomingTool(LineChart, { dataset: complexDataSet, dimensions, measures });
8282

83+
testChartLegendConfig(LineChart, { dataset: complexDataSet, dimensions, measures });
84+
8385
cypressPassThroughTestsFactory(LineChart, { dimensions: [], measures: [] });
8486
});

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Canvas, Meta } from '@storybook/addon-docs';
22
import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
33
import TooltipStory from '../../resources/TooltipConfig.mdx';
44
import * as ComponentStories from './LineChart.stories';
5+
import LegendStory from '../../resources/LegendConfig.mdx';
56

67
<Meta of={ComponentStories} />
78

@@ -92,4 +93,9 @@ export const LineChartWithLinearGradient = () => {
9293

9394
<TooltipStory of={ComponentStories.WithCustomTooltipConfig} />
9495

96+
<LegendStory of={ComponentStories.WithCustomLegendConfig} />
97+
98+
<br />
99+
<br />
100+
95101
<Footer />

0 commit comments

Comments
 (0)