first commit

2023-01-16 13:09:45 -05:00
commit a6ebce376c
271 changed files with 39454 additions and 0 deletions
@@ -0,0 +1,130 @@
+/* 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 InvestmentLineChart({ datasets }) {
+  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, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0],
+        hoverRadius: 6,
+      },
+    },
+  };
+  const LineChartData = {
+    labels: datasets,
+    datasets: [
+      {
+        label: "First dataset",
+        data: datasets,
+        fill: true,
+        backgroundColor: () => {
+          const chart = document.getElementById("chart").getContext("2d");
+          const gradient = chart.createLinearGradient(0, 0, 0, 285);
+          // background: linear-gradient(180deg, rgba(245, 57, 248, 0.2) -0.98%, rgba(245, 57, 248, 0) 100%);
+
+          gradient.addColorStop(0, "rgba(245, 57, 248,0.5)");
+          gradient.addColorStop(1, "rgba(245, 57, 248, 0)");
+
+          return gradient;
+        },
+        borderColor: "#f539f8",
+        pointBorderColor: "#ffffff",
+        pointBackgroundColor: "#f539f8",
+        pointBorderWidth: 3,
+        pointHoverBorderWidth: 3,
+      },
+    ],
+  };
+  const plugins = [
+    {
+      beforeDatasetsDraw(chart) {
+        chart.ctx.shadowColor = "rgba(0, 0, 0, 0.2)";
+        chart.ctx.shadowBlur = 10;
+      },
+      afterDatasetsDraw(chart) {
+        chart.ctx.shadowColor = "rgba(0, 0, 0, 0)";
+        chart.ctx.shadowBlur = 0;
+      },
+    },
+  ];
+
+  return (
+    <>
+      <Line
+        id="chart"
+        options={lineChartOptions}
+        data={LineChartData}
+        plugins={plugins}
+      />
+      <div className="text-light-purple flex justify-between px-[8px] -mt-5">
+        {LineChartData.datasets[0].data.map((value) => (
+          <span key={value + Math.random()} className="">
+            |
+          </span>
+        ))}
+      </div>
+    </>
+  );
+}