mirror of
https://github.com/ClusterCockpit/cc-backend
synced 2025-07-02 11:43:49 +02:00
Migrate RooflineHM and Scatter components
- With this commit, all SV4 components are migrated to SV5
This commit is contained in:
Christoph Kluge
parent
48150ffc8b
commit
db674ec31d
@ -10,16 +10,54 @@
|
||||
- `height Number?`: Plot height (reactively adaptive) [Default: 300]
|
||||
-->
|
||||
|
||||
<script context="module">
|
||||
const axesColor = '#aaaaaa'
|
||||
const tickFontSize = 10
|
||||
const labelFontSize = 12
|
||||
const fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
|
||||
const paddingLeft = 40,
|
||||
paddingRight = 10,
|
||||
paddingTop = 10,
|
||||
paddingBottom = 50
|
||||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
import { formatNumber } from '../units.js'
|
||||
|
||||
/* Svelte 5 Props */
|
||||
let {
|
||||
subCluster = null,
|
||||
tiles = null,
|
||||
maxY = null,
|
||||
width = 500,
|
||||
height = 300,
|
||||
} = $props();
|
||||
|
||||
/* Check Before */
|
||||
console.assert(tiles, "you must provide tiles!")
|
||||
|
||||
/* Const Init */
|
||||
const axesColor = '#aaaaaa';
|
||||
const tickFontSize = 10;
|
||||
const labelFontSize = 12;
|
||||
const fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"';
|
||||
const paddingLeft = 40;
|
||||
const paddingRight = 10;
|
||||
const paddingTop = 10;
|
||||
const paddingBottom = 5;
|
||||
|
||||
/* Var Init */
|
||||
let timeoutId = null;
|
||||
|
||||
/* State Init */
|
||||
let ctx = $state();
|
||||
let canvasElement = $state();
|
||||
let prevWidth = $state(width);
|
||||
let prevHeight = $state(height);
|
||||
|
||||
/* Derived */
|
||||
const data = $derived({
|
||||
tiles: tiles,
|
||||
xLabel: 'Intensity [FLOPS/byte]',
|
||||
yLabel: 'Performance [GFLOPS]'
|
||||
});
|
||||
|
||||
/* Effects */
|
||||
$effect(() =>{
|
||||
sizeChanged(width, height);
|
||||
});
|
||||
|
||||
/* Functions */
|
||||
function lineIntersect(x1, y1, x2, y2, x3, y3, x4, y4) {
|
||||
let l = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1)
|
||||
let a = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / l
|
||||
@ -184,27 +222,8 @@
|
||||
}
|
||||
ctx.stroke()
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
import { formatNumber } from '../units.js'
|
||||
|
||||
export let subCluster = null
|
||||
export let tiles = null
|
||||
export let maxY = null
|
||||
export let width = 500
|
||||
export let height = 300
|
||||
|
||||
console.assert(tiles, "you must provide tiles!")
|
||||
|
||||
let ctx, canvasElement, prevWidth = width, prevHeight = height
|
||||
const data = {
|
||||
tiles: tiles,
|
||||
xLabel: 'Intensity [FLOPS/byte]',
|
||||
yLabel: 'Performance [GFLOPS]'
|
||||
}
|
||||
|
||||
/* On Mount */
|
||||
onMount(() => {
|
||||
ctx = canvasElement.getContext('2d')
|
||||
if (prevWidth != width || prevHeight != height) {
|
||||
@ -217,7 +236,6 @@
|
||||
render(ctx, data, subCluster, width, height, maxY)
|
||||
})
|
||||
|
||||
let timeoutId = null
|
||||
function sizeChanged() {
|
||||
if (!ctx)
|
||||
return
|
||||
@ -237,8 +255,6 @@
|
||||
render(ctx, data, subCluster, width, height, maxY)
|
||||
}, 250)
|
||||
}
|
||||
|
||||
$: sizeChanged(width, height)
|
||||
</script>
|
||||
|
||||
<div class="cc-plot">
|
||||
|
||||
@ -11,18 +11,44 @@
|
||||
- `xLabel String`:
|
||||
- `yLabel String`:
|
||||
-->
|
||||
|
||||
<script context="module">
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { formatNumber } from '../units.js'
|
||||
|
||||
const axesColor = '#aaaaaa'
|
||||
const fontSize = 12
|
||||
const fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
|
||||
const paddingLeft = 40,
|
||||
paddingRight = 10,
|
||||
paddingTop = 10,
|
||||
paddingBottom = 50
|
||||
/* Svelte 5 Props */
|
||||
let {
|
||||
X,
|
||||
Y,
|
||||
S = null,
|
||||
color = '#0066cc',
|
||||
width = 250,
|
||||
height = 300,
|
||||
xLabel,
|
||||
yLabel,
|
||||
} = $props();
|
||||
|
||||
/* Const Init */
|
||||
const axesColor = '#aaaaaa';
|
||||
const fontSize = 12;
|
||||
const fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"';
|
||||
const paddingLeft = 40;
|
||||
const paddingRight = 10;
|
||||
const paddingTop = 10;
|
||||
const paddingBottom = 50;
|
||||
|
||||
/* Var Init */
|
||||
let timeoutId = null;
|
||||
|
||||
/* State Init */
|
||||
let ctx = $state();
|
||||
let canvasElement = $state();
|
||||
|
||||
/* Effects */
|
||||
$effect(() => {
|
||||
sizeChanged(width, height);
|
||||
});
|
||||
|
||||
/* Functions */
|
||||
function getStepSize(valueRange, pixelRange, minSpace) {
|
||||
const proposition = valueRange / (pixelRange / minSpace);
|
||||
const getStepSize = n => Math.pow(10, Math.floor(n / 3)) *
|
||||
@ -41,6 +67,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
function sizeChanged() {
|
||||
if (timeoutId != null)
|
||||
clearTimeout(timeoutId);
|
||||
|
||||
timeoutId = setTimeout(() => {
|
||||
timeoutId = null;
|
||||
if (!canvasElement)
|
||||
return;
|
||||
|
||||
canvasElement.width = width;
|
||||
canvasElement.height = height;
|
||||
ctx = canvasElement.getContext('2d');
|
||||
render(ctx, X, Y, S, color, xLabel, yLabel, width, height);
|
||||
}, 250);
|
||||
}
|
||||
|
||||
function render(ctx, X, Y, S, color, xLabel, yLabel, width, height) {
|
||||
if (width <= 0)
|
||||
return;
|
||||
@ -137,49 +179,14 @@
|
||||
}
|
||||
ctx.stroke();
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let X;
|
||||
export let Y;
|
||||
export let S = null;
|
||||
export let color = '#0066cc';
|
||||
export let width = 250;
|
||||
export let height = 300;
|
||||
export let xLabel;
|
||||
export let yLabel;
|
||||
|
||||
let ctx;
|
||||
let canvasElement;
|
||||
|
||||
/* On Mount */
|
||||
onMount(() => {
|
||||
canvasElement.width = width;
|
||||
canvasElement.height = height;
|
||||
ctx = canvasElement.getContext('2d');
|
||||
render(ctx, X, Y, S, color, xLabel, yLabel, width, height);
|
||||
});
|
||||
|
||||
let timeoutId = null;
|
||||
function sizeChanged() {
|
||||
if (timeoutId != null)
|
||||
clearTimeout(timeoutId);
|
||||
|
||||
timeoutId = setTimeout(() => {
|
||||
timeoutId = null;
|
||||
if (!canvasElement)
|
||||
return;
|
||||
|
||||
canvasElement.width = width;
|
||||
canvasElement.height = height;
|
||||
ctx = canvasElement.getContext('2d');
|
||||
render(ctx, X, Y, S, color, xLabel, yLabel, width, height);
|
||||
}, 250);
|
||||
}
|
||||
|
||||
$: sizeChanged(width, height);
|
||||
|
||||
</script>
|
||||
|
||||
<div class="cc-plot" bind:clientWidth={width}>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user