tore/dashbord-top-uslug-b2c-po-re-8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: подписи значений только у первых 3 столбцов, отступ слева 24px

Browse Source
This commit is contained in:
tore 2026-09-04 09:43:14 +00:00
parent 1a794ab1d5
commit a8006e2d50
1 changed files with 3 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -14,7 +14,7 @@
@media (max-width: 900px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } }
.charts-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 0 32px 24px; } .charts-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 0 32px 24px; }
@media (max-width: 900px) { .charts-row { grid-template-columns: 1fr; } } @media (max-width: 900px) { .charts-row { grid-template-columns: 1fr; } }
.chart-wrap { height: 280px; position: relative; display: flex; align-items: flex-end; gap: 4px; padding-top: 28px; padding-bottom: 60px; overflow-x: auto; } .chart-wrap { height: 280px; position: relative; display: flex; align-items: flex-end; gap: 4px; padding-top: 28px; padding-bottom: 60px; padding-left: 24px; overflow-x: auto; }
.bar { flex: 1; min-width: 20px; max-width: 28px; border-radius: 2px 2px 0 0; position: relative; cursor: pointer; } .bar { flex: 1; min-width: 20px; max-width: 28px; border-radius: 2px 2px 0 0; position: relative; cursor: pointer; }
.bar[data-kt-tip]::after { content: attr(data-kt-tip); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: var(--kt-ai-overlay); color: var(--kt-ai-fg-on-fill); padding: 4px 8px; border-radius: 4px; font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; } .bar[data-kt-tip]::after { content: attr(data-kt-tip); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: var(--kt-ai-overlay); color: var(--kt-ai-fg-on-fill); padding: 4px 8px; border-radius: 4px; font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.bar:hover::after { opacity: 1; } .bar:hover::after { opacity: 1; }
@ -165,8 +165,9 @@
const h = (d.value / maxVal) * 170; const h = (d.value / maxVal) * 170;
const shortLabel = isService ? (d.label.length > 14 ? d.label.slice(0, 14) + '…' : d.label) : d.label; const shortLabel = isService ? (d.label.length > 14 ? d.label.slice(0, 14) + '…' : d.label) : d.label;
const tipLabel = isService ? d.label : shortLabel; const tipLabel = isService ? d.label : shortLabel;
const showValue = i < 3 ? `<span class="bar-value">${fmtNum(d.value)}</span>` : '';
return `<div class="bar" data-kt-tip="${tipLabel}: ${fmtNum(d.value)}" style="height:${h}px;background:var(${colorVar});"> return `<div class="bar" data-kt-tip="${tipLabel}: ${fmtNum(d.value)}" style="height:${h}px;background:var(${colorVar});">
<span class="bar-value">${fmtNum(d.value)}</span> ${showValue}
<span class="bar-label">${shortLabel}</span> <span class="bar-label">${shortLabel}</span>
</div>`; </div>`;
}).join(''); }).join('');