feat: update ComparisonResult and EnergyUsage components with new chart layouts and styling adjustments

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

@@ -100,7 +100,12 @@ const ComparisonResult = () => {
                 <div className="key">mins</div>
               </div>
             </div>
-            <div className="chart"></div>
+            <div className="chart">
+              <div className="vertical-chart">
+                <div className="layout1"></div>
+                <div className="layout2"></div>
+              </div>
+            </div>
           </div>
         </div>
 

app/src/components/ui/compareVersion/result-card/EnergyUsage.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Line } from "react-chartjs-2";
 import {
   Chart as ChartJS,
@@ -42,31 +42,35 @@ const EnergyUsage = () => {
     ],
   };
 
-  const options = {
-    responsive: true,
-    plugins: {
-      legend: {
-        display: false, // Hide legend
-      },
-      tooltip: {
-        enabled: false, // Hide tooltips
-      },
-    },
-    scales: {
-      x: {
-        display: false, // Hide x-axis
-        grid: {
+  const options = useMemo(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        title: {
+          display: true,
+        },
+        legend: {
           display: false,
         },
       },
-      y: {
-        display: false, // Hide y-axis
-        grid: {
-          display: false,
+      scales: {
+        x: {
+          display: false, // Hide x-axis
+          grid: {
+            display: false,
+          },
+        },
+        y: {
+          display: false, // Hide y-axis
+          grid: {
+            display: false,
+          },
         },
       },
-    },
-  };
+    }),
+    []
+  );
 
   return (
     <div className="comparisionCard energy-usage">

app/src/styles/layout/compareLayout.scss

@@ -481,10 +481,13 @@
     }
 
     .chart {
+        height: 100%;
         width: 90%;
         position: absolute;
         top: 10px;
         left: 0;
+        margin-bottom: 20px;
+        padding: 20px;
     }
 }
 
@@ -556,6 +559,9 @@
 .overallDowntime-container {
     .totalDownTime-wrapper {
         display: flex;
+        height: auto;
+        width: 100%;
+        justify-content: space-between;
 
         .totalDownTime {
             width: 70%;
@@ -589,8 +595,33 @@
         }
 
         .chart {
+            height: auto;
             width: 30%;
+            width: 20px;
             position: relative;
+            perspective: 800px;
+            /* Enables 3D viewing */
+
+
+            .vertical-chart {
+                height: 100%;
+                display: flex;
+                flex-direction: column-reverse;
+                gap: 6px;
+
+                .layout2 {
+                    transform-style: preserve-3d;
+                    transform: rotateX(15deg);
+                    /* 3D tilt */
+                    height: 20%;
+                    background-color: #F3A60D;
+                }
+
+                .layout1 {
+                    height: 80%;
+                    background-color: #6F42C1;
+                }
+            }
         }
     }
 }