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
Clumsy-Coder · Jan 12, 2024 · 16d1311 · 16d1311
1 parent 1d95a99
commit 16d1311
Showing 1 changed file with 58 additions and 0 deletions.
diff --git a/src/components/charts/SubmissionsOvertimeChart.tsx 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;