mirror of
https://github.com/ClusterCockpit/cc-backend
synced 2024-12-26 05:19:05 +01:00
rework clientwidth binds and size defaults for histograms
This commit is contained in:
parent
ed991de11a
commit
f4102b948e
@ -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,36 +465,30 @@
|
||||
{/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"
|
||||
xlabel="Current Runtimes"
|
||||
xunit="Hours"
|
||||
ylabel="Number of Jobs"
|
||||
yunit="Jobs"
|
||||
/>
|
||||
{/key}
|
||||
</div>
|
||||
{#key $statsQuery.data.stats[0].histDuration}
|
||||
<Histogram
|
||||
height={300}
|
||||
data={convert2uplot($statsQuery.data.stats[0].histDuration)}
|
||||
title="Duration Distribution"
|
||||
xlabel="Current Runtimes"
|
||||
xunit="Hours"
|
||||
ylabel="Number of Jobs"
|
||||
yunit="Jobs"
|
||||
/>
|
||||
{/key}
|
||||
</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"
|
||||
xlabel="Allocated Cores"
|
||||
xunit="Cores"
|
||||
ylabel="Number of Jobs"
|
||||
yunit="Jobs"
|
||||
/>
|
||||
{/key}
|
||||
</div>
|
||||
{#key $statsQuery.data.stats[0].histNumCores}
|
||||
<Histogram
|
||||
height={300}
|
||||
data={convert2uplot($statsQuery.data.stats[0].histNumCores)}
|
||||
title="Number of Cores Distribution"
|
||||
xlabel="Allocated Cores"
|
||||
xunit="Cores"
|
||||
ylabel="Number of Jobs"
|
||||
yunit="Jobs"
|
||||
/>
|
||||
{/key}
|
||||
</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]}]`}
|
||||
|
@ -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,25 +590,21 @@
|
||||
<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"
|
||||
ylabel="Number of Jobs"
|
||||
yunit="Jobs"
|
||||
/>
|
||||
{/key}
|
||||
</div>
|
||||
{#key $mainQuery.data.stats}
|
||||
<Histogram
|
||||
data={convert2uplot($mainQuery.data.stats[0].histDuration)}
|
||||
title="Duration Distribution"
|
||||
xlabel="Current Runtimes"
|
||||
xunit="Hours"
|
||||
ylabel="Number of Jobs"
|
||||
yunit="Jobs"
|
||||
/>
|
||||
{/key}
|
||||
</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,25 +616,21 @@
|
||||
</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"
|
||||
ylabel="Number of Jobs"
|
||||
yunit="Jobs"
|
||||
/>
|
||||
{/key}
|
||||
</div>
|
||||
{#key $mainQuery.data.stats}
|
||||
<Histogram
|
||||
data={convert2uplot($mainQuery.data.stats[0].histNumCores)}
|
||||
title="Number of Cores Distribution"
|
||||
xlabel="Allocated Cores"
|
||||
xunit="Cores"
|
||||
ylabel="Number of Jobs"
|
||||
yunit="Jobs"
|
||||
/>
|
||||
{/key}
|
||||
</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}
|
||||
|
@ -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,36 +211,28 @@
|
||||
</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"
|
||||
ylabel="Number of Jobs"
|
||||
yunit="Jobs"
|
||||
/>
|
||||
{/key}
|
||||
</div>
|
||||
{#key $stats.data.jobsStatistics[0].histDuration}
|
||||
<Histogram
|
||||
data={convert2uplot($stats.data.jobsStatistics[0].histDuration)}
|
||||
title="Duration Distribution"
|
||||
xlabel="Current Runtimes"
|
||||
xunit="Hours"
|
||||
ylabel="Number of Jobs"
|
||||
yunit="Jobs"
|
||||
/>
|
||||
{/key}
|
||||
</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"
|
||||
ylabel="Number of Jobs"
|
||||
yunit="Jobs"
|
||||
/>
|
||||
{/key}
|
||||
</div>
|
||||
{#key $stats.data.jobsStatistics[0].histNumNodes}
|
||||
<Histogram
|
||||
data={convert2uplot($stats.data.jobsStatistics[0].histNumNodes)}
|
||||
title="Number of Nodes Distribution"
|
||||
xlabel="Allocated Nodes"
|
||||
xunit="Nodes"
|
||||
ylabel="Number of Jobs"
|
||||
yunit="Jobs"
|
||||
/>
|
||||
{/key}
|
||||
</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}
|
||||
|
@ -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 = []
|
||||
|
@ -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}
|
||||
<div bind:this={plotWrapper} />
|
||||
{:else}
|
||||
<Card class="mx-4" body color="warning"
|
||||
>Cannot render histogram: No data!</Card
|
||||
>
|
||||
{/if}
|
||||
<!-- Define Wrapper and NoData Card within $width -->
|
||||
<div bind:clientWidth={width}>
|
||||
{#if data.length > 0}
|
||||
<div bind:this={plotWrapper} />
|
||||
{:else}
|
||||
<Card class="mx-4" body color="warning"
|
||||
>Cannot render histogram: No data!</Card
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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;
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user