@silverpoint/core 0.1.0 → 0.2.0

package/dist/index.js

@@ -244,6 +244,21 @@ var WARNINGS = {
     what: "the path byte budget of 40 KB is exceeded",
     todo: "Use `hatchFill: 'tile'` or a larger hatch gap"
   },
+  SP014: {
+    req: "REQ-204",
+    what: "a dashboard cell spans more columns than the breakpoint has; it is clamped",
+    todo: "Lower the span, or give that breakpoint more columns"
+  },
+  SP015: {
+    req: "REQ-205",
+    what: "the dashboard layout and its children disagree; unmatched children are placed in source order, span 1",
+    todo: "Give every child a `cell` the layout declares, once"
+  },
+  SP016: {
+    req: "REQ-217",
+    what: "a chart in a linked dashboard has no field named by `link.key`; it shows no linked mark",
+    todo: "Link on a field every linked chart carries, or leave this chart out of the link"
+  },
   SP013: {
     req: "REQ-032",
     what: "the @silverpoint/fonts face failed to load; rendering fell back to the system stack",
@@ -285,6 +300,7 @@ function pathView(stroke) {
     role: stroke.role,
     paint,
     dash: stroke.dash ?? null,
+    weight: stroke.tonalWeight === void 0 ? null : String(stroke.tonalWeight),
     fill: paint === "tile" && stroke.tile ? `url(#${stroke.tile})` : null
   };
 }
@@ -336,6 +352,7 @@ function pathString(path) {
     ["data-role", path.role],
     ["data-paint", path.paint],
     ["data-dash", path.dash],
+    ["data-weight", path.weight],
     ["fill", path.fill]
   ])}></path>`;
 }
@@ -4204,7 +4221,6 @@ function fits(frame, name, at2, inner, outer, start, end) {
   });
 }
 function buildVolvelleChart(props, context) {
-  const usesDemo = props.data === void 0;
   const all = props.data ?? VOLVELLE_CHART_DEMO;
   const { locale } = context;
   const cap = props.rings !== void 0 && Number.isInteger(props.rings) && props.rings > 0 ? props.rings : all.length;
@@ -4218,16 +4234,13 @@ function buildVolvelleChart(props, context) {
     checkSectors(CHART23, "segments", segments.length);
     rings.push({ label: formatCategory(datum.label, locale), segments: segments.map((s) => formatCategory(s, locale)), given: index });
   });
-  if (usesDemo && (props.indexRing !== void 0 || props.indexValue !== void 0)) {
-    warnValue(CHART23, props.indexValue !== void 0 ? "indexValue" : "indexRing", "Without `data` the demo keeps its own index; `indexRing` and `indexValue` apply to your rings.");
-  }
-  let ringIndex = usesDemo || props.indexRing === void 0 ? 0 : rings.findIndex((r) => r.given === props.indexRing);
+  let ringIndex = props.indexRing === void 0 ? 0 : rings.findIndex((r) => r.given === props.indexRing);
   if (ringIndex < 0) {
     if (rings.length > 0) warnValue(CHART23, "indexRing", `Ring ${String(props.indexRing)} does not exist or has no segments; the index reads the first ring.`);
     ringIndex = 0;
   }
   const turned = rings[ringIndex];
-  let segment = turned && !usesDemo && props.indexValue !== void 0 ? turned.segments.indexOf(props.indexValue) : 0;
+  let segment = turned && props.indexValue !== void 0 ? turned.segments.indexOf(props.indexValue) : 0;
   if (segment < 0) {
     warnValue(CHART23, "indexValue", `"${String(props.indexValue)}" is not on ring "${turned?.label}"; the index reads its first segment.`);
     segment = 0;
@@ -4765,6 +4778,239 @@ var bubbleChart = /* @__PURE__ */ Object.freeze({
   build: (props, context) => buildPoints(FAMILY6, props, context, BUBBLE_CHART_DEMO)
 });
 
-export { DEFAULTS, DISPLAY_FACE_PROBE, FORCED_PRECISION_QUERY, LINE_CHART_DEMO, LINE_CHART_DEMO_KEYS, MIN_TOUCH_TARGET, NAVIGATION_KEYS, NullInker, PATH_BYTE_BUDGET, SilverpointError, __setDiagnosticSink, activityGrid, addDays, areaChart, bandScale, barChart, bubbleChart, bulletChart, candlestickChart, checkTypeface, chordRing, circlePath, composedChart, coxcombChart, createPrng, deriveSeed, diagnose, donutChart, enforceHeightening, expandDomain, extent, fnv1a32, funnelChart, gaugeArc, heatmapChart, instanceId, isoDate, kpiCard, lineChart, linearScale, max, meterChart, min, orbitChart, parseGeometry, parseIsoDate, pathBytes, polarBarChart, pyramidChart, radarChart, radialArcGroup, radialRings, rangeBandChart, readout, reduceInteraction, registerInker, resolveActive, resolveConfig, resolveInker, resolveSeed, round2, roundGeometry, roundPathData, sameActive, sankeyChart, scatterChart, serializeGeometry, sparklineRows, stackedBarChart, stepActive, stepChart, streamChart, svgString, toSvgPoint, toSvgView, treemapChart, volvelleChart, waterfallChart, weekday, windRose };
+// src/dashboard/defaults.ts
+var BREAKPOINTS = ["sm", "md", "lg"];
+var DASHBOARD = "Dashboard";
+var MAX_COLUMNS = 12;
+var MAX_ROW_SPAN = 6;
+var DASHBOARD_DEFAULTS = /* @__PURE__ */ Object.freeze({
+  columns: /* @__PURE__ */ Object.freeze({ sm: 1, md: 2, lg: 4 }),
+  rowHeight: 240,
+  gap: 16,
+  span: 1,
+  headingLevel: 2,
+  ssrWidth: 1200
+});
+function perBreakpoint(value, fallback) {
+  const given = value !== null && typeof value === "object" ? value : void 0;
+  const bare = value !== void 0 && given === void 0 ? value : void 0;
+  return Object.fromEntries(BREAKPOINTS.map((bp) => [bp, bare ?? given?.[bp] ?? fallback[bp]]));
+}
+function corrected(property, given, used, rule) {
+  if (process.env.NODE_ENV !== "production") {
+    diagnose("SP002", DASHBOARD, { property, message: `${String(given)} is not ${rule}; ${used} is used.` });
+  }
+  return used;
+}
+var isInteger = (n) => typeof n === "number" && Number.isInteger(n);
+function resolveLayout(layout) {
+  const asked = perBreakpoint(layout?.columns, DASHBOARD_DEFAULTS.columns);
+  const columns = Object.fromEntries(
+    BREAKPOINTS.map((bp) => {
+      const n = asked[bp];
+      const ok = isInteger(n) && n >= 1 && n <= MAX_COLUMNS;
+      return [bp, ok ? n : corrected(`columns.${bp}`, n, DASHBOARD_DEFAULTS.columns[bp], `an integer from 1 to ${MAX_COLUMNS}`)];
+    })
+  );
+  const rowHeight = layout?.rowHeight;
+  const gap = layout?.gap;
+  const one = { sm: 1, md: 1, lg: 1 };
+  return {
+    columns,
+    rowHeight: rowHeight === void 0 ? DASHBOARD_DEFAULTS.rowHeight : Number.isFinite(rowHeight) && rowHeight > 0 ? rowHeight : corrected("rowHeight", rowHeight, DASHBOARD_DEFAULTS.rowHeight, "a number above 0"),
+    gap: gap === void 0 ? DASHBOARD_DEFAULTS.gap : Number.isFinite(gap) && gap >= 0 ? gap : corrected("gap", gap, DASHBOARD_DEFAULTS.gap, "a number of 0 or more"),
+    cells: (layout?.cells ?? []).map((cell, index) => {
+      const col = perBreakpoint(cell.colSpan, one);
+      const row = perBreakpoint(cell.rowSpan, one);
+      const where = `cells[${index}]`;
+      const span = Object.fromEntries(
+        BREAKPOINTS.map((bp) => {
+          let c = col[bp];
+          if (!isInteger(c) || c < 1) c = corrected(`${where}.colSpan.${bp}`, c, 1, "an integer of 1 or more");
+          else if (c > columns[bp]) {
+            if (process.env.NODE_ENV !== "production") {
+              diagnose("SP014", DASHBOARD, { property: `${where}.colSpan.${bp}`, message: `Cell "${cell.id}" spans ${c} columns at ${bp}, which has ${columns[bp]}; it spans ${columns[bp]}.` });
+            }
+            c = columns[bp];
+          }
+          let r = row[bp];
+          if (!isInteger(r)) r = corrected(`${where}.rowSpan.${bp}`, r, 1, `an integer from 1 to ${MAX_ROW_SPAN}`);
+          else if (r < 1 || r > MAX_ROW_SPAN) r = corrected(`${where}.rowSpan.${bp}`, r, Math.min(Math.max(r, 1), MAX_ROW_SPAN), `an integer from 1 to ${MAX_ROW_SPAN}`);
+          return [bp, { col: c, row: r }];
+        })
+      );
+      return { id: cell.id, span };
+    })
+  };
+}
+
+// src/dashboard/resolve.ts
+var UNSAFE = /[^A-Za-z0-9_.:-]+/g;
+var MD_FROM = 640;
+var LG_FROM = 1024;
+var PROBE = 100;
+function safeIdOf(id) {
+  return id.replace(UNSAFE, "-");
+}
+function warn(code, property, message) {
+  if (process.env.NODE_ENV !== "production") diagnose(code, DASHBOARD, { property, message });
+}
+function breakpointOf(width) {
+  return width >= LG_FROM ? "lg" : width >= MD_FROM ? "md" : "sm";
+}
+function nominalBox(layout, span, width) {
+  const bp = breakpointOf(width);
+  const { col, row } = span[bp];
+  const cols = layout.columns[bp];
+  const { gap, rowHeight } = layout;
+  return {
+    width: round2((width - gap * (cols - 1)) / cols * col + gap * (col - 1)),
+    height: round2(rowHeight * row + gap * (row - 1))
+  };
+}
+function cellStyle(span) {
+  const style = {};
+  for (const bp of BREAKPOINTS) style[`--sp-cell-col-${bp}`] = String(span[bp].col);
+  for (const bp of BREAKPOINTS) style[`--sp-cell-row-${bp}`] = String(span[bp].row);
+  return style;
+}
+function resolveDashboard(props, childCells) {
+  const layout = resolveLayout(props.layout);
+  let ssrWidth = DASHBOARD_DEFAULTS.ssrWidth;
+  if (props.ssrWidth !== void 0) {
+    if (Number.isFinite(props.ssrWidth) && props.ssrWidth > 0) ssrWidth = props.ssrWidth;
+    else warn("SP002", "ssrWidth", `${String(props.ssrWidth)} is not a width above 0; ${ssrWidth} is used.`);
+  }
+  const declared = /* @__PURE__ */ new Map();
+  const order = [];
+  for (const cell of layout.cells) {
+    if (declared.has(cell.id)) {
+      warn("SP015", "layout.cells", `Layout cell "${cell.id}" is declared twice; the later declaration is ignored.`);
+      continue;
+    }
+    declared.set(cell.id, cell.span);
+    order.push(cell.id);
+  }
+  const holder = /* @__PURE__ */ new Map();
+  const unplaced = [];
+  childCells.forEach((cell, index) => {
+    if (cell === void 0) {
+      unplaced.push(index);
+    } else if (!declared.has(cell)) {
+      warn("SP015", "cell", `Child ${index} names cell "${cell}", which the layout does not declare; it is placed in source order, span 1.`);
+      unplaced.push(index);
+    } else if (holder.has(cell)) {
+      warn("SP015", "cell", `Children ${holder.get(cell)} and ${index} both name cell "${cell}"; the later is placed in source order, span 1.`);
+      unplaced.push(index);
+    } else {
+      holder.set(cell, index);
+    }
+  });
+  for (const id of order) {
+    if (!holder.has(id)) warn("SP015", "layout.cells", `Layout cell "${id}" has no child; it is dropped.`);
+  }
+  const single = { sm: { col: 1, row: 1 }, md: { col: 1, row: 1 }, lg: { col: 1, row: 1 } };
+  const base = safeIdOf(props.id);
+  const taken = /* @__PURE__ */ new Set();
+  const chartIdOf = (token) => {
+    const stem = `${base}--${token.replace(UNSAFE, "-")}`;
+    let id = stem;
+    for (let n = 2; taken.has(id); n += 1) id = `${stem}-${n}`;
+    taken.add(id);
+    return id;
+  };
+  const cellOf = (id, child, span, token) => ({
+    id,
+    child,
+    chartId: chartIdOf(token),
+    span,
+    nominal: nominalBox(layout, span, ssrWidth),
+    style: cellStyle(span)
+  });
+  const cells = [
+    ...order.filter((id) => holder.has(id)).map((id) => cellOf(id, holder.get(id), declared.get(id), id)),
+    ...unplaced.map((index) => cellOf(String(index), index, single, String(index)))
+  ];
+  const style = {};
+  for (const bp of BREAKPOINTS) style[`--sp-dashboard-columns-${bp}`] = String(layout.columns[bp]);
+  style["--sp-dashboard-row-height"] = `${layout.rowHeight}px`;
+  style["--sp-dashboard-layout-gap"] = `${layout.gap}px`;
+  return { id: props.id, cells, style };
+}
+function cellChartBox(cell, chartProps, recipe) {
+  const width = chartProps.width ?? cell.width;
+  if (chartProps.height !== void 0) return { width, height: chartProps.height };
+  let outer;
+  if (recipe && width > 0) {
+    const model = recipe.build({ ...chartProps, width, height: PROBE }, { id: "sp-probe", width, locale: "en", emptyState: { text: "", rule: false }, domainPadding: 0 });
+    if (model.status !== "deferred") outer = model.geometry.viewBox.height;
+  }
+  outer ??= cardLayout(chartProps, { width, areaHeight: PROBE, chrome: chartProps.chrome ?? "card", locale: "en" }).viewBox.height;
+  return { width, height: Math.max(1, round2(cell.height - (outer - PROBE))) };
+}
+
+// src/dashboard/view.ts
+function dashboardView(props, children) {
+  const model = resolveDashboard(props, children.map((c) => c.cell));
+  if (props.title === void 0 && props.label === void 0 && process.env.NODE_ENV !== "production") {
+    diagnose("SP002", "Dashboard", { property: "title", message: "Name the region with `title` or `label`." });
+  }
+  const base = safeIdOf(props.id);
+  const ground = props.ground ?? DEFAULTS.ground;
+  const groundName = typeof ground === "string" ? ground : ground.name;
+  const titled = props.title !== void 0;
+  const heading = titled ? { level: props.headingLevel ?? DASHBOARD_DEFAULTS.headingLevel, id: `${base}-title`, text: props.title } : void 0;
+  const description = props.description !== void 0 ? { id: `${base}-desc`, text: props.description } : void 0;
+  const config = {};
+  for (const key of ["ground", "substrate", "mode", "locale"]) {
+    if (props[key] !== void 0) config[key] = props[key];
+  }
+  return {
+    model,
+    section: {
+      className: ["sp-dashboard", `sp-ground-${groundName}`, props.className].filter(Boolean).join(" "),
+      substrate: props.substrate ?? DEFAULTS.substrate,
+      ...heading ? { labelledby: heading.id } : { label: props.label },
+      ...description ? { describedby: description.id } : {},
+      style: model.style
+    },
+    ...heading ? { heading } : {},
+    ...description ? { description } : {},
+    cells: model.cells.map((cell) => ({
+      child: cell.child,
+      labelledby: `${children[cell.child]?.id ?? cell.chartId}-title`,
+      style: cell.style,
+      context: { chartId: cell.chartId, box: cell.nominal, config }
+    }))
+  };
+}
+function inCell(props, cell, recipe) {
+  if (!cell) return { props, width: props.width };
+  const box = cellChartBox(cell.box, props, recipe);
+  const merged = { ...props };
+  for (const [key, value] of Object.entries(cell.config)) merged[key] ??= value;
+  return {
+    props: { ...merged, id: props.id ?? cell.chartId, height: props.height ?? box.height },
+    width: props.width ?? box.width
+  };
+}
+
+// src/dashboard/link.ts
+function linkedItems(model, key, value) {
+  const { hitAreas } = model.geometry;
+  if (hitAreas.length > 0 && !hitAreas.some((hit) => key in hit.datum) && process.env.NODE_ENV !== "production") {
+    diagnose("SP016", model.chart, { property: "link.key", message: `No datum has a "${key}" field.` });
+  }
+  return hitAreas.flatMap((hit, index) => hit.datum[key] === value ? [index] : []);
+}
+function linkFrom(key, source, active) {
+  return active ? { key, value: active.datum[key], source } : null;
+}
+function linkedMarks(model, state) {
+  if (!state || state.source === model.id) return [];
+  return linkedItems(model, state.key, state.value).map((index) => readout(model, toActiveItem(model.geometry.hitAreas[index])).marker.d);
+}
+
+export { DASHBOARD_DEFAULTS, DEFAULTS, DISPLAY_FACE_PROBE, FORCED_PRECISION_QUERY, LINE_CHART_DEMO, LINE_CHART_DEMO_KEYS, MIN_TOUCH_TARGET, NAVIGATION_KEYS, NullInker, PATH_BYTE_BUDGET, SilverpointError, __setDiagnosticSink, activityGrid, addDays, areaChart, bandScale, barChart, breakpointOf, bubbleChart, bulletChart, candlestickChart, cellChartBox, checkTypeface, chordRing, circlePath, composedChart, coxcombChart, createPrng, dashboardView, deriveSeed, diagnose, donutChart, enforceHeightening, expandDomain, extent, fnv1a32, funnelChart, gaugeArc, heatmapChart, inCell, instanceId, isoDate, kpiCard, lineChart, linearScale, linkFrom, linkedItems, linkedMarks, max, meterChart, min, orbitChart, parseGeometry, parseIsoDate, pathBytes, perBreakpoint, polarBarChart, pyramidChart, radarChart, radialArcGroup, radialRings, rangeBandChart, readout, reduceInteraction, registerInker, resolveActive, resolveConfig, resolveDashboard, resolveInker, resolveLayout, resolveSeed, round2, roundGeometry, roundPathData, sameActive, sankeyChart, scatterChart, serializeGeometry, sparklineRows, stackedBarChart, stepActive, stepChart, streamChart, svgString, toSvgPoint, toSvgView, treemapChart, volvelleChart, waterfallChart, weekday, windRose };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map