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">