@nanahoshi/mona-ui 0.15.0 → 0.15.2

package/fesm2022/nanahoshi-mona-ui-chart.mjs

@@ -1,6 +1,6 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, TemplateRef, Directive, InjectionToken, ElementRef, input, isDevMode, Injectable, signal, computed, viewChild, contentChild, DestroyRef, output, effect, untracked, afterNextRender, Component, model } from '@angular/core';
+import { inject, TemplateRef, Directive, InjectionToken, ElementRef, input, isDevMode, Injectable, signal, computed, DestroyRef, viewChild, contentChild, output, effect, untracked, afterNextRender, Component, model } from '@angular/core';
 import { twMerge } from 'tailwind-merge';
 import { interpolate, parse, formatRgb, wcagContrast } from 'culori';
 import { scaleLinear, scaleLog, scaleSymlog, scalePow, scaleSqrt, scaleTime, scaleUtc, scaleBand } from 'd3-scale';
@@ -69,7 +69,7 @@ class BrowserAnimationClock {
     }
     requestFrame(callback) {
         if (typeof requestAnimationFrame !== "undefined") {
-            return requestAnimationFrame(callback);
+            return requestAnimationFrame(() => callback(this.now()));
         }
         return setTimeout(() => callback(this.now()), 16);
     }
@@ -146,8 +146,8 @@ function getEasingFunction(easing) {
 }
 
 class CartesianPointSpatialIndex {
-    #cells = new Map();
     #cellSize;
+    #cells = new Map();
     constructor(cellSize = 32) {
         this.#cellSize = Math.max(8, cellSize);
     }
@@ -662,13 +662,13 @@ class GaugeHitIndex {
 }
 
 class TreemapHitIndex {
-    #plotRect;
-    #cols;
-    #rows;
-    #cellWidth;
+    #allTargets;
     #cellHeight;
+    #cellWidth;
+    #cols;
     #grid;
-    #allTargets;
+    #plotRect;
+    #rows;
     constructor(plotRect, hitTargets) {
         this.#plotRect = plotRect;
         this.#allTargets = hitTargets;
@@ -9779,11 +9779,11 @@ function composeMarkKey(seriesPrefix, part, occurrenceRank) {
     return JSON.stringify([seriesPrefix, part.type, part.value, occurrenceRank]);
 }
 class ChartMarkKeyResolver {
+    #keyField;
     #occurrenceTracker = new Map();
-    #warnedDuplicateKeys = new Set();
     #seriesId;
     #seriesPrefix;
-    #keyField;
+    #warnedDuplicateKeys = new Set();
     constructor(seriesId, keyField, seriesKey) {
         this.#seriesId = seriesId;
         const normKey = normalizeSeriesKey(seriesKey);
@@ -13495,8 +13495,8 @@ const noResult = { firstValidIndex: -1, lastValidIndex: -1, maxIndex: -1, minInd
  * blocks directly and scan summaries for whole interior blocks.
  */
 class CartesianMinMaxBlockIndex {
-    #blocks = [];
     #blockSize;
+    #blocks = [];
     #y;
     constructor(y, blockSize = 256) {
         this.#y = y;
@@ -23612,6 +23612,7 @@ class CartesianAxisDomainResolver {
 }
 
 class CartesianAxisLabelGeometry {
+    static #cachedGetContext = null;
     static #measureCanvas = null;
     static #measureCtx = null;
     static createTickKey(axis, axisType, value, index) {
@@ -23634,11 +23635,24 @@ class CartesianAxisLabelGeometry {
             try {
                 if (!CartesianAxisLabelGeometry.#measureCanvas) {
                     CartesianAxisLabelGeometry.#measureCanvas = document.createElement("canvas");
+                }
+                // Cache the resolved 2D context, but invalidate it whenever
+                // HTMLCanvasElement.prototype.getContext itself has changed identity (e.g. a test
+                // installs/restores a vi.spyOn mock) so a swapped implementation is never frozen in
+                // stale. This keeps the common case (thousands of tick-label measurements against a
+                // stable getContext) a cheap reference reuse instead of re-invoking getContext (and,
+                // under test mocks that fabricate a fresh context object per call, re-allocating one)
+                // on every single call.
+                const currentGetContext = CartesianAxisLabelGeometry.#measureCanvas.getContext;
+                if (!CartesianAxisLabelGeometry.#measureCtx ||
+                    CartesianAxisLabelGeometry.#cachedGetContext !== currentGetContext) {
                     CartesianAxisLabelGeometry.#measureCtx = CartesianAxisLabelGeometry.#measureCanvas.getContext("2d");
+                    CartesianAxisLabelGeometry.#cachedGetContext = currentGetContext;
                 }
-                if (CartesianAxisLabelGeometry.#measureCtx) {
-                    CartesianAxisLabelGeometry.#measureCtx.font = font;
-                    const measuredWidth = CartesianAxisLabelGeometry.#measureCtx.measureText(formattedText).width;
+                const ctx = CartesianAxisLabelGeometry.#measureCtx;
+                if (ctx) {
+                    ctx.font = font;
+                    const measuredWidth = ctx.measureText(formattedText).width;
                     if (typeof measuredWidth === "number" && !isNaN(measuredWidth) && measuredWidth > 0) {
                         return {
                             height: 16,
@@ -27623,12 +27637,12 @@ function computeTightBounds(indices, u, v) {
 class ChartSeriesMarkIdentityAuthority {
     #extractNaturalKey;
     #keyField;
-    #occurrenceRanks;
     #seriesId;
     #seriesPrefix;
-    #sourceData;
-    #reverseMap = null;
+    #occurrenceRanks;
     #released = false;
+    #reverseMap = null;
+    #sourceData;
     constructor(seriesId, sourceData, options) {
         this.#seriesId = seriesId;
         this.#sourceData = sourceData;
@@ -36039,12 +36053,27 @@ class ChartLayoutEngine {
     }
 }
 
+/**
+ * Small overflow allowance so marks whose stroke or radius sits exactly at a
+ * domain extreme (a peak touching the max, a hovered point marker at the
+ * first/last category) aren't visually chopped in half by the plot clip rect.
+ */
+const PLOT_CLIP_OVERFLOW = 8;
 function crispPixel(pixel, lineWidth = 1) {
     if (lineWidth % 2 === 1) {
         return Math.floor(pixel) + 0.5;
     }
     return Math.round(pixel);
 }
+/**
+ * Clips the canvas context to `plotRect`, inflated on all four sides by
+ * {@link PLOT_CLIP_OVERFLOW} so marks touching a domain extreme aren't cut in half.
+ */
+function clipToPlotRect(context, plotRect) {
+    context.beginPath();
+    context.rect(plotRect.x - PLOT_CLIP_OVERFLOW, plotRect.y - PLOT_CLIP_OVERFLOW, plotRect.width + PLOT_CLIP_OVERFLOW * 2, plotRect.height + PLOT_CLIP_OVERFLOW * 2);
+    context.clip();
+}
 function drawRoundedRectCorners(context, x, y, width, height, radii) {
     if (width <= 0 || height <= 0) {
         return;
@@ -36873,9 +36902,7 @@ class CartesianOverlayRenderer {
             return;
         }
         context.save();
-        context.beginPath();
-        context.rect(plotRect.x, plotRect.y, plotRect.width, plotRect.height);
-        context.clip();
+        clipToPlotRect(context, plotRect);
         // 1. Overlay Bands
         for (const band of overlayScene.referenceBands) {
             if (band.layer === "overlay") {
@@ -36900,9 +36927,7 @@ class CartesianOverlayRenderer {
             return;
         }
         context.save();
-        context.beginPath();
-        context.rect(plotRect.x, plotRect.y, plotRect.width, plotRect.height);
-        context.clip();
+        clipToPlotRect(context, plotRect);
         // 1. Underlay Bands
         for (const band of overlayScene.referenceBands) {
             if (band.layer === "underlay") {
@@ -36947,9 +36972,7 @@ class CartesianCrosshairRenderer {
         }
         const dash = getCrosshairDash$1(registration.lineStyle());
         context.save();
-        context.beginPath();
-        context.rect(plotRect.x, plotRect.y, plotRect.width, plotRect.height);
-        context.clip();
+        clipToPlotRect(context, plotRect);
         context.strokeStyle = style.color;
         context.lineWidth = style.width;
         context.globalAlpha = style.opacity;
@@ -36999,9 +37022,7 @@ class CartesianInteractionOverlayRenderer {
             return;
         }
         context.save();
-        context.beginPath();
-        context.rect(plotRect.x, plotRect.y, plotRect.width, plotRect.height);
-        context.clip();
+        clipToPlotRect(context, plotRect);
         const markerStrokeColor = styleResolver.resolveCssVariable("--mona-chart-marker-stroke-color") ||
             styleResolver.resolveCssVariable("--color-surface") ||
             "#ffffff";
@@ -37141,9 +37162,7 @@ class CartesianSelectionOverlayRenderer {
         }
         const { color = "#3b82f6", fillOpacity = 0.12, plotRect, strokeWidth = 2 } = options;
         ctx.save();
-        ctx.beginPath();
-        ctx.rect(plotRect.x, plotRect.y, plotRect.width, plotRect.height);
-        ctx.clip();
+        clipToPlotRect(ctx, plotRect);
         ctx.strokeStyle = color;
         ctx.lineWidth = strokeWidth;
         for (const hit of scene.hits) {
@@ -37468,9 +37487,7 @@ class CartesianChartRenderer {
     static renderSeriesLayer(context, scene) {
         const { plotRect, series } = scene;
         context.save();
-        context.beginPath();
-        context.rect(plotRect.x, plotRect.y, plotRect.width, plotRect.height);
-        context.clip();
+        clipToPlotRect(context, plotRect);
         for (const s of series) {
             switch (s.type) {
                 case "area":
@@ -39199,13 +39216,13 @@ class CanvasChartRenderBackend {
     #context;
     #viewport;
     constructor(canvas) {
-        this.kind = "canvas";
         this.#context = null;
         this.#viewport = {
             devicePixelRatio: 1,
             height: 0,
             width: 0
         };
+        this.kind = "canvas";
         this.#canvas = canvas;
         this.#context = canvas.getContext("2d");
     }
@@ -41274,6 +41291,12 @@ class SvgRangeBarSeriesRenderer {
     }
 }
 
+/**
+ * Small overflow allowance so marks whose stroke or radius sits exactly at a
+ * domain extreme (a peak touching the max, a point at the first/last category)
+ * aren't visually chopped in half by the plot clip rectangle.
+ */
+const SERIES_CLIP_OVERFLOW$1 = 8;
 class SvgCartesianChartRenderer {
     #axisRenderer;
     #brushRenderer;
@@ -41468,7 +41491,7 @@ class SvgCartesianChartRenderer {
             return;
         }
         this.#clearCrossfadeScopes();
-        const plotClipUrl = defs.useClipRect("plot-clip", plotRect.x, plotRect.y, plotRect.width, plotRect.height);
+        const plotClipUrl = defs.useClipRect("plot-clip", plotRect.x - SERIES_CLIP_OVERFLOW$1, plotRect.y - SERIES_CLIP_OVERFLOW$1, plotRect.width + SERIES_CLIP_OVERFLOW$1 * 2, plotRect.height + SERIES_CLIP_OVERFLOW$1 * 2);
         // 1. Grid
         this.#gridRenderer.render(scene, styleResolver);
         // 2. Static Underlays
@@ -41527,7 +41550,7 @@ class SvgCartesianChartRenderer {
         const fromOpacity = Math.max(0, Math.min(1, 1 - p));
         const toOpacity = Math.max(0, Math.min(1, p));
         const toDefs = defs.withScope("cf-to");
-        const toPlotClipUrl = toDefs.useClipRect("plot-clip", toScene.plotRect.x, toScene.plotRect.y, toScene.plotRect.width, toScene.plotRect.height);
+        const toPlotClipUrl = toDefs.useClipRect("plot-clip", toScene.plotRect.x - SERIES_CLIP_OVERFLOW$1, toScene.plotRect.y - SERIES_CLIP_OVERFLOW$1, toScene.plotRect.width + SERIES_CLIP_OVERFLOW$1 * 2, toScene.plotRect.height + SERIES_CLIP_OVERFLOW$1 * 2);
         // Persistent selection and data labels are suppressed during animation
         this.#selectionRenderer.clear();
         this.#dataLabelRenderer.clear();
@@ -41572,7 +41595,7 @@ class SvgCartesianChartRenderer {
         this.#layers.series.removeAttribute("clip-path");
         if (fromScene) {
             const fromDefs = defs.withScope("cf-from");
-            const fromPlotClipUrl = fromDefs.useClipRect("plot-clip", fromScene.plotRect.x, fromScene.plotRect.y, fromScene.plotRect.width, fromScene.plotRect.height);
+            const fromPlotClipUrl = fromDefs.useClipRect("plot-clip", fromScene.plotRect.x - SERIES_CLIP_OVERFLOW$1, fromScene.plotRect.y - SERIES_CLIP_OVERFLOW$1, fromScene.plotRect.width + SERIES_CLIP_OVERFLOW$1 * 2, fromScene.plotRect.height + SERIES_CLIP_OVERFLOW$1 * 2);
             if (!this.#crossfadeFromScope) {
                 this.#crossfadeFromScope = createSvgElement("g");
                 this.#crossfadeFromScope.setAttribute("data-crossfade-scope", "from");
@@ -41641,6 +41664,12 @@ class SvgCartesianChartRenderer {
     }
 }
 
+/**
+ * Small overflow allowance so marks whose stroke or radius sits exactly at a
+ * domain extreme (a peak touching the max, a point at the first/last category)
+ * aren't visually chopped in half by the plot clip rectangle.
+ */
+const SERIES_CLIP_OVERFLOW = 8;
 class SvgCartesianContentRenderer {
     #axesGroup;
     #axisRenderer;
@@ -41778,7 +41807,7 @@ class SvgCartesianContentRenderer {
             this.clear();
             return;
         }
-        const plotClipUrl = defs.useClipRect("plot-clip", plotRect.x, plotRect.y, plotRect.width, plotRect.height);
+        const plotClipUrl = defs.useClipRect("plot-clip", plotRect.x - SERIES_CLIP_OVERFLOW, plotRect.y - SERIES_CLIP_OVERFLOW, plotRect.width + SERIES_CLIP_OVERFLOW * 2, plotRect.height + SERIES_CLIP_OVERFLOW * 2);
         // 1. Grid
         this.#gridRenderer.render(scene, styleResolver);
         // 2. Underlays
@@ -43946,7 +43975,6 @@ class SvgChartRenderBackend {
     #toTreemapRenderer;
     #toWaterfallRenderer;
     constructor(root, instanceId) {
-        this.kind = "svg";
         this.#fromCartesianRenderer = null;
         this.#fromFunnelRenderer = null;
         this.#fromHeatmapRenderer = null;
@@ -43962,6 +43990,7 @@ class SvgChartRenderBackend {
         this.#toPolarRenderer = null;
         this.#toTreemapRenderer = null;
         this.#toWaterfallRenderer = null;
+        this.kind = "svg";
         this.#root = root;
         this.#namespace = new SvgIdNamespace(instanceId);
         this.#layers = new SvgRootLayers(root);
@@ -46836,8 +46865,8 @@ async function readResponseBytesBounded(response, maxBytes) {
  * media validation, and aggregate byte budget tracking (R5-02 / R5-03 / R5-12 / R6-01 / R6-03 / R6-06).
  */
 class ChartExportResourceTransaction {
-    #totalBytes = 0;
     #cache = new Map();
+    #totalBytes = 0;
     constructor(signal, decodeEnvironment) {
         this.signal = signal;
         this.decodeEnvironment = decodeEnvironment;
@@ -52684,6 +52713,8 @@ class ChartComponent {
     #hasWarnedMultiBrush;
     #hasWarnedMultiSelection;
     #hasWarnedSelectionNonCartesian;
+    #initialMeasurementFrameId;
+    #initialMeasurementPending;
     #interactionOwner;
     #interactionRevision;
     #interactionState;
@@ -52705,10 +52736,142 @@ class ChartComponent {
     #renderBackend;
     #renderScene;
     #resizeObserver;
+    #resizeObserverTarget;
     #suppressNextCanvasClick;
     #synchronizationController;
     #themeObserver;
     constructor() {
+        this.#activeBrushBounds = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#activeBrushBounds" }] : /* istanbul ignore next */ []));
+        this.#activeExportControllers = new Set();
+        this.#angularAxis = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#angularAxis" }] : /* istanbul ignore next */ []));
+        this.#animationMode = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#animationMode" }] : /* istanbul ignore next */ []));
+        this.#annotationById = computed(() => {
+            const map = new Map();
+            for (const r of this.#annotations()) {
+                map.set(r.id, r);
+            }
+            return map;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#annotationById" }] : /* istanbul ignore next */ []));
+        this.#annotations = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#annotations" }] : /* istanbul ignore next */ []));
+        this.#brush = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#brush" }] : /* istanbul ignore next */ []));
+        this.#brushGestureController = new ChartBrushGestureController();
+        this.#crosshair = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#crosshair" }] : /* istanbul ignore next */ []));
+        this.#dataLabelMeasurementRevision = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#dataLabelMeasurementRevision" }] : /* istanbul ignore next */ []));
+        this.#dataLabelMeasurements = new Map();
+        this.#destroyRef = inject(DestroyRef);
+        this.#elementRef = inject(ElementRef);
+        this.#hasInitializedDefaultSelection = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#hasInitializedDefaultSelection" }] : /* istanbul ignore next */ []));
+        this.#hasInitializedDefaultViewport = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#hasInitializedDefaultViewport" }] : /* istanbul ignore next */ []));
+        this.#internalSelectedMarkIds = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#internalSelectedMarkIds" }] : /* istanbul ignore next */ []));
+        this.#isAnimating = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#isAnimating" }] : /* istanbul ignore next */ []));
+        this.#isExitingData = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#isExitingData" }] : /* istanbul ignore next */ []));
+        this.#isStructuralAnimation = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#isStructuralAnimation" }] : /* istanbul ignore next */ []));
+        this.#labelMeasurements = new Map();
+        this.#legend = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#legend" }] : /* istanbul ignore next */ []));
+        this.#observedDataLabelElements = new Map();
+        this.#observedLabelElements = new Map();
+        this.#observedOverlayLabelElements = new Map();
+        this.#overlayLabelMeasurementRevision = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#overlayLabelMeasurementRevision" }] : /* istanbul ignore next */ []));
+        this.#overlayLabelMeasurements = new Map();
+        this.#radialAxis = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#radialAxis" }] : /* istanbul ignore next */ []));
+        this.#referenceBandById = computed(() => {
+            const map = new Map();
+            for (const r of this.#referenceBands()) {
+                map.set(r.id, r);
+            }
+            return map;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#referenceBandById" }] : /* istanbul ignore next */ []));
+        this.#referenceBands = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#referenceBands" }] : /* istanbul ignore next */ []));
+        this.#referenceLineById = computed(() => {
+            const map = new Map();
+            for (const r of this.#referenceLines()) {
+                map.set(r.id, r);
+            }
+            return map;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#referenceLineById" }] : /* istanbul ignore next */ []));
+        this.#referenceLines = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#referenceLines" }] : /* istanbul ignore next */ []));
+        this.#registeredSeries = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#registeredSeries" }] : /* istanbul ignore next */ []));
+        this.#selection = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#selection" }] : /* istanbul ignore next */ []));
+        this.#synchronizationCoordinator = inject(ChartSynchronizationCoordinator);
+        this.#tooltip = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#tooltip" }] : /* istanbul ignore next */ []));
+        this.#uncontrolledViewportState = signal({ x: new Map(), y: new Map() }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#uncontrolledViewportState" }] : /* istanbul ignore next */ []));
+        this.#warnedDiagnosticSignatures = new Set();
+        this.#xAxes = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#xAxes" }] : /* istanbul ignore next */ []));
+        this.#yAxes = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#yAxes" }] : /* istanbul ignore next */ []));
+        this.#activeKeyboardBucketIndex = -1;
+        this.#activeKeyboardHitKey = null;
+        this.#activeKeyboardNamespace = null;
+        this.#activeKeyboardSeriesId = null;
+        this.#brushMarkIndex = null;
+        this.#brushMarkIndexScene = null;
+        this.#canvasContext = null;
+        this.#canvasReady = false;
+        this.#cartesianLayoutRuntime = null;
+        this.#currentHeight = 300;
+        this.#currentWidth = 500;
+        this.#dataLabelResizeObserver = null;
+        this.#gestureController = null;
+        this.#hasCommittedVisualScene = false;
+        this.#hasEmittedBrushStart = false;
+        this.#hasPendingSizeReflow = false;
+        this.#hasWarnedBrushWithoutSelection = false;
+        this.#hasWarnedMultiBrush = false;
+        this.#hasWarnedMultiSelection = false;
+        this.#hasWarnedSelectionNonCartesian = false;
+        this.#initialMeasurementFrameId = null;
+        this.#initialMeasurementPending = true;
+        this.#interactionOwner = null;
+        this.#interactionRevision = 0;
+        this.#interactionState = null;
+        this.#isDestroyed = false;
+        this.#labelResizeObserver = null;
+        this.#lastControlledSelection = undefined;
+        this.#lastInteractionSource = null;
+        this.#lastNormalizedControlledViewport = null;
+        this.#lastPointerResolution = null;
+        this.#lastSelectionMode = undefined;
+        this.#mediaQueryList = null;
+        this.#mediaQueryListener = null;
+        this.#overlayLabelResizeObserver = null;
+        this.#pendingBrushFrame = null;
+        this.#pendingBrushRafId = null;
+        this.#pendingLabelMeasurementReason = 0;
+        this.#pendingPointerEvent = null;
+        this.#pointerFrameId = null;
+        this.#renderBackend = null;
+        this.#renderScene = null;
+        this.#resizeObserver = null;
+        this.#resizeObserverTarget = null;
+        this.#suppressNextCanvasClick = false;
+        this.#synchronizationController = null;
+        this.#themeObserver = null;
         this.activeAccessibilityText = signal("", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeAccessibilityText" }] : /* istanbul ignore next */ []));
         this.animationDurationCss = computed(() => `${this.normalizedAnimationOptions().duration}ms`, /* @ts-ignore */
@@ -53069,90 +53232,6 @@ class ChartComponent {
             return list.find(s => s.type === "waterfall") ?? null;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "waterfallSeriesRegistration" }] : /* istanbul ignore next */ []));
-        this.#activeBrushBounds = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#activeBrushBounds" }] : /* istanbul ignore next */ []));
-        this.#activeExportControllers = new Set();
-        this.#angularAxis = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#angularAxis" }] : /* istanbul ignore next */ []));
-        this.#animationMode = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#animationMode" }] : /* istanbul ignore next */ []));
-        this.#annotationById = computed(() => {
-            const map = new Map();
-            for (const r of this.#annotations()) {
-                map.set(r.id, r);
-            }
-            return map;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#annotationById" }] : /* istanbul ignore next */ []));
-        this.#annotations = signal([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#annotations" }] : /* istanbul ignore next */ []));
-        this.#brush = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#brush" }] : /* istanbul ignore next */ []));
-        this.#brushGestureController = new ChartBrushGestureController();
-        this.#crosshair = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#crosshair" }] : /* istanbul ignore next */ []));
-        this.#dataLabelMeasurementRevision = signal(0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#dataLabelMeasurementRevision" }] : /* istanbul ignore next */ []));
-        this.#dataLabelMeasurements = new Map();
-        this.#destroyRef = inject(DestroyRef);
-        this.#elementRef = inject(ElementRef);
-        this.#hasInitializedDefaultSelection = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#hasInitializedDefaultSelection" }] : /* istanbul ignore next */ []));
-        this.#hasInitializedDefaultViewport = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#hasInitializedDefaultViewport" }] : /* istanbul ignore next */ []));
-        this.#internalSelectedMarkIds = signal([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#internalSelectedMarkIds" }] : /* istanbul ignore next */ []));
-        this.#isAnimating = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#isAnimating" }] : /* istanbul ignore next */ []));
-        this.#isExitingData = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#isExitingData" }] : /* istanbul ignore next */ []));
-        this.#isStructuralAnimation = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#isStructuralAnimation" }] : /* istanbul ignore next */ []));
-        this.#labelMeasurements = new Map();
-        this.#legend = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#legend" }] : /* istanbul ignore next */ []));
-        this.#observedDataLabelElements = new Map();
-        this.#observedLabelElements = new Map();
-        this.#observedOverlayLabelElements = new Map();
-        this.#overlayLabelMeasurementRevision = signal(0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#overlayLabelMeasurementRevision" }] : /* istanbul ignore next */ []));
-        this.#overlayLabelMeasurements = new Map();
-        this.#radialAxis = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#radialAxis" }] : /* istanbul ignore next */ []));
-        this.#referenceBandById = computed(() => {
-            const map = new Map();
-            for (const r of this.#referenceBands()) {
-                map.set(r.id, r);
-            }
-            return map;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#referenceBandById" }] : /* istanbul ignore next */ []));
-        this.#referenceBands = signal([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#referenceBands" }] : /* istanbul ignore next */ []));
-        this.#referenceLineById = computed(() => {
-            const map = new Map();
-            for (const r of this.#referenceLines()) {
-                map.set(r.id, r);
-            }
-            return map;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#referenceLineById" }] : /* istanbul ignore next */ []));
-        this.#referenceLines = signal([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#referenceLines" }] : /* istanbul ignore next */ []));
-        this.#registeredSeries = signal([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#registeredSeries" }] : /* istanbul ignore next */ []));
-        this.#selection = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#selection" }] : /* istanbul ignore next */ []));
-        this.#synchronizationCoordinator = inject(ChartSynchronizationCoordinator);
-        this.#tooltip = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#tooltip" }] : /* istanbul ignore next */ []));
-        this.#uncontrolledViewportState = signal({ x: new Map(), y: new Map() }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#uncontrolledViewportState" }] : /* istanbul ignore next */ []));
-        this.#warnedDiagnosticSignatures = new Set();
-        this.#xAxes = signal([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#xAxes" }] : /* istanbul ignore next */ []));
-        this.#yAxes = signal([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#yAxes" }] : /* istanbul ignore next */ []));
         this.angularAxisRegistration = this.#angularAxis.asReadonly();
         /**
          * @description Animation settings for initial render and subsequent data or visibility transitions.
@@ -53291,50 +53370,6 @@ class ChartComponent {
         this.yAxesRegistration = this.#yAxes.asReadonly();
         this.yAxisRegistration = computed(() => this.#yAxes()[0] ?? null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yAxisRegistration" }] : /* istanbul ignore next */ []));
-        this.#activeKeyboardBucketIndex = -1;
-        this.#activeKeyboardHitKey = null;
-        this.#activeKeyboardNamespace = null;
-        this.#activeKeyboardSeriesId = null;
-        this.#brushMarkIndex = null;
-        this.#brushMarkIndexScene = null;
-        this.#canvasContext = null;
-        this.#canvasReady = false;
-        this.#cartesianLayoutRuntime = null;
-        this.#currentHeight = 300;
-        this.#currentWidth = 500;
-        this.#dataLabelResizeObserver = null;
-        this.#gestureController = null;
-        this.#hasCommittedVisualScene = false;
-        this.#hasEmittedBrushStart = false;
-        this.#hasPendingSizeReflow = false;
-        this.#hasWarnedBrushWithoutSelection = false;
-        this.#hasWarnedMultiBrush = false;
-        this.#hasWarnedMultiSelection = false;
-        this.#hasWarnedSelectionNonCartesian = false;
-        this.#interactionOwner = null;
-        this.#interactionRevision = 0;
-        this.#interactionState = null;
-        this.#isDestroyed = false;
-        this.#labelResizeObserver = null;
-        this.#lastControlledSelection = undefined;
-        this.#lastInteractionSource = null;
-        this.#lastNormalizedControlledViewport = null;
-        this.#lastPointerResolution = null;
-        this.#lastSelectionMode = undefined;
-        this.#mediaQueryList = null;
-        this.#mediaQueryListener = null;
-        this.#overlayLabelResizeObserver = null;
-        this.#pendingBrushFrame = null;
-        this.#pendingBrushRafId = null;
-        this.#pendingLabelMeasurementReason = 0;
-        this.#pendingPointerEvent = null;
-        this.#pointerFrameId = null;
-        this.#renderBackend = null;
-        this.#renderScene = null;
-        this.#resizeObserver = null;
-        this.#suppressNextCanvasClick = false;
-        this.#synchronizationController = null;
-        this.#themeObserver = null;
         this.#styleResolver = new ChartStyleResolver(this.#elementRef.nativeElement);
         this.#animationController = new ChartAnimationController(new BrowserAnimationClock());
         this.#renderScheduler = new ChartRenderScheduler(reason => this.#recomputeAndPaint(reason));
@@ -53435,10 +53470,15 @@ class ChartComponent {
                 cancelAnimationFrame(this.#pointerFrameId);
                 this.#pointerFrameId = null;
             }
+            if (this.#initialMeasurementFrameId !== null) {
+                cancelAnimationFrame(this.#initialMeasurementFrameId);
+                this.#initialMeasurementFrameId = null;
+            }
             if (this.#resizeObserver) {
                 this.#resizeObserver.disconnect();
                 this.#resizeObserver = null;
             }
+            this.#resizeObserverTarget = null;
             if (this.#labelResizeObserver) {
                 this.#labelResizeObserver.disconnect();
                 this.#labelResizeObserver = null;
@@ -54165,28 +54205,86 @@ class ChartComponent {
     #getSurfaceElement() {
         return this.plotSurfaceElement()?.nativeElement ?? this.canvasElement()?.nativeElement ?? null;
     }
+    #getPlotElement() {
+        return (this.plotSurfaceElement()?.nativeElement ||
+            this.canvasElement()?.nativeElement.parentElement ||
+            this.#elementRef.nativeElement);
+    }
+    #measurePlotElement(plotEl) {
+        const rect = plotEl.getBoundingClientRect();
+        const width = rect.width > 0 ? rect.width : plotEl.offsetWidth;
+        const height = rect.height > 0 ? rect.height : plotEl.offsetHeight;
+        if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
+            return null;
+        }
+        return { height, width };
+    }
+    #applyMeasuredSize(width, height) {
+        if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
+            return false;
+        }
+        const wasPending = this.#initialMeasurementPending;
+        const changed = Math.abs(width - this.#currentWidth) >= 0.5 || Math.abs(height - this.#currentHeight) >= 0.5;
+        this.#currentWidth = width;
+        this.#currentHeight = height;
+        this.#initialMeasurementPending = false;
+        const requiresRepaint = changed || wasPending;
+        if (requiresRepaint) {
+            this.#updateCanvasBackingStore(width, height);
+        }
+        return requiresRepaint;
+    }
+    #syncResizeObserverTarget() {
+        const plotEl = this.#getPlotElement();
+        if (this.#resizeObserver && this.#resizeObserverTarget !== plotEl) {
+            if (this.#resizeObserverTarget) {
+                this.#resizeObserver.unobserve(this.#resizeObserverTarget);
+            }
+            this.#resizeObserverTarget = plotEl;
+            this.#resizeObserver.observe(plotEl);
+        }
+        return plotEl;
+    }
+    #scheduleInitialMeasurement(attempt = 0) {
+        if (!this.#initialMeasurementPending ||
+            this.#initialMeasurementFrameId !== null ||
+            typeof requestAnimationFrame === "undefined" ||
+            attempt >= 3) {
+            return;
+        }
+        this.#initialMeasurementFrameId = requestAnimationFrame(() => {
+            this.#initialMeasurementFrameId = null;
+            if (this.#isDestroyed) {
+                return;
+            }
+            const plotEl = this.#syncResizeObserverTarget();
+            const measurement = this.#measurePlotElement(plotEl);
+            if (measurement) {
+                if (this.#applyMeasuredSize(measurement.width, measurement.height)) {
+                    this.invalidate(16 /* ChartInvalidationReason.Size */);
+                }
+                return;
+            }
+            this.#scheduleInitialMeasurement(attempt + 1);
+        });
+    }
     #initCanvasAndObserver() {
-        const plotSurfaceRef = this.plotSurfaceElement();
         const canvasRef = this.canvasElement();
         if (canvasRef?.nativeElement) {
             this.#canvasContext = canvasRef.nativeElement.getContext("2d");
         }
-        const plotEl = plotSurfaceRef?.nativeElement || canvasRef?.nativeElement.parentElement || this.#elementRef.nativeElement;
+        const plotEl = this.#getPlotElement();
         if (typeof ResizeObserver !== "undefined") {
             this.#resizeObserver = new ResizeObserver(entries => {
+                this.#syncResizeObserverTarget();
                 for (const entry of entries) {
                     const { height, width } = entry.contentRect;
-                    if (width > 0 &&
-                        height > 0 &&
-                        (Math.abs(width - this.#currentWidth) >= 0.5 || Math.abs(height - this.#currentHeight) >= 0.5)) {
-                        this.#currentWidth = width;
-                        this.#currentHeight = height;
-                        this.#updateCanvasBackingStore(width, height);
+                    if (width > 0 && height > 0 && this.#applyMeasuredSize(width, height)) {
                         this.invalidate(16 /* ChartInvalidationReason.Size */);
                     }
                 }
             });
-            this.#resizeObserver.observe(plotEl);
+            this.#syncResizeObserverTarget();
         }
         if (typeof MutationObserver !== "undefined") {
             this.#themeObserver = new MutationObserver(() => {
@@ -54207,12 +54305,14 @@ class ChartComponent {
             }
         }
         // Initial layout pass
-        const rect = plotEl.getBoundingClientRect();
-        const initialWidth = rect.width > 0 ? rect.width : plotEl.offsetWidth || 500;
-        const initialHeight = rect.height > 0 ? rect.height : plotEl.offsetHeight || 300;
-        this.#currentWidth = initialWidth;
-        this.#currentHeight = initialHeight;
-        this.#updateCanvasBackingStore(initialWidth, initialHeight);
+        const initialMeasurement = this.#measurePlotElement(plotEl);
+        if (initialMeasurement) {
+            this.#applyMeasuredSize(initialMeasurement.width, initialMeasurement.height);
+        }
+        else {
+            this.#initialMeasurementPending = true;
+            this.#scheduleInitialMeasurement();
+        }
     }
     #normalizePointer(event) {
         const element = this.#getSurfaceElement();
@@ -54309,15 +54409,10 @@ class ChartComponent {
             this.#paint();
             return;
         }
-        if (this.#currentWidth <= 0 || this.#currentHeight <= 0) {
-            const plotEl = this.plotSurfaceElement()?.nativeElement ||
-                this.canvasElement()?.nativeElement.parentElement ||
-                this.#elementRef.nativeElement;
-            const rect = plotEl.getBoundingClientRect();
-            if (rect.width > 0 && rect.height > 0) {
-                this.#currentWidth = rect.width;
-                this.#currentHeight = rect.height;
-                this.#updateCanvasBackingStore(rect.width, rect.height);
+        if (this.#initialMeasurementPending || this.#currentWidth <= 0 || this.#currentHeight <= 0) {
+            const measurement = this.#measurePlotElement(this.#getPlotElement());
+            if (measurement) {
+                this.#applyMeasuredSize(measurement.width, measurement.height);
             }
         }
         const sizeChanged = !this.scene() ||
@@ -54336,8 +54431,12 @@ class ChartComponent {
             !isChromeOnly &&
             !hasInvalidationReason(reason, 4 /* ChartInvalidationReason.Style */) &&
             this.#cartesianLayoutRuntime !== null;
+        const isNonCartesianSizeChange = hasInvalidationReason(reason, 16 /* ChartInvalidationReason.Size */) &&
+            sizeChanged &&
+            this.#cartesianLayoutRuntime === null;
         const requiresSceneRefresh = isStructural ||
             isChromeOnly ||
+            isNonCartesianSizeChange ||
             hasInvalidationReason(reason, 4 /* ChartInvalidationReason.Style */) ||
             hasInvalidationReason(reason, 64 /* ChartInvalidationReason.Viewport */) ||
             !this.scene();
@@ -54418,6 +54517,19 @@ class ChartComponent {
         // Commit semantic target scene immediately
         this.scene.set(newScene);
         this.#updateGestureController();
+        const isWaitingForInitialPolarSvgMeasurement = this.#initialMeasurementPending &&
+            this.renderer() === "svg" &&
+            newScene.coordinateSystem === "polar" &&
+            newScene.polarKind === "arc";
+        if (isWaitingForInitialPolarSvgMeasurement) {
+            this.#renderScene = null;
+            this.#hasCommittedVisualScene = false;
+            this.#isAnimating.set(false);
+            this.#isStructuralAnimation.set(false);
+            this.#animationMode.set(null);
+            this.#isExitingData.set(false);
+            return;
+        }
         const isInitial = !this.#hasCommittedVisualScene;
         const isVisibility = hasInvalidationReason(reason, 32 /* ChartInvalidationReason.Visibility */);
         const isData = hasInvalidationReason(reason, 1 /* ChartInvalidationReason.Data */);
@@ -55070,7 +55182,7 @@ class ChartComponent {
         }
         try {
             this.#renderBackend = createChartRenderBackend(mode, canvas, svg);
-            if (this.#currentWidth > 0 && this.#currentHeight > 0) {
+            if (!this.#initialMeasurementPending && this.#currentWidth > 0 && this.#currentHeight > 0) {
                 const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
                 this.#renderBackend.resize({
                     devicePixelRatio: dpr,
@@ -55358,15 +55470,17 @@ class ChartComponent {
         this.#renderScheduler.schedule(reason);
     }
     ngAfterContentChecked() {
-        if (!this.#canvasReady) {
-            const plotEl = this.plotSurfaceElement()?.nativeElement ||
-                this.canvasElement()?.nativeElement.parentElement ||
-                this.#elementRef.nativeElement;
-            const rect = plotEl.getBoundingClientRect();
-            if (rect.width > 0 && rect.height > 0) {
-                this.#currentWidth = rect.width;
-                this.#currentHeight = rect.height;
-                this.#updateCanvasBackingStore(rect.width, rect.height);
+        this.#syncResizeObserverTarget();
+        if (!this.#canvasReady ||
+            this.#initialMeasurementPending ||
+            this.#currentWidth <= 0 ||
+            this.#currentHeight <= 0) {
+            const measurement = this.#measurePlotElement(this.#getPlotElement());
+            if (measurement) {
+                const changed = this.#applyMeasuredSize(measurement.width, measurement.height);
+                if (this.#canvasReady && changed) {
+                    this.invalidate(16 /* ChartInvalidationReason.Size */);
+                }
             }
         }
         this.#renderScheduler.flushStructural();
@@ -56807,14 +56921,15 @@ class ChartXAxisComponent {
     #chartContext;
     #destroyRef;
     #registrationId;
+    #registered;
     get registrationId() {
         return this.#registrationId;
     }
-    #registered;
     constructor() {
         this.#chartContext = inject(CHART_CONTEXT, { optional: true });
         this.#destroyRef = inject(DestroyRef);
         this.#registrationId = `mona-x-axis-${++nextXAxisId}`;
+        this.#registered = false;
         this.labelTemplate = contentChild(ChartAxisLabelTemplateDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "labelTemplate" }] : /* istanbul ignore next */ []));
         /**
@@ -56955,7 +57070,6 @@ class ChartXAxisComponent {
          */
         this.visible = input(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.axisId();
             this.axisLine();
@@ -57040,14 +57154,15 @@ class ChartYAxisComponent {
     #chartContext;
     #destroyRef;
     #registrationId;
+    #registered;
     get registrationId() {
         return this.#registrationId;
     }
-    #registered;
     constructor() {
         this.#chartContext = inject(CHART_CONTEXT, { optional: true });
         this.#destroyRef = inject(DestroyRef);
         this.#registrationId = `mona-y-axis-${++nextYAxisId}`;
+        this.#registered = false;
         this.labelTemplate = contentChild(ChartAxisLabelTemplateDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "labelTemplate" }] : /* istanbul ignore next */ []));
         /**
@@ -57182,7 +57297,6 @@ class ChartYAxisComponent {
          */
         this.visible = input(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.axisId();
             this.axisLine();
@@ -57267,6 +57381,7 @@ class ChartAngularAxisComponent {
     constructor() {
         this.#chartContext = inject(CHART_CONTEXT, { optional: true });
         this.#destroyRef = inject(DestroyRef);
+        this.#registered = false;
         this.labelTemplate = contentChild(ChartAxisLabelTemplateDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "labelTemplate" }] : /* istanbul ignore next */ []));
         /**
@@ -57322,7 +57437,6 @@ class ChartAngularAxisComponent {
          */
         this.visible = input(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.axisLine();
             this.formatter();
@@ -57380,6 +57494,7 @@ class ChartRadialAxisComponent {
     constructor() {
         this.#chartContext = inject(CHART_CONTEXT, { optional: true });
         this.#destroyRef = inject(DestroyRef);
+        this.#registered = false;
         this.labelTemplate = contentChild(ChartAxisLabelTemplateDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "labelTemplate" }] : /* istanbul ignore next */ []));
         /**
@@ -57459,7 +57574,6 @@ class ChartRadialAxisComponent {
          */
         this.visible = input(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.axisLine();
             this.formatter();
@@ -57544,6 +57658,7 @@ class LineSeriesComponent {
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
         this.#id = `mona-line-series-${++nextSeriesId$9}`;
+        this.#registered = false;
         /**
          * @description Explicit stroke color override for the series line.
          * @default ""
@@ -57653,7 +57768,6 @@ class LineSeriesComponent {
          */
         this.yAxisId = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yAxisId" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -57763,6 +57877,7 @@ class AreaSeriesComponent {
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
         this.#id = `mona-area-series-${++nextSeriesId$8}`;
+        this.#registered = false;
         /**
          * @description Explicit stroke and fill color override for the area series.
          * @default ""
@@ -57902,7 +58017,6 @@ class AreaSeriesComponent {
          */
         this.yAxisId = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yAxisId" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -58022,6 +58136,7 @@ class BarSeriesComponent {
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
         this.#id = `mona-bar-series-${++nextSeriesId$7}`;
+        this.#registered = false;
         /**
          * @description Corner radius in pixels for the bar caps.
          * @default undefined
@@ -58137,7 +58252,6 @@ class BarSeriesComponent {
          */
         this.yAxisId = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yAxisId" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         let initialVisible = true;
         effect(() => {
             this.visible();
@@ -58284,6 +58398,7 @@ class PieSeriesComponent {
         this.#seriesId = `mona-pie-series-${++nextPieSeriesId}`;
         this.#visibilityRevision = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#visibilityRevision" }] : /* istanbul ignore next */ []));
+        this.#registered = false;
         this.sliceLabelTemplate = contentChild(ChartSliceLabelTemplateDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sliceLabelTemplate" }] : /* istanbul ignore next */ []));
         /**
@@ -58433,7 +58548,6 @@ class PieSeriesComponent {
          */
         this.visible = model(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -58600,6 +58714,7 @@ class DonutSeriesComponent {
         this.#seriesId = `mona-donut-series-${++nextDonutSeriesId}`;
         this.#visibilityRevision = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#visibilityRevision" }] : /* istanbul ignore next */ []));
+        this.#registered = false;
         this.centerTemplate = contentChild(ChartCenterTemplateDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "centerTemplate" }] : /* istanbul ignore next */ []));
         this.sliceLabelTemplate = contentChild(ChartSliceLabelTemplateDirective, /* @ts-ignore */
@@ -58757,7 +58872,6 @@ class DonutSeriesComponent {
          */
         this.visible = model(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -58907,6 +59021,7 @@ class RadarSeriesComponent {
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
         this.#id = `mona-radar-series-${++nextRadarSeriesId}`;
+        this.#registered = false;
         /**
          * @description Property key or accessor function extracting the angular spoke category for each data item.
          * @default "category"
@@ -59002,7 +59117,6 @@ class RadarSeriesComponent {
          */
         this.visible = model(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -59101,6 +59215,7 @@ class PolarSeriesComponent {
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
         this.#id = `mona-polar-series-${++nextPolarSeriesId}`;
+        this.#registered = false;
         /**
          * @description Property key or accessor function extracting the degree angle (0° to 360°) for each data item.
          * @default "angle"
@@ -59196,7 +59311,6 @@ class PolarSeriesComponent {
          */
         this.visible = model(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -59301,6 +59415,8 @@ class ChartLegendComponent {
     #chartContext;
     #destroyRef;
     constructor() {
+        this.#chartContext = inject(CHART_CONTEXT, { optional: true });
+        this.#destroyRef = inject(DestroyRef);
         this.containerClasses = computed(() => twMerge(chartLegendBaseThemeVariants({ position: this.position() }), this.userClass()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
         this.gradientCss = computed(() => {
@@ -59353,8 +59469,6 @@ class ChartLegendComponent {
         ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
         this.legendScale = computed(() => this.#chartContext?.legendScale?.() ?? null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "legendScale" }] : /* istanbul ignore next */ []));
-        this.#chartContext = inject(CHART_CONTEXT, { optional: true });
-        this.#destroyRef = inject(DestroyRef);
         /**
          * @description Whether clicking or pressing Enter/Space on legend items toggles series visibility.
          * @default true
@@ -59592,6 +59706,7 @@ class ScatterSeriesComponent {
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
         this.#id = `mona-scatter-series-${++nextSeriesId$6}`;
+        this.#registered = false;
         /**
          * @description Explicit fill color for the scatter points.
          * @default ""
@@ -59695,7 +59810,6 @@ class ScatterSeriesComponent {
          */
         this.yAxisId = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yAxisId" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -59803,6 +59917,7 @@ class BubbleSeriesComponent {
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
         this.#id = `mona-bubble-series-${++nextSeriesId$5}`;
+        this.#registered = false;
         /**
          * @description Explicit fill color for the bubbles.
          * @default ""
@@ -59924,7 +60039,6 @@ class BubbleSeriesComponent {
          */
         this.yAxisId = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yAxisId" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -60038,6 +60152,7 @@ class RangeBarSeriesComponent {
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
         this.#id = `mona-range-bar-series-${++nextSeriesId$4}`;
+        this.#registered = false;
         /**
          * @description Corner radius in pixels for the floating bar caps.
          * @default undefined
@@ -60145,7 +60260,6 @@ class RangeBarSeriesComponent {
          */
         this.yAxisId = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yAxisId" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -60255,6 +60369,7 @@ class RangeAreaSeriesComponent {
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
         this.#id = `mona-range-area-series-${++nextSeriesId$3}`;
+        this.#registered = false;
         /**
          * @description Explicit stroke and fill color override for the range area series.
          * @default ""
@@ -60380,7 +60495,6 @@ class RangeAreaSeriesComponent {
          */
         this.yAxisId = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yAxisId" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -60496,6 +60610,7 @@ class HeatmapSeriesComponent {
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
         this.#id = `mona-heatmap-series-${++nextSeriesId$2}`;
+        this.#registered = false;
         /**
          * @description Corner radius in pixels for each individual heat cell.
          * @default undefined
@@ -60631,7 +60746,6 @@ class HeatmapSeriesComponent {
          */
         this.yField = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yField" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -60739,6 +60853,7 @@ class CandlestickSeriesComponent {
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
         this.#id = `mona-candlestick-series-${++nextSeriesId$1}`;
+        this.#registered = false;
         /**
          * @description Explicit body width in pixels for candlestick candles.
          * @default undefined
@@ -60892,7 +61007,6 @@ class CandlestickSeriesComponent {
          */
         this.yAxisId = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yAxisId" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.closeField();
             this.data();
@@ -61009,12 +61123,13 @@ class OhlcSeriesComponent {
     #id;
     #registered;
     constructor() {
-        this.effectiveTickLength = computed(() => this.tickLength() ?? this.tickWidth(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "effectiveTickLength" }] : /* istanbul ignore next */ []));
         this.#chartContext = inject(CHART_CONTEXT, { optional: true });
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
         this.#id = `mona-ohlc-series-${++nextSeriesId}`;
+        this.#registered = false;
+        this.effectiveTickLength = computed(() => this.tickLength() ?? this.tickWidth(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveTickLength" }] : /* istanbul ignore next */ []));
         /**
          * @description Explicit total width in pixels for open/close tick arms.
          * @default undefined
@@ -61174,7 +61289,6 @@ class OhlcSeriesComponent {
          */
         this.yAxisId = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yAxisId" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.closeField();
             this.data();
@@ -61304,6 +61418,7 @@ class RadialBarSeriesComponent {
         this.#seriesId = `mona-radial-bar-series-${++nextRadialBarSeriesId}`;
         this.#visibilityRevision = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#visibilityRevision" }] : /* istanbul ignore next */ []));
+        this.#registered = false;
         /**
          * @description Spacing in pixels between concentric radial rings.
          * @default 4
@@ -61469,7 +61584,6 @@ class RadialBarSeriesComponent {
          */
         this.visible = model(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -61638,6 +61752,7 @@ class RoseSeriesComponent {
         this.#seriesId = `mona-rose-series-${++nextRoseSeriesId}`;
         this.#visibilityRevision = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#visibilityRevision" }] : /* istanbul ignore next */ []));
+        this.#registered = false;
         /**
          * @description Property key or accessor extracting the category label for each rose petal.
          * @default "category"
@@ -61773,7 +61888,6 @@ class RoseSeriesComponent {
          */
         this.visible = model(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -61937,12 +62051,13 @@ class GaugeSeriesComponent {
     #seriesId;
     #registered;
     constructor() {
-        this.centerTemplate = contentChild(ChartGaugeCenterTemplateDirective, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "centerTemplate" }] : /* istanbul ignore next */ []));
         this.#chartContext = inject(CHART_CONTEXT, { optional: true });
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
         this.#seriesId = `mona-gauge-series-${++nextGaugeSeriesId}`;
+        this.#registered = false;
+        this.centerTemplate = contentChild(ChartGaugeCenterTemplateDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "centerTemplate" }] : /* istanbul ignore next */ []));
         /**
          * @description Primary color of the gauge value arc.
          * @default ""
@@ -62098,7 +62213,6 @@ class GaugeSeriesComponent {
          */
         this.visible = model(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -62236,6 +62350,7 @@ class TreemapSeriesComponent {
         this.#seriesId = `mona-treemap-series-${++nextTreemapSeriesId}`;
         this.#visibilityRevision = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#visibilityRevision" }] : /* istanbul ignore next */ []));
+        this.#registered = false;
         /**
          * @description Corner radius in pixels applied to leaf node rectangles.
          * @default undefined
@@ -62424,7 +62539,6 @@ class TreemapSeriesComponent {
          */
         this.visible = model(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -62626,6 +62740,7 @@ class FunnelSeriesComponent {
         this.#stageIdentityMap = new Map();
         this.#visibilityRevision = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#visibilityRevision" }] : /* istanbul ignore next */ []));
+        this.#registered = false;
         /**
          * @description Property key or accessor extracting stage names.
          * @default "category"
@@ -62773,7 +62888,6 @@ class FunnelSeriesComponent {
          */
         this.widthRatio = input(0.9, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "widthRatio" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             const rawData = this.data() ?? this.#chartContext?.rootData() ?? [];
             const keyF = this.keyField();
@@ -62985,6 +63099,7 @@ class WaterfallSeriesComponent {
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
         this.#seriesId = `mona-waterfall-series-${++nextWaterfallSeriesId}`;
+        this.#registered = false;
         /**
          * @description Corner radius in pixels applied to the four corners of waterfall bars.
          * @default undefined
@@ -63146,7 +63261,6 @@ class WaterfallSeriesComponent {
          */
         this.xField = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "xField" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.visible();
             if (this.#registered) {
@@ -63921,6 +64035,7 @@ class ChartSelectionComponent {
     constructor() {
         this.#chartContext = inject(CHART_CONTEXT, { optional: true });
         this.#destroyRef = inject(DestroyRef);
+        this.#registered = false;
         /**
          * @description Whether clicking plot background clears active selection.
          * @default true
@@ -63991,7 +64106,6 @@ class ChartSelectionComponent {
          */
         this.strokeWidth = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.enabled();
             this.mode();
@@ -64065,6 +64179,7 @@ class ChartBrushComponent {
     constructor() {
         this.#chartContext = inject(CHART_CONTEXT, { optional: true });
         this.#destroyRef = inject(DestroyRef);
+        this.#registered = false;
         /**
          * @description Activation trigger gesture ('drag' or 'shift-drag').
          * @default "shift-drag"
@@ -64147,7 +64262,6 @@ class ChartBrushComponent {
          */
         this.yAxisId = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yAxisId" }] : /* istanbul ignore next */ []));
-        this.#registered = false;
         effect(() => {
             this.enabled();
             this.mode();