Balken auch sortiert

This commit is contained in:
ecki
2026-05-22 14:21:44 +02:00
parent 840d05a801
commit ab6fa6cb0a
+5 -4
View File
@@ -81,9 +81,11 @@ function renderCostChart(serverParts, domainYear, total){
return return
} }
const sortedParts = [...parts].sort((a, b) => b.amount - a.amount)
container.innerHTML = ` container.innerHTML = `
<div class="cost-bar"> <div class="cost-bar">
${parts.map((part, index) => ` ${sortedParts.map(part => `
<div class="cost-segment ${part.type}" <div class="cost-segment ${part.type}"
style="width:${((part.amount / total) * 100).toFixed(2)}%; --segment-index:${part.colorIndex}" style="width:${((part.amount / total) * 100).toFixed(2)}%; --segment-index:${part.colorIndex}"
title="${part.label}: ${part.amount.toFixed(2)} EUR"> title="${part.label}: ${part.amount.toFixed(2)} EUR">
@@ -91,9 +93,8 @@ function renderCostChart(serverParts, domainYear, total){
`).join("")} `).join("")}
</div> </div>
<div class="cost-breakdown"> <div class="cost-breakdown">
${parts ${sortedParts
.sort((a, b) => b.amount - a.amount) .map(part => `
.map((part, index) => `
<div class="cost-row"> <div class="cost-row">
<span class="cost-dot ${part.type}" style="--segment-index:${part.colorIndex}"></span> <span class="cost-dot ${part.type}" style="--segment-index:${part.colorIndex}"></span>
<span class="cost-label">${part.label}</span> <span class="cost-label">${part.label}</span>