From 276240fb3239033f01da7194734bbc9e63072d48 Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Thu, 20 Feb 2025 21:53:17 +0700
Subject: [PATCH] feat: add static chart

---
 .../dashboards/home/DashboardHomePage.tsx     |   6 +-
 src/pages/dashboards/home/blocks/Chart.tsx    |   2 +-
 src/pages/dashboards/home/staticChart.tsx     | 189 ++++++++++++++++++
 3 files changed, 194 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/dashboards/home/staticChart.tsx

diff --git a/src/pages/dashboards/home/DashboardHomePage.tsx b/src/pages/dashboards/home/DashboardHomePage.tsx
index fa75b05..61e3af5 100644
--- a/src/pages/dashboards/home/DashboardHomePage.tsx
+++ b/src/pages/dashboards/home/DashboardHomePage.tsx
@@ -14,6 +14,8 @@ import { useFetchCardData, useFetchChartData } from './hooks';
 import { Button } from '@/components/ui/button';
 import { useFetchYear } from './hooks/useFetchYear';
 import { get5LastYear } from '@/utils/Date';
+import { staticChartData } from './staticChart';
+
 // sum -> nominal, count-> total
 type CountType = 'sum' | 'count';
 type ChartType = 'line' | 'bar';
@@ -184,9 +186,9 @@ const DashboardHomePage = () => {
           <div className="lg:col-span-1">
             <Chart
               title="Overview"
-              count={count}
+              count={12}
               toolbar={toolbar}
-              chartData={chartData}
+              chartData={staticChartData.series.map((data: any) => data.data)}
               chartType={chartType}
               chartLegend={chartLegend}
             />
diff --git a/src/pages/dashboards/home/blocks/Chart.tsx b/src/pages/dashboards/home/blocks/Chart.tsx
index 34f2df5..25cdad0 100644
--- a/src/pages/dashboards/home/blocks/Chart.tsx
+++ b/src/pages/dashboards/home/blocks/Chart.tsx
@@ -37,7 +37,7 @@ const Chart = ({
     plotOptions: {
       bar: {
         horizontal: false,
-        columnWidth: '50%'
+        columnWidth: '30%'
       }
     },
     dataLabels: {
diff --git a/src/pages/dashboards/home/staticChart.tsx b/src/pages/dashboards/home/staticChart.tsx
new file mode 100644
index 0000000..f83830d
--- /dev/null
+++ b/src/pages/dashboards/home/staticChart.tsx
@@ -0,0 +1,189 @@
+export const staticChartData = {
+  series: [
+    {
+      categories: 'Jan',
+      data: [
+        {
+          x: 'Jan 01',
+          y: 50
+        },
+      ]
+    },
+    {
+      data: [
+        {
+          x: 'Jan 02',
+          y: 75
+        }
+      ]
+    },
+    {
+      data: [
+        {
+          x: 'Jan 03',
+          y: 200
+        }
+      ]
+    },
+    {
+      data: [
+        {
+          x: 'Jan 04',
+          y: 125
+        }
+      ]
+    },
+    {
+      data: [
+        {
+          x: 'Jan 05',
+          y: 150
+        }
+      ]
+    },
+    {
+      data: [
+        {
+          x: 'Jan 06',
+          y: 175
+        }
+      ]
+    }
+  ],
+  xaxis: {
+    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+  }
+};
+
+// const staticChartData = {
+//   series: [
+//     {
+//       name: 'Sales',
+//       data: [
+//         {
+//           x: 'Jan',
+//           y: 20
+//         }
+//       ]
+//     },
+//     {
+//       name: 'Orders',
+//       data: [
+//         {
+//           x: 'Feb',
+//           y: 32
+//         }
+//       ]
+//     },
+//     {
+//       data: [
+//         {
+//           x: 'Mar',
+//           y: 41
+//         }
+//       ]
+//     },
+//     {
+//       data: [
+//         {
+//           x: 'Apr',
+//           y: 38
+//         }
+//       ]
+//     },
+//     {
+//       data: [
+//         {
+//           x: 'May',
+//           y: 50
+//         }
+//       ]
+//     },
+//     {
+//       data: [
+//         {
+//           x: 'Jun',
+//           y: 47
+//         }
+//       ]
+//     },
+//     {
+//       data: [
+//         {
+//           x: 'Jul',
+//           y: 62
+//         }
+//       ]
+//     },
+//     {
+//       data: [
+//         {
+//           x: 'Aug',
+//           y: 51
+//         }
+//       ]
+//     },
+//     {
+//       data: [
+//         {
+//           x: 'Sep',
+//           y: 25
+//         }
+//       ]
+//     },
+
+//     {
+//       data: [
+//         {
+//           x: 'Oct',
+//           y: 72
+//         }
+//       ]
+//     },
+//     {
+//       data: [
+//         {
+//           x: 'Nov',
+//           y: 70
+//         }
+//       ]
+//     },
+//     {
+//       data: [
+//         {
+//           x: 'Des',
+//           y: 100
+//         }
+//       ]
+//     },
+//   ],
+//   options: {
+//     chart: {
+//       type: chartType,
+//       height: 350
+//     },
+//     title: {
+//       text: 'Overview',
+//       align: 'center'
+//     },
+//     xaxis: {
+//       categories: [
+//         'Jan',
+//         'Feb',
+//         'Mar',
+//         'Apr',
+//         'May',
+//         'Jun',
+//         'Jul',
+//         'Aug',
+//         'Sep',
+//         'Oct',
+//         'Nov',
+//         'Dec'
+//       ]
+//     },
+//     legend: {
+//       show: chartLegend === 'true'
+//     }
+//   }
+// };