updated ui

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

@@ -1,3 +1,5 @@
+import { StockIncreseIcon } from "../../../icons/RealTimeVisulationIcons";
+
 const ProgressCard = ({
   title,
   data,
@@ -16,7 +18,9 @@ const ProgressCard = ({
           </span>
           <div className="stock-description">{stock.description}</div>
         </span>
-        <div className="icon">Icon</div>
+        <div className="icon">
+          <StockIncreseIcon />
+        </div>
       </div>
     ))}
   </div>

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

@@ -1,12 +1,9 @@
 import React, { useMemo } from "react";
 import { Radar } from "react-chartjs-2";
-import {
-  ChartOptions,
-  ChartData,
-  RadialLinearScaleOptions,
-} from "chart.js";
+import { ChartOptions, ChartData, RadialLinearScaleOptions } from "chart.js";
 
 interface ChartComponentProps {
+  type: string;
   title: string;
   fontFamily?: string;
   fontSize?: string;
@@ -19,7 +16,7 @@ const RadarGraphComponent = ({
   fontFamily,
   fontSize,
   fontWeight = "Regular",
-  data,
+  data, // Now guaranteed to be number[]
 }: ChartComponentProps) => {
   // Memoize Font Weight Mapping
   const chartFontWeightMap = useMemo(
@@ -31,14 +28,15 @@ const RadarGraphComponent = ({
     []
   );
 
-  const fontSizeValue = useMemo(() => (fontSize ? parseInt(fontSize) : 12), [
-    fontSize,
-  ]);
+  const fontSizeValue = useMemo(
+    () => (fontSize ? parseInt(fontSize) : 12),
+    [fontSize]
+  );
 
-  const fontWeightValue = useMemo(() => chartFontWeightMap[fontWeight], [
-    fontWeight,
-    chartFontWeightMap,
-  ]);
+  const fontWeightValue = useMemo(
+    () => chartFontWeightMap[fontWeight],
+    [fontWeight, chartFontWeightMap]
+  );
 
   const chartFontStyle = useMemo(
     () => ({