first commit

2023-01-16 13:09:45 -05:00
commit a6ebce376c
271 changed files with 39454 additions and 0 deletions
@@ -0,0 +1,106 @@
+/* eslint-disable no-plusplus */
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-shadow */
+/* eslint-disable no-restricted-globals */
+/* eslint-disable guard-for-in */
+/* eslint-disable vars-on-top */
+/* eslint-disable no-underscore-dangle */
+import {
+  CategoryScale,
+  Chart as ChartJS,
+  Filler,
+  LinearScale,
+  LineElement,
+  PointElement,
+  Title,
+  Tooltip,
+} from "chart.js";
+import React, { useContext } from "react";
+import { Line } from "react-chartjs-2";
+
+import DarkModeContext from "../Contexts/DarkModeContext";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Filler,
+  {
+    id: "lineChart",
+  }
+);
+
+export default function MarketVisitorAnalytic({ datasets, dataLvls }) {
+  const darkMode = useContext(DarkModeContext);
+  const lineChartOptions = {
+    type: "line",
+    responsive: true,
+    scales: {
+      x: {
+        grid: {
+          display: false,
+          drawBorder: false,
+        },
+        gridLines: {
+          zeroLineColor: "transparent",
+        },
+      },
+
+      y: {
+        beginAtZero: true,
+        ticks: {
+          display: false,
+        },
+        grid: {
+          display: false,
+          drawBorder: false,
+        },
+        gridLines: {
+          zeroLineColor: "transparent",
+        },
+      },
+    },
+    maintainAspectRatio: false,
+    lineTension: 0.5,
+  };
+  const LineChartData = {
+    labels: dataLvls,
+    datasets: [
+      {
+        label: "First dataset",
+        data: datasets,
+        // data: [50, 30, 100, 20, 50, 30, 100, 20],
+        fill: true,
+        backgroundColor:
+          darkMode.theme === "light"
+            ? "rgb(250, 236, 254)"
+            : " rgba(245, 57, 248, 0.1)",
+        borderColor: "#D040F9",
+        pointBorderColor: "#AE8FF7",
+        pointBackgroundColor: "#ffffff",
+        pointRadius: 5,
+        pointHoverRadius: 5,
+        borderWidth: 5,
+        pointBorderWidth: 3,
+        pointHoverBorderWidth: 5,
+      },
+      // {
+      //   label: 'Data One',
+      //   backgroundColor: '#f87979',
+      //   data: [this.getRandomInt(), this.getRandomInt()]
+      // }
+    ],
+  };
+  const plugins = [{}];
+  return (
+    <Line
+      id="chart"
+      options={lineChartOptions}
+      data={LineChartData}
+      plugins={plugins}
+    />
+  );
+}