Merge pull request #260 from CivicDataLab/dev

replace data with series in barchart

examples/district/app/[locale]/[district]/[department]/[scheme]/components/BarView.tsx

@@ -2,9 +2,16 @@ import { BarChart } from 'opub-viz/src';
 import React from 'react';
 
 export const BarView = React.forwardRef(({ data }: { data: any }, ref: any) => {
+  const series = [
+    {
+      name: 'Bar Chart',
+      data: data.values || [],
+      type: 'bar',
+    },
+  ];
   return (
     <div ref={ref}>
-      <BarChart yAxis={data.xAxis} data={data.values} height="512px" />
+      <BarChart yAxis={data.xAxis} series={series} height="512px" />
     </div>
   );
 });

examples/district/app/[locale]/[district]/[department]/[scheme]/components/Overview.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ContentCard, ProgressCard } from '../../components/Card';
 import { IOverview } from './scheme-layout';
 import { Icon, Text } from 'opub-ui';
-import { BarChart } from 'opub-viz';
+import { BarChart } from 'opub-viz/src';
 import Link from 'next/link';
 import Icons from '@/components/icons';
 
@@ -44,6 +44,14 @@ export const Overview = React.forwardRef(
 );
 
 function SelectCard({ type, data, link }: any) {
+  const series = [
+    {
+      name: 'Bar Chart',
+      data: data.data?.values || [],
+      type: 'bar',
+    },
+  ];
+
   switch (type) {
     case 'number':
       return (
@@ -72,7 +80,7 @@ function SelectCard({ type, data, link }: any) {
             {data.label}
           </Text>
           <>
-            <BarChart xAxis={data.data.xAxis} data={data.data.values} />
+            <BarChart xAxis={data.data.xAxis} series={series} />
           </>
           {/* <Text variant="bodyMd">{data.description}</Text> */}
           {link && (

packages/opub-viz/src/components/BarChart/BarChart.stories.tsx

@@ -14,6 +14,12 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    data: [120, 200, 150, 80, 70, 110, 130],
+    series: [
+      {
+        name: 'Sales',
+        data: [120, 200, 150, 80, 70, 110, 130],
+        type: 'bar',
+      },
+    ],
   },
 };

packages/opub-viz/src/components/BarChart/BarChart.tsx

@@ -13,7 +13,11 @@ type Props = {
   /* xAxis of the chart */
   xAxis?: string[] | number[];
   /* Data to be displayed on the chart */
-  data: number[] | number[][] | string[] | string[][];
+  series: {
+    name: string;
+    type: string;
+    data: number[];
+  }[];
   /* yAxis of the chart */
   yAxis?: string[] | number[];
   /* Theme of the chart */
@@ -25,20 +29,15 @@ type Props = {
 };
 
 export const BarChart = ({
-  data,
+  series,
   xAxis,
   yAxis,
   theme = 'light',
   height = '300px',
   onChartReady,
 }: Props) => {
   const option = {
-    series: [
-      {
-        type: 'bar',
-        data: data,
-      },
-    ],
+    series: series,
     xAxis: {
       type: xAxis ? null : 'value',
       data: xAxis,