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