@skdx/angular-charts 0.32.0 → 0.33.0

package/fesm2022/skdx-angular-charts-internal.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, Component, signal, computed, Directive } from '@angular/core';
+import { input, ChangeDetectionStrategy, Component, signal, Directive } from '@angular/core';
 
 /*
  * Copyright (c) 2026 SkandaDX
@@ -261,19 +261,6 @@ function buildFrame(input, yExtent) {
         categories,
     };
 }
-/** Attributes for the `<svg>` root every framework renders. */
-function svgAttrs(frame, kind, label) {
-    return {
-        viewBox: `0 0 ${frame.width} ${frame.height}`,
-        width: frame.width,
-        height: frame.height,
-        role: 'img',
-        'aria-label': label,
-        'data-skdx-chart': kind,
-        'font-family': CHART_COLORS.fontFamily,
-        'font-size': CHART_COLORS.fontSize,
-    };
-}
 const values = (input) => input.series.flatMap((s) => s.data);
 /** Tooltip text for a value in a series: `Series, Category: 1,234`. */
 const markTitle = (series, category, value) => `${series}, ${category}: ${formatValue(value)}`;
@@ -292,6 +279,75 @@ function hoverTooltip(target, svg, clientX, clientY, width, height) {
     return tooltipShapes(x, y, title, width, height);
 }
 
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+/** Grid, axis line and tick labels of an axis frame, as shapes. */
+function frameShapes(frame) {
+    const { plot, xTicks, yTicks, baseline } = frame;
+    const right = plot.x + plot.width;
+    return [
+        ...yTicks.map((t) => ({
+            kind: 'line',
+            part: 'grid',
+            x1: plot.x,
+            x2: right,
+            y1: t.pos,
+            y2: t.pos,
+            stroke: CHART_COLORS.grid,
+        })),
+        {
+            kind: 'line',
+            part: 'axis',
+            x1: plot.x,
+            x2: right,
+            y1: baseline,
+            y2: baseline,
+            stroke: CHART_COLORS.axis,
+        },
+        ...yTicks.map((t) => ({
+            kind: 'text',
+            part: 'y-label',
+            x: plot.x - 8,
+            y: t.pos,
+            text: t.label,
+            anchor: 'end',
+            baseline: 'middle',
+            fill: CHART_COLORS.label,
+        })),
+        ...xTicks.map((t) => ({
+            kind: 'text',
+            part: 'x-label',
+            x: t.pos,
+            y: plot.y + plot.height + 20,
+            text: t.label,
+            anchor: 'middle',
+            fill: CHART_COLORS.label,
+        })),
+    ];
+}
+const label = (x, y, text, extra = {}) => ({
+    kind: 'text',
+    part: 'label',
+    x,
+    y,
+    text,
+    fill: CHART_COLORS.label,
+    ...extra,
+});
+/** A dot with its native tooltip. */
+const point = (cx, cy, r, fill, title) => ({
+    kind: 'circle',
+    part: 'point',
+    cx,
+    cy,
+    r,
+    fill,
+    title,
+});
+
 /*
  * Copyright (c) 2026 SkandaDX
  * This file is part of the SkandaDX organization.
@@ -322,19 +378,18 @@ function layoutBarChart(input) {
             const y0 = y(from);
             const y1 = y(to);
             bars.push({
-                series: s.name,
-                category,
-                value,
-                color,
-                title: markTitle(s.name, category, value),
+                kind: 'rect',
+                part: 'bar',
                 x: px(x.start(ci) + (input.stacked ? 0 : si * groupWidth)),
                 y: px(Math.min(y0, y1)),
                 width: px(groupWidth),
                 height: px(Math.abs(y1 - y0)),
+                fill: color,
+                title: markTitle(s.name, category, value),
             });
         });
     });
-    return { ...frame, bars };
+    return { ...frame, shapes: [...frameShapes(frame), ...bars, ...frame.shapes] };
 }
 function stackedExtent(input) {
     let min = 0;
@@ -361,39 +416,52 @@ function stackedExtent(input) {
  * This file is part of the SkandaDX organization.
  * Licensed under the MIT License. See LICENSE in the repository root.
  */
-function polylines(input, { frame, x, y, categories }) {
+/** A stroke per series and a dot per value; `close` turns a stroke into a filled area. */
+function polylines(input, { frame, x, y, categories }, area) {
     const points = [];
     const lines = [];
-    const ends = [];
+    const areas = [];
     input.series.forEach((s, si) => {
         const color = seriesColor(si, s.color);
         const coords = s.data.map((value, ci) => {
-            const p = {
-                series: s.name,
-                color,
-                title: markTitle(s.name, categories[ci], value),
-                x: px(x.center(ci)),
-                y: px(y(value)),
-            };
-            points.push(p);
+            const p = { x: px(x.center(ci)), y: px(y(value)) };
+            points.push(point(p.x, p.y, 3, color, markTitle(s.name, categories[ci], value)));
             return p;
         });
-        lines.push({ series: s.name, color, d: pathThrough(coords, input.curve) });
-        ends.push({ first: px(x.center(0)), last: px(x.center(Math.max(0, s.data.length - 1))) });
+        const d = pathThrough(coords, input.curve);
+        lines.push({
+            kind: 'path',
+            part: 'line',
+            d,
+            stroke: color,
+            strokeWidth: 2,
+            strokeLinecap: 'round',
+            strokeLinejoin: 'round',
+        });
+        if (area) {
+            const first = coords[0];
+            const last = coords[coords.length - 1];
+            areas.push({
+                kind: 'path',
+                part: 'area',
+                d: d && first && last
+                    ? `${d}L${last.x} ${frame.baseline}L${first.x} ${frame.baseline}Z`
+                    : '',
+                fill: color,
+                fillOpacity: 0.25,
+            });
+        }
     });
-    return { frame, lines, points, ends };
+    return {
+        ...frame,
+        shapes: [...frameShapes(frame), ...areas, ...lines, ...points, ...frame.shapes],
+    };
 }
 function layoutLineChart(input) {
-    const { frame, lines, points } = polylines(input, buildFrame(input, extent(values(input), false)));
-    return { ...frame, lines, points };
+    return polylines(input, buildFrame(input, extent(values(input), false)), false);
 }
 function layoutAreaChart(input) {
-    const { frame, lines, points, ends } = polylines(input, buildFrame(input, extent(values(input), true)));
-    const areas = lines.map((l, i) => {
-        const { first, last } = ends[i];
-        return { ...l, d: l.d ? `${l.d}L${last} ${frame.baseline}L${first} ${frame.baseline}Z` : '' };
-    });
-    return { ...frame, lines, points, areas };
+    return polylines(input, buildFrame(input, extent(values(input), true)), true);
 }
 
 /*
@@ -407,25 +475,14 @@ function layoutScatterChart(input) {
     const pairs = input.series.flatMap((s) => s.data);
     const x = axis(extent(pairs.map((p) => p[0]), false), [plot.x, plot.x + plot.width]);
     const y = axis(extent(pairs.map((p) => p[1]), false), [plot.y + plot.height, plot.y]);
+    const legend = input.series.map((s, i) => ({ name: s.name, color: seriesColor(i, s.color) }));
+    const c = canvas(input, width, height, legend);
     const points = input.series.flatMap((s, si) => {
         const color = seriesColor(si, s.color);
-        return s.data.map(([vx, vy]) => ({
-            series: s.name,
-            color,
-            title: `${s.name}: ${formatValue(vx)}, ${formatValue(vy)}`,
-            x: px(x.scale(vx)),
-            y: px(y.scale(vy)),
-        }));
+        return s.data.map(([vx, vy]) => point(px(x.scale(vx)), px(y.scale(vy)), 3, color, `${s.name}: ${formatValue(vx)}, ${formatValue(vy)}`));
     });
-    const legend = input.series.map((s, i) => ({ name: s.name, color: seriesColor(i, s.color) }));
-    return {
-        ...canvas(input, width, height, legend),
-        plot,
-        xTicks: x.ticks,
-        yTicks: y.ticks,
-        baseline: y.zero,
-        points,
-    };
+    const frame = { ...c, plot, xTicks: x.ticks, yTicks: y.ticks, baseline: y.zero };
+    return { ...c, shapes: [...frameShapes(frame), ...points, ...c.shapes] };
 }
 
 /*
@@ -465,29 +522,23 @@ function layoutPieChart(input) {
         if (input.labels && percent > 0.03) {
             const mid = (a0 + angle) / 2;
             const lr = (r + r0) / 2;
-            labels.push({
-                kind: 'text',
+            labels.push(label(px(cx + lr * Math.sin(mid)), px(cy - lr * Math.cos(mid)), `${d.name} ${Math.round(percent * 100)}%`, {
                 part: 'slice-label',
-                x: px(cx + lr * Math.sin(mid)),
-                y: px(cy - lr * Math.cos(mid)),
-                text: `${d.name} ${Math.round(percent * 100)}%`,
                 anchor: 'middle',
                 baseline: 'middle',
                 fill: 'var(--skdx-color-text-on-accent)',
-            });
+            }));
         }
         return {
-            name: d.name,
-            value: d.value,
-            percent,
-            series: d.name,
-            color: seriesColor(i, d.color),
-            title: `${d.name}: ${formatValue(d.value)} (${Math.round(percent * 100)}%)`,
+            kind: 'path',
+            part: 'slice',
             d: percent > 0 ? arc(cx, cy, r, r0, a0, angle) : '',
+            fill: seriesColor(i, d.color),
+            title: `${d.name}: ${formatValue(d.value)} (${Math.round(percent * 100)}%)`,
         };
     });
-    const c = canvas(input, width, height, slices.map((s) => ({ name: s.name, color: s.color })));
-    return { ...c, shapes: [...c.shapes, ...labels], slices };
+    const c = canvas(input, width, height, input.data.map((d, i) => ({ name: d.name, color: seriesColor(i, d.color) })));
+    return { ...c, shapes: [...slices, ...c.shapes, ...labels] };
 }
 
 /*
@@ -505,15 +556,25 @@ function layoutSparkline(input) {
     const line = pathThrough(coords, input.curve);
     const last = coords[coords.length - 1];
     const first = coords[0];
+    const color = seriesColor(0, input.color);
     return {
         width,
         height,
-        shapes: [],
         tooltip: input.tooltip ?? true,
-        color: seriesColor(0, input.color),
-        line,
-        area: line && first && last ? `${line}L${last.x} ${height - PAD$3}L${first.x} ${height - PAD$3}Z` : '',
-        last,
+        shapes: [
+            {
+                kind: 'path',
+                part: 'area',
+                d: line && first && last
+                    ? `${line}L${last.x} ${height - PAD$3}L${first.x} ${height - PAD$3}Z`
+                    : '',
+                fill: color,
+                fillOpacity: 0.15,
+            },
+            { kind: 'path', part: 'line', d: line, stroke: color, strokeWidth: 1.5 },
+            // The most recent point, drawn as a dot.
+            ...(last ? [point(last.x, last.y, 2, color)] : []),
+        ],
     };
 }
 
@@ -553,44 +614,62 @@ function layoutRadarChart(input) {
             return `${p.x} ${p.y}`;
         })
             .join('L')}Z`;
+    // Concentric grid polygons, one per tick, innermost first, then a spoke per category.
+    const rings = ticks.filter((t) => t > 0);
+    const grid = [
+        ...rings.map((t) => ({
+            kind: 'path',
+            part: 'grid',
+            d: polygon(() => t),
+            stroke: CHART_COLORS.grid,
+        })),
+        ...input.categories.map((_, i) => {
+            const p = at(i, max);
+            return {
+                kind: 'line',
+                part: 'grid',
+                x1: px(cx),
+                y1: px(cy),
+                x2: p.x,
+                y2: p.y,
+                stroke: CHART_COLORS.grid,
+            };
+        }),
+        ...rings.map((t) => label(px(cx + 4), at(0, t).y, input.normalize ? `${t}%` : formatValue(t), {
+            part: 'y-label',
+            baseline: 'middle',
+        })),
+        ...input.categories.map((text, i) => {
+            const cos = Math.cos(angle(i));
+            const r = radius + 14;
+            return label(px(cx + r * cos), px(cy + r * Math.sin(angle(i))), text, {
+                part: 'x-label',
+                anchor: cos > 0.1 ? 'start' : cos < -0.1 ? 'end' : 'middle',
+                baseline: 'middle',
+            });
+        }),
+    ];
     const points = [];
     const polygons = input.series.map((s, si) => {
         const color = seriesColor(si, s.color);
         input.categories.forEach((category, i) => {
             const value = s.data[i] ?? 0;
-            points.push({
-                series: s.name,
-                color,
-                title: markTitle(s.name, category, value),
-                ...at(i, norm(si, value)),
-            });
+            const p = at(i, norm(si, value));
+            points.push(point(p.x, p.y, 3, color, markTitle(s.name, category, value)));
         });
-        return { series: s.name, color, d: polygon((i) => norm(si, s.data[i] ?? 0)) };
+        return {
+            kind: 'path',
+            part: 'area',
+            d: polygon((i) => norm(si, s.data[i] ?? 0)),
+            fill: color,
+            fillOpacity: 0.25,
+            stroke: color,
+            strokeWidth: 2,
+        };
     });
-    return {
-        ...canvas(input, width, height, polygons.map((p) => ({ name: p.series, color: p.color }))),
-        rings: ticks
-            .filter((t) => t > 0)
-            .map((t) => ({
-            d: polygon(() => t),
-            label: { x: px(cx + 4), y: at(0, t).y, label: input.normalize ? `${t}%` : formatValue(t) },
-        })),
-        spokes: input.categories.map((_, i) => ({ x1: px(cx), y1: px(cy), ...toXY(at(i, max)) })),
-        axisLabels: input.categories.map((label, i) => {
-            const cos = Math.cos(angle(i));
-            const r = radius + 14;
-            return {
-                x: px(cx + r * cos),
-                y: px(cy + r * Math.sin(angle(i))),
-                label,
-                anchor: cos > 0.1 ? 'start' : cos < -0.1 ? 'end' : 'middle',
-            };
-        }),
-        polygons,
-        points,
-    };
+    const c = canvas(input, width, height, input.series.map((s, i) => ({ name: s.name, color: seriesColor(i, s.color) })));
+    return { ...c, shapes: [...grid, ...polygons, ...points, ...c.shapes] };
 }
-const toXY = (p) => ({ x2: p.x, y2: p.y });
 
 /*
  * Copyright (c) 2026 SkandaDX
@@ -610,6 +689,7 @@ function layoutHeatmap(input) {
     const negative = input.negativeColor ?? 'var(--skdx-color-danger-500)';
     const span = Math.max(Math.abs(min), Math.abs(max));
     // Diverging: opacity is the distance from zero, color the sign.
+    // Otherwise 0.15..1, the value's place between the smallest and largest cell.
     const opacity = (v) => input.diverging
         ? span === 0
             ? 1
@@ -624,34 +704,34 @@ function layoutHeatmap(input) {
             if (value === undefined)
                 return;
             cells.push({
-                series: row,
-                row,
-                column,
-                value,
-                color: input.diverging && value < 0 ? negative : color,
-                opacity: opacity(value),
-                title: `${row}, ${column}: ${formatValue(value)}`,
+                kind: 'rect',
+                part: 'cell',
                 x: px(plot.x + ci * cellW),
                 y: px(plot.y + ri * cellH),
                 width: px(cellW),
                 height: px(cellH),
+                fill: input.diverging && value < 0 ? negative : color,
+                opacity: opacity(value),
+                title: `${row}, ${column}: ${formatValue(value)}`,
             });
         });
     });
+    const c = canvas(input, width, height);
     return {
-        ...canvas(input, width, height),
-        plot,
-        cells,
-        rowLabels: input.rows.map((label, i) => ({
-            x: plot.x - 8,
-            y: px(plot.y + (i + 0.5) * cellH),
-            label,
-        })),
-        columnLabels: input.columns.map((label, i) => ({
-            x: px(plot.x + (i + 0.5) * cellW),
-            y: plot.y - 8,
-            label,
-        })),
+        ...c,
+        shapes: [
+            ...input.rows.map((text, i) => label(plot.x - 8, px(plot.y + (i + 0.5) * cellH), text, {
+                part: 'y-label',
+                anchor: 'end',
+                baseline: 'middle',
+            })),
+            ...input.columns.map((text, i) => label(px(plot.x + (i + 0.5) * cellW), plot.y - 8, text, {
+                part: 'x-label',
+                anchor: 'middle',
+            })),
+            ...cells,
+            ...c.shapes,
+        ],
     };
 }
 
@@ -671,90 +751,34 @@ function layoutFunnelChart(input) {
     const offset = legendTop(input);
     const stageH = n === 0 ? 0 : (height - offset - 2 * PAD$2) / n;
     const widthOf = (value) => (max > 0 ? (Math.max(0, value) / max) * full : 0);
-    const stages = input.data.map((d, i) => {
+    const legend = input.data.map((d, i) => ({ name: d.name, color: seriesColor(i, d.color) }));
+    const stages = input.data.flatMap((d, i) => {
         const top = widthOf(d.value);
         const bottom = widthOf(input.data[i + 1]?.value ?? d.value);
         const y0 = offset + PAD$2 + i * stageH;
         const y1 = y0 + stageH - GAP;
         const cx = width / 2;
-        return {
-            name: d.name,
-            value: d.value,
-            percent: first > 0 ? Math.max(0, d.value) / first : 0,
-            series: d.name,
-            color: seriesColor(i, d.color),
-            title: `${d.name}: ${formatValue(d.value)} (${Math.round((first > 0 ? d.value / first : 0) * 100)}%)`,
-            d: `M${px(cx - top / 2)} ${px(y0)}L${px(cx + top / 2)} ${px(y0)}L${px(cx + bottom / 2)} ${px(y1)}L${px(cx - bottom / 2)} ${px(y1)}Z`,
-            x: px(cx),
-            y: px((y0 + y1) / 2),
-            label: `${d.name} · ${formatValue(d.value)}`,
-        };
+        const percent = first > 0 ? d.value / first : 0;
+        return [
+            {
+                kind: 'path',
+                part: 'stage',
+                d: `M${px(cx - top / 2)} ${px(y0)}L${px(cx + top / 2)} ${px(y0)}L${px(cx + bottom / 2)} ${px(y1)}L${px(cx - bottom / 2)} ${px(y1)}Z`,
+                fill: seriesColor(i, d.color),
+                title: `${d.name}: ${formatValue(d.value)} (${Math.round(percent * 100)}%)`,
+            },
+            label(px(cx), px((y0 + y1) / 2), `${d.name} · ${formatValue(d.value)}`, {
+                part: 'stage-label',
+                anchor: 'middle',
+                baseline: 'middle',
+                fill: 'var(--skdx-color-text-on-accent)',
+            }),
+        ];
     });
-    return {
-        ...canvas(input, width, height, stages.map((s) => ({ name: s.name, color: s.color }))),
-        stages,
-    };
+    const c = canvas(input, width, height, legend);
+    return { ...c, shapes: [...stages, ...c.shapes] };
 }
 
-/*
- * Copyright (c) 2026 SkandaDX
- * This file is part of the SkandaDX organization.
- * Licensed under the MIT License. See LICENSE in the repository root.
- */
-/** Grid, axis line and tick labels of an axis frame, as shapes. */
-function frameShapes(frame) {
-    const { plot, xTicks, yTicks, baseline } = frame;
-    const right = plot.x + plot.width;
-    return [
-        ...yTicks.map((t) => ({
-            kind: 'line',
-            part: 'grid',
-            x1: plot.x,
-            x2: right,
-            y1: t.pos,
-            y2: t.pos,
-            stroke: CHART_COLORS.grid,
-        })),
-        {
-            kind: 'line',
-            part: 'axis',
-            x1: plot.x,
-            x2: right,
-            y1: baseline,
-            y2: baseline,
-            stroke: CHART_COLORS.axis,
-        },
-        ...yTicks.map((t) => ({
-            kind: 'text',
-            part: 'y-label',
-            x: plot.x - 8,
-            y: t.pos,
-            text: t.label,
-            anchor: 'end',
-            baseline: 'middle',
-            fill: CHART_COLORS.label,
-        })),
-        ...xTicks.map((t) => ({
-            kind: 'text',
-            part: 'x-label',
-            x: t.pos,
-            y: plot.y + plot.height + 20,
-            text: t.label,
-            anchor: 'middle',
-            fill: CHART_COLORS.label,
-        })),
-    ];
-}
-const label = (x, y, text, extra = {}) => ({
-    kind: 'text',
-    part: 'label',
-    x,
-    y,
-    text,
-    fill: CHART_COLORS.label,
-    ...extra,
-});
-
 /*
  * Copyright (c) 2026 SkandaDX
  * This file is part of the SkandaDX organization.
@@ -979,10 +1003,8 @@ function layoutTreemap(input) {
         });
     };
     tile(input.data, 0, top, width, height - top, undefined);
-    return {
-        ...canvas(input, width, height, legend),
-        shapes: [...shapes, ...canvas(input, width, height, legend).shapes],
-    };
+    const c = canvas(input, width, height, legend);
+    return { ...c, shapes: [...shapes, ...c.shapes] };
 }
 
 /*
@@ -1457,7 +1479,10 @@ class SkdxChartShapesComponent {
             [attr.fill]="s.fill ?? 'none'"
             [attr.stroke]="s.stroke"
             [attr.stroke-width]="s.strokeWidth"
+            [attr.stroke-linecap]="s.strokeLinecap"
+            [attr.stroke-linejoin]="s.strokeLinejoin"
             [attr.opacity]="s.opacity"
+            [attr.fill-opacity]="s.fillOpacity"
           >
             @if (s.title) {
               <svg:title>{{ s.title }}</svg:title>
@@ -1540,7 +1565,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
             [attr.fill]="s.fill ?? 'none'"
             [attr.stroke]="s.stroke"
             [attr.stroke-width]="s.strokeWidth"
+            [attr.stroke-linecap]="s.strokeLinecap"
+            [attr.stroke-linejoin]="s.strokeLinejoin"
             [attr.opacity]="s.opacity"
+            [attr.fill-opacity]="s.fillOpacity"
           >
             @if (s.title) {
               <svg:title>{{ s.title }}</svg:title>
@@ -1652,7 +1680,6 @@ class SkdxChartRootComponent {
       (pointerleave)="tip.set([])"
     >
       <title>{{ label() }}</title>
-      <ng-content></ng-content>
       <svg:g skdxChartShapes [shapes]="layout().shapes"></svg:g>
       <svg:g skdxChartShapes [shapes]="tip()"></svg:g>
     </svg>
@@ -1682,7 +1709,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
       (pointerleave)="tip.set([])"
     >
       <title>{{ label() }}</title>
-      <ng-content></ng-content>
       <svg:g skdxChartShapes [shapes]="layout().shapes"></svg:g>
       <svg:g skdxChartShapes [shapes]="tip()"></svg:g>
     </svg>
@@ -1690,155 +1716,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 }]
         }], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], kind: [{ type: i0.Input, args: [{ isSignal: true, alias: "kind", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }] } });
 /** The `<svg>` root, grid, axis and tick labels every axis chart shares; marks are projected. */
-class SkdxChartFrameComponent {
-    constructor() {
-        this.layout = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
-        this.kind = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []));
-        this.label = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-        this.colors = CHART_COLORS;
-        this.plot = computed(() => this.layout().plot, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "plot" }] : /* istanbul ignore next */ []));
-        this.right = computed(() => this.plot().x + this.plot().width, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "right" }] : /* istanbul ignore next */ []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxChartFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: SkdxChartFrameComponent, isStandalone: true, selector: "skdx-chart-frame", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null }, kind: { classPropertyName: "kind", publicName: "kind", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { styleAttribute: "display: inline-block" }, ngImport: i0, template: `
-    <skdx-chart-root [layout]="layout()" [kind]="kind()" [label]="label()">
-      <svg:g data-skdx-part="grid" [attr.stroke]="colors.grid">
-        @for (t of layout().yTicks; track t.pos) {
-          <svg:line
-            [attr.x1]="plot().x"
-            [attr.x2]="right()"
-            [attr.y1]="t.pos"
-            [attr.y2]="t.pos"
-          ></svg:line>
-        }
-      </svg:g>
-      <svg:line
-        data-skdx-part="axis"
-        [attr.x1]="plot().x"
-        [attr.x2]="right()"
-        [attr.y1]="layout().baseline"
-        [attr.y2]="layout().baseline"
-        [attr.stroke]="colors.axis"
-      ></svg:line>
-      <svg:g
-        data-skdx-part="y-labels"
-        [attr.fill]="colors.label"
-        text-anchor="end"
-        dominant-baseline="middle"
-      >
-        @for (t of layout().yTicks; track t.pos) {
-          <svg:text [attr.x]="plot().x - 8" [attr.y]="t.pos">{{ t.label }}</svg:text>
-        }
-      </svg:g>
-      <svg:g data-skdx-part="x-labels" [attr.fill]="colors.label" text-anchor="middle">
-        @for (t of layout().xTicks; track $index) {
-          <svg:text [attr.x]="t.pos" [attr.y]="plot().y + plot().height + 20">
-            {{ t.label }}
-          </svg:text>
-        }
-      </svg:g>
-      <ng-content></ng-content>
-    </skdx-chart-root>
-  `, isInline: true, dependencies: [{ kind: "component", type: SkdxChartRootComponent, selector: "skdx-chart-root", inputs: ["layout", "kind", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxChartFrameComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'skdx-chart-frame',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { style: 'display: inline-block' },
-                    imports: [SkdxChartRootComponent],
-                    template: `
-    <skdx-chart-root [layout]="layout()" [kind]="kind()" [label]="label()">
-      <svg:g data-skdx-part="grid" [attr.stroke]="colors.grid">
-        @for (t of layout().yTicks; track t.pos) {
-          <svg:line
-            [attr.x1]="plot().x"
-            [attr.x2]="right()"
-            [attr.y1]="t.pos"
-            [attr.y2]="t.pos"
-          ></svg:line>
-        }
-      </svg:g>
-      <svg:line
-        data-skdx-part="axis"
-        [attr.x1]="plot().x"
-        [attr.x2]="right()"
-        [attr.y1]="layout().baseline"
-        [attr.y2]="layout().baseline"
-        [attr.stroke]="colors.axis"
-      ></svg:line>
-      <svg:g
-        data-skdx-part="y-labels"
-        [attr.fill]="colors.label"
-        text-anchor="end"
-        dominant-baseline="middle"
-      >
-        @for (t of layout().yTicks; track t.pos) {
-          <svg:text [attr.x]="plot().x - 8" [attr.y]="t.pos">{{ t.label }}</svg:text>
-        }
-      </svg:g>
-      <svg:g data-skdx-part="x-labels" [attr.fill]="colors.label" text-anchor="middle">
-        @for (t of layout().xTicks; track $index) {
-          <svg:text [attr.x]="t.pos" [attr.y]="plot().y + plot().height + 20">
-            {{ t.label }}
-          </svg:text>
-        }
-      </svg:g>
-      <ng-content></ng-content>
-    </skdx-chart-root>
-  `,
-                }]
-        }], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], kind: [{ type: i0.Input, args: [{ isSignal: true, alias: "kind", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }] } });
-/** A dot per value with its native tooltip. */
-class SkdxChartPointsComponent {
-    constructor() {
-        this.points = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "points" }] : /* istanbul ignore next */ []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxChartPointsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: SkdxChartPointsComponent, isStandalone: true, selector: "g[skdxChartPoints]", inputs: { points: { classPropertyName: "points", publicName: "points", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-    @for (p of points(); track $index) {
-      <svg:circle
-        data-skdx-part="point"
-        [attr.cx]="p.x"
-        [attr.cy]="p.y"
-        r="3"
-        [attr.fill]="p.color"
-      >
-        <svg:title>{{ p.title }}</svg:title>
-      </svg:circle>
-    }
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxChartPointsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'g[skdxChartPoints]',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    @for (p of points(); track $index) {
-      <svg:circle
-        data-skdx-part="point"
-        [attr.cx]="p.x"
-        [attr.cy]="p.y"
-        r="3"
-        [attr.fill]="p.color"
-      >
-        <svg:title>{{ p.title }}</svg:title>
-      </svg:circle>
-    }
-  `,
-                }]
-        }], propDecorators: { points: [{ type: i0.Input, args: [{ isSignal: true, alias: "points", required: true }] }] } });
-/** Size and label inputs every chart takes. */
 class SkdxSizedBase {
     constructor() {
         this.width = input(/* @ts-ignore */
@@ -1888,59 +1765,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
             type: Directive
         }], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: false }] }] } });
 
-/*
- * Copyright (c) 2026 SkandaDX
- * This file is part of the SkandaDX organization.
- * Licensed under the MIT License. See LICENSE in the repository root.
- */
-/** Line strokes plus a dot per value, shared by the line and area charts. */
-class SkdxChartLinesComponent {
-    constructor() {
-        this.lines = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
-        this.points = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "points" }] : /* istanbul ignore next */ []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxChartLinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: SkdxChartLinesComponent, isStandalone: true, selector: "g[skdxChartLines]", inputs: { lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: true, transformFunction: null }, points: { classPropertyName: "points", publicName: "points", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-    @for (l of lines(); track l.series) {
-      <svg:path
-        data-skdx-part="line"
-        [attr.d]="l.d"
-        fill="none"
-        [attr.stroke]="l.color"
-        stroke-width="2"
-        stroke-linejoin="round"
-        stroke-linecap="round"
-      ></svg:path>
-    }
-    <svg:g skdxChartPoints [points]="points()"></svg:g>
-  `, isInline: true, dependencies: [{ kind: "component", type: SkdxChartPointsComponent, selector: "g[skdxChartPoints]", inputs: ["points"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxChartLinesComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'g[skdxChartLines]',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [SkdxChartPointsComponent],
-                    template: `
-    @for (l of lines(); track l.series) {
-      <svg:path
-        data-skdx-part="line"
-        [attr.d]="l.d"
-        fill="none"
-        [attr.stroke]="l.color"
-        stroke-width="2"
-        stroke-linejoin="round"
-        stroke-linecap="round"
-      ></svg:path>
-    }
-    <svg:g skdxChartPoints [points]="points()"></svg:g>
-  `,
-                }]
-        }], propDecorators: { lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: true }] }], points: [{ type: i0.Input, args: [{ isSignal: true, alias: "points", required: true }] }] } });
-
 /*
  * Copyright (c) 2026 SkandaDX
  * This file is part of the SkandaDX organization.
@@ -1951,5 +1775,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CHART_COLORS, SERIES_COLORS, SkdxChartBase, SkdxChartFrameComponent, SkdxChartLinesComponent, SkdxChartPointsComponent, SkdxChartRootComponent, SkdxChartShapesComponent, SkdxSizedBase, boxStats, formatValue, hoverTooltip, layoutAreaChart, layoutBarChart, layoutBoxplot, layoutCandlestick, layoutChord, layoutFunnelChart, layoutGantt, layoutHeatmap, layoutLineChart, layoutMap, layoutPieChart, layoutRadarChart, layoutSankey, layoutScatterChart, layoutSparkline, layoutSunburst, layoutTreemap, layoutWaterfall, linearScale, logTicks, niceTicks, pathThrough, seriesColor, svgAttrs, tooltipShapes };
+export { CHART_COLORS, SkdxChartBase, SkdxChartRootComponent, SkdxChartShapesComponent, SkdxSizedBase, hoverTooltip, layoutAreaChart, layoutBarChart, layoutBoxplot, layoutCandlestick, layoutChord, layoutFunnelChart, layoutGantt, layoutHeatmap, layoutLineChart, layoutMap, layoutPieChart, layoutRadarChart, layoutSankey, layoutScatterChart, layoutSparkline, layoutSunburst, layoutTreemap, layoutWaterfall };
 //# sourceMappingURL=skdx-angular-charts-internal.mjs.map