From 109b5497674c543c241c8dc12fe7fb26eac48b50 Mon Sep 17 00:00:00 2001
From: Robert Romero <robert.e.romero@gmail.com>
Date: Wed, 6 Aug 2025 20:54:15 -0700
Subject: [PATCH] Add KPI tile for top PIs

---
 src/slurmcostmanager.css |  2 +-
 src/slurmcostmanager.js  | 24 ++++++++++++++++++------
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/slurmcostmanager.css b/src/slurmcostmanager.css
index ad238c7..51ed1a5 100644
--- a/src/slurmcostmanager.css
+++ b/src/slurmcostmanager.css
@@ -148,7 +148,7 @@ nav button:hover {
   flex: 0 0 200px;
   position: relative;
   width: 200px;
-  height: 120px;
+  min-height: 120px;
 
 }
 .kpi-label {
diff --git a/src/slurmcostmanager.js b/src/slurmcostmanager.js
index e43b87b..e916968 100644
--- a/src/slurmcostmanager.js
+++ b/src/slurmcostmanager.js
@@ -165,7 +165,8 @@ function KpiTile({ label, value, renderChart }) {
     'div',
     { className: 'kpi-tile' },
     React.createElement('div', { className: 'kpi-label' }, label),
-    React.createElement('div', { className: 'kpi-value' }, value),
+    value !== undefined && value !== null &&
+      React.createElement('div', { className: 'kpi-value' }, value),
     renderChart && renderChart()
   );
 }
@@ -279,7 +280,7 @@ function HistoricalUsageChart({ monthly }) {
   return React.createElement('div', { className: 'chart-container' }, React.createElement('canvas', { ref: canvasRef, width: 600, height: 300 }));
 }
 
-function PiConsumptionChart({ details }) {
+function PiConsumptionChart({ details, width = 300, height = 300, legend = true }) {
   const canvasRef = useRef(null);
   useEffect(() => {
     if (!canvasRef.current) return;
@@ -323,18 +324,18 @@ function PiConsumptionChart({ details }) {
         responsive: false,
         maintainAspectRatio: false,
         plugins: {
-          legend: { position: 'right' }
+          legend: legend ? { position: 'right' } : { display: false }
         }
       }
     });
 
     return () => chart.destroy();
-  }, [details]);
+  }, [details, width, height, legend]);
 
   return React.createElement(
     'div',
-    { className: 'chart-container', style: { width: '300px', height: '300px' } },
-    React.createElement('canvas', { ref: canvasRef, width: 300, height: 300 })
+    { className: 'chart-container', style: { width: `${width}px`, height: `${height}px` } },
+    React.createElement('canvas', { ref: canvasRef, width, height })
   );
 }
 
@@ -501,6 +502,17 @@ function Summary({ summary, details, daily, monthly }) {
             actual: summary.total,
             target: targetRevenue
           })
+      }),
+      React.createElement(KpiTile, {
+        label: 'Top 10 PIs',
+        value: null,
+        renderChart: () =>
+          React.createElement(PiConsumptionChart, {
+            details,
+            width: 120,
+            height: 120,
+            legend: false
+          })
       })
     ),
     React.createElement('h3', null, 'Top 10 PIs by consumption'),