BUR-62 Изменен тултип на графике. Скорректирован градиент на графике для min-avg-max.

Reviewed-on: #23

src/components/MetricWidget.tsx

@@ -6,12 +6,17 @@ type MetricWidgetProps = {
 };
 
 export function MetricWidget({ item }: MetricWidgetProps) {
-  const title = item.name?.trim() || item.tag;
+  const name = item.name?.trim() || item.tag;
+  const unit = item.unitOfMeasurement?.trim();
 
   return (
-    <article className="metric-widget" title={`${title} (${item.tag})`}>
-      <span className="metric-widget__tag">{title}</span>
+    <article className="metric-widget" title={`${name} (${item.tag})`}>
+      <span className="metric-widget__id">{item.tag}</span>
+      <span className="metric-widget__name">{name}</span>
+      <span className="metric-widget__reading">
         <strong className="metric-widget__value">{formatNumber(item.value)}</strong>
+        {unit ? <span className="metric-widget__unit">{unit}</span> : null}
+      </span>
     </article>
   );
 }

src/entities/current/types.ts

@@ -1,7 +1,7 @@
 export type CurrentItem = {
   edge: string;
   tag: string;
-  value: number;
+  value: number | null;
   createdAt: string;
   updatedAt: string;
   time: string;

src/features/edge-detail/components/ArchiveView.tsx

@@ -5,7 +5,7 @@ import { CalendarDays, CalendarClock, Check, ChevronDown, Clock3, DatabaseZap, S
 import type { CurrentItem } from '../../../entities/current/types';
 import { HistoryChart } from '../../../features/history-chart/HistoryChart';
 import { RANGE_PRESETS, createRange, type DateRangeState } from '../../../features/history/dateRange';
-import { toIsoFromInput } from '../../../utils/format';
+import { formatNumber, toIsoFromInput } from '../../../utils/format';
 import type { HistoryGranularity } from '../../../utils/historyGranularity';
 
 type ArchiveViewProps = {
@@ -191,7 +191,7 @@ export function ArchiveView({
                       {label !== item.tag ? <small>{item.tag}</small> : null}
                     </span>
                     <span className="tag-select-item__side">
-                      <strong>{item.value.toLocaleString('ru-RU', { maximumFractionDigits: item.precision ?? 3 })}</strong>
+                      <strong>{formatNumber(item.value)}</strong>
                       {selected ? <Check size={15} /> : null}
                     </span>
                   </button>

src/features/electrical-schematics/ElectricalNode.tsx

@@ -29,8 +29,8 @@ export function ElectricalNode({ liveValues, node, ownerEdgeId }: ElectricalNode
       ? getLiveValue(liveValues, node.edgeId || ownerEdgeId, node.tagId)
       : getLiveValue(liveValues, bindingEdgeId, bindings?.stateTagId);
   const alarmValue = node.kind === 'decoration' ? getLiveValue(liveValues, bindingEdgeId, bindings?.alarmTagId) : undefined;
-  const alarmActive = Boolean(alarmValue && Number(alarmValue.value) !== 0);
-  const stateActive = Boolean(mainValue && Number(mainValue.value) !== 0);
+  const alarmActive = Boolean(alarmValue && alarmValue.value !== null && alarmValue.value !== 0);
+  const stateActive = Boolean(mainValue && mainValue.value !== null && mainValue.value !== 0);
   const title = getNodeTitle(node, mainValue);
   const style: CSSProperties = {
     left: node.position.x,

src/features/history-chart/chartTypes.ts

@@ -1,8 +1,8 @@
 import type { HistoryAxisLabelFormat } from '../../utils/historyGranularity';
 
-export type AvgPointValue = [time: number, avg: number, min: number, max: number, count: number];
+export type AvgPointValue = [time: number, avg: number, min: number, max: number, count: number, slotMs?: number];
 
-export type HistoryBucketValue = [...AvgPointValue, slotMs: number];
+export type HistoryBucketValue = [time: number, avg: number, min: number, max: number, count: number, slotMs: number];
 
 export type HistoryZoomRange = {
   from: string;

src/features/history-chart/historyChartFormat.ts

@@ -60,6 +60,58 @@ function formatChartValue(value: number): string {
   }).format(value);
 }
 
+/** Форматирует полную дату и время для начала/конца интервала в tooltip. */
+function formatTooltipDateTime(value: number): string {
+  return new Intl.DateTimeFormat('ru-RU', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  }).format(new Date(value));
+}
+
+/** Форматирует только время, когда конец интервала находится в тот же день. */
+function formatTooltipTime(value: number): string {
+  return new Intl.DateTimeFormat('ru-RU', {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  }).format(new Date(value));
+}
+
+/** Проверяет, можно ли показать конец интервала без повторения даты. */
+function isSameDate(first: number, second: number): boolean {
+  const firstDate = new Date(first);
+  const secondDate = new Date(second);
+
+  return (
+    firstDate.getFullYear() === secondDate.getFullYear()
+    && firstDate.getMonth() === secondDate.getMonth()
+    && firstDate.getDate() === secondDate.getDate()
+  );
+}
+
+/** Показывает bucket графика как интервал текущей грануляции, а не как одну точку времени. */
+function formatTooltipInterval(value: AvgPointValue): string {
+  const time = value[0];
+  const slotMs = value[5];
+
+  if (!slotMs) {
+    return formatTooltipDateTime(time);
+  }
+
+  const from = time - slotMs / 2;
+  const to = time + slotMs / 2;
+
+  if (isSameDate(from, to)) {
+    return `${formatTooltipDateTime(from)} — ${formatTooltipTime(to)}`;
+  }
+
+  return `${formatTooltipDateTime(from)} — ${formatTooltipDateTime(to)}`;
+}
+
 /** Форматирует значение tooltip: одно число для min=avg=max или среднее с диапазоном. */
 function formatTooltipValue(value: AvgPointValue): string {
   const avg = formatChartValue(value[1]);
@@ -89,14 +141,7 @@ export function formatTooltip(params: unknown): string {
     return '';
   }
 
-  const header = new Intl.DateTimeFormat('ru-RU', {
-    day: '2-digit',
-    month: '2-digit',
-    year: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-  }).format(new Date(firstValue[0]));
+  const header = formatTooltipInterval(firstValue);
 
   const rows = avgItems.map((item) => {
     const value = item.value as AvgPointValue;

src/features/history-chart/historyChartSeries.ts

@@ -27,6 +27,22 @@ type CartesianCoordSys = {
   height: number;
 };
 
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+function createAvgGradientStops(color: string, avgOffset: number) {
+  const softZone = 0.18;
+
+  return [
+    { offset: 0, color: `${color}00` },
+    { offset: clamp(avgOffset - softZone, 0, 1), color: `${color}22` },
+    { offset: avgOffset, color: `${color}70` },
+    { offset: clamp(avgOffset + softZone, 0, 1), color: `${color}22` },
+    { offset: 1, color: `${color}00` },
+  ].sort((first, second) => first.offset - second.offset);
+}
+
 function isFinitePoint(point: HistoryPoint): boolean {
   return [point.avg_value, point.min_value, point.max_value].every(Number.isFinite);
 }
@@ -86,6 +102,8 @@ function renderBucket(color: string) {
       return null;
     }
 
+    const avgOffset = clamp((avgY - rangeShape.y) / rangeShape.height, 0, 1);
+
     return {
       type: 'group',
       children: [
@@ -93,11 +111,7 @@ function renderBucket(color: string) {
           type: 'rect',
           shape: rangeShape,
           style: {
-            fill: new graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: `${color}00` },
-              { offset: 0.5, color: `${color}66` },
-              { offset: 1, color: `${color}00` },
-            ]),
+            fill: new graphic.LinearGradient(0, 0, 0, 1, createAvgGradientStops(color, avgOffset)),
           },
         },
         ...(avgShape ? [{

src/styles/components/metrics.css

@@ -15,7 +15,7 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 5px;
   padding: 12px;
   border: 1px solid rgba(88, 103, 121, 0.42);
   border-radius: 8px;
@@ -27,28 +27,74 @@
     0 6px 14px rgba(0, 0, 0, 0.28);
 }
 
-.metric-widget__tag {
-  flex: 0 0 auto;
+.metric-widget__id,
+.metric-widget__name,
+.metric-widget__reading,
+.metric-widget__value {
   min-width: 0;
-  color: #cbd5e1;
-  font-size: 0.74rem;
-  font-weight: 600;
+}
+
+.metric-widget__id,
+.metric-widget__name {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.metric-widget__id {
+  flex: 0 0 auto;
+  color: #64748b;
+  font-size: 0.62rem;
+  font-weight: 650;
+  letter-spacing: 0.02em;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.metric-widget__name {
+  flex: 0 0 auto;
+  color: #e5e7eb;
+  font-size: 0.82rem;
+  font-weight: 760;
   line-height: 1.35;
   white-space: normal;
   overflow-wrap: anywhere;
   word-break: break-word;
 }
 
-.metric-widget__value {
+.metric-widget__reading {
   margin-top: auto;
   align-self: flex-end;
-  min-width: 0;
+  display: inline-flex;
+  align-items: baseline;
+  justify-content: flex-end;
+  gap: 5px;
+  max-width: 100%;
+  text-align: right;
+}
+
+.metric-widget__value {
   color: #f8fafc;
-  font-size: 1.1rem;
-  font-weight: 700;
+  font-size: 1.22rem;
+  font-weight: 800;
   font-variant-numeric: tabular-nums;
   line-height: 1.2;
+  overflow: hidden;
   text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metric-widget__unit {
+  flex: 0 1 auto;
+  min-width: 0;
+  color: #94a3b8;
+  font-size: 0.72rem;
+  font-weight: 650;
+  line-height: 1.2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .metric-mosaic {

src/utils/format.ts

@@ -1,7 +1,7 @@
 /** Форматирует числовое значение показателя для карточек и мини-плиток. */
-export function formatNumber(value: number): string {
-  if (!Number.isFinite(value)) {
-    return '-';
+export function formatNumber(value: number | null): string {
+  if (value === null || !Number.isFinite(value)) {
+    return '—';
   }
 
   return new Intl.NumberFormat('ru-RU', {

src/utils/metricStatus.ts

@@ -16,8 +16,9 @@ function isConfiguredLimit(value: number | null): value is number {
 export function getMetricStatus(item: CurrentItem, now = Date.now()): MetricStatusInfo {
   const measuredAt = new Date(item.time).getTime();
   const ageSeconds = Number.isFinite(measuredAt) ? Math.max(0, Math.round((now - measuredAt) / 1000)) : Number.POSITIVE_INFINITY;
-  const belowMin = isConfiguredLimit(item.min) && item.value < item.min;
-  const aboveMax = isConfiguredLimit(item.max) && item.value > item.max;
+  const value = item.value;
+  const belowMin = isConfiguredLimit(value) && isConfiguredLimit(item.min) && value < item.min;
+  const aboveMax = isConfiguredLimit(value) && isConfiguredLimit(item.max) && value > item.max;
 
   if (belowMin || aboveMax) {
     return { status: 'critical', label: 'за пределами уставки', ageSeconds };