Introduce isTouchDevice in ChartContext and update to only show t…

…ooltips on long-press
Shopify · Nov 28, 2024 · 5b013ee · 5b013ee
1 parent 4946486
commit 5b013ee
Show file tree

Hide file tree

Showing 16 changed files with 111 additions and 41 deletions.
diff --git a/packages/polaris-viz-core/src/contexts/ChartContext.tsx b/packages/polaris-viz-core/src/contexts/ChartContext.tsx
@@ -10,6 +10,7 @@ export interface ChartContextValues {
   containerBounds: BoundingRect;
   shouldAnimate: boolean;
   theme: string;
+  isTouchDevice: boolean;
   isPerformanceImpacted: boolean;
   scrollContainer?: Element | null;
 }
@@ -24,5 +25,6 @@ export const ChartContext = createContext<ChartContextValues>({
   containerBounds: {height: 0, width: 0, x: 0, y: 0},
   shouldAnimate: true,
   theme: DEFAULT_THEME_NAME,
+  isTouchDevice: false,
   isPerformanceImpacted: false,
 });
diff --git a/packages/polaris-viz-core/src/index.ts b/packages/polaris-viz-core/src/index.ts
@@ -101,6 +101,7 @@ export {
   getGradientFromColor,
   OpacityScale,
   isInfinity,
+  isTouchDevice,
 } from './utilities';
 export {
   useSparkBar,

diff --git a/packages/polaris-viz-core/src/utilities/index.ts b/packages/polaris-viz-core/src/utilities/index.ts
@@ -27,3 +27,4 @@ export {ColorScale} from './ColorScale/ColorScale';
 export {OpacityScale} from './OpacityScale/OpacityScale';
 export {isDataGroupArray} from './isDataGroup';
 export {getGradientFromColor} from './getGradientFromColor';
+export {isTouchDevice} from './isTouchDevice';
diff --git a/packages/polaris-viz-core/src/utilities/isTouchDevice.ts b/packages/polaris-viz-core/src/utilities/isTouchDevice.ts
@@ -0,0 +1,3 @@
+export function isTouchDevice() {
+  return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+}
diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md
@@ -14,6 +14,7 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 ### Changed
 
 - Refactored containers bounds into a hook and moved to chart context. `<ChartContainer />` now uses the new `useContainerBounds` hook.
+- Tooltips on touch devices now only show after a short delay.
 
 ## [15.3.2] - 2024-11-20
 

diff --git a/packages/polaris-viz/src/chromatic/components/CombinationRenderer.tsx b/packages/polaris-viz/src/chromatic/components/CombinationRenderer.tsx
@@ -26,6 +26,7 @@ export function CombinationRenderer<T extends Attributes>({
     return {
       ...DEFAULT_CHART_CONTEXT,
       theme: theme ?? DEFAULT_THEME_NAME,
+      isTouchDevice: false,
     };
   }, [theme]);
 

diff --git a/packages/polaris-viz/src/components/ChartContainer/ChartContainer.tsx b/packages/polaris-viz/src/components/ChartContainer/ChartContainer.tsx
@@ -12,7 +12,9 @@ import {
   ChartContext,
   isLargeDataSet,
   usePolarisVizContext,
+  isTouchDevice,
 } from '@shopify/polaris-viz-core';
+import type {ChartContextValues} from '@shopify/polaris-viz-core/src/contexts';
 
 import {EMPTY_BOUNDS} from '../../constants';
 import {ChartErrorBoundary} from '../ChartErrorBoundary';
@@ -49,13 +51,13 @@ export const ChartContainer = (props: Props) => {
     return isLargeDataSet(props.data, props.type);
   }, [props.data, props.type]);
 
-  const {containerBounds, onMouseEnter, setRef} = useContainerBounds({
+  const {containerBounds, updateContainerBounds, setRef} = useContainerBounds({
     onIsPrintingChange: setIsPrinting,
     scrollContainer: props.scrollContainer,
     sparkChart: props.sparkChart,
   });
 
-  const value = useMemo(() => {
+  const value: ChartContextValues = useMemo(() => {
     const shouldAnimate =
       props.isAnimated && !prefersReducedMotion && !dataTooBigToAnimate;
     const printFriendlyTheme = isPrinting ? 'Print' : props.theme;
@@ -66,6 +68,7 @@ export const ChartContainer = (props: Props) => {
       characterWidths,
       characterWidthOffsets,
       theme: printFriendlyTheme,
+      isTouchDevice: isTouchDevice(),
       isPerformanceImpacted: dataTooBigToAnimate,
       scrollContainer: props.scrollContainer,
       containerBounds: containerBounds ?? EMPTY_BOUNDS,
@@ -109,8 +112,9 @@ export const ChartContainer = (props: Props) => {
               ? chartContainer.sparkChartMinHeight
               : chartContainer.minHeight,
           }}
-          onMouseEnter={onMouseEnter}
-          onFocus={onMouseEnter}
+          onMouseEnter={updateContainerBounds}
+          onFocus={updateContainerBounds}
+          onTouchStart={updateContainerBounds}
         >
           {!hasValidBounds(value.containerBounds) ? null : (
             <ChartErrorBoundary

diff --git a/packages/polaris-viz/src/components/ChartContainer/hooks/useContainerBounds.ts b/packages/polaris-viz/src/components/ChartContainer/hooks/useContainerBounds.ts
@@ -91,7 +91,7 @@ export function useContainerBounds({
     chartContainer.sparkChartMinHeight,
   ]);
 
-  const onMouseEnter = useCallback(() => {
+  const updateContainerBounds = useCallback(() => {
     if (ref == null) {
       return;
     }
@@ -115,5 +115,9 @@ export function useContainerBounds({
     });
   }, [ref, scrollContainer]);
 
-  return {containerBounds, setContainerBounds, onMouseEnter, setRef};
+  return {
+    containerBounds,
+    updateContainerBounds,
+    setRef,
+  };
 }
diff --git a/packages/polaris-viz/src/components/ComboChart/Chart.tsx b/packages/polaris-viz/src/components/ComboChart/Chart.tsx
@@ -327,7 +327,7 @@ export function Chart({
         longestSeriesIndex={0}
         margin={ChartMargin}
         onIndexChange={(index) => setActiveIndex(index)}
-        parentRef={svgRef}
+        parentElement={svgRef}
         xScale={barXScale}
         yScale={barYScale}
       />

diff --git a/packages/polaris-viz/src/components/HorizontalBarChart/Chart.tsx b/packages/polaris-viz/src/components/HorizontalBarChart/Chart.tsx
@@ -8,6 +8,7 @@ import {
   useAriaLabel,
   LINE_HEIGHT,
   InternalChartType,
+  useChartContext,
 } from '@shopify/polaris-viz-core';
 import type {
   DataSeries,
@@ -77,6 +78,8 @@ export function Chart({
   xAxisOptions,
   yAxisOptions,
 }: ChartProps) {
+  const {isTouchDevice} = useChartContext();
+
   useColorVisionEvents({enabled: data.length > 1});
 
   const selectedTheme = useTheme();
@@ -297,7 +300,7 @@ export function Chart({
           focusElementDataType={DataType.BarGroup}
           getMarkup={getTooltipMarkup}
           margin={ChartMargin}
-          parentRef={svgRef}
+          parentElement={svgRef}
           longestSeriesIndex={longestSeriesIndex}
           xScale={xScale}
           type={type}

diff --git a/packages/polaris-viz/src/components/LineChart/Chart.tsx b/packages/polaris-viz/src/components/LineChart/Chart.tsx
@@ -95,13 +95,14 @@ export function Chart({
   yAxisOptions,
 }: ChartProps) {
   const selectedTheme = useTheme(theme);
-  const {isPerformanceImpacted, containerBounds} = useChartContext();
+  const {isPerformanceImpacted, containerBounds, isTouchDevice} =
+    useChartContext();
 
   const [activeIndex, setActiveIndex] = useState<number | null>(null);
   const [activeLineIndex, setActiveLineIndex] = useState(-1);
 
   useColorVisionEvents({
-    enabled: data.length > 1,
+    enabled: data.length > 1 && !isTouchDevice,
   });
 
   const isSmallChart = containerBounds.height < SMALL_CHART_HEIGHT;
@@ -386,7 +387,7 @@ export function Chart({
               setActiveIndex(index);
             }
           }}
-          parentRef={svgRef}
+          parentElement={svgRef}
           usePortal
           xScale={xScale}
           yScale={yScale}

diff --git a/packages/polaris-viz/src/components/SimpleBarChart/Chart.tsx b/packages/polaris-viz/src/components/SimpleBarChart/Chart.tsx
@@ -3,6 +3,7 @@ import {
   uniqueId,
   COLOR_VISION_SINGLE_ITEM,
   useAriaLabel,
+  useChartContext,
 } from '@shopify/polaris-viz-core';
 import type {
   ChartType,
@@ -53,7 +54,8 @@ export function Chart({
   xAxisOptions,
   yAxisOptions,
 }: ChartProps) {
-  useColorVisionEvents({enabled: data.length > 1});
+  const {isTouchDevice} = useChartContext();
+  useColorVisionEvents({enabled: data.length > 1 && !isTouchDevice});
 
   const fontSize = getFontSize();
   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
@@ -82,12 +82,12 @@ export function Chart({
 }: Props) {
   const selectedTheme = useTheme(theme);
   const seriesColors = useThemeSeriesColors(data, selectedTheme);
-  const {containerBounds} = useChartContext();
+  const {containerBounds, isTouchDevice} = useChartContext();
 
   const [activePointIndex, setActivePointIndex] = useState<number | null>(null);
   const [svgRef, setSvgRef] = useState<SVGSVGElement | null>(null);
 
-  useColorVisionEvents({enabled: data.length > 1});
+  useColorVisionEvents({enabled: data.length > 1 && !isTouchDevice});
 
   const isSmallChart = containerBounds.height < SMALL_CHART_HEIGHT;
 
@@ -383,7 +383,7 @@ export function Chart({
           longestSeriesIndex={longestSeriesIndex}
           margin={ChartMargin}
           onIndexChange={(index) => setActivePointIndex(index)}
-          parentRef={svgRef}
+          parentElement={svgRef}
           usePortal
           xScale={xScale}
         />