ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2025-07-27 06:36:07 +02:00
Code Issues Packages Releases Activity

Improve Histogram.svelte

Browse Source 
- Add bold axis labels
- Labels defined as element props xlabel and ylabel
- Label offset dynamic to plot height (10 percent)
- Add adjustable gaps between bars
This commit is contained in:
Christoph Kluge
2022-09-30 17:00:15 +02:00
parent 46baa6e534
commit d1c47f4359
2 changed files with 36 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web/frontend/src/Status.root.svelte
View File

@@ -152,7 +152,8 @@
<Histogram
width={colWidth1 - 25} height={300}
data={$mainQuery.data.topUsers.sort((a, b) => b.count - a.count).map(({ count }, idx) => ({ count, value: idx }))}
label={(x) => x < $mainQuery.data.topUsers.length ? $mainQuery.data.topUsers[Math.floor(x)].name : '0'} />
label={(x) => x < $mainQuery.data.topUsers.length ? $mainQuery.data.topUsers[Math.floor(x)].name : '0'}
xlabel="User Name" ylabel="Number of Jobs" />
{/key}
</div>
</Col>
@@ -173,7 +174,8 @@
<Histogram
width={colWidth1 - 25} height={300}
data={$mainQuery.data.topProjects.sort((a, b) => b.count - a.count).map(({ count }, idx) => ({ count, value: idx }))}
label={(x) => x < $mainQuery.data.topProjects.length ? $mainQuery.data.topProjects[Math.floor(x)].name : '0'} />
label={(x) => x < $mainQuery.data.topProjects.length ? $mainQuery.data.topProjects[Math.floor(x)].name : '0'}
xlabel="Project Code" ylabel="Number of Jobs" />
{/key}
</Col>
<Col class="px-4 py-2">
@@ -192,7 +194,8 @@
{#key $mainQuery.data.stats}
<Histogram
width={colWidth2 - 25} height={300}
data={$mainQuery.data.stats[0].histDuration} />
data={$mainQuery.data.stats[0].histDuration}
xlabel="Current Runtime in Hours [h]" ylabel="Number of Jobs" />
{/key}
</div>
</Col>
@@ -201,7 +204,8 @@
{#key $mainQuery.data.stats}
<Histogram
width={colWidth2 - 25} height={300}
data={$mainQuery.data.stats[0].histNumNodes} />
data={$mainQuery.data.stats[0].histNumNodes}
xlabel="Allocated Nodes" ylabel="Number of Jobs" />
{/key}
</Col>
</Row>