@k2b/ui 0.49.0 → 0.51.0

package/dist/ssr/content/chart-bar.js

@@ -1,4 +1,5 @@
-import { chartDatumSvg, computeDomain, escapeXml, extendDomainToNice, mapLog, mapRange, niceLogTicks, niceStep, svgRoot } from "@k2b/stdlib";
+import { chartDatumSvg, computeDomain, escapeXml, extendDomainToNice, MAX_AXIS_TICKS, mapLog, mapRange, niceLogTicks, niceStep, referenceLineAttributes, svgRoot } from "../charts/core/svg-renderers";
+import { chartMessages } from "./chart-message-catalog";
 
 /**
  * Bar chart options: stdlib's `charts.bar` options plus a title for the category axis and a separate value format.
@@ -38,7 +39,7 @@ export const chartTextWidth = (text, size = FONT_PX) => {
 };
 
 /** Split a label into at most `lines` lines of `maxPx`; the last line ends with an ellipsis when the label is longer. */
-const wrapLabel = (label, maxPx, lines) => {
+export const wrapLabel = (label, maxPx, lines) => {
   const words = label.trim().split(/\s+/);
   const result = [];
   let current = "";
@@ -88,7 +89,7 @@ const valueScale = (values, axis, nice) => {
     };
     const step = niceStep(hi - lo, axis.ticks ?? 5);
     const ticks = [lo];
-    if (step > 0 && Number.isFinite(step)) for (let value = Math.ceil(lo / step) * step; value < hi;) {
+    if (step > 0 && Number.isFinite(step) && (hi - lo) / step <= MAX_AXIS_TICKS) for (let value = Math.ceil(lo / step) * step; value < hi;) {
       if (value > lo) ticks.push(value);
       const next = value + step;
       if (next <= value) break;
@@ -128,7 +129,7 @@ const finiteItems = data => data.flatMap((item, index) => Number.isFinite(item.v
   item,
   index
 }] : []);
-const headerHeight = opts => opts.title || opts.subtitle ? (opts.title ? 14 : 0) + (opts.subtitle ? 6 : 0) + 16 : 0;
+export const headerHeight = opts => opts.title || opts.subtitle ? (opts.title ? 14 : 0) + (opts.subtitle ? 6 : 0) + 16 : 0;
 const valueFormat = opts => opts.valueFormat ?? opts.yAxis?.format ?? (value => String(value));
 const tickFormat = opts => opts.yAxis?.format ?? (value => String(value));
 
@@ -146,7 +147,13 @@ const columnsFit = (opts, finite, width) => {
 
 /** The renderer's plan for a chart: its layout and logical height at `width`, derived from the data alone. */
 const barChartPlan = (opts, width = 480) => {
-  const finite = finiteItems(opts.data);
+  const finite = finiteItems(opts.data ?? []);
+  if (opts.series) return {
+    layout: "columns",
+    height: 280,
+    finite,
+    header: headerHeight(opts)
+  };
   const header = headerHeight(opts);
   if (!finite.length) return {
     layout: "columns",
@@ -154,7 +161,7 @@ const barChartPlan = (opts, width = 480) => {
     finite,
     header
   };
-  if (opts.xAxis?.ordered || columnsFit(opts, finite, width)) return {
+  if (opts.layout === "columns" || opts.layout !== "rows" && (opts.xAxis?.ordered || columnsFit(opts, finite, width))) return {
     layout: "columns",
     height: 280,
     finite,
@@ -296,7 +303,7 @@ const colorIndex = (item, fallback) => {
   if (!Number.isInteger(index) || index < 0) throw new RangeError("Chart colorIndex must be a nonnegative integer");
   return index % 8;
 };
-const renderHeader = (opts, width) => {
+export const renderHeader = (opts, width) => {
   const parts = [];
   let y = 16;
   if (opts.title) {
@@ -350,22 +357,15 @@ const renderColumns = (opts, plan, width, height, inspect) => {
   const labelY = g.y1;
   // Unordered columns fit every label (see columnsFit); ordered ones label every n-th column that leaves room, from
   // the first column whose label stays inside the drawing.
-  const labelPx = Math.max(...finite.map(({
+  const visibleLabels = visibleCategoryLabels(finite.map(({
     item
-  }) => chartTextWidth(item.label))) + GAP_PX;
-  const labelStep = Math.max(1, Math.ceil(labelPx / (slot / units)));
-  const inside = position => {
-    const half = chartTextWidth(finite[position].item.label) / 2 * units;
-    const center = g.x0 + slot * (position + 0.5);
-    return center - half >= 0 && center + half <= width;
-  };
-  const firstLabel = Math.max(0, finite.findIndex((_, position) => inside(position)));
+  }) => item.label), g.x0, slot, width, units);
   finite.forEach(({
     item,
     index
   }, position) => {
     const center = g.x0 + slot * (position + 0.5);
-    if (position >= firstLabel && (position - firstLabel) % labelStep === 0 && inside(position)) parts.push(`<text class="stdlib-chart-tick-label stdlib-chart-category-label" x="${fmt(center)}" y="${fmt(labelY)}" dy="16" text-anchor="middle">${escapeXml(item.label)}</text>`);
+    if (visibleLabels.has(position)) parts.push(`<text class="stdlib-chart-tick-label stdlib-chart-category-label" x="${fmt(center)}" y="${fmt(labelY)}" dy="16" text-anchor="middle">${escapeXml(item.label)}</text>`);
     if (g.scale.log && item.value <= 0) return;
     const valueY = y(item.value);
     const top = Math.min(valueY, baseline);
@@ -378,8 +378,8 @@ const renderColumns = (opts, plan, width, height, inspect) => {
   for (const ref of opts.references ?? []) {
     if ((ref.axis ?? "y") !== "y" || !Number.isFinite(ref.value) || ref.value < g.scale.domain[0] || ref.value > g.scale.domain[1]) continue;
     const ry = y(ref.value);
-    parts.push(`<line class="stdlib-chart-reference" x1="${fmt(g.x0)}" y1="${fmt(ry)}" x2="${fmt(g.x1)}" y2="${fmt(ry)}"/>`);
-    if (ref.label) parts.push(`<text class="stdlib-chart-reference-label" x="${fmt(g.x1 - 4)}" y="${fmt(ry - 4)}" text-anchor="end">${escapeXml(ref.label)}</text>`);
+    parts.push(`<line class="stdlib-chart-reference"${referenceLineAttributes(ref)} x1="${fmt(g.x0)}" y1="${fmt(ry)}" x2="${fmt(g.x1)}" y2="${fmt(ry)}"/>`);
+    if (ref.label) parts.push(`<text class="stdlib-chart-reference-label"${referenceLineAttributes(ref, true)} x="${fmt(g.x1 - 4)}" y="${fmt(ry - 4)}" text-anchor="end">${escapeXml(ref.label)}</text>`);
   }
   if (opts.xAxis?.label) parts.push(`<text class="stdlib-chart-axis-label" x="${fmt((g.x0 + g.x1) / 2)}" y="${fmt(labelY)}" dy="34" text-anchor="middle">${escapeXml(opts.xAxis.label)}</text>`);
   if (g.legendRows) {
@@ -447,8 +447,8 @@ const renderRows = (opts, plan, width, inspect) => {
   for (const ref of opts.references ?? []) {
     if ((ref.axis ?? "y") !== "y" || !Number.isFinite(ref.value) || ref.value < scale.domain[0] || ref.value > scale.domain[1]) continue;
     const rx = x(ref.value);
-    parts.push(`<line class="stdlib-chart-reference" x1="${fmt(rx)}" y1="${fmt(g.top)}" x2="${fmt(rx)}" y2="${fmt(plotBottom)}"/>`);
-    if (ref.label) parts.push(`<text class="stdlib-chart-reference-label" x="${fmt(rx)}" y="${fmt(g.top - 8)}" text-anchor="middle">${escapeXml(ref.label)}</text>`);
+    parts.push(`<line class="stdlib-chart-reference"${referenceLineAttributes(ref)} x1="${fmt(rx)}" y1="${fmt(g.top)}" x2="${fmt(rx)}" y2="${fmt(plotBottom)}"/>`);
+    if (ref.label) parts.push(`<text class="stdlib-chart-reference-label"${referenceLineAttributes(ref, true)} x="${fmt(rx)}" y="${fmt(g.top - 8)}" text-anchor="middle">${escapeXml(ref.label)}</text>`);
   }
   return parts.join("");
 };
@@ -459,6 +459,7 @@ const renderRows = (opts, plan, width, inspect) => {
  * drawing instead of dropping labels: use {@link barChartLayout} for its logical height.
  */
 export const renderBarChartSvg = opts => {
+  if (opts.series) return renderSeriesBars(opts);
   const plan = barChartPlan(opts, opts.width);
   // The empty drawing of stdlib's bar chart, written here so bundles leave out stdlib's whole bar renderer.
   if (!plan.finite.length) return svgRoot({
@@ -473,4 +474,233 @@ export const renderBarChartSvg = opts => {
     className: opts.className
   }, body).replace("<svg ", `<svg data-bar-layout="${plan.layout}" `);
 };
+
+/** Stable wrapping legend slots reserve the widest total or category value before interaction. */
+export function barSeriesLegend(entries, format, width = 480, displayWidth = 296, maxHeight = Infinity) {
+  const unit = width / displayWidth;
+  let x = 0,
+    row = 0;
+  const items = entries.map(entry => {
+    const finite = entry.data.filter(v => v !== null && Number.isFinite(v));
+    const total = finite.length ? finite.reduce((sum, v) => sum + v, 0) : null;
+    const valueWidth = Math.max(chartTextWidth(total === null ? "–" : format(total)), ...entry.data.filter(v => v !== null && Number.isFinite(v)).map(v => chartTextWidth(format(v))));
+    const labelWidth = Math.max(8, Math.min(96, displayWidth - valueWidth - 32, chartTextWidth(entry.label)));
+    const slot = Math.min(width, (14 + labelWidth + 6 + valueWidth + 16) * unit);
+    if (x && x + slot > width) {
+      x = 0;
+      row++;
+    }
+    const item = {
+      ...entry,
+      total,
+      x,
+      y: row * 20 + 12,
+      labelWidth,
+      valueX: x + slot - 16 * unit
+    };
+    x += slot;
+    return item;
+  });
+  const rows = Math.max(1, Math.floor(maxHeight / 20));
+  const overflow = row + 1 > rows;
+  const visible = overflow ? items.filter(item => item.y <= (rows - 1) * 20) : items;
+  return {
+    items: visible,
+    hidden: items.length - visible.length,
+    height: entries.length ? Math.min(row + 1, rows) * 20 : 0
+  };
+}
+
+/** Category geometry shared by SVG, server snapshots and browser inspection. */
+export function seriesBarLayout(opts, size = {
+  width: 480,
+  height: 280
+}) {
+  const categories = opts.x ?? [];
+  const series = opts.series ?? [];
+  if (series.some(s => s.data.length !== categories.length) || opts.compare && opts.compare.data.length !== categories.length) throw new RangeError("Bar series must have the same length as x");
+  if (opts.compare && series.length !== 1) throw new RangeError("Bar comparison needs exactly one current series");
+  if (opts.normalize && opts.layout !== "stacked") throw new RangeError("Normalized bars must be stacked");
+  if (opts.layout === "stacked" && opts.yAxis?.scale === "log") throw new RangeError("Stacked bars need a linear axis");
+  if (opts.layout === "stacked" && series.some(s => s.data.some(v => v !== null && v < 0))) throw new RangeError("Stacked bars require nonnegative values");
+  const totals = categories.map((_, i) => series.some(s => Number.isFinite(s.data[i])) ? series.reduce((sum, s) => sum + (Number.isFinite(s.data[i]) ? s.data[i] : 0), 0) : null);
+  const values = opts.layout === "stacked" ? totals.filter(v => v !== null) : series.flatMap(s => s.data.filter(v => v !== null));
+  const scale = valueScale(opts.normalize ? [0, 1] : [...values, ...(opts.compare?.data.filter(v => v !== null) ?? [])], opts.yAxis, true);
+  const format = valueFormat(opts);
+  const units = size.width / narrow(opts);
+  const legend = opts.legend !== false;
+  // Keep the legend within one quarter of the frame, leaving room for the plot.
+  const entries = [...series, ...(opts.compare ? [opts.compare] : [])];
+  const legendLayout = barSeriesLegend(entries, format, size.width, narrow(opts), size.height * 0.25);
+  const top = headerHeight(opts) + 8 + (legend ? legendLayout.height : 0) + (opts.yAxis?.label ? 16 : 0);
+  const left = Math.max(40, ...scale.ticks.map(v => (chartTextWidth(opts.normalize ? `${Math.round(v * 100)}%` : tickFormat(opts)(v)) + 8) * units));
+  const right = size.width - 4;
+  const bottom = size.height - 24 - (opts.xAxis?.label ? 18 : 0);
+  const slot = (right - left) / Math.max(1, categories.length);
+  const y = value => project(scale, value, [bottom, top]);
+  const columns = categories.map((label, index) => {
+    const center = left + slot * (index + 0.5);
+    let acc = 0;
+    const current = series.map((s, seriesIndex) => {
+      const raw = s.data[index];
+      const value = raw === null || !Number.isFinite(raw) || opts.normalize && totals[index] === 0 ? null : opts.normalize ? raw / totals[index] : raw;
+      const base = opts.layout === "stacked" ? acc : 0;
+      if (value !== null && opts.layout === "stacked") acc += value;
+      return {
+        seriesIndex,
+        raw,
+        value,
+        base
+      };
+    });
+    return {
+      label,
+      index,
+      center,
+      current,
+      total: totals[index],
+      previous: opts.compare?.data[index]
+    };
+  });
+  const barWidthPx = (opts.compare ? Math.min(slot * 0.32, 26) : Math.min(slot * (opts.layout === "stacked" ? 0.56 : 0.8 / Math.max(1, entries.length)), opts.layout === "stacked" ? 40 : 22)) / units;
+  return {
+    ...size,
+    columns,
+    totals,
+    scale,
+    left,
+    right,
+    top,
+    bottom,
+    slot,
+    y,
+    format,
+    units,
+    entries,
+    legend,
+    legendLayout,
+    barWidthPx
+  };
+}
+const renderSeriesBars = opts => {
+  const g = seriesBarLayout(opts, opts);
+  const parts = [renderHeader(opts, opts.width)];
+  const labels = chartMessages.resolve([opts.locale ?? "en"]).t;
+  const change = new Intl.NumberFormat(opts.locale ?? "en", {
+    style: "percent",
+    maximumFractionDigits: 1,
+    signDisplay: "exceptZero"
+  });
+  const text = (x, y, value, cls = "stdlib-chart-tick-label", anchor = "start", extra = "") => `<text class="${cls}" x="${fmt(x)}" y="${fmt(y)}" text-anchor="${anchor}" ${extra}>${escapeXml(value)}</text>`;
+  if (g.legend) g.legendLayout.items.forEach((entry, i) => {
+    const y = headerHeight(opts) + entry.y;
+    const x = entry.x;
+    parts.push(`<rect class="stdlib-chart-series-${i < (opts.series?.length ?? 0) ? i % 8 : 0}" x="${x}" y="${y - 8}" width="${8 * g.units}" height="8" ${i >= (opts.series?.length ?? 0) ? 'style="fill:none;stroke:var(--stdlib-chart-c1);"' : ""}/>`);
+    if (i >= (opts.series?.length ?? 0)) parts.push(`<path d="M ${x} ${y - 4} l ${4 * g.units} -4 M ${x + 2 * g.units} ${y} l ${6 * g.units} -6 M ${x + 6 * g.units} ${y} l ${2 * g.units} -2" fill="none" stroke="var(--stdlib-chart-c1,#3b82f6)" stroke-width="1"/>`);
+    const label = wrapLabel(entry.label, Math.max(8, entry.labelWidth), 1).lines[0] ?? entry.label;
+    const value = escapeXml(entry.total === null ? "–" : g.format(entry.total));
+    // One text run keeps the value six CSS pixels after its label even when the SVG stretches.
+    parts.push(`<text x="${fmt(x + 14 * g.units)}" y="${fmt(y)}"><tspan class="stdlib-chart-tick-label">${escapeXml(label)}</tspan><tspan class="stdlib-chart-bar-value" dx="6" data-chart-legend-value data-field="${i < (opts.series?.length ?? 0) ? `series:${i}` : "previous"}" data-default="${value}">${value}</tspan></text>`);
+  });
+  if (g.legend && g.legendLayout.hidden) parts.push(text(0, headerHeight(opts) + g.legendLayout.height - 8, `+${g.legendLayout.hidden}`, "stdlib-chart-tick-label"));
+  if (opts.yAxis?.label) parts.push(text(0, g.top - 6, opts.yAxis.label, "stdlib-chart-axis-label"));
+  for (const tick of g.scale.ticks) {
+    parts.push(`<line class="stdlib-chart-grid" x1="${g.left}" x2="${g.right}" y1="${g.y(tick)}" y2="${g.y(tick)}"/>`);
+    parts.push(text(g.left - 6 * g.units, g.y(tick) + 4, opts.normalize ? `${Math.round(tick * 100)}%` : tickFormat(opts)(tick), undefined, "end"));
+  }
+  parts.push(`<line class="stdlib-chart-axis" x1="${g.left}" x2="${g.right}" y1="${g.bottom}" y2="${g.bottom}"/>`);
+  const visibleLabels = visibleCategoryLabels(g.columns.map(c => c.label), g.left, g.slot, opts.width, g.units);
+  for (const column of g.columns) {
+    const fields = column.current.map((v, i) => ({
+      key: `series:${i}`,
+      value: v.raw === null || !Number.isFinite(v.raw) ? "–" : v.raw,
+      formatted: v.raw === null || !Number.isFinite(v.raw) ? "–" : g.format(v.raw)
+    }));
+    if (opts.compare) {
+      const previous = column.previous;
+      fields.push({
+        key: "previous",
+        value: previous ?? "–",
+        formatted: previous === null || !Number.isFinite(previous) ? "–" : g.format(previous)
+      });
+      const current = column.current[0]?.raw;
+      const delta = current == null || previous == null || !Number.isFinite(current) || !Number.isFinite(previous) ? null : current - previous;
+      fields.push({
+        key: "delta",
+        value: delta ?? "–",
+        formatted: delta === null || previous === 0 ? "–" : change.format(delta / Math.abs(previous))
+      });
+    } else if (opts.layout === "stacked") {
+      fields.reverse();
+      fields.push({
+        key: "total",
+        value: column.total ?? "–",
+        formatted: column.total === null ? "–" : g.format(column.total)
+      });
+    }
+    let marks = `<rect class="k2b-chart-category-band" fill="none" pointer-events="all" x="${column.center - g.slot / 2}" y="${g.top}" width="${g.slot}" height="${Math.max(0, g.bottom - g.top)}" rx="6"/>`;
+    const bar = (value, base, x, width, color, previous = false) => {
+      const y0 = g.y(g.scale.log ? g.scale.domain[0] : base),
+        y1 = g.y(base + value);
+      const rect = `<rect class="stdlib-chart-bar stdlib-chart-series-${color % 8}" x="${fmt(x)}" y="${fmt(Math.min(y0, y1))}" width="${fmt(Math.max(0, width))}" height="${fmt(Math.abs(y0 - y1))}" rx="3"/>`;
+      if (!previous) return rect;
+      // Inline strokes avoid document-global SVG pattern IDs, including duplicate charts during SSR.
+      const lines = [];
+      for (let d = -Math.abs(y0 - y1); d < width; d += 6) {
+        const lo = Math.max(0, -d),
+          hi = Math.min(Math.abs(y0 - y1), width - d);
+        if (hi > lo) lines.push(`<line x1="${x + d + lo}" y1="${Math.max(y0, y1) - lo}" x2="${x + d + hi}" y2="${Math.max(y0, y1) - hi}" stroke="var(--stdlib-chart-c1,#3b82f6)" stroke-width="1.5"/>`);
+      }
+      return `<g class="k2b-chart-previous">${rect.replace("/>", ' style="fill:var(--stdlib-chart-c1,#3b82f6);fill-opacity:.14" stroke="var(--stdlib-chart-c1,#3b82f6)" stroke-width="1"/>')}${lines.join("")}</g>`;
+    };
+    if (opts.compare) {
+      const bw = Math.min(g.slot * 0.32, 26);
+      const gap = Math.min(1.5, g.slot * 0.08);
+      if (column.previous !== null && Number.isFinite(column.previous) && (!g.scale.log || column.previous > 0)) marks += bar(column.previous, 0, column.center - bw - gap, bw, 0, true);
+      const value = column.current[0]?.value;
+      if (value != null && (!g.scale.log || value > 0)) marks += bar(value, 0, column.center + gap, bw, 0);
+    } else column.current.forEach(v => {
+      if (v.value === null || g.scale.log && v.value <= 0) return;
+      const stacked = opts.layout === "stacked";
+      const bw = stacked ? Math.min(g.slot * 0.56, 40) : Math.min(g.slot * 0.8 / g.entries.length, 22);
+      const gap = bw / g.units > 4 ? 2 : 0;
+      const x = stacked ? column.center - bw / 2 : column.center - g.entries.length * bw / 2 + v.seriesIndex * bw + gap / 2;
+      const segment = bar(v.value, v.base, x, stacked ? bw : bw - gap, v.seriesIndex);
+      if (stacked && v.value > 0 && column.current.some(next => next.seriesIndex > v.seriesIndex && next.value !== null && next.value > 0)) {
+        const fullHeight = Math.abs(g.y(v.base) - g.y(v.base + v.value));
+        const gap = Math.min(1.5, fullHeight / 2);
+        marks += segment.replace(/y="[^"]*"/, `y="${g.y(v.base + v.value) + gap}"`).replace(/height="[^"]*"/, `height="${fullHeight - gap}"`);
+      } else marks += segment;
+    });
+    parts.push(chartDatumSvg(marks, {
+      role: "item",
+      index: column.index,
+      label: column.label,
+      anchor: [column.center, g.top],
+      values: fields
+    }, opts.inspect ?? false, [column.label, ...fields.map(field => `${field.key.startsWith("series:") ? opts.series[Number(field.key.slice(7))].label : field.key === "previous" ? opts.compare.label : field.key === "delta" ? labels.chartFields({
+      key: "delta"
+    }) : labels.chartFields({
+      key: "total"
+    })}: ${field.formatted}`)].join(" · ")));
+    if (visibleLabels.has(column.index)) parts.push(text(column.center, g.bottom, column.label, "stdlib-chart-tick-label stdlib-chart-category-label", "middle", 'dy="16"'));
+  }
+  for (const ref of opts.references ?? []) if ((ref.axis ?? "y") === "y" && Number.isFinite(ref.value) && ref.value >= g.scale.domain[0] && ref.value <= g.scale.domain[1]) {
+    parts.push(`<line class="stdlib-chart-reference" x1="${g.left}" x2="${g.right}" y1="${g.y(ref.value)}" y2="${g.y(ref.value)}"/>`);
+    if (ref.label) parts.push(text(g.right, g.y(ref.value) - 4, ref.label, "stdlib-chart-reference-label", "end"));
+  }
+  if (opts.xAxis?.label) parts.push(text((g.left + g.right) / 2, opts.height - 2, opts.xAxis.label, "stdlib-chart-axis-label", "middle"));
+  return svgRoot(opts, parts.join("")).replace("<svg ", '<svg data-bar-layout="columns" ');
+};
+const visibleCategoryLabels = (labels, left, slot, width, units) => {
+  const labelPx = Math.max(0, ...labels.map(label => chartTextWidth(label))) + GAP_PX;
+  const step = Math.max(1, Math.ceil(labelPx / (slot / units)));
+  const inside = i => {
+    const half = chartTextWidth(labels[i]) * units / 2,
+      center = left + slot * (i + 0.5);
+    return center - half >= 0 && center + half <= width;
+  };
+  const first = Math.max(0, labels.findIndex((_, i) => inside(i)));
+  return new Set(labels.flatMap((_, i) => i >= first && (i - first) % step === 0 && inside(i) ? [i] : []));
+};
 //# sourceMappingURL=chart-bar.js.map