From 293ef572c4b9139dc43b32586513f023ed795074 Mon Sep 17 00:00:00 2001 From: George Date: Wed, 4 Dec 2024 10:17:36 -0300 Subject: [PATCH 1/4] Add dashed support for legends --- packages/polaris-viz-core/src/types.ts | 2 +- .../Legend/components/LegendItem/LegendItem.tsx | 11 +++++++++-- .../components/CustomLegend/CustomLegend.tsx | 2 +- .../components/LineChartRelational/stories/data.tsx | 4 ++++ .../src/components/LinePreview/LinePreview.tsx | 11 +++++++++++ .../src/components/shared/SeriesIcon/SeriesIcon.tsx | 6 ++++-- 6 files changed, 30 insertions(+), 6 deletions(-) diff --git a/packages/polaris-viz-core/src/types.ts b/packages/polaris-viz-core/src/types.ts index d4c659b96..f17b076d7 100644 --- 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 index 636434625..68afe9d95 100644 --- 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(null); @@ -120,7 +122,12 @@ export function LegendItem({ style={{height: PREVIEW_ICON_SIZE, width: PREVIEW_ICON_SIZE}} className={style.IconContainer} > - + ) : ( renderSeriesIcon() 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 0ea9a5679..e8a62dc3e 100644 --- a/packages/polaris-viz/src/components/LineChartRelational/components/CustomLegend/CustomLegend.tsx +++ b/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 (
    • diff --git a/packages/polaris-viz/src/components/LineChartRelational/stories/data.tsx b/packages/polaris-viz/src/components/LineChartRelational/stories/data.tsx index be61833e7..95f47150d 100644 --- 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 index c81d80d8b..5610b1245 100644 --- a/packages/polaris-viz/src/components/LinePreview/LinePreview.tsx +++ b/packages/polaris-viz/src/components/LinePreview/LinePreview.tsx @@ -102,6 +102,17 @@ function getLinePreview({ })} ); + case 'dashed': + return ( + + ); default: return ( Date: Wed, 4 Dec 2024 10:43:01 -0300 Subject: [PATCH 2/4] Add tests --- packages/polaris-viz/CHANGELOG.md | 4 ++++ .../src/components/LinePreview/tests/LinePreview.test.tsx | 8 ++++++++ .../src/components/shared/SeriesIcon/SeriesIcon.test.tsx | 8 ++++++++ 3 files changed, 20 insertions(+) diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md index 7b09dbfd8..9e5a88397 100644 --- a/packages/polaris-viz/CHANGELOG.md +++ b/packages/polaris-viz/CHANGELOG.md @@ -9,6 +9,10 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). ## [15.3.4] - 2024-12-03 +### Added + +- Added dashed `lineStyle` support for custom legends in `` + ### Fixed - Fixed issue where `` would run the `seriesNameFormatter` for multiple times on a ``. diff --git a/packages/polaris-viz/src/components/LinePreview/tests/LinePreview.test.tsx b/packages/polaris-viz/src/components/LinePreview/tests/LinePreview.test.tsx index b16da34a7..c286e80b3 100644 --- a/packages/polaris-viz/src/components/LinePreview/tests/LinePreview.test.tsx +++ b/packages/polaris-viz/src/components/LinePreview/tests/LinePreview.test.tsx @@ -20,4 +20,12 @@ describe('', () => { expect(linePreview).toContainReactComponentTimes('circle', 3); }); + + it('renders a dashed path if lineStyle is dashed', () => { + const linePreview = mount(); + + expect(linePreview).toContainReactComponent('path', { + strokeDasharray: '1.5 3', + }); + }); }); diff --git a/packages/polaris-viz/src/components/shared/SeriesIcon/SeriesIcon.test.tsx b/packages/polaris-viz/src/components/shared/SeriesIcon/SeriesIcon.test.tsx index f71b0788e..d0aa15884 100644 --- a/packages/polaris-viz/src/components/shared/SeriesIcon/SeriesIcon.test.tsx +++ b/packages/polaris-viz/src/components/shared/SeriesIcon/SeriesIcon.test.tsx @@ -52,4 +52,12 @@ describe('isComparison', () => { lineStyle: 'dotted', }); }); + + it('renders LinePreview as dashed when lineStyle prop is set to dashed', () => { + const component = mount( + , + ); + + expect(component.find(LinePreview)).toHaveReactProps({lineStyle: 'dashed'}); + }); }); From 1ab29e433bd5f940c3f636d007033e4bb4361140 Mon Sep 17 00:00:00 2001 From: George Date: Wed, 4 Dec 2024 12:24:00 -0300 Subject: [PATCH 3/4] Refactor SeriesIcon --- .../components/LegendItem/LegendItem.tsx | 5 ++--- .../LegendItem/test/LegendItem.test.tsx | 9 +++++++++ .../CustomLegend/tests/CustomLegend.test.tsx | 14 ++++++++++++++ .../src/components/LinePreview/LinePreview.tsx | 8 ++++++-- .../components/TooltipRow/TooltipRow.tsx | 6 ++++-- .../shared/SeriesIcon/SeriesIcon.test.tsx | 16 ++++------------ .../shared/SeriesIcon/SeriesIcon.tsx | 18 +++--------------- packages/polaris-viz/src/constants.ts | 1 + 8 files changed, 43 insertions(+), 34 deletions(-) diff --git a/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.tsx b/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.tsx index 68afe9d95..de60d788e 100644 --- a/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.tsx +++ b/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.tsx @@ -123,10 +123,9 @@ export function LegendItem({ className={style.IconContainer} > ) : ( diff --git a/packages/polaris-viz/src/components/Legend/components/LegendItem/test/LegendItem.test.tsx b/packages/polaris-viz/src/components/Legend/components/LegendItem/test/LegendItem.test.tsx index 7e35e8ec2..6ae911ee5 100644 --- a/packages/polaris-viz/src/components/Legend/components/LegendItem/test/LegendItem.test.tsx +++ b/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('', () => { }); }); }); + + describe('lineStyle', () => { + it('renders a dotted line when isComparison prop is true', () => { + const item = mount(); + + expect(item.find(SeriesIcon)).toHaveReactProps({lineStyle: 'dotted'}); + }); + }); }); diff --git a/packages/polaris-viz/src/components/LineChartRelational/components/CustomLegend/tests/CustomLegend.test.tsx b/packages/polaris-viz/src/components/LineChartRelational/components/CustomLegend/tests/CustomLegend.test.tsx index abc9fa71c..425a52560 100644 --- a/packages/polaris-viz/src/components/LineChartRelational/components/CustomLegend/tests/CustomLegend.test.tsx +++ b/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('', () => { describe('seriesNameFormatter', () => { @@ -18,6 +19,16 @@ describe('', () => { expect(component).toContainReactText('Name: 75th - 25th percentile'); }); }); + + describe('lineStyle', () => { + it('renders a LegendItem with the lineStyle from metadata.lineStyle', () => { + const component = mount(); + + expect(component).toContainReactComponent(LegendItem, { + lineStyle: 'dashed', + }); + }); + }); }); const MOCK_PROPS: Props = { @@ -25,6 +36,9 @@ const MOCK_PROPS: Props = { { name: 'Average', data: [{value: 333, key: '2020-03-01T12:00:00'}], + metadata: { + lineStyle: 'dashed', + }, }, { name: '75th Percentile', diff --git a/packages/polaris-viz/src/components/LinePreview/LinePreview.tsx b/packages/polaris-viz/src/components/LinePreview/LinePreview.tsx index 5610b1245..b0dd352f9 100644 --- a/packages/polaris-viz/src/components/LinePreview/LinePreview.tsx +++ b/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, @@ -110,7 +114,7 @@ function getLinePreview({ strokeLinejoin="round" strokeLinecap="round" strokeWidth={width} - strokeDasharray="1.5 3" + strokeDasharray={DASHED_LINE_PREVIEW_STROKE_DASHARRAY} /> ); default: diff --git a/packages/polaris-viz/src/components/TooltipContent/components/TooltipRow/TooltipRow.tsx b/packages/polaris-viz/src/components/TooltipContent/components/TooltipRow/TooltipRow.tsx index d335cbfb4..035222491 100644 --- a/packages/polaris-viz/src/components/TooltipContent/components/TooltipRow/TooltipRow.tsx +++ b/packages/polaris-viz/src/components/TooltipContent/components/TooltipRow/TooltipRow.tsx @@ -51,9 +51,11 @@ export function TooltipRow({
    {renderSeriesIcon?.() ?? ( )}
    diff --git a/packages/polaris-viz/src/components/shared/SeriesIcon/SeriesIcon.test.tsx b/packages/polaris-viz/src/components/shared/SeriesIcon/SeriesIcon.test.tsx index d0aa15884..e7e822c15 100644 --- a/packages/polaris-viz/src/components/shared/SeriesIcon/SeriesIcon.test.tsx +++ b/packages/polaris-viz/src/components/shared/SeriesIcon/SeriesIcon.test.tsx @@ -36,24 +36,16 @@ 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( - , + , ); expect(component.find(LinePreview)).toHaveReactProps({lineStyle: 'dotted'}); }); - it('does not render a comparison line when isComparison prop is not passed', () => { - const component = mount(); - - expect(component.find(LinePreview)).not.toHaveReactProps({ - lineStyle: 'dotted', - }); - }); - - it('renders LinePreview as dashed when lineStyle prop is set to dashed', () => { + it('renders a dashed line when lineStyle prop is set to dashed', () => { const component = mount( , ); diff --git a/packages/polaris-viz/src/components/shared/SeriesIcon/SeriesIcon.tsx b/packages/polaris-viz/src/components/shared/SeriesIcon/SeriesIcon.tsx index 0510f3502..33c1b97a0 100644 --- a/packages/polaris-viz/src/components/shared/SeriesIcon/SeriesIcon.tsx +++ b/packages/polaris-viz/src/components/shared/SeriesIcon/SeriesIcon.tsx @@ -1,32 +1,20 @@ import type {Shape, Color, LineStyle} from '@shopify/polaris-viz-core'; -import {useTheme} 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, - lineStyle, - shape = 'Bar', -}: Props) { - const selectedTheme = useTheme(); - +export function SeriesIcon({color, lineStyle, shape = 'Bar'}: Props) { switch (shape) { case 'Line': { - const style = isComparison ? 'dotted' : lineStyle ?? 'solid'; - const lineColor = isComparison - ? selectedTheme.seriesColors.comparison - : color; + const style = lineStyle ?? 'solid'; - return ; + return ; } case 'Bar': default: diff --git a/packages/polaris-viz/src/constants.ts b/packages/polaris-viz/src/constants.ts index 9580ecd33..80b847677 100644 --- a/packages/polaris-viz/src/constants.ts +++ b/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; From fc412a3723b484480d6b4cd1e2cc2a7920b5db0f Mon Sep 17 00:00:00 2001 From: George Date: Wed, 4 Dec 2024 19:23:31 -0300 Subject: [PATCH 4/4] Fix textAnchor property in SingleTextLine --- packages/polaris-viz/CHANGELOG.md | 7 ++--- .../AnnotationLabel/AnnotationLabel.test.tsx | 26 ++++++++++++++++++- .../AnnotationLabel/AnnotationLabel.tsx | 4 ++- .../src/components/Labels/SingleTextLine.tsx | 4 +-- .../src/components/YAxis/YAxis.tsx | 2 +- 5 files changed, 35 insertions(+), 8 deletions(-) diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md index 9e5a88397..b71e69615 100644 --- a/packages/polaris-viz/CHANGELOG.md +++ b/packages/polaris-viz/CHANGELOG.md @@ -5,14 +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). - - -## [15.3.4] - 2024-12-03 +## Unreleased ### Added - Added dashed `lineStyle` support for custom legends in `` +## [15.3.4] - 2024-12-03 + + ### Fixed - Fixed issue where `` would run the `seriesNameFormatter` for multiple times on a ``. diff --git a/packages/polaris-viz/src/components/Annotations/components/AnnotationLabel/AnnotationLabel.test.tsx b/packages/polaris-viz/src/components/Annotations/components/AnnotationLabel/AnnotationLabel.test.tsx index ba9f50dbf..111d7db0d 100644 --- a/packages/polaris-viz/src/components/Annotations/components/AnnotationLabel/AnnotationLabel.test.tsx +++ b/packages/polaris-viz/src/components/Annotations/components/AnnotationLabel/AnnotationLabel.test.tsx @@ -49,7 +49,31 @@ describe('', () => { 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( + + + , + ); + + 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', }); }); diff --git a/packages/polaris-viz/src/components/Annotations/components/AnnotationLabel/AnnotationLabel.tsx b/packages/polaris-viz/src/components/Annotations/components/AnnotationLabel/AnnotationLabel.tsx index 18ede2cb3..a7a391186 100644 --- a/packages/polaris-viz/src/components/Annotations/components/AnnotationLabel/AnnotationLabel.tsx +++ b/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 ( diff --git a/packages/polaris-viz/src/components/Labels/SingleTextLine.tsx b/packages/polaris-viz/src/components/Labels/SingleTextLine.tsx index d49c2c44c..70a008a31 100644 --- a/packages/polaris-viz/src/components/Labels/SingleTextLine.tsx +++ b/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) { diff --git a/packages/polaris-viz/src/components/YAxis/YAxis.tsx b/packages/polaris-viz/src/components/YAxis/YAxis.tsx index 3a71d256a..6f83e6673 100644 --- a/packages/polaris-viz/src/components/YAxis/YAxis.tsx +++ b/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" />