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

rework clientwidth binds and size defaults for histograms

Browse Source
This commit is contained in:
Christoph Kluge 2024-10-08 18:46:59 +02:00
parent ed991de11a
commit f4102b948e
7 changed files with 86 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -55,7 +55,7 @@
let filterComponent; // see why here: https://stackoverflow.com/questions/58287729/how-can-i-export-a-function-from-a-svelte-component-that-changes-a-value-in-the
let jobFilters = [];
let rooflineMaxY;
let colWidth1, colWidth2, colWidth3, colWidth4;
let colWidth1, colWidth2;
let numBins = 50;
let maxY = -1;
@ -465,10 +465,8 @@
{/if}
</Col>
<Col>
<div bind:clientWidth={colWidth3}>
{#key $statsQuery.data.stats[0].histDuration}
<Histogram
width={colWidth3}
height={300}
data={convert2uplot($statsQuery.data.stats[0].histDuration)}
title="Duration Distribution"
@ -478,13 +476,10 @@
yunit="Jobs"
/>
{/key}
</div>
</Col>
<Col>
<div bind:clientWidth={colWidth4}>
{#key $statsQuery.data.stats[0].histNumCores}
<Histogram
width={colWidth4}
height={300}
data={convert2uplot($statsQuery.data.stats[0].histNumCores)}
title="Number of Cores Distribution"
@ -494,7 +489,6 @@
yunit="Jobs"
/>
{/key}
</div>
</Col>
</Row>
{/if}
@ -525,7 +519,6 @@
<Col>
<PlotGrid
let:item
let:width
renderFor="analysis"
items={metricsInHistograms.map((metric) => ({
metric,
@ -542,8 +535,6 @@
>
<Histogram
data={convert2uplot(item.bins)}
{width}
height={250}
usesBins={true}
title="Average Distribution of '{item.metric}'"
xlabel={`${item.metric} bin maximum [${metricUnits[item.metric]}]`}

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

@ -44,9 +44,8 @@
export let cluster;
let plotWidths = [],
colWidth1,
colWidth2;
let plotWidths = [];
let colWidth;
let from = new Date(Date.now() - 5 * 60 * 1000),
to = new Date(Date.now());
const topOptions = [
@ -468,7 +467,7 @@
<Row cols={{ lg: 4, md: 2, sm: 1 }}>
<Col class="p-2">
<div bind:clientWidth={colWidth1}>
<div bind:clientWidth={colWidth}>
<h4 class="text-center">
Top Users on {cluster.charAt(0).toUpperCase() + cluster.slice(1)}
</h4>
@ -479,7 +478,7 @@
<Card body color="danger">{$topUserQuery.error.message}</Card>
{:else}
<Pie
size={colWidth1}
size={colWidth}
sliceLabel={topUserSelection.label}
quantities={$topUserQuery.data.topUser.map(
(tu) => tu[topUserSelection.key],
@ -539,7 +538,7 @@
<Card body color="danger">{$topProjectQuery.error.message}</Card>
{:else}
<Pie
size={colWidth1}
size={colWidth}
sliceLabel={topProjectSelection.label}
quantities={$topProjectQuery.data.topProjects.map(
(tp) => tp[topProjectSelection.key],
@ -591,11 +590,9 @@
<hr class="my-2" />
<Row cols={{ lg: 2, md: 1 }}>
<Col class="p-2">
<div bind:clientWidth={colWidth2}>
{#key $mainQuery.data.stats}
<Histogram
data={convert2uplot($mainQuery.data.stats[0].histDuration)}
width={colWidth2 - 25}
title="Duration Distribution"
xlabel="Current Runtimes"
xunit="Hours"
@ -603,13 +600,11 @@
yunit="Jobs"
/>
{/key}
</div>
</Col>
<Col class="p-2">
{#key $mainQuery.data.stats}
<Histogram
data={convert2uplot($mainQuery.data.stats[0].histNumNodes)}
width={colWidth2 - 25}
title="Number of Nodes Distribution"
xlabel="Allocated Nodes"
xunit="Nodes"
@ -621,11 +616,9 @@
</Row>
<Row cols={{ lg: 2, md: 1 }}>
<Col class="p-2">
<div bind:clientWidth={colWidth2}>
{#key $mainQuery.data.stats}
<Histogram
data={convert2uplot($mainQuery.data.stats[0].histNumCores)}
width={colWidth2 - 25}
title="Number of Cores Distribution"
xlabel="Allocated Cores"
xunit="Cores"
@ -633,13 +626,11 @@
yunit="Jobs"
/>
{/key}
</div>
</Col>
<Col class="p-2">
{#key $mainQuery.data.stats}
<Histogram
data={convert2uplot($mainQuery.data.stats[0].histNumAccs)}
width={colWidth2 - 25}
title="Number of Accelerators Distribution"
xlabel="Allocated Accs"
xunit="Accs"
@ -654,7 +645,6 @@
{#key $mainQuery.data.stats[0].histMetrics}
<PlotGrid
let:item
let:width
renderFor="user"
items={$mainQuery.data.stats[0].histMetrics}
itemsPerRow={2}
@ -662,8 +652,6 @@
<Histogram
data={convert2uplot(item.data)}
usesBins={true}
{width}
height={250}
title="Distribution of '{item.metric}' averages"
xlabel={`${item.metric} bin maximum ${item?.unit ? `[${item.unit}]` : ``}`}
xunit={item.unit}

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

@ -54,10 +54,7 @@
isSortingOpen = false;
let metrics = ccconfig.plot_list_selectedMetrics,
isMetricsSelectionOpen = false;
let w1,
w2,
histogramHeight = 250,
isHistogramSelectionOpen = false;
let isHistogramSelectionOpen = false;
let selectedCluster = filterPresets?.cluster ? filterPresets.cluster : null;
let showFootprint = filterPresets.cluster
? !!ccconfig[`plot_list_showFootprint:${filterPresets.cluster}`]
@ -214,12 +211,9 @@
</Table>
</Col>
<Col class="px-1">
<div bind:clientWidth={w1}>
{#key $stats.data.jobsStatistics[0].histDuration}
<Histogram
data={convert2uplot($stats.data.jobsStatistics[0].histDuration)}
width={w1}
height={histogramHeight}
title="Duration Distribution"
xlabel="Current Runtimes"
xunit="Hours"
@ -227,15 +221,11 @@
yunit="Jobs"
/>
{/key}
</div>
</Col>
<Col class="px-1">
<div bind:clientWidth={w2}>
{#key $stats.data.jobsStatistics[0].histNumNodes}
<Histogram
data={convert2uplot($stats.data.jobsStatistics[0].histNumNodes)}
width={w2}
height={histogramHeight}
title="Number of Nodes Distribution"
xlabel="Allocated Nodes"
xunit="Nodes"
@ -243,7 +233,6 @@
yunit="Jobs"
/>
{/key}
</div>
</Col>
{/if}
</Row>
@ -278,7 +267,6 @@
{#key $stats.data.jobsStatistics[0].histMetrics}
<PlotGrid
let:item
let:width
renderFor="user"
items={$stats.data.jobsStatistics[0].histMetrics}
itemsPerRow={3}
@ -286,8 +274,6 @@
<Histogram
data={convert2uplot(item.data)}
usesBins={true}
{width}
height={250}
title="Distribution of '{item.metric} ({item.stat})' footprints"
xlabel={`${item.metric} bin maximum ${item?.unit ? `[${item.unit}]` : ``}`}
xunit={item.unit}

4
web/frontend/src/generic/PlotGrid.svelte
View File

@ -17,8 +17,8 @@
export let items
export let renderFor
let rows = []
const isPlaceholder = x => x._is_placeholder === true
let rows = [];
const isPlaceholder = x => x._is_placeholder === true;
function tile(items, itemsPerRow) {
const rows = []

13
web/frontend/src/generic/plots/Histogram.svelte
View File

@ -21,8 +21,8 @@
export let data;
export let usesBins = false;
export let width = 500;
export let height = 300;
export let width = null;
export let height = 250;
export let title = "";
export let xlabel = "";
export let xunit = "";
@ -226,10 +226,13 @@
$: sizeChanged(width, height);
</script>
{#if data.length > 0}
<!-- Define Wrapper and NoData Card within $width -->
<div bind:clientWidth={width}>
{#if data.length > 0}
<div bind:this={plotWrapper} />
{:else}
{:else}
<Card class="mx-4" body color="warning"
>Cannot render histogram: No data!</Card
>
{/if}
{/if}
</div>

3
web/frontend/src/generic/plots/MetricPlot.svelte
View File

@ -117,6 +117,7 @@
export let metric;
export let scope = "node";
export let width = null;
export let height = 300;
export let timestep;
export let series;
@ -130,8 +131,6 @@
export let numaccs = 0;
export let zoomState = null;
let width;
if (useStatsSeries == null) useStatsSeries = statisticsSeries != null;
if (useStatsSeries == false && series == null) useStatsSeries = true;

4
web/frontend/src/generic/plots/Scatter.svelte
View File

@ -146,8 +146,8 @@
export let Y;
export let S = null;
export let color = '#0066cc';
export let width;
export let height;
export let width = 250;
export let height = 300;
export let xLabel;
export let yLabel;