Add dashed support for legends

packages/polaris-viz-core/src/types.ts

@@ -41,7 +41,7 @@ export interface DataGroup {
 
 export type Shape = 'Line' | 'Bar';
 
-export type LineStyle = 'solid' | 'dotted';
+export type LineStyle = 'solid' | 'dotted' | 'dashed';
 
 export interface GradientStop {
   offset: number;

packages/polaris-viz/CHANGELOG.md

@@ -5,10 +5,15 @@ 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 dashed `lineStyle` support for custom legends in `<LineChartRelational />`
 
 ## [15.3.4] - 2024-12-03
 
+
 ### Fixed
 
 - Fixed issue where `<DonutChart />` would run the `seriesNameFormatter` for multiple times on a `<Legend />`.

packages/polaris-viz/src/components/Annotations/components/AnnotationLabel/AnnotationLabel.test.tsx

@@ -49,7 +49,31 @@ describe('<AnnotationLabel />', () => {
       text: 'Label',
       targetWidth: 81,
       y: 5,
-      x: 10,
+      x: 50,
+    });
+  });
+
+  it('renders a text line with textAnchor="middle" starting at the center of the pill', () => {
+    const chart = mount(
+      <svg>
+        <AnnotationLabel {...MOCK_PROPS} />
+      </svg>,
+    );
+
+    expect(chart).toContainReactComponent('rect', {
+      height: 20,
+      width: 100,
+      ry: 10,
+    });
+    expect(chart).toContainReactComponent(SingleTextLine, {
+      ariaHidden: true,
+      text: 'Label',
+      targetWidth: 81,
+      y: 5,
+      x: MOCK_PROPS.position.width / 2,
+    });
+    expect(chart).toContainReactComponentTimes('text', 1, {
+      textAnchor: 'middle',
     });
   });
 

packages/polaris-viz/src/components/Annotations/components/AnnotationLabel/AnnotationLabel.tsx

@@ -40,6 +40,8 @@ export function AnnotationLabel({
 
   const formattedAriaLabel = `${ariaLabel}: ${label}`;
 
+  const centerX = width / 2;
+
   return (
     <g
       transform={`translate(${x},${y})`}
@@ -69,7 +71,7 @@ export function AnnotationLabel({
         text={label}
         targetWidth={width - PILL_PADDING * 2 + PX_OFFSET}
         y={PILL_HEIGHT - LINE_HEIGHT - PX_OFFSET}
-        x={PILL_PADDING}
+        x={centerX}
       />
 
       <Fragment>

packages/polaris-viz/src/components/Labels/SingleTextLine.tsx

@@ -16,7 +16,7 @@ interface SingleTextLineProps {
   y: number;
   ariaHidden?: boolean;
   dominantBaseline?: 'middle' | 'hanging';
-  textAnchor?: 'left' | 'center' | 'right';
+  textAnchor?: 'start' | 'middle' | 'end';
 }
 
 export function SingleTextLine({
@@ -26,7 +26,7 @@ export function SingleTextLine({
   fontSize,
   targetWidth,
   text,
-  textAnchor = 'center',
+  textAnchor = 'middle',
   y,
   x,
 }: SingleTextLineProps) {

packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.tsx

@@ -1,4 +1,4 @@
-import type {LabelFormatter} from '@shopify/polaris-viz-core';
+import type {LabelFormatter, LineStyle} from '@shopify/polaris-viz-core';
 import {
   getColorVisionEventAttrs,
   getColorVisionStylesForActiveIndex,
@@ -40,6 +40,7 @@ export interface LegendItemProps extends LegendData {
   truncate?: boolean;
   showLegendValues?: boolean;
   seriesNameFormatter?: LabelFormatter;
+  lineStyle?: LineStyle;
 }
 
 export function LegendItem({
@@ -58,6 +59,7 @@ export function LegendItem({
   truncate = false,
   showLegendValues = false,
   seriesNameFormatter = (value) => `${value}`,
+  lineStyle,
 }: LegendItemProps) {
   const selectedTheme = useTheme(theme);
   const ref = useRef<HTMLButtonElement | null>(null);
@@ -120,7 +122,11 @@ export function LegendItem({
           style={{height: PREVIEW_ICON_SIZE, width: PREVIEW_ICON_SIZE}}
           className={style.IconContainer}
         >
-          <SeriesIcon shape={shape} color={color} isComparison={isComparison} />
+          <SeriesIcon
+            lineStyle={isComparison ? 'dotted' : lineStyle}
+            shape={shape}
+            color={isComparison ? selectedTheme.seriesColors.comparison : color}
+          />
         </span>
       ) : (
         renderSeriesIcon()

packages/polaris-viz/src/components/Legend/components/LegendItem/test/LegendItem.test.tsx

@@ -2,6 +2,7 @@ import {mount} from '@shopify/react-testing';
 
 import type {LegendItemProps} from '../LegendItem';
 import {LegendItem, MINIMUM_LEGEND_ITEM_WIDTH} from '../LegendItem';
+import {SeriesIcon} from '../../../../shared/SeriesIcon';
 
 const mockProps: LegendItemProps = {
   activeIndex: 2,
@@ -144,4 +145,12 @@ describe('<LegendItem />', () => {
       });
     });
   });
+
+  describe('lineStyle', () => {
+    it('renders a dotted line when isComparison prop is true', () => {
+      const item = mount(<LegendItem {...mockProps} isComparison />);
+
+      expect(item.find(SeriesIcon)).toHaveReactProps({lineStyle: 'dotted'});
+    });
+  });
 });

packages/polaris-viz/src/components/LineChartRelational/components/CustomLegend/CustomLegend.tsx

@@ -36,7 +36,6 @@ export function CustomLegend({
         }
 
         const index = data.findIndex((series) => series.name === name);
-
         return (
           <li
             key={index}
@@ -51,6 +50,7 @@ export function CustomLegend({
               isComparison={isComparison}
               name={seriesNameFormatter(name ?? '')}
               shape="Line"
+              lineStyle={metadata?.lineStyle}
               theme={theme}
             />
           </li>

packages/polaris-viz/src/components/LineChartRelational/components/CustomLegend/tests/CustomLegend.test.tsx

@@ -3,6 +3,7 @@ import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 import type {Props} from '../CustomLegend';
 import {CustomLegend} from '../CustomLegend';
+import {LegendItem} from '../../../../Legend';
 
 describe('<CustomLegend />', () => {
   describe('seriesNameFormatter', () => {
@@ -18,13 +19,26 @@ describe('<CustomLegend />', () => {
       expect(component).toContainReactText('Name: 75th - 25th percentile');
     });
   });
+
+  describe('lineStyle', () => {
+    it('renders a LegendItem with the lineStyle from metadata.lineStyle', () => {
+      const component = mount(<CustomLegend {...MOCK_PROPS} />);
+
+      expect(component).toContainReactComponent(LegendItem, {
+        lineStyle: 'dashed',
+      });
+    });
+  });
 });
 
 const MOCK_PROPS: Props = {
   data: [
     {
       name: 'Average',
       data: [{value: 333, key: '2020-03-01T12:00:00'}],
+      metadata: {
+        lineStyle: 'dashed',
+      },
     },
     {
       name: '75th Percentile',

packages/polaris-viz/src/components/LineChartRelational/stories/data.tsx

@@ -105,6 +105,10 @@ export const DEFAULT_DATA: DataSeries[] = [
       {value: 21, key: '2020-03-14T12:00:00'},
     ],
     color: LIGHT_THEME.seriesColors.limited[5],
+    metadata: {
+      lineStyle: 'dashed',
+    },
+
     styleOverride: {
       line: {
         hasArea: false,

packages/polaris-viz/src/components/LinePreview/LinePreview.tsx

@@ -6,7 +6,11 @@ import {
   uniqueId,
 } from '@shopify/polaris-viz-core';
 
-import {PREVIEW_ICON_SIZE, XMLNS} from '../../constants';
+import {
+  DASHED_LINE_PREVIEW_STROKE_DASHARRAY,
+  PREVIEW_ICON_SIZE,
+  XMLNS,
+} from '../../constants';
 
 import {
   DOTTED_LINE_PREVIEW_CY,
@@ -102,6 +106,17 @@ function getLinePreview({
           })}
         </g>
       );
+    case 'dashed':
+      return (
+        <path
+          d={`M1 1 H${PREVIEW_ICON_SIZE}`}
+          stroke={color}
+          strokeLinejoin="round"
+          strokeLinecap="round"
+          strokeWidth={width}
+          strokeDasharray={DASHED_LINE_PREVIEW_STROKE_DASHARRAY}
+        />
+      );
     default:
       return (
         <path

packages/polaris-viz/src/components/LinePreview/tests/LinePreview.test.tsx

@@ -20,4 +20,12 @@ describe('<LinePreview />', () => {
 
     expect(linePreview).toContainReactComponentTimes('circle', 3);
   });
+
+  it('renders a dashed path if lineStyle is dashed', () => {
+    const linePreview = mount(<LinePreview color="red" lineStyle="dashed" />);
+
+    expect(linePreview).toContainReactComponent('path', {
+      strokeDasharray: '1.5 3',
+    });
+  });
 });

packages/polaris-viz/src/components/TooltipContent/components/TooltipRow/TooltipRow.tsx

@@ -51,9 +51,11 @@ export function TooltipRow({
         <div style={{width: PREVIEW_ICON_SIZE}}>
           {renderSeriesIcon?.() ?? (
             <SeriesIcon
-              color={color!}
-              isComparison={isComparison}
+              color={
+                isComparison ? selectedTheme.seriesColors.comparison : color!
+              }
               shape={shape}
+              lineStyle={isComparison ? 'dotted' : 'solid'}
             />
           )}
         </div>

packages/polaris-viz/src/components/YAxis/YAxis.tsx

@@ -62,7 +62,7 @@ export function YAxis({
               fontSize={fontSize}
               targetWidth={clampedWidth}
               text={formattedValue}
-              textAnchor="left"
+              textAnchor="start"
               dominantBaseline="middle"
             />
           </g>

packages/polaris-viz/src/components/shared/SeriesIcon/SeriesIcon.test.tsx

@@ -36,20 +36,20 @@ describe('color', () => {
   });
 });
 
-describe('isComparison', () => {
-  it('renders a comparison line when true', () => {
+describe('lineStyle', () => {
+  it('renders a dotted line when lineStyle prop is set to dotted', () => {
     const component = mount(
-      <SeriesIcon shape="Line" color="red" isComparison="true" />,
+      <SeriesIcon shape="Line" color="red" lineStyle="dotted" />,
     );
 
     expect(component.find(LinePreview)).toHaveReactProps({lineStyle: 'dotted'});
   });
 
-  it('does not render a comparison line when isComparison prop is not passed', () => {
-    const component = mount(<SeriesIcon shape="Line" color="red" />);
+  it('renders a dashed line when lineStyle prop is set to dashed', () => {
+    const component = mount(
+      <SeriesIcon shape="Line" color="red" lineStyle="dashed" />,
+    );
 
-    expect(component.find(LinePreview)).not.toHaveReactProps({
-      lineStyle: 'dotted',
-    });
+    expect(component.find(LinePreview)).toHaveReactProps({lineStyle: 'dashed'});
   });
 });

packages/polaris-viz/src/components/shared/SeriesIcon/SeriesIcon.tsx

@@ -1,30 +1,20 @@
-import type {Shape, Color} from '@shopify/polaris-viz-core';
-import {useTheme} from '@shopify/polaris-viz-core';
+import type {Shape, Color, LineStyle} from '@shopify/polaris-viz-core';
 
 import {LinePreview} from '../../LinePreview';
 import {SquareColorPreview} from '../../SquareColorPreview';
 
 interface Props {
   color: Color;
-  isComparison?: boolean;
   shape?: Shape;
+  lineStyle?: LineStyle;
 }
 
-export function SeriesIcon({
-  color,
-  isComparison = false,
-  shape = 'Bar',
-}: Props) {
-  const selectedTheme = useTheme();
-
+export function SeriesIcon({color, lineStyle, shape = 'Bar'}: Props) {
   switch (shape) {
     case 'Line': {
-      const style = isComparison ? 'dotted' : 'solid';
-      const lineColor = isComparison
-        ? selectedTheme.seriesColors.comparison
-        : color;
+      const style = lineStyle ?? 'solid';
 
-      return <LinePreview color={lineColor} lineStyle={style} />;
+      return <LinePreview color={color} lineStyle={style} />;
     }
     case 'Bar':
     default:

packages/polaris-viz/src/constants.ts

@@ -55,6 +55,7 @@ export const Y_AXIS_LABEL_OFFSET = 2;
 export const TOOLTIP_BG_OPACITY = 0.8;
 export const COLLAPSED_ANNOTATIONS_COUNT = 3;
 export const PREVIEW_ICON_SIZE = 12;
+export const DASHED_LINE_PREVIEW_STROKE_DASHARRAY = '1.5 3';
 export const ARC_PAD_ANGLE = 0.02;
 export const ZERO_VALUE_LINE_HEIGHT = 6;
 export const NEGATIVE_ZERO_LINE_OFFSET = 10;