v0.33.6

src/admin/web/app/chart-scales.js

@@ -0,0 +1,24 @@
+// Stable plot ranges: percentages are absolute 0-100; unbounded metrics have
+// unit-appropriate zero-based floors, expanding only for real higher readings.
+window.rustProxyChartScale = (() => {
+    const floors = { rate: 100, count: 10, ms: 100, bytes: 64 * 1024 * 1024, "bytes/s": 64 * 1024 };
+    const ceilings = new Map();
+    function peak(key, unit, series) {
+        if (unit === "percent") return 100;
+        const floor = floors[unit] ?? 1;
+        let maximum = floor;
+        for (const values of series) for (const value of values) {
+            if (typeof value === "number" && Number.isFinite(value) && value >= 0)
+                maximum = Math.max(maximum, value);
+        }
+        const magnitude = 10 ** Math.floor(Math.log10(maximum));
+        const tick = [1, 2, 5, 10].find(n => n * magnitude >= maximum) ?? 10;
+        const result = Math.max(ceilings.get(key) ?? 0, tick * magnitude);
+        ceilings.set(key, result);
+        return result;
+    }
+    function reset(prefix) {
+        for (const key of ceilings.keys()) if (key.startsWith(prefix)) ceilings.delete(key);
+    }
+    return { peak, reset };
+})();

src/admin/web/app/overview-extra-metrics.js

@@ -134,10 +134,10 @@ window.rustProxyExtraOverview = (() => {
         if (unit === "rate") return `${fmt(value, 1)}/s`;
         return fmt(value);
     }
-    function points(history, unit) {
+    function points(id, history, unit) {
         if (!history.length) return "0,55 300,55";
-        const peak = unit === "percent" ? Math.max(100, ...history) : Math.max(1, ...history);
-        return history.map((v, i) => `${i * 300 / Math.max(1, history.length - 1)},${55 - v / peak * 50}`).join(" ");
+        const peak = window.rustProxyChartScale.peak(`extra:${id}`, unit, [history]);
+        return history.map((v, i) => `${i * 300 / Math.max(1, history.length - 1)},${55 - Math.min(v, peak) / peak * 50}`).join(" ");
     }
     function render(status, record = true) {
         if (!status || currentPanel !== "overview") return;
@@ -150,6 +150,7 @@ window.rustProxyExtraOverview = (() => {
             const value = metric.value;
             if (lastUnits.get(id) !== metric.unit) {
                 histories.delete(id);
+                window.rustProxyChartScale.reset(`extra:${id}`);
                 lastUnits.set(id, metric.unit);
             }
             if (!bounded.has(id) && id !== "extra_cache_hit_rate") {
@@ -159,7 +160,7 @@ window.rustProxyExtraOverview = (() => {
                     if (history.length > limit()) history.shift();
                     histories.set(id, history);
                 }
-                $(`overview-extra-${id}-line`)?.setAttribute("points", points(history, metric.unit));
+                $(`overview-extra-${id}-line`)?.setAttribute("points", points(id, history, metric.unit));
             }
             if (record) {
                 lastValue.set(id, value);
@@ -177,7 +178,7 @@ window.rustProxyExtraOverview = (() => {
             if (detail && id !== "extra_cache_hit_rate") detail.textContent = metric.detail || t("overviewExtraRecentSamples");
         }
     }
-    function reset() { histories.clear(); lastCounter.clear(); lastValue.clear(); lastUnits.clear(); lastSegments.clear(); }
+    function reset() { histories.clear(); lastCounter.clear(); lastValue.clear(); lastUnits.clear(); lastSegments.clear(); window.rustProxyChartScale.reset("extra:"); }
     window.rustProxyOverviewSamples?.onChange?.(() => {
         for (const history of histories.values()) window.rustProxyOverviewSamples.trim(history);
         if (typeof latestStatus !== "undefined" && latestStatus && currentPanel === "overview") render(latestStatus, false);

src/admin/web/app/overview-wide-metrics.js

@@ -6,7 +6,7 @@ window.rustProxyWideOverview = (() => {
                 [s.metrics?.http1_requests, s.metrics?.http2_requests, s.metrics?.http3_requests]
         },
         wide_cpu: {
-            unit: "percent", names: ["system", "process"], values: s =>
+            unit: "percent", names: ["system", "process"], max: 100, values: s =>
                 [(s.live_system || s.system)?.cpu_percent, (s.live_system || s.system)?.process_cpu_percent]
         },
         wide_memory: {
@@ -72,7 +72,8 @@ window.rustProxyWideOverview = (() => {
             const value = values[i];
             if (value === null) { drawing = false; continue; }
             const x = Math.round(600 * i / Math.max(1, count - 1));
-            const y = Math.round(137 - 120 * value / peak);
+            // Fixed-range charts stop at the upper bound; the legend keeps the real reading.
+            const y = Math.round(137 - 120 * Math.min(value, peak) / peak);
             result += `${drawing ? " L" : " M"}${x} ${y}`;
             drawing = true;
         }
@@ -98,7 +99,7 @@ window.rustProxyWideOverview = (() => {
                 }
                 last.set(id, values);
             }
-            const peak = Math.max(1, ...series.flat().filter(n => n !== null));
+            const peak = config.max ?? window.rustProxyChartScale.peak(`wide:${id}`, config.unit, series);
             config.names.forEach((key, i) => {
                 const value = values[i];
                 const field = $(`overview-wide-${id}-${key}-value`);
@@ -111,7 +112,7 @@ window.rustProxyWideOverview = (() => {
                 : format(values[0], config.unit);
         }
     }
-    function reset() { history.clear(); baselines.clear(); last.clear(); revision = null; }
+    function reset() { history.clear(); baselines.clear(); last.clear(); revision = null; window.rustProxyChartScale.reset("wide:"); }
     window.rustProxyOverviewSamples?.onChange?.(() => {
         for (const series of history.values()) for (const values of series) window.rustProxyOverviewSamples.trim(values);
         if (typeof latestStatus !== "undefined" && latestStatus && currentPanel === "overview") render(latestStatus, false);

src/admin/web/app/web-overview.js

@@ -87,7 +87,7 @@ window.rustProxyWebOverview = (() => {
         return output;
     }
     function smallPath(values) {
-        const peak = Math.max(1, ...values.filter(v => v != null));
+        const peak = window.rustProxyChartScale.peak("web:php-small", "rate", [values]);
         return values.filter(value => value !== null).map((value, i, present) => `${i * 300 / Math.max(1, present.length - 1)},${55 - value / peak * 50}`).join(" ");
     }
     function ring(id, amounts) {
@@ -173,7 +173,8 @@ window.rustProxyWebOverview = (() => {
                 names.forEach((_, i) => { series[i].push(set[id]?.[i] ?? null); window.rustProxyOverviewSamples.trim(series[i]); });
                 histories.set(id, series);
             }
-            const peak = Math.max(1, ...series.flat().filter(v => v !== null));
+            const unit = id === "www_latency" ? "ms" : id === "www_traffic" ? "bytes/s" : "rate";
+            const peak = window.rustProxyChartScale.peak(`web:${id}`, unit, series);
             names.forEach((name, i) => {
                 const value = set[id]?.[i];
                 const label = id === "www_latency" ? (value == null ? "-" : `${fmt(value, 1)} ms`)
@@ -216,7 +217,7 @@ window.rustProxyWebOverview = (() => {
             }
         }
     }
-    function reset() { histories.clear(); serviceBaselines.clear(); baseline = null; last = null; revision = null; }
+    function reset() { histories.clear(); serviceBaselines.clear(); baseline = null; last = null; revision = null; window.rustProxyChartScale.reset("web:"); }
     window.rustProxyOverviewSamples.onChange(() => {
         for (const history of histories.values()) {
             if (Array.isArray(history[0])) history.forEach(window.rustProxyOverviewSamples.trim);