diff --git a/.github/workflows/chromatic-main.yml b/.github/workflows/chromatic-main.yml index 464ef073c..835e0b987 100644 --- 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 index b3659821f..5803a78a2 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 + +### Fixed + +- Fixed issue where `` 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 000000000..274721c6f --- /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 = () => { + const [data, setData] = useState(DATA); + + return ( + <> + +
+ +
+ + ); +}; + +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 1ede84486..848f94bb6 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: {