Add switch for small histograms

- 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

View File

@ -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]"/>

View File

@ -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)))
} }
} }