Add persistent device traffic history charts

src/web/components/DevicesPanel.jsx

@@ -14,7 +14,6 @@ const AUTO_REFRESH_MS = 15_000;
 const DEVICE_MOVE_MS = 520;
 const COPY_FEEDBACK_MS = 5_000;
 const TRAFFIC_DELTA_MS = 2_200;
-const TRAFFIC_HISTORY_LIMIT = 18;
 
 function Tooltip({ children }) {
   return <span className="client-tooltip" role="tooltip">{children}</span>;
@@ -36,24 +35,42 @@ function TrafficValue({ value, delta }) {
   </strong>;
 }
 
-function TrafficChart({ samples }) {
+function chartTime(value) {
+  return new Date(value).toLocaleTimeString('ru-RU', {
+    hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false,
+  });
+}
+
+function TrafficChart({ samples, scale, capacity }) {
   const max = samples.reduce((largest, sample) => {
-    const total = byteString(sample.gateway) + byteString(sample.proxy);
+    const total = byteString(sample.gatewayBytes) + byteString(sample.proxyBytes);
     return total > largest ? total : largest;
   }, 0n);
-  const latest = samples.at(-1)?.id || 'empty';
-  return <span className="client-device-traffic-chart" aria-hidden="true">
-    <span className="client-device-traffic-track" key={latest}>
-      {samples.map((sample) => {
-        const gateway = byteString(sample.gateway);
-        const proxy = byteString(sample.proxy);
-        const { height, gatewayShare } = trafficSampleMetrics(gateway, proxy, max);
-        return <i className="client-device-traffic-bar" key={sample.id} style={{ height: `${height}%` }}>
+  const latest = samples.at(-1)?.observedAt || 'empty';
+  return <span className="client-device-traffic-chart" role="img" aria-label={`История трафика, шкала ${scale === 'log' ? 'логарифмическая' : 'линейная'}`}>
+    <span className="client-device-traffic-track" key={latest} style={{ '--sample-count': Math.max(1, capacity) }}>
+      {samples.map((sample, index) => {
+        const gateway = byteString(sample.gatewayBytes);
+        const proxy = byteString(sample.proxyBytes);
+        const total = gateway + proxy;
+        const time = chartTime(sample.observedAt);
+        const { height, gatewayShare } = trafficSampleMetrics(gateway, proxy, max, scale);
+        return <i
+          className="client-device-traffic-bar"
+          key={`${sample.observedAt}-${index}`}
+          style={{ height: `${height}%`, gridColumnStart: capacity - samples.length + index + 1 }}
+          title={`${time} · Всего ${formatByteString(total)} · Gateway ${formatByteString(gateway)} · Прокси ${formatByteString(proxy)}`}
+        >
           <span className="is-gateway" style={{ height: `${gatewayShare}%` }} />
           <span className="is-proxy" style={{ height: `${100 - gatewayShare}%` }} />
         </i>;
       })}
     </span>
+    {samples.length > 0 && <span className="client-device-traffic-time" aria-hidden="true">
+      <time dateTime={samples[0].observedAt}>{chartTime(samples[0].observedAt)}</time>
+      <span>15 с</span>
+      <time dateTime={samples.at(-1).observedAt}>{chartTime(samples.at(-1).observedAt)}</time>
+    </span>}
   </span>;
 }
 
@@ -67,15 +84,14 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
   const [refreshing, setRefreshing] = useState(false);
   const [refreshCycle, setRefreshCycle] = useState(0);
   const [sortDirection, setSortDirection] = useState('desc');
+  const [trafficScale, setTrafficScale] = useState('linear');
   const [copyFeedback, setCopyFeedback] = useState(null);
   const [trafficDeltas, setTrafficDeltas] = useState({});
-  const [trafficHistory, setTrafficHistory] = useState({});
   const deviceNodes = useRef(new Map());
   const previousPositions = useRef(new Map());
   const previousTraffic = useRef(new Map());
   const copyTimer = useRef(null);
   const trafficDeltaTimer = useRef(null);
-  const trafficSequence = useRef(0);
   const devices = useMemo(
     () => sortDevicesByTraffic(snapshot?.devices, sortDirection),
     [snapshot?.devices, sortDirection],
@@ -125,7 +141,6 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
 
     const next = new Map();
     const deltas = {};
-    const historyChanges = {};
     for (const device of snapshot?.devices || []) {
       const gateway = byteString(device.downloadBytes) + byteString(device.uploadBytes);
       const proxy = byteString(device.proxyDownloadBytes) + byteString(device.proxyUploadBytes);
@@ -137,22 +152,10 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
       if (!gatewayDelta && !proxyDelta) continue;
       const totalDelta = positiveByteDelta(previous.gateway + previous.proxy, gateway + proxy);
       deltas[device.id] = { gateway: gatewayDelta, proxy: proxyDelta, total: totalDelta };
-      historyChanges[device.id] = {
-        id: ++trafficSequence.current,
-        gateway: gateway > previous.gateway ? (gateway - previous.gateway).toString() : '0',
-        proxy: proxy > previous.proxy ? (proxy - previous.proxy).toString() : '0',
-      };
     }
     previousTraffic.current = next;
     if (!Object.keys(deltas).length) return;
     setTrafficDeltas(deltas);
-    setTrafficHistory((current) => {
-      const updated = { ...current };
-      for (const [id, change] of Object.entries(historyChanges)) {
-        updated[id] = [...(current[id] || []), change].slice(-TRAFFIC_HISTORY_LIMIT);
-      }
-      return updated;
-    });
     clearTimeout(trafficDeltaTimer.current);
     trafficDeltaTimer.current = setTimeout(() => setTrafficDeltas({}), TRAFFIC_DELTA_MS);
   }, [snapshot?.devices, open]);
@@ -309,6 +312,10 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
               </button>
               <Tooltip>Сначала {sortDirection === 'desc' ? 'больше' : 'меньше'} трафика</Tooltip>
             </span>
+            <span className="client-devices-scale" role="group" aria-label="Масштаб графика трафика">
+              <button type="button" aria-pressed={trafficScale === 'linear'} onClick={() => setTrafficScale('linear')}>Лин</button>
+              <button type="button" aria-pressed={trafficScale === 'log'} onClick={() => setTrafficScale('log')}>Лог</button>
+            </span>
           </div>
           <h2 id="client-devices-title">Устройства</h2>
           <div className="client-instructions-intro">
@@ -496,7 +503,11 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
                 </button>
                 <Tooltip>{policyTooltip}</Tooltip>
               </span>
-              <TrafficChart samples={trafficHistory[device.id] || []} />
+              <TrafficChart
+                samples={device.trafficHistory || []}
+                scale={trafficScale}
+                capacity={snapshot.trafficHistoryCapacity || device.trafficHistory?.length || 1}
+              />
             </article>;
           })}
         </div>

src/web/styles.css

@@ -753,6 +753,28 @@ p {
   position: relative;
 }
 
+.client-devices-scale {
+  display: flex;
+  padding: 2px;
+  border: 1px solid color-mix(in oklch, var(--client-border) 72%, transparent);
+  border-radius: 999px;
+}
+
+.client-devices-scale button {
+  padding: 4px 6px;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--client-muted);
+  font: 700 9px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  cursor: pointer;
+}
+
+.client-devices-scale button[aria-pressed="true"] {
+  background: color-mix(in oklch, var(--client-accent) 14%, transparent);
+  color: var(--client-accent);
+}
+
 .client-devices-sort {
   min-height: 28px;
   display: flex;
@@ -902,7 +924,7 @@ p {
 .client-device {
   display: grid;
   grid-template-columns: 34px minmax(0, 1fr) 112px 34px;
-  grid-template-rows: 34px 28px;
+  grid-template-rows: 34px 42px;
   align-items: start;
   column-gap: 8px;
   row-gap: 6px;
@@ -1302,7 +1324,7 @@ p {
 .client-device-traffic-chart {
   grid-column: 2 / 4;
   grid-row: 2;
-  height: 28px;
+  height: 42px;
   position: relative;
   overflow: hidden;
 }
@@ -1310,7 +1332,7 @@ p {
 .client-device-traffic-chart::after {
   position: absolute;
   right: 0;
-  bottom: 0;
+  bottom: 13px;
   left: 0;
   height: 1px;
   background: color-mix(in oklch, var(--client-border) 58%, transparent);
@@ -1319,24 +1341,34 @@ p {
 
 .client-device-traffic-track {
   position: absolute;
-  inset: 0 0 1px;
-  display: flex;
+  inset: 0 0 14px;
+  display: grid;
+  grid-template-columns: repeat(var(--sample-count), minmax(1px, 1fr));
   align-items: flex-end;
-  justify-content: flex-end;
-  gap: 3px;
+  gap: 1px;
   animation: client-device-traffic-shift 420ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .client-device-traffic-bar {
-  width: 5px;
   min-height: 2px;
-  flex: 0 0 5px;
   display: flex;
   overflow: hidden;
   border-radius: 2px 2px 0 0;
   flex-direction: column-reverse;
 }
 
+.client-device-traffic-time {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  justify-content: space-between;
+  color: var(--client-muted);
+  font-size: 8px;
+  line-height: 10px;
+}
+
 .client-device-traffic-bar > span {
   width: 100%;
   display: block;

src/web/utils/format.js

@@ -37,13 +37,16 @@ export function positiveByteDelta(previous, current) {
   return after > before ? formatByteString((after - before).toString()) : '';
 }
 
-export function trafficSampleMetrics(gatewayValue, proxyValue, maxValue) {
+export function trafficSampleMetrics(gatewayValue, proxyValue, maxValue, scale = 'linear') {
   const gateway = byteString(gatewayValue);
   const proxy = byteString(proxyValue);
   const total = gateway + proxy;
   const max = byteString(maxValue);
+  const ratio = scale === 'log'
+    ? Math.log1p(Number(total)) / Math.log1p(Number(max))
+    : Number(total * 100n / (max || 1n)) / 100;
   return {
-    height: max && total ? Math.max(10, Math.min(100, Number(total * 100n / max))) : 0,
+    height: max && total ? Math.max(10, Math.min(100, Math.round(ratio * 100))) : 0,
     gatewayShare: total ? Number(gateway * 100n / total) : 0,
   };
 }