add more examples for barchart

CivicDataLab · Jan 1, 2024 · 1f362e5 · 1f362e5 · vercel · Jan 1, 2024
1 parent 5f1ccde
commit 1f362e5
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 2 deletions.
diff --git a/packages/opub-ui/src/components/BarChart/BarChart.stories.tsx b/packages/opub-ui/src/components/BarChart/BarChart.stories.tsx
@@ -24,3 +24,37 @@ export const Default: Story = {
     ],
   },
 };
+
+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',
+  },
+};
+
+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',
+  },
+};
diff --git a/packages/opub-ui/src/components/BarChart/BarChart.tsx b/packages/opub-ui/src/components/BarChart/BarChart.tsx
@@ -14,14 +14,14 @@ 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[];
   }[];
-  /* yAxis of the chart */
-  yAxis?: string[] | number[];
   /* Theme of the chart */
   theme?: EChartsReactProps['theme'];
   /* Callback function to be called when the chart is ready */