Improve device traffic chart tooltips

src/shared/versions.js

@@ -1,6 +1,6 @@
 export const HARBOR_VERSIONS = Object.freeze({
-  macClient: '0.14.0',
-  gatewayClient: '0.15.0',
+  macClient: '0.14.1',
+  gatewayClient: '0.15.1',
   gatewayBackend: '0.15.0',
 });
 

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>;
           })}

src/web/styles.css

@@ -1230,30 +1230,39 @@ p {
 
 .client-device-traffic-breakdown {
   position: absolute;
-  top: 30px;
+  top: 27px;
   right: 0;
   width: 112px;
   display: grid;
   gap: 2px;
-  padding: 7px 0 6px;
-  background: color-mix(in oklch, var(--client-bg) 98%, var(--client-panel));
-  box-shadow: 0 10px 22px oklch(0.08 0.015 145 / 0.12);
-  opacity: 0;
   visibility: hidden;
-  filter: blur(5px);
   pointer-events: none;
-  transform: translateY(-7px);
-  transform-origin: top center;
-  transition: opacity 220ms ease, filter 300ms ease, transform 360ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 360ms;
+  transition: visibility 0s 420ms;
+}
+
+.client-device-traffic-breakdown > span {
+  opacity: 0;
+  filter: blur(5px);
+  transform: translateY(-12px);
+  transform-origin: top right;
+  transition: opacity 180ms ease, filter 300ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.client-device-traffic-breakdown > span:nth-child(2) {
+  transition-delay: 45ms;
 }
 
 .client-device-traffic:hover .client-device-traffic-breakdown,
 .client-device-traffic:focus .client-device-traffic-breakdown {
-  opacity: 1;
   visibility: visible;
+  transition-delay: 0s;
+}
+
+.client-device-traffic:hover .client-device-traffic-breakdown > span,
+.client-device-traffic:focus .client-device-traffic-breakdown > span {
+  opacity: 1;
   filter: blur(0);
   transform: translateY(0);
-  transition-delay: 0s;
 }
 
 .client-device-traffic b {
@@ -1322,11 +1331,12 @@ p {
 }
 
 .client-device-traffic-chart {
-  grid-column: 2 / 4;
+  grid-column: 2 / 3;
   grid-row: 2;
   height: 42px;
   position: relative;
-  overflow: hidden;
+  z-index: 4;
+  overflow: visible;
 }
 
 .client-device-traffic-chart::after {
@@ -1341,7 +1351,7 @@ p {
 
 .client-device-traffic-track {
   position: absolute;
-  inset: 0 0 14px;
+  inset: 0 3px 14px;
   display: grid;
   grid-template-columns: repeat(var(--sample-count), minmax(1px, 1fr));
   align-items: flex-end;
@@ -1350,38 +1360,111 @@ p {
 }
 
 .client-device-traffic-bar {
+  position: relative;
   min-height: 2px;
+  cursor: help;
+}
+
+.client-device-traffic-time {
+  position: absolute;
+  right: 2px;
+  bottom: 0;
+  left: 2px;
+  z-index: 2;
+  display: flex;
+  justify-content: space-between;
+  color: color-mix(in oklch, var(--client-text) 46%, var(--client-muted));
+  font-size: 8.5px;
+  line-height: 10px;
+  text-shadow: 0 1px 5px var(--client-bg);
+}
+
+.client-device-traffic-bar-fill {
+  position: absolute;
+  inset: 0;
   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 {
+.client-device-traffic-bar-fill > span {
   width: 100%;
   display: block;
 }
 
-.client-device-traffic-bar > .is-gateway {
+.client-device-traffic-bar-fill > .is-gateway {
   background: color-mix(in oklch, var(--client-text) 58%, var(--client-muted));
 }
 
-.client-device-traffic-bar > .is-proxy {
+.client-device-traffic-bar-fill > .is-proxy {
   background: var(--client-accent);
 }
 
+.client-device-traffic-bar-tooltip {
+  position: absolute;
+  bottom: calc(100% + 7px);
+  left: 50%;
+  z-index: 20;
+  width: max-content;
+  display: grid;
+  gap: 3px;
+  padding: 7px 8px;
+  border-radius: 7px;
+  background: oklch(0.14 0.012 145);
+  box-shadow: 0 8px 24px oklch(0.08 0.015 145 / 0.18);
+  color: oklch(0.92 0.008 145);
+  font: 600 9px/1.25 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  filter: blur(3px);
+  pointer-events: none;
+  transform: translate(-50%, 4px);
+  transition: opacity 100ms ease, filter 140ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 180ms;
+}
+
+.client-device-traffic-bar-tooltip time {
+  color: oklch(0.68 0.012 145);
+  font-size: 8px;
+}
+
+.client-device-traffic-bar-tooltip strong {
+  color: oklch(0.98 0.006 145);
+  font-size: 10px;
+}
+
+.client-device-traffic-bar-tooltip .is-proxy {
+  color: var(--client-accent);
+}
+
+.client-device-traffic-bar:hover .client-device-traffic-bar-tooltip {
+  opacity: 1;
+  visibility: visible;
+  filter: blur(0);
+  transform: translate(-50%, 0);
+  transition-delay: 0s;
+}
+
+.client-device-traffic-bar.is-edge-left .client-device-traffic-bar-tooltip {
+  left: 0;
+  transform: translate(0, 4px);
+}
+
+.client-device-traffic-bar.is-edge-left:hover .client-device-traffic-bar-tooltip {
+  transform: translate(0, 0);
+}
+
+.client-device-traffic-bar.is-edge-right .client-device-traffic-bar-tooltip {
+  right: 0;
+  left: auto;
+  transform: translate(0, 4px);
+}
+
+.client-device-traffic-bar.is-edge-right:hover .client-device-traffic-bar-tooltip {
+  transform: translate(0, 0);
+}
+
 @keyframes client-device-traffic-shift {
   from { opacity: 0.52; transform: translateX(8px); }
   to { opacity: 1; transform: translateX(0); }
@@ -4449,6 +4532,8 @@ p {
   .client-device-name > span,
   .client-device-traffic-value > span,
   .client-device-traffic-breakdown,
+  .client-device-traffic-breakdown > span,
+  .client-device-traffic-bar-tooltip,
   .client-device-traffic-track,
   .client-device-edit,
   .client-device-edit svg,