Add showTooltip prop

Author: michaelnesen

packages/polaris-viz/src/components/FunnelChartNext/Chart.tsx

@@ -1,7 +1,11 @@
 import type {ReactNode} from 'react';
 import {Fragment, useMemo, useState} from 'react';
 import {scaleBand, scaleLinear} from 'd3-scale';
-import type {DataSeries, LabelFormatter} from '@shopify/polaris-viz-core';
+import type {
+  DataPoint,
+  DataSeries,
+  LabelFormatter,
+} from '@shopify/polaris-viz-core';
 import {
   uniqueId,
   LinearGradientWithStops,
@@ -37,7 +41,8 @@ import type {FunnelChartNextProps} from './FunnelChartNext';
 
 export interface ChartProps {
   data: DataSeries[];
-  tooltipLabels: FunnelChartNextProps['tooltipLabels'];
+  tooltipLabels?: FunnelChartNextProps['tooltipLabels'];
+  showTooltip?: FunnelChartNextProps['showTooltip'];
   seriesNameFormatter: LabelFormatter;
   labelFormatter: LabelFormatter;
   percentageFormatter?: (value: number) => string;
@@ -47,6 +52,7 @@ export interface ChartProps {
 export function Chart({
   data,
   tooltipLabels,
+  showTooltip = true,
   seriesNameFormatter,
   labelFormatter,
   percentageFormatter = (value: number) => {
@@ -178,8 +184,10 @@ export function Chart({
                   barWidth={barWidth}
                   index={index}
                   isLast={isLast}
-                  onMouseEnter={(index) => setTooltipIndex(index)}
-                  onMouseLeave={() => setTooltipIndex(null)}
+                  onMouseEnter={(index) =>
+                    showTooltip && setTooltipIndex(index)
+                  }
+                  onMouseLeave={() => showTooltip && setTooltipIndex(null)}
                   shouldApplyScaling={shouldApplyScaling}
                   x={x}
                 >
@@ -216,18 +224,13 @@ export function Chart({
   );
 
   function getTooltipMarkup() {
-    if (tooltipIndex == null) {
+    if (!showTooltip || tooltipIndex == null || !dataSeries[tooltipIndex]) {
       return null;
     }
 
     const activeDataSeries = dataSeries[tooltipIndex];
-
-    if (activeDataSeries == null) {
-      return null;
-    }
-
-    const xPosition = getXPosition();
-    const yPosition = getYPosition();
+    const xPosition = getXPosition(activeDataSeries);
+    const yPosition = getYPosition(activeDataSeries);
 
     return (
       <FunnelTooltip x={xPosition} y={yPosition}>
@@ -240,25 +243,25 @@ export function Chart({
         />
       </FunnelTooltip>
     );
+  }
 
-    function getXPosition() {
-      if (tooltipIndex === 0) {
-        return chartX + barWidth + TOOLTIP_HORIZONTAL_OFFSET;
-      }
-
-      const xOffset = (barWidth - TOOLTIP_WIDTH) / 2;
-      return chartX + (xScale(activeDataSeries.key.toString()) ?? 0) + xOffset;
+  function getXPosition(activeDataSeries: DataPoint) {
+    if (tooltipIndex === 0) {
+      return chartX + barWidth + TOOLTIP_HORIZONTAL_OFFSET;
     }
 
-    function getYPosition() {
-      const barHeight = getBarHeight(activeDataSeries.value ?? 0);
-      const yPosition = chartY + drawableHeight - barHeight;
+    const xOffset = (barWidth - TOOLTIP_WIDTH) / 2;
+    return chartX + (xScale(activeDataSeries.key.toString()) ?? 0) + xOffset;
+  }
 
-      if (tooltipIndex === 0) {
-        return yPosition;
-      }
+  function getYPosition(activeDataSeries: DataPoint) {
+    const barHeight = getBarHeight(activeDataSeries.value ?? 0);
+    const yPosition = chartY + drawableHeight - barHeight;
 
-      return yPosition - TOOLTIP_HEIGHT;
+    if (tooltipIndex === 0) {
+      return yPosition;
     }
+
+    return yPosition - TOOLTIP_HEIGHT;
   }
 }

packages/polaris-viz/src/components/FunnelChartNext/FunnelChartNext.tsx

@@ -11,19 +11,24 @@ import {ChartSkeleton} from '../';
 
 import {Chart} from './Chart';
 
+const DEFAULT_LABEL_FORMATTER: LabelFormatter = (value) => `${value}`;
+const DEFAULT_TOOLTIP_LABELS = {
+  reached: 'Reached this step',
+  dropped: 'Dropped off',
+} as const;
+
 export type FunnelChartNextProps = {
-  tooltipLabels: {
+  tooltipLabels?: {
     reached: string;
     dropped: string;
   };
+  showTooltip?: boolean;
   seriesNameFormatter?: LabelFormatter;
   labelFormatter?: LabelFormatter;
   renderScaleIconTooltipContent?: () => ReactNode;
   percentageFormatter?: (value: number) => string;
 } & ChartProps;
 
-const DEFAULT_LABEL_FORMATTER: LabelFormatter = (value) => `${value}`;
-
 export function FunnelChartNext(props: FunnelChartNextProps) {
   const {theme: defaultTheme} = useChartContext();
 
@@ -34,7 +39,8 @@ export function FunnelChartNext(props: FunnelChartNextProps) {
     isAnimated,
     state,
     errorText,
-    tooltipLabels,
+    tooltipLabels = DEFAULT_TOOLTIP_LABELS,
+    showTooltip = true,
     seriesNameFormatter = DEFAULT_LABEL_FORMATTER,
     labelFormatter = DEFAULT_LABEL_FORMATTER,
     percentageFormatter,
@@ -64,6 +70,7 @@ export function FunnelChartNext(props: FunnelChartNextProps) {
         <Chart
           data={data}
           tooltipLabels={tooltipLabels}
+          showTooltip={showTooltip}
           seriesNameFormatter={seriesNameFormatter}
           labelFormatter={labelFormatter}
           percentageFormatter={percentageFormatter}

packages/polaris-viz/src/components/FunnelChartNext/components/Tooltip/Tooltip.tsx

@@ -67,11 +67,24 @@ export function Tooltip({
     >
       {() => (
         <Fragment>
-          <TooltipTitle theme={DEFAULT_THEME_NAME}>{point.key}</TooltipTitle>
+          <TooltipTitle
+            theme={DEFAULT_THEME_NAME}
+            aria-label={`Step: ${point.key}`}
+          >
+            {point.key}
+          </TooltipTitle>
           <div className={styles.Rows}>
             {data.map(({key, value, color, percent}, index) => {
+              const ariaLabel = `${key}: ${value}, ${percentageFormatter(
+                percent,
+              )}`;
+
               return (
-                <div className={styles.Row} key={`row-${index}-${key}`}>
+                <div
+                  className={styles.Row}
+                  key={`row-${index}-${key}`}
+                  aria-label={ariaLabel}
+                >
                   <div className={styles.Keys}>
                     <SeriesIcon color={color!} shape="Bar" />
                     <span>{key}</span>

packages/polaris-viz/src/components/FunnelChartNext/stories/Default.stories.tsx

@@ -24,6 +24,7 @@ Default.args = {
     reached: 'Reached this step',
     dropped: 'Dropped off',
   },
+  showTooltip: true,
   labelFormatter,
   percentageFormatter,
   renderScaleIconTooltipContent: () => (

packages/polaris-viz/src/components/FunnelChartNext/stories/meta.ts

@@ -6,7 +6,9 @@ import {
   LABEL_FORMATTER_ARGS,
   PERCENTAGE_FORMATTER_ARGS,
   SERIES_NAME_FORMATTER_ARGS,
+  SHOW_TOOLTIP_ARGS,
   THEME_CONTROL_ARGS,
+  FUNNEL_TOOLTIP_LABELS_ARGS,
 } from '../../../storybook/constants';
 import {PageWithSizingInfo} from '../../Docs/stories';
 import {FunnelChartNext} from '../FunnelChartNext';
@@ -27,6 +29,8 @@ export const META: Meta = {
     seriesNameFormatter: SERIES_NAME_FORMATTER_ARGS,
     labelFormatter: LABEL_FORMATTER_ARGS,
     percentageFormatter: PERCENTAGE_FORMATTER_ARGS,
+    tooltipLabels: FUNNEL_TOOLTIP_LABELS_ARGS,
+    showTooltip: SHOW_TOOLTIP_ARGS,
     theme: THEME_CONTROL_ARGS,
     state: CHART_STATE_CONTROL_ARGS,
   },

packages/polaris-viz/src/components/FunnelChartNext/tests/Chart.test.tsx

@@ -102,4 +102,32 @@ describe('<Chart />', () => {
 
     expect(chart).not.toContainReactComponent(FunnelTooltip);
   });
+
+  describe('showTooltip', () => {
+    it('shows tooltip when showTooltip is true', () => {
+      const chart = mount(
+        <ChartContext.Provider value={mockContext}>
+          <Chart {...defaultProps} showTooltip />
+        </ChartContext.Provider>,
+      );
+
+      const firstSegment = chart.find(FunnelChartSegment);
+      firstSegment?.trigger('onMouseEnter', 0);
+
+      expect(chart).toContainReactComponent(FunnelTooltip);
+    });
+
+    it('does not show tooltip when showTooltip is false', () => {
+      const chart = mount(
+        <ChartContext.Provider value={mockContext}>
+          <Chart {...defaultProps} showTooltip={false} />
+        </ChartContext.Provider>,
+      );
+
+      const firstSegment = chart.find(FunnelChartSegment);
+      firstSegment?.trigger('onMouseEnter', 0);
+
+      expect(chart).not.toContainReactComponent(FunnelTooltip);
+    });
+  });
 });

packages/polaris-viz/src/components/FunnelChartNext/tests/FunnelChartNext.test.tsx

@@ -116,5 +116,36 @@ describe('<FunnelChartNext />', () => {
         labelFormatter,
       });
     });
+
+    describe('showTooltip', () => {
+      it('passes showTooltip prop to Chart', () => {
+        const funnel = mount(
+          <FunnelChartNext
+            data={mockData}
+            tooltipLabels={mockTooltipLabels}
+            showTooltip={false}
+            state={ChartState.Success}
+          />,
+        );
+
+        expect(funnel).toContainReactComponent(Chart, {
+          showTooltip: false,
+        });
+      });
+
+      it('defaults showTooltip to true when not provided', () => {
+        const funnel = mount(
+          <FunnelChartNext
+            data={mockData}
+            tooltipLabels={mockTooltipLabels}
+            state={ChartState.Success}
+          />,
+        );
+
+        expect(funnel).toContainReactComponent(Chart, {
+          showTooltip: true,
+        });
+      });
+    });
   });
 });

packages/polaris-viz/src/storybook/constants.ts

@@ -151,6 +151,18 @@ export const PERCENTAGE_FORMATTER_ARGS = {
     'A function that formats percentage values displayed in the chart.',
 };
 
+export const FUNNEL_TOOLTIP_LABELS_ARGS = {
+  description:
+    'An object that defines the "reached" and "dropped" labels in the tooltip.',
+};
+
+export const SHOW_TOOLTIP_ARGS = {
+  description: 'Whether to show the tooltip or not.',
+  control: {
+    type: 'boolean',
+  },
+};
+
 export const DEFAULT_CHART_CONTEXT: ChartContextValues = {
   shouldAnimate: false,
   characterWidths,