From 72ed5d376f572dddc3d523d4146b643e061cd9df Mon Sep 17 00:00:00 2001
From: Clumsy-Coder <19594044+Clumsy-Coder@users.noreply.github.com>
Date: Mon, 8 Jan 2024 18:04:41 -0700
Subject: [PATCH] feat(components:charts): add `SubmissionLanguageRadarChart`
 component

  ## what
  - add `SubmissionLanguageRadarChart` component

  ## how
  - takes a prop
    - data of type `/api/submissions/language/[problemNum]` GET response
  - process the data
  - use Recharts `radar` chart
  - use custom tooltip from `./src/components/charts/Tooltip`
  - use radial gradient for color inside of the radar

  ## why
  - this will display submissions by language of a problem using `radar`
    chart

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

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

diff --git a/src/components/charts/SubmissionLanguageRadarChart.tsx b/src/components/charts/SubmissionLanguageRadarChart.tsx
new file mode 100644
index 0000000..828c704
--- /dev/null
+++ b/src/components/charts/SubmissionLanguageRadarChart.tsx
@@ -0,0 +1,60 @@
+import {
+  Radar,
+  RadarChart,
+  PolarAngleAxis,
+  PolarGrid,
+  ResponsiveContainer,
+  Tooltip,
+} from "recharts";
+
+import ChartTooltip from "@/components/charts/Tooltip";
+import { processSubmissionLanguageRadarChart } from "@/utils/dataProcessing";
+import { getResponseType } from "@/app/api/submissions/language/[problemNum]/route";
+
+type Props = {
+  data: getResponseType;
+};
+
+const SubmissionLanguageRadarChart = ({ data }: Props) => {
+  const processedData = processSubmissionLanguageRadarChart(data);
+  return (
+    <ResponsiveContainer>
+      <RadarChart data={processedData} cx="50%" cy="50%" outerRadius="90%">
+        <PolarGrid opacity={0.3} />
+        <PolarAngleAxis dataKey="language" />
+        <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}
+            />
+          )}
+        />
+        <defs>
+          <radialGradient id="radarColor" gradientUnits="userSpaceOnUse">
+            <stop offset="0%" stopColor="#2451B7" stopOpacity={0.0} />
+            {/* <stop offset="70%" stopColor="#2451B7" stopOpacity={0.6} /> */}
+            <stop offset="90%" stopColor="#2451B7" stopOpacity={0.9} />
+          </radialGradient>
+        </defs>
+        <Radar
+          type="monotone"
+          dataKey="count"
+          stroke="#2451B7"
+          fill="url(#radarColor)"
+          fillOpacity={0.9}
+          strokeWidth={3}
+        />
+      </RadarChart>
+    </ResponsiveContainer>
+  );
+};
+
+export default SubmissionLanguageRadarChart;