Added seriesNameFormatter

Shopify · Apr 4, 2024 · cb3d7ed · cb3d7ed
1 parent 805dc5b
commit cb3d7ed
Show file tree

Hide file tree

Showing 36 changed files with 380 additions and 24 deletions.
diff --git 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 -->
+## Unreleased
+
+### Added
+
+- Added `seriesNameFormatter` prop to `<BarChart />`, `<ComboChart />`, `<LineChart />`, `<LineChartPredictive />`, `<LineChartRelational />`, `<SimpleBarChart />` & `<StackedAreaChart />`.
 
 ## [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
@@ -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
@@ -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<BarChartProps> = 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<BarChartProps> = 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
@@ -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<XAxisOptions>;
@@ -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
@@ -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<XAxisOptions>;
   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
@@ -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
@@ -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<ComboChartProps> = 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
@@ -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
@@ -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
@@ -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<XAxisOptions>;
@@ -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
@@ -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<XAxisOptions>;
   yAxisOptions: Required<YAxisOptions>;
@@ -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
@@ -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;