Skip to content
This repository has been archived by the owner on Jan 16, 2024. It is now read-only.

Commit

Permalink
feat(components:charts): add SubmissionLanguageRadarChart component
Browse files Browse the repository at this point in the history
  ## 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
  • Loading branch information
Clumsy-Coder committed Jan 12, 2024
1 parent a6cfeca commit fc5ecfc
Showing 1 changed file with 60 additions and 0 deletions.
60 changes: 60 additions & 0 deletions src/components/charts/SubmissionLanguageRadarChart.tsx
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit fc5ecfc

Please sign in to comment.