Merge pull request #1588 from Shopify/envex/zero-to-data

Fix issue with bar with when data changes from zero values
Shopify · Sep 25, 2023 · d830228 · d830228
2 parents 32106e0 + b7b2090
commit d830228
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 5 deletions.
diff --git a/.github/workflows/chromatic-main.yml b/.github/workflows/chromatic-main.yml
@@ -3,7 +3,7 @@ on: push
 jobs:
   chromatic:
     runs-on: ubuntu-latest
-    if: ${{ github.actor != 'dependabot[bot]' }}
+    if: github.ref == 'refs/heads/main'
     continue-on-error: true
     steps:
       - name: Checkout 🛎️
@@ -19,7 +19,6 @@ jobs:
       - name: Install and Build 🔧
         run: yarn
       - name: Publish to Chromatic and auto accept changes
-        if: github.ref == 'refs/heads/main'
         uses: chromaui/action@v1
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md
@@ -5,7 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
-<!-- ## Unreleased -->
+## Unreleased
+
+### Fixed
+
+- Fixed issue where `<BarChart />` bar width would be 1px when data changes from all 0 values to data with non-zero values.
 
 ## [9.12.0] - 2023-09-19
 

diff --git a/packages/polaris-viz/src/components/BarChart/stories/playground/ZeroDataChange.stories.tsx b/packages/polaris-viz/src/components/BarChart/stories/playground/ZeroDataChange.stories.tsx
@@ -0,0 +1,106 @@
+import type {Story} from '@storybook/react';
+
+import {BarChart, BarChartProps} from '../../../../components';
+import {META} from '../meta';
+import {useState} from 'react';
+
+export default {
+  ...META,
+  title: `${META.title}/Playground`,
+};
+
+const DATA = [
+  {
+    data: [
+      {
+        value: 4,
+        key: '0',
+      },
+      {
+        value: 3,
+        key: '1',
+      },
+      {
+        value: 0,
+        key: '2',
+      },
+      {
+        value: 0,
+        key: '3',
+      },
+      {
+        value: 0,
+        key: '4',
+      },
+      {
+        value: 1,
+        key: '5',
+      },
+      {
+        value: 0,
+        key: '6',
+      },
+      {
+        value: 4,
+        key: '7',
+      },
+      {
+        value: 3,
+        key: '8',
+      },
+      {
+        value: 4,
+        key: '9',
+      },
+      {
+        value: 8,
+        key: '10',
+      },
+      {
+        value: 8,
+        key: '11',
+      },
+      {
+        value: 5,
+        key: '12',
+      },
+      {
+        value: 7,
+        key: '13',
+      },
+      {
+        value: 5,
+        key: '14',
+      },
+    ],
+    name: 'First-time',
+  },
+];
+
+const ZERO_DATA = [
+  {...DATA[0], data: DATA[0].data.map((data) => ({...data, value: 0}))},
+];
+
+const Template: Story<BarChartProps> = () => {
+  const [data, setData] = useState(DATA);
+
+  return (
+    <>
+      <button
+        onClick={() => {
+          console.warn('SWAP');
+          setData((data) => {
+            return data === DATA ? ZERO_DATA : DATA;
+          });
+        }}
+      >
+        Flip
+      </button>
+      <div style={{width: 600, height: 400}}>
+        <BarChart data={data} />
+      </div>
+    </>
+  );
+};
+
+export const ZeroData = Template.bind({});
diff --git a/packages/polaris-viz/src/components/VerticalBarChart/components/VerticalBar/VerticalBar.tsx b/packages/polaris-viz/src/components/VerticalBarChart/components/VerticalBar/VerticalBar.tsx
@@ -40,7 +40,7 @@ export const VerticalBar = memo(function Bar({
 }: VerticalBarProps) {
   const selectedTheme = useTheme();
   const borderRadius = selectedTheme.bar.borderRadius;
-  const treatAsNegative = rawValue < 0 || rawValue === 0;
+  const treatAsNegative = rawValue < 0;
   const zeroValue = rawValue === 0;
 
   const yPosition = useMemo(() => {
@@ -67,7 +67,7 @@ export const VerticalBar = memo(function Bar({
   );
 
   const springConfig = useBarSpringConfig({animationDelay});
-  const rotate = `${treatAsNegative ? 'rotate(180)' : ''}`;
+  const rotate = `${treatAsNegative ? 'rotate(180)' : 'rotate(0)'}`;
 
   const {pathD, transform} = useSpring({
     from: {