first commit

2023-01-16 13:09:45 -05:00
commit a6ebce376c
271 changed files with 39454 additions and 0 deletions
@@ -0,0 +1,139 @@
+import {
+  CategoryScale,
+  Chart as ChartJS,
+  Filler,
+  LinearScale,
+  LineElement,
+  PointElement,
+  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,
+  Tooltip,
+  Filler
+);
+export default function SellAnalysChart({ datasets, dataLvls }) {
+  const darkMode = useContext(DarkModeContext);
+  const options = {
+    responsive: true,
+    plugins: {
+      legend: {
+        position: "top",
+      },
+      title: {
+        display: false,
+        text: "Chart.js Line Chart",
+      },
+    },
+    // lineTension: 0.4,
+    scales: {
+      x: {
+        grid: {
+          color: darkMode.theme === "light" ? "#E3E4FE" : "#a7a9b533",
+          lineWidth: 2,
+          drawBorder: true,
+        },
+        gridLines: {
+          zeroLineColor: "transparent",
+        },
+      },
+
+      y: {
+        beginAtZero: true,
+        grid: {
+          color: darkMode.theme === "light" ? "#E3E4FE" : "#a7a9b533",
+          lineWidth: 2,
+          drawBorder: true,
+        },
+        gridLines: {
+          zeroLineColor: "transparent",
+        },
+        ticks: {
+          callback(value) {
+            return `${value} ETH`;
+          },
+        },
+      },
+    },
+    elements: {
+      point: {
+        radius: [6],
+        // hoverRadius: 6,
+      },
+    },
+  };
+  const labels = dataLvls;
+  let width;
+  let height;
+  let gradient;
+  function getGradient(ctx, chartArea) {
+    const chartWidth = chartArea.right - chartArea.left;
+    const chartHeight = chartArea.bottom - chartArea.top;
+    if (gradient === null || width !== chartWidth || height !== chartHeight) {
+      // Create the gradient because this is either the first render
+      // or the size of the chart has changed
+      width = chartWidth;
+      height = chartHeight;
+      gradient = ctx.createLinearGradient(
+        0,
+        chartArea.bottom,
+        0,
+        chartArea.top
+      );
+      gradient.addColorStop(0, "rgba(83, 86, 251,1)");
+      gradient.addColorStop(0.5, "rgba(195, 66, 249,1)");
+      gradient.addColorStop(1, "rgba(245, 57, 248,1)");
+    }
+
+    return gradient;
+  }
+  const data = {
+    labels,
+    datasets: [
+      {
+        label: "Dataset 1",
+        data: datasets,
+        // data: [0, 51, 9, "", 31, 6, "", "", "", 71, 51, 60, 5, 51, 21],
+        borderColor(context) {
+          const { chart } = context;
+          const { ctx, chartArea } = chart;
+
+          if (!chartArea) {
+            // This case happens on initial chart load
+            return null;
+          }
+          return getGradient(ctx, chartArea);
+        },
+        fill: true,
+        backgroundColor: () => {
+          const charts = document.getElementById("chart").getContext("2d");
+          const gradients = charts.createLinearGradient(0, 0, 0, 550);
+          gradients.addColorStop(0, "rgba(245, 57, 248,0.6)");
+          gradients.addColorStop(1, "rgba(83, 86, 251, 0.01)");
+
+          return gradients;
+        },
+        borderWidth: 4,
+        pointBackgroundColor(context) {
+          const { chart } = context;
+          const { ctx, chartArea } = chart;
+
+          if (!chartArea) {
+            // This case happens on initial chart load
+            return null;
+          }
+          return getGradient(ctx, chartArea);
+        },
+        // pointBorderWidth: 3,
+      },
+    ],
+  };
+  return <Line options={options} data={data} />;
+}