@opendata-ai/openchart-engine 8.0.0-rc.19 → 8.0.0-rc.20

package/dist/index.js

@@ -9,6 +9,7 @@ import {
   getHeightClass,
   getLayoutStrategy,
   isAxislessMark as isAxislessMark3,
+  MAX_SR_TABLE_ROWS,
   resolveTheme as resolveTheme7
 } from "@opendata-ai/openchart-core";
 
@@ -10103,6 +10104,12 @@ function resolveAnimation(spec) {
   const enter = resolvePhase(config.enter, ENTER_DEFAULTS);
   const update = resolvePhase(config.update, UPDATE_DEFAULTS);
   const exit = resolvePhase(config.exit, EXIT_DEFAULTS);
+  if (update && config.update && typeof config.update === "object" && !Array.isArray(config.update)) {
+    const cap = config.update.maxMarks;
+    if (typeof cap === "number" && Number.isFinite(cap) && cap >= 1) {
+      update.maxMarks = Math.floor(cap);
+    }
+  }
   if (!enter && !update && !exit) return void 0;
   return {
     enter: enter ?? void 0,
@@ -11021,6 +11028,21 @@ function validateCalendarSpec(spec, errors) {
     seenDays.set(dayKey, i);
   }
 }
+var VALID_RENDER_MODES = /* @__PURE__ */ new Set(["auto", "svg", "canvas"]);
+function validateMarkRenderMode(spec, errors) {
+  const mark = spec.mark;
+  if (!mark || typeof mark !== "object" || Array.isArray(mark)) return;
+  const render = mark.render;
+  if (render === void 0) return;
+  if (typeof render !== "string" || !VALID_RENDER_MODES.has(render)) {
+    errors.push({
+      message: `Spec error: mark.render ${JSON.stringify(render)} is not valid. Must be one of: auto, svg, canvas`,
+      path: "mark.render",
+      code: "INVALID_VALUE",
+      suggestion: 'Use mark: { type: "point", render: "auto" } (default), "canvas" to force the canvas mark layer, or "svg" to force one circle per point.'
+    });
+  }
+}
 function validateChartSpec(spec, errors) {
   const markType = typeof spec.mark === "string" ? spec.mark : spec.mark?.type;
   if (!Array.isArray(spec.data)) {
@@ -11126,6 +11148,7 @@ function validateChartSpec(spec, errors) {
   if (markType === "calendar") {
     validateCalendarSpec(spec, errors);
   }
+  validateMarkRenderMode(spec, errors);
   if (Array.isArray(spec.transform)) {
     const transforms = spec.transform;
     for (let i = 0; i < transforms.length; i++) {
@@ -12243,6 +12266,22 @@ function validateLayerSpec(spec, errors) {
     }
   }
 }
+function validateAnimation(spec, errors) {
+  const animation = spec.animation;
+  if (!animation || typeof animation !== "object" || Array.isArray(animation)) return;
+  const update = animation.update;
+  if (!update || typeof update !== "object" || Array.isArray(update)) return;
+  const maxMarks = update.maxMarks;
+  if (maxMarks === void 0) return;
+  if (typeof maxMarks !== "number" || !Number.isFinite(maxMarks) || maxMarks < 1) {
+    errors.push({
+      message: `Spec error: animation.update.maxMarks must be a number >= 1, got ${JSON.stringify(maxMarks)}`,
+      path: "animation.update.maxMarks",
+      code: "INVALID_VALUE",
+      suggestion: "Set animation.update.maxMarks to the largest mark count that should still tween, e.g. animation: { update: { maxMarks: 5000 } }. Omit it to use the default of 500."
+    });
+  }
+}
 function validateSpec(spec) {
   const errors = [];
   if (!spec || typeof spec !== "object" || Array.isArray(spec)) {
@@ -12351,6 +12390,9 @@ function validateSpec(spec) {
   } else if (isBarList) {
     validateBarListSpec(obj, errors);
   }
+  if (!isGraph) {
+    validateAnimation(obj, errors);
+  }
   if (errors.length > 0) {
     return { valid: false, errors, normalized: null };
   }
@@ -15317,11 +15359,12 @@ function compileLayer(spec, options, compileChart2) {
     const singleSpec = buildPrimarySpec(leaves, spec);
     return compileChart2(singleSpec, options);
   }
+  const layerOptions = { ...options, layered: true };
   if (spec.resolve?.scale?.y === "independent") {
-    return compileLayerIndependent(leaves, spec, options, compileChart2);
+    return compileLayerIndependent(leaves, spec, layerOptions, compileChart2);
   }
   const primarySpec = buildPrimarySpec(leaves, spec);
-  const primaryLayout = compileChart2(primarySpec, options);
+  const primaryLayout = compileChart2(primarySpec, layerOptions);
   const allMarks = [];
   const seenLabels = /* @__PURE__ */ new Set();
   const pLegend = primaryLayout.legend;
@@ -15334,7 +15377,7 @@ function compileLayer(spec, options, compileChart2) {
     zIndex: leaf.zIndex ?? i
   }));
   indexedLeaves.sort((a, b) => a.zIndex - b.zIndex);
-  const leafOptions = { ...options, frozenChartArea: primaryLayout.area };
+  const leafOptions = { ...layerOptions, frozenChartArea: primaryLayout.area };
   const sharedDomains = computeSharedDomains(leaves);
   for (const { leaf } of indexedLeaves) {
     const themedLeaf = {
@@ -15939,6 +15982,34 @@ function collectContrastWarnings(scales, markType, theme) {
   return warnings;
 }
 
+// src/compiler/mark-render-mode.ts
+var AUTO_CANVAS_THRESHOLD = 1e3;
+var AUTO_ENABLED = true;
+function resolveMarkRenderMode(args, warnings = []) {
+  const { markDef, markType, pointCount, display, faceted, layered } = args;
+  const requested = markDef?.render ?? "auto";
+  if (requested === "svg") return "svg";
+  const refusal = describeRefusal(markType, display, faceted, layered);
+  if (refusal) {
+    if (requested === "canvas") {
+      warnings.push(
+        `Chart warning: mark.render "canvas" is not supported ${refusal}; rendering marks as SVG instead.`
+      );
+    }
+    return "svg";
+  }
+  if (requested === "canvas") return "canvas";
+  if (!AUTO_ENABLED) return "svg";
+  return pointCount > AUTO_CANVAS_THRESHOLD ? "canvas" : "svg";
+}
+function describeRefusal(markType, display, faceted, layered) {
+  if (markType !== "point") return `for ${markType} marks (point marks only)`;
+  if (faceted) return "on faceted charts";
+  if (layered) return "on layered charts";
+  if (display === "sparkline") return "on sparklines";
+  return void 0;
+}
+
 // src/compiler/sparkline-defaults.ts
 var TREND_DEADBAND = 5e-4;
 function computeTrend(values) {
@@ -23633,6 +23704,19 @@ function compileChart(spec, optionsInput) {
   const renderer = getChartRenderer(rendererKey);
   const marks = renderer ? renderer(renderSpec, scales, chartArea, strategy, theme, options.width) : [];
   applyFillPatterns(marks, chartSpec.markDef, theme);
+  const markRenderModeWarnings = [];
+  const markRenderMode = resolveMarkRenderMode(
+    {
+      markDef: chartSpec.markDef,
+      markType: chartSpec.markType,
+      pointCount: marks.reduce((n, m) => m.type === "point" ? n + 1 : n, 0),
+      display: chartSpec.display,
+      faceted: false,
+      layered: options.layered ?? false
+    },
+    markRenderModeWarnings
+  );
+  emitSpecWarnings(markRenderModeWarnings, options.onWarn);
   const xFieldForYdi = chartSpec.encoding.x && "field" in chartSpec.encoding.x ? chartSpec.encoding.x.field : void 0;
   const youDrawIt = resolveYouDrawIt(chartSpec.youDrawIt, marks, scales, chartArea, xFieldForYdi);
   const endpointLabels = computeEndpointLabels(
@@ -23734,6 +23818,7 @@ function compileChart(spec, optionsInput) {
     a11y: {
       altText,
       dataTableFallback,
+      ...chartSpec.data.length > MAX_SR_TABLE_ROWS ? { totalRows: chartSpec.data.length } : {},
       role: "img",
       keyboardNavigable: marks.length > 0,
       ...chartSpec.a11y?.hidden ? { hidden: true } : {}
@@ -23752,7 +23837,8 @@ function compileChart(spec, optionsInput) {
     crosshair,
     measureText: options.measureText,
     ...xInvert ? { xInvert } : {},
-    ...yInvert ? { yInvert } : {}
+    ...yInvert ? { yInvert } : {},
+    ...markRenderMode === "canvas" ? { markRenderMode } : {}
   };
 }
 function compileFaceted(chartSpec, renderSpec, facetChannel, facetDirection, options, theme, strategy, watermark, resolvedAnimation, crosshair, rawSpec, optionsInput) {
@@ -24007,6 +24093,7 @@ function compileFaceted(chartSpec, renderSpec, facetChannel, facetDirection, opt
     a11y: {
       altText,
       dataTableFallback,
+      ...chartSpec.data.length > MAX_SR_TABLE_ROWS ? { totalRows: chartSpec.data.length } : {},
       role: "img",
       keyboardNavigable: allMarks.length > 0,
       ...chartSpec.a11y?.hidden ? { hidden: true } : {}