mirror of
https://github.com/ClusterCockpit/cc-backend
synced 2025-07-02 03:33:49 +02:00
Migrate Pie and Polar components
This commit is contained in:
parent
1ad80efab6
commit
48150ffc8b
@ -12,80 +12,86 @@
|
||||
- `colors ['rgb(x,y,z)', ...]`: Color range used for segments; upstream used for legend
|
||||
-->
|
||||
|
||||
<script context="module">
|
||||
// http://tsitsul.in/blog/coloropt/ : 12 colors normal
|
||||
export const colors = [
|
||||
'rgb(235,172,35)',
|
||||
'rgb(184,0,88)',
|
||||
'rgb(0,140,249)',
|
||||
'rgb(0,110,0)',
|
||||
'rgb(0,187,173)',
|
||||
'rgb(209,99,230)',
|
||||
'rgb(178,69,2)',
|
||||
'rgb(255,146,135)',
|
||||
'rgb(89,84,214)',
|
||||
'rgb(0,198,248)',
|
||||
'rgb(135,133,0)',
|
||||
'rgb(0,167,108)',
|
||||
'rgb(189,189,189)'
|
||||
]
|
||||
<script module>
|
||||
// http://tsitsul.in/blog/coloropt/ : 12 colors normal
|
||||
export const colors = [
|
||||
'rgb(235,172,35)',
|
||||
'rgb(184,0,88)',
|
||||
'rgb(0,140,249)',
|
||||
'rgb(0,110,0)',
|
||||
'rgb(0,187,173)',
|
||||
'rgb(209,99,230)',
|
||||
'rgb(178,69,2)',
|
||||
'rgb(255,146,135)',
|
||||
'rgb(89,84,214)',
|
||||
'rgb(0,198,248)',
|
||||
'rgb(135,133,0)',
|
||||
'rgb(0,167,108)',
|
||||
'rgb(189,189,189)'
|
||||
];
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import Chart from 'chart.js/auto'
|
||||
import { onMount } from 'svelte';
|
||||
/* Ignore Double Script Section Error in IDE */
|
||||
import Chart from 'chart.js/auto';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let canvasId = "pie-default"
|
||||
export let size
|
||||
export let sliceLabel
|
||||
export let quantities
|
||||
export let entities
|
||||
export let displayLegend = false
|
||||
/* Svelte 5 Props */
|
||||
let {
|
||||
canvasId = "pie-default",
|
||||
size,
|
||||
sliceLabel,
|
||||
quantities,
|
||||
entities,
|
||||
displayLegend = false,
|
||||
} = $props();
|
||||
|
||||
const data = {
|
||||
labels: entities,
|
||||
datasets: [
|
||||
{
|
||||
label: sliceLabel,
|
||||
data: quantities,
|
||||
fill: 1,
|
||||
backgroundColor: colors.slice(0, quantities.length)
|
||||
}
|
||||
]
|
||||
/* Const Init */
|
||||
const data = {
|
||||
labels: entities,
|
||||
datasets: [
|
||||
{
|
||||
label: sliceLabel,
|
||||
data: quantities,
|
||||
fill: 1,
|
||||
backgroundColor: colors.slice(0, quantities.length)
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const options = {
|
||||
maintainAspectRatio: false,
|
||||
animation: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: displayLegend
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const options = {
|
||||
maintainAspectRatio: false,
|
||||
animation: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: displayLegend
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
new Chart(
|
||||
document.getElementById(canvasId),
|
||||
{
|
||||
type: 'pie',
|
||||
data: data,
|
||||
options: options
|
||||
}
|
||||
);
|
||||
/* On Mount */
|
||||
onMount(() => {
|
||||
new Chart(
|
||||
document.getElementById(canvasId),
|
||||
{
|
||||
type: 'pie',
|
||||
data: data,
|
||||
options: options
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<!-- <div style="width: 500px;"><canvas id="dimensions"></canvas></div><br/> -->
|
||||
<div class="chart-container" style="--container-width: {size}; --container-height: {size}">
|
||||
<canvas id={canvasId}></canvas>
|
||||
<canvas id={canvasId}></canvas>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.chart-container {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
height: var(--container-height);
|
||||
width: var(--container-width);
|
||||
}
|
||||
.chart-container {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
height: var(--container-height);
|
||||
width: var(--container-width);
|
||||
}
|
||||
</style>
|
||||
|
@ -8,136 +8,139 @@
|
||||
-->
|
||||
|
||||
<script>
|
||||
import { getContext, onMount } from 'svelte'
|
||||
import Chart from 'chart.js/auto'
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
Filler,
|
||||
PointElement,
|
||||
RadialLinearScale,
|
||||
LineElement
|
||||
} from 'chart.js';
|
||||
import { onMount } from 'svelte'
|
||||
import Chart from 'chart.js/auto'
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
Filler,
|
||||
PointElement,
|
||||
RadialLinearScale,
|
||||
LineElement
|
||||
} from 'chart.js';
|
||||
|
||||
ChartJS.register(
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
Filler,
|
||||
PointElement,
|
||||
RadialLinearScale,
|
||||
LineElement
|
||||
/* Register Chart.js Components */
|
||||
ChartJS.register(
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
Filler,
|
||||
PointElement,
|
||||
RadialLinearScale,
|
||||
LineElement
|
||||
);
|
||||
|
||||
/* Svelte 5 Props */
|
||||
let {
|
||||
polarMetrics = [],
|
||||
polarData = [],
|
||||
canvasId = "polar-default",
|
||||
height = 350,
|
||||
} = $props();
|
||||
|
||||
/* Const Init */
|
||||
const options = {
|
||||
maintainAspectRatio: true,
|
||||
animation: false,
|
||||
scales: { // fix scale
|
||||
r: {
|
||||
suggestedMin: 0.0,
|
||||
suggestedMax: 1.0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Derived */
|
||||
const labels = $derived(polarMetrics
|
||||
.filter((m) => (m.peak != null))
|
||||
.map(pm => pm.name)
|
||||
.sort(function (a, b) {return ((a > b) ? 1 : ((b > a) ? -1 : 0))})
|
||||
);
|
||||
|
||||
const data = $derived({
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Max',
|
||||
data: loadData('max'), // Node Scope Only
|
||||
fill: 1,
|
||||
backgroundColor: 'rgba(0, 0, 255, 0.25)',
|
||||
borderColor: 'rgb(0, 0, 255)',
|
||||
pointBackgroundColor: 'rgb(0, 0, 255)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgb(0, 0, 255)'
|
||||
},
|
||||
{
|
||||
label: 'Avg',
|
||||
data: loadData('avg'), // Node Scope Only
|
||||
fill: 2,
|
||||
backgroundColor: 'rgba(255, 210, 0, 0.25)',
|
||||
borderColor: 'rgb(255, 210, 0)',
|
||||
pointBackgroundColor: 'rgb(255, 210, 0)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgb(255, 210, 0)'
|
||||
},
|
||||
{
|
||||
label: 'Min',
|
||||
data: loadData('min'), // Node Scope Only
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(255, 0, 0, 0.25)',
|
||||
borderColor: 'rgb(255, 0, 0)',
|
||||
pointBackgroundColor: 'rgb(255, 0, 0)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgb(255, 0, 0)'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/* Functions */
|
||||
function loadData(type) {
|
||||
if (labels && (type == 'avg' || type == 'min' ||type == 'max')) {
|
||||
return getValues(type)
|
||||
} else if (!labels) {
|
||||
console.warn("Empty 'polarMetrics' array prop! Cannot render Polar representation.")
|
||||
} else {
|
||||
console.warn('Unknown Type For Polar Data (must be one of [min, max, avg])')
|
||||
}
|
||||
return []
|
||||
}
|
||||
|
||||
// Helper
|
||||
const getValues = (type) => labels.map(name => {
|
||||
// Peak is adapted and scaled for job shared state
|
||||
const peak = polarMetrics.find(m => m?.name == name)?.peak
|
||||
const metric = polarData.find(m => m?.name == name)?.data
|
||||
const value = (peak && metric) ? (metric[type] / peak) : 0
|
||||
return value <= 1. ? value : 1.
|
||||
})
|
||||
|
||||
/* On Mount */
|
||||
onMount(() => {
|
||||
new Chart(
|
||||
document.getElementById(canvasId),
|
||||
{
|
||||
type: 'radar',
|
||||
data: data,
|
||||
options: options,
|
||||
height: height
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
export let polarMetrics = [];
|
||||
export let polarData = [];
|
||||
export let canvasId = "polar-default";
|
||||
export let height = 350;
|
||||
|
||||
const labels = polarMetrics
|
||||
.filter((m) => (m.peak != null))
|
||||
.map(pm => pm.name)
|
||||
.sort(function (a, b) {return ((a > b) ? 1 : ((b > a) ? -1 : 0))});
|
||||
|
||||
function loadData(type) {
|
||||
if (labels && (type == 'avg' || type == 'min' ||type == 'max')) {
|
||||
return getValues(type)
|
||||
} else if (!labels) {
|
||||
console.warn("Empty 'polarMetrics' array prop! Cannot render Polar representation.")
|
||||
} else {
|
||||
console.warn('Unknown Type For Polar Data (must be one of [min, max, avg])')
|
||||
}
|
||||
return []
|
||||
}
|
||||
|
||||
// Helper
|
||||
|
||||
const getValues = (type) => labels.map(name => {
|
||||
// Peak is adapted and scaled for job shared state
|
||||
const peak = polarMetrics.find(m => m?.name == name)?.peak
|
||||
const metric = polarData.find(m => m?.name == name)?.data
|
||||
const value = (peak && metric) ? (metric[type] / peak) : 0
|
||||
return value <= 1. ? value : 1.
|
||||
})
|
||||
|
||||
// Chart JS Objects
|
||||
|
||||
const data = {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Max',
|
||||
data: loadData('max'), // Node Scope Only
|
||||
fill: 1,
|
||||
backgroundColor: 'rgba(0, 0, 255, 0.25)',
|
||||
borderColor: 'rgb(0, 0, 255)',
|
||||
pointBackgroundColor: 'rgb(0, 0, 255)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgb(0, 0, 255)'
|
||||
},
|
||||
{
|
||||
label: 'Avg',
|
||||
data: loadData('avg'), // Node Scope Only
|
||||
fill: 2,
|
||||
backgroundColor: 'rgba(255, 210, 0, 0.25)',
|
||||
borderColor: 'rgb(255, 210, 0)',
|
||||
pointBackgroundColor: 'rgb(255, 210, 0)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgb(255, 210, 0)'
|
||||
},
|
||||
{
|
||||
label: 'Min',
|
||||
data: loadData('min'), // Node Scope Only
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(255, 0, 0, 0.25)',
|
||||
borderColor: 'rgb(255, 0, 0)',
|
||||
pointBackgroundColor: 'rgb(255, 0, 0)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgb(255, 0, 0)'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// No custom defined options but keep for clarity
|
||||
const options = {
|
||||
maintainAspectRatio: true,
|
||||
animation: false,
|
||||
scales: { // fix scale
|
||||
r: {
|
||||
suggestedMin: 0.0,
|
||||
suggestedMax: 1.0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
new Chart(
|
||||
document.getElementById(canvasId),
|
||||
{
|
||||
type: 'radar',
|
||||
data: data,
|
||||
options: options,
|
||||
height: height
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- <div style="width: 500px;"><canvas id="dimensions"></canvas></div><br/> -->
|
||||
<div class="chart-container">
|
||||
<canvas id={canvasId}></canvas>
|
||||
<canvas id={canvasId}></canvas>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.chart-container {
|
||||
margin: auto;
|
||||
position: relative;
|
||||
}
|
||||
.chart-container {
|
||||
margin: auto;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
@ -17,9 +17,9 @@
|
||||
CardBody,
|
||||
Spinner
|
||||
} from "@sveltestrap/sveltestrap";
|
||||
import Polar from "../../generic/plots/Polar.svelte";
|
||||
import { findJobFootprintThresholds } from "../../generic/utils.js";
|
||||
|
||||
import Polar from "../../generic/plots/Polar.svelte";
|
||||
|
||||
/* Svelte 5 Props */
|
||||
let { job } = $props();
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user