Balken auch sortiert
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user