first commit

2023-01-16 13:09:45 -05:00
commit a6ebce376c
271 changed files with 39454 additions and 0 deletions
@@ -0,0 +1,113 @@
+/* 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 from "react";
+import { Line } from "react-chartjs-2";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Filler,
+  {
+    id: "lineChart",
+  }
+);
+
+export default function QuickCounterChart({ primaryColor }) {
+  const lineChartOptions = {
+    type: "line",
+    responsive: true,
+    scales: {
+      x: {
+        ticks: {
+          display: false,
+        },
+        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,
+    elements: {
+      point: {
+        radius: [0, 0, 6, 0, 0, 0, 0, 0],
+        hoverRadius: 6,
+      },
+    },
+  };
+  const LineChartData = {
+    labels: [
+      "12AM",
+      "4PM",
+      "1.00AM",
+      "2.00AM",
+      "12AM",
+      "4PM",
+      "1.00AM",
+      "2.00AM",
+    ],
+    datasets: [
+      {
+        label: "First dataset",
+        data: [1, 5, 1, 5, 1, 19, 3, 8],
+        fill: true,
+        borderColor: primaryColor,
+        pointBorderColor: "rgba(226, 226, 226, 1)",
+        pointBackgroundColor: primaryColor,
+        backgroundColor: "#ffffff00",
+        borderWidth: 3,
+      },
+      // {
+      //   label: 'Data One',
+      //   backgroundColor: '#f87979',
+      //   data: [this.getRandomInt(), this.getRandomInt()]
+      // }
+    ],
+  };
+  const plugins = [{}];
+  return (
+    <Line
+      id="chart"
+      options={lineChartOptions}
+      data={LineChartData}
+      plugins={plugins}
+    />
+  );
+}