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

feat: Change histogram to piechart in status view

Browse Source
This commit is contained in:
Christoph Kluge
2023-08-10 18:05:16 +02:00
parent bbd8637ca6
commit da8cefe153
3 changed files with 95 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
<script>
import Refresher from './joblist/Refresher.svelte'
import Roofline, { transformPerNodeData } from './plots/Roofline.svelte'
import Histogram from './plots/Histogram.svelte'
import Pie from './plots/Pie.svelte'
import Histogramuplot from './plots/Histogramuplot.svelte'
import { Row, Col, Spinner, Card, CardHeader, CardTitle, CardBody, Table, Progress, Icon } from 'sveltestrap'
import { init, convert2uplot } from './utils.js'
@@ -160,13 +160,15 @@
<Row cols={4}>
<Col class="p-2">
<div bind:clientWidth={colWidth1}>
<h4 class="mb-3 text-center">Top Users</h4>
<h4 class="text-center">Top Users</h4>
{#key $mainQuery.data}
<Histogram
width={colWidth1 - 25}
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'}
xlabel="User Name" ylabel="Number of Jobs" />
<Pie
size={colWidth1}
sliceLabel='Jobs'
quantities={$mainQuery.data.topUsers.sort((a, b) => b.count - a.count).map((tu) => tu.count)}
entities={$mainQuery.data.topUsers.sort((a, b) => b.count - a.count).map((tu) => tu.name)}
/>
{/key}
</div>
</Col>
@@ -182,13 +184,14 @@
</Table>
</Col>
<Col class="p-2">
<h4 class="mb-3 text-center">Top Projects</h4>
<h4 class="text-center">Top Projects</h4>
{#key $mainQuery.data}
<Histogram
width={colWidth1 - 25}
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'}
xlabel="Project Code" ylabel="Number of Jobs" />
<Pie
size={colWidth1}
sliceLabel='Jobs'
quantities={$mainQuery.data.topProjects.sort((a, b) => b.count - a.count).map((tp) => tp.count)}
entities={$mainQuery.data.topProjects.sort((a, b) => b.count - a.count).map((tp) => tp.name)}
/>
{/key}
</Col>
<Col class="px-4 py-2">