add line chart to storybook

CivicDataLab · Jan 9, 2024 · e34b4aa · e34b4aa · vercel · Jan 9, 2024
1 parent a82cf88
commit e34b4aa
Show file tree

Hide file tree

Showing 3 changed files with 333 additions and 289 deletions.
diff --git a/packages/opub-ui/src/components/BarChart/BarChart.stories.tsx b/packages/opub-ui/src/components/BarChart/BarChart.stories.tsx
@@ -1,60 +1,91 @@
-import { BarChart } from './BarChart';
-import { Meta, StoryObj } from '@storybook/react';
+import { BarChart } from './BarChart'
+import { Meta, StoryObj } from '@storybook/react'
 
 /**
  * Bar Charts are used to visually represent quantitative and categorical data.
  */
 const meta = {
-  title: 'Visualizations/BarChart',
-  component: BarChart,
-} satisfies Meta<typeof BarChart>;
+	title: 'Visualizations/BarChart',
+	component: BarChart,
+} satisfies Meta<typeof BarChart>
 
-export default meta;
-type Story = StoryObj<typeof meta>;
+export default meta
+type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  args: {
-    xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    series: [
-      {
-        name: 'Sales',
-        data: [120, 200, 150, 80, 70, 110, 130],
-        type: 'bar',
-      },
-    ],
-  },
-};
+	args: {
+		xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+		series: [
+			{
+				name: 'Sales',
+				data: [120, 200, 150, 80, 70, 110, 130],
+				type: 'bar',
+			},
+		],
+	},
+}
 
 export const yAxis: Story = {
-  name: 'yAxis',
-  args: {
-    yAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    series: [
-      {
-        name: 'Sales',
-        data: [120, 200, 150, 80, 70, 110, 130],
-        type: 'bar',
-      },
-    ],
-    height: '500px',
-  },
-};
+	name: 'yAxis',
+	args: {
+		yAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+		series: [
+			{
+				name: 'Sales',
+				data: [120, 200, 150, 80, 70, 110, 130],
+				type: 'bar',
+			},
+		],
+		height: '500px',
+	},
+}
 
 export const Grouped: Story = {
-  args: {
-    yAxis: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
-    series: [
-      {
-        name: '2011',
-        type: 'bar',
-        data: [18203, 23489, 29034, 104970, 131744, 630230],
-      },
-      {
-        name: '2012',
-        type: 'bar',
-        data: [19325, 23438, 31000, 121594, 134141, 681807],
-      },
-    ],
-    height: '500px',
-  },
-};
+	args: {
+		yAxis: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
+		series: [
+			{
+				name: '2011',
+				type: 'bar',
+				data: [18203, 23489, 29034, 104970, 131744, 630230],
+			},
+			{
+				name: '2012',
+				type: 'bar',
+				data: [19325, 23438, 31000, 121594, 134141, 681807],
+			},
+		],
+		height: '500px',
+	},
+}
+
+export const Line: Story = {
+	name: 'yAxis',
+	args: {
+		xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+		series: [
+			{
+				name: 'Sales',
+				data: [150, 230, 224, 218, 135, 147, 260],
+				type: 'line',
+			},
+		],
+		height: '500px',
+	},
+}
+
+export const LineSmooth: Story = {
+	name: 'yAxis',
+	args: {
+		xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+		series: [
+			{
+				name: 'Sales',
+				data: [150, 230, 224, 218, 135, 147, 260],
+				type: 'line',
+				smooth: true,
+			},
+		],
+		height: '500px',
+	},
+}
diff --git a/packages/opub-ui/src/components/BarChart/BarChart.tsx b/packages/opub-ui/src/components/BarChart/BarChart.tsx
@@ -1,88 +1,89 @@
-'use client';
+'use client'
 
-import { EChartsReactProps } from 'echarts-for-react';
-import ReactEChartsCore from 'echarts-for-react/lib/core';
-import { BarChart as Chart } from 'echarts/charts';
+import { EChartsReactProps } from 'echarts-for-react'
+import ReactEChartsCore from 'echarts-for-react/lib/core'
+import { BarChart as Chart } from 'echarts/charts'
 import {
-  GridComponent,
-  TitleComponent,
-  TooltipComponent,
-} from 'echarts/components';
-import * as echarts from 'echarts/core';
-import { SVGRenderer } from 'echarts/renderers';
+	GridComponent,
+	TitleComponent,
+	TooltipComponent,
+} from 'echarts/components'
+import * as echarts from 'echarts/core'
+import { SVGRenderer } from 'echarts/renderers'
 
 type Props = {
-  /* xAxis of the chart */
-  xAxis?: string[] | number[];
-  /* yAxis of the chart */
-  yAxis?: string[] | number[];
-  /* Data to be displayed on the chart */
-  series: {
-    name: string;
-    type: string;
-    data: number[];
-  }[];
-  /* Theme of the chart */
-  theme?: EChartsReactProps['theme'];
-  /* Callback function to be called when the chart is ready */
-  onChartReady?: (echart: any) => void;
-  /* Height of the chart */
-  height?: string;
-};
+	/* xAxis of the chart */
+	xAxis?: string[] | number[]
+	/* yAxis of the chart */
+	yAxis?: string[] | number[]
+	/* Data to be displayed on the chart */
+	series: {
+		name: string
+		type: string
+		data: number[]
+		smooth?: boolean
+	}[]
+	/* Theme of the chart */
+	theme?: EChartsReactProps['theme']
+	/* Callback function to be called when the chart is ready */
+	onChartReady?: (echart: any) => void
+	/* Height of the chart */
+	height?: string
+}
 
 export const BarChart = ({
-  series,
-  xAxis,
-  yAxis,
-  theme = 'light',
-  height = '300px',
-  onChartReady,
+	series,
+	xAxis,
+	yAxis,
+	theme = 'light',
+	height = '300px',
+	onChartReady,
 }: Props) => {
-  const option = {
-    series: series,
-    xAxis: {
-      type: xAxis ? null : 'value',
-      data: xAxis,
-    },
-    yAxis: {
-      type: yAxis ? null : 'value',
-      data: yAxis,
-    },
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'shadow',
-      },
-    },
-    grid: {
-      containLabel: true,
-      left: '5%',
-    },
-    label: {
-      show: true,
-      position: 'inside',
-      color: '#fff',
-      fontWeight: 'bold',
-    },
-  };
+	const option = {
+		series: series,
+		xAxis: {
+			type: xAxis ? null : 'value',
+			data: xAxis,
+		},
+		yAxis: {
+			type: yAxis ? null : 'value',
+			data: yAxis,
+		},
+		tooltip: {
+			trigger: 'axis',
+			axisPointer: {
+				type: 'shadow',
+			},
+		},
+		grid: {
+			containLabel: true,
+			left: '5%',
+		},
+		label: {
+			show: true,
+			position: 'inside',
+			color: '#fff',
+			fontWeight: 'bold',
+		},
+	}
 
-  echarts.use([
-    TitleComponent,
-    TooltipComponent,
-    GridComponent,
-    Chart,
-    SVGRenderer,
-  ]);
+	echarts.use([
+		TitleComponent,
+		TooltipComponent,
+		GridComponent,
+		Chart,
+		SVGRenderer,
+	])
 
-  return (
-    <ReactEChartsCore
-      echarts={echarts}
-      notMerge={true}
-      lazyUpdate={true}
-      theme={theme}
-      onChartReady={onChartReady}
-      option={option}
-      style={{ height: height, width: '100%' }}
-    />
-  );
-};
+	return (
+		<ReactEChartsCore
+			echarts={echarts}
+			notMerge={true}
+			lazyUpdate={true}
+			theme={theme}
+			onChartReady={onChartReady}
+			option={option}
+			style={{ height: height, width: '100%' }}
+		/>
+	)
+}