Base Template

frontend/dashboard/src/components/chart/BaseOptionChart.tsx

@@ -0,0 +1,191 @@
+import { ApexOptions } from 'apexcharts';
+// @mui
+import { useTheme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function BaseOptionChart(): ApexOptions {
+  const theme = useTheme();
+
+  const LABEL_TOTAL = {
+    show: true,
+    label: 'Total',
+    color: theme.palette.text.secondary,
+    fontSize: theme.typography.subtitle2.fontSize as string,
+    fontWeight: theme.typography.subtitle2.fontWeight,
+    lineHeight: theme.typography.subtitle2.lineHeight,
+  };
+
+  const LABEL_VALUE = {
+    offsetY: 8,
+    color: theme.palette.text.primary,
+    fontSize: theme.typography.h3.fontSize as string,
+    fontWeight: theme.typography.h3.fontWeight,
+    lineHeight: theme.typography.h3.lineHeight,
+  };
+
+  return {
+    // Colors
+    colors: [
+      theme.palette.primary.main,
+      theme.palette.chart.yellow[0],
+      theme.palette.chart.blue[0],
+      theme.palette.chart.violet[0],
+      theme.palette.chart.green[0],
+      theme.palette.chart.red[0],
+    ],
+
+    // Chart
+    chart: {
+      toolbar: { show: false },
+      zoom: { enabled: false },
+      // animations: { enabled: false },
+      foreColor: theme.palette.text.disabled,
+      fontFamily: theme.typography.fontFamily,
+    },
+
+    // States
+    states: {
+      hover: {
+        filter: {
+          type: 'lighten',
+          value: 0.04,
+        },
+      },
+      active: {
+        filter: {
+          type: 'darken',
+          value: 0.88,
+        },
+      },
+    },
+
+    // Fill
+    fill: {
+      opacity: 1,
+      gradient: {
+        type: 'vertical',
+        shadeIntensity: 0,
+        opacityFrom: 0.4,
+        opacityTo: 0,
+        stops: [0, 100],
+      },
+    },
+
+    // Datalabels
+    dataLabels: { enabled: false },
+
+    // Stroke
+    stroke: {
+      width: 3,
+      curve: 'smooth',
+      lineCap: 'round',
+    },
+
+    // Grid
+    grid: {
+      strokeDashArray: 3,
+      borderColor: theme.palette.divider,
+    },
+
+    // Xaxis
+    xaxis: {
+      axisBorder: { show: false },
+      axisTicks: { show: false },
+    },
+
+    // Markers
+    markers: {
+      size: 0,
+      strokeColors: theme.palette.background.paper,
+    },
+
+    // Tooltip
+    tooltip: {
+      x: {
+        show: false,
+      },
+    },
+
+    // Legend
+    legend: {
+      show: true,
+      fontSize: String(13),
+      position: 'top',
+      horizontalAlign: 'right',
+      markers: {
+        radius: 12,
+      },
+      fontWeight: 500,
+      itemMargin: { horizontal: 12 },
+      labels: {
+        colors: theme.palette.text.primary,
+      },
+    },
+
+    // plotOptions
+    plotOptions: {
+      // Bar
+      bar: {
+        columnWidth: '28%',
+        borderRadius: 4,
+      },
+      // Pie + Donut
+      pie: {
+        donut: {
+          labels: {
+            show: true,
+            value: LABEL_VALUE,
+            total: LABEL_TOTAL,
+          },
+        },
+      },
+      // Radialbar
+      radialBar: {
+        track: {
+          strokeWidth: '100%',
+          background: theme.palette.grey[500_16],
+        },
+        dataLabels: {
+          value: LABEL_VALUE,
+          total: LABEL_TOTAL,
+        },
+      },
+      // Radar
+      radar: {
+        polygons: {
+          fill: { colors: ['transparent'] },
+          strokeColors: theme.palette.divider,
+          connectorColors: theme.palette.divider,
+        },
+      },
+      // polarArea
+      polarArea: {
+        rings: {
+          strokeColor: theme.palette.divider,
+        },
+        spokes: {
+          connectorColors: theme.palette.divider,
+        },
+      },
+    },
+
+    // Responsive
+    responsive: [
+      {
+        // sm
+        breakpoint: theme.breakpoints.values.sm,
+        options: {
+          plotOptions: { bar: { columnWidth: '40%' } },
+        },
+      },
+      {
+        // md
+        breakpoint: theme.breakpoints.values.md,
+        options: {
+          plotOptions: { bar: { columnWidth: '32%' } },
+        },
+      },
+    ],
+  };
+}

frontend/dashboard/src/components/chart/ChartStyle.tsx

@@ -0,0 +1,58 @@
+// @mui
+import { alpha, useTheme } from '@mui/material/styles';
+import { GlobalStyles } from '@mui/material';
+// utils
+import cssStyles from '../../utils/cssStyles';
+
+// ----------------------------------------------------------------------
+
+export default function ChartStyle() {
+  const theme = useTheme();
+
+  return (
+    <GlobalStyles
+      styles={{
+        '&.apexcharts-canvas': {
+          // Tooltip
+          '.apexcharts-xaxistooltip': {
+            ...cssStyles(theme).bgBlur(),
+            border: 0,
+            color: theme.palette.text.primary,
+            boxShadow: theme.customShadows.dropdown,
+            borderRadius: Number(theme.shape.borderRadius) * 1.5,
+            '&:before': { borderBottomColor: 'transparent' },
+            '&:after': { borderBottomColor: alpha(theme.palette.background.default, 0.8) },
+          },
+          '.apexcharts-tooltip.apexcharts-theme-light': {
+            ...cssStyles(theme).bgBlur(),
+            border: 0,
+            boxShadow: theme.customShadows.dropdown,
+            borderRadius: Number(theme.shape.borderRadius) * 1.5,
+            '& .apexcharts-tooltip-title': {
+              border: 0,
+              textAlign: 'center',
+              fontWeight: theme.typography.fontWeightBold,
+              backgroundColor: theme.palette.grey[500_16],
+              color: theme.palette.text[theme.palette.mode === 'light' ? 'secondary' : 'primary'],
+            },
+          },
+          // Legend
+          '.apexcharts-legend': {
+            padding: 0,
+          },
+          '.apexcharts-legend-series': {
+            display: 'flex !important',
+            alignItems: 'center',
+          },
+          '.apexcharts-legend-marker': {
+            marginRight: 8,
+          },
+          '.apexcharts-legend-text': {
+            lineHeight: '18px',
+            textTransform: 'capitalize',
+          },
+        },
+      }}
+    />
+  );
+}

frontend/dashboard/src/components/chart/index.ts

@@ -0,0 +1,2 @@
+export { default as ChartStyle } from './ChartStyle';
+export { default as BaseOptionChart } from './BaseOptionChart';