From eef560ab9c74d75a1a43ddadcc9b69c345fde883 Mon Sep 17 00:00:00 2001
From: Matt Vickers <matthew.vickers@shopify.com>
Date: Tue, 15 Oct 2024 14:32:48 -0500
Subject: [PATCH] Export SparkFunnelChart

---
 .../components/Tooltip/Tooltip.tsx            |  2 +-
 .../stories/Playground.stories.tsx            | 53 +++++++++++++++++++
 packages/polaris-viz/src/components/index.ts  |  2 +
 packages/polaris-viz/src/index.ts             |  2 +
 4 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 packages/polaris-viz/src/components/FunnelChartNext/stories/Playground.stories.tsx

diff --git a/packages/polaris-viz/src/components/FunnelChartNext/components/Tooltip/Tooltip.tsx b/packages/polaris-viz/src/components/FunnelChartNext/components/Tooltip/Tooltip.tsx
index dad7cb362..5b1ff7ea8 100644
--- a/packages/polaris-viz/src/components/FunnelChartNext/components/Tooltip/Tooltip.tsx
+++ b/packages/polaris-viz/src/components/FunnelChartNext/components/Tooltip/Tooltip.tsx
@@ -93,6 +93,6 @@ export function Tooltip({
   );
 
   function formatPercentage(value: number) {
-    return `${yAxisOptions.labelFormatter(value)}%`;
+    return `${yAxisOptions.labelFormatter(isNaN(value) ? 0 : value)}%`;
   }
 }
diff --git a/packages/polaris-viz/src/components/FunnelChartNext/stories/Playground.stories.tsx b/packages/polaris-viz/src/components/FunnelChartNext/stories/Playground.stories.tsx
new file mode 100644
index 000000000..cfd5d5096
--- /dev/null
+++ b/packages/polaris-viz/src/components/FunnelChartNext/stories/Playground.stories.tsx
@@ -0,0 +1,53 @@
+import type {Story} from '@storybook/react';
+
+import type {FunnelChartNextProps} from '../../FunnelChartNext';
+
+export default {
+  ...META,
+  title: `${META.title}/Playground`,
+};
+
+import {Template} from './data';
+import {META} from './meta';
+
+export const ZeroValues: Story<FunnelChartNextProps> = Template.bind({});
+
+const yAxisOptions = {
+  labelFormatter: (value) => {
+    return new Intl.NumberFormat('en', {
+      style: 'decimal',
+      maximumFractionDigits: 2,
+    }).format(Number(value));
+  },
+};
+
+ZeroValues.args = {
+  data: [
+    {
+      data: [
+        {
+          value: 0,
+          key: 'Sessions',
+        },
+        {
+          value: 0,
+          key: 'Sessions with cart addition',
+        },
+        {
+          value: 0,
+          key: 'Sessions that reached checkout',
+        },
+        {
+          value: 0,
+          key: 'Sessions that completed checkout',
+        },
+      ],
+      name: 'Conversion rates',
+    },
+  ],
+  yAxisOptions: yAxisOptions,
+  tooltipLabels: {
+    reached: 'Reached this step',
+    dropped: 'Dropped off',
+  },
+};
diff --git a/packages/polaris-viz/src/components/index.ts b/packages/polaris-viz/src/components/index.ts
index 6a39809fe..61f14eec3 100644
--- a/packages/polaris-viz/src/components/index.ts
+++ b/packages/polaris-viz/src/components/index.ts
@@ -57,3 +57,5 @@ export type {LineChartPredictiveProps} from './LineChartPredictive';
 export type {ComparisonMetricProps} from './ComparisonMetric';
 export {FunnelChartNext} from './FunnelChartNext';
 export type {FunnelChartNextProps} from './FunnelChartNext';
+export {SparkFunnelChart} from './SparkFunnelChart';
+export type {SparkFunnelChartProps} from './SparkFunnelChart';
diff --git a/packages/polaris-viz/src/index.ts b/packages/polaris-viz/src/index.ts
index 8ab3232db..e570bfbe0 100644
--- a/packages/polaris-viz/src/index.ts
+++ b/packages/polaris-viz/src/index.ts
@@ -20,6 +20,7 @@ export {
   LineChartPredictive,
   MissingDataArea,
   FunnelChartNext,
+  SparkFunnelChart,
 } from './components';
 
 export type {
@@ -37,6 +38,7 @@ export type {
   ComparisonMetricProps,
   LineChartRelationalProps,
   FunnelChartNextProps,
+  SparkFunnelChartProps,
 } from './components';
 
 export {