91 lines
1.9 KiB
TypeScript
91 lines
1.9 KiB
TypeScript
import { useMemo } from "react";
|
|
import { Pie } from "react-chartjs-2";
|
|
|
|
interface ChartComponentProps {
|
|
type: any;
|
|
title: string;
|
|
fontFamily?: string;
|
|
fontSize?: string;
|
|
fontWeight?: "Light" | "Regular" | "Bold";
|
|
data: any;
|
|
}
|
|
|
|
const PieChartComponent = ({
|
|
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]
|
|
);
|
|
|
|
// Access the CSS variable for the primary accent color
|
|
const accentColor = getComputedStyle(document.documentElement)
|
|
.getPropertyValue("--accent-color")
|
|
.trim();
|
|
|
|
const options = useMemo(
|
|
() => ({
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
title: {
|
|
display: true,
|
|
text: title,
|
|
font: chartFontStyle,
|
|
},
|
|
legend: {
|
|
display: false,
|
|
},
|
|
},
|
|
}),
|
|
[title, chartFontStyle]
|
|
);
|
|
|
|
const chartData = {
|
|
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
|
|
datasets: [
|
|
{
|
|
label: "Dataset",
|
|
data: [12, 19, 3, 5, 2, 3],
|
|
backgroundColor: ["#6f42c1"],
|
|
borderColor: "#ffffff",
|
|
borderWidth: 2,
|
|
},
|
|
],
|
|
};
|
|
|
|
return <Pie data={chartData} options={options} />;
|
|
};
|
|
|
|
export default PieChartComponent;
|