first commit

app/src/components/ui/realTimeVis/charts/PieGraphComponent.tsx

@@ -0,0 +1,91 @@
+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();
+
+  console.log("accentColor: ", accentColor);
+  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;