cleanup intends, add transparency switch to path renderer

This commit is contained in:
Christoph Kluge
2025-07-15 18:49:23 +02:00
parent e48ff8be73
commit 5cdb80b4d6

View File

@@ -92,8 +92,8 @@
x = 1.0 - (x - 0.25) * 4.0;
return Math.floor(x * 255.0);
}
function getRGB(c, makeTransparent = false) {
if (makeTransparent) return `rgba(${cbmode ? '0' : getGradientR(c)}, ${getGradientG(c)}, ${getGradientB(c)}, 0.5)`;
function getRGB(c, transparent = false) {
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)})`;
}
function nearestThousand(num) {
@@ -240,7 +240,7 @@
// Dot Renderer
const makeDrawPoints = (opts) => {
let {/*size, disp,*/ each = () => {}} = opts;
let {/*size, disp,*/ transparentFill, each = () => {}} = opts;
const sizeBase = 5 * pxRatio;
return (u, seriesIdx, idx0, idx1) => {
@@ -264,9 +264,10 @@
let filtTop = u.posToVal(-maxSize / 2, scaleY.key);
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.fillStyle = getRGB(u.data[2][i], true);
u.ctx.fillStyle = getRGB(u.data[2][i], transparentFill);
// Get Values
let xVal = d[0][i];
let yVal = d[1][i];
@@ -310,6 +311,7 @@
// },
// },
// },
transparentFill: true,
each: (u, seriesIdx, dataIdx, lft, top, wid, hgt) => {
// we get back raw canvas coords (included axes & padding). translate to the plotting area origin
lft -= u.bbox.left;
@@ -497,7 +499,7 @@
}
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: {
// size: (u, seriesIdx) => {
// return hRect && seriesIdx == hRect.sidx ? hRect.w / pxRatio : 0;
@@ -716,6 +718,5 @@
{#if roofData != null}
<div bind:this={plotWrapper} class="p-2"></div>
{: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}