update assetID

app/src/components/ui/compareVersion/CompareLayOut.tsx

@@ -118,7 +118,6 @@ const CompareLayOut = () => {
     if (product) {
       setComparisonProduct(product.productUuid, product.productName);
       setLoadingProgress(1);
-      setIsPlaying(true);
       setIsPaused(true);
     }
   };

app/src/components/ui/compareVersion/ComparisonResult.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import PerformanceResult from "./result-card/PerformanceResult";
 import EnergyUsage from "./result-card/EnergyUsage";
-import { Bar, Line } from "react-chartjs-2";
+import { Bar, Line, Pie } from "react-chartjs-2";
 
 const ComparisonResult = () => {
   const options = useMemo(
@@ -33,21 +33,22 @@ const ComparisonResult = () => {
         backgroundColor: [purpleDark, purpleLight],
         borderColor: [purpleDark, purpleLight],
         borderWidth: 1,
+        borderRadius: 10,         // ✅ Rounded all corners (TypeScript-safe)
+        // borderSkipped: "bottom",  // ✅ This is allowed by the Chart.js types
       },
     ],
   };
 
-  const cycleTimeData = {
+
+  const cycleTimePieData = {
     labels: ["Layout 1", "Layout 2"],
     datasets: [
       {
         label: "Cycle Time (sec)",
-        data: [110, 110],
-        backgroundColor: [purpleLight],
-        borderColor: purpleDark,
+        data: [120, 110],
+        backgroundColor: [purpleDark, purpleLight],
+        borderColor: "#fff",
         borderWidth: 2,
-        tension: 0.4,
-        fill: false,
       },
     ],
   };
@@ -61,6 +62,8 @@ const ComparisonResult = () => {
         backgroundColor: [purpleDark, purpleLight],
         borderColor: [purpleDark, purpleLight],
         borderWidth: 1,
+        borderRadius: 10,
+        borderSkipped: false,
       },
     ],
   };
@@ -74,6 +77,8 @@ const ComparisonResult = () => {
         backgroundColor: [purpleDark, purpleLight],
         borderColor: [purpleDark, purpleLight],
         borderWidth: 1,
+        borderRadius: 10,
+        borderSkipped: false,
       },
     ],
   };
@@ -83,7 +88,6 @@ const ComparisonResult = () => {
       <div className="header">Performance Comparison</div>
       <div className="compare-result-wrapper">
         <EnergyUsage />
-
         <div className="throughPutCard-container comparisionCard">
           <h4>Throughput (units/hr)</h4>
           <div className="layers-wrapper">
@@ -95,9 +99,9 @@ const ComparisonResult = () => {
               <div className="key">Layout 2</div>
               <div className="value">550/ hr</div>
             </div>
-          </div>
-          <div className="chart">
-            <Bar data={throughputData} options={options} />
+            <div className="chart">
+              <Bar data={throughputData} options={options} />
+            </div>
           </div>
         </div>
 
@@ -122,7 +126,7 @@ const ComparisonResult = () => {
             </div>
           </div>
           <div className="chart">
-            <Line data={cycleTimeData} options={options} />
+            <Pie data={cycleTimePieData} options={options} />
           </div>
         </div>