Merge branch 'trunk' into social/unified-connections-management

Automattic · Jan 17, 2025 · 13ac87f · 13ac87f
2 parents 1ce1b4c + ca7e9cd
commit 13ac87f
Show file tree

Hide file tree

Showing 75 changed files with 1,987 additions and 199 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/projects/github-actions/repo-gardening/changelog/update-repo-gardening-videopress-assigments b/projects/github-actions/repo-gardening/changelog/update-repo-gardening-videopress-assigments
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Team assignments: update VideoPress team assignment.
+
+
diff --git a/...ithub-actions/repo-gardening/src/tasks/triage-issues/automattic-label-team-assignments.js b/...ithub-actions/repo-gardening/src/tasks/triage-issues/automattic-label-team-assignments.js
@@ -205,7 +205,7 @@ export const automatticAssignments = {
 		board_id: 'https://github.com/orgs/Automattic/projects/908/views/1',
 	},
 	VideoPress: {
-		team: 'Agora',
+		team: 'Nexus',
 		labels: [ '[Package] VideoPress', '[Feature] VideoPress', '[Plugin] VideoPress' ],
 		slack_id: 'C02TQF5VAJD',
 		board_id: 'https://github.com/orgs/Automattic/projects/460',

diff --git a/projects/js-packages/charts/changelog/add-support-gradient-line-chart b/projects/js-packages/charts/changelog/add-support-gradient-line-chart
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add gradient fill for line chart
diff --git a/projects/js-packages/charts/changelog/add-x-y-axis-orientation b/projects/js-packages/charts/changelog/add-x-y-axis-orientation
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Added passing through options for X, Y axis
diff --git a/projects/js-packages/charts/changelog/update-chart-library-responsive-stories b/projects/js-packages/charts/changelog/update-chart-library-responsive-stories
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Charts: add responsive chart stories
diff --git a/projects/js-packages/charts/package.json b/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",

diff --git a/projects/js-packages/charts/src/components/bar-chart/stories/index.stories.tsx b/projects/js-packages/charts/src/components/bar-chart/stories/index.stories.tsx
@@ -16,9 +16,9 @@ const meta: Meta< typeof BarChart > = {
 					overflow: 'auto',
 					padding: '2rem',
 					width: '800px',
-					minWidth: '400px',
 					maxWidth: '1200px',
 					border: '1px dashed #ccc',
+					display: 'inline-block',
 				} }
 			>
 				<Story />
@@ -61,8 +61,6 @@ export const SingleSeries: Story = {
 export const ManyDataSeries: Story = {
 	args: {
 		...Default.args,
-		width: 1200,
-		height: 700,
 		data,
 	},
 	parameters: {
@@ -92,3 +90,19 @@ export const WithVerticalLegend = {
 		legendOrientation: 'vertical',
 	},
 };
+
+export const FixedDimensions: Story = {
+	args: {
+		...Default.args,
+		width: 800,
+		height: 400,
+		data: [ data[ 0 ], data[ 1 ], data[ 2 ] ],
+	},
+	parameters: {
+		docs: {
+			description: {
+				story: 'Bar chart with fixed dimensions that override the responsive behavior.',
+			},
+		},
+	},
+};
diff --git a/projects/js-packages/charts/src/components/line-chart/line-chart.tsx b/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,8 @@ const LineChart: FC< LineChartProps > = ( {
 	withTooltips = true,
 	showLegend = false,
 	legendOrientation = 'horizontal',
+	withGradientFill = false,
+	options = {},
 } ) => {
 	const providerTheme = useChartTheme();
 
@@ -124,19 +127,51 @@ const LineChart: FC< LineChartProps > = ( {
 				yScale={ { type: 'linear', nice: true } }
 			>
 				<AnimatedGrid columns={ false } numTicks={ 4 } />
-				<AnimatedAxis orientation="bottom" numTicks={ 5 } tickFormat={ formatDateTick } />
-				<AnimatedAxis orientation="left" numTicks={ 4 } />
-
-				{ 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 }
-					/>
-				) ) }
+				<AnimatedAxis
+					orientation="bottom"
+					numTicks={ 5 }
+					tickFormat={ formatDateTick }
+					{ ...options?.axis?.x }
+				/>
+				<AnimatedAxis orientation="left" numTicks={ 4 } { ...options?.axis?.y } />
+
+				{ 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

diff --git a/projects/js-packages/charts/src/components/line-chart/stories/index.stories.tsx b/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 > = {
@@ -10,7 +11,17 @@ const meta: Meta< typeof LineChart > = {
 	},
 	decorators: [
 		Story => (
-			<div style={ { padding: '2rem' } }>
+			<div
+				style={ {
+					resize: 'both',
+					overflow: 'auto',
+					padding: '2rem',
+					width: '800px',
+					maxWidth: '1200px',
+					border: '1px dashed #ccc',
+					display: 'inline-block',
+				} }
+			>
 				<Story />
 			</div>
 		),
@@ -27,13 +38,22 @@ Default.args = {
 	data: sampleData,
 	showLegend: false,
 	legendOrientation: 'horizontal',
+	withGradientFill: false,
+	options: {
+		axis: {
+			x: {
+				orientation: 'bottom',
+			},
+			y: {
+				orientation: 'left',
+			},
+		},
+	},
 };
 
 // Story with single data series
 export const SingleSeries: StoryObj< typeof LineChart > = Template.bind( {} );
 SingleSeries.args = {
-	width: 500,
-	height: 300,
 	data: [ sampleData[ 0 ] ], // Only London temperature data
 };
 
@@ -66,3 +86,31 @@ WithVerticalLegend.args = {
 	showLegend: true,
 	legendOrientation: 'vertical',
 };
+
+// Add after existing stories
+export const FixedDimensions: StoryObj< typeof LineChart > = Template.bind( {} );
+FixedDimensions.args = {
+	width: 800,
+	height: 400,
+	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' } },
+	},
+};