Add scaling toggle prop to funnel charts

Shopify · Dec 9, 2024 · b98270e · b98270e
1 parent b546085
commit b98270e
Show file tree

Hide file tree

Showing 11 changed files with 55 additions and 6 deletions.
diff --git a/packages/polaris-viz/src/components/FunnelChartNext/Chart.tsx b/packages/polaris-viz/src/components/FunnelChartNext/Chart.tsx
@@ -45,13 +45,15 @@ export interface ChartProps {
   tooltipLabels: FunnelChartNextProps['tooltipLabels'];
   xAxisOptions: Required<XAxisOptions>;
   yAxisOptions: Required<YAxisOptions>;
+  enableScaling: boolean;
 }
 
 export function Chart({
   data,
   tooltipLabels,
   xAxisOptions,
   yAxisOptions,
+  enableScaling,
 }: ChartProps) {
   const [tooltipIndex, setTooltipIndex] = useState<number | null>(null);
   const {containerBounds} = useChartContext();
@@ -80,6 +82,7 @@ export function Chart({
   const {getBarHeight, shouldApplyScaling} = useFunnelBarScaling({
     yScale,
     values: yValues,
+    enableScaling,
   });
 
   const labels = useMemo(

diff --git a/packages/polaris-viz/src/components/FunnelChartNext/FunnelChartNext.tsx b/packages/polaris-viz/src/components/FunnelChartNext/FunnelChartNext.tsx
@@ -25,6 +25,7 @@ export type FunnelChartNextProps = {
   };
   xAxisOptions?: Pick<XAxisOptions, 'hide'>;
   yAxisOptions?: Pick<YAxisOptions, 'labelFormatter'>;
+  enableScaling?: boolean;
 } & ChartProps;
 
 export function FunnelChartNext(props: FunnelChartNextProps) {
@@ -35,6 +36,7 @@ export function FunnelChartNext(props: FunnelChartNextProps) {
     theme = defaultTheme,
     xAxisOptions,
     yAxisOptions,
+    enableScaling = true,
     id,
     isAnimated,
     state,
@@ -73,6 +75,7 @@ export function FunnelChartNext(props: FunnelChartNextProps) {
           tooltipLabels={tooltipLabels}
           xAxisOptions={xAxisOptionsForChart}
           yAxisOptions={yAxisOptionsForChart}
+          enableScaling={enableScaling}
         />
       )}
     </ChartContainer>

diff --git a/packages/polaris-viz/src/components/FunnelChartNext/stories/Default.stories.tsx b/packages/polaris-viz/src/components/FunnelChartNext/stories/Default.stories.tsx
@@ -24,4 +24,5 @@ Default.args = {
     reached: 'Reached this step',
     dropped: 'Dropped off',
   },
+  enableScaling: true,
 };
diff --git a/packages/polaris-viz/src/components/FunnelChartNext/stories/meta.ts b/packages/polaris-viz/src/components/FunnelChartNext/stories/meta.ts
@@ -3,6 +3,7 @@ import type {Meta} from '@storybook/react';
 import {
   CHART_STATE_CONTROL_ARGS,
   CONTROLS_ARGS,
+  SCALE_CONTROL_ARGS,
   THEME_CONTROL_ARGS,
   X_AXIS_OPTIONS_ARGS,
   Y_AXIS_OPTIONS_ARGS,
@@ -27,5 +28,6 @@ export const META: Meta = {
     yAxisOptions: Y_AXIS_OPTIONS_ARGS,
     theme: THEME_CONTROL_ARGS,
     state: CHART_STATE_CONTROL_ARGS,
+    enableScaling: SCALE_CONTROL_ARGS,
   },
 };
diff --git a/packages/polaris-viz/src/components/SparkFunnelChart/Chart.tsx b/packages/polaris-viz/src/components/SparkFunnelChart/Chart.tsx
@@ -1,4 +1,4 @@
-import {Fragment, useCallback} from 'react';
+import {Fragment} from 'react';
 import {scaleBand, scaleLinear} from 'd3-scale';
 import type {
   DataSeries,
@@ -8,7 +8,6 @@ import type {
 import {useChartContext} from '@shopify/polaris-viz-core';
 
 import {useFunnelBarScaling} from '../../hooks';
-import {getFunnelBarHeight} from '../FunnelChartNext';
 import {FunnelChartConnectorGradient} from '../shared/FunnelChartConnector';
 import {FunnelChartConnector, FunnelChartSegment} from '../shared';
 import {ChartElements} from '../ChartElements';
@@ -20,12 +19,13 @@ export interface ChartProps {
   tooltipLabels: SparkFunnelChartProps['tooltipLabels'];
   xAxisOptions: Required<XAxisOptions>;
   yAxisOptions: Required<YAxisOptions>;
+  enableScaling: boolean;
 }
 
 const LINE_OFFSET = 1;
 const GAP = 1;
 
-export function Chart({data}: ChartProps) {
+export function Chart({data, enableScaling}: ChartProps) {
   const {containerBounds} = useChartContext();
 
   const dataSeries = data[0].data;
@@ -46,6 +46,7 @@ export function Chart({data}: ChartProps) {
   const {getBarHeight, shouldApplyScaling} = useFunnelBarScaling({
     yScale,
     values: yValues,
+    enableScaling,
   });
 
   const sectionWidth = xScale.bandwidth();

diff --git a/packages/polaris-viz/src/components/SparkFunnelChart/SparkFunnelChart.tsx b/packages/polaris-viz/src/components/SparkFunnelChart/SparkFunnelChart.tsx
@@ -25,6 +25,7 @@ export type SparkFunnelChartProps = {
   };
   xAxisOptions?: Pick<XAxisOptions, 'hide'>;
   yAxisOptions?: Pick<YAxisOptions, 'labelFormatter'>;
+  enableScaling?: boolean;
 } & ChartProps;
 
 export function SparkFunnelChart(props: SparkFunnelChartProps) {
@@ -41,6 +42,7 @@ export function SparkFunnelChart(props: SparkFunnelChartProps) {
     errorText,
     onError,
     tooltipLabels,
+    enableScaling = true,
   } = {
     ...DEFAULT_CHART_PROPS,
     ...props,
@@ -74,6 +76,7 @@ export function SparkFunnelChart(props: SparkFunnelChartProps) {
           xAxisOptions={xAxisOptionsForChart}
           yAxisOptions={yAxisOptionsForChart}
           tooltipLabels={tooltipLabels}
+          enableScaling={enableScaling}
         />
       )}
     </ChartContainer>

diff --git a/packages/polaris-viz/src/components/SparkFunnelChart/stories/Default.stories.tsx b/packages/polaris-viz/src/components/SparkFunnelChart/stories/Default.stories.tsx
@@ -10,4 +10,5 @@ export const Default: Story<SparkFunnelChartProps> = Template.bind({});
 
 Default.args = {
   data: DEFAULT_DATA,
+  enableScaling: true,
 };
diff --git a/packages/polaris-viz/src/components/SparkFunnelChart/stories/meta.ts b/packages/polaris-viz/src/components/SparkFunnelChart/stories/meta.ts
@@ -3,6 +3,7 @@ import type {Meta} from '@storybook/react';
 import {
   CHART_STATE_CONTROL_ARGS,
   CONTROLS_ARGS,
+  SCALE_CONTROL_ARGS,
 } from '../../../storybook/constants';
 import {PageWithSizingInfo} from '../../Docs/stories';
 import {SparkFunnelChart} from '../SparkFunnelChart';
@@ -21,5 +22,6 @@ export const META: Meta = {
   },
   argTypes: {
     state: CHART_STATE_CONTROL_ARGS,
+    enableScaling: SCALE_CONTROL_ARGS,
   },
 };
diff --git a/packages/polaris-viz/src/hooks/tests/useFunnelBarScaling.test.tsx b/packages/polaris-viz/src/hooks/tests/useFunnelBarScaling.test.tsx
@@ -21,6 +21,7 @@ describe('useFunnelBarScaling', () => {
       const data = useFunnelBarScaling({
         yScale: mockYScale,
         values: [90, 100],
+        enableScaling: true,
       });
 
       return <span data-data={`${JSON.stringify(data)}`} />;
@@ -37,6 +38,7 @@ describe('useFunnelBarScaling', () => {
       const data = useFunnelBarScaling({
         yScale: mockYScale,
         values: [5, 100],
+        enableScaling: true,
       });
 
       return <span data-data={`${JSON.stringify(data)}`} />;
@@ -49,11 +51,12 @@ describe('useFunnelBarScaling', () => {
   });
 
   describe('getBarHeight', () => {
-    it('returns original height when scaling not needed', () => {
+    it('returns original bar height when ratio is above scaling threshold', () => {
       function TestComponent() {
         const data = useFunnelBarScaling({
           yScale: mockYScale,
           values: [90, 100],
+          enableScaling: true,
         });
 
         const height = data.getBarHeight(90);
@@ -66,11 +69,30 @@ describe('useFunnelBarScaling', () => {
       expect(data.height).toBe(mockYScale(90));
     });
 
+    it('returns original height when scaling not enabled', () => {
+      function TestComponent() {
+        const data = useFunnelBarScaling({
+          yScale: mockYScale,
+          values: [5, 100],
+          enableScaling: false,
+        });
+
+        const height = data.getBarHeight(5);
+        return <span data-data={`${JSON.stringify({height})}`} />;
+      }
+
+      const result = mount(<TestComponent />);
+      const data = parseData(result);
+
+      expect(data.height).toBe(mockYScale(5));
+    });
+
     it('returns scaled height when scaling needed', () => {
       function TestComponent() {
         const data = useFunnelBarScaling({
           yScale: mockYScale,
           values: [5, 100],
+          enableScaling: true,
         });
 
         const scaledHeight = data.getBarHeight(5);
@@ -103,6 +125,7 @@ describe('useFunnelBarScaling', () => {
         const data = useFunnelBarScaling({
           yScale: mockYScale,
           values: [5, 100],
+          enableScaling: true,
         });
 
         const height = data.getBarHeight(100);

diff --git a/packages/polaris-viz/src/hooks/useFunnelBarScaling.ts b/packages/polaris-viz/src/hooks/useFunnelBarScaling.ts
@@ -10,11 +10,13 @@ export const MINIMUM_SEGMENT_HEIGHT_RATIO = 0.25;
 interface UseFunnelBarScalingProps {
   yScale: ScaleLinear<number, number>;
   values: number[];
+  enableScaling: boolean;
 }
 
 export function useFunnelBarScaling({
   yScale,
   values,
+  enableScaling,
 }: UseFunnelBarScalingProps) {
   const tallestBarHeight = useMemo(
     () => yScale(Math.max(...values)),
@@ -31,8 +33,8 @@ export function useFunnelBarScaling({
   );
 
   const shouldApplyScaling = useMemo(
-    () => smallestToTallestBarRatio <= SCALING_RATIO_THRESHOLD,
-    [smallestToTallestBarRatio],
+    () => smallestToTallestBarRatio <= SCALING_RATIO_THRESHOLD && enableScaling,
+    [smallestToTallestBarRatio, enableScaling],
   );
 
   const getBarHeight = useCallback(

diff --git a/packages/polaris-viz/src/storybook/constants.ts b/packages/polaris-viz/src/storybook/constants.ts
@@ -138,6 +138,14 @@ export const MAX_SERIES_ARGS = {
   },
 };
 
+export const SCALE_CONTROL_ARGS = {
+  description:
+    'When enabled, small segments will be scaled up to be more visible relative to the largest segment while maintaining proportions.',
+  control: {
+    type: 'boolean',
+  },
+};
+
 export const DEFAULT_CHART_CONTEXT: ChartContextValues = {
   shouldAnimate: false,
   characterWidths,