From c67a0fd087ccb427e204523d60a57e5866ae6436 Mon Sep 17 00:00:00 2001
From: Clumsy-Coder <19594044+Clumsy-Coder@users.noreply.github.com>
Date: Sun, 7 Jan 2024 17:45:31 -0700
Subject: [PATCH] feat(components:charts): add `SubmissionsOvertimeChart`
 component

  ## what
  - add `SubmissionsOvertimeChart` component

  ## how
  - takes prop
    - data of type `SubmisionsOvertimeType[]`
  - use Recharts `AreaChart` component
  - use custom tooltip from `./src/components/charts/Tooltip`
  - use linear gradient for color the area chart

  ## why
  - this will be used to display submissions overtime of a problem using
    area chart

  ## where
  - ./src/components/charts/SubmissionsOvertimeChart.tsx

  ## usage
---
 .../charts/SubmissionsOvertimeChart.tsx       | 58 +++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 src/components/charts/SubmissionsOvertimeChart.tsx

diff --git a/src/components/charts/SubmissionsOvertimeChart.tsx b/src/components/charts/SubmissionsOvertimeChart.tsx
new file mode 100644
index 0000000..e1c0777
--- /dev/null
+++ b/src/components/charts/SubmissionsOvertimeChart.tsx
@@ -0,0 +1,58 @@
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+} from "recharts";
+
+import { getResponseType as SubmissionOvertimeType } from "@/app/api/submissions/overtime/[problemNum]/route";
+import ChartTooltip from "@/components/charts/Tooltip";
+
+type Props = {
+  data: SubmissionOvertimeType[];
+};
+
+const SubmissionsOvertimeChart = ({ data }: Props) => {
+  return (
+    <ResponsiveContainer>
+      <AreaChart data={data}>
+        <XAxis dataKey="time" />
+        <CartesianGrid strokeDasharray="3 3" vertical={false} opacity={0.3} />
+        <Tooltip
+          cursor={{ fill: "#d1d5db", opacity: "0.15" }}
+          isAnimationActive={false}
+          content={({ active, payload, label }) => (
+            <ChartTooltip
+              active={active}
+              payload={payload}
+              label={label}
+              valueFormatter={(number: number) =>
+                `${new Intl.NumberFormat("us").format(number).toString()}`
+              }
+            // labelFormatter={(payload) => payload[0].payload.tooltipTitle}
+            />
+          )}
+        />
+        {/* linear gradient */}
+        {/* obtained from https://www.youtube.com/watch?v=e4en8kRqwe8 */}
+        <defs>
+          <linearGradient id="color" x1={0} y1={0} x2={0} y2={1}>
+            <stop offset="0%" stopColor="#2451B7" stopOpacity={1.0} />
+            <stop offset="95%" stopColor="#2451B7" stopOpacity={0.05} />
+          </linearGradient>
+        </defs>
+        <Area
+          type="monotone"
+          dataKey="submissions"
+          stroke="#2451B7"
+          strokeWidth={3}
+          fill="url(#color)"
+        />
+      </AreaChart>
+    </ResponsiveContainer>
+  );
+};
+
+export default SubmissionsOvertimeChart;