mirror of
https://github.com/ClusterCockpit/cc-backend
synced 2024-12-27 05:49:04 +01:00
Add switch for small histograms
- adapts distance of labels to x axis
This commit is contained in:
parent
edb1b47281
commit
6e5afd1192
@ -160,7 +160,7 @@
|
|||||||
{#key $statsQuery.data.topUsers}
|
{#key $statsQuery.data.topUsers}
|
||||||
<h4>Top Users (by node hours)</h4>
|
<h4>Top Users (by node hours)</h4>
|
||||||
<Histogram
|
<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 }))}
|
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'}
|
label={(x) => x < $statsQuery.data.topUsers.length ? $statsQuery.data.topUsers[Math.floor(x)].name : 'No Users'}
|
||||||
ylabel="Node Hours [h]"/>
|
ylabel="Node Hours [h]"/>
|
||||||
|
@ -24,6 +24,7 @@
|
|||||||
export let ylabel = ''
|
export let ylabel = ''
|
||||||
export let min = null
|
export let min = null
|
||||||
export let max = null
|
export let max = null
|
||||||
|
export let small = false
|
||||||
export let label = formatNumber
|
export let label = formatNumber
|
||||||
|
|
||||||
const fontSize = 12
|
const fontSize = 12
|
||||||
@ -108,7 +109,7 @@
|
|||||||
} else {
|
} else {
|
||||||
const stepsizeX = getStepSize(maxValue, w, 120)
|
const stepsizeX = getStepSize(maxValue, w, 120)
|
||||||
for (let x = 0; x <= maxValue; x += stepsizeX) {
|
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)))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user