Add legend with values + trend indicator data

Shopify · Dec 13, 2023 · a503db7 · a503db7
1 parent 90d2535
commit a503db7
Show file tree

Hide file tree

Showing 17 changed files with 275 additions and 15 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 support for showing values and trends in `<DonutChart />` legend with new prop `showLegendValues`.
 
 ## [10.1.0] - 2023-12-04
 

diff --git a/packages/polaris-viz/src/components/DonutChart/Chart.tsx b/packages/polaris-viz/src/components/DonutChart/Chart.tsx
@@ -27,14 +27,15 @@ import {
 } from '../../hooks';
 import {Arc} from '../Arc';
 import type {
+  ColorVisionInteractionMethods,
   LegendPosition,
   RenderInnerValueContent,
   RenderLegendContent,
 } from '../../types';
 import {ChartSkeleton} from '../../components/ChartSkeleton';
 
 import styles from './DonutChart.scss';
-import {InnerValue} from './components';
+import {InnerValue, LegendValues} from './components';
 
 const ERROR_ANIMATION_PADDING = 40;
 const FULL_CIRCLE = Math.PI * 2;
@@ -46,6 +47,7 @@ export interface ChartProps {
   labelFormatter: LabelFormatter;
   legendPosition: LegendPosition;
   showLegend: boolean;
+  showLegendValues: boolean;
   state: ChartState;
   theme: string;
   accessibilityLabel?: string;
@@ -63,6 +65,7 @@ export function Chart({
   labelFormatter,
   legendPosition = 'right',
   showLegend,
+  showLegendValues,
   state,
   theme,
   accessibilityLabel = '',
@@ -94,7 +97,9 @@ export function Chart({
 
   const longestLegendWidth = data.reduce((previous, current) => {
     const estimatedLegendWidth = estimateLegendItemWidth(
-      current.name ?? '',
+      showLegendValues === true
+        ? `${current.name ?? ''} ${current.data[0].value}`
+        : `${current.name ?? ''}`,
       characterWidths,
     );
 
@@ -107,7 +112,7 @@ export function Chart({
 
   const maxLegendWidth =
     legendDirection === 'vertical'
-      ? Math.min(
+      ? Math.max(
           longestLegendWidth,
           dimensions.width * MAX_LEGEND_WIDTH_PERCENTAGE,
         )
@@ -167,6 +172,25 @@ export function Chart({
   const containerAlignmentStyle =
     getContainerAlignmentForLegend(legendPosition);
 
+  const renderLegendContentWithValues = ({
+    getColorVisionStyles,
+    getColorVisionEventAttrs,
+  }: ColorVisionInteractionMethods) => {
+    return (
+      <LegendValues
+        data={data}
+        labelFormatter={labelFormatter}
+        getColorVisionStyles={getColorVisionStyles}
+        getColorVisionEventAttrs={getColorVisionEventAttrs}
+      />
+    );
+  };
+
+  const shouldRenderLegendContentWithValues =
+    !renderLegendContent &&
+    showLegendValues &&
+    (legendPosition === 'right' || legendPosition === 'left');
+
   return (
     <div className={styles.DonutWrapper} style={containerAlignmentStyle}>
       <div className={styles.Donut}>
@@ -258,7 +282,11 @@ export function Chart({
           direction={legendDirection}
           position={legendPosition}
           maxWidth={maxLegendWidth}
-          renderLegendContent={renderLegendContent}
+          renderLegendContent={
+            shouldRenderLegendContentWithValues
+              ? renderLegendContentWithValues
+              : renderLegendContent
+          }
         />
       )}
     </div>

diff --git a/packages/polaris-viz/src/components/DonutChart/DonutChart.tsx b/packages/polaris-viz/src/components/DonutChart/DonutChart.tsx
@@ -13,10 +13,13 @@ import type {
 } from '../../types';
 
 import {Chart} from './Chart';
+import type {DonutChartDataSeries} from './types';
 
 export type DonutChartProps = {
+  data: DonutChartDataSeries[];
   comparisonMetric?: ComparisonMetricProps;
   showLegend?: boolean;
+  showLegendValues?: boolean;
   labelFormatter?: LabelFormatter;
   legendFullWidth?: boolean;
   legendPosition?: LegendPosition;
@@ -32,6 +35,7 @@ export function DonutChart(props: DonutChartProps) {
     theme = defaultTheme,
     comparisonMetric,
     showLegend = true,
+    showLegendValues = false,
     labelFormatter = (value) => `${value}`,
     legendFullWidth,
     legendPosition = 'left',
@@ -61,6 +65,7 @@ export function DonutChart(props: DonutChartProps) {
         labelFormatter={labelFormatter}
         comparisonMetric={comparisonMetric}
         showLegend={showLegend}
+        showLegendValues={showLegendValues}
         legendFullWidth={legendFullWidth}
         legendPosition={legendPosition}
         renderInnerValueContent={renderInnerValueContent}

diff --git a/packages/polaris-viz/src/components/DonutChart/components/InnerValue/InnerValue.tsx b/packages/polaris-viz/src/components/DonutChart/components/InnerValue/InnerValue.tsx
@@ -9,7 +9,7 @@ import type {ComparisonMetricProps} from '../../../ComparisonMetric';
 import {ComparisonMetric} from '../../../ComparisonMetric';
 import styles from '../../DonutChart.scss';
 
-interface Props {
+export interface InnerValueProps {
   activeValue: number | null | undefined;
   activeIndex: number;
   labelFormatter: LabelFormatter;
@@ -27,7 +27,7 @@ export function InnerValue({
   isAnimated,
   renderInnerValueContent,
   totalValue,
-}: Props) {
+}: InnerValueProps) {
   const selectedTheme = useTheme();
 
   const {animatedValue} = useSpring({
@@ -50,7 +50,9 @@ export function InnerValue({
   );
 
   const activeValueExists = activeValue !== null && activeValue !== undefined;
-  const valueToDisplay = activeValueExists ? activeValue : animatedTotalValue;
+  const valueToDisplay = activeValueExists
+    ? labelFormatter(activeValue)
+    : animatedTotalValue;
 
   const innerContent = renderInnerValueContent?.({
     activeValue,

diff --git a/...ges/polaris-viz/src/components/DonutChart/components/InnerValue/tests/InnerValue.test.tsx b/...ges/polaris-viz/src/components/DonutChart/components/InnerValue/tests/InnerValue.test.tsx
@@ -2,13 +2,15 @@ import {mount} from '@shopify/react-testing';
 import {animated, config} from '@react-spring/web';
 import {min} from 'd3-array';
 
+import type {InnerValueProps} from '../InnerValue';
 import {InnerValue} from '../InnerValue';
 import {ComparisonMetric} from '../../../../ComparisonMetric';
 
-const mockProps = {
+const mockProps: InnerValueProps = {
   activeValue: 100,
+  activeIndex: 1,
   totalValue: 1000,
-  labelFormatter: jest.fn(),
+  labelFormatter: (value) => value,
   isAnimated: true,
 };
 

diff --git a/packages/polaris-viz/src/components/DonutChart/components/LegendValues/LegendValues.scss b/packages/polaris-viz/src/components/DonutChart/components/LegendValues/LegendValues.scss
@@ -0,0 +1,26 @@
+.Table {
+  min-width: 200px;
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0 10px;
+
+  .ColorPreview {
+    width: 12px;
+  }
+
+  .Name {
+    padding-left: 4px;
+  }
+
+  .TableSpacer {
+    padding-left: 30px;
+  }
+
+  .alignLeft {
+    text-align: left;
+  }
+
+  .alignRight {
+    text-align: right;
+  }
+}
diff --git a/packages/polaris-viz/src/components/DonutChart/components/LegendValues/LegendValues.tsx b/packages/polaris-viz/src/components/DonutChart/components/LegendValues/LegendValues.tsx
@@ -0,0 +1,93 @@
+import type {ColorVisionInteractionMethods, DataSeries} from 'index';
+import type {LabelFormatter} from '@shopify/polaris-viz-core';
+import {useTheme} from '@shopify/polaris-viz-core';
+
+import {TrendIndicator} from '../../../TrendIndicator';
+import {getTrendIndicatorData} from '../../../../utilities/getTrendIndicatorData';
+import {SquareColorPreview} from '../../../../components/SquareColorPreview';
+
+import styles from './LegendValues.scss';
+
+interface LegendContentProps {
+  data: DataSeries[];
+  labelFormatter: LabelFormatter;
+  getColorVisionStyles: ColorVisionInteractionMethods['getColorVisionStyles'];
+  getColorVisionEventAttrs: ColorVisionInteractionMethods['getColorVisionEventAttrs'];
+}
+
+export function LegendValues({
+  data,
+  labelFormatter,
+  getColorVisionStyles,
+  getColorVisionEventAttrs,
+}: LegendContentProps) {
+  const selectedTheme = useTheme();
+
+  const maxTrendIndicatorWidth = data.reduce((maxWidth, {metadata}) => {
+    if (!metadata?.trend) {
+      return maxWidth;
+    }
+
+    const {trendIndicatorWidth} = getTrendIndicatorData(metadata.trend);
+
+    return Math.max(maxWidth, trendIndicatorWidth);
+  }, 0);
+
+  return (
+    <table className={styles.Table}>
+      {data.map(({name, data, metadata}, index) => {
+        const value = data[0].value;
+        const valueExists = value !== null && value !== undefined;
+
+        return (
+          <tr
+            key={name}
+            style={{
+              ...getColorVisionStyles(index),
+            }}
+            {...getColorVisionEventAttrs(index)}
+          >
+            <td className={styles.ColorPreview}>
+              <SquareColorPreview
+                color={selectedTheme.seriesColors.upToEight[index]}
+              />
+            </td>
+
+            <td className={styles.Name}>
+              <span
+                style={{
+                  color: selectedTheme.legend.labelColor,
+                }}
+              >
+                {name}
+              </span>
+            </td>
+
+            <td className={styles.TableSpacer} />
+
+            <td className={styles.alignRight}>
+              <span
+                style={{
+                  color: selectedTheme.legend.labelColor,
+                }}
+              >
+                {valueExists ? labelFormatter(value) : '-'}
+              </span>
+            </td>
+
+            <td
+              className={styles.alignLeft}
+              style={{minWidth: maxTrendIndicatorWidth, paddingLeft: '4px'}}
+            >
+              <span>
+                {metadata?.trend && valueExists && (
+                  <TrendIndicator {...metadata.trend} />
+                )}
+              </span>
+            </td>
+          </tr>
+        );
+      })}
+    </table>
+  );
+}
diff --git a/packages/polaris-viz/src/components/DonutChart/components/LegendValues/index.ts b/packages/polaris-viz/src/components/DonutChart/components/LegendValues/index.ts
@@ -0,0 +1 @@
+export {LegendValues} from './LegendValues';
diff --git a/packages/polaris-viz/src/components/DonutChart/components/index.ts b/packages/polaris-viz/src/components/DonutChart/components/index.ts
@@ -1 +1,2 @@
 export {InnerValue} from './InnerValue';
+export {LegendValues} from './LegendValues';
diff --git a/packages/polaris-viz/src/components/DonutChart/stories/WithLegendValues.stories.tsx b/packages/polaris-viz/src/components/DonutChart/stories/WithLegendValues.stories.tsx
@@ -0,0 +1,60 @@
+import type {Story} from '@storybook/react';
+
+export {META as default} from './meta';
+
+import type {DonutChartProps} from '../../DonutChart';
+
+import {DEFAULT_PROPS, Template} from './data';
+
+export const WithLegendValues: Story<DonutChartProps> = Template.bind({});
+
+WithLegendValues.args = {
+  ...DEFAULT_PROPS,
+  showLegend: true,
+  showLegendValues: true,
+  legendPosition: 'right',
+  labelFormatter: (value) => `$${value}`,
+  data: [
+    {
+      name: 'Shopify Payments',
+      data: [{key: 'april - march', value: 50000}],
+      metadata: {
+        trend: {
+          value: '5%',
+        },
+      },
+    },
+    {
+      name: 'Paypal',
+      data: [{key: 'april - march', value: 25000}],
+      metadata: {
+        trend: {
+          value: '50%',
+          direction: 'downward',
+          trend: 'negative',
+        },
+      },
+    },
+    {
+      name: 'Other',
+      data: [{key: 'april - march', value: 10000}],
+      metadata: {
+        trend: {
+          value: '100%',
+          direction: 'upward',
+          trend: 'positive',
+        },
+      },
+    },
+    {
+      name: 'Amazon Pay',
+      data: [{key: 'april - march', value: 5000}],
+      metadata: {
+        trend: {
+          direction: 'upward',
+          trend: 'positive',
+        },
+      },
+    },
+  ],
+};
diff --git a/packages/polaris-viz/src/components/DonutChart/stories/meta.tsx b/packages/polaris-viz/src/components/DonutChart/stories/meta.tsx
@@ -7,6 +7,8 @@ import {
   LEGEND_FULL_WIDTH_ARGS,
   LEGEND_POSITION_ARGS,
   RENDER_LEGEND_CONTENT_ARGS,
+  SHOW_LEGEND_ARGS,
+  SHOW_LEGEND_VALUES_ARGS,
   THEME_CONTROL_ARGS,
 } from '../../../storybook/constants';
 import type {DonutChartProps} from '../DonutChart';
@@ -29,6 +31,8 @@ export const META: Meta<DonutChartProps> = {
     data: DATA_SERIES_ARGS,
     legendFullWidth: LEGEND_FULL_WIDTH_ARGS,
     legendPosition: LEGEND_POSITION_ARGS,
+    showLegend: SHOW_LEGEND_ARGS,
+    showLegendValues: SHOW_LEGEND_VALUES_ARGS,
     renderLegendContent: RENDER_LEGEND_CONTENT_ARGS,
     theme: THEME_CONTROL_ARGS,
     state: CHART_STATE_CONTROL_ARGS,
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export {InnerValue} from './InnerValue';
		export {LegendValues} from './LegendValues';