From 82d1eaceed0a02dcdfec1048c968a95475154cb4 Mon Sep 17 00:00:00 2001 From: Matt Vickers Date: Wed, 20 Mar 2024 12:25:28 -0500 Subject: [PATCH] Implement design changes to LineChartRelational --- packages/polaris-viz-core/src/types.ts | 3 + .../src/components/LineChart/Chart.tsx | 4 + .../LineChart/components/Points/Points.tsx | 4 + .../LineChartRelational.tsx | 26 +++++-- .../components/Area/Area.tsx | 2 +- .../components/CustomLegend/CustomLegend.scss | 6 ++ .../components/CustomLegend/CustomLegend.tsx | 76 +++++++++++++++++++ .../components/CustomLegend/index.ts | 1 + .../components/RelatedAreas/RelatedAreas.tsx | 8 +- .../LineChartRelational/components/index.ts | 1 + .../stories/Default.stories.tsx | 2 + .../LineChartRelational/stories/data.tsx | 34 +++++---- .../utilities/renderLinearTooltipContent.tsx | 4 +- 13 files changed, 146 insertions(+), 25 deletions(-) create mode 100644 packages/polaris-viz/src/components/LineChartRelational/components/CustomLegend/CustomLegend.scss create mode 100644 packages/polaris-viz/src/components/LineChartRelational/components/CustomLegend/CustomLegend.tsx create mode 100644 packages/polaris-viz/src/components/LineChartRelational/components/CustomLegend/index.ts diff --git a/packages/polaris-viz-core/src/types.ts b/packages/polaris-viz-core/src/types.ts index 18ae7b8d38..8d931ad3b3 100644 --- a/packages/polaris-viz-core/src/types.ts +++ b/packages/polaris-viz-core/src/types.ts @@ -27,6 +27,9 @@ interface StyleOverride { width?: number; strokeDasharray?: string; }; + tooltip?: { + shape?: Shape; + }; } export interface DataGroup { diff --git a/packages/polaris-viz/src/components/LineChart/Chart.tsx b/packages/polaris-viz/src/components/LineChart/Chart.tsx index 018fadb65a..09dd015076 100644 --- a/packages/polaris-viz/src/components/LineChart/Chart.tsx +++ b/packages/polaris-viz/src/components/LineChart/Chart.tsx @@ -342,6 +342,10 @@ export function Chart({ })} {data.map((singleSeries, index) => { + if (singleSeries.metadata?.isVisuallyHidden === true) { + return null; + } + return ( {data.map((singleSeries, seriesIndex) => { + if (singleSeries?.metadata?.isVisuallyHidden === true) { + return null; + } + const index = singleSeries.metadata?.relatedIndex ?? seriesIndex; if (hiddenIndexes.includes(index)) { diff --git a/packages/polaris-viz/src/components/LineChartRelational/LineChartRelational.tsx b/packages/polaris-viz/src/components/LineChartRelational/LineChartRelational.tsx index de50267613..d7d0003bfe 100644 --- a/packages/polaris-viz/src/components/LineChartRelational/LineChartRelational.tsx +++ b/packages/polaris-viz/src/components/LineChartRelational/LineChartRelational.tsx @@ -1,12 +1,17 @@ -import {DEFAULT_CHART_PROPS} from '@shopify/polaris-viz-core'; +import { + DEFAULT_CHART_PROPS, + DEFAULT_THEME_NAME, +} from '@shopify/polaris-viz-core'; import {Fragment} from 'react'; import type {LineChartProps} from '../LineChart'; import {LineChart} from '../LineChart'; -import {RelatedAreas, MissingDataArea} from './components'; +import {RelatedAreas, MissingDataArea, CustomLegend} from './components'; -export function LineChartRelational(props: LineChartProps) { +export function LineChartRelational( + props: Omit, +) { const { annotations = [], data, @@ -14,7 +19,6 @@ export function LineChartRelational(props: LineChartProps) { emptyStateText, id, isAnimated, - renderLegendContent, showLegend = true, skipLinkText, state, @@ -35,7 +39,19 @@ export function LineChartRelational(props: LineChartProps) { errorText={errorText} id={id} isAnimated={isAnimated} - renderLegendContent={renderLegendContent} + renderLegendContent={({ + getColorVisionStyles, + getColorVisionEventAttrs, + }) => { + return ( + + ); + }} showLegend={showLegend} skipLinkText={skipLinkText} slots={{ diff --git a/packages/polaris-viz/src/components/LineChartRelational/components/Area/Area.tsx b/packages/polaris-viz/src/components/LineChartRelational/components/Area/Area.tsx index 573c10d261..db47d76bb9 100644 --- a/packages/polaris-viz/src/components/LineChartRelational/components/Area/Area.tsx +++ b/packages/polaris-viz/src/components/LineChartRelational/components/Area/Area.tsx @@ -57,7 +57,7 @@ export function Area({ style={{ ...getColorVisionStylesForActiveIndex({ activeIndex, - index: -1, + index, fadedOpacity: 0.2, }), }} diff --git a/packages/polaris-viz/src/components/LineChartRelational/components/CustomLegend/CustomLegend.scss b/packages/polaris-viz/src/components/LineChartRelational/components/CustomLegend/CustomLegend.scss new file mode 100644 index 0000000000..7900c36491 --- /dev/null +++ b/packages/polaris-viz/src/components/LineChartRelational/components/CustomLegend/CustomLegend.scss @@ -0,0 +1,6 @@ +.Container { + display: flex; + gap: 10px; + flex-wrap: wrap; + list-style: none; +} diff --git a/packages/polaris-viz/src/components/LineChartRelational/components/CustomLegend/CustomLegend.tsx b/packages/polaris-viz/src/components/LineChartRelational/components/CustomLegend/CustomLegend.tsx new file mode 100644 index 0000000000..c55b28c792 --- /dev/null +++ b/packages/polaris-viz/src/components/LineChartRelational/components/CustomLegend/CustomLegend.tsx @@ -0,0 +1,76 @@ +import type {DataSeries} from '@shopify/polaris-viz-core'; + +import type {ColorVisionInteractionMethods} from '../../../../types'; +import {LegendItem} from '../../../../components/Legend'; + +import styles from './CustomLegend.scss'; + +interface Props extends ColorVisionInteractionMethods { + data: DataSeries[]; + theme: string; +} + +export function CustomLegend({ + data, + getColorVisionEventAttrs, + getColorVisionStyles, + theme, +}: Props) { + const lineSeries = data.filter( + (series) => series?.metadata?.relatedIndex == null, + ); + + const percentileItems = data.filter( + (series) => series?.metadata?.relatedIndex != null, + ); + + const percentileIndex = lineSeries.length + 1; + + return ( +
    + {lineSeries.map(({color, name, isComparison, metadata}) => { + if (metadata?.isPredictive) { + return null; + } + + const index = data.findIndex((series) => series.name === name); + + return ( +
  • + +
    • + ); + })} +
  • + +
    • +
+ ); +} diff --git a/packages/polaris-viz/src/components/LineChartRelational/components/CustomLegend/index.ts b/packages/polaris-viz/src/components/LineChartRelational/components/CustomLegend/index.ts new file mode 100644 index 0000000000..da14739feb --- /dev/null +++ b/packages/polaris-viz/src/components/LineChartRelational/components/CustomLegend/index.ts @@ -0,0 +1 @@ +export {CustomLegend} from './CustomLegend'; diff --git a/packages/polaris-viz/src/components/LineChartRelational/components/RelatedAreas/RelatedAreas.tsx b/packages/polaris-viz/src/components/LineChartRelational/components/RelatedAreas/RelatedAreas.tsx index 212b6ceb51..43a06d48c8 100644 --- a/packages/polaris-viz/src/components/LineChartRelational/components/RelatedAreas/RelatedAreas.tsx +++ b/packages/polaris-viz/src/components/LineChartRelational/components/RelatedAreas/RelatedAreas.tsx @@ -21,6 +21,12 @@ export interface RelatedAreaProps extends LineChartSlotProps { export function RelatedAreas({yScale, xScale, data}: RelatedAreaProps) { const [activeIndex, setActiveIndex] = useState(-1); + const lineSeries = data.filter( + (series) => series?.metadata?.relatedIndex == null, + ); + + const percentileIndex = lineSeries.length + 1; + const {hiddenIndexes} = useExternalHideEvents(); const {shouldAnimate, id} = useChartContext(); @@ -84,7 +90,7 @@ export function RelatedAreas({yScale, xScale, data}: RelatedAreaProps) { fill={series.metadata?.areaColor} getAreaGenerator={getAreaGenerator} hiddenIndexes={hiddenIndexes} - index={index} + index={percentileIndex} key={index} series={series} shouldAnimate={shouldAnimate} diff --git a/packages/polaris-viz/src/components/LineChartRelational/components/index.ts b/packages/polaris-viz/src/components/LineChartRelational/components/index.ts index bacbed5784..a13f726407 100644 --- a/packages/polaris-viz/src/components/LineChartRelational/components/index.ts +++ b/packages/polaris-viz/src/components/LineChartRelational/components/index.ts @@ -1,3 +1,4 @@ export {Area} from './Area'; export {MissingDataArea} from './MissingDataArea'; export {RelatedAreas} from './RelatedAreas'; +export {CustomLegend} from './CustomLegend'; diff --git a/packages/polaris-viz/src/components/LineChartRelational/stories/Default.stories.tsx b/packages/polaris-viz/src/components/LineChartRelational/stories/Default.stories.tsx index 07d7640c23..6b143cdcdd 100644 --- a/packages/polaris-viz/src/components/LineChartRelational/stories/Default.stories.tsx +++ b/packages/polaris-viz/src/components/LineChartRelational/stories/Default.stories.tsx @@ -11,4 +11,6 @@ Default.args = { ...DEFAULT_PROPS, data: DEFAULT_DATA, isAnimated: false, + showLegend: true, + theme: 'Uplift', }; diff --git a/packages/polaris-viz/src/components/LineChartRelational/stories/data.tsx b/packages/polaris-viz/src/components/LineChartRelational/stories/data.tsx index 67cfb32397..80f8063ae4 100644 --- a/packages/polaris-viz/src/components/LineChartRelational/stories/data.tsx +++ b/packages/polaris-viz/src/components/LineChartRelational/stories/data.tsx @@ -1,6 +1,7 @@ import type {Story} from '@storybook/react'; import type {RenderTooltipContentData} from 'types'; import type {DataSeries} from '@shopify/polaris-viz-core'; +import {UPLIFT_THEME} from '@shopify/polaris-viz-core'; import type {LineChartProps} from 'components/LineChart/LineChart'; import {LineChartRelational} from '../LineChartRelational'; @@ -80,10 +81,7 @@ export const DEFAULT_DATA: DataSeries[] = [ {value: 849, key: '2020-03-13T12:00:00'}, {value: 129, key: '2020-03-14T12:00:00'}, ], - color: [ - {offset: 0, color: 'rgba(149, 101, 255, 1)'}, - {offset: 100, color: 'rgba(75, 146, 229, 1)'}, - ], + color: UPLIFT_THEME.seriesColors.upToEight[0], }, { name: '75th Percentile', @@ -103,14 +101,16 @@ export const DEFAULT_DATA: DataSeries[] = [ {value: 773, key: '2020-03-13T12:00:00'}, {value: 171, key: '2020-03-14T12:00:00'}, ], - color: 'rgba(103, 197, 228, 1)', + color: 'rgba(218, 182, 242, 1)', metadata: { relatedIndex: 2, - areaColor: 'rgba(103, 197, 228, 0.1)', + areaColor: 'rgba(218, 182, 242, 0.2)', + isVisuallyHidden: true, + legendLabel: '75th - 25th percentile', }, styleOverride: { - line: { - hasArea: false, + tooltip: { + shape: 'Bar', }, }, }, @@ -132,11 +132,7 @@ export const DEFAULT_DATA: DataSeries[] = [ {value: 623, key: '2020-03-13T12:00:00'}, {value: 21, key: '2020-03-14T12:00:00'}, ], - color: 'rgba(40, 106, 123, 1)', - metadata: { - relatedIndex: 3, - areaColor: 'rgba(47, 175, 218, 0.2)', - }, + color: UPLIFT_THEME.seriesColors.upToEight[5], styleOverride: { line: { hasArea: false, @@ -162,10 +158,16 @@ export const DEFAULT_DATA: DataSeries[] = [ {value: 473, key: '2020-03-13T12:00:00'}, {value: 0, key: '2020-03-14T12:00:00'}, ], - color: 'rgba(103, 197, 228, 1)', + color: 'rgba(218, 182, 242, 1)', + metadata: { + relatedIndex: 2, + areaColor: 'rgba(218, 182, 242, 0.2)', + isVisuallyHidden: true, + legendLabel: '75th - 25th percentile', + }, styleOverride: { - line: { - hasArea: false, + tooltip: { + shape: 'Bar', }, }, }, diff --git a/packages/polaris-viz/src/utilities/renderLinearTooltipContent.tsx b/packages/polaris-viz/src/utilities/renderLinearTooltipContent.tsx index ae329329a1..ab34cb37ad 100644 --- a/packages/polaris-viz/src/utilities/renderLinearTooltipContent.tsx +++ b/packages/polaris-viz/src/utilities/renderLinearTooltipContent.tsx @@ -51,7 +51,7 @@ export function renderLinearTooltipContent( }; function renderSeriesIcon(color, styleOverride): ReactNode { - if (styleOverride == null) { + if (styleOverride?.line == null) { return null; } @@ -110,7 +110,7 @@ export function renderLinearTooltipContent( renderSeriesIcon={() => renderSeriesIcon(color, styleOverride) } - shape="Line" + shape={styleOverride?.tooltip?.shape ?? 'Line'} value={formatters.valueFormatter(item.value ?? 0)} /> );