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

fix: add top padding to charts, add data-theme=light

Browse Source
This commit is contained in:
tore 2026-09-04 07:28:58 +00:00
parent a7f6930f90
commit e607c1787e
1 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
index.html
View File

@ -1,5 +1,5 @@
<!doctype html>
<html lang="ru">
<html lang="ru" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@ -141,15 +141,16 @@
border-color: var(--kt-blue);
}
.chart-container {
height: 320px;
height: 360px;
position: relative;
padding-top: 40px;
}
.bar-chart {
display: flex;
align-items: flex-end;
justify-content: space-between;
height: 280px;
padding: 20px 10px 40px;
padding: 0 10px 40px;
gap: 4px;
}
.bar-item {
@ -604,13 +605,13 @@
const maxValue = Math.max(...chartData.map(d => d.value));
container.innerHTML = chartData.map((d, i) => {
const height = (d.value / maxValue) * 240;
const color = colors[i % colors.length];
return `
<div class="bar-item">
<div class="bar" style="height: ${height}px; background: ${color};" title="${d.name}: ${formatNumber(d.value)}">
<div class="bar-value">${formatNumber(d.value / 1000)}K</div>
</div>
const height = (d.value / maxValue) * 200;
const color = colors[i % colors.length];
return `
<div class="bar-item">
<div class="bar" style="height: ${height}px; background: ${color};" title="${d.name}: ${formatNumber(d.value)}">
<div class="bar-value" style="top: -24px;">${formatNumber(d.value / 1000)}K</div>
</div>
<div class="bar-label">${d.name.length > 15 ? d.name.substring(0, 15) + '...' : d.name}</div>
</div>
`;
@ -648,13 +649,13 @@
const colors = ['#0096D7', '#00C4B4', '#3B82F6', '#8B5CF6', '#EC4899', '#F59E0B'];
container.innerHTML = data.map((d, i) => {
const height = (d[1] / maxValue) * 240;
const height = (d[1] / maxValue) * 200;
const color = colors[i % colors.length];
const percent = ((d[1] / rawData.reduce((s, r) => s + r.purchases, 0)) * 100).toFixed(1);
return `
<div class="bar-item">
<div class="bar" style="height: ${height}px; background: ${color};" title="${d[0]}: ${percent}%">
<div class="bar-value">${percent}%</div>
<div class="bar-value" style="top: -24px;">${percent}%</div>
</div>
<div class="bar-label">${d[0]}</div>
</div>