diff --git a/packages/polaris-viz-core/src/components/LineSeries/components/DefaultArea/DefaultArea.tsx b/packages/polaris-viz-core/src/components/LineSeries/components/DefaultArea/DefaultArea.tsx index 1192aa6b0..4867455aa 100644 --- a/packages/polaris-viz-core/src/components/LineSeries/components/DefaultArea/DefaultArea.tsx +++ b/packages/polaris-viz-core/src/components/LineSeries/components/DefaultArea/DefaultArea.tsx @@ -6,18 +6,16 @@ import {uniqueId} from '../../../../utilities'; import {LinearGradientWithStops} from '../../../../components'; import {usePolarisVizContext} from '../../../../hooks'; -import {getGradientDetails} from './utilities/getGradientDetails'; +const GRADIENT_ALPHA = 0.25; export interface Props { series: LineChartDataSeriesWithDefaults; areaPath: SpringValue | string; } -export function DefaultArea({series, areaPath}: Props) { +export function DefaultArea({series: {areaColor}, areaPath}: Props) { const gradientId = useMemo(() => uniqueId('default-area-gradient'), []); const maskId = useMemo(() => uniqueId('default-area-mask'), []); - const {data, areaColor} = series; - const { components: {Path, Defs, Mask}, animated, @@ -25,14 +23,7 @@ export function DefaultArea({series, areaPath}: Props) { const AnimatedPath = animated(Path); - const gradientStops = useMemo(() => { - return getGradientDetails(data).map((gradientStop) => ({ - ...gradientStop, - color: areaColor as string, - })); - }, [areaColor, data]); - - if (areaPath == null || areaColor == null || gradientStops == null) { + if (areaPath == null || areaColor == null) { return null; } @@ -73,7 +64,10 @@ export function DefaultArea({series, areaPath}: Props) { x2="0%" y1="0%" y2="100%" - gradient={gradientStops} + gradient={[ + {offset: 0, stopOpacity: GRADIENT_ALPHA, color: areaColor}, + {offset: 100, stopOpacity: 0, color: areaColor}, + ]} /> diff --git a/packages/polaris-viz-core/src/components/LineSeries/components/DefaultArea/utilities/getGradientDetails.ts b/packages/polaris-viz-core/src/components/LineSeries/components/DefaultArea/utilities/getGradientDetails.ts deleted file mode 100644 index 928e2c5e6..000000000 --- a/packages/polaris-viz-core/src/components/LineSeries/components/DefaultArea/utilities/getGradientDetails.ts +++ /dev/null @@ -1,34 +0,0 @@ -import type {DataPoint} from '../../../../../types'; - -const HIGHEST_ALPHA = 0.25; - -export function getGradientDetails(data: DataPoint[]) { - const values = data.map(({value}) => value).filter(Boolean) as number[]; - - const max = Math.max(...values, 0); - const min = Math.min(...values, 0); - const allNegatives = max <= 0 && min <= 0; - const allPositives = min === 0 && max >= 0; - - if (allPositives) { - return [ - {offset: 0, stopOpacity: HIGHEST_ALPHA}, - {offset: 100, stopOpacity: 0}, - ]; - } else if (allNegatives) { - return [ - {offset: 0, stopOpacity: 0}, - {offset: 100, stopOpacity: HIGHEST_ALPHA}, - ]; - } else { - const range = max - min; - const negativeStartPercent = ((0 - min) * 100) / range; - const zeroPercentLine = 100 - negativeStartPercent; - - return [ - {offset: 0, stopOpacity: HIGHEST_ALPHA}, - {offset: zeroPercentLine, stopOpacity: 0}, - {offset: 100, stopOpacity: HIGHEST_ALPHA}, - ]; - } -} diff --git a/packages/polaris-viz-core/src/components/LineSeries/components/DefaultArea/utilities/tests/getGradientDetails.test.ts b/packages/polaris-viz-core/src/components/LineSeries/components/DefaultArea/utilities/tests/getGradientDetails.test.ts deleted file mode 100644 index cf1eb55c4..000000000 --- a/packages/polaris-viz-core/src/components/LineSeries/components/DefaultArea/utilities/tests/getGradientDetails.test.ts +++ /dev/null @@ -1,64 +0,0 @@ -import {getGradientDetails} from '../getGradientDetails'; - -describe('getGradientDetails', () => { - it('returns two stop details for all positive numbers', () => { - const actual = getGradientDetails([ - {key: '1', value: 1}, - {key: '2', value: 2}, - {key: '3', value: 3}, - {key: '4', value: 4}, - {key: '5', value: 5}, - {key: '6', value: 6}, - {key: '7', value: 7}, - {key: '8', value: 8}, - {key: '9', value: 9}, - {key: '10', value: 10}, - ]); - - expect(actual).toStrictEqual([ - {stopOpacity: 0.25, offset: 0}, - {stopOpacity: 0, offset: 100}, - ]); - }); - - it('returns two stop details for all negative numbers', () => { - const actual = getGradientDetails([ - {key: '1', value: -1}, - {key: '2', value: -2}, - {key: '3', value: -3}, - {key: '4', value: -4}, - {key: '5', value: -5}, - {key: '6', value: -6}, - {key: '7', value: -7}, - {key: '8', value: -8}, - {key: '9', value: -9}, - {key: '10', value: -10}, - ]); - - expect(actual).toStrictEqual([ - {stopOpacity: 0, offset: 0}, - {stopOpacity: 0.25, offset: 100}, - ]); - }); - - it('returns three stop details for mixed numbers', () => { - const actual = getGradientDetails([ - {key: '1', value: -1}, - {key: '2', value: -2}, - {key: '3', value: -3}, - {key: '4', value: -4}, - {key: '5', value: -5}, - {key: '6', value: 6}, - {key: '7', value: 7}, - {key: '8', value: 8}, - {key: '9', value: 9}, - {key: '10', value: 10}, - ]); - - expect(actual).toStrictEqual([ - {stopOpacity: 0.25, offset: 0}, - {stopOpacity: 0, offset: 66.66666666666666}, - {stopOpacity: 0.25, offset: 100}, - ]); - }); -}); diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md index 45eb3d6ea..a617738c0 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 + +### Removed + +- Removed different gradient origins when data set is all positive, all negative or mixed. Origin is now always from the line down. ## [13.0.1] - 2024-04-16 diff --git a/packages/polaris-viz/src/components/Docs/stories/FormattingValues.stories.mdx b/packages/polaris-viz/src/components/Docs/stories/FormattingValues.stories.mdx index e7aee8ac1..a80065d9a 100644 --- a/packages/polaris-viz/src/components/Docs/stories/FormattingValues.stories.mdx +++ b/packages/polaris-viz/src/components/Docs/stories/FormattingValues.stories.mdx @@ -7,7 +7,7 @@ import { Divider, } from './components'; import {LineChart} from '../../LineChart'; -import {DEFAULT_THEME, DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core'; +import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';