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

Compare commits

base: tore:pages
Branches Tags
tore:main
tore:pages
..
compare: tore:main
Branches Tags
tore:pages
tore:main

No commits in common. "pages" and "main" have entirely different histories.
pages ... main

1 changed files with 7 additions and 12 deletions
Show Stats Expand all files Collapse all files

19
index.html
View File

@ -14,12 +14,11 @@
@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; padding-left: 24px; overflow-x: auto; } .chart-wrap { height: 220px; position: relative; display: flex; align-items: flex-end; gap: 4px; padding-top: 28px; 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; }
.bar-value { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-size: 11px; font-family: var(--kt-ai-font-mono); color: var(--kt-ai-fg-muted); white-space: nowrap; } .bar-value { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-size: 11px; font-family: var(--kt-ai-font-mono); color: var(--kt-ai-fg-muted); }
.bar-label { position: absolute; bottom: -56px; left: 50%; transform: translateX(-50%) rotate(-35deg); transform-origin: center top; font-size: 10px; color: var(--kt-ai-fg-muted); white-space: nowrap; }
.table-section { padding: 0 32px 32px; } .table-section { padding: 0 32px 32px; }
.table-controls { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .table-controls { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
@ -158,25 +157,21 @@
document.getElementById('kpi-service').title = topService[0]; document.getElementById('kpi-service').title = topService[0];
document.getElementById('kpi-region').textContent = topRegion[0]; document.getElementById('kpi-region').textContent = topRegion[0];
function renderChart(containerId, data, colorVar, isService) { function renderChart(containerId, data, colorVar) {
const container = document.getElementById(containerId); const container = document.getElementById(containerId);
const maxVal = Math.max(...data.map(d => d.value)); const maxVal = Math.max(...data.map(d => d.value));
container.innerHTML = data.map((d, i) => { container.innerHTML = data.map((d, i) => {
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; return `<div class="bar" data-kt-tip="${d.label}: ${fmtNum(d.value)}" style="height:${h}px;background:var(${colorVar});">
const tipLabel = isService ? d.label : shortLabel; <span class="bar-value">${fmtNum(d.value)}</span>
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});">
${showValue}
<span class="bar-label">${shortLabel}</span>
</div>`; </div>`;
}).join(''); }).join('');
} }
const regionData = Object.entries(byRegion).sort((a, b) => b[1] - a[1]).slice(0, 12).map(([label, value]) => ({ label, value })); const regionData = Object.entries(byRegion).sort((a, b) => b[1] - a[1]).slice(0, 12).map(([label, value]) => ({ label, value }));
const serviceData = Object.entries(byService).sort((a, b) => b[1] - a[1]).slice(0, 12).map(([label, value]) => ({ label, value: value })); const serviceData = Object.entries(byService).sort((a, b) => b[1] - a[1]).slice(0, 12).map(([label, value]) => ({ label, value: value }));
renderChart('chart-regions', regionData, '--kt-ai-chart-blue', false); renderChart('chart-regions', regionData, '--kt-ai-chart-blue');
renderChart('chart-services', serviceData, '--kt-ai-chart-green', true); renderChart('chart-services', serviceData, '--kt-ai-chart-green');
const regionFilter = document.getElementById('region-filter'); const regionFilter = document.getElementById('region-filter');
const chipRow = document.getElementById('chip-row'); const chipRow = document.getElementById('chip-row');