State Timeline / Status History / Heatmap: Show vertical lines for regional annotations (#99480)

* show vertical annotation lines when canvasRegionRendering is not true

* simplify

---------

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
This commit is contained in:
Kristina
2025-01-23 22:20:40 +02:00
committed by GitHub
co-authored by Leon Sorokin
parent be40f531e6
commit fdbac6fb54
@@ -142,7 +142,7 @@ export const AnnotationsPlugin2 = ({
let yKey = config.scales[1].props.scaleKey;
for (let i = 0; i < frame.length; i++) {
let color = getColorByName(vals.color?.[i] || DEFAULT_ANNOTATION_COLOR_HEX8);
let color = getColorByName(vals.color[i] || DEFAULT_ANNOTATION_COLOR_HEX8);
let x0 = u.valToPos(vals.xMin[i], xKey, true);
let x1 = u.valToPos(vals.xMax[i], xKey, true);
@@ -173,22 +173,19 @@ export const AnnotationsPlugin2 = ({
ctx.setLineDash([5, 5]);
for (let i = 0; i < vals.time.length; i++) {
let color = getColorByName(vals.color?.[i] || DEFAULT_ANNOTATION_COLOR_HEX8);
let color = getColorByName(vals.color[i] || DEFAULT_ANNOTATION_COLOR_HEX8);
let x0 = u.valToPos(vals.time[i], 'x', true);
renderLine(ctx, y0, y1, x0, color);
if (!vals.isRegion?.[i]) {
renderLine(ctx, y0, y1, x0, color);
// renderUpTriangle(ctx, x0, y1, 8 * uPlot.pxRatio, 5 * uPlot.pxRatio, color);
} else if (canvasRegionRendering) {
renderLine(ctx, y0, y1, x0, color);
if (vals.isRegion[i]) {
let x1 = u.valToPos(vals.timeEnd[i], 'x', true);
renderLine(ctx, y0, y1, x1, color);
ctx.fillStyle = colorManipulator.alpha(color, 0.1);
ctx.fillRect(x0, y0, x1 - x0, u.bbox.height);
if (canvasRegionRendering) {
ctx.fillStyle = colorManipulator.alpha(color, 0.1);
ctx.fillRect(x0, y0, x1 - x0, u.bbox.height);
}
}
}
}
@@ -219,14 +216,14 @@ export const AnnotationsPlugin2 = ({
let markers: React.ReactNode[] = [];
for (let i = 0; i < vals.time.length; i++) {
let color = getColorByName(vals.color?.[i] || DEFAULT_ANNOTATION_COLOR);
let color = getColorByName(vals.color[i] || DEFAULT_ANNOTATION_COLOR);
let left = Math.round(plot.valToPos(vals.time[i], 'x')) || 0; // handles -0
let style: React.CSSProperties | null = null;
let className = '';
let isVisible = true;
if (vals.isRegion?.[i]) {
let right = Math.round(plot.valToPos(vals.timeEnd?.[i], 'x')) || 0; // handles -0
if (vals.isRegion[i]) {
let right = Math.round(plot.valToPos(vals.timeEnd[i], 'x')) || 0; // handles -0
isVisible = left < plot.rect.width && right > 0;