From ab1230f166956cc171fbc75290365ceccc0b1de9 Mon Sep 17 00:00:00 2001
From: Nalvazhuthi <nalvazhuthi@hexrfactory.com>
Date: Wed, 11 Jun 2025 09:52:40 +0530
Subject: [PATCH] refactor: enhance chart layout and styles in ComparisonResult
 component; add Pie chart for cycle time data

---
 .../ui/compareVersion/ComparisonResult.tsx    | 28 +++++++++++--------
 app/src/styles/layout/compareLayout.scss      | 17 +++++++++++
 2 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/app/src/components/ui/compareVersion/ComparisonResult.tsx b/app/src/components/ui/compareVersion/ComparisonResult.tsx
index 0f91a36..79fa57c 100644
--- a/app/src/components/ui/compareVersion/ComparisonResult.tsx
+++ b/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>
 
diff --git a/app/src/styles/layout/compareLayout.scss b/app/src/styles/layout/compareLayout.scss
index 07b5ad2..31966be 100644
--- a/app/src/styles/layout/compareLayout.scss
+++ b/app/src/styles/layout/compareLayout.scss
@@ -463,6 +463,7 @@
         width: 100%;
         display: flex;
         justify-content: space-between;
+        position: relative;
 
         .layer-wrapper {
             display: flex;
@@ -472,6 +473,12 @@
                 justify-content: end;
             }
         }
+
+        .chart {
+            width: 60%;
+            height: 70%;
+            position: absolute;
+        }
     }
 
     .chart {
@@ -484,6 +491,8 @@
 }
 
 .cycle-time-container {
+    position: relative;
+
     .cycle-main {
         display: flex;
         justify-content: space-between;
@@ -519,6 +528,14 @@
             }
         }
     }
+
+    .chart {
+        position: absolute;
+        bottom: 0;
+        left: 10px;
+        width: 60%;
+        height: 80%;
+    }
 }
 
 .overallDowntime-container {