ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2025-11-04 01:25:06 +01:00
Code Issues Packages Releases Activity

Add switch for small histograms

Browse Source 
- adapts distance of labels to x axis
This commit is contained in:
Christoph Kluge
2023-06-09 13:30:55 +02:00
parent edb1b47281
commit 6e5afd1192
2 changed files with 3 additions and 2 deletions

2
web/frontend/src/Analysis.root.svelte

@@ -160,7 +160,7 @@
{#key $statsQuery.data.topUsers}
<h4>Top Users (by node hours)</h4>
<Histogram
width={colWidth - 25} height={300 * 0.5}
width={colWidth - 25} height={300 * 0.5} small={true}
data={$statsQuery.data.topUsers.sort((a, b) => b.count - a.count).map(({ count }, idx) => ({ count, value: idx }))}
label={(x) => x < $statsQuery.data.topUsers.length ? $statsQuery.data.topUsers[Math.floor(x)].name : 'No Users'}
ylabel="Node Hours [h]"/>

3
web/frontend/src/plots/Histogram.svelte

@@ -24,6 +24,7 @@
export let ylabel = ''
export let min = null
export let max = null
export let small = false
export let label = formatNumber
const fontSize = 12
@@ -108,7 +109,7 @@
} else {
const stepsizeX = getStepSize(maxValue, w, 120)
for (let x = 0; x <= maxValue; x += stepsizeX) {
ctx.fillText(label(x), getCanvasX(x), height - paddingBottom - Math.floor(labelOffset / 2))
ctx.fillText(label(x), getCanvasX(x), height - paddingBottom - Math.floor(labelOffset / (small ? 8 : 2)))
}
}