Watch dimension change in useColorVisionEvents

Shopify · Jan 25, 2024 · 1ff96f2 · 1ff96f2
1 parent 04925ca
commit 1ff96f2
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 9 deletions.
diff --git a/packages/polaris-viz/src/components/DonutChart/Chart.tsx b/packages/polaris-viz/src/components/DonutChart/Chart.tsx
@@ -132,7 +132,7 @@ export function Chart({
     width && height && isLegendMounted,
   );
 
-  useColorVisionEvents(shouldUseColorVisionEvents);
+  useColorVisionEvents({enabled: shouldUseColorVisionEvents});
 
   useWatchColorVisionEvents({
     type: COLOR_VISION_SINGLE_ITEM,

diff --git a/packages/polaris-viz/src/components/HorizontalBarChart/Chart.tsx b/packages/polaris-viz/src/components/HorizontalBarChart/Chart.tsx
@@ -79,7 +79,7 @@ export function Chart({
   xAxisOptions,
   yAxisOptions,
 }: ChartProps) {
-  useColorVisionEvents(data.length > 1);
+  useColorVisionEvents({enabled: data.length > 1});
 
   const selectedTheme = useTheme();
   const id = useMemo(() => uniqueId('HorizontalBarChart'), []);

diff --git a/packages/polaris-viz/src/components/LineChart/Chart.tsx b/packages/polaris-viz/src/components/LineChart/Chart.tsx
@@ -101,7 +101,7 @@ export function Chart({
   yAxisOptions,
   enableHideLegendOverflow = false,
 }: ChartProps) {
-  useColorVisionEvents(data.length > 1);
+  useColorVisionEvents({enabled: data.length > 1, dimensions});
 
   const selectedTheme = useTheme(theme);
   const {isPerformanceImpacted} = useChartContext();

diff --git a/packages/polaris-viz/src/components/SimpleBarChart/Chart.tsx b/packages/polaris-viz/src/components/SimpleBarChart/Chart.tsx
@@ -52,7 +52,7 @@ export function Chart({
   xAxisOptions,
   yAxisOptions,
 }: ChartProps) {
-  useColorVisionEvents(data.length > 1);
+  useColorVisionEvents({enabled: data.length > 1});
 
   const id = useMemo(() => uniqueId('SimpleBarChart'), []);
 

diff --git a/packages/polaris-viz/src/components/StackedAreaChart/Chart.tsx b/packages/polaris-viz/src/components/StackedAreaChart/Chart.tsx
@@ -93,7 +93,7 @@ export function Chart({
   theme,
   yAxisOptions,
 }: Props) {
-  useColorVisionEvents(data.length > 1);
+  useColorVisionEvents({enabled: data.length > 1});
 
   const selectedTheme = useTheme(theme);
   const seriesColors = useThemeSeriesColors(data, selectedTheme);

diff --git a/packages/polaris-viz/src/components/VerticalBarChart/Chart.tsx b/packages/polaris-viz/src/components/VerticalBarChart/Chart.tsx
@@ -82,7 +82,7 @@ export function Chart({
   xAxisOptions,
   yAxisOptions,
 }: Props) {
-  useColorVisionEvents(data.length > 1);
+  useColorVisionEvents({enabled: data.length > 1});
 
   const selectedTheme = useTheme();
   const {characterWidths} = useChartContext();

diff --git a/packages/polaris-viz/src/hooks/ColorVisionA11y/useColorVisionEvents.ts b/packages/polaris-viz/src/hooks/ColorVisionA11y/useColorVisionEvents.ts
@@ -1,11 +1,22 @@
 import {useEffect} from 'react';
-import {COLOR_VISION_EVENT, useChartContext} from '@shopify/polaris-viz-core';
+import {
+  BoundingRect,
+  COLOR_VISION_EVENT,
+  useChartContext,
+} from '@shopify/polaris-viz-core';
 
 import {useExternalHideEvents} from '../ExternalEvents';
 
 import {getDataSetItem, getEventName} from './utilities';
 
-export function useColorVisionEvents(enabled = true) {
+export interface Props {
+  enabled?: boolean;
+  dimensions?: BoundingRect;
+}
+
+export function useColorVisionEvents(props?: Partial<Props>) {
+  const {enabled = true, dimensions} = props || {};
+
   const {id} = useChartContext();
   const {hiddenIndexes} = useExternalHideEvents();
 
@@ -70,5 +81,5 @@ export function useColorVisionEvents(enabled = true) {
         item.removeEventListener('blur', onMouseLeave);
       });
     };
-  }, [id, enabled, hiddenIndexes]);
+  }, [id, enabled, hiddenIndexes, dimensions]);
 }