From b8f1ae738dadbe9abf2ff5dbcba09f37805afeee Mon Sep 17 00:00:00 2001
From: Matt Vickers <matthew.vickers@shopify.com>
Date: Thu, 21 Sep 2023 13:21:07 -0500
Subject: [PATCH] Fix issue with bar with when data changes from zero values

---
 packages/polaris-viz/CHANGELOG.md             |   6 +-
 .../playground/ZeroDataChange.stories.tsx     | 106 ++++++++++++++++++
 .../components/VerticalBar/VerticalBar.tsx    |   4 +-
 3 files changed, 113 insertions(+), 3 deletions(-)
 create mode 100644 packages/polaris-viz/src/components/BarChart/stories/playground/ZeroDataChange.stories.tsx

diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md
index b3659821ff..5803a78a26 100644
--- 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
new file mode 100644
index 0000000000..274721c6fb
--- /dev/null
+++ 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
index 1ede844862..848f94bb6e 100644
--- 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: {