From cb3d7ed38a34e25bd9d4a9a621e6702de937c05a Mon Sep 17 00:00:00 2001 From: Matt Vickers Date: Thu, 4 Apr 2024 13:10:18 -0500 Subject: [PATCH] Added seriesNameFormatter --- packages/polaris-viz/CHANGELOG.md | 6 ++- .../src/components/BarChart/BarChart.tsx | 5 ++ .../FormattedValues.chromatic.stories.tsx | 51 +++++++++++++++++++ .../src/components/ComboChart/Chart.tsx | 5 ++ .../src/components/ComboChart/ComboChart.tsx | 4 ++ .../hooks/useComboChartTooltipContent.ts | 13 +++-- .../FormattedValues.chromatic.stories.tsx | 29 +++++++++++ .../stories/components/SampleComponents.tsx | 1 + .../components/LegendValues/LegendValues.tsx | 1 + .../components/HorizontalBarChart/Chart.tsx | 5 ++ .../HorizontalBarChart/HorizontalBarChart.tsx | 4 ++ .../LegendContainer/hooks/useLegend.ts | 4 +- .../src/components/LineChart/Chart.tsx | 5 ++ .../src/components/LineChart/LineChart.tsx | 4 ++ .../hooks/useLineChartTooltipContent.ts | 18 +++++-- .../FormattedValues.chromatic.stories.tsx | 32 ++++++++++++ .../LineChartPredictive.tsx | 3 ++ .../components/CustomLegend/CustomLegend.tsx | 6 ++- .../FormattedValues.chromatic.stories.tsx | 33 ++++++++++++ .../LineChartRelational.tsx | 12 +++-- .../components/CustomLegend/CustomLegend.tsx | 8 +-- .../components/LineChartRelational/index.ts | 1 + .../stories/Default.stories.tsx | 4 +- .../FormattedValues.chromatic.stories.tsx | 34 +++++++++++++ .../src/components/SimpleBarChart/Chart.tsx | 4 ++ .../SimpleBarChart/SimpleBarChart.tsx | 4 ++ .../FormattedValues.chromatic.stories.tsx | 32 ++++++++++++ .../src/components/StackedAreaChart/Chart.tsx | 5 ++ .../StackedAreaChart/StackedAreaChart.tsx | 4 ++ .../hooks/useStackedChartTooltipContent.ts | 12 +++-- .../FormattedValues.chromatic.stories.tsx | 32 ++++++++++++ .../src/components/VerticalBarChart/Chart.tsx | 5 ++ .../VerticalBarChart/VerticalBarChart.tsx | 4 ++ packages/polaris-viz/src/components/index.ts | 1 + .../src/hooks/useBarChartTooltipContent.ts | 12 +++-- packages/polaris-viz/src/index.ts | 1 + 36 files changed, 380 insertions(+), 24 deletions(-) create mode 100644 packages/polaris-viz/src/components/BarChart/stories/FormattedValues.chromatic.stories.tsx create mode 100644 packages/polaris-viz/src/components/ComboChart/stories/FormattedValues.chromatic.stories.tsx create mode 100644 packages/polaris-viz/src/components/LineChart/stories/FormattedValues.chromatic.stories.tsx create mode 100644 packages/polaris-viz/src/components/LineChartPredictive/stories/FormattedValues.chromatic.stories.tsx create mode 100644 packages/polaris-viz/src/components/LineChartRelational/stories/FormattedValues.chromatic.stories.tsx create mode 100644 packages/polaris-viz/src/components/SimpleBarChart/stories/FormattedValues.chromatic.stories.tsx create mode 100644 packages/polaris-viz/src/components/StackedAreaChart/stories/FormattedValues.chromatic.stories.tsx diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md index 8fc27e58f7..1eea8bd124 100644 --- a/packages/polaris-viz/CHANGELOG.md +++ b/packages/polaris-viz/CHANGELOG.md @@ -5,7 +5,11 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). - +## Unreleased + +### Added + +- Added `seriesNameFormatter` prop to ``, ``, ``, ``, ``, `` & ``. ## [12.4.2] - 2024-04-04 diff --git a/packages/polaris-viz/src/components/BarChart/BarChart.tsx b/packages/polaris-viz/src/components/BarChart/BarChart.tsx index 1e7084e683..d2bf5a5b5b 100644 --- a/packages/polaris-viz/src/components/BarChart/BarChart.tsx +++ b/packages/polaris-viz/src/components/BarChart/BarChart.tsx @@ -12,6 +12,7 @@ import type { YAxisOptions, ChartType, ChartProps, + LabelFormatter, } from '@shopify/polaris-viz-core'; import {getTooltipContentRenderer} from '../../utilities/getTooltipContentRenderer'; @@ -39,6 +40,7 @@ export type BarChartProps = { direction?: Direction; emptyStateText?: string; renderLegendContent?: RenderLegendContent; + seriesNameFormatter?: LabelFormatter; showLegend?: boolean; skipLinkText?: string; theme?: string; @@ -70,6 +72,7 @@ export function BarChart(props: BarChartProps) { yAxisOptions, onError, renderHiddenLegendLabel, + seriesNameFormatter = (value) => `${value}`, } = { ...DEFAULT_CHART_PROPS, ...props, @@ -105,6 +108,7 @@ export function BarChart(props: BarChartProps) { emptyStateText={emptyStateText} renderLegendContent={renderLegendContent} renderTooltipContent={renderTooltip} + seriesNameFormatter={seriesNameFormatter} showLegend={showLegend} type={type} xAxisOptions={xAxisOptionsWithDefaults} @@ -118,6 +122,7 @@ export function BarChart(props: BarChartProps) { renderHiddenLegendLabel={renderHiddenLegendLabel} renderLegendContent={renderLegendContent} renderTooltipContent={renderTooltip} + seriesNameFormatter={seriesNameFormatter} showLegend={showLegend} type={type} xAxisOptions={xAxisOptionsWithDefaults} diff --git a/packages/polaris-viz/src/components/BarChart/stories/FormattedValues.chromatic.stories.tsx b/packages/polaris-viz/src/components/BarChart/stories/FormattedValues.chromatic.stories.tsx new file mode 100644 index 0000000000..02a15fb284 --- /dev/null +++ b/packages/polaris-viz/src/components/BarChart/stories/FormattedValues.chromatic.stories.tsx @@ -0,0 +1,51 @@ +import type {Story} from '@storybook/react'; + +import {META} from './meta'; + +import type {BarChartProps} from '../../../components'; + +import {DEFAULT_DATA, Template} from './data'; + +export default { + ...META, + title: 'polaris-viz/Chromatic/Charts/BarChart', + parameters: { + ...META.parameters, + chromatic: {disableSnapshot: false}, + }, +}; + +export const FormattedValues: Story = Template.bind({}); + +FormattedValues.args = { + data: DEFAULT_DATA, + seriesNameFormatter: (value) => `Name: ${value}`, + xAxisOptions: { + labelFormatter: (value) => `xAxis: ${value}`, + }, + yAxisOptions: { + labelFormatter: (value) => `yAxis: ${value}`, + }, + onError: (a, b) => { + console.log({a, b}); + }, +}; + +export const FormattedValuesHorizontal: Story = Template.bind( + {}, +); + +FormattedValuesHorizontal.args = { + data: DEFAULT_DATA, + direction: 'horizontal', + seriesNameFormatter: (value) => `Name: ${value}`, + xAxisOptions: { + labelFormatter: (value) => `xAxis: ${value}`, + }, + yAxisOptions: { + labelFormatter: (value) => `yAxis: ${value}`, + }, + onError: (a, b) => { + console.log({a, b}); + }, +}; diff --git a/packages/polaris-viz/src/components/ComboChart/Chart.tsx b/packages/polaris-viz/src/components/ComboChart/Chart.tsx index 34e1e87300..4180977b2b 100644 --- a/packages/polaris-viz/src/components/ComboChart/Chart.tsx +++ b/packages/polaris-viz/src/components/ComboChart/Chart.tsx @@ -13,6 +13,7 @@ import type { DataGroup, BoundingRect, XAxisOptions, + LabelFormatter, } from '@shopify/polaris-viz-core'; import {ChartElements} from '../ChartElements'; @@ -56,6 +57,7 @@ export interface ChartProps { annotationsLookupTable: AnnotationLookupTable; data: DataGroup[]; renderTooltipContent(data: RenderTooltipContentData): React.ReactNode; + seriesNameFormatter: LabelFormatter; showLegend: boolean; theme: string; xAxisOptions: Required; @@ -72,6 +74,7 @@ export function Chart({ theme, xAxisOptions, renderLegendContent, + seriesNameFormatter, }: ChartProps) { const selectedTheme = useTheme(theme); @@ -89,6 +92,7 @@ export function Chart({ data, dimensions, showLegend, + seriesNameFormatter, }); const {drawableHeight, chartYPosition, xAxisBounds, yAxisBounds} = @@ -173,6 +177,7 @@ export function Chart({ renderTooltipContent, data, seriesColors: colors, + seriesNameFormatter, }); const {hasXAxisAnnotations, hasYAxisAnnotations} = checkAvailableAnnotations( diff --git a/packages/polaris-viz/src/components/ComboChart/ComboChart.tsx b/packages/polaris-viz/src/components/ComboChart/ComboChart.tsx index 27b774b563..b332a84252 100644 --- a/packages/polaris-viz/src/components/ComboChart/ComboChart.tsx +++ b/packages/polaris-viz/src/components/ComboChart/ComboChart.tsx @@ -7,6 +7,7 @@ import type { DataGroup, ChartProps, XAxisOptions, + LabelFormatter, } from '@shopify/polaris-viz-core'; import type {ReactNode} from 'react'; @@ -27,6 +28,7 @@ export type ComboChartProps = { data: DataGroup[]; annotations?: ComboAnnotation[]; renderTooltipContent?(data: RenderTooltipContentData): ReactNode; + seriesNameFormatter?: LabelFormatter; showLegend?: boolean; xAxisOptions?: Partial; renderLegendContent?: RenderLegendContent; @@ -42,6 +44,7 @@ export function ComboChart(props: ComboChartProps) { id, isAnimated, renderTooltipContent, + seriesNameFormatter = (value) => `${value}`, showLegend = true, theme = defaultTheme, xAxisOptions, @@ -84,6 +87,7 @@ export function ComboChart(props: ComboChartProps) { annotationsLookupTable={annotationsLookupTable} data={data} renderTooltipContent={renderTooltip} + seriesNameFormatter={seriesNameFormatter} showLegend={showLegend} theme={theme} xAxisOptions={xAxisOptionsWithDefaults} diff --git a/packages/polaris-viz/src/components/ComboChart/hooks/useComboChartTooltipContent.ts b/packages/polaris-viz/src/components/ComboChart/hooks/useComboChartTooltipContent.ts index 07705ada49..4465352d91 100644 --- a/packages/polaris-viz/src/components/ComboChart/hooks/useComboChartTooltipContent.ts +++ b/packages/polaris-viz/src/components/ComboChart/hooks/useComboChartTooltipContent.ts @@ -1,6 +1,11 @@ import type {ReactNode} from 'react'; import {useCallback} from 'react'; -import type {Color, DataGroup, Shape} from '@shopify/polaris-viz-core'; +import type { + Color, + DataGroup, + LabelFormatter, + Shape, +} from '@shopify/polaris-viz-core'; import {useChartContext} from '@shopify/polaris-viz-core'; import {flattenDataGroupToDataSeries} from '../../../utilities/flattenDataGroupToDataSeries'; @@ -14,12 +19,14 @@ export interface Props { data: DataGroup[]; seriesColors: Color[]; renderTooltipContent: (data: RenderTooltipContentData) => ReactNode; + seriesNameFormatter: LabelFormatter; } export function useComboChartTooltipContent({ data, renderTooltipContent, seriesColors, + seriesNameFormatter, }: Props) { const {theme} = useChartContext(); @@ -51,7 +58,7 @@ export function useComboChartTooltipContent({ const {value} = seriesData[activeIndex]; data.data.push({ - key: `${name}`, + key: `${seriesNameFormatter(name ?? '')}`, value: yAxisOptionsWithDefaults.labelFormatter(value), color: color ?? seriesColors[index], isComparison, @@ -71,6 +78,6 @@ export function useComboChartTooltipContent({ theme, }); }, - [data, seriesColors, renderTooltipContent, theme], + [data, seriesColors, renderTooltipContent, theme, seriesNameFormatter], ); } diff --git a/packages/polaris-viz/src/components/ComboChart/stories/FormattedValues.chromatic.stories.tsx b/packages/polaris-viz/src/components/ComboChart/stories/FormattedValues.chromatic.stories.tsx new file mode 100644 index 0000000000..80046d25c6 --- /dev/null +++ b/packages/polaris-viz/src/components/ComboChart/stories/FormattedValues.chromatic.stories.tsx @@ -0,0 +1,29 @@ +import type {Story} from '@storybook/react'; + +import {META} from './meta'; + +import type {ComboChartProps} from '../../../components'; + +import {DEFAULT_DATA, Template} from './data'; + +export default { + ...META, + title: 'polaris-viz/Chromatic/Charts/ComboChart', + parameters: { + ...META.parameters, + chromatic: {disableSnapshot: false}, + }, +}; + +export const FormattedValues: Story = Template.bind({}); + +FormattedValues.args = { + data: DEFAULT_DATA, + seriesNameFormatter: (value) => `Name: ${value}`, + xAxisOptions: { + labelFormatter: (value) => `xAxis: ${value}`, + }, + onError: (a, b) => { + console.log({a, b}); + }, +}; diff --git a/packages/polaris-viz/src/components/Docs/stories/components/SampleComponents.tsx b/packages/polaris-viz/src/components/Docs/stories/components/SampleComponents.tsx index 17b3ce4435..0919bd868d 100644 --- a/packages/polaris-viz/src/components/Docs/stories/components/SampleComponents.tsx +++ b/packages/polaris-viz/src/components/Docs/stories/components/SampleComponents.tsx @@ -244,6 +244,7 @@ export const SampleLegendContainer = ({theme} = {theme: 'Default'}) => { showLegend: true, dimensions: {height: 0, width: 0}, colors, + seriesNameFormatter: (value) => `${value}`, }); return ( diff --git a/packages/polaris-viz/src/components/DonutChart/components/LegendValues/LegendValues.tsx b/packages/polaris-viz/src/components/DonutChart/components/LegendValues/LegendValues.tsx index 9201e53216..5929208abb 100644 --- a/packages/polaris-viz/src/components/DonutChart/components/LegendValues/LegendValues.tsx +++ b/packages/polaris-viz/src/components/DonutChart/components/LegendValues/LegendValues.tsx @@ -60,6 +60,7 @@ export function LegendValues({ data: [{series: allData, shape: 'Bar'}], colors: seriesColors, dimensions, + seriesNameFormatter, }); const {displayedData, hiddenData} = useOverflowLegend({ diff --git a/packages/polaris-viz/src/components/HorizontalBarChart/Chart.tsx b/packages/polaris-viz/src/components/HorizontalBarChart/Chart.tsx index 6ef9f1aa0e..2a8f92e2f7 100644 --- a/packages/polaris-viz/src/components/HorizontalBarChart/Chart.tsx +++ b/packages/polaris-viz/src/components/HorizontalBarChart/Chart.tsx @@ -14,6 +14,7 @@ import type { XAxisOptions, YAxisOptions, BoundingRect, + LabelFormatter, } from '@shopify/polaris-viz-core'; import {animated} from '@react-spring/web'; @@ -59,6 +60,7 @@ export interface ChartProps { annotationsLookupTable: AnnotationLookupTable; data: DataSeries[]; renderTooltipContent: (data: RenderTooltipContentData) => ReactNode; + seriesNameFormatter: LabelFormatter; showLegend: boolean; type: ChartType; xAxisOptions: Required; @@ -75,6 +77,7 @@ export function Chart({ renderHiddenLegendLabel, renderLegendContent, renderTooltipContent, + seriesNameFormatter, showLegend, type, xAxisOptions, @@ -103,6 +106,7 @@ export function Chart({ dimensions, showLegend, colors: seriesColors, + seriesNameFormatter, }); const {allNumbers, longestLabel, areAllNegative} = useDataForHorizontalChart({ @@ -164,6 +168,7 @@ export function Chart({ data, seriesColors, renderTooltipContent, + seriesNameFormatter, }); const {transitions} = useHorizontalTransitions({ diff --git a/packages/polaris-viz/src/components/HorizontalBarChart/HorizontalBarChart.tsx b/packages/polaris-viz/src/components/HorizontalBarChart/HorizontalBarChart.tsx index 4cca14f648..3d8dfef1f6 100644 --- a/packages/polaris-viz/src/components/HorizontalBarChart/HorizontalBarChart.tsx +++ b/packages/polaris-viz/src/components/HorizontalBarChart/HorizontalBarChart.tsx @@ -5,6 +5,7 @@ import type { XAxisOptions, YAxisOptions, BoundingRect, + LabelFormatter, } from '@shopify/polaris-viz-core'; import type { @@ -18,6 +19,7 @@ import {Chart} from './Chart'; export interface HorizontalBarChartProps { data: DataSeries[]; renderTooltipContent: (data: RenderTooltipContentData) => ReactNode; + seriesNameFormatter: LabelFormatter; showLegend: boolean; xAxisOptions: Required; yAxisOptions: Required; @@ -35,6 +37,7 @@ export function HorizontalBarChart({ renderHiddenLegendLabel, renderLegendContent, renderTooltipContent, + seriesNameFormatter, showLegend, type = 'default', xAxisOptions, @@ -46,6 +49,7 @@ export function HorizontalBarChart({ annotationsLookupTable={annotationsLookupTable} data={data} renderTooltipContent={renderTooltipContent} + seriesNameFormatter={seriesNameFormatter} showLegend={showLegend} type={type} xAxisOptions={xAxisOptions} diff --git a/packages/polaris-viz/src/components/LegendContainer/hooks/useLegend.ts b/packages/polaris-viz/src/components/LegendContainer/hooks/useLegend.ts index 4a0d792f48..019f30d13f 100644 --- a/packages/polaris-viz/src/components/LegendContainer/hooks/useLegend.ts +++ b/packages/polaris-viz/src/components/LegendContainer/hooks/useLegend.ts @@ -29,11 +29,11 @@ function getAlteredDimensions( export interface Props { showLegend: boolean; data: DataGroup[]; + seriesNameFormatter: LabelFormatter; colors?: Color[]; dimensions?: Dimensions; direction?: Direction; maxWidth?: number; - seriesNameFormatter?: LabelFormatter; } export function useLegend({ @@ -43,7 +43,7 @@ export function useLegend({ showLegend, direction = 'horizontal', maxWidth = 0, - seriesNameFormatter = (value) => `${value}`, + seriesNameFormatter, }: Props) { const defaultHeight = showLegend ? DEFAULT_LEGEND_HEIGHT : 0; diff --git a/packages/polaris-viz/src/components/LineChart/Chart.tsx b/packages/polaris-viz/src/components/LineChart/Chart.tsx index 09dd015076..f555d805f5 100644 --- a/packages/polaris-viz/src/components/LineChart/Chart.tsx +++ b/packages/polaris-viz/src/components/LineChart/Chart.tsx @@ -17,6 +17,7 @@ import type { YAxisOptions, LineChartDataSeriesWithDefaults, BoundingRect, + LabelFormatter, } from '@shopify/polaris-viz-core'; import {useExternalHideEvents} from '../../hooks/ExternalEvents'; @@ -71,6 +72,7 @@ export interface ChartProps { renderTooltipContent: (data: RenderTooltipContentData) => ReactNode; annotationsLookupTable: AnnotationLookupTable; data: LineChartDataSeriesWithDefaults[]; + seriesNameFormatter: LabelFormatter; showLegend: boolean; xAxisOptions: Required; yAxisOptions: Required; @@ -92,6 +94,7 @@ export function Chart({ renderLegendContent, renderTooltipContent, renderHiddenLegendLabel, + seriesNameFormatter, showLegend = true, slots, theme = DEFAULT_THEME_NAME, @@ -120,6 +123,7 @@ export function Chart({ ], dimensions, showLegend, + seriesNameFormatter, }); useWatchColorVisionEvents({ @@ -199,6 +203,7 @@ export function Chart({ renderTooltipContent, indexForLabels, hiddenIndexes: hiddenLineIndexes, + seriesNameFormatter, }); if (xScale == null || drawableWidth == null || yAxisLabelWidth == null) { diff --git a/packages/polaris-viz/src/components/LineChart/LineChart.tsx b/packages/polaris-viz/src/components/LineChart/LineChart.tsx index 528bde932f..9f1e282a9d 100644 --- a/packages/polaris-viz/src/components/LineChart/LineChart.tsx +++ b/packages/polaris-viz/src/components/LineChart/LineChart.tsx @@ -3,6 +3,7 @@ import type { XAxisOptions, YAxisOptions, ChartProps, + LabelFormatter, } from '@shopify/polaris-viz-core'; import { InternalChartType, @@ -40,6 +41,7 @@ export type LineChartProps = { emptyStateText?: string; renderLegendContent?: RenderLegendContent; renderHiddenLegendLabel?: (count: number) => string; + seriesNameFormatter?: LabelFormatter; showLegend?: boolean; skipLinkText?: string; tooltipOptions?: TooltipOptions; @@ -63,6 +65,7 @@ export function LineChart(props: LineChartProps) { onError, renderLegendContent, renderHiddenLegendLabel, + seriesNameFormatter = (value) => `${value}`, showLegend = true, skipLinkText, state, @@ -119,6 +122,7 @@ export function LineChart(props: LineChartProps) { renderLegendContent={renderLegendContent} renderTooltipContent={renderTooltip} renderHiddenLegendLabel={renderHiddenLegendLabel} + seriesNameFormatter={seriesNameFormatter} showLegend={showLegend} theme={theme} xAxisOptions={xAxisOptionsWithDefaults} diff --git a/packages/polaris-viz/src/components/LineChart/hooks/useLineChartTooltipContent.ts b/packages/polaris-viz/src/components/LineChart/hooks/useLineChartTooltipContent.ts index 8ed6703b71..fdf9d7b1b5 100644 --- a/packages/polaris-viz/src/components/LineChart/hooks/useLineChartTooltipContent.ts +++ b/packages/polaris-viz/src/components/LineChart/hooks/useLineChartTooltipContent.ts @@ -1,4 +1,7 @@ -import type {LineChartDataSeriesWithDefaults} from '@shopify/polaris-viz-core'; +import type { + LabelFormatter, + LineChartDataSeriesWithDefaults, +} from '@shopify/polaris-viz-core'; import {useChartContext} from '@shopify/polaris-viz-core'; import type {ReactNode} from 'react'; import {useCallback} from 'react'; @@ -9,6 +12,7 @@ interface Props { data: LineChartDataSeriesWithDefaults[]; indexForLabels: number; renderTooltipContent: (data: RenderTooltipContentData) => ReactNode; + seriesNameFormatter: LabelFormatter; hiddenIndexes?: number[]; } @@ -17,6 +21,7 @@ export function useLineChartTooltipContent({ hiddenIndexes = [], indexForLabels, renderTooltipContent, + seriesNameFormatter, }: Props) { const {theme} = useChartContext(); @@ -44,7 +49,7 @@ export function useLineChartTooltipContent({ const {value} = seriesData[activeIndex]; tooltipData[0].data.push({ - key: `${name}`, + key: `${seriesNameFormatter(name ?? '')}`, value, color: color!, isComparison, @@ -60,6 +65,13 @@ export function useLineChartTooltipContent({ theme, }); }, - [data, renderTooltipContent, theme, hiddenIndexes, indexForLabels], + [ + data, + renderTooltipContent, + theme, + hiddenIndexes, + indexForLabels, + seriesNameFormatter, + ], ); } diff --git a/packages/polaris-viz/src/components/LineChart/stories/FormattedValues.chromatic.stories.tsx b/packages/polaris-viz/src/components/LineChart/stories/FormattedValues.chromatic.stories.tsx new file mode 100644 index 0000000000..1307401437 --- /dev/null +++ b/packages/polaris-viz/src/components/LineChart/stories/FormattedValues.chromatic.stories.tsx @@ -0,0 +1,32 @@ +import type {Story} from '@storybook/react'; + +import {META} from './meta'; + +import type {LineChartProps} from '../../../components'; + +import {DEFAULT_DATA, Template} from './data'; + +export default { + ...META, + title: 'polaris-viz/Chromatic/Charts/LineChart', + parameters: { + ...META.parameters, + chromatic: {disableSnapshot: false}, + }, +}; + +export const FormattedValues: Story = Template.bind({}); + +FormattedValues.args = { + data: DEFAULT_DATA, + seriesNameFormatter: (value) => `Name: ${value}`, + xAxisOptions: { + labelFormatter: (value) => `xAxis: ${value}`, + }, + yAxisOptions: { + labelFormatter: (value) => `yAxis: ${value}`, + }, + onError: (a, b) => { + console.log({a, b}); + }, +}; diff --git a/packages/polaris-viz/src/components/LineChartPredictive/LineChartPredictive.tsx b/packages/polaris-viz/src/components/LineChartPredictive/LineChartPredictive.tsx index 371ca58dee..c9a83a776c 100644 --- a/packages/polaris-viz/src/components/LineChartPredictive/LineChartPredictive.tsx +++ b/packages/polaris-viz/src/components/LineChartPredictive/LineChartPredictive.tsx @@ -22,6 +22,7 @@ export function LineChartPredictive(props: LineChartPredictiveProps) { emptyStateText, id, isAnimated, + seriesNameFormatter = (value) => `${value}`, showLegend = true, skipLinkText, state, @@ -87,6 +88,7 @@ export function LineChartPredictive(props: LineChartPredictiveProps) { errorText={errorText} id={id} isAnimated={isAnimated} + seriesNameFormatter={seriesNameFormatter} showLegend={showLegend} skipLinkText={skipLinkText} slots={{ @@ -119,6 +121,7 @@ export function LineChartPredictive(props: LineChartPredictiveProps) { predictiveSeriesNames={predictiveSeriesNames} data={dataWithColors} theme={theme ?? DEFAULT_THEME_NAME} + seriesNameFormatter={seriesNameFormatter} /> ); }} diff --git a/packages/polaris-viz/src/components/LineChartPredictive/components/CustomLegend/CustomLegend.tsx b/packages/polaris-viz/src/components/LineChartPredictive/components/CustomLegend/CustomLegend.tsx index b962237da6..f41cd9251e 100644 --- a/packages/polaris-viz/src/components/LineChartPredictive/components/CustomLegend/CustomLegend.tsx +++ b/packages/polaris-viz/src/components/LineChartPredictive/components/CustomLegend/CustomLegend.tsx @@ -1,3 +1,5 @@ +import type {LabelFormatter} from '@shopify/polaris-viz-core'; + import type {LineChartPredictiveDataSeries} from '../../../../components/LineChartPredictive/types'; import type {ColorVisionInteractionMethods} from '../../../../types'; import {LegendItem} from '../../../../components/Legend'; @@ -8,6 +10,7 @@ import styles from './CustomLegend.scss'; interface Props extends ColorVisionInteractionMethods { data: LineChartPredictiveDataSeries[]; predictiveSeriesNames: string[]; + seriesNameFormatter: LabelFormatter; theme: string; } @@ -16,6 +19,7 @@ export function CustomLegend({ predictiveSeriesNames, getColorVisionEventAttrs, getColorVisionStyles, + seriesNameFormatter, theme, }: Props) { return ( @@ -46,7 +50,7 @@ export function CustomLegend({ : undefined } isComparison={isComparison} - name={name!} + name={seriesNameFormatter(name ?? '')} shape="Line" theme={theme} /> diff --git a/packages/polaris-viz/src/components/LineChartPredictive/stories/FormattedValues.chromatic.stories.tsx b/packages/polaris-viz/src/components/LineChartPredictive/stories/FormattedValues.chromatic.stories.tsx new file mode 100644 index 0000000000..3f5bbc3c74 --- /dev/null +++ b/packages/polaris-viz/src/components/LineChartPredictive/stories/FormattedValues.chromatic.stories.tsx @@ -0,0 +1,33 @@ +import type {Story} from '@storybook/react'; + +import {META} from './meta'; + +import {DEFAULT_DATA, Template} from './data'; +import type {LineChartPredictiveProps} from '../types'; + +export default { + ...META, + title: 'polaris-viz/Chromatic/Charts/LineChartPredictive', + parameters: { + ...META.parameters, + chromatic: {disableSnapshot: false}, + }, +}; + +export const FormattedValues: Story = Template.bind( + {}, +); + +FormattedValues.args = { + data: DEFAULT_DATA, + seriesNameFormatter: (value) => `Name: ${value}`, + xAxisOptions: { + labelFormatter: (value) => `xAxis: ${value}`, + }, + yAxisOptions: { + labelFormatter: (value) => `yAxis: ${value}`, + }, + onError: (a, b) => { + console.log({a, b}); + }, +}; diff --git a/packages/polaris-viz/src/components/LineChartRelational/LineChartRelational.tsx b/packages/polaris-viz/src/components/LineChartRelational/LineChartRelational.tsx index 0267649276..ecd6821125 100644 --- a/packages/polaris-viz/src/components/LineChartRelational/LineChartRelational.tsx +++ b/packages/polaris-viz/src/components/LineChartRelational/LineChartRelational.tsx @@ -9,9 +9,12 @@ import {LineChart} from '../LineChart'; import {RelatedAreas, MissingDataArea, CustomLegend} from './components'; -export function LineChartRelational( - props: Omit, -) { +export type LineChartRelationalProps = Omit< + LineChartProps, + 'renderLegendContent' +>; + +export function LineChartRelational(props: LineChartRelationalProps) { const { annotations = [], data, @@ -19,6 +22,7 @@ export function LineChartRelational( emptyStateText, id, isAnimated, + seriesNameFormatter = (value) => `${value}`, showLegend = true, skipLinkText, state, @@ -59,9 +63,11 @@ export function LineChartRelational( getColorVisionEventAttrs={getColorVisionEventAttrs} data={data} theme={theme ?? DEFAULT_THEME_NAME} + seriesNameFormatter={seriesNameFormatter} /> ); }} + seriesNameFormatter={seriesNameFormatter} showLegend={showLegend} skipLinkText={skipLinkText} slots={{ diff --git a/packages/polaris-viz/src/components/LineChartRelational/components/CustomLegend/CustomLegend.tsx b/packages/polaris-viz/src/components/LineChartRelational/components/CustomLegend/CustomLegend.tsx index c55b28c792..5229c8df71 100644 --- a/packages/polaris-viz/src/components/LineChartRelational/components/CustomLegend/CustomLegend.tsx +++ b/packages/polaris-viz/src/components/LineChartRelational/components/CustomLegend/CustomLegend.tsx @@ -1,4 +1,4 @@ -import type {DataSeries} from '@shopify/polaris-viz-core'; +import type {DataSeries, LabelFormatter} from '@shopify/polaris-viz-core'; import type {ColorVisionInteractionMethods} from '../../../../types'; import {LegendItem} from '../../../../components/Legend'; @@ -7,6 +7,7 @@ import styles from './CustomLegend.scss'; interface Props extends ColorVisionInteractionMethods { data: DataSeries[]; + seriesNameFormatter: LabelFormatter; theme: string; } @@ -14,6 +15,7 @@ export function CustomLegend({ data, getColorVisionEventAttrs, getColorVisionStyles, + seriesNameFormatter, theme, }: Props) { const lineSeries = data.filter( @@ -47,7 +49,7 @@ export function CustomLegend({ color={color!} index={index} isComparison={isComparison} - name={name!} + name={seriesNameFormatter(name ?? '')} shape="Line" theme={theme} /> @@ -66,7 +68,7 @@ export function CustomLegend({ percentileItems[0].color ?? percentileItems[0]?.metadata?.areaColor } index={percentileIndex} - name={percentileItems[0]?.metadata?.legendLabel} + name={seriesNameFormatter(percentileItems[0]?.metadata?.legendLabel)} shape="Bar" theme={theme} /> diff --git a/packages/polaris-viz/src/components/LineChartRelational/index.ts b/packages/polaris-viz/src/components/LineChartRelational/index.ts index 53a9f78ac2..47f36f2db9 100644 --- a/packages/polaris-viz/src/components/LineChartRelational/index.ts +++ b/packages/polaris-viz/src/components/LineChartRelational/index.ts @@ -1,2 +1,3 @@ export {LineChartRelational} from './LineChartRelational'; export {MissingDataArea} from './components/MissingDataArea'; +export type {LineChartRelationalProps} from './LineChartRelational'; diff --git a/packages/polaris-viz/src/components/LineChartRelational/stories/Default.stories.tsx b/packages/polaris-viz/src/components/LineChartRelational/stories/Default.stories.tsx index 6b143cdcdd..42836b1cf9 100644 --- a/packages/polaris-viz/src/components/LineChartRelational/stories/Default.stories.tsx +++ b/packages/polaris-viz/src/components/LineChartRelational/stories/Default.stories.tsx @@ -3,9 +3,9 @@ import type {Story} from '@storybook/react'; export {META as default} from './meta'; import {DEFAULT_DATA, DEFAULT_PROPS, Template} from './data'; -import type {LineChartProps} from 'components/LineChart/LineChart'; +import type {LineChartRelationalProps} from '../LineChartRelational'; -export const Default: Story = Template.bind({}); +export const Default: Story = Template.bind({}); Default.args = { ...DEFAULT_PROPS, diff --git a/packages/polaris-viz/src/components/LineChartRelational/stories/FormattedValues.chromatic.stories.tsx b/packages/polaris-viz/src/components/LineChartRelational/stories/FormattedValues.chromatic.stories.tsx new file mode 100644 index 0000000000..25b4f487d6 --- /dev/null +++ b/packages/polaris-viz/src/components/LineChartRelational/stories/FormattedValues.chromatic.stories.tsx @@ -0,0 +1,34 @@ +import type {Story} from '@storybook/react'; + +import {META} from './meta'; + +import type {LineChartRelationalProps} from '../../LineChartRelational'; + +import {DEFAULT_DATA, Template} from './data'; + +export default { + ...META, + title: 'polaris-viz/Chromatic/Charts/LineChartRelational', + parameters: { + ...META.parameters, + chromatic: {disableSnapshot: false}, + }, +}; + +export const FormattedValues: Story = Template.bind( + {}, +); + +FormattedValues.args = { + data: DEFAULT_DATA, + seriesNameFormatter: (value) => `Name: ${value}`, + xAxisOptions: { + labelFormatter: (value) => `xAxis: ${value}`, + }, + yAxisOptions: { + labelFormatter: (value) => `yAxis: ${value}`, + }, + onError: (a, b) => { + console.log({a, b}); + }, +}; diff --git a/packages/polaris-viz/src/components/SimpleBarChart/Chart.tsx b/packages/polaris-viz/src/components/SimpleBarChart/Chart.tsx index 71bfdf81c4..815f990620 100644 --- a/packages/polaris-viz/src/components/SimpleBarChart/Chart.tsx +++ b/packages/polaris-viz/src/components/SimpleBarChart/Chart.tsx @@ -7,6 +7,7 @@ import { import type { ChartType, Dimensions, + LabelFormatter, XAxisOptions, YAxisOptions, } from '@shopify/polaris-viz-core'; @@ -33,6 +34,7 @@ import {getLongestTrendIndicator} from './utilities'; export interface ChartProps { data: SimpleBarChartDataSeries[]; + seriesNameFormatter: LabelFormatter; showLegend: boolean; type: ChartType; xAxisOptions: Required; @@ -47,6 +49,7 @@ export function Chart({ dimensions, renderLegendContent, legendPosition = 'bottom-right', + seriesNameFormatter, showLegend, type, xAxisOptions, @@ -71,6 +74,7 @@ export function Chart({ dimensions, colors: seriesColors, showLegend, + seriesNameFormatter, }); const { diff --git a/packages/polaris-viz/src/components/SimpleBarChart/SimpleBarChart.tsx b/packages/polaris-viz/src/components/SimpleBarChart/SimpleBarChart.tsx index 253e1dc1ae..7f40dfd0a8 100644 --- a/packages/polaris-viz/src/components/SimpleBarChart/SimpleBarChart.tsx +++ b/packages/polaris-viz/src/components/SimpleBarChart/SimpleBarChart.tsx @@ -3,6 +3,7 @@ import type { XAxisOptions, ChartProps, YAxisOptions, + LabelFormatter, } from '@shopify/polaris-viz-core'; import { DEFAULT_CHART_PROPS, @@ -25,6 +26,7 @@ export type SimpleBarChartProps = { data: SimpleBarChartDataSeries[]; renderLegendContent?: RenderLegendContent; legendPosition?: LegendPosition; + seriesNameFormatter?: LabelFormatter; showLegend?: boolean; type?: ChartType; xAxisOptions?: XAxisOptions; @@ -41,6 +43,7 @@ export function SimpleBarChart(props: SimpleBarChartProps) { renderLegendContent, legendPosition = 'bottom-right', onError, + seriesNameFormatter = (value) => `${value}`, showLegend = true, theme = defaultTheme, type = 'default', @@ -74,6 +77,7 @@ export function SimpleBarChart(props: SimpleBarChartProps) { = Template.bind({}); + +FormattedValues.args = { + data: SINGLE_SERIES, + seriesNameFormatter: (value) => `Name: ${value}`, + xAxisOptions: { + labelFormatter: (value) => `xAxis: ${value}`, + }, + yAxisOptions: { + labelFormatter: (value) => `yAxis: ${value}`, + }, + onError: (a, b) => { + console.log({a, b}); + }, +}; diff --git a/packages/polaris-viz/src/components/StackedAreaChart/Chart.tsx b/packages/polaris-viz/src/components/StackedAreaChart/Chart.tsx index e7fccd248a..7514e5335c 100644 --- a/packages/polaris-viz/src/components/StackedAreaChart/Chart.tsx +++ b/packages/polaris-viz/src/components/StackedAreaChart/Chart.tsx @@ -8,6 +8,7 @@ import type { YAxisOptions, Dimensions, BoundingRect, + LabelFormatter, } from '@shopify/polaris-viz-core'; import { useUniqueId, @@ -74,6 +75,7 @@ export interface Props { annotationsLookupTable: AnnotationLookupTable; data: DataSeries[]; renderTooltipContent(data: RenderTooltipContentData): ReactNode; + seriesNameFormatter: LabelFormatter; showLegend: boolean; theme: string; xAxisOptions: Required; @@ -94,6 +96,7 @@ export function Chart({ theme, yAxisOptions, renderHiddenLegendLabel, + seriesNameFormatter, }: Props) { useColorVisionEvents({enabled: data.length > 1}); @@ -115,6 +118,7 @@ export function Chart({ ], dimensions, showLegend, + seriesNameFormatter, }); const tooltipId = useUniqueId('stackedAreaChart'); @@ -191,6 +195,7 @@ export function Chart({ data, renderTooltipContent, seriesColors, + seriesNameFormatter, }); const lineGenerator = useMemo(() => { diff --git a/packages/polaris-viz/src/components/StackedAreaChart/StackedAreaChart.tsx b/packages/polaris-viz/src/components/StackedAreaChart/StackedAreaChart.tsx index be2bad3706..31da219bc1 100644 --- a/packages/polaris-viz/src/components/StackedAreaChart/StackedAreaChart.tsx +++ b/packages/polaris-viz/src/components/StackedAreaChart/StackedAreaChart.tsx @@ -9,6 +9,7 @@ import type { XAxisOptions, YAxisOptions, ChartProps, + LabelFormatter, } from '@shopify/polaris-viz-core'; import {getTooltipContentRenderer} from '../../utilities/getTooltipContentRenderer'; @@ -41,6 +42,7 @@ export type StackedAreaChartProps = { xAxisOptions?: Partial; yAxisOptions?: Partial; renderHiddenLegendLabel?: (count: number) => string; + seriesNameFormatter?: LabelFormatter; } & ChartProps; export function StackedAreaChart(props: StackedAreaChartProps) { @@ -58,6 +60,7 @@ export function StackedAreaChart(props: StackedAreaChartProps) { id, isAnimated, renderLegendContent, + seriesNameFormatter = (value) => `${value}`, showLegend = true, skipLinkText, theme = defaultTheme, @@ -105,6 +108,7 @@ export function StackedAreaChart(props: StackedAreaChartProps) { data={data} renderLegendContent={renderLegendContent} renderTooltipContent={renderTooltip} + seriesNameFormatter={seriesNameFormatter} showLegend={showLegend} theme={theme} xAxisOptions={xAxisOptionsWithDefaults} diff --git a/packages/polaris-viz/src/components/StackedAreaChart/hooks/useStackedChartTooltipContent.ts b/packages/polaris-viz/src/components/StackedAreaChart/hooks/useStackedChartTooltipContent.ts index 3ce07acd9e..d66ca0b2d0 100644 --- a/packages/polaris-viz/src/components/StackedAreaChart/hooks/useStackedChartTooltipContent.ts +++ b/packages/polaris-viz/src/components/StackedAreaChart/hooks/useStackedChartTooltipContent.ts @@ -1,6 +1,10 @@ import type {ReactNode} from 'react'; import {useCallback} from 'react'; -import type {Color, DataSeries} from '@shopify/polaris-viz-core'; +import type { + Color, + DataSeries, + LabelFormatter, +} from '@shopify/polaris-viz-core'; import {useChartContext} from '@shopify/polaris-viz-core'; import type {RenderTooltipContentData} from '../../../types'; @@ -9,12 +13,14 @@ interface Props { data: DataSeries[]; seriesColors: Color[]; renderTooltipContent: (data: RenderTooltipContentData) => ReactNode; + seriesNameFormatter: LabelFormatter; } export function useStackedChartTooltipContent({ data, renderTooltipContent, seriesColors, + seriesNameFormatter, }: Props) { const {theme} = useChartContext(); @@ -35,7 +41,7 @@ export function useStackedChartTooltipContent({ const {value} = seriesData[activeIndex]; tooltipData[0].data.push({ - key: `${name}`, + key: `${seriesNameFormatter(name ?? '')}`, value, color: color ?? seriesColors[index], }); @@ -49,6 +55,6 @@ export function useStackedChartTooltipContent({ theme, }); }, - [data, seriesColors, renderTooltipContent, theme], + [data, seriesColors, renderTooltipContent, theme, seriesNameFormatter], ); } diff --git a/packages/polaris-viz/src/components/StackedAreaChart/stories/FormattedValues.chromatic.stories.tsx b/packages/polaris-viz/src/components/StackedAreaChart/stories/FormattedValues.chromatic.stories.tsx new file mode 100644 index 0000000000..420b160cca --- /dev/null +++ b/packages/polaris-viz/src/components/StackedAreaChart/stories/FormattedValues.chromatic.stories.tsx @@ -0,0 +1,32 @@ +import type {Story} from '@storybook/react'; + +import {META} from './meta'; + +import type {StackedAreaChartProps} from '../../../components'; + +import {DEFAULT_DATA, Template} from './data'; + +export default { + ...META, + title: 'polaris-viz/Chromatic/Charts/StackedAreaChart', + parameters: { + ...META.parameters, + chromatic: {disableSnapshot: false}, + }, +}; + +export const FormattedValues: Story = Template.bind({}); + +FormattedValues.args = { + data: DEFAULT_DATA, + seriesNameFormatter: (value) => `Name: ${value}`, + xAxisOptions: { + labelFormatter: (value) => `xAxis: ${value}`, + }, + yAxisOptions: { + labelFormatter: (value) => `yAxis: ${value}`, + }, + onError: (a, b) => { + console.log({a, b}); + }, +}; diff --git a/packages/polaris-viz/src/components/VerticalBarChart/Chart.tsx b/packages/polaris-viz/src/components/VerticalBarChart/Chart.tsx index 64f4aa0a0b..752f40d66e 100644 --- a/packages/polaris-viz/src/components/VerticalBarChart/Chart.tsx +++ b/packages/polaris-viz/src/components/VerticalBarChart/Chart.tsx @@ -16,6 +16,7 @@ import type { XAxisOptions, YAxisOptions, BoundingRect, + LabelFormatter, } from '@shopify/polaris-viz-core'; import {stackOffsetDiverging, stackOrderNone} from 'd3-shape'; @@ -61,6 +62,7 @@ export interface Props { data: DataSeries[]; renderTooltipContent(data: RenderTooltipContentData): ReactNode; showLegend: boolean; + seriesNameFormatter: LabelFormatter; type: ChartType; xAxisOptions: Required; yAxisOptions: Required; @@ -83,6 +85,7 @@ export function Chart({ xAxisOptions, yAxisOptions, renderHiddenLegendLabel, + seriesNameFormatter, }: Props) { useColorVisionEvents({enabled: data.length > 1, dimensions}); @@ -103,6 +106,7 @@ export function Chart({ ], dimensions, showLegend, + seriesNameFormatter, }); const emptyState = data.length === 0; @@ -202,6 +206,7 @@ export function Chart({ renderTooltipContent, data, seriesColors: barColors, + seriesNameFormatter, }); const {hasXAxisAnnotations, hasYAxisAnnotations} = checkAvailableAnnotations( diff --git a/packages/polaris-viz/src/components/VerticalBarChart/VerticalBarChart.tsx b/packages/polaris-viz/src/components/VerticalBarChart/VerticalBarChart.tsx index c326a1834d..40773ba763 100644 --- a/packages/polaris-viz/src/components/VerticalBarChart/VerticalBarChart.tsx +++ b/packages/polaris-viz/src/components/VerticalBarChart/VerticalBarChart.tsx @@ -4,6 +4,7 @@ import type { XAxisOptions, YAxisOptions, BoundingRect, + LabelFormatter, } from '@shopify/polaris-viz-core'; import type {ReactNode} from 'react'; @@ -22,6 +23,7 @@ export interface VerticalBarChartProps { showLegend: boolean; xAxisOptions: Required; yAxisOptions: Required; + seriesNameFormatter: LabelFormatter; annotationsLookupTable?: AnnotationLookupTable; barOptions?: {isStacked: boolean}; dimensions?: BoundingRect; @@ -43,6 +45,7 @@ export function VerticalBarChart({ xAxisOptions, yAxisOptions, renderHiddenLegendLabel, + seriesNameFormatter, }: VerticalBarChartProps) { const selectedTheme = useTheme(); const seriesColors = useThemeSeriesColors(data, selectedTheme); @@ -60,6 +63,7 @@ export function VerticalBarChart({ emptyStateText={emptyStateText} renderLegendContent={renderLegendContent} renderTooltipContent={renderTooltipContent} + seriesNameFormatter={seriesNameFormatter} showLegend={showLegend} type={type} xAxisOptions={xAxisOptions} diff --git a/packages/polaris-viz/src/components/index.ts b/packages/polaris-viz/src/components/index.ts index 36d192b043..489dcc8ac8 100644 --- a/packages/polaris-viz/src/components/index.ts +++ b/packages/polaris-viz/src/components/index.ts @@ -51,6 +51,7 @@ export {XAxis} from './XAxis'; export {TrendIndicator, estimateTrendIndicatorWidth} from './TrendIndicator'; export type {TrendIndicatorProps} from './TrendIndicator'; export {LineChartRelational, MissingDataArea} from './LineChartRelational'; +export type {LineChartRelationalProps} from './LineChartRelational'; export {LineChartPredictive} from './LineChartPredictive'; export type {LineChartPredictiveProps} from './LineChartPredictive'; export type {ComparisonMetricProps} from './ComparisonMetric'; diff --git a/packages/polaris-viz/src/hooks/useBarChartTooltipContent.ts b/packages/polaris-viz/src/hooks/useBarChartTooltipContent.ts index 1531d34253..bd5a577f35 100644 --- a/packages/polaris-viz/src/hooks/useBarChartTooltipContent.ts +++ b/packages/polaris-viz/src/hooks/useBarChartTooltipContent.ts @@ -1,6 +1,10 @@ import type {ReactNode} from 'react'; import {useCallback} from 'react'; -import type {Color, DataSeries} from '@shopify/polaris-viz-core'; +import type { + Color, + DataSeries, + LabelFormatter, +} from '@shopify/polaris-viz-core'; import {useChartContext} from '@shopify/polaris-viz-core'; import type {RenderTooltipContentData} from '../types'; @@ -9,12 +13,14 @@ export interface Props { data: DataSeries[]; seriesColors: Color[]; renderTooltipContent: (data: RenderTooltipContentData) => ReactNode; + seriesNameFormatter: LabelFormatter; } export function useBarChartTooltipContent({ data, renderTooltipContent, seriesColors, + seriesNameFormatter, }: Props) { const {theme} = useChartContext(); @@ -35,7 +41,7 @@ export function useBarChartTooltipContent({ const {value} = seriesData[activeIndex]; tooltipData[0].data.push({ - key: `${name}`, + key: `${seriesNameFormatter(name ?? '')}`, value, color: color ?? seriesColors[index], }); @@ -49,6 +55,6 @@ export function useBarChartTooltipContent({ theme, }); }, - [data, seriesColors, theme, renderTooltipContent], + [data, seriesColors, theme, renderTooltipContent, seriesNameFormatter], ); } diff --git a/packages/polaris-viz/src/index.ts b/packages/polaris-viz/src/index.ts index cc3b02a8f1..60dd17d487 100644 --- a/packages/polaris-viz/src/index.ts +++ b/packages/polaris-viz/src/index.ts @@ -34,6 +34,7 @@ export type { TrendIndicatorProps, DonutChartProps, ComparisonMetricProps, + LineChartRelationalProps, } from './components'; export {