Add files via upload

client/src/components/chart/index.js

@@ -0,0 +1,9 @@
+import Chart from 'react-apexcharts';
+
+// ----------------------------------------------------------------------
+
+export { default as StyledChart } from './styles';
+
+export { default as useChart } from './useChart';
+
+export default Chart;

client/src/components/chart/styles.js

@@ -0,0 +1,61 @@
+// @mui
+import { alpha, useTheme } from '@mui/material/styles';
+import { GlobalStyles } from '@mui/material';
+// utils
+import { bgBlur } from '../../utils/cssStyles';
+
+// ----------------------------------------------------------------------
+
+export default function StyledChart() {
+  const theme = useTheme();
+
+  const inputGlobalStyles = (
+    <GlobalStyles
+      styles={{
+        '.apexcharts-canvas': {
+          // Tooltip
+          '.apexcharts-xaxistooltip': {
+            ...bgBlur({ color: theme.palette.background.default }),
+            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': {
+            ...bgBlur({ color: theme.palette.background.default }),
+            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: alpha(theme.palette.grey[500], 0.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',
+          },
+        },
+      }}
+    />
+  );
+
+  return inputGlobalStyles;
+}

client/src/components/chart/useChart.js

@@ -0,0 +1,200 @@
+import merge from 'lodash/merge';
+// @mui
+import { useTheme, alpha } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function useChart(options) {
+  const theme = useTheme();
+
+  const LABEL_TOTAL = {
+    show: true,
+    label: 'Total',
+    color: theme.palette.text.secondary,
+    fontSize: theme.typography.subtitle2.fontSize,
+    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,
+    fontWeight: theme.typography.h3.fontWeight,
+    lineHeight: theme.typography.h3.lineHeight,
+  };
+
+  const baseOptions = {
+    // Colors
+    colors: [
+      theme.palette.primary.main,
+      theme.palette.warning.main,
+      theme.palette.info.main,
+      theme.palette.error.main,
+      theme.palette.success.main,
+      theme.palette.warning.dark,
+      theme.palette.success.darker,
+      theme.palette.info.dark,
+      theme.palette.info.darker,
+    ],
+
+    // 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: {
+        borderRadius: 4,
+        columnWidth: '28%',
+      },
+
+      // Pie + Donut
+      pie: {
+        donut: {
+          labels: {
+            show: true,
+            value: LABEL_VALUE,
+            total: LABEL_TOTAL,
+          },
+        },
+      },
+
+      // Radialbar
+      radialBar: {
+        track: {
+          strokeWidth: '100%',
+          background: alpha(theme.palette.grey[500], 0.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%' } },
+        },
+      },
+    ],
+  };
+
+  return merge(baseOptions, options);
+}

client/src/components/color-utils/ColorMultiPicker.js

@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+// @mui
+import { Box, Checkbox } from '@mui/material';
+//
+import Icon from './Icon';
+
+// ----------------------------------------------------------------------
+
+ColorMultiPicker.propTypes = {
+  sx: PropTypes.object,
+  colors: PropTypes.array,
+  onChangeColor: PropTypes.func,
+  selected: PropTypes.arrayOf(PropTypes.string),
+};
+
+export default function ColorMultiPicker({ colors, selected, onChangeColor, sx, ...other }) {
+  return (
+    <Box sx={sx}>
+      {colors.map((color) => {
+        const whiteColor = color === '#FFFFFF' || color === 'white';
+
+        return (
+          <Checkbox
+            key={color}
+            size="small"
+            value={color}
+            color="default"
+            checked={selected.includes(color)}
+            onChange={() => onChangeColor(color)}
+            icon={<Icon whiteColor={whiteColor} />}
+            checkedIcon={<Icon checked whiteColor={whiteColor} />}
+            sx={{
+              color,
+              '&:hover': { opacity: 0.72 },
+              '& svg': { width: 12, height: 12 },
+            }}
+            {...other}
+          />
+        );
+      })}
+    </Box>
+  );
+}

client/src/components/color-utils/ColorPreview.js

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+// @mui
+import { alpha } from '@mui/material/styles';
+import { Box, Typography, Stack } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+ColorPreview.propTypes = {
+  sx: PropTypes.object,
+  limit: PropTypes.number,
+  colors: PropTypes.arrayOf(PropTypes.string),
+};
+
+export default function ColorPreview({ colors, limit = 3, sx }) {
+  const showColor = colors.slice(0, limit);
+
+  const moreColor = colors.length - limit;
+
+  return (
+    <Stack component="span" direction="row" alignItems="center" justifyContent="flex-end" sx={sx}>
+      {showColor.map((color, index) => (
+        <Box
+          key={color + index}
+          sx={{
+            ml: -0.75,
+            width: 16,
+            height: 16,
+            borderRadius: '50%',
+            border: (theme) => `solid 2px ${theme.palette.background.paper}`,
+            boxShadow: (theme) => `inset -1px 1px 2px ${alpha(theme.palette.common.black, 0.24)}`,
+            bgcolor: color,
+          }}
+        />
+      ))}
+
+      {colors.length > limit && <Typography variant="subtitle2">{`+${moreColor}`}</Typography>}
+    </Stack>
+  );
+}

client/src/components/color-utils/ColorSinglePicker.js

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import { forwardRef } from 'react';
+// @mui
+import { Radio, RadioGroup } from '@mui/material';
+//
+import Icon from './Icon';
+
+// ----------------------------------------------------------------------
+
+const ColorSinglePicker = forwardRef(({ colors, ...other }, ref) => (
+  <RadioGroup row ref={ref} {...other}>
+    {colors.map((color) => {
+      const whiteColor = color === '#FFFFFF' || color === 'white';
+
+      return (
+        <Radio
+          key={color}
+          value={color}
+          color="default"
+          icon={<Icon whiteColor={whiteColor} />}
+          checkedIcon={<Icon checked whiteColor={whiteColor} />}
+          sx={{
+            color,
+            '&:hover': { opacity: 0.72 },
+            '& svg': { width: 12, height: 12 },
+          }}
+        />
+      );
+    })}
+  </RadioGroup>
+));
+
+ColorSinglePicker.propTypes = {
+  colors: PropTypes.arrayOf(PropTypes.string),
+};
+
+export default ColorSinglePicker;