@skdx/angular-charts 0.1.0 → 0.32.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, Component, signal, Directive } from '@angular/core';
+import { input, ChangeDetectionStrategy, Component, signal, computed, Directive } from '@angular/core';
 
 /*
  * Copyright (c) 2026 SkandaDX
@@ -261,6 +261,19 @@ 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)}`;
@@ -279,75 +292,6 @@ 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.
@@ -378,18 +322,19 @@ function layoutBarChart(input) {
             const y0 = y(from);
             const y1 = y(to);
             bars.push({
-                kind: 'rect',
-                part: 'bar',
+                series: s.name,
+                category,
+                value,
+                color,
+                title: markTitle(s.name, category, value),
                 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, shapes: [...frameShapes(frame), ...bars, ...frame.shapes] };
+    return { ...frame, bars };
 }
 function stackedExtent(input) {
     let min = 0;
@@ -416,52 +361,39 @@ function stackedExtent(input) {
  * This file is part of the SkandaDX organization.
  * Licensed under the MIT License. See LICENSE in the repository root.
  */
-/** 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) {
+function polylines(input, { frame, x, y, categories }) {
     const points = [];
     const lines = [];
-    const areas = [];
+    const ends = [];
     input.series.forEach((s, si) => {
         const color = seriesColor(si, s.color);
         const coords = s.data.map((value, ci) => {
-            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)));
+            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);
             return p;
         });
-        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,
-            });
-        }
+        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))) });
     });
-    return {
-        ...frame,
-        shapes: [...frameShapes(frame), ...areas, ...lines, ...points, ...frame.shapes],
-    };
+    return { frame, lines, points, ends };
 }
 function layoutLineChart(input) {
-    return polylines(input, buildFrame(input, extent(values(input), false)), false);
+    const { frame, lines, points } = polylines(input, buildFrame(input, extent(values(input), false)));
+    return { ...frame, lines, points };
 }
 function layoutAreaChart(input) {
-    return polylines(input, buildFrame(input, extent(values(input), true)), true);
+    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 };
 }
 
 /*
@@ -475,14 +407,25 @@ 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]) => point(px(x.scale(vx)), px(y.scale(vy)), 3, color, `${s.name}: ${formatValue(vx)}, ${formatValue(vy)}`));
+        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)),
+        }));
     });
-    const frame = { ...c, plot, xTicks: x.ticks, yTicks: y.ticks, baseline: y.zero };
-    return { ...c, shapes: [...frameShapes(frame), ...points, ...c.shapes] };
+    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,
+    };
 }
 
 /*
@@ -522,23 +465,29 @@ function layoutPieChart(input) {
         if (input.labels && percent > 0.03) {
             const mid = (a0 + angle) / 2;
             const lr = (r + r0) / 2;
-            labels.push(label(px(cx + lr * Math.sin(mid)), px(cy - lr * Math.cos(mid)), `${d.name} ${Math.round(percent * 100)}%`, {
+            labels.push({
+                kind: 'text',
                 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 {
-            kind: 'path',
-            part: 'slice',
-            d: percent > 0 ? arc(cx, cy, r, r0, a0, angle) : '',
-            fill: seriesColor(i, d.color),
+            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)}%)`,
+            d: percent > 0 ? arc(cx, cy, r, r0, a0, angle) : '',
         };
     });
-    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] };
+    const c = canvas(input, width, height, slices.map((s) => ({ name: s.name, color: s.color })));
+    return { ...c, shapes: [...c.shapes, ...labels], slices };
 }
 
 /*
@@ -556,25 +505,15 @@ 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,
-        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)] : []),
-        ],
+        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,
     };
 }
 
@@ -614,62 +553,44 @@ 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;
-            const p = at(i, norm(si, value));
-            points.push(point(p.x, p.y, 3, color, markTitle(s.name, category, value)));
+            points.push({
+                series: s.name,
+                color,
+                title: markTitle(s.name, category, value),
+                ...at(i, norm(si, value)),
+            });
         });
-        return {
-            kind: 'path',
-            part: 'area',
-            d: polygon((i) => norm(si, s.data[i] ?? 0)),
-            fill: color,
-            fillOpacity: 0.25,
-            stroke: color,
-            strokeWidth: 2,
-        };
+        return { series: s.name, color, d: polygon((i) => norm(si, s.data[i] ?? 0)) };
     });
-    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] };
+    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 toXY = (p) => ({ x2: p.x, y2: p.y });
 
 /*
  * Copyright (c) 2026 SkandaDX
@@ -689,7 +610,6 @@ 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
@@ -704,34 +624,34 @@ function layoutHeatmap(input) {
             if (value === undefined)
                 return;
             cells.push({
-                kind: 'rect',
-                part: 'cell',
+                series: row,
+                row,
+                column,
+                value,
+                color: input.diverging && value < 0 ? negative : color,
+                opacity: opacity(value),
+                title: `${row}, ${column}: ${formatValue(value)}`,
                 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 {
-        ...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,
-        ],
+        ...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,
+        })),
     };
 }
 
@@ -751,34 +671,90 @@ 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 legend = input.data.map((d, i) => ({ name: d.name, color: seriesColor(i, d.color) }));
-    const stages = input.data.flatMap((d, i) => {
+    const stages = input.data.map((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;
-        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 {
+            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 c = canvas(input, width, height, legend);
-    return { ...c, shapes: [...stages, ...c.shapes] };
+    return {
+        ...canvas(input, width, height, stages.map((s) => ({ name: s.name, color: s.color }))),
+        stages,
+    };
 }
 
+/*
+ * 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.
@@ -1003,8 +979,10 @@ function layoutTreemap(input) {
         });
     };
     tile(input.data, 0, top, width, height - top, undefined);
-    const c = canvas(input, width, height, legend);
-    return { ...c, shapes: [...shapes, ...c.shapes] };
+    return {
+        ...canvas(input, width, height, legend),
+        shapes: [...shapes, ...canvas(input, width, height, legend).shapes],
+    };
 }
 
 /*
@@ -1479,10 +1457,7 @@ 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>
@@ -1565,10 +1540,7 @@ 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>
@@ -1680,6 +1652,7 @@ 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>
@@ -1709,6 +1682,7 @@ 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>
@@ -1716,6 +1690,155 @@ 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 */
@@ -1765,6 +1888,59 @@ 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.
@@ -1775,5 +1951,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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 };
+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 };
 //# sourceMappingURL=skdx-angular-charts-internal.mjs.map