103 lines
2.4 KiB
TypeScript
103 lines
2.4 KiB
TypeScript
import React, { useMemo } from "react";
|
|
import { Radar } from "react-chartjs-2";
|
|
import { ChartOptions, ChartData, RadialLinearScaleOptions } from "chart.js";
|
|
|
|
interface ChartComponentProps {
|
|
type: string;
|
|
title: string;
|
|
fontFamily?: string;
|
|
fontSize?: string;
|
|
fontWeight?: "Light" | "Regular" | "Bold";
|
|
data: number[]; // Expecting an array of numbers for radar chart data
|
|
}
|
|
|
|
const RadarGraphComponent = ({
|
|
title,
|
|
fontFamily,
|
|
fontSize,
|
|
fontWeight = "Regular",
|
|
data, // Now guaranteed to be number[]
|
|
}: ChartComponentProps) => {
|
|
// Memoize Font Weight Mapping
|
|
const chartFontWeightMap = useMemo(
|
|
() => ({
|
|
Light: "lighter" as const,
|
|
Regular: "normal" as const,
|
|
Bold: "bold" as const,
|
|
}),
|
|
[]
|
|
);
|
|
|
|
const fontSizeValue = useMemo(
|
|
() => (fontSize ? parseInt(fontSize) : 12),
|
|
[fontSize]
|
|
);
|
|
|
|
const fontWeightValue = useMemo(
|
|
() => chartFontWeightMap[fontWeight],
|
|
[fontWeight, chartFontWeightMap]
|
|
);
|
|
|
|
const chartFontStyle = useMemo(
|
|
() => ({
|
|
family: fontFamily || "Arial",
|
|
size: fontSizeValue,
|
|
weight: fontWeightValue,
|
|
}),
|
|
[fontFamily, fontSizeValue, fontWeightValue]
|
|
);
|
|
|
|
const options: ChartOptions<"radar"> = useMemo(
|
|
() => ({
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
title: {
|
|
display: true,
|
|
text: title,
|
|
font: chartFontStyle,
|
|
},
|
|
legend: {
|
|
display: false,
|
|
position: "top",
|
|
},
|
|
},
|
|
scales: {
|
|
r: {
|
|
min: 0,
|
|
max: 100,
|
|
angleLines: {
|
|
display: true,
|
|
},
|
|
ticks: {
|
|
display: true,
|
|
stepSize: 20,
|
|
},
|
|
} as RadialLinearScaleOptions,
|
|
},
|
|
}),
|
|
[title, chartFontStyle]
|
|
);
|
|
|
|
const chartData: ChartData<"radar"> = useMemo(
|
|
() => ({
|
|
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
|
datasets: [
|
|
{
|
|
label: "Dataset 1",
|
|
data, // Use the data passed as a prop
|
|
backgroundColor: "rgba(111, 66, 193, 0.2)",
|
|
borderColor: "#6f42c1",
|
|
borderWidth: 2,
|
|
fill: true,
|
|
},
|
|
],
|
|
}),
|
|
[data]
|
|
);
|
|
|
|
return <Radar data={chartData} options={options} />;
|
|
};
|
|
|
|
export default RadarGraphComponent;
|