From e8c5dbc489670b4bfd0b6492eae12f92f7371808 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B2=D0=BE=D0=B2=20=D0=90=D1=80=D1=82?=
 =?UTF-8?q?=D0=B5=D0=BC?= <apervov@alabuga.ru>
Date: Sun, 5 Jul 2026 23:26:13 +0300
Subject: [PATCH] =?UTF-8?q?BUR-41=20MetricWidget=20=D0=BE=D0=B1=D0=BE?=
 =?UTF-8?q?=D0=B3=D0=BE=D1=89=D0=B5=D0=BD=20=D0=B8=D0=BD=D1=84=D0=BE=D1=80?=
 =?UTF-8?q?=D0=BC=D0=B0=D1=86=D0=B8=D0=B5=D0=B9=20=D0=B5=D0=B4=D0=B8=D0=BD?=
 =?UTF-8?q?=D0=B8=D1=86=D1=8B=20=D0=B8=D0=B7=D0=BC=D0=B5=D1=80=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D1=8F,=20=D0=B8=D0=B4=D0=B5=D0=BD=D1=82=D0=B8=D1=84?=
 =?UTF-8?q?=D0=B8=D0=BA=D0=B0=D1=82=D0=BE=D1=80=D0=BE=D0=BC=20=D1=82=D0=B5?=
 =?UTF-8?q?=D0=B3=D0=B0,=20=D0=B0=20=D1=82=D0=B0=D0=BA=D0=B6=D0=B5=20?=
 =?UTF-8?q?=D0=B2=D1=8B=D1=81=D1=82=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D1=8B=20?=
 =?UTF-8?q?=D0=B0=D0=BA=D1=86=D0=B5=D0=BD=D1=82=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MetricWidget.tsx   | 13 ++++--
 src/styles/components/metrics.css | 66 ++++++++++++++++++++++++++-----
 2 files changed, 65 insertions(+), 14 deletions(-)

diff --git a/src/components/MetricWidget.tsx b/src/components/MetricWidget.tsx
index 1718bd9..c8e3f49 100644
--- a/src/components/MetricWidget.tsx
+++ b/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>
-      <strong className="metric-widget__value">{formatNumber(item.value)}</strong>
+    <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>
   );
 }
diff --git a/src/styles/components/metrics.css b/src/styles/components/metrics.css
index 1cd3504..8d91f76 100644
--- a/src/styles/components/metrics.css
+++ b/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 {
-- 
2.49.1