From be8999c3ad92e2decbaab1873fa9eebbd572eb1a Mon Sep 17 00:00:00 2001 From: Matt Vickers Date: Tue, 19 Nov 2024 06:51:30 -0600 Subject: [PATCH] Rename dimensions to containerBounds --- .../ChartContainer/ChartContainer.tsx | 6 +-- .../components/ChartDimensions/index.ts | 1 - .../ContainerBounds.scss} | 2 +- .../ContainerBounds.tsx} | 45 ++++++++-------- .../components/ContainerBounds/index.ts | 1 + .../ChartContainer/components/index.ts | 2 +- .../ChartErrorBoundary/ChartErrorBoundary.tsx | 6 +-- .../tests/ChartErrorBoundary.test.tsx | 2 +- .../ChartSkeleton/ChartSkeleton.tsx | 51 +++++++------------ .../DonutSkeleton/DonutSkeleton.tsx | 4 +- .../FunnelSkeleton/FunnelSkeleton.tsx | 6 +-- .../components/GridSkeleton/GridSkeleton.tsx | 6 +-- .../SimpleBarSkeleton/SimpleBarSkeleton.tsx | 10 ++-- .../SimpleNormalizedSkeleton.tsx | 6 +-- .../SparkSkeleton/SparkSkeleton.tsx | 6 +-- .../tests/ChartSkeleton.test.tsx | 7 ++- .../src/components/ComboChart/Chart.tsx | 13 +++-- .../ComboChart/tests/Chart.test.tsx | 2 +- .../stories/components/SampleComponents.tsx | 3 +- .../src/components/DonutChart/Chart.tsx | 25 +++++---- .../components/InnerValue/InnerValue.tsx | 6 +-- .../components/LegendValues/LegendValues.tsx | 10 ++-- .../DonutChart/tests/DonutChart.test.tsx | 2 +- .../src/components/FunnelChart/Chart.tsx | 8 +-- .../components/HorizontalBarChart/Chart.tsx | 13 +++-- .../HorizontalBarChart/HorizontalBarChart.tsx | 6 +-- .../HorizontalBarChart/tests/Chart.test.tsx | 3 +- .../tests/HorizontalBarChart.test.tsx | 2 +- .../LegendContainer/LegendContainer.tsx | 16 +++--- .../components/HiddenLegendTooltip.tsx | 12 +++-- .../hooks/tests/useLegend.test.tsx | 2 +- .../LegendContainer/hooks/useLegend.ts | 14 ++--- .../tests/LegendsContainer.test.tsx | 32 +++++++++--- .../src/components/LineChart/Chart.tsx | 33 +++++++----- .../components/LineChart/tests/Chart.test.tsx | 13 ++++- .../src/components/SimpleBarChart/Chart.tsx | 14 +++-- .../SimpleBarChart/tests/Chart.test.tsx | 5 +- .../src/components/SparkBarChart/Chart.tsx | 8 +-- .../SparkBarChart/SparkBarChart.tsx | 7 +-- .../src/components/SparkLineChart/Chart.tsx | 8 +-- .../src/components/StackedAreaChart/Chart.tsx | 29 ++++++----- .../StackedAreaChart/tests/Chart.test.tsx | 7 ++- .../TooltipWrapper/TooltipWrapper.tsx | 6 +-- .../components/TooltipAnimatedContainer.tsx | 8 +-- .../components/TooltipWrapper/utilities.ts | 4 +- .../src/components/VerticalBarChart/Chart.tsx | 28 ++++++---- .../VerticalBarChart/VerticalBarChart.tsx | 6 +-- .../VerticalBarChart/tests/Chart.test.tsx | 7 ++- .../ColorVisionA11y/useColorVisionEvents.ts | 10 ++-- .../polaris-viz/src/hooks/usePrintResizing.ts | 8 +-- 50 files changed, 297 insertions(+), 234 deletions(-) delete mode 100644 packages/polaris-viz/src/components/ChartContainer/components/ChartDimensions/index.ts rename packages/polaris-viz/src/components/ChartContainer/components/{ChartDimensions/ChartDimensions.scss => ContainerBounds/ContainerBounds.scss} (90%) rename packages/polaris-viz/src/components/ChartContainer/components/{ChartDimensions/ChartDimensions.tsx => ContainerBounds/ContainerBounds.tsx} (80%) create mode 100644 packages/polaris-viz/src/components/ChartContainer/components/ContainerBounds/index.ts diff --git a/packages/polaris-viz/src/components/ChartContainer/ChartContainer.tsx b/packages/polaris-viz/src/components/ChartContainer/ChartContainer.tsx index d4304d8f4..23ffa051e 100644 --- a/packages/polaris-viz/src/components/ChartContainer/ChartContainer.tsx +++ b/packages/polaris-viz/src/components/ChartContainer/ChartContainer.tsx @@ -19,7 +19,7 @@ import {useTheme, usePrefersReducedMotion} from '../../hooks'; import type {SkeletonType} from '../ChartSkeleton'; import styles from './ChartContainer.scss'; -import {ChartDimensions} from './components/'; +import {ContainerBounds} from './components/'; interface Props { children: ReactElement; @@ -87,7 +87,7 @@ export const ChartContainer = (props: Props) => { }} id={getChartId(value.id)} > - { scrollContainer={props.scrollContainer} > {props.children} - + ); diff --git a/packages/polaris-viz/src/components/ChartContainer/components/ChartDimensions/index.ts b/packages/polaris-viz/src/components/ChartContainer/components/ChartDimensions/index.ts deleted file mode 100644 index 0eb6b777b..000000000 --- a/packages/polaris-viz/src/components/ChartContainer/components/ChartDimensions/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {ChartDimensions} from './ChartDimensions'; diff --git a/packages/polaris-viz/src/components/ChartContainer/components/ChartDimensions/ChartDimensions.scss b/packages/polaris-viz/src/components/ChartContainer/components/ContainerBounds/ContainerBounds.scss similarity index 90% rename from packages/polaris-viz/src/components/ChartContainer/components/ChartDimensions/ChartDimensions.scss rename to packages/polaris-viz/src/components/ChartContainer/components/ContainerBounds/ContainerBounds.scss index 3a60b9cff..f8e57cab9 100644 --- a/packages/polaris-viz/src/components/ChartContainer/components/ChartDimensions/ChartDimensions.scss +++ b/packages/polaris-viz/src/components/ChartContainer/components/ContainerBounds/ContainerBounds.scss @@ -1,4 +1,4 @@ -.ChartDimensions { +.ContainerBounds { height: 100%; width: 100%; } diff --git a/packages/polaris-viz/src/components/ChartContainer/components/ChartDimensions/ChartDimensions.tsx b/packages/polaris-viz/src/components/ChartContainer/components/ContainerBounds/ContainerBounds.tsx similarity index 80% rename from packages/polaris-viz/src/components/ChartContainer/components/ChartDimensions/ChartDimensions.tsx rename to packages/polaris-viz/src/components/ChartContainer/components/ContainerBounds/ContainerBounds.tsx index 07adda5de..b4678eac2 100644 --- a/packages/polaris-viz/src/components/ChartContainer/components/ChartDimensions/ChartDimensions.tsx +++ b/packages/polaris-viz/src/components/ChartContainer/components/ContainerBounds/ContainerBounds.tsx @@ -3,7 +3,6 @@ import {cloneElement, useCallback, useLayoutEffect, useState} from 'react'; import type { DataGroup, DataSeries, - Dimensions, ErrorBoundaryResponse, BoundingRect, } from '@shopify/polaris-viz-core'; @@ -18,9 +17,9 @@ import type {SkeletonType} from 'components/ChartSkeleton'; import {ChartErrorBoundary} from '../../../ChartErrorBoundary'; import {usePrintResizing, useResizeObserver} from '../../../../hooks'; -import styles from './ChartDimensions.scss'; +import styles from './ContainerBounds.scss'; -interface ChartDimensionsProps { +interface ContainerBoundsProps { children: ReactElement; data: DataSeries[] | DataGroup[]; onIsPrintingChange: Dispatch>; @@ -30,7 +29,7 @@ interface ChartDimensionsProps { onError?: ErrorBoundaryResponse; } -export function ChartDimensions({ +export function ContainerBounds({ children, data, onIsPrintingChange, @@ -38,11 +37,11 @@ export function ChartDimensions({ sparkChart = false, skeletonType = 'Default', onError, -}: ChartDimensionsProps) { +}: ContainerBoundsProps) { const {chartContainer} = useTheme(); const {onError: onErrorProvider} = usePolarisVizContext(); - const [chartDimensions, setChartDimensions] = + const [containerBounds, setContainerBounds] = useState(null); const {ref, setRef, entry} = useResizeObserver(); @@ -51,7 +50,7 @@ export function ChartDimensions({ usePrintResizing({ ref, - setChartDimensions, + setContainerBounds, onIsPrintingChange, }); @@ -70,7 +69,7 @@ export function ChartDimensions({ const scrollY = scrollContainer == null ? window.scrollY : scrollContainer.scrollTop; - setChartDimensions({width, height, x, y: y + scrollY}); + setContainerBounds({width, height, x, y: y + scrollY}); }, [entry, previousEntry?.contentRect, scrollContainer]); const debouncedUpdateDimensions = useDebouncedCallback(() => { @@ -80,8 +79,8 @@ export function ChartDimensions({ useLayoutEffect(() => { updateDimensions(); - if (chartDimensions === null) { - setChartDimensions({ + if (containerBounds === null) { + setContainerBounds({ width: 0, height: sparkChart ? chartContainer.sparkChartMinHeight @@ -106,7 +105,7 @@ export function ChartDimensions({ entry, updateDimensions, debouncedUpdateDimensions, - chartDimensions, + containerBounds, chartContainer.minHeight, sparkChart, chartContainer.sparkChartMinHeight, @@ -122,7 +121,7 @@ export function ChartDimensions({ const bounds = ref.getBoundingClientRect(); - setChartDimensions((prev) => { + setContainerBounds((prev) => { if (bounds.y === prev?.y && bounds.x === prev?.x) { return prev; } @@ -138,7 +137,7 @@ export function ChartDimensions({ return (
- {!hasValidDimensions(chartDimensions) ? null : ( + {containerBounds == null || !hasValidBounds(containerBounds) ? null : (
{cloneElement<{ - dimensions: Dimensions; + containerBounds: BoundingRect; }>(children, { - dimensions: chartDimensions!, + containerBounds, })}
@@ -174,10 +173,6 @@ export function ChartDimensions({ ); } -function hasValidDimensions(chartDimensions: Dimensions | null) { - if (chartDimensions == null) { - return false; - } - - return chartDimensions.width > 0 && chartDimensions.height > 0; +function hasValidBounds(containerBounds: BoundingRect) { + return containerBounds.width > 0 && containerBounds.height > 0; } diff --git a/packages/polaris-viz/src/components/ChartContainer/components/ContainerBounds/index.ts b/packages/polaris-viz/src/components/ChartContainer/components/ContainerBounds/index.ts new file mode 100644 index 000000000..9acf08087 --- /dev/null +++ b/packages/polaris-viz/src/components/ChartContainer/components/ContainerBounds/index.ts @@ -0,0 +1 @@ +export {ContainerBounds} from './ContainerBounds'; diff --git a/packages/polaris-viz/src/components/ChartContainer/components/index.ts b/packages/polaris-viz/src/components/ChartContainer/components/index.ts index 9632f62c3..5ab6a5096 100644 --- a/packages/polaris-viz/src/components/ChartContainer/components/index.ts +++ b/packages/polaris-viz/src/components/ChartContainer/components/index.ts @@ -1 +1 @@ -export {ChartDimensions} from './ChartDimensions/'; +export {ContainerBounds} from './ContainerBounds/'; diff --git a/packages/polaris-viz/src/components/ChartErrorBoundary/ChartErrorBoundary.tsx b/packages/polaris-viz/src/components/ChartErrorBoundary/ChartErrorBoundary.tsx index d46edba07..be9c7512b 100644 --- a/packages/polaris-viz/src/components/ChartErrorBoundary/ChartErrorBoundary.tsx +++ b/packages/polaris-viz/src/components/ChartErrorBoundary/ChartErrorBoundary.tsx @@ -1,7 +1,7 @@ import type { + BoundingRect, DataGroup, DataSeries, - Dimensions, ErrorBoundaryResponse, } from '@shopify/polaris-viz-core'; import {ChartState} from '@shopify/polaris-viz-core'; @@ -15,9 +15,9 @@ import {checkForMismatchedData} from './utilities/checkForMismatchedData'; interface ErrorBoundaryProps { data: DataSeries[] | DataGroup[]; - dimensions: Dimensions; type: SkeletonType; children?: ReactNode; + containerBounds?: BoundingRect; onError?: ErrorBoundaryResponse; } @@ -60,7 +60,7 @@ export class ChartErrorBoundary extends Component< ); } diff --git a/packages/polaris-viz/src/components/ChartErrorBoundary/tests/ChartErrorBoundary.test.tsx b/packages/polaris-viz/src/components/ChartErrorBoundary/tests/ChartErrorBoundary.test.tsx index 6e24c8e07..a3a34c808 100644 --- a/packages/polaris-viz/src/components/ChartErrorBoundary/tests/ChartErrorBoundary.test.tsx +++ b/packages/polaris-viz/src/components/ChartErrorBoundary/tests/ChartErrorBoundary.test.tsx @@ -8,7 +8,7 @@ import {BarChart} from '../../BarChart'; const MOCK_PROPS = { data: [], - dimensions: { + containerDimensions: { width: 900, height: 400, }, diff --git a/packages/polaris-viz/src/components/ChartSkeleton/ChartSkeleton.tsx b/packages/polaris-viz/src/components/ChartSkeleton/ChartSkeleton.tsx index 10770e29b..a1248449f 100644 --- a/packages/polaris-viz/src/components/ChartSkeleton/ChartSkeleton.tsx +++ b/packages/polaris-viz/src/components/ChartSkeleton/ChartSkeleton.tsx @@ -1,4 +1,4 @@ -import type {Dimensions} from '@shopify/polaris-viz-core'; +import type {BoundingRect} from '@shopify/polaris-viz-core'; import {ChartState, useTheme} from '@shopify/polaris-viz-core'; import type {Size} from '../SimpleNormalizedChart'; @@ -23,7 +23,9 @@ export type SkeletonType = | 'SimpleNormalized'; interface ChartSkeletonProps { - dimensions?: Dimensions; + // containerBounds is optional because it's passed down + // from ContainerBounds with cloneElement. + containerBounds?: BoundingRect; errorText?: string; state?: ChartState; theme?: string; @@ -55,7 +57,7 @@ export interface SimpleNormalizedSkeletonProps extends ChartSkeletonProps { size?: Size; } -type Props = +export type Props = | DefaultSkeletonProps | DonutSkeletonProps | FunnelSkeletonProps @@ -65,7 +67,7 @@ type Props = export function ChartSkeleton(props: Props) { const { - dimensions, + containerBounds, errorText = 'Could not load the chart', state = ChartState.Loading, theme, @@ -76,17 +78,17 @@ export function ChartSkeleton(props: Props) { chartContainer: {backgroundColor}, } = useTheme(theme); - const {width, height} = dimensions || {width: 0, height: 0}; + const containerDimensions = { + height: containerBounds?.height ?? 0, + width: containerBounds?.width ?? 0, + }; const SkeletonMarkup = () => { switch (type) { case 'Donut': return ( @@ -94,10 +96,7 @@ export function ChartSkeleton(props: Props) { case 'Funnel': return ( @@ -105,10 +104,7 @@ export function ChartSkeleton(props: Props) { case 'SimpleBar': return ( @@ -117,10 +113,7 @@ export function ChartSkeleton(props: Props) { const {showLegend = true, size = 'small'} = props; return ( @@ -143,10 +133,7 @@ export function ChartSkeleton(props: Props) { default: return ( @@ -154,7 +141,7 @@ export function ChartSkeleton(props: Props) { } }; - if (width === 0) return null; + if (containerDimensions.width === 0) return null; return (
@@ -162,8 +149,8 @@ export function ChartSkeleton(props: Props) { {state === ChartState.Loading && ( )}
diff --git a/packages/polaris-viz/src/components/ChartSkeleton/components/DonutSkeleton/DonutSkeleton.tsx b/packages/polaris-viz/src/components/ChartSkeleton/components/DonutSkeleton/DonutSkeleton.tsx index f1d14d497..10afce077 100644 --- a/packages/polaris-viz/src/components/ChartSkeleton/components/DonutSkeleton/DonutSkeleton.tsx +++ b/packages/polaris-viz/src/components/ChartSkeleton/components/DonutSkeleton/DonutSkeleton.tsx @@ -16,13 +16,13 @@ const RADIUS_PADDING = 20; const SECONDARY_DELAY = 200; interface Props { - dimensions: Dimensions; + containerDimensions: Dimensions; state: ChartState; errorText: string; } export function DonutSkeleton({ - dimensions: {height, width}, + containerDimensions: {height, width}, state, errorText, }: Props) { diff --git a/packages/polaris-viz/src/components/ChartSkeleton/components/FunnelSkeleton/FunnelSkeleton.tsx b/packages/polaris-viz/src/components/ChartSkeleton/components/FunnelSkeleton/FunnelSkeleton.tsx index f3f6520bc..9dd521030 100644 --- a/packages/polaris-viz/src/components/ChartSkeleton/components/FunnelSkeleton/FunnelSkeleton.tsx +++ b/packages/polaris-viz/src/components/ChartSkeleton/components/FunnelSkeleton/FunnelSkeleton.tsx @@ -11,13 +11,13 @@ import {Bar} from '../../../shared'; import {ErrorText} from '../ErrorText'; interface Props { - dimensions: Dimensions; + containerDimensions: Dimensions; state: ChartState; errorText: string; } -export function FunnelSkeleton({dimensions, state, errorText}: Props) { - const {width, height} = dimensions; +export function FunnelSkeleton({containerDimensions, state, errorText}: Props) { + const {width, height} = containerDimensions; const { grid: {color: gridColor}, diff --git a/packages/polaris-viz/src/components/ChartSkeleton/components/GridSkeleton/GridSkeleton.tsx b/packages/polaris-viz/src/components/ChartSkeleton/components/GridSkeleton/GridSkeleton.tsx index 49580c41c..d08db5b7d 100644 --- a/packages/polaris-viz/src/components/ChartSkeleton/components/GridSkeleton/GridSkeleton.tsx +++ b/packages/polaris-viz/src/components/ChartSkeleton/components/GridSkeleton/GridSkeleton.tsx @@ -16,13 +16,13 @@ const INITIAL_DELAY = 200; const NUMBER_OF_BRICKS = 5; interface Props { - dimensions: Dimensions; + containerDimensions: Dimensions; state: ChartState; errorText: string; } -export function GridSkeleton({dimensions, state, errorText}: Props) { - const {width, height} = dimensions; +export function GridSkeleton({containerDimensions, state, errorText}: Props) { + const {width, height} = containerDimensions; const { chartContainer: {padding}, diff --git a/packages/polaris-viz/src/components/ChartSkeleton/components/SimpleBarSkeleton/SimpleBarSkeleton.tsx b/packages/polaris-viz/src/components/ChartSkeleton/components/SimpleBarSkeleton/SimpleBarSkeleton.tsx index 7fd0f8439..092ab2e7b 100644 --- a/packages/polaris-viz/src/components/ChartSkeleton/components/SimpleBarSkeleton/SimpleBarSkeleton.tsx +++ b/packages/polaris-viz/src/components/ChartSkeleton/components/SimpleBarSkeleton/SimpleBarSkeleton.tsx @@ -7,13 +7,17 @@ import {ErrorText} from '../ErrorText'; import styles from './SimpleBarSkeleton.scss'; interface Props { - dimensions: Dimensions; + containerDimensions: Dimensions; state: ChartState; errorText: string; } -export function SimpleBarSkeleton({dimensions, state, errorText}: Props) { - const {width, height} = dimensions; +export function SimpleBarSkeleton({ + containerDimensions, + state, + errorText, +}: Props) { + const {width, height} = containerDimensions; const { grid: {color: gridColor}, diff --git a/packages/polaris-viz/src/components/ChartSkeleton/components/SimpleNormalizedSkeleton/SimpleNormalizedSkeleton.tsx b/packages/polaris-viz/src/components/ChartSkeleton/components/SimpleNormalizedSkeleton/SimpleNormalizedSkeleton.tsx index 8ad6f4df4..4549d6dfa 100644 --- a/packages/polaris-viz/src/components/ChartSkeleton/components/SimpleNormalizedSkeleton/SimpleNormalizedSkeleton.tsx +++ b/packages/polaris-viz/src/components/ChartSkeleton/components/SimpleNormalizedSkeleton/SimpleNormalizedSkeleton.tsx @@ -14,7 +14,7 @@ const SIZE_TO_PX = { }; interface Props { - dimensions: Dimensions; + containerDimensions: Dimensions; errorText: string; showLegend: boolean; size: Size; @@ -22,13 +22,13 @@ interface Props { } export function SimpleNormalizedSkeleton({ - dimensions, + containerDimensions, errorText, showLegend, size, state, }: Props) { - const {width, height} = dimensions; + const {width, height} = containerDimensions; const { grid: {color: gridColor}, diff --git a/packages/polaris-viz/src/components/ChartSkeleton/components/SparkSkeleton/SparkSkeleton.tsx b/packages/polaris-viz/src/components/ChartSkeleton/components/SparkSkeleton/SparkSkeleton.tsx index 6d0389659..ff6a4759f 100644 --- a/packages/polaris-viz/src/components/ChartSkeleton/components/SparkSkeleton/SparkSkeleton.tsx +++ b/packages/polaris-viz/src/components/ChartSkeleton/components/SparkSkeleton/SparkSkeleton.tsx @@ -8,13 +8,13 @@ import { import {ErrorText} from '../ErrorText'; interface Props { - dimensions: Dimensions; + containerDimensions: Dimensions; state: ChartState; errorText: string; } -export function SparkSkeleton({dimensions, state, errorText}: Props) { - const {width, height} = dimensions; +export function SparkSkeleton({containerDimensions, state, errorText}: Props) { + const {width, height} = containerDimensions; const { grid: {color: gridColor}, diff --git a/packages/polaris-viz/src/components/ChartSkeleton/tests/ChartSkeleton.test.tsx b/packages/polaris-viz/src/components/ChartSkeleton/tests/ChartSkeleton.test.tsx index 809102059..9c0dea278 100644 --- a/packages/polaris-viz/src/components/ChartSkeleton/tests/ChartSkeleton.test.tsx +++ b/packages/polaris-viz/src/components/ChartSkeleton/tests/ChartSkeleton.test.tsx @@ -1,5 +1,6 @@ import {ChartState} from '@shopify/polaris-viz-core'; +import type {Props} from '../ChartSkeleton'; import {ChartSkeleton} from '../ChartSkeleton'; import { mountWithProvider, @@ -7,10 +8,12 @@ import { } from '../../../test-utilities/mountWithProvider'; import {Shimmer} from '../components'; -const MOCK_PROPS = { - dimensions: { +const MOCK_PROPS: Props = { + containerBounds: { width: 900, height: 400, + x: 0, + y: 0, }, }; diff --git a/packages/polaris-viz/src/components/ComboChart/Chart.tsx b/packages/polaris-viz/src/components/ComboChart/Chart.tsx index 47694ff28..7627c8462 100644 --- a/packages/polaris-viz/src/components/ComboChart/Chart.tsx +++ b/packages/polaris-viz/src/components/ComboChart/Chart.tsx @@ -9,7 +9,6 @@ import { LINE_HEIGHT, } from '@shopify/polaris-viz-core'; import type { - Dimensions, DataGroup, BoundingRect, XAxisOptions, @@ -61,14 +60,14 @@ export interface ChartProps { showLegend: boolean; theme: string; xAxisOptions: Required; - dimensions?: Dimensions; + containerBounds?: BoundingRect; renderLegendContent?: RenderLegendContent; } export function Chart({ annotationsLookupTable, data, - dimensions, + containerBounds, renderTooltipContent, showLegend, theme, @@ -87,10 +86,15 @@ export function Chart({ const [activeIndex, setActiveIndex] = useState(null); const [annotationsHeight, setAnnotationsHeight] = useState(0); + const containerDimensions = { + height: containerBounds?.height ?? 0, + width: containerBounds?.width ?? 0, + }; + const {legend, setLegendDimensions, height, width} = useLegend({ colors, data, - dimensions, + containerDimensions, showLegend, seriesNameFormatter, }); @@ -335,6 +339,7 @@ export function Chart({ {showLegend && ( null, showLegend: false, theme: 'Light', diff --git a/packages/polaris-viz/src/components/Docs/stories/components/SampleComponents.tsx b/packages/polaris-viz/src/components/Docs/stories/components/SampleComponents.tsx index 110088ea6..45074aaa7 100644 --- a/packages/polaris-viz/src/components/Docs/stories/components/SampleComponents.tsx +++ b/packages/polaris-viz/src/components/Docs/stories/components/SampleComponents.tsx @@ -242,7 +242,7 @@ export const SampleLegendContainer = ({theme} = {theme: 'Light'}) => { }, ], showLegend: true, - dimensions: {height: 0, width: 0}, + containerDimensions: {height: 0, width: 0}, colors, seriesNameFormatter: (value) => `${value}`, }); @@ -254,6 +254,7 @@ export const SampleLegendContainer = ({theme} = {theme: 'Light'}) => { colorVisionType="" data={legend} onDimensionChange={() => {}} + containerDimensions={{height: 0, width: 0}} />
diff --git a/packages/polaris-viz/src/components/DonutChart/Chart.tsx b/packages/polaris-viz/src/components/DonutChart/Chart.tsx index da01f72de..e626d6784 100644 --- a/packages/polaris-viz/src/components/DonutChart/Chart.tsx +++ b/packages/polaris-viz/src/components/DonutChart/Chart.tsx @@ -13,9 +13,9 @@ import { import type { DataPoint, DataSeries, - Dimensions, LabelFormatter, Direction, + BoundingRect, } from '@shopify/polaris-viz-core'; import {getAnimationDelayForItems} from '../../utilities/getAnimationDelayForItems'; @@ -55,7 +55,7 @@ export interface ChartProps { theme: string; accessibilityLabel?: string; comparisonMetric?: ComparisonMetricProps; - dimensions?: Dimensions; + containerBounds?: BoundingRect; errorText?: string; legendFullWidth?: boolean; renderInnerValueContent?: RenderInnerValueContent; @@ -74,7 +74,7 @@ export function Chart({ theme, accessibilityLabel = '', comparisonMetric, - dimensions = {height: 0, width: 0}, + containerBounds, errorText, legendFullWidth = false, renderInnerValueContent, @@ -100,13 +100,18 @@ export function Chart({ ? 'vertical' : 'horizontal'; + const containerDimensions = { + height: containerBounds?.height ?? 0, + width: containerBounds?.width ?? 0, + }; + const maxLegendWidth = - legendDirection === 'vertical' ? dimensions.width / 2 : 0; + legendDirection === 'vertical' ? containerDimensions.width / 2 : 0; const {height, width, legend, setLegendDimensions, isLegendMounted} = useLegend({ data: [{series: data, shape: 'Bar'}], - dimensions, + containerDimensions, showLegend, direction: legendDirection, colors: seriesColor, @@ -120,7 +125,7 @@ export function Chart({ useColorVisionEvents({ enabled: shouldUseColorVisionEvents, - dimensions: {...dimensions, x: 0, y: 0}, + containerDimensions, }); useWatchColorVisionEvents({ @@ -188,7 +193,7 @@ export function Chart({ ) : ( `+${count} more`, @@ -61,7 +61,7 @@ export function LegendValues({ showLegend: true, data: [{series: allData, shape: 'Bar'}], colors: seriesColors, - dimensions, + containerDimensions, seriesNameFormatter, }); @@ -165,11 +165,11 @@ export function LegendValues({ activeIndex={activeIndex} colorVisionType={COLOR_VISION_SINGLE_ITEM} data={hiddenData} + containerDimensions={containerDimensions} theme={theme} label={renderHiddenLegendLabel(allData.length - displayedData.length)} lastVisibleIndex={allData.length - hiddenData.length} setActivatorWidth={() => null} - dimensions={dimensions} seriesNameFormatter={seriesNameFormatter} /> )} diff --git a/packages/polaris-viz/src/components/DonutChart/tests/DonutChart.test.tsx b/packages/polaris-viz/src/components/DonutChart/tests/DonutChart.test.tsx index e55358b4d..4426488fb 100644 --- a/packages/polaris-viz/src/components/DonutChart/tests/DonutChart.test.tsx +++ b/packages/polaris-viz/src/components/DonutChart/tests/DonutChart.test.tsx @@ -23,7 +23,7 @@ describe('', () => { showLegend: true, theme: `Light`, labelFormatter: (value) => `${value}`, - dimensions: {width: 500, height: 500}, + containerDimensions: {width: 500, height: 500}, data: [ { name: 'Shopify Payments', diff --git a/packages/polaris-viz/src/components/FunnelChart/Chart.tsx b/packages/polaris-viz/src/components/FunnelChart/Chart.tsx index 9243380b2..885c84d97 100644 --- a/packages/polaris-viz/src/components/FunnelChart/Chart.tsx +++ b/packages/polaris-viz/src/components/FunnelChart/Chart.tsx @@ -1,8 +1,8 @@ import {Fragment, useMemo, useState, useCallback} from 'react'; import {scaleBand, scaleLinear} from 'd3-scale'; import type { + BoundingRect, DataSeries, - Dimensions, XAxisOptions, YAxisOptions, } from '@shopify/polaris-viz-core'; @@ -36,13 +36,13 @@ export interface ChartProps { data: DataSeries[]; xAxisOptions: Required; yAxisOptions: Required; - dimensions?: Dimensions; + containerBounds?: BoundingRect; labelHelpers?: LabelHelpers[]; } export function Chart({ data, - dimensions, + containerBounds, xAxisOptions, yAxisOptions, labelHelpers, @@ -64,7 +64,7 @@ export function Chart({ throw new Error('Data must be finite'); } - const {width, height} = dimensions || {width: 0, height: 0}; + const {width, height} = containerBounds ?? {width: 0, height: 0}; const labels = useMemo( () => dataSeries.map(({key}) => xAxisOptions.labelFormatter(key)), diff --git a/packages/polaris-viz/src/components/HorizontalBarChart/Chart.tsx b/packages/polaris-viz/src/components/HorizontalBarChart/Chart.tsx index 2a8f92e2f..b4f42a2ca 100644 --- a/packages/polaris-viz/src/components/HorizontalBarChart/Chart.tsx +++ b/packages/polaris-viz/src/components/HorizontalBarChart/Chart.tsx @@ -65,15 +65,15 @@ export interface ChartProps { type: ChartType; xAxisOptions: Required; yAxisOptions: Required; - dimensions?: BoundingRect; + containerBounds?: BoundingRect; renderHiddenLegendLabel?: (count: number) => string; renderLegendContent?: RenderLegendContent; } export function Chart({ annotationsLookupTable, + containerBounds, data, - dimensions, renderHiddenLegendLabel, renderLegendContent, renderTooltipContent, @@ -96,6 +96,11 @@ export function Chart({ const {longestSeriesCount, seriesColors} = useHorizontalSeriesColors(data); + const containerDimensions = { + height: containerBounds?.height ?? 0, + width: containerBounds?.width ?? 0, + }; + const {legend, setLegendDimensions, height, width} = useLegend({ data: [ { @@ -103,7 +108,7 @@ export function Chart({ series: data, }, ], - dimensions, + containerDimensions, showLegend, colors: seriesColors, seriesNameFormatter, @@ -310,8 +315,8 @@ export function Chart({ {showLegend && ( ; yAxisOptions: Required; annotationsLookupTable?: AnnotationLookupTable; - dimensions?: BoundingRect; + containerBounds?: BoundingRect; renderHiddenLegendLabel?: (count: number) => string; renderLegendContent?: RenderLegendContent; type?: ChartType; @@ -33,7 +33,7 @@ export interface HorizontalBarChartProps { export function HorizontalBarChart({ annotationsLookupTable = {}, data, - dimensions, + containerBounds, renderHiddenLegendLabel, renderLegendContent, renderTooltipContent, @@ -45,7 +45,7 @@ export function HorizontalBarChart({ }: HorizontalBarChartProps) { return ( `${value}`, integersOnly: false, + maxYOverride: 100, }, showLegend: false, type: 'default', diff --git a/packages/polaris-viz/src/components/HorizontalBarChart/tests/HorizontalBarChart.test.tsx b/packages/polaris-viz/src/components/HorizontalBarChart/tests/HorizontalBarChart.test.tsx index 5b9d2411b..38ad903ba 100644 --- a/packages/polaris-viz/src/components/HorizontalBarChart/tests/HorizontalBarChart.test.tsx +++ b/packages/polaris-viz/src/components/HorizontalBarChart/tests/HorizontalBarChart.test.tsx @@ -31,7 +31,7 @@ const mockProps: HorizontalBarChartProps = { }, renderTooltipContent: (value) => `${value}`, showLegend: false, - dimensions: { + containerDimensions: { height: 400, width: 400, }, diff --git a/packages/polaris-viz/src/components/LegendContainer/LegendContainer.tsx b/packages/polaris-viz/src/components/LegendContainer/LegendContainer.tsx index 87d455a8b..166608b5c 100644 --- a/packages/polaris-viz/src/components/LegendContainer/LegendContainer.tsx +++ b/packages/polaris-viz/src/components/LegendContainer/LegendContainer.tsx @@ -9,11 +9,7 @@ import { useChartContext, useTheme, } from '@shopify/polaris-viz-core'; -import type { - Direction, - Dimensions, - BoundingRect, -} from '@shopify/polaris-viz-core'; +import type {Direction, Dimensions} from '@shopify/polaris-viz-core'; import {DEFAULT_LEGEND_HEIGHT, DEFAULT_LEGEND_WIDTH} from '../../constants'; import {useResizeObserver, useWatchColorVisionEvents} from '../../hooks'; @@ -33,6 +29,7 @@ import {useOverflowLegend} from './hooks/useOverflowLegend'; export interface LegendContainerProps { colorVisionType: string; + containerDimensions: Dimensions; data: LegendData[]; onDimensionChange: Dispatch>; direction?: Direction; @@ -43,7 +40,6 @@ export interface LegendContainerProps { /* If enabled, hides overflowing legend items with "+ n more" */ enableHideOverflow?: boolean; renderHiddenLegendLabel?: RenderHiddenLegendLabel; - dimensions?: BoundingRect; } export function LegendContainer({ @@ -57,7 +53,7 @@ export function LegendContainer({ renderLegendContent, enableHideOverflow = false, renderHiddenLegendLabel = (count) => `+${count} more`, - dimensions, + containerDimensions, }: LegendContainerProps) { const selectedTheme = useTheme(); const {setRef, entry} = useResizeObserver(); @@ -82,7 +78,7 @@ export function LegendContainer({ data: allData, enableHideOverflow, legendItemDimensions, - width: dimensions?.width || 0, + width: containerDimensions?.width || 0, activatorWidth, leftMargin, horizontalMargin, @@ -90,7 +86,7 @@ export function LegendContainer({ : ({ direction: 'vertical' as const, data: allData, - height: dimensions?.height, + height: containerDimensions?.height, enableHideOverflow, legendItemDimensions, } as UseOverflowLegendProps); @@ -184,6 +180,7 @@ export function LegendContainer({ )} diff --git a/packages/polaris-viz/src/components/LegendContainer/components/HiddenLegendTooltip.tsx b/packages/polaris-viz/src/components/LegendContainer/components/HiddenLegendTooltip.tsx index 537a9a1ac..6dc109f4c 100644 --- a/packages/polaris-viz/src/components/LegendContainer/components/HiddenLegendTooltip.tsx +++ b/packages/polaris-viz/src/components/LegendContainer/components/HiddenLegendTooltip.tsx @@ -13,7 +13,7 @@ import { useChartContext, useTheme, } from '@shopify/polaris-viz-core'; -import type {BoundingRect, LabelFormatter} from '@shopify/polaris-viz-core'; +import type {Dimensions, LabelFormatter} from '@shopify/polaris-viz-core'; import {getFontSize} from '../../../utilities/getFontSize'; import type {LegendData} from '../../../types'; @@ -29,12 +29,12 @@ import style from './HiddenLegendTooltip.scss'; interface Props { activeIndex: number; colorVisionType: string; + containerDimensions: Dimensions; data: LegendData[]; label: ReactNode; setActivatorWidth: (width: number) => void; theme?: string; lastVisibleIndex?: number; - dimensions?: BoundingRect; seriesNameFormatter?: LabelFormatter; } @@ -44,12 +44,12 @@ export const LEGEND_TOOLIP_Z_INDEX = 520; export function HiddenLegendTooltip({ activeIndex, colorVisionType, + containerDimensions, data, theme, label, lastVisibleIndex = 0, setActivatorWidth, - dimensions, seriesNameFormatter, }: Props) { const selectedTheme = useTheme(); @@ -59,7 +59,11 @@ export function HiddenLegendTooltip({ const container = useRootContainer(tooltipId); const tooltipRef = useRef(null); const activatorRef = useRef(null); - useColorVisionEvents({enabled: true, root: LEGEND_TOOLTIP_ID, dimensions}); + useColorVisionEvents({ + enabled: true, + root: LEGEND_TOOLTIP_ID, + containerDimensions, + }); const defaultPosition = useMemo( () => ({ diff --git a/packages/polaris-viz/src/components/LegendContainer/hooks/tests/useLegend.test.tsx b/packages/polaris-viz/src/components/LegendContainer/hooks/tests/useLegend.test.tsx index 3400e340d..2aab154a4 100644 --- a/packages/polaris-viz/src/components/LegendContainer/hooks/tests/useLegend.test.tsx +++ b/packages/polaris-viz/src/components/LegendContainer/hooks/tests/useLegend.test.tsx @@ -33,7 +33,7 @@ const DATAGROUP: DataGroup[] = [ ]; const MOCK_PROPS: Props = { - dimensions: {height: 100, width: 100}, + containerDimensions: {height: 100, width: 100}, showLegend: true, data: DATAGROUP, seriesNameFormatter: (value) => `${value}`, diff --git a/packages/polaris-viz/src/components/LegendContainer/hooks/useLegend.ts b/packages/polaris-viz/src/components/LegendContainer/hooks/useLegend.ts index 019f30d13..18df46762 100644 --- a/packages/polaris-viz/src/components/LegendContainer/hooks/useLegend.ts +++ b/packages/polaris-viz/src/components/LegendContainer/hooks/useLegend.ts @@ -12,12 +12,12 @@ import {DEFAULT_LEGEND_HEIGHT} from '../../../constants'; import type {LegendData} from '../../../types'; function getAlteredDimensions( - dimensions: Dimensions | undefined, + containerDimensions: Dimensions, legendsHeight: number, legendsWidth: number, direction: Direction, ) { - const {width, height} = dimensions ?? {width: 0, height: 0}; + const {width, height} = containerDimensions; const isHorizontal = direction === 'horizontal'; return { @@ -29,17 +29,17 @@ function getAlteredDimensions( export interface Props { showLegend: boolean; data: DataGroup[]; + containerDimensions: Dimensions; seriesNameFormatter: LabelFormatter; colors?: Color[]; - dimensions?: Dimensions; direction?: Direction; maxWidth?: number; } export function useLegend({ colors = [], + containerDimensions, data, - dimensions = {height: 0, width: 0}, showLegend, direction = 'horizontal', maxWidth = 0, @@ -84,18 +84,18 @@ export function useLegend({ const {height, width} = useMemo(() => { if (showLegend === false) { - return dimensions; + return containerDimensions; } return getAlteredDimensions( - dimensions, + containerDimensions, legendDimensions.height, legendDimensions.width, direction, ); }, [ showLegend, - dimensions, + containerDimensions, legendDimensions.height, legendDimensions.width, direction, diff --git a/packages/polaris-viz/src/components/LegendContainer/tests/LegendsContainer.test.tsx b/packages/polaris-viz/src/components/LegendContainer/tests/LegendsContainer.test.tsx index d63bb00d4..6f6ebf113 100644 --- a/packages/polaris-viz/src/components/LegendContainer/tests/LegendsContainer.test.tsx +++ b/packages/polaris-viz/src/components/LegendContainer/tests/LegendsContainer.test.tsx @@ -16,7 +16,7 @@ const mockProps: LegendContainerProps = { {name: 'Legend Three', color: 'yellow'}, ], onDimensionChange: jest.fn(), - dimensions: { + containerDimensions: { width: 0, height: 0, }, @@ -77,7 +77,10 @@ describe('', () => { const component = mount( , ); @@ -89,7 +92,10 @@ describe('', () => { const component = mount( , ); @@ -117,7 +123,10 @@ describe('', () => { const component = mount( , ); @@ -129,7 +138,10 @@ describe('', () => { const component = mount( , ); @@ -143,7 +155,10 @@ describe('', () => { const component = mount( , ); @@ -157,7 +172,10 @@ describe('', () => { const component = mount( `Custom legend label ${x}`} />, diff --git a/packages/polaris-viz/src/components/LineChart/Chart.tsx b/packages/polaris-viz/src/components/LineChart/Chart.tsx index 549829cce..9154a462c 100644 --- a/packages/polaris-viz/src/components/LineChart/Chart.tsx +++ b/packages/polaris-viz/src/components/LineChart/Chart.tsx @@ -78,7 +78,7 @@ export interface ChartProps { hideLegendOverflow: boolean; xAxisOptions: Required; yAxisOptions: Required; - dimensions?: BoundingRect; + containerBounds?: BoundingRect; emptyStateText?: string; renderLegendContent?: RenderLegendContent; renderHiddenLegendLabel?: RenderHiddenLegendLabel; @@ -92,7 +92,7 @@ export function Chart({ annotationsLookupTable, emptyStateText, data, - dimensions, + containerBounds, renderLegendContent, renderTooltipContent, renderHiddenLegendLabel, @@ -104,19 +104,24 @@ export function Chart({ xAxisOptions, yAxisOptions, }: ChartProps) { - useColorVisionEvents({ - enabled: data.length > 1, - dimensions, - }); - const selectedTheme = useTheme(theme); const {isPerformanceImpacted} = useChartContext(); const [activeIndex, setActiveIndex] = useState(null); const [activeLineIndex, setActiveLineIndex] = useState(-1); + const containerDimensions = { + height: containerBounds?.height ?? 0, + width: containerBounds?.width ?? 0, + }; + + useColorVisionEvents({ + enabled: data.length > 1, + containerDimensions, + }); + const isSmallChart = Boolean( - dimensions && dimensions?.height < SMALL_CHART_HEIGHT, + containerBounds != null && containerBounds.height < SMALL_CHART_HEIGHT, ); const hideXAxis = @@ -133,7 +138,7 @@ export function Chart({ series: data, }, ], - dimensions, + containerDimensions, showLegend: showLegend && !isSmallChart, seriesNameFormatter, }); @@ -254,8 +259,8 @@ export function Chart({ const x = xScale?.(activeIndex) ?? 0; return { - x: x + (dimensions?.x ?? 0), - y: dimensions?.y ?? 0, + x: x + (containerBounds?.x ?? 0), + y: containerBounds?.y ?? 0, activeIndex, }; } @@ -285,8 +290,8 @@ export function Chart({ const chartBounds: BoundingRect = { width, height, - x: dimensions?.x ?? chartXPosition, - y: dimensions?.y ?? chartYPosition, + x: containerBounds?.x ?? chartXPosition, + y: containerBounds?.y ?? chartYPosition, }; const {hasXAxisAnnotations, hasYAxisAnnotations} = checkAvailableAnnotations( @@ -448,11 +453,11 @@ export function Chart({ {showLegend && !isSmallChart && ( )} diff --git a/packages/polaris-viz/src/components/LineChart/tests/Chart.test.tsx b/packages/polaris-viz/src/components/LineChart/tests/Chart.test.tsx index e0c45f526..89c8ab534 100644 --- a/packages/polaris-viz/src/components/LineChart/tests/Chart.test.tsx +++ b/packages/polaris-viz/src/components/LineChart/tests/Chart.test.tsx @@ -41,6 +41,11 @@ const MOCK_DATA: Required = { {key: 'Jan 3', value: 800}, {key: 'Jan 4', value: 1300}, ], + metadata: {}, + styleOverride: {}, + fillValue: 0, + strokeDasharray: '', + width: 1, }; const xAxisOptions: Required = { @@ -59,12 +64,13 @@ const yAxisOptions: Required = { const MOCK_PROPS: ChartProps = { data: [MOCK_DATA], annotationsLookupTable: {}, - dimensions: {width: 500, height: 250, x: 0, y: 0}, + containerBounds: {width: 500, height: 250, x: 0, y: 0}, xAxisOptions, yAxisOptions, renderTooltipContent: jest.fn(() =>

Mock Tooltip

), showLegend: false, seriesNameFormatter: (value) => `${value}`, + hideLegendOverflow: false, }; jest.mock('@shopify/polaris-viz-core/src/utilities/estimateStringWidth', () => { @@ -551,7 +557,10 @@ describe('', () => { it('does not render when the chart has a height of less than 125', () => { const chart = mount( - , + , ); expect(chart).not.toContainReactComponent(LegendContainer); }); diff --git a/packages/polaris-viz/src/components/SimpleBarChart/Chart.tsx b/packages/polaris-viz/src/components/SimpleBarChart/Chart.tsx index 2ae21de3a..4a9975e57 100644 --- a/packages/polaris-viz/src/components/SimpleBarChart/Chart.tsx +++ b/packages/polaris-viz/src/components/SimpleBarChart/Chart.tsx @@ -5,8 +5,8 @@ import { useAriaLabel, } from '@shopify/polaris-viz-core'; import type { + BoundingRect, ChartType, - Dimensions, LabelFormatter, XAxisOptions, YAxisOptions, @@ -40,14 +40,14 @@ export interface ChartProps { type: ChartType; xAxisOptions: Required; yAxisOptions: Required; - dimensions?: Dimensions; + containerBounds?: BoundingRect; renderLegendContent?: RenderLegendContent; legendPosition?: LegendPosition; } export function Chart({ data, - dimensions, + containerBounds, renderLegendContent, legendPosition = 'bottom-right', seriesNameFormatter, @@ -66,6 +66,11 @@ export function Chart({ const {longestSeriesCount, seriesColors} = useHorizontalSeriesColors(data); + const containerDimensions = { + width: containerBounds?.width ?? 0, + height: containerBounds?.height ?? 0, + }; + const {legend, setLegendDimensions, height, width} = useLegend({ data: [ { @@ -73,7 +78,7 @@ export function Chart({ series: data, }, ], - dimensions, + containerDimensions, colors: seriesColors, showLegend, seriesNameFormatter, @@ -182,6 +187,7 @@ export function Chart({ {showLegend && ( `${value}`, integersOnly: false, + maxYOverride: 100, }, type: 'default', showLegend: true, diff --git a/packages/polaris-viz/src/components/SparkBarChart/Chart.tsx b/packages/polaris-viz/src/components/SparkBarChart/Chart.tsx index 1628b05cc..63ea434b9 100644 --- a/packages/polaris-viz/src/components/SparkBarChart/Chart.tsx +++ b/packages/polaris-viz/src/components/SparkBarChart/Chart.tsx @@ -1,6 +1,6 @@ import {Fragment} from 'react'; import {useTransition} from '@react-spring/web'; -import type {Dimensions} from '@shopify/polaris-viz-core'; +import type {BoundingRect} from '@shopify/polaris-viz-core'; import { ANIMATION_MARGIN, SparkBarSeries, @@ -13,17 +13,17 @@ import styles from './SparkBarChart.scss'; import type {SparkBarChartProps} from './SparkBarChart'; interface Props extends SparkBarChartProps { - dimensions?: Dimensions; + containerBounds?: BoundingRect; } export function Chart({ data, - dimensions, + containerBounds, targetLine, accessibilityLabel, }: Props) { const {shouldAnimate} = useChartContext(); - const {width, height} = dimensions ?? {width: 0, height: 0}; + const {width, height} = containerBounds ?? {width: 0, height: 0}; const viewboxHeight = height + ANIMATION_MARGIN * 2; diff --git a/packages/polaris-viz/src/components/SparkBarChart/SparkBarChart.tsx b/packages/polaris-viz/src/components/SparkBarChart/SparkBarChart.tsx index fe9f56be1..6a312f0bd 100644 --- a/packages/polaris-viz/src/components/SparkBarChart/SparkBarChart.tsx +++ b/packages/polaris-viz/src/components/SparkBarChart/SparkBarChart.tsx @@ -3,11 +3,7 @@ import { ChartState, usePolarisVizContext, } from '@shopify/polaris-viz-core'; -import type { - Dimensions, - ChartProps, - TargetLine, -} from '@shopify/polaris-viz-core'; +import type {ChartProps, TargetLine} from '@shopify/polaris-viz-core'; import {ChartContainer} from '../ChartContainer'; import {ChartSkeleton} from '../'; @@ -17,7 +13,6 @@ import {Chart} from './Chart'; export type SparkBarChartProps = { targetLine?: TargetLine; accessibilityLabel?: string; - dimensions?: Dimensions; } & ChartProps; export function SparkBarChart(props: SparkBarChartProps) { diff --git a/packages/polaris-viz/src/components/SparkLineChart/Chart.tsx b/packages/polaris-viz/src/components/SparkLineChart/Chart.tsx index 77a30c436..13823e43f 100644 --- a/packages/polaris-viz/src/components/SparkLineChart/Chart.tsx +++ b/packages/polaris-viz/src/components/SparkLineChart/Chart.tsx @@ -7,7 +7,7 @@ import { useFilteredSparkLineData, useSparkLine, } from '@shopify/polaris-viz-core'; -import type {Dimensions} from '@shopify/polaris-viz-core'; +import type {BoundingRect} from '@shopify/polaris-viz-core'; import {useThemeSeriesColors} from '../../hooks/useThemeSeriesColors'; import {useTheme} from '../../hooks'; @@ -19,12 +19,12 @@ import type {SparkLineChartProps} from './SparkLineChart'; const SVG_MARGIN = 2; interface Props extends SparkLineChartProps { - dimensions?: Dimensions; + containerBounds?: BoundingRect; } export function Chart({ data, - dimensions, + containerBounds, accessibilityLabel, offsetLeft = 0, offsetRight = 0, @@ -35,7 +35,7 @@ export function Chart({ const filteredData = useFilteredSparkLineData(data); const seriesColors = useThemeSeriesColors(filteredData, selectedTheme); - const {width, height} = dimensions ?? {height: 0, width: 0}; + const {width, height} = containerBounds ?? {height: 0, width: 0}; const {minXDomain, maxXDomain, yScale} = useSparkLine({ data: filteredData, diff --git a/packages/polaris-viz/src/components/StackedAreaChart/Chart.tsx b/packages/polaris-viz/src/components/StackedAreaChart/Chart.tsx index a05e5ef56..78d0865fe 100644 --- a/packages/polaris-viz/src/components/StackedAreaChart/Chart.tsx +++ b/packages/polaris-viz/src/components/StackedAreaChart/Chart.tsx @@ -81,7 +81,7 @@ export interface Props { theme: string; xAxisOptions: Required; yAxisOptions: Required; - dimensions?: BoundingRect; + containerBounds?: BoundingRect; renderLegendContent?: RenderLegendContent; renderHiddenLegendLabel?: (count: number) => string; } @@ -90,7 +90,7 @@ export function Chart({ annotationsLookupTable, xAxisOptions, data, - dimensions, + containerBounds, renderLegendContent, renderTooltipContent, showLegend, @@ -99,16 +99,21 @@ export function Chart({ renderHiddenLegendLabel, seriesNameFormatter, }: Props) { - useColorVisionEvents({enabled: data.length > 1}); - const selectedTheme = useTheme(theme); const seriesColors = useThemeSeriesColors(data, selectedTheme); const [activePointIndex, setActivePointIndex] = useState(null); const [svgRef, setSvgRef] = useState(null); + const containerDimensions = { + height: containerBounds?.height ?? 0, + width: containerBounds?.width ?? 0, + }; + + useColorVisionEvents({enabled: data.length > 1}); + const isSmallChart = Boolean( - dimensions && dimensions?.height < SMALL_CHART_HEIGHT, + containerBounds != null && containerBounds.height < SMALL_CHART_HEIGHT, ); const hideXAxis = @@ -125,7 +130,7 @@ export function Chart({ series: data, }, ], - dimensions, + containerDimensions, showLegend: showLegend && !isSmallChart, seriesNameFormatter, }); @@ -262,11 +267,11 @@ export function Chart({ return null; } - const chartBounds: BoundingRect = { + const chartBounds = { width, height, - x: dimensions?.x ?? chartXPosition, - y: dimensions?.y ?? chartYPosition, + x: containerBounds?.x ?? chartXPosition, + y: containerBounds?.y ?? chartYPosition, }; const {hasXAxisAnnotations, hasYAxisAnnotations} = checkAvailableAnnotations( @@ -416,7 +421,7 @@ export function Chart({ onDimensionChange={setLegendDimensions} renderLegendContent={renderLegendContent} enableHideOverflow - dimensions={chartBounds} + containerDimensions={containerDimensions} renderHiddenLegendLabel={renderHiddenLegendLabel} /> )} @@ -456,8 +461,8 @@ export function Chart({ const x = xScale?.(activeIndex) ?? 0; return { - x: x + (dimensions?.x ?? 0), - y: dimensions?.y ?? 0, + x: x + (containerBounds?.x ?? 0), + y: containerBounds?.y ?? 0, position: TOOLTIP_POSITION, activeIndex: index, }; diff --git a/packages/polaris-viz/src/components/StackedAreaChart/tests/Chart.test.tsx b/packages/polaris-viz/src/components/StackedAreaChart/tests/Chart.test.tsx index 9a8f62e63..1d6ee0bf7 100644 --- a/packages/polaris-viz/src/components/StackedAreaChart/tests/Chart.test.tsx +++ b/packages/polaris-viz/src/components/StackedAreaChart/tests/Chart.test.tsx @@ -77,7 +77,7 @@ const MOCK_PROPS: Props = { integersOnly: false, maxYOverride: 10, }, - dimensions: {width: 500, height: 250}, + containerBounds: {width: 500, height: 250, x: 0, y: 0}, renderTooltipContent: jest.fn(() =>

Mock Tooltip Content

), showLegend: false, theme: DEFAULT_THEME_NAME, @@ -372,7 +372,10 @@ describe('', () => { it('does not render when the chart has a height of less than 125', () => { const chart = mount( - , + , ); expect(chart).not.toContainReactComponent(LegendContainer); }); diff --git a/packages/polaris-viz/src/components/TooltipWrapper/TooltipWrapper.tsx b/packages/polaris-viz/src/components/TooltipWrapper/TooltipWrapper.tsx index 250eb5ac8..0e2fdae01 100644 --- a/packages/polaris-viz/src/components/TooltipWrapper/TooltipWrapper.tsx +++ b/packages/polaris-viz/src/components/TooltipWrapper/TooltipWrapper.tsx @@ -28,7 +28,7 @@ interface BaseProps { getAlteredPosition?: AlteredPosition; id?: string; onIndexChange?: (index: number | null) => void; - chartDimensions?: BoundingRect; + containerBounds?: BoundingRect; } function TooltipWrapperRaw(props: BaseProps) { @@ -42,7 +42,7 @@ function TooltipWrapperRaw(props: BaseProps) { id, onIndexChange, parentRef, - chartDimensions, + containerBounds, } = props; const {scrollContainer} = useChartContext(); const [position, setPosition] = useState({ @@ -192,7 +192,7 @@ function TooltipWrapperRaw(props: BaseProps) { getAlteredPosition={getAlteredPosition} margin={props.margin} position={position.position} - chartDimensions={chartDimensions} + containerBounds={containerBounds} > {props.getMarkup(position.activeIndex)} diff --git a/packages/polaris-viz/src/components/TooltipWrapper/components/TooltipAnimatedContainer.tsx b/packages/polaris-viz/src/components/TooltipWrapper/components/TooltipAnimatedContainer.tsx index c2d86d6c5..83898fb54 100644 --- a/packages/polaris-viz/src/components/TooltipWrapper/components/TooltipAnimatedContainer.tsx +++ b/packages/polaris-viz/src/components/TooltipWrapper/components/TooltipAnimatedContainer.tsx @@ -22,7 +22,7 @@ export interface TooltipAnimatedContainerProps { position?: TooltipPositionOffset; id?: string; bandwidth?: number; - chartDimensions?: BoundingRect; + containerBounds?: BoundingRect; } export function TooltipAnimatedContainer({ @@ -36,7 +36,7 @@ export function TooltipAnimatedContainer({ getAlteredPosition = getAlteredVerticalBarPosition, margin, position = DEFAULT_TOOLTIP_POSITION, - chartDimensions, + containerBounds, }: TooltipAnimatedContainerProps) { const {isPerformanceImpacted, scrollContainer} = useChartContext(); @@ -59,7 +59,7 @@ export function TooltipAnimatedContainer({ margin, bandwidth, isPerformanceImpacted, - chartDimensions, + containerBounds, scrollContainer, }); @@ -82,7 +82,7 @@ export function TooltipAnimatedContainer({ position, isPerformanceImpacted, tooltipDimensions, - chartDimensions, + containerBounds, scrollContainer, ]); diff --git a/packages/polaris-viz/src/components/TooltipWrapper/utilities.ts b/packages/polaris-viz/src/components/TooltipWrapper/utilities.ts index eb2623a3d..2a62badee 100644 --- a/packages/polaris-viz/src/components/TooltipWrapper/utilities.ts +++ b/packages/polaris-viz/src/components/TooltipWrapper/utilities.ts @@ -19,7 +19,7 @@ export interface AlteredPositionProps { margin: Margin; position: TooltipPositionOffset; tooltipDimensions: Dimensions; - chartDimensions?: BoundingRect; + containerBounds?: BoundingRect; scrollContainer?: Element | null; } @@ -82,7 +82,7 @@ export function getAlteredVerticalBarPosition( } else { y = clamp({ amount: - (props.chartDimensions?.y ?? 0) - + (props.containerBounds?.y ?? 0) - props.tooltipDimensions.height - (scrollContainer?.scrollTop ?? 0), min: 0, diff --git a/packages/polaris-viz/src/components/VerticalBarChart/Chart.tsx b/packages/polaris-viz/src/components/VerticalBarChart/Chart.tsx index d32a145fd..848d36e44 100644 --- a/packages/polaris-viz/src/components/VerticalBarChart/Chart.tsx +++ b/packages/polaris-viz/src/components/VerticalBarChart/Chart.tsx @@ -69,7 +69,7 @@ export interface Props { xAxisOptions: Required; yAxisOptions: Required; annotationsLookupTable?: AnnotationLookupTable; - dimensions?: BoundingRect; + containerBounds?: BoundingRect; emptyStateText?: string; renderLegendContent?: RenderLegendContent; renderHiddenLegendLabel?: (count: number) => string; @@ -77,8 +77,8 @@ export interface Props { export function Chart({ annotationsLookupTable = {}, + containerBounds, data, - dimensions, emptyStateText, renderLegendContent, renderTooltipContent, @@ -89,16 +89,24 @@ export function Chart({ renderHiddenLegendLabel, seriesNameFormatter, }: Props) { - useColorVisionEvents({enabled: data.length > 1, dimensions}); - const selectedTheme = useTheme(); const {characterWidths} = useChartContext(); const [svgRef, setSvgRef] = useState(null); const id = useMemo(() => uniqueId('VerticalBarChart'), []); + const containerDimensions = { + height: containerBounds?.height ?? 0, + width: containerBounds?.width ?? 0, + }; + + useColorVisionEvents({ + enabled: data.length > 1, + containerDimensions, + }); + const isSmallChart = Boolean( - dimensions && dimensions?.height < SMALL_CHART_HEIGHT, + containerBounds != null && containerBounds?.height < SMALL_CHART_HEIGHT, ); const {legend, setLegendDimensions, height, width} = useLegend({ @@ -108,7 +116,7 @@ export function Chart({ series: data, }, ], - dimensions, + containerDimensions, showLegend: showLegend && !isSmallChart, seriesNameFormatter, }); @@ -346,12 +354,12 @@ export function Chart({ )} @@ -359,11 +367,11 @@ export function Chart({ {showLegend && !isSmallChart && ( )} @@ -389,8 +397,8 @@ export function Chart({ const y = yScale(highestValuePos!) + chartYPosition; return { - x: x + (dimensions?.x ?? 0), - y: Math.abs(y) + (dimensions?.y ?? 0), + x: x + (containerBounds?.x ?? 0), + y: Math.abs(y) + (containerBounds?.y ?? 0), position: { horizontal: TooltipHorizontalOffset.Center, vertical: areAllNegative diff --git a/packages/polaris-viz/src/components/VerticalBarChart/VerticalBarChart.tsx b/packages/polaris-viz/src/components/VerticalBarChart/VerticalBarChart.tsx index 40773ba76..c99e074be 100644 --- a/packages/polaris-viz/src/components/VerticalBarChart/VerticalBarChart.tsx +++ b/packages/polaris-viz/src/components/VerticalBarChart/VerticalBarChart.tsx @@ -26,7 +26,7 @@ export interface VerticalBarChartProps { seriesNameFormatter: LabelFormatter; annotationsLookupTable?: AnnotationLookupTable; barOptions?: {isStacked: boolean}; - dimensions?: BoundingRect; + containerBounds?: BoundingRect; emptyStateText?: string; renderLegendContent?: RenderLegendContent; type?: ChartType; @@ -36,7 +36,7 @@ export interface VerticalBarChartProps { export function VerticalBarChart({ annotationsLookupTable = {}, data, - dimensions, + containerBounds, emptyStateText, renderLegendContent, renderTooltipContent, @@ -57,7 +57,7 @@ export function VerticalBarChart({ return ( ', () => { it('does not render when the chart has a height of less than 125', () => { const chart = mount( - , + , ); expect(chart).not.toContainReactComponent(LegendContainer); }); diff --git a/packages/polaris-viz/src/hooks/ColorVisionA11y/useColorVisionEvents.ts b/packages/polaris-viz/src/hooks/ColorVisionA11y/useColorVisionEvents.ts index 3ddc434a4..4f5a62e2a 100644 --- a/packages/polaris-viz/src/hooks/ColorVisionA11y/useColorVisionEvents.ts +++ b/packages/polaris-viz/src/hooks/ColorVisionA11y/useColorVisionEvents.ts @@ -1,19 +1,19 @@ import {useEffect} from 'react'; +import type {Dimensions} from '@shopify/polaris-viz-core'; import {COLOR_VISION_EVENT, useChartContext} from '@shopify/polaris-viz-core'; -import type {BoundingRect} from '@shopify/polaris-viz-core'; import {useExternalHideEvents} from '../ExternalEvents'; import {getDataSetItem, getEventName} from './utilities'; export interface Props { + containerDimensions?: Dimensions; enabled?: boolean; - dimensions?: BoundingRect; root?: string; } export function useColorVisionEvents(props?: Partial) { - const {enabled = true, dimensions, root = 'chart'} = props || {}; + const {enabled = true, root = 'chart', containerDimensions} = props || {}; const {id} = useChartContext(); const {hiddenIndexes} = useExternalHideEvents(); @@ -79,5 +79,7 @@ export function useColorVisionEvents(props?: Partial) { item.removeEventListener('blur', onMouseLeave); }); }; - }, [id, enabled, hiddenIndexes, dimensions, root]); + // Re-attach the listeners when containerDimensions changes so that + // any new items get listeners as well. + }, [id, enabled, hiddenIndexes, root, containerDimensions]); } diff --git a/packages/polaris-viz/src/hooks/usePrintResizing.ts b/packages/polaris-viz/src/hooks/usePrintResizing.ts index f9007815d..fa11c1442 100644 --- a/packages/polaris-viz/src/hooks/usePrintResizing.ts +++ b/packages/polaris-viz/src/hooks/usePrintResizing.ts @@ -6,13 +6,13 @@ import {useBrowserCheck} from './useBrowserCheck'; interface Props { ref: HTMLElement | null; - setChartDimensions: (value: React.SetStateAction) => void; + setContainerBounds: (value: React.SetStateAction) => void; onIsPrintingChange: Dispatch>; } export function usePrintResizing({ ref, - setChartDimensions, + setContainerBounds, onIsPrintingChange, }: Props) { const [isPrinting, setIsPrinting] = useState(false); @@ -33,7 +33,7 @@ export function usePrintResizing({ ref.clientHeight - parseInt(paddingTop, 10) - parseInt(paddingBottom, 10); - setChartDimensions({width, height}); + setContainerBounds({width, height}); setIsPrinting((isPrinting) => { const newIsPrinting = !isPrinting; @@ -100,7 +100,7 @@ export function usePrintResizing({ } } }; - }, [onIsPrintingChange, setChartDimensions, ref, isFirefox, isSafari]); + }, [onIsPrintingChange, setContainerBounds, ref, isFirefox, isSafari]); return {isPrinting}; }