feat(charts): allow configuring the internal Legend component

cypress/support/utils.tsx

@@ -84,3 +84,19 @@ export function testChartZoomingTool(Component, props) {
     cy.get('.recharts-brush [stroke="red"]').should('be.visible');
   });
 }
+
+export function testChartLegendConfig(Component, props) {
+  it('legendConfig', () => {
+    cy.mount(
+      <Component
+        {...props}
+        chartConfig={{
+          legendConfig: {
+            formatter: (value) => <span data-testid="catval">{value}🐱</span>
+          }
+        }}
+      />
+    );
+    cy.findAllByTestId('catval').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, testChartZoomingTool } from '@/cypress/support/utils';
+import { cypressPassThroughTestsFactory, testChartLegendConfig, testChartZoomingTool } from '@/cypress/support/utils';
 
 const dimensions = [
   {
@@ -88,6 +88,8 @@ describe('BarChart', () => {
     cy.contains('Loading...').should('exist');
   });
 
+  testChartLegendConfig(BarChart, { dataset: complexDataSet, dimensions, measures });
+
   testChartZoomingTool(BarChart, { dataset: complexDataSet, dimensions, measures });
 
   cypressPassThroughTestsFactory(BarChart, { dimensions: [], measures: [] });

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

@@ -1,6 +1,7 @@
 import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs';
 import TooltipStory from '../../resources/TooltipConfig.mdx';
+import LegendStory from '../../resources/LegendConfig.mdx';
 import * as ComponentStories from './BarChart.stories';
 
 <Meta of={ComponentStories} />
@@ -65,4 +66,9 @@ You can set a reference line to any value by using the `referenceLine` `chartCon
 
 <TooltipStory of={ComponentStories.WithCustomTooltipConfig} />
 
+<LegendStory of={ComponentStories.WithCustomLegendConfig} />
+
+<br />
+<br />
+
 <Footer />

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

@@ -1,5 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { complexDataSet, secondaryDimensionDataSet, simpleDataSet, tooltipConfig } from '../../resources/DemoProps.js';
+import {
+  complexDataSet,
+  legendConfig,
+  secondaryDimensionDataSet,
+  simpleDataSet,
+  tooltipConfig
+} from '../../resources/DemoProps.js';
 import { BarChart } from './BarChart.js';
 
 const meta = {
@@ -156,3 +162,7 @@ export const WithHighlightedMeasure: Story = {
 export const WithCustomTooltipConfig: Story = {
   args: tooltipConfig
 };
+
+export const WithCustomLegendConfig: Story = {
+  args: legendConfig
+};

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

@@ -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);
@@ -362,6 +362,7 @@
             align={chartConfig.legendHorizontalAlign}
             onClick={onItemLegendClick}
             wrapperStyle={legendPosition}
+            {...chartConfig.legendConfig}
           />
         )}
         {referenceLine && (

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, testChartZoomingTool } from '@/cypress/support/utils';
+import { cypressPassThroughTestsFactory, testChartLegendConfig, testChartZoomingTool } from '@/cypress/support/utils';
 
 const dimensions = [
   {
@@ -83,5 +83,7 @@ describe('BulletChart', () => {
 
   testChartZoomingTool(BulletChart, { dataset: complexDataSet, dimensions, measures });
 
+  testChartLegendConfig(BulletChart, { dataset: complexDataSet, dimensions, measures });
+
   cypressPassThroughTestsFactory(BulletChart, { dimensions: [], measures: [] });
 });

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

@@ -1,6 +1,7 @@
 import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs';
 import TooltipStory from '../../resources/TooltipConfig.mdx';
+import LegendStory from '../../resources/LegendConfig.mdx';
 import * as ComponentStories from './BulletChart.stories';
 
 <Meta of={ComponentStories} />
@@ -67,4 +68,9 @@ You can do this via the `measures` array:
 
 <TooltipStory of={ComponentStories.WithCustomTooltipConfig} />
 
+<LegendStory of={ComponentStories.WithCustomLegendConfig} />
+
+<br />
+<br />
+
 <Footer />

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { complexBulletDataset, tooltipConfig } from '../../resources/DemoProps.js';
+import { complexBulletDataset, legendConfig, tooltipConfig } from '../../resources/DemoProps.js';
 import { BulletChart } from './BulletChart.js';
 
 const meta = {
@@ -120,3 +120,7 @@ export const LoadingPlaceholder: Story = {
 export const WithCustomTooltipConfig: Story = {
   args: tooltipConfig
 };
+
+export const WithCustomLegendConfig: Story = {
+  args: legendConfig
+};

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

@@ -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,
@@ -440,10 +440,11 @@
             align={chartConfig.legendHorizontalAlign}
             onClick={onItemLegendClick}
             wrapperStyle={legendPosition}
+            {...chartConfig.legendConfig}
           />
         )}
         {sortedMeasures?.map((element, index) => {
           const chartElementProps: any = {
             isAnimationActive: !noAnimation
           };
           let labelPosition = 'top';

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, testChartZoomingTool } from '@/cypress/support/utils';
+import { cypressPassThroughTestsFactory, testChartLegendConfig, testChartZoomingTool } from '@/cypress/support/utils';
 
 const dimensions = [
   {
@@ -80,5 +80,7 @@ describe('ColumnChart', () => {
 
   testChartZoomingTool(ColumnChart, { dataset: complexDataSet, dimensions, measures });
 
+  testChartLegendConfig(ColumnChart, { dataset: complexDataSet, dimensions, measures });
+
   cypressPassThroughTestsFactory(ColumnChart, { dimensions: [], measures: [] });
 });

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

@@ -1,6 +1,7 @@
 import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs';
 import TooltipStory from '../../resources/TooltipConfig.mdx';
+import LegendStory from '../../resources/LegendConfig.mdx';
 import * as ComponentStories from './ColumnChart.stories';
 
 <Meta of={ComponentStories} />
@@ -64,4 +65,9 @@ You can set a reference line to any value by using the `referenceLine` `chartCon
 
 <TooltipStory of={ComponentStories.WithCustomTooltipConfig} />;
 
+<LegendStory of={ComponentStories.WithCustomLegendConfig} />
+
+<br />
+<br />
+
 <Footer />

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

@@ -1,5 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { complexDataSet, secondaryDimensionDataSet, simpleDataSet, tooltipConfig } from '../../resources/DemoProps.js';
+import {
+  complexDataSet,
+  legendConfig,
+  secondaryDimensionDataSet,
+  simpleDataSet,
+  tooltipConfig
+} from '../../resources/DemoProps.js';
 import { ColumnChart } from './ColumnChart.js';
 
 const meta = {
@@ -147,3 +153,7 @@ export const WithHighlightedMeasure: Story = {
 export const WithCustomTooltipConfig: Story = {
   args: tooltipConfig
 };
+
+export const WithCustomLegendConfig: Story = {
+  args: legendConfig
+};

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

@@ -355,6 +355,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
             align={chartConfig.legendHorizontalAlign}
             onClick={onItemLegendClick}
             wrapperStyle={legendPosition}
+            {...chartConfig.legendConfig}
           />
         )}
         {referenceLine && (

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, testChartZoomingTool } from '@/cypress/support/utils';
+import { cypressPassThroughTestsFactory, testChartLegendConfig, testChartZoomingTool } from '@/cypress/support/utils';
 
 const dimensions = [
   {
@@ -87,5 +87,7 @@ describe('ColumnChartWithTrend', () => {
 
   testChartZoomingTool(ColumnChartWithTrend, { dataset: complexDataSet, dimensions, measures });
 
+  testChartLegendConfig(ColumnChartWithTrend, { dataset: complexDataSet, dimensions, measures });
+
   cypressPassThroughTestsFactory(ColumnChartWithTrend, { dimensions: [], measures: [] });
 });

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

@@ -1,6 +1,7 @@
 import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs';
 import * as ComponentStories from './ColumnChartWithTrend.stories';
+import LegendStory from '../../resources/LegendConfig.mdx';
 
 <Meta of={ComponentStories} />
 
@@ -16,4 +17,9 @@ import * as ComponentStories from './ColumnChartWithTrend.stories';
 
 <Canvas of={ComponentStories.LoadingPlaceholder} />
 
+<LegendStory of={ComponentStories.WithCustomLegendConfig} />
+
+<br />
+<br />
+
 <Footer />

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { complexDataSet } from '../../resources/DemoProps.js';
+import { complexDataSet, legendConfig } from '../../resources/DemoProps.js';
 import { ColumnChartWithTrend } from './ColumnChartWithTrend.js';
 
 const meta = {
@@ -40,3 +40,7 @@ export const LoadingPlaceholder: Story = {
     dataset: []
   }
 };
+
+export const WithCustomLegendConfig: Story = {
+  args: legendConfig
+};

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, testChartZoomingTool } from '@/cypress/support/utils';
+import { cypressPassThroughTestsFactory, testChartLegendConfig, testChartZoomingTool } from '@/cypress/support/utils';
 
 const dimensions = [
   {
@@ -87,5 +87,7 @@ describe('ComposedChart', () => {
 
   testChartZoomingTool(ComposedChart, { dataset: complexDataSet, dimensions, measures });
 
+  testChartLegendConfig(ComposedChart, { dataset: complexDataSet, dimensions, measures });
+
   cypressPassThroughTestsFactory(ComposedChart, { dimensions: [], measures: [] });
 });

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

@@ -1,6 +1,7 @@
 import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs';
 import TooltipStory from '../../resources/TooltipConfig.mdx';
+import LegendStory from '../../resources/LegendConfig.mdx';
 import * as ComponentStories from './ComposedChart.stories';
 
 <Meta of={ComponentStories} />
@@ -65,4 +66,9 @@ You can set a reference line to any value by using the `referenceLine` `chartCon
 
 <TooltipStory of={ComponentStories.WithCustomTooltipConfig} />
 
+<LegendStory of={ComponentStories.WithCustomLegendConfig} />
+
+<br />
+<br />
+
 <Footer />

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { bigDataSet, complexDataSet, simpleDataSet, tooltipConfig } from '../../resources/DemoProps.js';
+import { bigDataSet, complexDataSet, legendConfig, simpleDataSet, tooltipConfig } from '../../resources/DemoProps.js';
 import { ComposedChart } from './index.js';
 
 const meta = {
@@ -207,3 +207,7 @@ export const LoadingPlaceholder: Story = {
 export const WithCustomTooltipConfig: Story = {
   args: tooltipConfig
 };
+
+export const WithCustomLegendConfig: Story = {
+  args: legendConfig
+};

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

@@ -444,6 +444,7 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
             align={chartConfig.legendHorizontalAlign}
             onClick={onItemLegendClick}
             wrapperStyle={legendPosition}
+            {...chartConfig.legendConfig}
           />
         )}
         {measures?.map((element, index) => {

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

@@ -1,6 +1,6 @@
-import { simpleDataSet } from '../../resources/DemoProps.js';
+import { complexDataSet, simpleDataSet } from '../../resources/DemoProps.js';
 import { DonutChart } from './DonutChart.js';
-import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
+import { cypressPassThroughTestsFactory, testChartLegendConfig } from '@/cypress/support/utils';
 
 const dimension = {
   accessor: 'name'
@@ -61,4 +61,6 @@ describe('DonutChart', () => {
   });
 
   cypressPassThroughTestsFactory(DonutChart, { dimension: {}, measure: {} });
+
+  testChartLegendConfig(DonutChart, { dataset: complexDataSet, dimension, measure });
 });

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

@@ -2,6 +2,7 @@ import { Canvas, Meta } from '@storybook/addon-docs';
 import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './DonutChart.stories';
+import LegendStory from '../../resources/LegendConfig.mdx';
 
 <Meta of={ComponentStories} />
 
@@ -50,4 +51,9 @@ import * as ComponentStories from './DonutChart.stories';
 
 <TooltipStory of={ComponentStories.WithCustomTooltipConfig} />
 
+<LegendStory of={ComponentStories.WithCustomLegendConfig} />
+
+<br />
+<br />
+
 <Footer />

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { simpleDataSet, simpleDataSetWithSmallValues, tooltipConfig } from '../../resources/DemoProps.js';
+import { legendConfig, simpleDataSet, simpleDataSetWithSmallValues, tooltipConfig } from '../../resources/DemoProps.js';
 import { DonutChart } from './DonutChart.js';
 
 const meta = {
@@ -99,3 +99,7 @@ export const HideLabels: Story = {
 export const WithCustomTooltipConfig: Story = {
   args: tooltipConfig
 };
+
+export const WithCustomLegendConfig: Story = {
+  args: legendConfig
+};

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, testChartZoomingTool } from '@/cypress/support/utils';
+import { cypressPassThroughTestsFactory, testChartLegendConfig, testChartZoomingTool } from '@/cypress/support/utils';
 
 const dimensions = [
   {
@@ -80,5 +80,7 @@ describe('LineChart', () => {
 
   testChartZoomingTool(LineChart, { dataset: complexDataSet, dimensions, measures });
 
+  testChartLegendConfig(LineChart, { dataset: complexDataSet, dimensions, measures });
+
   cypressPassThroughTestsFactory(LineChart, { dimensions: [], measures: [] });
 });

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

@@ -2,6 +2,7 @@ import { Canvas, Meta } from '@storybook/addon-docs';
 import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './LineChart.stories';
+import LegendStory from '../../resources/LegendConfig.mdx';
 
 <Meta of={ComponentStories} />
 
@@ -92,4 +93,9 @@ export const LineChartWithLinearGradient = () => {
 
 <TooltipStory of={ComponentStories.WithCustomTooltipConfig} />
 
+<LegendStory of={ComponentStories.WithCustomLegendConfig} />
+
+<br />
+<br />
+
 <Footer />