Merge pull request #1794 from Shopify/envex/all-negative-labels

Move 0 value labels to left when all value are negative

Author: envex

packages/polaris-viz/CHANGELOG.md

@@ -10,6 +10,7 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 ### Fixed
 
 - Fixed issue in `<SimpleBarChart />` where the trend indicator was not being positioned correctly when the value was `null`.
+- Fixed issue in `<SimpleBarChart />` where labels are not positioned correctly when all values were negative and `0`.
 
 ## [15.8.0] - 2025-01-16
 

packages/polaris-viz/src/components/SimpleBarChart/stories/playground/AllNegative.stories.tsx

@@ -0,0 +1,71 @@
+import type {Story} from '@storybook/react';
+
+import {SimpleBarChart, SimpleBarChartProps} from '../../../../components';
+import {META} from '../meta';
+import type {SimpleBarChartDataSeries} from '../../types';
+import {
+  DEFAULT_THEME_NAME,
+  PolarisVizProvider,
+} from '@shopify/polaris-viz-core';
+
+export default {
+  ...META,
+  title: `${META.title}/Playground`,
+};
+
+const DATA: SimpleBarChartDataSeries[] = [
+  {
+    name: '',
+    data: [
+      {key: 'One', value: 0},
+      {key: 'Two', value: 0},
+      {key: 'Three', value: -22.1},
+      {key: 'Four', value: 0},
+      {key: 'Five', value: -17.5},
+    ],
+    metadata: {
+      trends: {
+        '0': {},
+      },
+    },
+  },
+  {
+    name: '',
+    data: [
+      {key: 'One', value: 0},
+      {key: 'Two', value: 0},
+      {key: 'Three', value: 0},
+      {key: 'Four', value: 0},
+      {key: 'Five', value: 0},
+    ],
+  },
+];
+
+const Template: Story<SimpleBarChartProps> = () => {
+  const svgStyle = `
+    svg {
+      background: rgba(0, 255, 0, 0.1);
+    }
+  `;
+
+  return (
+    <div style={{height: 600, width: 800}}>
+      <style>{svgStyle}</style>
+      <PolarisVizProvider
+        animated={{} as any}
+        themes={{
+          [DEFAULT_THEME_NAME]: {
+            chartContainer: {
+              backgroundColor: 'rgba(255, 0, 0, 0.1)',
+              padding: '20px',
+            },
+          },
+        }}
+      >
+        <SimpleBarChart data={DATA} showLegend={false} />
+      </PolarisVizProvider>
+    </div>
+  );
+};
+
+export const AllNegative = Template.bind({});

packages/polaris-viz/src/components/shared/HorizontalBars/HorizontalBars.tsx

@@ -126,7 +126,7 @@ export function HorizontalBars({
             min: 1,
           });
 
-          if (isNegative) {
+          if (areAllNegative || isNegative) {
             return {
               labelX: -(clampedWidth + leftLabelOffset),
               barWidth: clampedWidth,