revamp template

src/pages/dashboards/home/blocks/Chart.tsx

@@ -0,0 +1,166 @@
+import ApexChart from 'react-apexcharts';
+import { ApexOptions } from 'apexcharts';
+import { useEffect, useState } from 'react';
+import { fCurrency } from '@/utils/FormatNumber';
+
+interface Series {
+  name: string;
+  data: any[];
+}
+
+const Chart = ({
+  title,
+  toolbar,
+  chartType,
+  chartLegend,
+  subtitle,
+  number,
+  count,
+  chartData = []
+}: any) => {
+  const [series, setSeries] = useState<Series[]>([]);
+  const [categories, setCategories] = useState<string[]>([]);
+
+  let legendOpt = null;
+  if (chartLegend == 'true') {
+    legendOpt = true;
+  } else {
+    legendOpt = false;
+  }
+  const options: ApexOptions = {
+    chart: {
+      type: 'area',
+      toolbar: {
+        show: false
+      }
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        columnWidth: '50%'
+      }
+    },
+    dataLabels: {
+      enabled: true,
+      offsetY: -10,
+      offsetX: chartType === 'bar' ? 1.5 : 0,
+      formatter: (value: any) => {
+        if (count == 'sum') {
+          return fCurrency(value);
+        } else {
+          return value;
+        }
+      }
+    },
+    markers: {
+      size: 0,
+      shape: 'circle'
+    },
+    xaxis: {
+      categories: categories,
+      labels: {
+        style: {
+          colors: 'var(--tw-gray-500)',
+          fontSize: '12px'
+        }
+      }
+    },
+    yaxis: {
+      labels: {
+        style: {
+          colors: 'var(--tw-gray-500)',
+          fontSize: '12px'
+        },
+        formatter: (value: any) => {
+          if (count == 'sum') {
+            return fCurrency(value);
+          } else {
+            return value;
+          }
+        }
+      }
+    },
+    grid: {
+      borderColor: 'var(--tw-gray-200)',
+      strokeDashArray: 5,
+      padding: {
+        top: 0,
+        right: 0,
+        bottom: 20,
+        left: 0
+      }
+    },
+    tooltip: {
+      enabled: true,
+      shared: true,
+      intersect: false,
+      y: {
+        formatter: (value: any) => {
+          if (count == 'sum') {
+            return fCurrency(value);
+          } else {
+            return value;
+          }
+        }
+      }
+    },
+    stroke: {
+      show: true,
+      curve: 'smooth',
+      lineCap: 'butt',
+      colors: undefined,
+      width: 3,
+      dashArray: 0
+    },
+    legend: {
+      show: legendOpt,
+      position: 'right',
+      floating: false
+    }
+  };
+  useEffect(() => {
+    if (chartData && chartData.length !== 0) {
+      const categories = chartData.map((item: any) => item.month);
+      const statusNames = Object.keys(chartData[0]).filter((key) => key !== 'month');
+      const series = statusNames.map((status) => {
+        const cleanName = status
+          .replace('_count', '')
+          .replace(/_/g, ' ')
+          .replace(/(^|\s)\S/g, (match) => match.toUpperCase());
+        return {
+          name: cleanName,
+          data: chartData.map((item: any) => item[status])
+        };
+      });
+      setCategories(categories);
+      setSeries(series);
+    }
+  }, [chartData]);
+
+  return (
+    <div className="card h-full">
+      <div className="card-header border-0 ps-5 pb-0">
+        <h3 className="card-title">{title}</h3>
+      </div>
+      <div className="card-body flex flex-col gap-4 p-2 lg:p-b7.5 lg:pt-4">
+        <div className="flex justify-between">
+          <div className="flex flex-col w-full">
+            <div className="ps-3">{toolbar && <div>{toolbar}</div>}</div>
+            <span className="text-sm font-normal text-gray-700 mb-1">{subtitle}</span>
+            <span className="text-3xl font-semibold text-gray-900 mb-0">{number}</span>
+          </div>
+        </div>
+        <ApexChart
+          id="earnings_chart" //
+          options={options}
+          series={series}
+          type={chartType}
+          legend={chartLegend}
+          height={350}
+        />
+      </div>
+    </div>
+  );
+};
+
+export { Chart };