Charts: Fixing theme storybook story (#40640)

* Charts: Fixing theme demo after introducing multiple series * changelog
Automattic · Dec 17, 2024 · e76d719 · e76d719
1 parent 9582f25
commit e76d719
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 4 deletions.
diff --git a/projects/js-packages/charts/changelog/fix-charts-line-chart-themes b/projects/js-packages/charts/changelog/fix-charts-line-chart-themes
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fixing a bug in Chart storybook data.
diff --git a/projects/js-packages/charts/src/providers/theme/stories/index.stories.tsx b/projects/js-packages/charts/src/providers/theme/stories/index.stories.tsx
@@ -21,6 +21,29 @@ const sampleData = [
 	{ date: new Date( '2024-01-05' ), value: 30, label: 'Jan 5' },
 ];
 
+const lineSampleData = [
+	{
+		label: 'Line 1',
+		data: [
+			{ date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' },
+			{ date: new Date( '2024-01-02' ), value: 20, label: 'Jan 2' },
+			{ date: new Date( '2024-01-03' ), value: 15, label: 'Jan 3' },
+			{ date: new Date( '2024-01-04' ), value: 25, label: 'Jan 4' },
+			{ date: new Date( '2024-01-05' ), value: 30, label: 'Jan 5' },
+		],
+	},
+	{
+		label: 'Line 2',
+		data: [
+			{ date: new Date( '2024-01-01' ), value: 1, label: 'Jan 1' },
+			{ date: new Date( '2024-01-02' ), value: 2, label: 'Jan 2' },
+			{ date: new Date( '2024-01-03' ), value: 1.5, label: 'Jan 3' },
+			{ date: new Date( '2024-01-04' ), value: 2.5, label: 'Jan 4' },
+			{ date: new Date( '2024-01-05' ), value: 3, label: 'Jan 5' },
+		],
+	},
+];
+
 const pieData = [
 	{
 		label: 'Windows',
@@ -54,7 +77,7 @@ export const Default: Story = {
 	render: () => (
 		<ThemeProvider>
 			<GridComponent>
-				<LineChart data={ sampleData } width={ 400 } height={ 300 } />
+				<LineChart data={ lineSampleData } width={ 400 } height={ 300 } />
 				<BarChart data={ sampleData } width={ 400 } height={ 300 } />
 				<PieSemiCircleChart
 					data={ pieData }
@@ -72,7 +95,7 @@ export const JetpackTheme: Story = {
 	render: () => (
 		<ThemeProvider theme={ jetpackTheme }>
 			<GridComponent>
-				<LineChart data={ sampleData } width={ 400 } height={ 300 } />
+				<LineChart data={ lineSampleData } width={ 400 } height={ 300 } />
 				<BarChart data={ sampleData } width={ 400 } height={ 300 } />
 				<PieSemiCircleChart
 					data={ pieData }
@@ -90,7 +113,7 @@ export const WooTheme: Story = {
 	render: () => (
 		<ThemeProvider theme={ wooTheme }>
 			<GridComponent>
-				<LineChart data={ sampleData } width={ 400 } height={ 300 } />
+				<LineChart data={ lineSampleData } width={ 400 } height={ 300 } />
 				<BarChart data={ sampleData } width={ 400 } height={ 300 } />
 				<PieSemiCircleChart
 					data={ pieData }
@@ -116,7 +139,7 @@ export const CustomColorTheme: Story = {
 			} }
 		>
 			<GridComponent>
-				<LineChart data={ sampleData } width={ 400 } height={ 300 } />
+				<LineChart data={ lineSampleData } width={ 400 } height={ 300 } />
 				<BarChart data={ sampleData } width={ 400 } height={ 300 } />
 				<PieSemiCircleChart
 					data={ pieData }