Export SparkFunnelChart

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)}%`;
   }
 }

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',
+  },
+};

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';

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 {