[Hiddify-Official]

Problem

To see a node's live load, an admin had to open the dashboard and find that node among the others.

Change

• Toggle (NodesView.vue, new components/NodeLiveCharts.vue): each node card has a "Show more" toggle under its buttons. It slides open that node's live charts:
  • network up/down (mirrored), CPU and RAM;
  • drawn with the dashboard's Node health chart component, colours and formats, but for that node only;
  • small (48 px), with the latest value beside each heading.
• Feed: one feed (the dashboard's include=system snapshot, which lists every node) runs every 5 s while at least one card is open. It keeps 60 samples, so the charts show the last 5 minutes and fill in from the moment they are opened.
• Layout:
  • cards keep their own height, so one card's charts don't stretch the others in its row;
  • the "Add node" tile is as tall as a node card without its charts (measured).
• Shared chart (MetricChart / useChartTheme), two options added; the dashboard does not use them, so it is unchanged:
  • yMin (a symmetric range for the small mirrored chart);
  • pageTooltip (the page-text tooltip in every language, above the point). A canvas tooltip is cut off in a 48 px chart; it showed upload but not download.
• Tooltip direction: that page-text tooltip now follows the page's direction (it was always right-to-left).
• Strings in all 7 languages.

Screenshots

Before	After

The tooltip on the small network chart:

Tested

• On main (a parent with two nodes):
  • charts for one node, and for both, with the neighbour card and the tile unchanged;
  • open and close slide in about 0.3 s (the height was measured stepping up and down);
  • the network, CPU and RAM tooltips are complete and stay inside the card;
  • the feed stops when the last card closes;
  • shown on desktop, dark, mobile and Persian RTL.

Review

• Confidence: High (>90%) — UI only. The shared chart's new options are off by default, and the dashboard was not changed.
• Complexity: Simple — one page, one new component, two chart options.

🤖 Generated with Claude Code