ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2025-07-22 20:41:40 +02:00
Code Issues Packages Releases Activity

cleanup intends, add transparency switch to path renderer

Browse Source
This commit is contained in:
Christoph Kluge
2025-07-15 18:49:23 +02:00
parent e48ff8be73
commit 5cdb80b4d6
1 changed files with 80 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
web/frontend/src/generic/plots/NewBubbleRoofline.svelte
View File

@@ -92,8 +92,8 @@
x = 1.0 - (x - 0.25) * 4.0; x = 1.0 - (x - 0.25) * 4.0;
return Math.floor(x * 255.0); return Math.floor(x * 255.0);
} }
function getRGB(c, makeTransparent = false) { function getRGB(c, transparent = false) {
if (makeTransparent) return `rgba(${cbmode ? '0' : getGradientR(c)}, ${getGradientG(c)}, ${getGradientB(c)}, 0.5)`; if (transparent) return `rgba(${cbmode ? '0' : getGradientR(c)}, ${getGradientG(c)}, ${getGradientB(c)}, 0.5)`;
else return `rgb(${cbmode ? '0' : getGradientR(c)}, ${getGradientG(c)}, ${getGradientB(c)})`; else return `rgb(${cbmode ? '0' : getGradientR(c)}, ${getGradientG(c)}, ${getGradientB(c)})`;
} }
function nearestThousand(num) { function nearestThousand(num) {
@@ -240,7 +240,7 @@
// Dot Renderer // Dot Renderer
const makeDrawPoints = (opts) => { const makeDrawPoints = (opts) => {
let {/*size, disp,*/ each = () => {}} = opts; let {/*size, disp,*/ transparentFill, each = () => {}} = opts;
const sizeBase = 5 * pxRatio; const sizeBase = 5 * pxRatio;
return (u, seriesIdx, idx0, idx1) => { return (u, seriesIdx, idx0, idx1) => {
@@ -264,9 +264,10 @@
let filtTop = u.posToVal(-maxSize / 2, scaleY.key); let filtTop = u.posToVal(-maxSize / 2, scaleY.key);
for (let i = 0; i < d[0].length; i++) { for (let i = 0; i < d[0].length; i++) {
// Color based on Duration // Color based on Duration, check index for transparency highlighting
u.ctx.strokeStyle = getRGB(u.data[2][i]); u.ctx.strokeStyle = getRGB(u.data[2][i]);
u.ctx.fillStyle = getRGB(u.data[2][i], true); u.ctx.fillStyle = getRGB(u.data[2][i], transparentFill);
// Get Values // Get Values
let xVal = d[0][i]; let xVal = d[0][i];
let yVal = d[1][i]; let yVal = d[1][i];
@@ -310,6 +311,7 @@
// }, // },
// }, // },
// }, // },
transparentFill: true,
each: (u, seriesIdx, dataIdx, lft, top, wid, hgt) => { each: (u, seriesIdx, dataIdx, lft, top, wid, hgt) => {
// we get back raw canvas coords (included axes & padding). translate to the plotting area origin // we get back raw canvas coords (included axes & padding). translate to the plotting area origin
lft -= u.bbox.left; lft -= u.bbox.left;
@@ -497,7 +499,7 @@
} }
return hRect && seriesIdx == hRect.sidx ? hRect.didx : null; return hRect && seriesIdx == hRect.sidx ? hRect.didx : null;
}, },
// /* Render "Fill" on Data Point Hover: Works in Example Bubble, does not work here? */ /* Render "Fill" on Data Point Hover: Works in Example Bubble, does not work here? Guess: Interference with tooltip */
// points: { // points: {
// size: (u, seriesIdx) => { // size: (u, seriesIdx) => {
// return hRect && seriesIdx == hRect.sidx ? hRect.w / pxRatio : 0; // return hRect && seriesIdx == hRect.sidx ? hRect.w / pxRatio : 0;
@@ -716,6 +718,5 @@
{#if roofData != null} {#if roofData != null}
<div bind:this={plotWrapper} class="p-2"></div> <div bind:this={plotWrapper} class="p-2"></div>
{:else} {:else}
<Card class="mx-4" body color="warning">Cannot render roofline: No data!</Card <Card class="mx-4" body color="warning">Cannot render roofline: No data!</Card>
>
{/if} {/if}