Refresh prices every price point, not once a day (#1257)

* Refresh prices every price point, not once a day

The price plot labels every bar from the live browser clock, refreshed
every 15 minutes, but reads the array starting at the cursor in the last
importprice.json payload. Those two clocks drift apart, because the
prices are only refetched when the current price changes, or once a day:

    priceFetchTimeout = setTimeout(getPrices, ((24-date.getHours())*3600000)+10)

For an hour of staleness every bar shows the price of the hour before
its label, so a modifier configured to start at 23 appears to start at
00. Users on a spot price never see it, since the hourly change of the
current price refetches the payload for them. On a fixed price the
current price only changes when a modifier does, so the plot drifts a
bar per hour for as long as the page stays open, and keeps showing
yesterday's array for up to 59 minutes past midnight.

Rearm on the next price point instead, the way getDayPlot() already
rearms on the next hour.

Reported in #1255

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* Advance the price cursor by the points passed since the fetch

Refreshing on every price point keeps the cursor current, but only while
the device answers. A failed or delayed fetch puts the plot back to
labelling from the live clock while indexing from an old cursor, and it
mislabels silently.

Stamp the payload when it arrives and skip the points that have passed
since, so a stale payload draws the bars it still has under the right
labels and then runs out, rather than drawing the wrong ones.

Price points start on the whole hour in the price zone, which is a whole
number of hours from UTC, so counting them off epoch boundaries needs no
timezone handling.

Reported in #1255

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: gskjold

ui/dist/index.js

@@ -123,17 +123,22 @@ export async function getPrices() {
     {
         const response = await fetchWithTimeout("importprice.json");
         importPrices = (await response.json())
+        importPrices.fetched = Date.now();
         importPricesStore.set(importPrices);
     }
 
     if(importPrices?.importExportPriceDifferent) {
         const response = await fetchWithTimeout("exportprice.json");
         exportprices = (await response.json())
+        exportprices.fetched = Date.now();
         exportPricesStore.set(exportprices);
     }
 
+    // The plot labels every bar from the live clock, but reads the array from
+    // the cursor in this payload, so it must be refreshed every price point
     let date = new Date();
-    priceFetchTimeout = setTimeout(getPrices, ((24-date.getHours())*3600000)+10)
+    let resolution = importPrices?.resolution ? importPrices.resolution : 60;
+    priceFetchTimeout = setTimeout(getPrices, ((resolution-(date.getMinutes()%resolution))*60000)+10)
 }
 
 let dayPlot = {};

ui/src/lib/DataStores.js

@@ -42,6 +42,14 @@
             min = max = 0;
             addHours(cur, sysinfo.clock_offset - ((24 + cur.getHours() - cur.getUTCHours())%24));
             let i = json?.cursor ? json.cursor : 0;
+            if(json?.fetched && json?.resolution) {
+                // The cursor is from when the payload was fetched, the labels
+                // are from now, so skip the points passed since. Price points
+                // start on the whole hour in the price zone, which is a whole
+                // number of hours from UTC, so epoch boundaries line up
+                let pointMs = json.resolution * 60000;
+                i += Math.floor(Date.now()/pointMs) - Math.floor(json.fetched/pointMs);
+            }
             cur.setMinutes(Math.floor(cur.getMinutes()/json?.resolution)*json?.resolution,0,0);
             while(i < json?.prices?.length) {
                 val = json.prices[i];