Charts: Add gradient fill for line chart (#41143)

* added area fill for line chart

* add sample site traffic data

* fix sample data

* move y axis to right for the story

* add more ticks to story

* changelog

* draw lower lines later

* there should not be decimals for traffic data

* fix lock file

* add withGradientFill to args to show toggle in stories

projects/js-packages/charts/changelog/add-support-gradient-line-chart

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add gradient fill for line chart

projects/js-packages/charts/package.json

@@ -49,6 +49,7 @@
 		"@react-spring/web": "9.7.3",
 		"@visx/axis": "^3.12.0",
 		"@visx/event": "^3.8.0",
+		"@visx/gradient": "3.12.0",
 		"@visx/grid": "^3.12.0",
 		"@visx/group": "^3.12.0",
 		"@visx/legend": "^3.12.0",

projects/js-packages/charts/src/components/line-chart/line-chart.tsx

@@ -1,6 +1,8 @@
+import { LinearGradient } from '@visx/gradient';
 import {
 	XYChart,
 	AnimatedLineSeries,
+	AnimatedAreaSeries,
 	AnimatedAxis,
 	AnimatedGrid,
 	Tooltip,
@@ -14,10 +16,9 @@ import { withResponsive } from '../shared/with-responsive';
 import styles from './line-chart.module.scss';
 import type { BaseChartProps, DataPointDate, SeriesData } from '../../types';
 
-// TODO: revisit grid and axis options - accept as props for frid lines, axis, values: x, y, all, none
-
 interface LineChartProps extends BaseChartProps< SeriesData[] > {
 	margin?: { top: number; right: number; bottom: number; left: number };
+	withGradientFill: boolean;
 }
 
 type TooltipData = {
@@ -83,6 +84,7 @@ const LineChart: FC< LineChartProps > = ( {
 	withTooltips = true,
 	showLegend = false,
 	legendOrientation = 'horizontal',
+	withGradientFill = false,
 	options = {},
 } ) => {
 	const providerTheme = useChartTheme();
@@ -133,16 +135,43 @@ const LineChart: FC< LineChartProps > = ( {
 				/>
 				<AnimatedAxis orientation="left" numTicks={ 4 } { ...options?.axis?.y } />
 
-				{ data.map( ( seriesData, index ) => (
-					<AnimatedLineSeries
-						key={ seriesData?.label }
-						dataKey={ seriesData?.label }
-						data={ seriesData.data as DataPointDate[] } // TODO: this needs fixing or a more specific type for each chart
-						{ ...accessors }
-						stroke={ theme.colors[ index % theme.colors.length ] }
-						strokeWidth={ 2 }
-					/>
-				) ) }
+				{ data.map( ( seriesData, index ) => {
+					const stroke = seriesData.options?.stroke ?? theme.colors[ index % theme.colors.length ];
+
+					return (
+						<>
+							<LinearGradient
+								id={ `area-gradient-${ index + 1 }` }
+								from={ stroke }
+								to="white"
+								toOpacity={ 0.1 }
+								{ ...seriesData.options?.gradient }
+							/>
+							<AnimatedLineSeries
+								key={ seriesData?.label }
+								dataKey={ seriesData?.label }
+								data={ seriesData.data as DataPointDate[] } // TODO: this needs fixing or a more specific type for each chart
+								{ ...accessors }
+								stroke={ stroke }
+								strokeWidth={ 2 }
+							/>
+							{ /** Theoretically the area series should work without the line series; however it outlines the area with borders, which isn't ideal. */ }
+							{ /** TODO: Investigate whehter we could leverage area series alone. */ }
+							{ withGradientFill && (
+								<AnimatedAreaSeries
+									key={ seriesData?.label }
+									dataKey={ seriesData?.label }
+									data={ seriesData.data as DataPointDate[] } // TODO: this needs fixing or a more specific type for each chart
+									{ ...accessors }
+									stroke={ stroke }
+									strokeWidth={ 0 }
+									fill={ `url(#area-gradient-${ index + 1 })` }
+									renderLine={ false }
+								/>
+							) }
+						</>
+					);
+				} ) }
 
 				{ withTooltips && (
 					<Tooltip

projects/js-packages/charts/src/components/line-chart/stories/index.stories.tsx

@@ -1,5 +1,6 @@
 import LineChart from '../line-chart';
 import sampleData from './sample-data';
+import webTrafficData from './site-traffic-sample';
 import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 
 const meta: Meta< typeof LineChart > = {
@@ -37,6 +38,7 @@ Default.args = {
 	data: sampleData,
 	showLegend: false,
 	legendOrientation: 'horizontal',
+	withGradientFill: false,
 	options: {
 		axis: {
 			x: {
@@ -93,10 +95,22 @@ FixedDimensions.args = {
 	data: sampleData,
 	withTooltips: true,
 };
+
 FixedDimensions.parameters = {
 	docs: {
 		description: {
 			story: 'Line chart with fixed dimensions that override the responsive behavior.',
 		},
 	},
 };
+
+// Story with gradient filled line chart
+export const GridientFilled: StoryObj< typeof LineChart > = Template.bind( {} );
+GridientFilled.args = {
+	...Default.args,
+	data: webTrafficData,
+	withGradientFill: true,
+	options: {
+		axis: { x: { numTicks: 10 }, y: { orientation: 'right' } },
+	},
+};