first commit

2023-03-25 20:44:56 -04:00
commit 97cc85c49d
711 changed files with 109164 additions and 0 deletions
@@ -0,0 +1,131 @@
+import React from "react";
+import Card from "@mui/material/Card";
+import { Typography } from "@mui/material";
+import dynamic from "next/dynamic";
+const Chart = dynamic(() => import("react-apexcharts"), {
+  ssr: false,
+});
+
+const AudienceOverview = () => {
+  const series = [
+    {
+      name: "Orders",
+      data: [44, 55, 57, 56, 61, 58, 63, 60, 66, 70, 75, 80],
+    },
+    {
+      name: "Net Revenue",
+      data: [76, 85, 101, 98, 87, 105, 91, 114, 94, 100, 110, 96],
+    },
+    {
+      name: "Refunds",
+      data: [35, 41, 36, 26, 45, 48, 52, 53, 41, 55, 45, 60],
+    },
+  ];
+  const options = {
+    chart: {
+      toolbar: {
+        show: false,
+      },
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        columnWidth: "40%",
+        endingShape: "rounded",
+        borderRadius: "4",
+      },
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    stroke: {
+      show: true,
+      width: 1,
+      colors: ["transparent"],
+    },
+    colors: ["#757FEF", "#2DB6F5", "#EE368C"],
+    xaxis: {
+      categories: [
+        "Jan",
+        "Feb",
+        "Mar",
+        "Apr",
+        "May",
+        "Jun",
+        "Jul",
+        "Aug",
+        "Sep",
+        "Oct",
+        "Nov",
+        "Dec",
+      ],
+      labels: {
+        style: {
+          colors: "#A9A9C8",
+          fontSize: "12px",
+        },
+      },
+    },
+    yaxis: {
+      labels: {
+        style: {
+          colors: "#A9A9C8",
+          fontSize: "12px",
+        },
+      },
+      axisBorder: {
+        show: false,
+        colors: "#f6f6f7",
+      },
+    },
+    fill: {
+      opacity: 1,
+    },
+    tooltip: {
+      y: {
+        formatter: function (val) {
+          return "$ " + val + " Thousands";
+        },
+      },
+    },
+    legend: {
+      offsetY: 12,
+      position: "top",
+      horizontalAlign: "right",
+    },
+    grid: {
+      show: true,
+      borderColor: "#f6f6f7",
+    },
+  };
+
+  return (
+    <>
+      <Card
+        sx={{
+          boxShadow: "none",
+          borderRadius: "10px",
+          p: "25px 25px 15px",
+          mb: "15px",
+        }}
+      >
+        <Typography
+          as="h3"
+          sx={{
+            fontSize: 18,
+            fontWeight: 500,
+            borderBottom: "1px solid #EEF0F7",
+            paddingBottom: "10px",
+          }}
+          className="for-dark-bottom-border"
+        >
+          Audience Overview
+        </Typography>
+
+        <Chart options={options} series={series} type="bar" height={328} />
+      </Card>
+    </>
+  );
+};
+
+export default AudienceOverview;