@opendata-ai/openchart-engine 8.0.0-rc.5 → 8.0.0-rc.7

package/dist/index.js

@@ -244,7 +244,10 @@ function refreshConnector(connector, bounds, markerRadius) {
   }
   const exit = connectorExit(bounds, endpoint.x, endpoint.y);
   if (!exit) return void 0;
-  const from = { x: exit.x, y: exit.y };
+  const from = {
+    x: exit.x + (connector.fromOffset?.dx ?? 0),
+    y: exit.y + (connector.fromOffset?.dy ?? 0)
+  };
   const gap = connectorPullbackGap(markerRadius, connector.arrow);
   const cdx = endpoint.x - from.x;
   const cdy = endpoint.y - from.y;
@@ -506,6 +509,10 @@ function resolveTextAnnotation(annotation, scales, chartArea, isDark, measure =
           from,
           to,
           endpoint,
+          fromOffset: annotation.connectorOffset?.from ? {
+            dx: annotation.connectorOffset.from.dx ?? 0,
+            dy: annotation.connectorOffset.from.dy ?? 0
+          } : void 0,
           stroke: connectorStroke,
           style: connectorStyle,
           arrow: connectorArrow,
@@ -10729,6 +10736,7 @@ import {
   MARK_ENCODING_RULES,
   MARK_TYPES,
   resolveSchemeName as resolveSchemeName2,
+  SEQUENTIAL_PALETTES,
   SUPPORTED_SCHEME_NAMES
 } from "@opendata-ai/openchart-core";
 var VALID_FIELD_TYPES = /* @__PURE__ */ new Set(["quantitative", "temporal", "nominal", "ordinal"]);
@@ -10787,6 +10795,53 @@ function didYouMean(field, columns) {
   const match = nearestColumn(field, columns);
   return match ? ` Did you mean "${match}"?` : "";
 }
+function checkSchemeName(channelObj, channelPath, errors) {
+  const scale = channelObj.scale;
+  if (scale && typeof scale.scheme === "string" && !resolveSchemeName2(scale.scheme)) {
+    errors.push({
+      message: `Spec error: ${channelPath}.scale.scheme "${scale.scheme}" is not a supported scheme name`,
+      path: `${channelPath}.scale.scheme`,
+      code: "INVALID_VALUE",
+      suggestion: `Use one of the supported scheme names: ${[...SUPPORTED_SCHEME_NAMES].join(", ")}. Or provide explicit colors via scale.range.`
+    });
+  }
+}
+function checkSchemeUnused(encoding, errors, familyNote, suggestion) {
+  for (const [channel, ch] of Object.entries(encoding)) {
+    if (!ch || typeof ch !== "object" || Array.isArray(ch)) continue;
+    const scale = ch.scale;
+    if (scale && typeof scale.scheme === "string") {
+      errors.push({
+        message: `Spec error: encoding.${channel}.scale.scheme has no effect \u2014 ${familyNote}`,
+        path: `encoding.${channel}.scale.scheme`,
+        code: "INVALID_VALUE",
+        suggestion
+      });
+    }
+  }
+}
+var MAP_PALETTE_NAMES = Object.keys(SEQUENTIAL_PALETTES).join(", ");
+function checkMapSchemeName(channelObj, channelPath, errors) {
+  const scale = channelObj.scale;
+  if (!scale || typeof scale.scheme !== "string") return;
+  if (channelObj.type === "nominal" || channelObj.type === "ordinal") {
+    errors.push({
+      message: `Spec error: ${channelPath}.scale.scheme has no effect \u2014 categorical map colors come from scale.range and scale.domain`,
+      path: `${channelPath}.scale.scheme`,
+      code: "INVALID_VALUE",
+      suggestion: "Remove scale.scheme. To customize categorical map colors, provide explicit colors via scale.range (with scale.domain for category order)."
+    });
+    return;
+  }
+  if (!(scale.scheme in SEQUENTIAL_PALETTES)) {
+    errors.push({
+      message: `Spec error: ${channelPath}.scale.scheme "${scale.scheme}" is not a supported map palette`,
+      path: `${channelPath}.scale.scheme`,
+      code: "INVALID_VALUE",
+      suggestion: `Maps support the sequential palettes: ${MAP_PALETTE_NAMES}. The default is "blue".`
+    });
+  }
+}
 var VALID_RANGE_STYLES = /* @__PURE__ */ new Set(["dumbbell", "arrow", "bar"]);
 function validateRangeSpec(spec, errors) {
   const encoding = spec.encoding;
@@ -11148,15 +11203,7 @@ function validateChartSpec(spec, errors) {
         suggestion: `Use one of: ${[...VALID_FIELD_TYPES].join(", ")}`
       });
     }
-    const channelScale = channelObj.scale;
-    if (channelScale && typeof channelScale.scheme === "string" && !resolveSchemeName2(channelScale.scheme)) {
-      errors.push({
-        message: `Spec error: encoding.${channel}.scale.scheme "${channelScale.scheme}" is not a supported scheme name`,
-        path: `encoding.${channel}.scale.scheme`,
-        code: "INVALID_VALUE",
-        suggestion: `Use one of the supported scheme names: ${[...SUPPORTED_SCHEME_NAMES].join(", ")}. Or provide explicit colors via scale.range.`
-      });
-    }
+    checkSchemeName(channelObj, `encoding.${channel}`, errors);
     if (channelRule && channelObj.type && channelRule.allowedTypes.length > 0) {
       if (!channelRule.allowedTypes.includes(channelObj.type)) {
         errors.push({
@@ -11482,7 +11529,7 @@ function validateGraphSpec(spec, errors) {
         message: `Spec error: edges[${i}].source "${edge.source}" does not reference an existing node id`,
         path: `edges[${i}].source`,
         code: "DATA_FIELD_MISSING",
-        suggestion: `Use one of the existing node ids: ${[...nodeIds].slice(0, 5).join(", ")}${nodeIds.size > 5 ? "..." : ""}`
+        suggestion: `Use one of the existing node ids: ${[...nodeIds].slice(0, 5).join(", ")}${nodeIds.size > 5 ? "..." : ""}.${didYouMean(edge.source, [...nodeIds])}`
       });
     }
     if (typeof edge.target !== "string" || edge.target === "") {
@@ -11497,7 +11544,7 @@ function validateGraphSpec(spec, errors) {
         message: `Spec error: edges[${i}].target "${edge.target}" does not reference an existing node id`,
         path: `edges[${i}].target`,
         code: "DATA_FIELD_MISSING",
-        suggestion: `Use one of the existing node ids: ${[...nodeIds].slice(0, 5).join(", ")}${nodeIds.size > 5 ? "..." : ""}`
+        suggestion: `Use one of the existing node ids: ${[...nodeIds].slice(0, 5).join(", ")}${nodeIds.size > 5 ? "..." : ""}.${didYouMean(edge.target, [...nodeIds])}`
       });
     }
   }
@@ -11515,7 +11562,7 @@ function validateGraphSpec(spec, errors) {
           message: `Spec error: encoding.${channel}.field "${ch.field}" does not exist on nodes. Available fields: ${[...nodeFields].join(", ")}`,
           path: `encoding.${channel}.field`,
           code: "DATA_FIELD_MISSING",
-          suggestion: `Use one of the node fields: ${[...nodeFields].join(", ")}`
+          suggestion: `Use one of the node fields: ${[...nodeFields].join(", ")}.${didYouMean(ch.field, [...nodeFields])}`
         });
       }
     }
@@ -11527,10 +11574,16 @@ function validateGraphSpec(spec, errors) {
           message: `Spec error: encoding.${channel}.field "${ch.field}" does not exist on edges. Available fields: ${[...edgeFields].join(", ")}`,
           path: `encoding.${channel}.field`,
           code: "DATA_FIELD_MISSING",
-          suggestion: `Use one of the edge fields: ${[...edgeFields].join(", ")}`
+          suggestion: `Use one of the edge fields: ${[...edgeFields].join(", ")}.${didYouMean(ch.field, [...edgeFields])}`
         });
       }
     }
+    checkSchemeUnused(
+      encoding,
+      errors,
+      "graph colors come from scale.range and scale.domain",
+      "Remove scale.scheme. To customize graph colors, provide explicit colors via scale.range."
+    );
   }
   if (spec.layout && typeof spec.layout === "object") {
     const layout = spec.layout;
@@ -11584,7 +11637,8 @@ function validateSankeySpec(spec, errors) {
   }
   const encoding = spec.encoding;
   const dataColumns = new Set(Object.keys(firstRow));
-  const availableColumns = [...dataColumns].join(", ");
+  const columnList = [...dataColumns];
+  const availableColumns = columnList.join(", ");
   for (const channel of ["source", "target", "value"]) {
     const ch = encoding[channel];
     if (!ch || typeof ch !== "object") {
@@ -11592,7 +11646,7 @@ function validateSankeySpec(spec, errors) {
         message: `Spec error: sankey encoding requires "${channel}" channel`,
         path: `encoding.${channel}`,
         code: "MISSING_FIELD",
-        suggestion: `Add encoding.${channel} with a field from your data (${availableColumns}). Example: ${channel}: { field: "${[...dataColumns][0] ?? "myField"}", type: "${channel === "value" ? "quantitative" : "nominal"}" }`
+        suggestion: `Add encoding.${channel} with a field from your data (${availableColumns}). Example: ${channel}: { field: "${columnList[0] ?? "myField"}", type: "${channel === "value" ? "quantitative" : "nominal"}" }`
       });
       continue;
     }
@@ -11610,10 +11664,16 @@ function validateSankeySpec(spec, errors) {
         message: `Spec error: encoding.${channel}.field "${ch.field}" does not exist in data. Available columns: ${availableColumns}`,
         path: `encoding.${channel}.field`,
         code: "DATA_FIELD_MISSING",
-        suggestion: `Use one of the available data columns: ${availableColumns}`
+        suggestion: `Use one of the available data columns: ${availableColumns}.${didYouMean(ch.field, columnList)}`
       });
     }
   }
+  checkSchemeUnused(
+    encoding,
+    errors,
+    "sankey node colors cycle the theme categorical palette",
+    "Remove scale.scheme. To customize sankey colors, set theme.colors.categorical."
+  );
   if (spec.darkMode !== void 0 && !VALID_DARK_MODES.has(spec.darkMode)) {
     errors.push({
       message: 'Spec error: darkMode must be "auto", "force", or "off"',
@@ -11673,7 +11733,8 @@ function validateTileMapSpec(spec, errors) {
     }
     const encoding = spec.encoding;
     const dataColumns = new Set(Object.keys(firstRow));
-    const availableColumns = [...dataColumns].join(", ");
+    const columnList = [...dataColumns];
+    const availableColumns = columnList.join(", ");
     for (const channel of ["state", "value"]) {
       const ch = encoding[channel];
       if (!ch || typeof ch !== "object") {
@@ -11681,7 +11742,7 @@ function validateTileMapSpec(spec, errors) {
           message: `Spec error: tilemap encoding requires "${channel}" channel`,
           path: `encoding.${channel}`,
           code: "MISSING_FIELD",
-          suggestion: `Add encoding.${channel} with a field from your data (${availableColumns}). Example: ${channel}: { field: "${[...dataColumns][0] ?? "myField"}", type: "${channel === "value" ? "quantitative" : "nominal"}" }`
+          suggestion: `Add encoding.${channel} with a field from your data (${availableColumns}). Example: ${channel}: { field: "${columnList[0] ?? "myField"}", type: "${channel === "value" ? "quantitative" : "nominal"}" }`
         });
         continue;
       }
@@ -11699,11 +11760,19 @@ function validateTileMapSpec(spec, errors) {
           message: `Spec error: encoding.${channel}.field "${ch.field}" does not exist in data. Available columns: ${availableColumns}`,
           path: `encoding.${channel}.field`,
           code: "DATA_FIELD_MISSING",
-          suggestion: `Use one of the available data columns: ${availableColumns}`
+          suggestion: `Use one of the available data columns: ${availableColumns}.${didYouMean(ch.field, columnList)}`
         });
       }
     }
   }
+  if (spec.encoding && typeof spec.encoding === "object") {
+    checkSchemeUnused(
+      spec.encoding,
+      errors,
+      "tilemap fills come from the top-level palette property",
+      `Remove scale.scheme and set the top-level palette property instead, e.g. palette: "green". Supported: ${MAP_PALETTE_NAMES}.`
+    );
+  }
   if (spec.darkMode !== void 0 && !VALID_DARK_MODES.has(spec.darkMode)) {
     errors.push({
       message: 'Spec error: darkMode must be "auto", "force", or "off"',
@@ -11742,6 +11811,16 @@ function validateMapSpec(spec, errors) {
     });
     return;
   }
+  const mapEncoding = spec.encoding;
+  if (mapEncoding.color && typeof mapEncoding.color === "object") {
+    checkMapSchemeName(mapEncoding.color, "encoding.color", errors);
+  }
+  if (spec.points && typeof spec.points === "object") {
+    const pointsLayer = spec.points;
+    if (pointsLayer.color && typeof pointsLayer.color === "object") {
+      checkMapSchemeName(pointsLayer.color, "points.color", errors);
+    }
+  }
   if ("focus" in geo && geo.focus !== void 0 && geo.focus !== null) {
     const focus = geo.focus;
     if (typeof focus === "string" || typeof focus === "number") {
@@ -11951,7 +12030,8 @@ function validateBarListSpec(spec, errors) {
   }
   const encoding = spec.encoding;
   const dataColumns = new Set(Object.keys(firstRow));
-  const availableColumns = [...dataColumns].join(", ");
+  const columnList = [...dataColumns];
+  const availableColumns = columnList.join(", ");
   for (const channel of ["label", "value"]) {
     const ch = encoding[channel];
     if (!ch || typeof ch !== "object") {
@@ -11959,7 +12039,7 @@ function validateBarListSpec(spec, errors) {
         message: `Spec error: barlist encoding requires "${channel}" channel`,
         path: `encoding.${channel}`,
         code: "MISSING_FIELD",
-        suggestion: `Add encoding.${channel} with a field from your data (${availableColumns}). Example: ${channel}: { field: "${[...dataColumns][0] ?? "myField"}", type: "${channel === "value" ? "quantitative" : "nominal"}" }`
+        suggestion: `Add encoding.${channel} with a field from your data (${availableColumns}). Example: ${channel}: { field: "${columnList[0] ?? "myField"}", type: "${channel === "value" ? "quantitative" : "nominal"}" }`
       });
       continue;
     }
@@ -11977,7 +12057,7 @@ function validateBarListSpec(spec, errors) {
         message: `Spec error: encoding.${channel}.field "${ch.field}" does not exist in data. Available columns: ${availableColumns}`,
         path: `encoding.${channel}.field`,
         code: "DATA_FIELD_MISSING",
-        suggestion: `Use one of the available data columns: ${availableColumns}`
+        suggestion: `Use one of the available data columns: ${availableColumns}.${didYouMean(ch.field, columnList)}`
       });
     }
   }
@@ -11990,10 +12070,16 @@ function validateBarListSpec(spec, errors) {
         message: `Spec error: encoding.${channel}.field "${field}" does not exist in data. Available columns: ${availableColumns}`,
         path: `encoding.${channel}.field`,
         code: "DATA_FIELD_MISSING",
-        suggestion: `Use one of the available data columns: ${availableColumns}`
+        suggestion: `Use one of the available data columns: ${availableColumns}.${didYouMean(field, columnList)}`
       });
     }
   }
+  checkSchemeUnused(
+    encoding,
+    errors,
+    "bar list colors cycle the built-in barlist palette",
+    "Remove scale.scheme. Bar list colors are not configurable via encoding; they cycle the built-in palette."
+  );
   if (spec.darkMode !== void 0 && !VALID_DARK_MODES.has(spec.darkMode)) {
     errors.push({
       message: 'Spec error: darkMode must be "auto", "force", or "off"',
@@ -15779,7 +15865,7 @@ import {
   HPAD_COMPACT_FRACTION as HPAD_COMPACT_FRACTION2,
   HPAD_COMPACT_MIN as HPAD_COMPACT_MIN2,
   resolveTheme as resolveTheme3,
-  SEQUENTIAL_PALETTES
+  SEQUENTIAL_PALETTES as SEQUENTIAL_PALETTES2
 } from "@opendata-ai/openchart-core";
 
 // ../../node_modules/.bun/d3-geo@3.1.1/node_modules/d3-geo/src/math.js
@@ -18011,6 +18097,7 @@ function compileMap(spec, options) {
       fullArea,
       mapAreaHeight,
       legendReserveGap,
+      legendPosition,
       showLegend,
       droppedFeatures
     });
@@ -18063,7 +18150,7 @@ function compileMap(spec, options) {
         }
         if (colorValues.length > 0) {
           const palette = pts.color.scale?.scheme ?? "blue";
-          const paletteStops = [...SEQUENTIAL_PALETTES[palette] ?? SEQUENTIAL_PALETTES.blue];
+          const paletteStops = [...SEQUENTIAL_PALETTES2[palette] ?? SEQUENTIAL_PALETTES2.blue];
           const qScale = quantile2().domain(colorValues).range(paletteStops);
           pointColorScale = (val) => {
             const v = Number(val);
@@ -18420,7 +18507,7 @@ function buildQuantitativeMarks(opts) {
       if (!Number.isNaN(v)) values.push(v);
     }
   }
-  const paletteStops = [...SEQUENTIAL_PALETTES[palette] ?? SEQUENTIAL_PALETTES.blue];
+  const paletteStops = [...SEQUENTIAL_PALETTES2[palette] ?? SEQUENTIAL_PALETTES2.blue];
   const colorScale = quantile2().domain(values).range(paletteStops);
   const marks = [];
   let animIndex = 0;
@@ -18491,6 +18578,7 @@ function buildCategoricalMarks(opts) {
     fullArea,
     mapAreaHeight,
     legendReserveGap,
+    legendPosition,
     showLegend,
     droppedFeatures
   } = opts;
@@ -18584,14 +18672,14 @@ function buildCategoricalMarks(opts) {
       shape: "square"
     }));
     const legendX = fullArea.x;
-    const legendY = fullArea.y + mapAreaHeight + legendReserveGap;
+    const legendY = legendPosition === "bottom" ? fullArea.y + mapAreaHeight + legendReserveGap : fullArea.y + legendReserveGap;
     const legendWidth = fullArea.width;
     const swatchSize = 10;
     const swatchGap = 6;
     const entryGap = 16;
     legend = {
       type: "categorical",
-      position: "bottom",
+      position: legendPosition,
       bounds: { x: legendX, y: legendY, width: legendWidth, height: swatchSize + 6 },
       labelStyle,
       entries,
@@ -18623,13 +18711,15 @@ function resolveFocus(focus, features, pointMarks, warnings) {
     let maxX2 = -Infinity;
     let maxY2 = -Infinity;
     for (const p of matched) {
-      minX2 = Math.min(minX2, p.cx - p.r);
-      minY2 = Math.min(minY2, p.cy - p.r);
-      maxX2 = Math.max(maxX2, p.cx + p.r);
-      maxY2 = Math.max(maxY2, p.cy + p.r);
+      minX2 = Math.min(minX2, p.cx);
+      minY2 = Math.min(minY2, p.cy);
+      maxX2 = Math.max(maxX2, p.cx);
+      maxY2 = Math.max(maxY2, p.cy);
     }
+    const w = Math.max(maxX2 - minX2, 1);
+    const h = Math.max(maxY2 - minY2, 1);
     return {
-      target: { x: minX2, y: minY2, width: maxX2 - minX2, height: maxY2 - minY2, padding: padding2 },
+      target: { x: minX2, y: minY2, width: w, height: h, padding: padding2 },
       // No feature ids: focus-dim is a feature concept, so a points focus
       // dims no features (there are no "other" features to mute).
       ids: []
@@ -21347,7 +21437,7 @@ import {
   HPAD_COMPACT_MIN as HPAD_COMPACT_MIN4,
   pickLabelColor as pickLabelColor4,
   resolveTheme as resolveTheme6,
-  SEQUENTIAL_PALETTES as SEQUENTIAL_PALETTES2
+  SEQUENTIAL_PALETTES as SEQUENTIAL_PALETTES3
 } from "@opendata-ai/openchart-core";
 var TILE_CORNER_RADIUS = 6;
 var TILE_STROKE_WIDTH = 1;
@@ -21425,7 +21515,7 @@ function compileQuantitative(tilemapSpec, options, theme, chrome, fullArea, isDa
   const values = Array.from(stateValueMap.values());
   const min4 = values.length > 0 ? Math.min(...values) : 0;
   const max4 = values.length > 0 ? Math.max(...values) : 100;
-  const paletteStops = [...SEQUENTIAL_PALETTES2[tilemapSpec.palette] ?? SEQUENTIAL_PALETTES2.blue];
+  const paletteStops = [...SEQUENTIAL_PALETTES3[tilemapSpec.palette] ?? SEQUENTIAL_PALETTES3.blue];
   const baseColor = isDarkMode ? paletteStops[0] : paletteStops[paletteStops.length - 1];
   const opacityRange = isDarkMode ? [0.15, 1] : [0.2, 1];
   const opacityScale = linear2().domain([min4, max4]).range(opacityRange).clamp(true);