Rename useRenderTooltipContent to getTooltipContentRenderer

Shopify · Mar 11, 2024 · 3af6284 · 3af6284
1 parent 5eedc3f
commit 3af6284
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 10 deletions.
diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md
@@ -5,7 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
-<!-- ## Unreleased -->
+## Unreleased
+
+### Changed
+
+- **Breaking change** Renamed `useRenderTooltipContent()` to `getTooltipContentRenderer()`.
 
 ## [10.7.2] - 2024-03-06
 

diff --git a/packages/polaris-viz/src/components/BarChart/BarChart.tsx b/packages/polaris-viz/src/components/BarChart/BarChart.tsx
@@ -14,6 +14,7 @@ import type {
   ChartProps,
 } from '@shopify/polaris-viz-core';
 
+import {getTooltipContentRenderer} from '../../utilities/getTooltipContentRenderer';
 import {ChartContainer} from '../../components/ChartContainer';
 import type {
   Annotation,
@@ -26,7 +27,6 @@ import {
   getYAxisOptionsWithDefaults,
   normalizeData,
 } from '../../utilities';
-import {useRenderTooltipContent} from '../../hooks';
 import {HorizontalBarChart} from '../HorizontalBarChart';
 import {VerticalBarChart} from '../VerticalBarChart';
 import {ChartSkeleton} from '../../components/ChartSkeleton';
@@ -91,7 +91,11 @@ export function BarChart(props: BarChartProps) {
 
   const annotationsLookupTable = normalizeData(annotations, 'startKey');
 
-  const renderTooltip = useRenderTooltipContent({tooltipOptions, theme, data});
+  const renderTooltip = getTooltipContentRenderer({
+    tooltipOptions,
+    theme,
+    data,
+  });
 
   const ChartByDirection =
     direction === 'vertical' ? (

diff --git a/packages/polaris-viz/src/components/LineChart/LineChart.tsx b/packages/polaris-viz/src/components/LineChart/LineChart.tsx
@@ -12,6 +12,7 @@ import {
   usePolarisVizContext,
 } from '@shopify/polaris-viz-core';
 
+import {getTooltipContentRenderer} from '../../utilities/getTooltipContentRenderer';
 import {fillMissingDataPoints} from '../../utilities/fillMissingDataPoints';
 import {getLineChartDataWithDefaults} from '../../utilities/getLineChartDataWithDefaults';
 import {ChartContainer} from '../../components/ChartContainer';
@@ -23,7 +24,7 @@ import {
   normalizeData,
 } from '../../utilities';
 import {SkipLink} from '../SkipLink';
-import {useRenderTooltipContent, useTheme} from '../../hooks';
+import {useTheme} from '../../hooks';
 import type {
   Annotation,
   LineChartSlotProps,
@@ -84,7 +85,11 @@ export function LineChart(props: LineChartProps) {
   const xAxisOptionsWithDefaults = getXAxisOptionsWithDefaults(xAxisOptions);
   const yAxisOptionsWithDefaults = getYAxisOptionsWithDefaults(yAxisOptions);
 
-  const renderTooltip = useRenderTooltipContent({tooltipOptions, theme, data});
+  const renderTooltip = getTooltipContentRenderer({
+    tooltipOptions,
+    theme,
+    data,
+  });
   const annotationsLookupTable = normalizeData(annotations, 'startKey');
 
   const dataWithDefaults = getLineChartDataWithDefaults(data, seriesColors);

diff --git a/packages/polaris-viz/src/components/StackedAreaChart/StackedAreaChart.tsx b/packages/polaris-viz/src/components/StackedAreaChart/StackedAreaChart.tsx
@@ -11,6 +11,7 @@ import type {
   ChartProps,
 } from '@shopify/polaris-viz-core';
 
+import {getTooltipContentRenderer} from '../../utilities/getTooltipContentRenderer';
 import {fillMissingDataPoints} from '../../utilities/fillMissingDataPoints';
 import {
   getXAxisOptionsWithDefaults,
@@ -25,7 +26,6 @@ import type {
   RenderLegendContent,
   TooltipOptions,
 } from '../../types';
-import {useRenderTooltipContent} from '../../hooks';
 
 import {Chart} from './Chart';
 
@@ -70,7 +70,11 @@ export function StackedAreaChart(props: StackedAreaChartProps) {
   const data = fillMissingDataPoints(dataSeries, true);
 
   const skipLinkAnchorId = useRef(uniqueId('stackedAreaChart'));
-  const renderTooltip = useRenderTooltipContent({tooltipOptions, theme, data});
+  const renderTooltip = getTooltipContentRenderer({
+    tooltipOptions,
+    theme,
+    data,
+  });
 
   if (data.length === 0) {
     return null;

diff --git a/packages/polaris-viz/src/hooks/index.ts b/packages/polaris-viz/src/hooks/index.ts
@@ -20,7 +20,6 @@ export {
 } from './ColorVisionA11y';
 export {useCallbackRef} from './useCallbackRef';
 export {useLinearLabelsAndDimensions} from './useLinearLabelsAndDimensions';
-export {useRenderTooltipContent} from './useRenderTooltipContent';
 
 export {
   useTheme,

diff --git a/packages/polaris-viz/src/index.ts b/packages/polaris-viz/src/index.ts
@@ -88,9 +88,10 @@ export type {
 
 export {renderLinearTooltipContent, setSingleSeriesActive} from './utilities';
 
+export {getTooltipContentRenderer} from './utilities/getTooltipContentRenderer';
+
 export {
   useWatchActiveSeries,
   setActiveSeriesListener,
   setHiddenItems,
-  useRenderTooltipContent,
 } from './hooks';
diff --git a/...viz/src/hooks/useRenderTooltipContent.tsx → ...c/utilities/getTooltipContentRenderer.tsx b/...viz/src/hooks/useRenderTooltipContent.tsx → ...c/utilities/getTooltipContentRenderer.tsx
@@ -4,7 +4,7 @@ import type {TooltipOptions, RenderTooltipContentData} from '../types';
 import {formatDataForTooltip} from '../utilities';
 import {TooltipContent} from '../components';
 
-export function useRenderTooltipContent({
+export function getTooltipContentRenderer({
   tooltipOptions = {},
   theme,
   data,

diff --git a/packages/polaris-viz/src/utilities/tests/getTooltipContentRenderer.test.tsx b/packages/polaris-viz/src/utilities/tests/getTooltipContentRenderer.test.tsx
@@ -0,0 +1,78 @@
+import {Fragment} from 'react';
+
+import {mountWithProvider} from '../../test-utilities/mountWithProvider';
+import {TooltipContent} from '../../components';
+import type {RenderTooltipContentData} from '../../types';
+import {getTooltipContentRenderer} from '../getTooltipContentRenderer';
+
+describe('getTooltipContentRenderer()', () => {
+  it('returns <TooltipContent />', () => {
+    const renderTooltipContent = getTooltipContentRenderer({
+      theme: 'Default',
+      data: [],
+    });
+
+    const result = mountWithProvider(
+      <Fragment>{renderTooltipContent(MOCK_TOOLTIP_DATA)}</Fragment>,
+    );
+
+    expect(result).toContainReactComponent(TooltipContent);
+  });
+
+  it('returns null when no data is provided', () => {
+    const renderTooltipContent = getTooltipContentRenderer({
+      theme: 'Default',
+      data: [],
+    });
+
+    expect(
+      renderTooltipContent({
+        ...MOCK_TOOLTIP_DATA,
+        data: [
+          {
+            shape: 'Line',
+            data: [],
+            name: '',
+          },
+        ],
+      }),
+    ).toBeNull();
+  });
+
+  it('returns a custom function when tooltipOptions.renderTooltipContent is provided', () => {
+    const customRenderer = jest.fn();
+
+    const renderTooltipContent = getTooltipContentRenderer({
+      theme: 'Default',
+      data: [],
+      tooltipOptions: {
+        renderTooltipContent: customRenderer,
+      },
+    });
+
+    mountWithProvider(
+      <Fragment>{renderTooltipContent(MOCK_TOOLTIP_DATA)}</Fragment>,
+    );
+
+    expect(customRenderer).toHaveBeenCalled();
+  });
+});
+
+const MOCK_TOOLTIP_DATA: RenderTooltipContentData = {
+  data: [
+    {
+      shape: 'Line',
+      data: [
+        {
+          key: 'Monday',
+          value: 3,
+        },
+      ],
+      name: '',
+    },
+  ],
+  activeIndex: 0,
+  dataSeries: [],
+  theme: 'Default',
+  title: '',
+};