@robosystems/report-components 0.2.10 → 0.3.0

package/dist/index.js

@@ -1,9 +1,109 @@
-import { formatDate, BLOCK_TITLES, numericKindOf, humanizeDuration, formatValue, formatPeriod, isExternalFactUrl, BLOCK_ORDER, humanize, qname, currencySymbolFor } from './chunk-P3GQDCL2.js';
-export { BLOCK_ORDER, BLOCK_TITLES, NS, currencySymbolFor, cypherAdapter, fetchSecReportShell, fetchSecSection, formatDate, formatMoney, formatPeriod, formatValue, humanize, humanizeDuration, isExternalFactUrl, jsonldFileAdapter, mergeSecSections, numericKindOf, parseJsonld, parseStore, parseStructureDefinition, parseStructureName, qname, stripRoleSuffix } from './chunk-P3GQDCL2.js';
+import { formatMoney, formatDate, BLOCK_TITLES, numericKindOf, humanizeDuration, formatValue, formatPeriod, isExternalFactUrl, BLOCK_ORDER, humanize, qname, currencySymbolFor } from './chunk-ZTYXTMAT.js';
+export { BLOCK_ORDER, BLOCK_TITLES, NS, currencySymbolFor, cypherAdapter, fetchSecReportShell, fetchSecSection, formatDate, formatMoney, formatPeriod, formatValue, humanize, humanizeDuration, isExternalFactUrl, jsonldFileAdapter, mergeSecSections, numericKindOf, parseJsonld, parseStore, parseStructureDefinition, parseStructureName, qname, stripRoleSuffix } from './chunk-ZTYXTMAT.js';
 import { marked } from 'marked';
-import { useState, useEffect, useMemo, useRef } from 'react';
+import { useState, useEffect, useMemo, useRef, useId } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
+// src/chart/format.ts
+var DASH = "\u2014";
+function formatMetricValue(itemType, value) {
+  if (value === null || value === void 0 || Number.isNaN(value)) return DASH;
+  switch (itemType) {
+    case "monetary":
+      return formatMoney(value);
+    case "percent":
+      return `${(value * 100).toLocaleString("en-US", { maximumFractionDigits: 2 })}%`;
+    case "multiple":
+      return `${value.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}\xD7`;
+    case "days":
+      return value.toLocaleString("en-US", { maximumFractionDigits: 0 });
+    case "ratio":
+      return value.toLocaleString("en-US", {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      });
+    default:
+      return value.toLocaleString("en-US", { maximumFractionDigits: 4 });
+  }
+}
+function formatMetricCompact(itemType, value) {
+  if (value === null || value === void 0 || Number.isNaN(value)) return "";
+  if (itemType === "monetary") {
+    const abs = Math.abs(value);
+    const sign = value < 0 ? "-" : "";
+    if (abs >= 1e9) return `${sign}$${(abs / 1e9).toFixed(abs >= 1e10 ? 0 : 1)}B`;
+    if (abs >= 1e6) return `${sign}$${(abs / 1e6).toFixed(abs >= 1e7 ? 0 : 1)}M`;
+    if (abs >= 1e3) return `${sign}$${(abs / 1e3).toFixed(abs >= 1e4 ? 0 : 1)}K`;
+    return `${sign}$${abs.toFixed(0)}`;
+  }
+  if (itemType === "percent") {
+    return `${(value * 100).toLocaleString("en-US", { maximumFractionDigits: 1 })}%`;
+  }
+  if (itemType === "multiple") {
+    return `${value.toLocaleString("en-US", { maximumFractionDigits: 1 })}\xD7`;
+  }
+  if (itemType === "days") {
+    return value.toLocaleString("en-US", { maximumFractionDigits: 0 });
+  }
+  return value.toLocaleString("en-US", { maximumFractionDigits: 2 });
+}
+
+// src/chart/join.ts
+function joinChartSeries(panel, rendering) {
+  const rowByElement = new Map(rendering.rows.map((r) => [r.elementId, r]));
+  const periods = rendering.periods;
+  const out = [];
+  for (const series of panel.series) {
+    const row = rowByElement.get(series.elementId);
+    if (!row) continue;
+    const points = periods.map((p, i) => ({
+      x: p.end,
+      y: i < row.values.length ? row.values[i] : null
+    }));
+    out.push({
+      key: series.key,
+      label: series.label,
+      itemType: panel.itemType,
+      points
+    });
+  }
+  return out;
+}
+
+// src/chart/palette.ts
+var SERIES_COLORS_LIGHT = [
+  "#2a78d6",
+  // 1 blue
+  "#eb6834",
+  // 2 orange
+  "#1baf7a",
+  // 3 aqua
+  "#eda100",
+  // 4 yellow
+  "#e87ba4",
+  // 5 magenta
+  "#008300",
+  // 6 green
+  "#4a3aa7",
+  // 7 violet
+  "#e34948"
+  // 8 red
+];
+var SERIES_COLORS_DARK = [
+  "#3987e5",
+  "#d95926",
+  "#199e70",
+  "#c98500",
+  "#d55181",
+  "#008300",
+  "#9085e9",
+  "#e66767"
+];
+function seriesColor(index) {
+  const slot = Math.min(index, SERIES_COLORS_LIGHT.length - 1);
+  return `var(--rs-chart-series-${slot + 1}, ${SERIES_COLORS_LIGHT[slot]})`;
+}
+
 // src/project.ts
 function fallbackElement(id) {
   return {
@@ -1190,7 +1290,394 @@ function ReportView({ report, inspect = true, dimensionAxis = "rows" }) {
     )
   ] });
 }
+var MARGIN = { top: 16, right: 104, bottom: 30, left: 60 };
+var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+function shortMonth(iso) {
+  const m = /^(\d{4})-(\d{2})/.exec(iso);
+  if (!m) return iso;
+  return `${MONTHS[Number(m[2]) - 1] ?? m[2]} '${m[1].slice(2)}`;
+}
+function niceTicks(min, max, count = 4) {
+  if (!(max > min)) return [min];
+  const span = max - min;
+  const step0 = span / count;
+  const mag = Math.pow(10, Math.floor(Math.log10(step0)));
+  const norm = step0 / mag;
+  const step = (norm >= 5 ? 10 : norm >= 2 ? 5 : norm >= 1 ? 2 : 1) * mag;
+  const start = Math.ceil(min / step) * step;
+  const ticks = [];
+  for (let v = start; v <= max + step * 1e-6; v += step) ticks.push(Number(v.toFixed(10)));
+  return ticks;
+}
+var styles5 = {
+  wrap: {
+    fontFamily: "var(--rs-font-sans, ui-sans-serif, system-ui, sans-serif)",
+    color: "var(--rs-text, #111827)"
+  },
+  title: {
+    fontFamily: "var(--rs-font-heading, var(--rs-font-sans, sans-serif))",
+    fontSize: "0.9rem",
+    fontWeight: 600,
+    margin: "0 0 0.5rem"
+  },
+  legend: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "0.25rem 1rem",
+    marginBottom: "0.5rem",
+    fontSize: "0.78rem",
+    color: "var(--rs-muted, #6b7280)"
+  },
+  legendItem: { display: "inline-flex", alignItems: "center", gap: "0.4rem" },
+  legendKey: { display: "inline-block", width: 16, height: 2, borderRadius: 1 },
+  empty: {
+    padding: "2rem",
+    textAlign: "center",
+    color: "var(--rs-muted, #6b7280)",
+    fontSize: "0.85rem"
+  }
+};
+function TimeSeriesChart({
+  series,
+  itemType,
+  title,
+  width = 720,
+  height = 280
+}) {
+  const svgRef = useRef(null);
+  const [active, setActive] = useState(null);
+  const clipId = useId();
+  const family = itemType ?? series[0]?.itemType ?? null;
+  const periodCount = series[0]?.points.length ?? 0;
+  const model = useMemo(() => {
+    const values = [];
+    for (const s of series)
+      for (const p of s.points) if (p.y !== null && !Number.isNaN(p.y)) values.push(p.y);
+    if (!values.length) return null;
+    let min2 = Math.min(...values);
+    let max2 = Math.max(...values);
+    if (min2 === max2) {
+      const pad = Math.abs(min2) * 0.1 || 1;
+      min2 -= pad;
+      max2 += pad;
+    } else {
+      const pad = (max2 - min2) * 0.08;
+      min2 -= pad;
+      max2 += pad;
+    }
+    return { min: min2, max: max2 };
+  }, [series]);
+  if (!model || periodCount === 0) {
+    return /* @__PURE__ */ jsxs("div", { style: styles5.wrap, children: [
+      title && /* @__PURE__ */ jsx("p", { style: styles5.title, children: title }),
+      /* @__PURE__ */ jsx("p", { style: styles5.empty, children: "No data to plot for this period range." })
+    ] });
+  }
+  const innerW = width - MARGIN.left - MARGIN.right;
+  const innerH = height - MARGIN.top - MARGIN.bottom;
+  const { min, max } = model;
+  const xAt = (i) => periodCount === 1 ? MARGIN.left + innerW / 2 : MARGIN.left + i / (periodCount - 1) * innerW;
+  const yAt = (v) => MARGIN.top + innerH - (v - min) / (max - min) * innerH;
+  const yTicks = niceTicks(min, max, 4);
+  const xEvery = Math.max(1, Math.ceil(periodCount / 6));
+  const periods = series[0].points;
+  const showEndLabels = series.length <= 4;
+  const placedLabelY = [];
+  const showLegend = series.length >= 2;
+  const ariaLabel = `${title ? `${title} \u2014 ` : ""}line chart of ${series.length} metric${series.length === 1 ? "" : "s"} over ${periodCount} periods`;
+  function handleMove(e) {
+    const svg = svgRef.current;
+    const ctm = svg?.getScreenCTM?.();
+    if (!svg || !ctm) return;
+    const pt = new DOMPoint(e.clientX, e.clientY).matrixTransform(ctm.inverse());
+    if (periodCount === 1) {
+      setActive(0);
+      return;
+    }
+    const frac = (pt.x - MARGIN.left) / innerW;
+    const idx = Math.round(frac * (periodCount - 1));
+    setActive(Math.max(0, Math.min(periodCount - 1, idx)));
+  }
+  function handleKey(e) {
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      setActive((a) => Math.min(periodCount - 1, (a ?? -1) + 1));
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      setActive((a) => Math.max(0, (a ?? periodCount) - 1));
+    } else if (e.key === "Escape") {
+      setActive(null);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { style: styles5.wrap, children: [
+    title && /* @__PURE__ */ jsx("p", { style: styles5.title, children: title }),
+    showLegend && /* @__PURE__ */ jsx("div", { style: styles5.legend, children: series.map((s, i) => /* @__PURE__ */ jsxs("span", { style: styles5.legendItem, children: [
+      /* @__PURE__ */ jsx("span", { style: { ...styles5.legendKey, background: seriesColor(i) } }),
+      s.label
+    ] }, s.key)) }),
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref: svgRef,
+        viewBox: `0 0 ${width} ${height}`,
+        width: "100%",
+        role: "img",
+        "aria-label": ariaLabel,
+        tabIndex: 0,
+        style: { display: "block", outline: "none", touchAction: "none" },
+        onPointerMove: handleMove,
+        onPointerLeave: () => setActive(null),
+        onKeyDown: handleKey,
+        children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: clipId, children: /* @__PURE__ */ jsx("rect", { x: MARGIN.left, y: MARGIN.top, width: innerW, height: innerH }) }) }),
+          yTicks.map((t) => /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: MARGIN.left,
+                x2: MARGIN.left + innerW,
+                y1: yAt(t),
+                y2: yAt(t),
+                stroke: "var(--rs-border, #e5e7eb)",
+                strokeWidth: 1
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: MARGIN.left - 8,
+                y: yAt(t),
+                textAnchor: "end",
+                dominantBaseline: "middle",
+                fontSize: 11,
+                fill: "var(--rs-muted, #6b7280)",
+                style: { fontVariantNumeric: "tabular-nums" },
+                children: formatMetricCompact(family, t)
+              }
+            )
+          ] }, `y${t}`)),
+          periods.map(
+            (p, i) => i % xEvery === 0 || i === periodCount - 1 ? /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: xAt(i),
+                y: height - MARGIN.bottom + 18,
+                textAnchor: "middle",
+                fontSize: 11,
+                fill: "var(--rs-muted, #6b7280)",
+                children: shortMonth(p.x)
+              },
+              `x${p.x}`
+            ) : null
+          ),
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: MARGIN.left,
+              x2: MARGIN.left + innerW,
+              y1: MARGIN.top + innerH,
+              y2: MARGIN.top + innerH,
+              stroke: "var(--rs-border-strong, #9ca3af)",
+              strokeWidth: 1
+            }
+          ),
+          active !== null && /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: xAt(active),
+              x2: xAt(active),
+              y1: MARGIN.top,
+              y2: MARGIN.top + innerH,
+              stroke: "var(--rs-border-strong, #9ca3af)",
+              strokeWidth: 1
+            }
+          ),
+          /* @__PURE__ */ jsx("g", { clipPath: `url(#${clipId})`, children: series.map((s, si) => {
+            const color = seriesColor(si);
+            const segs = [];
+            let pen = false;
+            s.points.forEach((pt, i) => {
+              if (pt.y === null || Number.isNaN(pt.y)) {
+                pen = false;
+                return;
+              }
+              segs.push(`${pen ? "L" : "M"}${xAt(i)},${yAt(pt.y)}`);
+              pen = true;
+            });
+            return /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: segs.join(" "),
+                fill: "none",
+                stroke: color,
+                strokeWidth: 2,
+                strokeLinejoin: "round",
+                strokeLinecap: "round"
+              },
+              s.key
+            );
+          }) }),
+          series.map((s, si) => {
+            const color = seriesColor(si);
+            let endIdx = -1;
+            for (let i = s.points.length - 1; i >= 0; i--) {
+              const y = s.points[i].y;
+              if (y !== null && !Number.isNaN(y)) {
+                endIdx = i;
+                break;
+              }
+            }
+            if (endIdx < 0) return null;
+            const ey = yAt(s.points[endIdx].y);
+            const ex = xAt(endIdx);
+            let label = null;
+            if (showEndLabels && endIdx === periodCount - 1) {
+              const collides = placedLabelY.some((py) => Math.abs(py - ey) < 13);
+              if (!collides) {
+                placedLabelY.push(ey);
+                label = formatMetricValue(family, s.points[endIdx].y);
+              }
+            }
+            return /* @__PURE__ */ jsxs("g", { children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: ex,
+                  cy: ey,
+                  r: 4,
+                  fill: color,
+                  stroke: "var(--rs-surface, #ffffff)",
+                  strokeWidth: 2
+                }
+              ),
+              label && /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: ex + 8,
+                  y: ey,
+                  dominantBaseline: "middle",
+                  fontSize: 11,
+                  fill: "var(--rs-text, #111827)",
+                  style: { fontVariantNumeric: "tabular-nums" },
+                  children: label
+                }
+              )
+            ] }, `end${s.key}`);
+          }),
+          active !== null && /* @__PURE__ */ jsx(
+            ActiveReadout,
+            {
+              active,
+              series,
+              family,
+              xAt,
+              yAt,
+              width,
+              periodLabel: periods[active] ? shortMonth(periods[active].x) : "",
+              plotTop: MARGIN.top
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function ActiveReadout({
+  active,
+  series,
+  family,
+  xAt,
+  yAt,
+  width,
+  periodLabel,
+  plotTop
+}) {
+  const rows = series.map((s, i) => ({
+    label: s.label,
+    color: seriesColor(i),
+    value: s.points[active]?.y ?? null,
+    y: s.points[active]?.y
+  }));
+  const rowH = 16;
+  const boxW = 176;
+  const boxH = 22 + rows.length * rowH;
+  const cx = xAt(active);
+  const bx = cx + 12 + boxW > width ? cx - 12 - boxW : cx + 12;
+  const by = plotTop + 4;
+  return /* @__PURE__ */ jsxs("g", { pointerEvents: "none", children: [
+    rows.map(
+      (r) => r.y !== null && r.y !== void 0 && !Number.isNaN(r.y) ? /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx,
+          cy: yAt(r.y),
+          r: 4,
+          fill: r.color,
+          stroke: "var(--rs-surface, #ffffff)",
+          strokeWidth: 2
+        },
+        `ap${r.label}`
+      ) : null
+    ),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: bx,
+        y: by,
+        width: boxW,
+        height: boxH,
+        rx: 6,
+        fill: "var(--rs-surface, #ffffff)",
+        stroke: "var(--rs-border, #e5e7eb)",
+        strokeWidth: 1
+      }
+    ),
+    /* @__PURE__ */ jsx("text", { x: bx + 10, y: by + 15, fontSize: 11, fontWeight: 600, fill: "var(--rs-muted, #6b7280)", children: periodLabel }),
+    rows.map((r, i) => {
+      const ry = by + 22 + i * rowH + 11;
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: bx + 10,
+            x2: bx + 24,
+            y1: ry,
+            y2: ry,
+            stroke: r.color,
+            strokeWidth: 2,
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: bx + 30,
+            y: ry,
+            dominantBaseline: "middle",
+            fontSize: 11,
+            fill: "var(--rs-muted, #6b7280)",
+            children: r.label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: bx + boxW - 10,
+            y: ry,
+            dominantBaseline: "middle",
+            textAnchor: "end",
+            fontSize: 11,
+            fontWeight: 600,
+            fill: "var(--rs-text, #111827)",
+            style: { fontVariantNumeric: "tabular-nums" },
+            children: formatMetricValue(family, r.value)
+          }
+        )
+      ] }, `tr${r.label}`);
+    })
+  ] });
+}
 
-export { ExternalTextBlock, FactInspector, ReportView, StatementTable, buildPivot, buildPivots, calcSubtotals, defaultPivotConfig, footCheck, pivotDimensionsOn, presentationOrder, reportSections, sliceReportSection };
+export { ExternalTextBlock, FactInspector, ReportView, SERIES_COLORS_DARK, SERIES_COLORS_LIGHT, StatementTable, TimeSeriesChart, buildPivot, buildPivots, calcSubtotals, defaultPivotConfig, footCheck, formatMetricCompact, formatMetricValue, joinChartSeries, pivotDimensionsOn, presentationOrder, reportSections, seriesColor, sliceReportSection };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map