@canmingir/link 1.1.0

package/minimal/src/sections/_examples/extra/chart-view/chart-column-single.jsx

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+
+import Chart, { useChart } from 'src/components/chart';
+
+// ----------------------------------------------------------------------
+
+export default function ChartColumnSingle({ series }) {
+  const chartOptions = useChart({
+    plotOptions: {
+      bar: {
+        columnWidth: '16%',
+      },
+    },
+    stroke: {
+      show: false,
+    },
+    xaxis: {
+      categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
+    },
+    tooltip: {
+      y: {
+        formatter: (value) => `$ ${value} thousands`,
+      },
+    },
+  });
+
+  return (
+    <Chart dir="ltr" type="bar" series={series} options={chartOptions} width="100%" height={320} />
+  );
+}
+
+ChartColumnSingle.propTypes = {
+  series: PropTypes.array,
+};

package/minimal/src/sections/_examples/extra/chart-view/chart-column-stacked.jsx

@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types';
+
+import Chart, { useChart } from 'src/components/chart';
+
+// ----------------------------------------------------------------------
+
+export default function ChartColumnStacked({ series }) {
+  const chartOptions = useChart({
+    chart: {
+      stacked: true,
+      zoom: {
+        enabled: true,
+      },
+    },
+    legend: {
+      itemMargin: {
+        vertical: 8,
+      },
+      position: 'right',
+      offsetY: 20,
+    },
+    plotOptions: {
+      bar: {
+        columnWidth: '16%',
+      },
+    },
+    stroke: {
+      show: false,
+    },
+    xaxis: {
+      type: 'datetime',
+      categories: [
+        '01/01/2011 GMT',
+        '01/02/2011 GMT',
+        '01/03/2011 GMT',
+        '01/04/2011 GMT',
+        '01/05/2011 GMT',
+        '01/06/2011 GMT',
+      ],
+    },
+  });
+
+  return (
+    <Chart dir="ltr" type="bar" series={series} options={chartOptions} width="100%" height={320} />
+  );
+}
+
+ChartColumnStacked.propTypes = {
+  series: PropTypes.array,
+};

package/minimal/src/sections/_examples/extra/chart-view/chart-donut.jsx

@@ -0,0 +1,42 @@
+import PropTypes from 'prop-types';
+
+import Chart, { useChart } from 'src/components/chart';
+
+// ----------------------------------------------------------------------
+
+export default function ChartDonut({ series }) {
+  const chartOptions = useChart({
+    labels: ['Apple', 'Mango', 'Orange', 'Watermelon'],
+    stroke: {
+      show: false,
+    },
+    legend: {
+      horizontalAlign: 'center',
+    },
+    tooltip: {
+      fillSeriesColor: false,
+    },
+    plotOptions: {
+      pie: {
+        donut: {
+          size: '90%',
+        },
+      },
+    },
+  });
+
+  return (
+    <Chart
+      dir="ltr"
+      type="donut"
+      series={series}
+      options={chartOptions}
+      width={400}
+      height="auto"
+    />
+  );
+}
+
+ChartDonut.propTypes = {
+  series: PropTypes.array,
+};

package/minimal/src/sections/_examples/extra/chart-view/chart-line.jsx

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+
+import Chart, { useChart } from 'src/components/chart';
+
+// ----------------------------------------------------------------------
+
+export default function ChartLine({ series }) {
+  const chartOptions = useChart({
+    xaxis: {
+      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
+    },
+    tooltip: {
+      x: {
+        show: false,
+      },
+      marker: { show: false },
+    },
+  });
+
+  return (
+    <Chart dir="ltr" type="line" series={series} options={chartOptions} width="100%" height={320} />
+  );
+}
+
+ChartLine.propTypes = {
+  series: PropTypes.array,
+};

package/minimal/src/sections/_examples/extra/chart-view/chart-mixed.jsx

@@ -0,0 +1,59 @@
+import PropTypes from 'prop-types';
+
+import Chart, { useChart } from 'src/components/chart';
+
+// ----------------------------------------------------------------------
+
+export default function ChartMixed({ series }) {
+  const chartOptions = useChart({
+    stroke: {
+      width: [0, 2, 3],
+    },
+    plotOptions: {
+      bar: { columnWidth: '20%' },
+    },
+    fill: {
+      type: ['solid', 'gradient', 'solid'],
+    },
+    labels: [
+      '01/01/2003',
+      '02/01/2003',
+      '03/01/2003',
+      '04/01/2003',
+      '05/01/2003',
+      '06/01/2003',
+      '07/01/2003',
+      '08/01/2003',
+      '09/01/2003',
+      '10/01/2003',
+      '11/01/2003',
+    ],
+    xaxis: {
+      type: 'datetime',
+    },
+    yaxis: {
+      title: { text: 'Points' },
+      min: 0,
+    },
+    tooltip: {
+      shared: true,
+      intersect: false,
+      y: {
+        formatter: (value) => {
+          if (typeof value !== 'undefined') {
+            return `${value.toFixed(0)} points`;
+          }
+          return value;
+        },
+      },
+    },
+  });
+
+  return (
+    <Chart dir="ltr" type="line" series={series} options={chartOptions} width="100%" height={320} />
+  );
+}
+
+ChartMixed.propTypes = {
+  series: PropTypes.array,
+};

package/minimal/src/sections/_examples/extra/chart-view/chart-pie.jsx

@@ -0,0 +1,48 @@
+import PropTypes from 'prop-types';
+
+import Chart, { useChart } from 'src/components/chart';
+
+// ----------------------------------------------------------------------
+
+export default function ChartPie({ series }) {
+  const chartOptions = useChart({
+    labels: ['Team A', 'Team B', 'Team C', 'Team D'],
+    legend: {
+      position: 'right',
+      offsetX: -20,
+      offsetY: 64,
+      itemMargin: {
+        vertical: 8,
+      },
+    },
+    stroke: {
+      show: false,
+    },
+    dataLabels: {
+      enabled: true,
+      dropShadow: {
+        enabled: false,
+      },
+    },
+    tooltip: {
+      fillSeriesColor: false,
+    },
+    plotOptions: {
+      pie: {
+        donut: {
+          labels: {
+            show: false,
+          },
+        },
+      },
+    },
+  });
+
+  return (
+    <Chart dir="ltr" type="pie" series={series} options={chartOptions} width={400} height="auto" />
+  );
+}
+
+ChartPie.propTypes = {
+  series: PropTypes.array,
+};

package/minimal/src/sections/_examples/extra/chart-view/chart-radar-bar.jsx

@@ -0,0 +1,73 @@
+import PropTypes from 'prop-types';
+
+import { styled, useTheme } from '@mui/material/styles';
+
+import Chart, { useChart } from 'src/components/chart';
+
+// ----------------------------------------------------------------------
+
+const CHART_HEIGHT = 380;
+
+const LEGEND_HEIGHT = 72;
+
+const StyledChart = styled(Chart)(({ theme }) => ({
+  height: CHART_HEIGHT,
+  '& .apexcharts-canvas, .apexcharts-inner, svg, foreignObject': {
+    height: `100% !important`,
+  },
+  '& .apexcharts-legend': {
+    height: LEGEND_HEIGHT,
+    marginBottom: theme.spacing(3),
+    top: `calc(${CHART_HEIGHT - LEGEND_HEIGHT}px) !important`,
+  },
+}));
+
+// ----------------------------------------------------------------------
+
+export default function ChartRadarBar({ series }) {
+  const theme = useTheme();
+
+  const chartOptions = useChart({
+    stroke: {
+      width: 2,
+    },
+    fill: {
+      opacity: 0.48,
+    },
+    legend: {
+      floating: true,
+      position: 'bottom',
+      horizontalAlign: 'center',
+    },
+    xaxis: {
+      categories: ['2011', '2012', '2013', '2014', '2015', '2016'],
+      labels: {
+        style: {
+          colors: [
+            theme.palette.text.secondary,
+            theme.palette.text.secondary,
+            theme.palette.text.secondary,
+            theme.palette.text.secondary,
+            theme.palette.text.secondary,
+            theme.palette.text.secondary,
+          ],
+        },
+      },
+    },
+  });
+
+  return (
+    <StyledChart
+      dir="ltr"
+      type="radar"
+      series={series}
+      options={chartOptions}
+      width="100%"
+      height={280}
+    />
+  );
+}
+
+ChartRadarBar.propTypes = {
+  series: PropTypes.array,
+};

package/minimal/src/sections/_examples/extra/chart-view/chart-radial-bar.jsx

@@ -0,0 +1,73 @@
+import PropTypes from 'prop-types';
+
+import { styled } from '@mui/material/styles';
+
+import { fNumber } from 'src/utils/format-number';
+
+import Chart, { useChart } from 'src/components/chart';
+
+// ----------------------------------------------------------------------
+
+const CHART_HEIGHT = 380;
+
+const LEGEND_HEIGHT = 72;
+
+const StyledChart = styled(Chart)(({ theme }) => ({
+  height: CHART_HEIGHT,
+  '& .apexcharts-canvas, .apexcharts-inner, svg, foreignObject': {
+    height: `100% !important`,
+  },
+  '& .apexcharts-legend': {
+    height: LEGEND_HEIGHT,
+    marginBottom: theme.spacing(3),
+    top: `calc(${CHART_HEIGHT - LEGEND_HEIGHT}px) !important`,
+  },
+}));
+
+// ----------------------------------------------------------------------
+
+export default function ChartRadialBar({ series }) {
+  const chartOptions = useChart({
+    chart: {
+      sparkline: {
+        enabled: true,
+      },
+    },
+    labels: ['Apples', 'Oranges'],
+    legend: {
+      floating: true,
+      position: 'bottom',
+      horizontalAlign: 'center',
+    },
+    plotOptions: {
+      radialBar: {
+        hollow: {
+          size: '68%',
+        },
+        dataLabels: {
+          value: {
+            offsetY: 16,
+          },
+          total: {
+            formatter: () => fNumber(2324),
+          },
+        },
+      },
+    },
+  });
+
+  return (
+    <StyledChart
+      dir="ltr"
+      type="radialBar"
+      series={series}
+      options={chartOptions}
+      width="100%"
+      height={280}
+    />
+  );
+}
+
+ChartRadialBar.propTypes = {
+  series: PropTypes.array,
+};

package/minimal/src/sections/_examples/extra/chart-view/index.jsx

@@ -0,0 +1,234 @@
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Container from '@mui/material/Container';
+import CardHeader from '@mui/material/CardHeader';
+import CardContent from '@mui/material/CardContent';
+
+import { paths } from 'src/routes/paths';
+
+import CustomBreadcrumbs from 'src/components/custom-breadcrumbs';
+
+import ChartPie from './chart-pie';
+import ChartBar from './chart-bar';
+import ChartLine from './chart-line';
+import ChartArea from './chart-area';
+import ChartMixed from './chart-mixed';
+import ChartDonut from './chart-donut';
+import ChartsRadarBar from './chart-radar-bar';
+import ChartRadialBar from './chart-radial-bar';
+import ChartColumnSingle from './chart-column-single';
+import ChartColumnStacked from './chart-column-stacked';
+import ChartColumnNegative from './chart-column-negative';
+import ChartColumnMultiple from './chart-column-multiple';
+
+// ----------------------------------------------------------------------
+
+export default function ChartView() {
+  return (
+    <>
+      <Box
+        sx={{
+          py: 5,
+          bgcolor: (theme) => (theme.palette.mode === 'light' ? 'grey.200' : 'grey.800'),
+        }}
+      >
+        <Container>
+          <CustomBreadcrumbs
+            heading="Chart"
+            links={[
+              {
+                name: 'Components',
+                href: paths.components,
+              },
+              { name: 'Chart' },
+            ]}
+            moreLink={['https://apexcharts.com']}
+          />
+        </Container>
+      </Box>
+
+      <Container sx={{ my: 10 }}>
+        <Box
+          gap={3}
+          display="grid"
+          gridTemplateColumns={{ xs: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }}
+        >
+          <Card>
+            <CardHeader title="Area" />
+            <CardContent>
+              <ChartArea
+                series={[
+                  { name: 'series1', data: [31, 40, 28, 51, 42, 109, 100] },
+                  { name: 'series2', data: [11, 32, 45, 32, 34, 52, 41] },
+                ]}
+              />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader title="Line" />
+            <CardContent>
+              <ChartLine
+                series={[
+                  {
+                    name: 'Desktops',
+                    data: [10, 41, 35, 51, 49, 62, 69, 91, 148],
+                  },
+                ]}
+              />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader title="Column Single" />
+            <CardContent>
+              <ChartColumnSingle
+                series={[
+                  {
+                    name: 'Net Profit',
+                    data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
+                  },
+                ]}
+              />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader title="Column Multiple" />
+            <CardContent>
+              <ChartColumnMultiple
+                series={[
+                  {
+                    name: 'Net Profit',
+                    data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
+                  },
+                  {
+                    name: 'Revenue',
+                    data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
+                  },
+                ]}
+              />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader title="Column Stacked" />
+            <CardContent>
+              <ChartColumnStacked
+                series={[
+                  { name: 'Product A', data: [44, 55, 41, 67, 22, 43] },
+                  { name: 'Product B', data: [13, 23, 20, 8, 13, 27] },
+                  { name: 'Product C', data: [11, 17, 15, 15, 21, 14] },
+                  { name: 'Product D', data: [21, 7, 25, 13, 22, 8] },
+                ]}
+              />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader title="Column Negative" />
+            <CardContent>
+              <ChartColumnNegative
+                series={[
+                  {
+                    name: 'Cash Flow',
+                    data: [
+                      1.45, 5.42, 5.9, -0.42, -12.6, -18.1, -18.2, -14.16, -11.1, -6.09, 0.34, 3.88,
+                      13.07, 5.8, 2, 7.37, 8.1, 13.57, 15.75, 17.1, 19.8, -27.03, -54.4, -47.2,
+                      -43.3, -18.6, -48.6, -41.1, -39.6, -37.6, -29.4, -21.4, -2.4,
+                    ],
+                  },
+                ]}
+              />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader title="Bar" />
+            <CardContent>
+              <ChartBar series={[400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]} />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader title="Mixed" />
+            <CardContent>
+              <ChartMixed
+                series={[
+                  {
+                    name: 'Team A',
+                    type: 'column',
+                    data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30],
+                  },
+                  {
+                    name: 'Team B',
+                    type: 'area',
+                    data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43],
+                  },
+                  {
+                    name: 'Team C',
+                    type: 'line',
+                    data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39],
+                  },
+                ]}
+              />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader title="Pie" />
+            <CardContent
+              sx={{
+                height: 420,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <ChartPie series={[44, 55, 13, 43]} />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader title="Donut" />
+            <CardContent
+              sx={{
+                height: 420,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <ChartDonut series={[44, 55, 13, 43]} />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader title="Radial Bar" sx={{ mb: 5 }} />
+            <ChartRadialBar series={[44, 55]} />
+          </Card>
+
+          <Card>
+            <CardHeader title="Radar" sx={{ mb: 5 }} />
+            <ChartsRadarBar
+              series={[
+                {
+                  name: 'Series 1',
+                  data: [80, 50, 30, 40, 100, 20],
+                },
+                {
+                  name: 'Series 2',
+                  data: [20, 30, 40, 80, 20, 80],
+                },
+                {
+                  name: 'Series 3',
+                  data: [44, 76, 78, 13, 43, 10],
+                },
+              ]}
+            />
+          </Card>
+        </Box>
+      </Container>
+    </>
+  );
+}