From 1fcf9bd2b5c6d67ce8d274a404e0546d332de37a Mon Sep 17 00:00:00 2001 From: Matt Vickers Date: Fri, 5 Jan 2024 15:25:28 -0600 Subject: [PATCH] Render custom Legend --- .../components/LegendItem/LegendItem.tsx | 19 +++- .../src/components/Legend/index.ts | 1 + .../LineChartPredictive.tsx | 26 ++++- .../components/CustomLegend/CustomLegend.scss | 14 +++ .../components/CustomLegend/CustomLegend.tsx | 105 ++++++++++++++++++ .../components/CustomLegend/index.ts | 1 + .../PredictiveLineSeries.tsx | 2 +- .../LineChartPredictive/components/index.ts | 1 + .../components/LineChartPredictive/types.ts | 3 +- 9 files changed, 161 insertions(+), 11 deletions(-) create mode 100644 packages/polaris-viz/src/components/LineChartPredictive/components/CustomLegend/CustomLegend.scss create mode 100644 packages/polaris-viz/src/components/LineChartPredictive/components/CustomLegend/CustomLegend.tsx create mode 100644 packages/polaris-viz/src/components/LineChartPredictive/components/CustomLegend/index.ts 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 10fe1cd7c..5ff8bd0ac 100644 --- a/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.tsx +++ b/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.tsx @@ -2,6 +2,7 @@ import { getColorVisionEventAttrs, getColorVisionStylesForActiveIndex, } from '@shopify/polaris-viz-core'; +import type {ReactNode} from 'react'; import { LEGEND_ITEM_LEFT_PADDING, @@ -19,6 +20,7 @@ export interface LegendItemProps extends LegendData { index: number; activeIndex?: number; colorVisionType?: string; + renderSeriesIcon?: () => ReactNode; theme?: string; } @@ -29,6 +31,7 @@ export function LegendItem({ index, isComparison, name, + renderSeriesIcon, shape, theme, value, @@ -58,12 +61,16 @@ export function LegendItem({ }} className={style.Legend} > - - - + {renderSeriesIcon == null ? ( + + + + ) : ( + renderSeriesIcon() + )} {name} {value == null ? null : ( diff --git a/packages/polaris-viz/src/components/Legend/index.ts b/packages/polaris-viz/src/components/Legend/index.ts index 5b082804e..3f893d8b4 100644 --- a/packages/polaris-viz/src/components/Legend/index.ts +++ b/packages/polaris-viz/src/components/Legend/index.ts @@ -1,3 +1,4 @@ export {Legend} from './Legend'; +export {LegendItem} from './components'; export type {LegendProps} from './Legend'; export {estimateLegendItemWidth} from './utilities/estimateLegendItemWidth'; diff --git a/packages/polaris-viz/src/components/LineChartPredictive/LineChartPredictive.tsx b/packages/polaris-viz/src/components/LineChartPredictive/LineChartPredictive.tsx index 7bb8adadf..57fc7a04c 100644 --- a/packages/polaris-viz/src/components/LineChartPredictive/LineChartPredictive.tsx +++ b/packages/polaris-viz/src/components/LineChartPredictive/LineChartPredictive.tsx @@ -1,5 +1,6 @@ import { DEFAULT_CHART_PROPS, + DEFAULT_THEME_NAME, useTheme, useThemeSeriesColors, } from '@shopify/polaris-viz-core'; @@ -7,7 +8,7 @@ import { import {LineChart} from '../LineChart'; import type {LineChartPredictiveProps} from './types'; -import {PredictiveLineSeries} from './components'; +import {CustomLegend, PredictiveLineSeries} from './components'; export function LineChartPredictive(props: LineChartPredictiveProps) { const { @@ -17,7 +18,6 @@ export function LineChartPredictive(props: LineChartPredictiveProps) { emptyStateText, id, isAnimated, - renderLegendContent, showLegend = true, skipLinkText, state, @@ -41,6 +41,12 @@ export function LineChartPredictive(props: LineChartPredictiveProps) { } } + const predictiveSeriesNames = predictiveData + .map(({metadata}) => { + return data[metadata?.relatedIndex ?? -1].name; + }) + .filter((value) => value != null) as string[]; + const selectedTheme = useTheme(theme); const seriesColors = useThemeSeriesColors(nonPredictiveData, selectedTheme); @@ -52,7 +58,6 @@ export function LineChartPredictive(props: LineChartPredictiveProps) { errorText={errorText} id={id} isAnimated={isAnimated} - renderLegendContent={renderLegendContent} showLegend={showLegend} skipLinkText={skipLinkText} slots={{ @@ -75,6 +80,21 @@ export function LineChartPredictive(props: LineChartPredictiveProps) { tooltipOptions={tooltipOptions} xAxisOptions={xAxisOptions} yAxisOptions={yAxisOptions} + renderLegendContent={({ + getColorVisionStyles, + getColorVisionEventAttrs, + }) => { + return ( + + ); + }} /> ); } diff --git a/packages/polaris-viz/src/components/LineChartPredictive/components/CustomLegend/CustomLegend.scss b/packages/polaris-viz/src/components/LineChartPredictive/components/CustomLegend/CustomLegend.scss new file mode 100644 index 000000000..d1e05d3d4 --- /dev/null +++ b/packages/polaris-viz/src/components/LineChartPredictive/components/CustomLegend/CustomLegend.scss @@ -0,0 +1,14 @@ +.Container { + display: flex; + gap: 10px; + flex-wrap: wrap; + list-style: none; +} + +.IconContainer { + display: flex; + align-items: center; + justify-items: center; + height: 12px; + width: 20px; +} diff --git a/packages/polaris-viz/src/components/LineChartPredictive/components/CustomLegend/CustomLegend.tsx b/packages/polaris-viz/src/components/LineChartPredictive/components/CustomLegend/CustomLegend.tsx new file mode 100644 index 000000000..f577a7b09 --- /dev/null +++ b/packages/polaris-viz/src/components/LineChartPredictive/components/CustomLegend/CustomLegend.tsx @@ -0,0 +1,105 @@ +import { + LinearGradientWithStops, + changeGradientOpacity, + isGradientType, + uniqueId, +} from '@shopify/polaris-viz-core'; +import type {Color} from '@shopify/polaris-viz-core'; +import {useMemo} from 'react'; + +import type {LineChartPredictiveDataSeries} from '../../../../components/LineChartPredictive/types'; +import type {ColorVisionInteractionMethods} from '../../../../types'; +import {getLineChartDataWithDefaults} from '../../../../utilities/getLineChartDataWithDefaults'; +import {LegendItem} from '../../../../components/Legend'; + +import styles from './CustomLegend.scss'; + +interface Props extends ColorVisionInteractionMethods { + data: LineChartPredictiveDataSeries[]; + predictiveSeriesNames: string[]; + getColorVisionEventAttrs: any; + getColorVisionStyles: any; + seriesColors: Color[]; + theme: string; +} + +export function CustomLegend({ + data, + predictiveSeriesNames, + getColorVisionEventAttrs, + getColorVisionStyles, + seriesColors, + theme, +}: Props) { + const id = useMemo(() => uniqueId('CustomLegen'), []); + + const dataWithDefaults = getLineChartDataWithDefaults(data, seriesColors); + + return ( +
    + {dataWithDefaults.map(({color, name, isComparison}, index) => { + const gradientId = `${id}-${index}`; + + function renderSeriesIcon() { + return ; + } + + return ( +
  • + +
    • + ); + })} +
+ ); +} + +function SeriesIcon({color, gradientId}: {color: Color; gradientId: string}) { + return ( +
+ + + {isGradientType(color) ? ( + + + + ) : null} + +
+ ); +} diff --git a/packages/polaris-viz/src/components/LineChartPredictive/components/CustomLegend/index.ts b/packages/polaris-viz/src/components/LineChartPredictive/components/CustomLegend/index.ts new file mode 100644 index 000000000..da14739fe --- /dev/null +++ b/packages/polaris-viz/src/components/LineChartPredictive/components/CustomLegend/index.ts @@ -0,0 +1 @@ +export {CustomLegend} from './CustomLegend'; diff --git a/packages/polaris-viz/src/components/LineChartPredictive/components/PredictiveLineSeries/PredictiveLineSeries.tsx b/packages/polaris-viz/src/components/LineChartPredictive/components/PredictiveLineSeries/PredictiveLineSeries.tsx index 99bdcc8d5..b4eec68f8 100644 --- a/packages/polaris-viz/src/components/LineChartPredictive/components/PredictiveLineSeries/PredictiveLineSeries.tsx +++ b/packages/polaris-viz/src/components/LineChartPredictive/components/PredictiveLineSeries/PredictiveLineSeries.tsx @@ -85,7 +85,7 @@ export function PredictiveLineSeries({ color={pointColor} cx={xScale(predictiveStartIndex)} cy={yScale(series.data[predictiveStartIndex]?.value ?? -1)} - active + active={activeLineIndex === -1 || activeLineIndex === index} index={index} isAnimated={false} ariaHidden diff --git a/packages/polaris-viz/src/components/LineChartPredictive/components/index.ts b/packages/polaris-viz/src/components/LineChartPredictive/components/index.ts index 13fae2153..62b896d03 100644 --- a/packages/polaris-viz/src/components/LineChartPredictive/components/index.ts +++ b/packages/polaris-viz/src/components/LineChartPredictive/components/index.ts @@ -1 +1,2 @@ export {PredictiveLineSeries} from './PredictiveLineSeries'; +export {CustomLegend} from './CustomLegend'; diff --git a/packages/polaris-viz/src/components/LineChartPredictive/types.ts b/packages/polaris-viz/src/components/LineChartPredictive/types.ts index ce2fc6fbe..80f9e1aab 100644 --- a/packages/polaris-viz/src/components/LineChartPredictive/types.ts +++ b/packages/polaris-viz/src/components/LineChartPredictive/types.ts @@ -12,6 +12,7 @@ export interface LineChartPredictiveDataSeries extends DataSeries { metadata?: MetaData; } -export interface LineChartPredictiveProps extends Omit { +export interface LineChartPredictiveProps + extends Omit { data: LineChartPredictiveDataSeries[]; }