fix(web): metrics dashboard SoC chart text freezes on first-load value

The battery SoC doughnut chart's center text (percentage and kWh figures)
is drawn by a Chart.js afterDraw plugin registered once in mdInitSOCChart.
That plugin closed over the pct/d values from the moment the chart was
first created. On each 30s refresh, mdUpdateSOCChart only mutates the
existing chart's data array and calls .update() - it never recreates the
chart (mdRenderAll only calls mdInitSOCChart again if mdSocChart doesn't
exist yet) - so the doughnut ring's fill proportion updated correctly but
the on-screen number text stayed frozen at the first-load reading, while
every other card on the page (Health, Cost, API, Solar) re-renders fresh
from the latest data on every refresh. Fixes #4151.

The afterDraw plugin now reads chart.data.datasets[0].data[0] for the
percentage (already correctly updated by mdUpdateSOCChart) and the
MD_DATA global for the kWh figures (already correctly reassigned on every
refresh), instead of the stale closed-over values.

No JS execution/browser test infra exists in this codebase, so this can't
run the embedded JavaScript and check actual canvas output. Added a
structural test instead, checking the generated JS source itself reads
from chart.data/MD_DATA rather than the closure parameters, to catch a
regression back to the same bug shape.

🤖 Implemented with Claude Code, disclosed per repo convention.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Author: chalfontchubby

apps/predbat/tests/test_metrics_dashboard_soc_refresh.py

@@ -0,0 +1,49 @@
+# -----------------------------------------------------------------------------
+# Predbat Home Battery System
+# Copyright Trefor Southwell 2026 - All Rights Reserved
+# This application maybe used for personal use only and not for commercial use
+# -----------------------------------------------------------------------------
+# fmt off
+# pylint: disable=consider-using-f-string
+# pylint: disable=line-too-long
+# pylint: disable=attribute-defined-outside-init
+
+"""
+Test that the Metrics Dashboard's battery SoC doughnut chart center text reads live data on
+refresh rather than being frozen at whatever it was on first page load - see issue #4151.
+
+There's no JS execution/browser test infra in this codebase, so this can't run the embedded
+JavaScript and check actual canvas output. Instead it checks the generated JS source itself:
+the afterDraw plugin (Chart.js) must read the chart's own current data array and the always-
+current MD_DATA global, not the pct/d values that were closed over when the chart was first
+created in mdInitSOCChart - mdUpdateSOCChart (called on every 30s refresh once the chart
+already exists) only mutates the chart's data array, it never recreates the chart, so a closure
+over the original values would freeze the on-screen text at the first-load reading forever.
+"""
+
+from web_metrics_dashboard import get_metrics_dashboard_body
+
+
+def test_soc_chart_center_text_reads_live_data(my_predbat):
+    """
+    The afterDraw plugin body must not reference the pct/d parameters closed over at chart
+    creation time for the values it draws - it must read chart.data.datasets[0].data (updated
+    by mdUpdateSOCChart on every refresh) and the MD_DATA global (reassigned on every refresh).
+    """
+    print("**** test_soc_chart_center_text_reads_live_data ****")
+
+    body = get_metrics_dashboard_body("{}")
+
+    # Isolate the md-center-text plugin's afterDraw function body, up to its closing "}]"
+    marker = "id: 'md-center-text'"
+    assert marker in body, "md-center-text plugin not found in dashboard body"
+    start = body.index(marker)
+    end = body.index("}]", start) + 2
+    plugin_block = body[start:end]
+
+    assert "chart.data.datasets[0].data[0]" in plugin_block, "afterDraw should read the live percentage from the chart's own current data, not a closed-over value"
+    assert "MD_DATA.battery_soc_kwh" in plugin_block, "afterDraw should read the live kWh figure from the MD_DATA global, not a closed-over value"
+
+    print("✓ afterDraw plugin reads live chart data and MD_DATA, not stale closure values")
+    print("✓ Test passed")
+    return False

apps/predbat/unit_test.py

@@ -65,6 +65,7 @@
 from tests.test_hainterface_websocket import run_hainterface_websocket_tests
 from tests.test_web_if import run_test_web_if
 from tests.test_web_chart_currency import test_rates_chart_series_names_use_currency_symbol
+from tests.test_metrics_dashboard_soc_refresh import test_soc_chart_center_text_reads_live_data
 from tests.test_web_functions import run_web_functions_tests
 from tests.test_window import run_window_sort_tests, run_intersect_window_tests
 from tests.test_find_charge_rate import test_find_charge_rate, test_find_charge_rate_string_temperature, test_find_charge_rate_string_charge_curve
@@ -277,6 +278,7 @@ def main():
         ("manual_select", run_test_manual_select, "Manual select tests", False),
         ("web_if", run_test_web_if, "Web interface tests", False),
         ("web_chart_currency", test_rates_chart_series_names_use_currency_symbol, "Rates chart series names follow currency_symbols tests", False),
+        ("metrics_dashboard_soc_refresh", test_soc_chart_center_text_reads_live_data, "Metrics dashboard SoC chart live-refresh tests", False),
         ("web_functions", run_web_functions_tests, "Web function unit tests", False),
         ("nordpool", run_nordpool_test, "Nordpool tests", False),
         ("futurerate_auto", test_futurerate_auto, "FutureRate auto Agile detection tests", False),

apps/predbat/web_metrics_dashboard.py

@@ -209,16 +209,21 @@ def get_metrics_dashboard_body(data_json):
     options: { cutout: '72%', responsive: false, plugins: { legend: {display:false}, tooltip: {enabled:false} } },
     plugins: [{
       id: 'md-center-text',
+      // Read live values (chart's own current data, and the always-current MD_DATA global) rather
+      // than the pct/d closed over at chart creation time - mdUpdateSOCChart only mutates the
+      // chart's data array on refresh, it doesn't recreate the chart, so a closure over the
+      // original values here would freeze this text at whatever it was on first load.
       afterDraw: function (chart) {
         var w = chart.width, h = chart.height, c2 = chart.ctx;
+        var livePct = chart.data.datasets[0].data[0] || 0;
         c2.save();
         c2.fillStyle = mdVar('--md-text');
         c2.font = 'bold 2rem sans-serif';
         c2.textAlign = 'center'; c2.textBaseline = 'middle';
-        c2.fillText(mdFmt(pct, 0) + '%', w / 2, h / 2 - 10);
+        c2.fillText(mdFmt(livePct, 0) + '%', w / 2, h / 2 - 10);
         c2.font = '0.85rem sans-serif';
         c2.fillStyle = mdVar('--md-muted');
-        c2.fillText(mdFmt(d.battery_soc_kwh, 1) + ' / ' + mdFmt(d.battery_max_kwh, 1) + ' kWh', w / 2, h / 2 + 18);
+        c2.fillText(mdFmt(MD_DATA.battery_soc_kwh, 1) + ' / ' + mdFmt(MD_DATA.battery_max_kwh, 1) + ' kWh', w / 2, h / 2 + 18);
         c2.restore();
       }
     }]