APervov/ui
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

BUR-41 MetricWidget обогощен информацией единицы измерения, идентификатором тега, а также выставлены акценты

Browse Source
This commit is contained in:
Первов Артем
2026-07-05 23:26:13 +03:00
parent cf1dea2767
commit e8c5dbc489
2 changed files with 65 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/MetricWidget.tsx
View File

@@ -6,12 +6,17 @@ type MetricWidgetProps = {
}; };
export function MetricWidget({ item }: 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 ( return (
<article className="metric-widget" title={`${title} (${item.tag})`}> <article className="metric-widget" title={`${name} (${item.tag})`}>
<span className="metric-widget__tag">{title}</span> <span className="metric-widget__id">{item.tag}</span>
<strong className="metric-widget__value">{formatNumber(item.value)}</strong> <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> </article>
); );
} }

66
src/styles/components/metrics.css
View File

@@ -15,7 +15,7 @@
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 5px;
padding: 12px; padding: 12px;
border: 1px solid rgba(88, 103, 121, 0.42); border: 1px solid rgba(88, 103, 121, 0.42);
border-radius: 8px; border-radius: 8px;
@@ -27,28 +27,74 @@
0 6px 14px rgba(0, 0, 0, 0.28); 0 6px 14px rgba(0, 0, 0, 0.28);
} }
.metric-widget__tag { .metric-widget__id,
flex: 0 0 auto; .metric-widget__name,
.metric-widget__reading,
.metric-widget__value {
min-width: 0; 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; line-height: 1.35;
white-space: normal; white-space: normal;
overflow-wrap: anywhere; overflow-wrap: anywhere;
word-break: break-word; word-break: break-word;
} }
.metric-widget__value { .metric-widget__reading {
margin-top: auto; margin-top: auto;
align-self: flex-end; 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; color: #f8fafc;
font-size: 1.1rem; font-size: 1.22rem;
font-weight: 700; font-weight: 800;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
line-height: 1.2; line-height: 1.2;
overflow: hidden;
text-align: right; 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 { .metric-mosaic {