From c1e5e25c54839e902fb19ad3127ac92982f88330 Mon Sep 17 00:00:00 2001
From: Nalvazhuthi <nalvazhuthi@hexrfactory.com>
Date: Sat, 3 May 2025 17:57:57 +0530
Subject: [PATCH] feat: Update throughput chart data and styling; hide axes and
 add background pattern

---
 .../ui/analysis/ProductionCapacity.tsx        | 25 ++++++-------------
 .../components/simulation/analysis.scss       | 18 ++++++++++---
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/app/src/components/ui/analysis/ProductionCapacity.tsx b/app/src/components/ui/analysis/ProductionCapacity.tsx
index ad69a43..1cdf105 100644
--- a/app/src/components/ui/analysis/ProductionCapacity.tsx
+++ b/app/src/components/ui/analysis/ProductionCapacity.tsx
@@ -8,7 +8,6 @@ import {
   PointElement,
 } from "chart.js";
 import { PowerIcon, ProductionCapacityIcon } from "../../icons/analysis";
-import { ThroughputIcon } from "../../icons/3dChartIcons";
 
 ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement);
 
@@ -20,8 +19,8 @@ const ThroughputSummary = () => {
   };
 
   const throughputData = {
-    labels: ["08:00", "08:10", "08:20", "08:30", "08:40", "08:50", "09:00"],
-    data: [100, 120, 110, 130, 125, 128, 132],
+    labels: ["08:00", "08:10", "08:20", "08:30", "08:40", "08:50"],
+    data: [5, 10, 8, 10, 12, 10],
     totalThroughput: 1240,
     assetUsage: 85,
   };
@@ -56,22 +55,11 @@ const ThroughputSummary = () => {
     responsive: true,
     scales: {
       x: {
-        grid: {
-          display: false,
-        },
-        ticks: {
-          display: false,
-          color: "#fff",
-        },
+        display: false, // hide X axis completely
       },
       y: {
-        grid: {
-          display: false,
-        },
-        ticks: {
-          display: false,
-          color: "#fff",
-        },
+        display: false, // hide Y axis completely
+        min: 0, // force Y axis to start at 0
       },
     },
     plugins: {
@@ -83,6 +71,7 @@ const ThroughputSummary = () => {
       },
     },
   };
+  
 
   return (
     <div className="production analysis-card">
@@ -166,3 +155,5 @@ const ThroughputSummary = () => {
 };
 
 export default ThroughputSummary;
+
+// Can we add dot pattern to background of lineChart and remove axis
diff --git a/app/src/styles/components/simulation/analysis.scss b/app/src/styles/components/simulation/analysis.scss
index 4e10bf4..34b13a5 100644
--- a/app/src/styles/components/simulation/analysis.scss
+++ b/app/src/styles/components/simulation/analysis.scss
@@ -128,7 +128,7 @@
 
         .throughput-value {
           font-size: var(--font-size-small);
-          flex: 1;
+          flex: 0.8;
           display: flex;
           flex-direction: column;
 
@@ -140,15 +140,26 @@
         }
 
         .lineChart {
+          flex: 1.2;
           max-width: 200px;
           height: 100px;
           position: relative;
 
+          position: relative;
+          background-image: radial-gradient(#d3d3d3 1px, transparent 1px);
+          background-size: 10px 10px;
+          border-radius: 8px;
+
           .assetUsage {
             text-align: right;
             position: absolute;
             right: 0;
             top: 0;
+
+            .key,
+            .value {
+              font-size: var(--font-size-regular);
+            }
           }
 
           canvas {
@@ -276,7 +287,7 @@
   }
 
   .roiSummary-container {
-    max-height: 60vh;
+    // max-height: 60vh;
     overflow-y: auto;
   }
 
@@ -335,6 +346,7 @@
           gap: 3px;
           align-items: center;
           font-weight: 300;
+
           .key {
             font-weight: 500;
             font-size: var(--font-size-large);
@@ -587,4 +599,4 @@
   }
 }
 
-// Breakdown Table Open/Close Logic
+// Breakdown Table Open/Close Logic
\ No newline at end of file