ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2024-12-26 13:29:05 +01:00
Code Issues Packages Releases Activity

Change histograms to uplot where x-axis is number

Browse Source
This commit is contained in:
Christoph Kluge 2023-08-09 12:42:25 +02:00
parent 423e800d9e
commit e32042204b
4 changed files with 49 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
web/frontend/src/Analysis.root.svelte
View File

@ -1,10 +1,11 @@
<script> <script>
import { init } from './utils.js' import { init, convert2uplot } from './utils.js'
import { getContext, onMount } from 'svelte' import { getContext, onMount } from 'svelte'
import { queryStore, gql, getContextClient } from '@urql/svelte' import { queryStore, gql, getContextClient } from '@urql/svelte'
import { Row, Col, Spinner, Card, Table } from 'sveltestrap' import { Row, Col, Spinner, Card, Table } from 'sveltestrap'
import Filters from './filters/Filters.svelte' import Filters from './filters/Filters.svelte'
import PlotSelection from './PlotSelection.svelte' import PlotSelection from './PlotSelection.svelte'
import Histogramuplot from './plots/Histogramuplot.svelte'
import Histogram, { binsFromFootprint } from './plots/Histogram.svelte' import Histogram, { binsFromFootprint } from './plots/Histogram.svelte'
import ScatterPlot from './plots/Scatter.svelte' import ScatterPlot from './plots/Scatter.svelte'
import PlotTable from './PlotTable.svelte' import PlotTable from './PlotTable.svelte'
@ -169,22 +170,26 @@
</div> </div>
<div class="col-3"> <div class="col-3">
{#key $statsQuery.data.stats[0].histDuration} {#key $statsQuery.data.stats[0].histDuration}
<h4>Duration Distribution</h4> <Histogramuplot
<Histogram data={convert2uplot($statsQuery.data.stats[0].histDuration)}
width={colWidth - 25} width={colWidth - 25}
data={$statsQuery.data.stats[0].histDuration} title="Duration Distribution"
xlabel="Current Runtimes [h]" xlabel="Current Runtimes"
ylabel="Number of Jobs"/> xunit="Hours"
ylabel="Number of Jobs"
yunit="Jobs"/>
{/key} {/key}
</div> </div>
<div class="col-3"> <div class="col-3">
{#key $statsQuery.data.stats[0].histNumNodes} {#key $statsQuery.data.stats[0].histNumNodes}
<h4>Number of Nodes Distribution</h4> <Histogramuplot
<Histogram data={convert2uplot($statsQuery.data.stats[0].histNumNodes)}
width={colWidth - 25} width={colWidth - 25}
data={$statsQuery.data.stats[0].histNumNodes} title="Number of Nodes Distribution"
xlabel="Allocated Nodes [#]" xlabel="Allocated Nodes"
ylabel="Number of Jobs" /> xunit="Nodes"
ylabel="Number of Jobs"
yunit="Jobs"/>
{/key} {/key}
</div> </div>
<div class="col-3"> <div class="col-3">
@ -233,15 +238,16 @@
$footprintsQuery.data.footprints.metrics.find(f => f.metric == metric).data, numBins) }))} $footprintsQuery.data.footprints.metrics.find(f => f.metric == metric).data, numBins) }))}
itemsPerRow={ccconfig.plot_view_plotsPerRow}> itemsPerRow={ccconfig.plot_view_plotsPerRow}>
<h4>Average Distribution of '{item.metric}'</h4> <Histogramuplot
<Histogram data={convert2uplot(item.bins)}
width={width} height={250} width={width} height={250}
min={item.min} max={item.max} title="Average Distribution of '{item.metric}'"
data={item.bins} xlabel={`${item.metric} average [${(metricConfig(cluster.name, item.metric)?.unit?.prefix ? metricConfig(cluster.name, item.metric)?.unit?.prefix : '') +
label={item.label}
xlabel={`${item.metric} Average [${(metricConfig(cluster.name, item.metric)?.unit?.prefix ? metricConfig(cluster.name, item.metric)?.unit?.prefix : '') +
(metricConfig(cluster.name, item.metric)?.unit?.base ? metricConfig(cluster.name, item.metric)?.unit?.base : '')}]`} (metricConfig(cluster.name, item.metric)?.unit?.base ? metricConfig(cluster.name, item.metric)?.unit?.base : '')}]`}
ylabel="Node Hours [h]" /> xunit={`${(metricConfig(cluster.name, item.metric)?.unit?.prefix ? metricConfig(cluster.name, item.metric)?.unit?.prefix : '') +
(metricConfig(cluster.name, item.metric)?.unit?.base ? metricConfig(cluster.name, item.metric)?.unit?.base : '')}`}
ylabel="Node Hours"
yunit="Hours"/>
</PlotTable> </PlotTable>
</Col> </Col>
</Row> </Row>

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

@ -2,8 +2,9 @@
import Refresher from './joblist/Refresher.svelte' import Refresher from './joblist/Refresher.svelte'
import Roofline, { transformPerNodeData } from './plots/Roofline.svelte' import Roofline, { transformPerNodeData } from './plots/Roofline.svelte'
import Histogram from './plots/Histogram.svelte' import Histogram from './plots/Histogram.svelte'
import Histogramuplot from './plots/Histogramuplot.svelte'
import { Row, Col, Spinner, Card, CardHeader, CardTitle, CardBody, Table, Progress, Icon } from 'sveltestrap' import { Row, Col, Spinner, Card, CardHeader, CardTitle, CardBody, Table, Progress, Icon } from 'sveltestrap'
import { init } from './utils.js' import { init, convert2uplot } from './utils.js'
import { scaleNumbers } from './units.js' import { scaleNumbers } from './units.js'
import { queryStore, gql, getContextClient } from '@urql/svelte' import { queryStore, gql, getContextClient } from '@urql/svelte'
@ -202,27 +203,32 @@
</Table> </Table>
</Col> </Col>
</Row> </Row>
<Row cols={2} class="mt-3"> <hr class="my-2"/>
<Row cols={2}>
<Col class="p-2"> <Col class="p-2">
<div bind:clientWidth={colWidth2}> <div bind:clientWidth={colWidth2}>
<h4 class="mb-3 text-center">Duration Distribution</h4>
{#key $mainQuery.data.stats} {#key $mainQuery.data.stats}
<Histogram <Histogramuplot
data={convert2uplot($mainQuery.data.stats[0].histDuration)}
width={colWidth2 - 25} width={colWidth2 - 25}
data={$mainQuery.data.stats[0].histDuration} title="Duration Distribution"
xlabel="Current Runtimes [h]" xlabel="Current Runtimes"
ylabel="Number of Jobs" /> xunit="Hours"
ylabel="Number of Jobs"
yunit="Jobs"/>
{/key} {/key}
</div> </div>
</Col> </Col>
<Col class="p-2"> <Col class="p-2">
<h4 class="mb-3 text-center">Number of Nodes Distribution</h4>
{#key $mainQuery.data.stats} {#key $mainQuery.data.stats}
<Histogram <Histogramuplot
data={convert2uplot($mainQuery.data.stats[0].histNumNodes)}
width={colWidth2 - 25} width={colWidth2 - 25}
data={$mainQuery.data.stats[0].histNumNodes} title="Number of Nodes Distribution"
xlabel="Allocated Nodes [#]" xlabel="Allocated Nodes"
ylabel="Number of Jobs" /> xunit="Nodes"
ylabel="Number of Jobs"
yunit="Jobs"/>
{/key} {/key}
</Col> </Col>
</Row> </Row>

4
web/frontend/src/User.root.svelte
View File

@ -134,11 +134,11 @@
</Table> </Table>
</Col> </Col>
<div class="col-4 text-center" bind:clientWidth={w1}> <div class="col-4 text-center" bind:clientWidth={w1}>
<b>Duration Distribution</b>
{#key $stats.data.jobsStatistics[0].histDuration} {#key $stats.data.jobsStatistics[0].histDuration}
<Histogramuplot <Histogramuplot
data={convert2uplot($stats.data.jobsStatistics[0].histDuration)} data={convert2uplot($stats.data.jobsStatistics[0].histDuration)}
width={w2 - 25} height={histogramHeight} width={w2 - 25} height={histogramHeight}
title="Duration Distribution"
xlabel="Current Runtimes" xlabel="Current Runtimes"
xunit="Hours" xunit="Hours"
ylabel="Number of Jobs" ylabel="Number of Jobs"
@ -146,11 +146,11 @@
{/key} {/key}
</div> </div>
<div class="col-4 text-center" bind:clientWidth={w2}> <div class="col-4 text-center" bind:clientWidth={w2}>
<b>Number of Nodes Distribution</b>
{#key $stats.data.jobsStatistics[0].histNumNodes} {#key $stats.data.jobsStatistics[0].histNumNodes}
<Histogramuplot <Histogramuplot
data={convert2uplot($stats.data.jobsStatistics[0].histNumNodes)} data={convert2uplot($stats.data.jobsStatistics[0].histNumNodes)}
width={w2 - 25} height={histogramHeight} width={w2 - 25} height={histogramHeight}
title="Number of Nodes Distribution"
xlabel="Allocated Nodes" xlabel="Allocated Nodes"
xunit="Nodes" xunit="Nodes"
ylabel="Number of Jobs" ylabel="Number of Jobs"

8
web/frontend/src/plots/Histogramuplot.svelte
View File

@ -13,6 +13,7 @@
export let data export let data
export let width = 500 export let width = 500
export let height = 300 export let height = 300
export let title = ''
export let xlabel = '' export let xlabel = ''
export let xunit = 'X' export let xunit = 'X'
export let ylabel = '' export let ylabel = ''
@ -29,7 +30,7 @@
let s = u.series[seriesIdx]; let s = u.series[seriesIdx];
let style = s.drawStyle; let style = s.drawStyle;
let renderer = ( let renderer = ( // If bars to wide, change here
style == drawStyles.bars ? ( style == drawStyles.bars ? (
bars({size: [0.75, 100]}) bars({size: [0.75, 100]})
) : ) :
@ -102,6 +103,7 @@
let opts = { let opts = {
width: width, width: width,
height: height, height: height,
title: title,
plugins: [ plugins: [
legendAsTooltipPlugin() legendAsTooltipPlugin()
], ],
@ -157,10 +159,10 @@
], ],
series: [ series: [
{ {
label: xunit, label: xunit !== '' ? xunit : null,
}, },
Object.assign({ Object.assign({
label: yunit, label: yunit !== '' ? yunit : null,
width: 1 / devicePixelRatio, width: 1 / devicePixelRatio,
drawStyle: drawStyles.points, drawStyle: drawStyles.points,
lineInterpolation: null, lineInterpolation: null,