first commit

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

@@ -0,0 +1,93 @@
+import { useMemo } from "react";
+import { Doughnut, Line } from "react-chartjs-2";
+
+interface ChartComponentProps {
+  type: any;
+  title: string;
+  fontFamily?: string;
+  fontSize?: string;
+  fontWeight?: "Light" | "Regular" | "Bold";
+  data: any;
+}
+
+const DoughnutGraphComponent = ({
+  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 <Doughnut data={chartData} options={options} />;
+};
+
+export default DoughnutGraphComponent;