From a482eb8a2e2879c36aaf9a4055eec742956c33cb Mon Sep 17 00:00:00 2001
From: Michael Nesen <michael.nesen@shopify.com>
Date: Wed, 18 Dec 2024 16:29:35 +0000
Subject: [PATCH] Clean up naming and unused props

---
 .../src/components/FunnelChartNext/Chart.tsx  |   7 +-
 ...tXAxisLabels.tsx => FunnelChartLabels.tsx} |   6 +-
 .../FunnelChartNext/components/index.ts       |   2 +-
 .../stories/Default.stories.tsx               |   3 +
 .../src/components/SparkFunnelChart/Chart.tsx | 101 +++++++++---------
 .../SparkFunnelChart/SparkFunnelChart.scss    |   5 +
 .../SparkFunnelChart/SparkFunnelChart.tsx     |   9 +-
 7 files changed, 69 insertions(+), 64 deletions(-)
 rename packages/polaris-viz/src/components/FunnelChartNext/components/{FunnelChartXAxisLabels.tsx => FunnelChartLabels.tsx} (97%)
 create mode 100644 packages/polaris-viz/src/components/SparkFunnelChart/SparkFunnelChart.scss

diff --git a/packages/polaris-viz/src/components/FunnelChartNext/Chart.tsx b/packages/polaris-viz/src/components/FunnelChartNext/Chart.tsx
index 257cb7f8d..214685fc8 100644
--- a/packages/polaris-viz/src/components/FunnelChartNext/Chart.tsx
+++ b/packages/polaris-viz/src/components/FunnelChartNext/Chart.tsx
@@ -18,7 +18,7 @@ import {SingleTextLine} from '../Labels';
 import {ChartElements} from '../ChartElements';
 
 import {
-  FunnelChartXAxisLabels,
+  FunnelChartLabels,
   Tooltip,
   FunnelTooltip,
   TooltipWithPortal,
@@ -54,8 +54,7 @@ export function Chart({
   seriesNameFormatter,
   labelFormatter,
   percentageFormatter = (value: number) => {
-    const formattedValue = labelFormatter(value);
-    return `${formattedValue}%`;
+    return labelFormatter(value);
   },
   renderScaleIconTooltipContent,
 }: ChartProps) {
@@ -164,7 +163,7 @@ export function Chart({
         />
 
         <g transform={`translate(0,${PERCENTAGE_SUMMARY_HEIGHT})`}>
-          <FunnelChartXAxisLabels
+          <FunnelChartLabels
             formattedValues={formattedValues}
             labels={labels}
             labelWidth={sectionWidth}
diff --git a/packages/polaris-viz/src/components/FunnelChartNext/components/FunnelChartXAxisLabels.tsx b/packages/polaris-viz/src/components/FunnelChartNext/components/FunnelChartLabels.tsx
similarity index 97%
rename from packages/polaris-viz/src/components/FunnelChartNext/components/FunnelChartXAxisLabels.tsx
rename to packages/polaris-viz/src/components/FunnelChartNext/components/FunnelChartLabels.tsx
index 5baf1d8ce..ed5caf0cd 100644
--- a/packages/polaris-viz/src/components/FunnelChartNext/components/FunnelChartXAxisLabels.tsx
+++ b/packages/polaris-viz/src/components/FunnelChartNext/components/FunnelChartLabels.tsx
@@ -23,7 +23,7 @@ const VALUE_COLOR = 'rgba(97, 97, 97, 1)';
 
 const REDUCED_FONT_SIZE = 11;
 
-export interface FunnelChartXAxisLabelsProps {
+export interface FunnelChartLabelsProps {
   formattedValues: string[];
   labels: string[];
   labelWidth: number;
@@ -34,7 +34,7 @@ export interface FunnelChartXAxisLabelsProps {
   renderScaleIconTooltipContent?: () => ReactNode;
 }
 
-export function FunnelChartXAxisLabels({
+export function FunnelChartLabels({
   formattedValues,
   labels,
   labelWidth,
@@ -43,7 +43,7 @@ export function FunnelChartXAxisLabels({
   xScale,
   shouldApplyScaling,
   renderScaleIconTooltipContent,
-}: FunnelChartXAxisLabelsProps) {
+}: FunnelChartLabelsProps) {
   const {characterWidths} = useChartContext();
   const [showTooltip, setShowTooltip] = useState(false);
 
diff --git a/packages/polaris-viz/src/components/FunnelChartNext/components/index.ts b/packages/polaris-viz/src/components/FunnelChartNext/components/index.ts
index fad9b2dd1..2df703edb 100644
--- a/packages/polaris-viz/src/components/FunnelChartNext/components/index.ts
+++ b/packages/polaris-viz/src/components/FunnelChartNext/components/index.ts
@@ -1,4 +1,4 @@
-export {FunnelChartXAxisLabels} from './FunnelChartXAxisLabels';
+export {FunnelChartLabels} from './FunnelChartLabels';
 export {Tooltip} from './Tooltip';
 export {FunnelTooltip} from './FunnelTooltip';
 export {TooltipWithPortal} from './TooltipWithPortal';
diff --git a/packages/polaris-viz/src/components/FunnelChartNext/stories/Default.stories.tsx b/packages/polaris-viz/src/components/FunnelChartNext/stories/Default.stories.tsx
index 8696d7c5b..9920bd39d 100644
--- a/packages/polaris-viz/src/components/FunnelChartNext/stories/Default.stories.tsx
+++ b/packages/polaris-viz/src/components/FunnelChartNext/stories/Default.stories.tsx
@@ -16,9 +16,12 @@ const labelFormatter = (value) => {
   }).format(Number(value));
 };
 
+const percentageFormatter = (value) => `${labelFormatter(value)}%`;
+
 Default.args = {
   data: DEFAULT_DATA,
   labelFormatter,
+  percentageFormatter,
   tooltipLabels: {
     reached: 'Reached this step',
     dropped: 'Dropped off',
diff --git a/packages/polaris-viz/src/components/SparkFunnelChart/Chart.tsx b/packages/polaris-viz/src/components/SparkFunnelChart/Chart.tsx
index a99577bf0..c2cf883b1 100644
--- a/packages/polaris-viz/src/components/SparkFunnelChart/Chart.tsx
+++ b/packages/polaris-viz/src/components/SparkFunnelChart/Chart.tsx
@@ -1,6 +1,5 @@
 import {Fragment} from 'react';
 import {scaleBand, scaleLinear} from 'd3-scale';
-import type {DataSeries} from '@shopify/polaris-viz-core';
 import {useChartContext} from '@shopify/polaris-viz-core';
 
 import {useFunnelBarScaling} from '../../hooks';
@@ -9,17 +8,13 @@ import {FunnelChartConnector, FunnelChartSegment} from '../shared';
 import {ChartElements} from '../ChartElements';
 
 import type {SparkFunnelChartProps} from './SparkFunnelChart';
-
-export interface ChartProps {
-  data: DataSeries[];
-  tooltipLabels: SparkFunnelChartProps['tooltipLabels'];
-}
+import styles from './SparkFunnelChart.scss';
 
 const LINE_OFFSET = 1;
 const GAP = 1;
 const SEGMENT_WIDTH_RATIO = 0.75;
 
-export function Chart({data}: ChartProps) {
+export function Chart({data, accessibilityLabel}: SparkFunnelChartProps) {
   const {containerBounds} = useChartContext();
 
   const dataSeries = data[0].data;
@@ -52,48 +47,54 @@ export function Chart({data}: ChartProps) {
   const barWidth = sectionWidth * SEGMENT_WIDTH_RATIO;
 
   return (
-    <ChartElements.Svg height={drawableHeight} width={drawableWidth}>
-      <FunnelChartConnectorGradient />
-
-      {dataSeries.map((dataPoint, index: number) => {
-        const nextPoint = dataSeries[index + 1];
-        const xPosition = xScale(dataPoint.key as string);
-        const x = xPosition == null ? 0 : xPosition;
-        const nextBarHeight = getBarHeight(nextPoint?.value || 0);
-
-        const barHeight = getBarHeight(dataPoint.value || 0);
-        const isLast = index === dataSeries.length - 1;
-
-        return (
-          <Fragment key={dataPoint.key}>
-            <g key={dataPoint.key} role="listitem">
-              <FunnelChartSegment
-                ariaLabel={`${dataPoint.key}: ${dataPoint.value}`}
-                barHeight={barHeight}
-                barWidth={barWidth}
-                index={index}
-                isLast={isLast}
-                x={x}
-                shouldApplyScaling={shouldApplyScaling}
-              >
-                {!isLast && (
-                  <FunnelChartConnector
-                    drawableHeight={drawableHeight}
-                    height={drawableHeight}
-                    index={index}
-                    nextX={
-                      (xScale(nextPoint?.key as string) ?? 0) - LINE_OFFSET
-                    }
-                    nextY={drawableHeight - nextBarHeight}
-                    startX={x + barWidth + GAP}
-                    startY={drawableHeight - barHeight}
-                  />
-                )}
-              </FunnelChartSegment>
-            </g>
-          </Fragment>
-        );
-      })}
-    </ChartElements.Svg>
+    <Fragment>
+      {accessibilityLabel ? (
+        <span className={styles.VisuallyHidden}>{accessibilityLabel}</span>
+      ) : null}
+
+      <ChartElements.Svg height={drawableHeight} width={drawableWidth}>
+        <FunnelChartConnectorGradient />
+
+        {dataSeries.map((dataPoint, index: number) => {
+          const nextPoint = dataSeries[index + 1];
+          const xPosition = xScale(dataPoint.key as string);
+          const x = xPosition == null ? 0 : xPosition;
+          const nextBarHeight = getBarHeight(nextPoint?.value || 0);
+
+          const barHeight = getBarHeight(dataPoint.value || 0);
+          const isLast = index === dataSeries.length - 1;
+
+          return (
+            <Fragment key={dataPoint.key}>
+              <g key={dataPoint.key} role="listitem">
+                <FunnelChartSegment
+                  ariaLabel={`${dataPoint.key}: ${dataPoint.value}`}
+                  barHeight={barHeight}
+                  barWidth={barWidth}
+                  index={index}
+                  isLast={isLast}
+                  x={x}
+                  shouldApplyScaling={shouldApplyScaling}
+                >
+                  {!isLast && (
+                    <FunnelChartConnector
+                      drawableHeight={drawableHeight}
+                      height={drawableHeight}
+                      index={index}
+                      nextX={
+                        (xScale(nextPoint?.key as string) ?? 0) - LINE_OFFSET
+                      }
+                      nextY={drawableHeight - nextBarHeight}
+                      startX={x + barWidth + GAP}
+                      startY={drawableHeight - barHeight}
+                    />
+                  )}
+                </FunnelChartSegment>
+              </g>
+            </Fragment>
+          );
+        })}
+      </ChartElements.Svg>
+    </Fragment>
   );
 }
diff --git a/packages/polaris-viz/src/components/SparkFunnelChart/SparkFunnelChart.scss b/packages/polaris-viz/src/components/SparkFunnelChart/SparkFunnelChart.scss
new file mode 100644
index 000000000..e70bee3c2
--- /dev/null
+++ b/packages/polaris-viz/src/components/SparkFunnelChart/SparkFunnelChart.scss
@@ -0,0 +1,5 @@
+@import '../../styles/common';
+
+.VisuallyHidden {
+  @include visually-hidden;
+}
diff --git a/packages/polaris-viz/src/components/SparkFunnelChart/SparkFunnelChart.tsx b/packages/polaris-viz/src/components/SparkFunnelChart/SparkFunnelChart.tsx
index 7f48b57b2..48d4311d8 100644
--- a/packages/polaris-viz/src/components/SparkFunnelChart/SparkFunnelChart.tsx
+++ b/packages/polaris-viz/src/components/SparkFunnelChart/SparkFunnelChart.tsx
@@ -11,10 +11,7 @@ import {ChartSkeleton} from '../';
 import {Chart} from './Chart';
 
 export type SparkFunnelChartProps = {
-  tooltipLabels: {
-    reached: string;
-    dropped: string;
-  };
+  accessibilityLabel?: string;
 } & ChartProps;
 
 export function SparkFunnelChart(props: SparkFunnelChartProps) {
@@ -22,13 +19,13 @@ export function SparkFunnelChart(props: SparkFunnelChartProps) {
 
   const {
     data,
+    accessibilityLabel,
     theme = defaultTheme,
     id,
     isAnimated,
     state,
     errorText,
     onError,
-    tooltipLabels,
   } = {
     ...DEFAULT_CHART_PROPS,
     ...props,
@@ -51,7 +48,7 @@ export function SparkFunnelChart(props: SparkFunnelChartProps) {
           theme={theme}
         />
       ) : (
-        <Chart data={data} tooltipLabels={tooltipLabels} />
+        <Chart data={data} accessibilityLabel={accessibilityLabel} />
       )}
     </ChartContainer>
   );