Merge pull request #1661 from Shopify/envex/remove-negative-gradient

Removed different gradient origins

packages/polaris-viz-core/src/components/LineSeries/components/DefaultArea/DefaultArea.tsx

@@ -6,33 +6,24 @@ 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 | null> | 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,
   } = usePolarisVizContext();
 
   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},
+          ]}
         />
       </Defs>
 

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
+
+### 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
 

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';
 
 <Meta
   title="Shared/Formatting Values"