94 lines
2.1 KiB
TypeScript
94 lines
2.1 KiB
TypeScript
|
import { useMemo } from "react";
|
||
|
|
import { Line, PolarArea } from "react-chartjs-2";
|
||
|
|
|
||
|
|
interface ChartComponentProps {
|
||
|
|
type: any;
|
||
|
|
title: string;
|
||
|
|
fontFamily?: string;
|
||
|
|
fontSize?: string;
|
||
|
|
fontWeight?: "Light" | "Regular" | "Bold";
|
||
|
|
data: any;
|
||
|
|
}
|
||
|
|
|
||
|
|
const PolarAreaGraphComponent = ({
|
||
|
|
title,
|
||
|
|
fontFamily,
|
||
|
|
fontSize,
|
||
|
|
fontWeight = "Regular",
|
||
|
|
}: ChartComponentProps) => {
|
||
|
|
// Memoize Font Weight Mapping
|
||
|
|
const chartFontWeightMap = useMemo(
|
||
|
|
() => ({
|
||
|
|
Light: "lighter" as const,
|
||
|
|
Regular: "normal" as const,
|
||
|
|
Bold: "bold" as const,
|
||
|
|
}),
|
||
|
|
[]
|
||
|
|
);
|
||
|
|
|
||
|
|
// Parse and Memoize Font Size
|
||
|
|
const fontSizeValue = useMemo(
|
||
|
|
() => (fontSize ? parseInt(fontSize) : 12),
|
||
|
|
[fontSize]
|
||
|
|
);
|
||
|
|
|
||
|
|
// Determine and Memoize Font Weight
|
||
|
|
const fontWeightValue = useMemo(
|
||
|
|
() => chartFontWeightMap[fontWeight],
|
||
|
|
[fontWeight, chartFontWeightMap]
|
||
|
|
);
|
||
|
|
|
||
|
|
// Memoize Chart Font Style
|
||
|
|
const chartFontStyle = useMemo(
|
||
|
|
() => ({
|
||
|
|
family: fontFamily || "Arial",
|
||
|
|
size: fontSizeValue,
|
||
|
|
weight: fontWeightValue,
|
||
|
|
}),
|
||
|
|
[fontFamily, fontSizeValue, fontWeightValue]
|
||
|
|
);
|
||
|
|
|
||
|
|
const options = useMemo(
|
||
|
|
() => ({
|
||
|
|
responsive: true,
|
||
|
|
maintainAspectRatio: false,
|
||
|
|
plugins: {
|
||
|
|
title: {
|
||
|
|
display: true,
|
||
|
|
text: title,
|
||
|
|
font: chartFontStyle,
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
display: false,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
scales: {
|
||
|
|
x: {
|
||
|
|
ticks: {
|
||
|
|
display: false, // This hides the x-axis labels
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
[title, chartFontStyle]
|
||
|
|
);
|
||
|
|
|
||
|
|
const chartData = {
|
||
|
|
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||
|
|
datasets: [
|
||
|
|
{
|
||
|
|
label: "My First Dataset",
|
||
|
|
data: [65, 59, 80, 81, 56, 55, 40],
|
||
|
|
backgroundColor: "#6f42c1", // Updated to #6f42c1 (Purple)
|
||
|
|
borderColor: "#ffffff", // Keeping border color white
|
||
|
|
borderWidth: 2,
|
||
|
|
fill: false,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
|
||
|
|
return <PolarArea data={chartData} options={options} />;
|
||
|
|
};
|
||
|
|
|
||
|
|
export default PolarAreaGraphComponent;
|