Add dashed support for legends

Shopify · Dec 4, 2024 · 293ef57 · 293ef57
1 parent b38b128
commit 293ef57
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 6 deletions.
diff --git a/packages/polaris-viz-core/src/types.ts b/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;

diff --git a/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.tsx b/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,12 @@ export function LegendItem({
           style={{height: PREVIEW_ICON_SIZE, width: PREVIEW_ICON_SIZE}}
           className={style.IconContainer}
         >
-          <SeriesIcon shape={shape} color={color} isComparison={isComparison} />
+          <SeriesIcon
+            lineStyle={lineStyle}
+            shape={shape}
+            color={color}
+            isComparison={isComparison}
+          />
         </span>
       ) : (
         renderSeriesIcon()

diff --git a/...s/polaris-viz/src/components/LineChartRelational/components/CustomLegend/CustomLegend.tsx b/...s/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>

diff --git a/packages/polaris-viz/src/components/LineChartRelational/stories/data.tsx b/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,

diff --git a/packages/polaris-viz/src/components/LinePreview/LinePreview.tsx b/packages/polaris-viz/src/components/LinePreview/LinePreview.tsx
@@ -102,6 +102,17 @@ function getLinePreview({
           })}
         </g>
       );
+    case 'dashed':
+      return (
+        <path
+          d={`M1 1 H${PREVIEW_ICON_SIZE}`}
+          stroke={color}
+          strokeLinejoin="round"
+          strokeLinecap="round"
+          strokeWidth={width}
+          strokeDasharray="1.5 3"
+        />
+      );
     default:
       return (
         <path

diff --git a/packages/polaris-viz/src/components/shared/SeriesIcon/SeriesIcon.tsx b/packages/polaris-viz/src/components/shared/SeriesIcon/SeriesIcon.tsx
@@ -1,4 +1,4 @@
-import type {Shape, Color} from '@shopify/polaris-viz-core';
+import type {Shape, Color, LineStyle} from '@shopify/polaris-viz-core';
 import {useTheme} from '@shopify/polaris-viz-core';
 
 import {LinePreview} from '../../LinePreview';
@@ -8,18 +8,20 @@ interface Props {
   color: Color;
   isComparison?: boolean;
   shape?: Shape;
+  lineStyle?: LineStyle;
 }
 
 export function SeriesIcon({
   color,
   isComparison = false,
+  lineStyle,
   shape = 'Bar',
 }: Props) {
   const selectedTheme = useTheme();
 
   switch (shape) {
     case 'Line': {
-      const style = isComparison ? 'dotted' : 'solid';
+      const style = isComparison ? 'dotted' : lineStyle ?? 'solid';
       const lineColor = isComparison
         ? selectedTheme.seriesColors.comparison
         : color;