wip: add more chart types

fragment-build · Apr 17, 2024 · 9394028 · 9394028
1 parent 9908044
commit 9394028
Show file tree

Hide file tree

Showing 3 changed files with 525 additions and 9 deletions.
diff --git a/src/components/chart/Chart.stories.tsx b/src/components/chart/Chart.stories.tsx
@@ -3,7 +3,7 @@ import { Chart } from "./Chart";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof Chart> = {
-  title: "component/Chart",
+  title: "components/Chart",
   component: Chart,
   tags: ['autodocs'],
 };
@@ -13,6 +13,20 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Area: Story = {
+  args: {
+    type: 'area',
+    height: '500px',
+    series: [
+      {
+        name: "New users",
+        data: [6500, 6418, 6456, 6526, 6356, 6456],
+        color: "#1A56DB",
+      },
+    ],
+  },
+};
+
 export const Line: Story = {
   args: {
     type: 'line',
@@ -31,3 +45,81 @@ export const Line: Story = {
     ],
   },
 };
+
+export const Column: Story = {
+  args: {
+    type: 'column',
+    height: '500px',
+    series: [
+      {
+        name: "Organic",
+        color: "#1A56DB",
+        data: [
+          { x: "Mon", y: 231 },
+          { x: "Tue", y: 122 },
+          { x: "Wed", y: 63 },
+          { x: "Thu", y: 421 },
+          { x: "Fri", y: 122 },
+          { x: "Sat", y: 323 },
+          { x: "Sun", y: 111 },
+        ],
+      },
+      {
+        name: "Social media",
+        color: "#FDBA8C",
+        data: [
+          { x: "Mon", y: 232 },
+          { x: "Tue", y: 113 },
+          { x: "Wed", y: 341 },
+          { x: "Thu", y: 224 },
+          { x: "Fri", y: 522 },
+          { x: "Sat", y: 411 },
+          { x: "Sun", y: 243 },
+        ],
+      },
+    ],
+  },
+};
+
+export const Bar: Story = {
+  args: {
+    type: 'bar',
+    height: '500px',
+    series: [
+      {
+        name: "Income",
+        color: "#31C48D",
+        data: [1420, 1620, 1820, 1420, 1650, 2120],
+      },
+      {
+        name: "Expense",
+        data: [788, 810, 866, 788, 1100, 1200],
+        color: "#F05252",
+      }
+    ]
+  },
+};
+
+export const Pie: Story = {
+  args: {
+    type: 'pie',
+    height: '500px',
+    series: [52.8, 26.8, 20.4],
+  },
+};
+
+export const Donut: Story = {
+  args: {
+    type: 'donut',
+    height: '500px',
+    series: [35.1, 23.5, 2.4, 5.4],
+  },
+};
+
+export const Radial: Story = {
+  args: {
+    type: 'radial',
+    height: '500px',
+    series: [90, 85, 70],
+  },
+};
diff --git a/src/components/chart/Chart.tsx b/src/components/chart/Chart.tsx
@@ -9,7 +9,7 @@ import { Spinner } from "../base";
 import { FragmentUIContext } from "../../context";
 
 export interface ChartProps {
-  type: 'line';
+  type: 'area' | 'line' | 'column' | 'bar' | 'pie' | 'donut' | 'radial';
   series: ApexAxisChartSeries | ApexNonAxisChartSeries;
   options?: ApexCharts.ApexOptions;
   height?: ApexChartProps['height'];
@@ -19,7 +19,7 @@ export interface ChartProps {
 export const Chart: React.FC<ChartProps> = (props) => {
   const context = useContext(FragmentUIContext);
   const defaults = context['defaults']['chart']?.[props.type];
-  const mergedProps: ChartProps = React.useMemo(() => defaultsDeep(structuredClone(props), defaults ?? {}), [props, defaults]);
+  const mergedProps: ApexChartProps = React.useMemo(() => defaultsDeep(structuredClone(props), defaults ?? {}), [props, defaults]);
   const [component, setComponent] = useState<React.ReactNode>(
     <div style={{ height: mergedProps.height, width: mergedProps.width }} className="flex justify-center align-center"><Spinner /></div>
   );
@@ -28,11 +28,24 @@ export const Chart: React.FC<ChartProps> = (props) => {
     const importComponent = async () => {
       const module = await import('react-apexcharts');
       const ApexChart = module.default;
-      setComponent(<ApexChart {...mergedProps} />);
+      setComponent(
+        <ApexChart
+          {...mergedProps}
+          type={defaults?.options?.chart?.type}
+          height={props.height ?? defaults?.options?.chart?.height}
+          width={props.width ??defaults?.options?.chart?.width}
+        />
+      );
     };
 
     importComponent();
-  }, [mergedProps]);
+  }, [
+    mergedProps,
+    defaults?.options?.chart?.type,
+    defaults?.options?.chart?.height,
+    defaults?.options?.chart?.width,
+    props.height, props.width,
+  ]);
 
   return component;
 };