@skdx/angular-charts 0.38.0 → 0.39.0

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

@@ -457,10 +457,16 @@ const size = (input, w = 600, h = 300) => ({
     width: (input.width ?? w) - legendSide(input),
     height: (input.height ?? h) - (legendOptions(input)?.position === 'bottom' ? LEGEND_HEIGHT : 0),
 });
-/** Vertical room the legend row takes above the plot, to shift the plot down by. */
-const legendTop = (input) => {
+/**
+ * Vertical room the legend rows take above the plot, to shift the plot down by. Pass the legend
+ * items and the layout width to reserve every wrapped row; without them one row is assumed.
+ */
+const legendTop = (input, items, width) => {
     const l = legendOptions(input);
-    return l && (l.position === undefined || l.position === 'top') ? LEGEND_HEIGHT : 0;
+    if (!l || !(l.position === undefined || l.position === 'top'))
+        return 0;
+    const rows = items ? Math.max(1, legendRows(items, width ?? size(input).width, l)) : 1;
+    return rows * LEGEND_HEIGHT;
 };
 /** Average glyph width at the chart font size, for text-width estimates. */
 const CHAR = 6.5;
@@ -735,6 +741,12 @@ function axis([min, max], range, options = false, chartFormat) {
         zero: px(scale(Math.min(Math.max(0, domain[0]), domain[1]))),
     };
 }
+/**
+ * Left (or right) margin wide enough for the widest tick label a value axis over `[lo, hi]` will
+ * draw, never below the default. Charts measure it before laying out so a long label such as
+ * "$180.00" is not clipped by the svg edge.
+ */
+const valueAxisRoom = ([lo, hi], format) => Math.max(MARGIN$1.left, niceTicks(lo, hi).reduce((w, v) => Math.max(w, format(v).length), 0) * CHAR + 14);
 /** Whether an axis draws its grid lines. */
 const gridOn = (opts) => opts?.grid !== false;
 /** Keeps every n-th tick so labels of the given widths do not overlap along `width`. */
@@ -791,6 +803,19 @@ function stateCanvas(input, empty, w, h) {
  * This file is part of the SkandaDX organization.
  * Licensed under the MIT License. See LICENSE in the repository root.
  */
+/**
+ * Anchor for a tick label centred at `pos`: `end` when half of it would run past `width`, `start`
+ * when it would run past 0, else `middle`. The outermost tick sits on the plot edge, where a long
+ * date or currency label would otherwise be clipped by the svg.
+ */
+const tickAnchor = (pos, text, width) => {
+    const half = (text.length * CHAR) / 2;
+    if (pos + half > width)
+        return 'end';
+    if (pos - half < 0)
+        return 'start';
+    return 'middle';
+};
 /** Grid, axis line and tick labels of an axis frame, as shapes. */
 function frameShapes(frame, options = {}) {
     const { plot, xTicks, yTicks, baseline } = frame;
@@ -825,7 +850,7 @@ function frameShapes(frame, options = {}) {
             baseline: 'middle',
             rotate: rot,
         })
-        : label(x, y, text, { part, anchor: 'middle' });
+        : label(x, y, text, { part, anchor: tickAnchor(x, text, frame.width) });
     // Short marks across an axis line at the ticks.
     const marks = (ticks, along, at, dir, size) => {
         for (const t of ticks)
@@ -890,7 +915,10 @@ function frameShapes(frame, options = {}) {
             const ly = px(top ? y - 8 : y + 20);
             for (const t of a.ticks)
                 shapes.push(top
-                    ? label(t.pos, ly, t.label, { part: 'x-label-top', anchor: 'middle' })
+                    ? label(t.pos, ly, t.label, {
+                        part: 'x-label-top',
+                        anchor: tickAnchor(t.pos, t.label, frame.width),
+                    })
                     : rotated(t.pos, ly, t.label, 'x-label'));
             // The first axis keeps its title at the top left; stacked axes title their own label row.
             if (a.label)
@@ -2343,8 +2371,8 @@ function layoutCartesian(input, defaultType) {
             return MARGIN$1.left;
         const [lo, hi] = extentOf(opts.id);
         const f = makeFormatter(opts.format ?? percentFormat ?? input.format);
-        const widest = niceTicks(opts.min ?? lo, opts.max ?? hi).reduce((w, v) => Math.max(w, f(v).length), 0);
-        return Math.max(MARGIN$1.left, widest * CHAR + 14) + (opts.showTicks ? (opts.tickSize ?? 4) : 0);
+        return (valueAxisRoom([opts.min ?? lo, opts.max ?? hi], f) +
+            (opts.showTicks ? (opts.tickSize ?? 4) : 0));
     };
     // Horizontal charts run the value axes along the bottom (near) and top (far) edges. Under RTL
     // the vertical sides swap so the first axis sits at the right, next to the reader.
@@ -3988,7 +4016,12 @@ function layoutHeatmap(input) {
                     part: 'cell-label',
                     anchor: 'middle',
                     baseline: 'middle',
-                    fill: 'var(--skdx-color-text-default)',
+                    // The cell composites its fill over the surface at the ramp's opacity: a faint cell
+                    // is mostly surface and reads with the default text token, a strong one is the fill
+                    // and needs the token meant to sit on it. A fixed token fails one end or the other.
+                    fill: fill.opacity >= 0.5
+                        ? 'var(--skdx-color-text-on-accent)'
+                        : 'var(--skdx-color-text-default)',
                 }));
         });
     });
@@ -4765,6 +4798,12 @@ function layoutRangeChart(input) {
  * This file is part of the SkandaDX organization.
  * Licensed under the MIT License. See LICENSE in the repository root.
  */
+/**
+ * Trigonometry rounded to 1e-6: `Math.cos`/`Math.sin` are implementation-defined, so their
+ * last-bit differences between a Node render and a browser render would otherwise reach the
+ * markup and break hydration.
+ */
+const q = (v) => Math.round(v * 1e6) / 1e6;
 /** Node labels are drawn by default up to this many nodes. */
 const NETWORK_LABEL_LIMIT = 60;
 /** Per-edge titles and keyboard stops are emitted up to this many edges. */
@@ -4834,8 +4873,8 @@ function layoutNetworkChart(input) {
         ys = nodes.map((node) => node.y);
     }
     else if (mode === 'circular' || mode === 'manual' || n < 3) {
-        xs = nodes.map((_, i) => Math.cos((2 * Math.PI * i) / n - Math.PI / 2));
-        ys = nodes.map((_, i) => Math.sin((2 * Math.PI * i) / n - Math.PI / 2));
+        xs = nodes.map((_, i) => q(Math.cos((2 * Math.PI * i) / n - Math.PI / 2)));
+        ys = nodes.map((_, i) => q(Math.sin((2 * Math.PI * i) / n - Math.PI / 2)));
     }
     else {
         ({ xs, ys } = force(n, edges.map((e) => [at.get(e.source), at.get(e.target)]), input.iterations ?? Math.max(50, Math.min(300, Math.floor(30_000 / n)))));
@@ -4908,7 +4947,7 @@ function layoutNetworkChart(input) {
                 item,
             };
         }
-        const len = Math.hypot(b.x - a.x, b.y - a.y) || 1;
+        const len = Math.sqrt((b.x - a.x) * (b.x - a.x) + (b.y - a.y) * (b.y - a.y)) || 1;
         const ux = (b.x - a.x) / len;
         const uy = (b.y - a.y) / len;
         if (input.directed) {
@@ -4999,11 +5038,15 @@ function layoutNetworkChart(input) {
 }
 /**
  * Fruchterman–Reingold in the unit square with linear cooling. Deterministic: nodes start on a
- * circle in input order. ponytail: O(n²) per iteration; a Barnes–Hut tree if graphs exceed ~2000 nodes.
+ * circle in input order, the seed is quantised and every step afterwards uses only IEEE-exact
+ * arithmetic (`+ - * /` and `sqrt`), so a server render and a browser render agree bit for bit —
+ * `Math.cos`/`Math.sin`/`Math.hypot` are implementation-defined and their last-bit differences
+ * would otherwise amplify over the iterations into a hydration mismatch.
+ * ponytail: O(n²) per iteration; a Barnes–Hut tree if graphs exceed ~2000 nodes.
  */
 function force(n, edges, iterations) {
-    const xs = Array.from({ length: n }, (_, i) => Math.cos((2 * Math.PI * i) / n));
-    const ys = Array.from({ length: n }, (_, i) => Math.sin((2 * Math.PI * i) / n));
+    const xs = Array.from({ length: n }, (_, i) => q(Math.cos((2 * Math.PI * i) / n)));
+    const ys = Array.from({ length: n }, (_, i) => q(Math.sin((2 * Math.PI * i) / n)));
     const k = Math.sqrt(4 / n);
     const dx = new Array(n).fill(0);
     const dy = new Array(n).fill(0);
@@ -5032,7 +5075,7 @@ function force(n, edges, iterations) {
                 continue;
             const ex = xs[a] - xs[b];
             const ey = ys[a] - ys[b];
-            const d = Math.hypot(ex, ey) || 1e-6;
+            const d = Math.sqrt(ex * ex + ey * ey) || 1e-6;
             const f = (d * d) / k / d;
             dx[a] = dx[a] - ex * f;
             dy[a] = dy[a] - ey * f;
@@ -5040,7 +5083,8 @@ function force(n, edges, iterations) {
             dy[b] = dy[b] + ey * f;
         }
         for (let i = 0; i < n; i++) {
-            const d = Math.hypot(dx[i], dy[i]) || 1e-6;
+            const d = Math.sqrt(dx[i] * dx[i] + dy[i] * dy[i]) ||
+                1e-6;
             const step = Math.min(d, t);
             xs[i] = xs[i] + (dx[i] / d) * step;
             ys[i] = ys[i] + (dy[i] / d) * step;
@@ -5917,6 +5961,11 @@ function seriesCsv(series, categories = []) {
  */
 /** A node's size: its own value, else the sum of its children's. */
 const nodeValue = (n) => isFinite(n.value) ? n.value : (n.children ?? []).reduce((s, c) => s + nodeValue(c), 0);
+/**
+ * Whether this node or anything under it carries a value. A branch in a tree where nobody sets
+ * `value` sums to 0, which is not data and must not be printed as one.
+ */
+const hasValue = (n) => isFinite(n.value) || (n.children ?? []).some(hasValue);
 /** Levels below the given nodes (0 for none). */
 const depthOf = (nodes) => nodes.length === 0 ? 0 : 1 + Math.max(...nodes.map((n) => depthOf(n.children ?? [])));
 /** A node's identity: its id, else its name. */
@@ -6507,19 +6556,12 @@ function layoutCandlestick(input) {
     const { width, height } = size(input);
     const brushRoom = input.brush ? BRUSH_HEIGHT + BRUSH_GAP : 0;
     const selector = input.rangeSelector ?? [];
-    const outer = plotBox(width, height, {
-        ...MARGIN$1,
-        top: MARGIN$1.top + legendTop(input) + (selector.length ? SELECTOR_HEIGHT : 0),
-        bottom: MARGIN$1.bottom + brushRoom,
-    });
     // `compare` plots the change from the first visible close: y values (and the axis format)
     // become fractions while tooltips keep the prices and add the percentage.
     const base = input.compare ? data[0].close : undefined;
     const cmp = (v) => (base !== undefined && base !== 0 ? v / base - 1 : v);
     const pctFormat = base !== undefined ? { style: 'percent', digits: 1 } : undefined;
     const pct = makeFormatter({ style: 'percent', digits: 1 });
-    const volumeH = hasVolume ? outer.height * VOLUME_SHARE : 0;
-    const plot = { ...outer, height: Math.max(0, outer.height - volumeH - (hasVolume ? 8 : 0)) };
     // Moving averages run over every close, so zooming never shortens the window; the visible
     // slice is drawn and read in the crosshair.
     const closes = all.map((c) => c.close);
@@ -6535,12 +6577,25 @@ function layoutCandlestick(input) {
             hidden: isHidden(input, name),
         };
     });
-    const y = axis(extent([
+    // The price extent is known before the plot box, so the left margin can hold the widest tick
+    // label: a currency price such as "$180.00" overflows the default 48.
+    const prices = extent([
         ...data.flatMap((c) => [cmp(c.low), cmp(c.high)]),
         ...overlays
             .filter((o) => !o.hidden)
             .flatMap((o) => o.values.map((v) => (isFinite(v) ? cmp(v) : v))),
-    ], false), [plot.y + plot.height, plot.y], { scale: input.scale === 'log' ? 'log' : 'linear', format: pctFormat }, input.format);
+    ], false);
+    const outer = plotBox(width, height, {
+        ...MARGIN$1,
+        top: MARGIN$1.top + legendTop(input) + (selector.length ? SELECTOR_HEIGHT : 0),
+        bottom: MARGIN$1.bottom + brushRoom,
+        left: input.scale === 'log'
+            ? MARGIN$1.left
+            : valueAxisRoom(prices, makeFormatter(pctFormat ?? input.format)),
+    });
+    const volumeH = hasVolume ? outer.height * VOLUME_SHARE : 0;
+    const plot = { ...outer, height: Math.max(0, outer.height - volumeH - (hasVolume ? 8 : 0)) };
+    const y = axis(prices, [plot.y + plot.height, plot.y], { scale: input.scale === 'log' ? 'log' : 'linear', format: pctFormat }, input.format);
     // A time axis places candles by their label's time, so missing sessions leave gaps; the bar
     // width is 80% of the smallest gap. Otherwise every candle takes an equal slot.
     const times = data.map((c) => categoryValue(c.label));
@@ -7167,7 +7222,10 @@ function layoutGantt(input) {
             y2: plot.y + plot.height,
             stroke: CHART_COLORS.grid,
         });
-        shapes.push(label(t.pos, plot.y + plot.height + 20, t.label, { part: 'x-label', anchor: 'middle' }));
+        shapes.push(label(t.pos, plot.y + plot.height + 20, t.label, {
+            part: 'x-label',
+            anchor: tickAnchor(t.pos, t.label, width),
+        }));
     }
     rowNames.forEach((name, i) => {
         const owner = visible.find((t) => (t.group ?? t.name) === name);
@@ -7850,7 +7908,11 @@ function layoutChord(input) {
     const top = legendTop(input);
     const cx = width / 2;
     const cy = top + (height - top) / 2;
-    const r = Math.max(0, Math.min(width, height - top) / 2 - 36);
+    // Group names sit outside the rim, so the circle keeps room for the widest one on either side;
+    // without it the left-hand label runs off the svg.
+    const nameGap = input.ticks ? 8 + TICK + 14 : 8;
+    const nameRoom = nameGap + Math.max(0, ...given.map((s) => s.length)) * CHAR + 4;
+    const r = Math.max(0, Math.min(width / 2 - nameRoom, (height - top) / 2 - 36));
     const r0 = Math.max(0, r - RING);
     const PAD = ((input.padding ?? 2.3) * Math.PI) / 180;
     // Groups keep their input order (and color) but can be arranged by total flow.
@@ -7943,7 +8005,7 @@ function layoutChord(input) {
         const mid = (g.a0 + g.a1) / 2;
         const sin = Math.sin(mid);
         // Ticks sit on the rim; the group name moves out past their labels.
-        const nameR = r + (input.ticks ? 8 + TICK + 14 : 8);
+        const nameR = r + nameGap;
         shapes.push(label(px(cx + nameR * sin), px(cy - nameR * Math.cos(mid)), names[i], {
             anchor: sin > 0.1 ? 'start' : sin < -0.1 ? 'end' : 'middle',
             baseline: 'middle',
@@ -8512,6 +8574,10 @@ function layoutDumbbellChart(input) {
     const vertical = input.orientation === 'vertical';
     const startLabel = input.startLabel ?? 'Start';
     const endLabel = input.endLabel ?? 'End';
+    // The legend toggles the two ends like any other series: a hidden end drops its markers, its
+    // value labels and the connector that would dangle, and leaves the value axis to the rest.
+    const hideStart = isHidden(input, startLabel);
+    const hideEnd = isHidden(input, endLabel);
     const sorted = [...data];
     if (input.sort) {
         const key = (d) => input.sort === 'change'
@@ -8529,7 +8595,7 @@ function layoutDumbbellChart(input) {
         bottom: MARGIN$1.bottom + (!vertical && input.xAxis?.label ? 14 : 0),
         left: vertical ? MARGIN$1.left : Math.max(MARGIN$1.left, widest + 16),
     });
-    const value = axis(extent(sorted.flatMap((d) => [d.start, d.end]), false), vertical ? [plot.y + plot.height, plot.y] : [plot.x, plot.x + plot.width], input.xAxis ?? {}, input.format);
+    const value = axis(extent(sorted.flatMap((d) => [hideStart ? undefined : d.start, hideEnd ? undefined : d.end]), false), vertical ? [plot.y + plot.height, plot.y] : [plot.x, plot.x + plot.width], input.xAxis ?? {}, input.format);
     const band = bandScale(sorted.length, vertical ? [plot.x, plot.x + plot.width] : [plot.y, plot.y + plot.height]);
     const startColor = colorOf(input, 0);
     const endColor = colorOf(input, 1);
@@ -8575,7 +8641,7 @@ function layoutDumbbellChart(input) {
             index: i,
             value: isFinite(d.end) ? d.end : undefined,
         };
-        if (isFinite(d.start) && isFinite(d.end)) {
+        if (!hideStart && !hideEnd && isFinite(d.start) && isFinite(d.end)) {
             const a = at(d.start, mid);
             const b = at(d.end, mid);
             connectors.push({
@@ -8591,11 +8657,11 @@ function layoutDumbbellChart(input) {
                 item,
             });
         }
-        for (const [v, part, name, fill] of [
-            [d.start, 'start', startLabel, startColor],
-            [d.end, 'end', endLabel, endColor],
+        for (const [v, part, name, fill, hidden] of [
+            [d.start, 'start', startLabel, startColor, hideStart],
+            [d.end, 'end', endLabel, endColor, hideEnd],
         ]) {
-            if (!isFinite(v))
+            if (hidden || !isFinite(v))
                 continue;
             const p = at(v, mid);
             const text = `${d.name} · ${name}: ${format(v)}`;
@@ -8801,7 +8867,7 @@ function layoutTreeChart(input) {
             });
         }
         const value = nodeValue(p.node);
-        const title = `${p.node.name}${p.node.subtitle ? ` · ${p.node.subtitle}` : ''}${isFinite(p.node.value) || (p.node.children?.length ?? 0) > 0 ? `: ${format(value)}` : ''}${p.collapsed ? ' (collapsed)' : ''}`;
+        const title = `${p.node.name}${p.node.subtitle ? ` · ${p.node.subtitle}` : ''}${hasValue(p.node) ? `: ${format(value)}` : ''}${p.collapsed ? ' (collapsed)' : ''}`;
         const item = { label: title, id: nodeId(p.node), name: p.node.name, value };
         if (box) {
             marks.push({
@@ -8942,7 +9008,11 @@ function packCircles(radii, padding) {
 function layoutCirclePacking(input) {
     const issues = [];
     const { nodes: roots } = drill(input.data, input.rootId);
-    const nodes = cutDepth(roots, input.maxDepth).filter((n) => !isHidden(input, n.name));
+    // The legend lists every top-level branch, hidden ones included, so a hide can be undone; and
+    // a branch keeps the colour of its place in that full list whatever is hidden.
+    const branches = cutDepth(roots, input.maxDepth);
+    const branchColor = new Map(branches.map((n, i) => [nodeId(n), colorOf(input, i, n.color)]));
+    const nodes = branches.filter((n) => !isHidden(input, n.name));
     const state = stateCanvas(input, !nodes.some((n) => nodeValue(n) > 0), 300, 300);
     if (state)
         return { ...state, issues };
@@ -8987,7 +9057,7 @@ function layoutCirclePacking(input) {
             const r = Math.max(0, c.r * k - pad / 2);
             const value = nodeValue(n);
             const branch = (n.children?.length ?? 0) > 0;
-            const color = n.color ?? inherited ?? colorOf(input, i);
+            const color = n.color ?? inherited ?? branchColor.get(nodeId(n)) ?? colorOf(input, i);
             const fill = branch ? color : input.colorScale ? (colors.color(value)?.fill ?? color) : color;
             const title = `${n.name}: ${format(value)}`;
             shapes.push({
@@ -9025,7 +9095,7 @@ function layoutCirclePacking(input) {
     };
     const radius = Math.max(0, Math.min(width, height - top) / 2 - 8);
     pack(nodes, width / 2, top + (height - top) / 2, radius, undefined);
-    const c = canvas(input, width, height, nodes.map((n, i) => ({ name: n.name, color: colorOf(input, i, n.color) })));
+    const c = canvas(input, width, height, branches.map((n) => ({ name: n.name, color: branchColor.get(nodeId(n)) })));
     return { ...c, shapes: [...shapes, ...texts, ...c.shapes], issues };
 }
 
@@ -9540,7 +9610,23 @@ function layoutWaffleChart(input) {
     const share = (v) => (total > 0 ? v / total : 0);
     const counts = waffleCounts(data.map((d) => (isHidden(input, d.name) ? 0 : Math.min(1, share(d.value)) * cells)));
     const { width, height } = size(input, 300, 300);
-    const top = legendTop(input);
+    // `labels` appends the share to each legend entry; the entry still toggles by the datum's name.
+    const shares = new Map(data.map((d) => [d.name, `${Math.round(share(d.value) * 100)}%`]));
+    const legend = legendOptions(input);
+    const legendItems = input.data.map((d, i) => ({
+        name: d.name,
+        color: colorOf(input, i, d.color),
+    }));
+    const legendInput = input.labels && legend
+        ? {
+            ...input,
+            legend: {
+                ...legend,
+                formatter: (n) => `${legend.formatter?.(n) ?? n} ${shares.get(n) ?? ''}`,
+            },
+        }
+        : input;
+    const top = legendTop(legendInput, legendItems, width);
     const gap = Math.max(0, input.cellGap ?? 2);
     const cell = Math.max(1, Math.min((width - 2 * PAD) / columns, (height - top - 2 * PAD) / rows));
     const x0 = (width - cell * columns) / 2;
@@ -9579,18 +9665,7 @@ function layoutWaffleChart(input) {
     const restTitle = rest > 0 ? `Other: ${format(rest)} (${Math.round(share(rest) * 100)}%)` : 'Empty';
     for (; k < cells; k++)
         shapes.push(rect(k, CHART_COLORS.grid, restTitle, undefined, 0.6));
-    // `labels` appends the share to each legend entry; the entry still toggles by the datum's name.
-    const shares = new Map(data.map((d) => [d.name, `${Math.round(share(d.value) * 100)}%`]));
-    const legend = legendOptions(input);
-    const c = canvas(input.labels && legend
-        ? {
-            ...input,
-            legend: {
-                ...legend,
-                formatter: (n) => `${legend.formatter?.(n) ?? n} ${shares.get(n) ?? ''}`,
-            },
-        }
-        : input, width, height, input.data.map((d, i) => ({ name: d.name, color: colorOf(input, i, d.color) })));
+    const c = canvas(legendInput, width, height, legendItems);
     return { ...c, shapes: [...shapes, ...c.shapes], issues };
 }