Add custom status badge formatting and row highlighting to site KPI table with color-coded visual indicators for different health states

panel_app/kpi_health_check_panel.py

@@ -465,6 +465,73 @@ site_kpi_table = pn.widgets.Tabulator(
     height=520, sizing_mode="stretch_width", layout="fit_data_table"
 )
 
+try:
+    site_kpi_table.text_align = {
+        "status": "center",
+        "bad_days_recent": "center",
+        "max_streak_recent": "center",
+        "baseline_median": "right",
+        "recent_median": "right",
+    }
+    site_kpi_table.widths = {
+        "status": 170,
+        "KPI": 260,
+        "bad_days_recent": 140,
+        "max_streak_recent": 160,
+    }
+
+    site_kpi_table.formatters = {
+        "status": pn.io.JSCode(
+            """
+function format(cell, formatterParams, onRendered){
+  var v = cell.getValue();
+  var s = (v === null || v === undefined) ? '' : String(v);
+  var bg = '#455a64';
+  if(s === 'PERSISTENT_DEGRADED') bg = '#b71c1c';
+  else if(s === 'DEGRADED') bg = '#e53935';
+  else if(s === 'RESOLVED') bg = '#2e7d32';
+  else if(s === 'NO_DATA') bg = '#616161';
+  else if(s === 'OK') bg = '#1565c0';
+
+  onRendered(function(){
+    try {
+      var rowEl = cell.getRow().getElement();
+      if(rowEl){
+        rowEl.style.borderLeft = '0px solid transparent';
+        rowEl.style.backgroundColor = '';
+        if(s === 'PERSISTENT_DEGRADED'){
+          rowEl.style.borderLeft = '6px solid #b71c1c';
+          rowEl.style.backgroundColor = '#ffebee';
+        } else if(s === 'DEGRADED'){
+          rowEl.style.borderLeft = '6px solid #e53935';
+          rowEl.style.backgroundColor = '#fff5f5';
+        } else if(s === 'RESOLVED'){
+          rowEl.style.borderLeft = '6px solid #2e7d32';
+          rowEl.style.backgroundColor = '#f1f8e9';
+        } else if(s === 'NO_DATA'){
+          rowEl.style.borderLeft = '6px solid #616161';
+          rowEl.style.backgroundColor = '#f5f5f5';
+        }
+      }
+
+      var cellEl = cell.getElement();
+      if(cellEl){
+        cellEl.style.padding = '0px';
+        cellEl.style.textAlign = 'center';
+        cellEl.innerHTML = "<span style='display:inline-block; padding:2px 10px; border-radius:999px; font-weight:700; font-size:12px; color:#fff; background-color:" + bg + ";'>" + s + "</span>";
+      }
+    } catch (e) {
+    }
+  });
+
+  return s;
+}
+"""
+        )
+    }
+except Exception:  # noqa: BLE001
+    pass
+
 _set_tabulator_pagination(site_summary_table, page_size=50)
 _set_tabulator_pagination(multirat_summary_table, page_size=50)
 _set_tabulator_pagination(top_anomalies_table, page_size=50)