Improve device traffic chart tooltips

src/web/components/DevicesPanel.jsx

@@ -41,7 +41,7 @@ function chartTime(value) {
   });
 }
 
-function TrafficChart({ samples, scale, capacity }) {
+function TrafficChart({ samples, scale, capacity, routeLabel }) {
   const max = samples.reduce((largest, sample) => {
     const total = byteString(sample.gatewayBytes) + byteString(sample.proxyBytes);
     return total > largest ? total : largest;
@@ -54,15 +54,24 @@ function TrafficChart({ samples, scale, capacity }) {
         const proxy = byteString(sample.proxyBytes);
         const total = gateway + proxy;
         const time = chartTime(sample.observedAt);
+        const slot = capacity - samples.length + index;
+        const edge = slot < 28 ? ' is-edge-left' : slot >= capacity - 28 ? ' is-edge-right' : '';
         const { height, gatewayShare } = trafficSampleMetrics(gateway, proxy, max, scale);
         return <i
-          className="client-device-traffic-bar"
+          className={`client-device-traffic-bar${edge}`}
           key={`${sample.observedAt}-${index}`}
-          style={{ height: `${height}%`, gridColumnStart: capacity - samples.length + index + 1 }}
-          title={`${time} · Всего ${formatByteString(total)} · Gateway ${formatByteString(gateway)} · Прокси ${formatByteString(proxy)}`}
+          style={{ height: `${height}%`, gridColumnStart: slot + 1 }}
         >
-          <span className="is-gateway" style={{ height: `${gatewayShare}%` }} />
-          <span className="is-proxy" style={{ height: `${100 - gatewayShare}%` }} />
+          <span className="client-device-traffic-bar-fill" aria-hidden="true">
+            <span className="is-gateway" style={{ height: `${gatewayShare}%` }} />
+            <span className="is-proxy" style={{ height: `${100 - gatewayShare}%` }} />
+          </span>
+          <span className="client-device-traffic-bar-tooltip" aria-hidden="true">
+            <time dateTime={sample.observedAt}>{time}</time>
+            <strong>Всего {formatByteString(total)}</strong>
+            <span>{routeLabel} {formatByteString(gateway)}</span>
+            {proxy > 0n && <span className="is-proxy">Proxy {formatByteString(proxy)}</span>}
+          </span>
         </i>;
       })}
     </span>
@@ -370,6 +379,7 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
             const gatewayTraffic = formatByteString(gatewayTotal.toString());
             const proxyTraffic = formatByteString(proxyTotal.toString());
             const totalTraffic = formatByteString((gatewayTotal + proxyTotal).toString());
+            const hasProxyTraffic = proxyTotal > 0n;
             const trafficDelta = trafficDeltas[device.id] || {};
             const copied = copyFeedback?.id === device.id;
             const policyBusy = device.policyStatus === 'applying';
@@ -474,13 +484,18 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
                 </span>
               </div>
 
-              <span className="client-device-traffic" role="group" tabIndex="0" aria-label={`Всего ${totalTraffic}. Gateway ${gatewayTraffic}, Прокси ${proxyTraffic}`}>
+              <span
+                className="client-device-traffic"
+                role="group"
+                tabIndex="0"
+                aria-label={`Всего ${totalTraffic}. Gateway ${gatewayTraffic}${hasProxyTraffic ? `, Прокси ${proxyTraffic}` : ''}`}
+              >
                 <span className="client-device-traffic-total" aria-hidden="true">
                   <b>Всего</b><TrafficValue value={totalTraffic} delta={trafficDelta.total} />
                 </span>
                 <span className="client-device-traffic-breakdown" aria-hidden="true">
                   <span><b>Gateway</b><TrafficValue value={gatewayTraffic} delta={trafficDelta.gateway} /></span>
-                  <span className="is-proxy"><b>Прокси</b><TrafficValue value={proxyTraffic} delta={trafficDelta.proxy} /></span>
+                  {hasProxyTraffic && <span className="is-proxy"><b>Прокси</b><TrafficValue value={proxyTraffic} delta={trafficDelta.proxy} /></span>}
                 </span>
               </span>
 
@@ -507,6 +522,7 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
                 samples={device.trafficHistory || []}
                 scale={trafficScale}
                 capacity={snapshot.trafficHistoryCapacity || device.trafficHistory?.length || 1}
+                routeLabel={device.appliedPolicy === 'direct' ? 'Напрямую' : 'Gateway'}
               />
             </article>;
           })}