add translation for tags

src/components/HistoryChart.tsx

@@ -28,6 +28,7 @@ type HistoryChartProps = {
   loading: boolean;
   from?: string;
   to?: string;
+  tagLabels?: Record<string, string>;
 };
 
 /** Подбирает подпись оси времени под текущий масштаб графика. */
@@ -46,7 +47,7 @@ function formatAxisDate(value: number, spanMs?: number): string {
 }
 
 /** Рисует исторические ряды показателей через ECharts с динамической временной шкалой. */
-export function HistoryChart({ data, loading, from, to }: HistoryChartProps) {
+export function HistoryChart({ data, loading, from, to, tagLabels = {} }: HistoryChartProps) {
   const xMin = from ? new Date(from).getTime() : undefined;
   const xMax = to ? new Date(to).getTime() : undefined;
   const xSpan = Number.isFinite(xMin) && Number.isFinite(xMax) ? Number(xMax) - Number(xMin) : undefined;
@@ -115,7 +116,7 @@ export function HistoryChart({ data, loading, from, to }: HistoryChartProps) {
     ],
     series:
       data?.series.map((series, index) => ({
-        name: series.tag,
+        name: tagLabels[series.tag] ?? series.tag,
         type: 'line',
         showSymbol: false,
         smooth: false,

src/components/MetricCard.tsx

@@ -5,28 +5,33 @@ import { getMetricStatus, type MetricStatusInfo } from '../utils/metricStatus';
 
 type MetricCardProps = {
   item: CurrentItem;
+  displayName?: string;
   selected: boolean;
   statusInfo?: MetricStatusInfo;
   onToggle: (tag: string) => void;
 };
 
 /** Показывает детальную карточку текущего показателя и управляет добавлением тега на график. */
-export function MetricCard({ item, selected, statusInfo = getMetricStatus(item), onToggle }: MetricCardProps) {
+export function MetricCard({ item, displayName, selected, statusInfo = getMetricStatus(item), onToggle }: MetricCardProps) {
   const { ageSeconds, label, status } = statusInfo;
   const ageLabel = ageSeconds < 60 ? `${ageSeconds}с` : `${Math.floor(ageSeconds / 60)}м ${ageSeconds % 60}с`;
+  const title = displayName ?? item.tag;
 
   return (
     <button
       className={`metric-card metric-card--${status} ${selected ? 'metric-card--selected' : ''}`}
       type="button"
       onClick={() => onToggle(item.tag)}
-      title={selected ? 'Убрать с графика' : 'Добавить на график'}
+      title={`${selected ? 'Убрать с графика' : 'Добавить на график'}: ${title}`}
     >
       <div className="metric-card__header">
         <span className="metric-card__signal">
           <Activity size={15} />
         </span>
-        <span className="metric-card__tag">{item.tag}</span>
+        <span className="metric-card__tag">
+          <span>{title}</span>
+          {displayName && displayName !== item.tag ? <small>{item.tag}</small> : null}
+        </span>
         <span className="metric-card__corner">
           <span className={`metric-card__state is-${status}`}>{label}</span>
           <span className="metric-card__age" title="Возраст последнего измерения">