@opendata-ai/openchart-engine 8.0.0-rc.8 → 8.0.0-rc.9

package/dist/index.js

@@ -13824,7 +13824,8 @@ function computeLegendContent(spec, strategy, theme, availableWidth, availableHe
     fill: theme.colors.text,
     lineHeight: 1.3
   };
-  const resolvedPosition = spec.legend?.position ?? (strategy.legendPosition === "right" ? "right" : "top");
+  const specPosition = spec.legend?.position === "top-left" ? "top" : spec.legend?.position;
+  const resolvedPosition = specPosition ?? (strategy.legendPosition === "right" ? "right" : "top");
   if (entries.length === 0) {
     return emptyContent(resolvedPosition, theme);
   }
@@ -15631,6 +15632,10 @@ function buildPrimarySpec(leaves, layerSpec) {
     ...leaves[0],
     data: allData,
     chrome: layerSpec.chrome ?? leaves[0].chrome,
+    // Annotations come from the parent LayerSpec when present, otherwise
+    // the first flattened leaf's. Later leaves' annotations are silently
+    // dropped. The dual-axis path (compileLayerIndependent) explicitly
+    // clears the secondary axis spec's annotations.
     annotations: layerSpec.annotations ?? leaves[0].annotations,
     labels: layerSpec.labels ?? leaves[0].labels,
     legend: layerSpec.legend ?? leaves[0].legend,
@@ -17843,13 +17848,32 @@ function joinDataToFeatures(features, data, dataKeyField, featureIdField) {
 
 // src/geo/projections.ts
 var MERCATOR_FIT_MIN_LAT = -60;
-function createProjection(type, width, height, geojson) {
+function createProjection(type, width, height, geojson, inset = 0) {
   if (type === "identity") {
+    if (inset > 0) {
+      return identity_default4().fitExtent(
+        [
+          [inset, inset],
+          [width - inset, height - inset]
+        ],
+        geojson
+      );
+    }
     return identity_default4().fitSize([width, height], geojson);
   }
   const projection2 = type === "albersUsa" ? albersUsa_default() : type === "equalEarth" ? equalEarth_default() : mercator_default();
   const fitGeometry = type === "mercator" ? excludePolarFeatures(geojson) : geojson;
-  projection2.fitSize([width, height], fitGeometry);
+  if (inset > 0) {
+    projection2.fitExtent(
+      [
+        [inset, inset],
+        [width - inset, height - inset]
+      ],
+      fitGeometry
+    );
+  } else {
+    projection2.fitSize([width, height], fitGeometry);
+  }
   return projection2;
 }
 function excludePolarFeatures(geojson) {
@@ -17869,6 +17893,7 @@ function excludePolarFeatures(geojson) {
 }
 
 // src/geo/compile-map.ts
+var OVERLAY_LEGEND_INSET = 18;
 function validateGeoFeatures(geo) {
   if (!geo.features) {
     throw new Error(
@@ -17941,11 +17966,13 @@ function compileMap(spec, options) {
   const compileWarnings = [];
   const showLegend = mapSpec.legend?.show !== false;
   const colorEncoding = mapSpec.encoding.color;
+  const showChoroplethLegend = showLegend && colorEncoding?.legend !== null;
   const isQuantitative = colorEncoding?.type === "quantitative";
   const legendPosition = mapSpec.legend?.position === "bottom" ? "bottom" : "top";
+  const pointLegendOverlay = mapSpec.legend?.position === "top-left";
   let legendBlockHeight = 0;
   let continuousContent = null;
-  if (showLegend && colorEncoding && isQuantitative) {
+  if (showChoroplethLegend && colorEncoding && isQuantitative) {
     const colorValues = [];
     for (const row of mapSpec.data) {
       const v = row[colorEncoding.field];
@@ -17968,11 +17995,11 @@ function compileMap(spec, options) {
       const labelRowHeight = Math.ceil(theme.fonts.sizes.small * 1.3);
       legendBlockHeight = continuousContent.barHeight + CONTINUOUS_LABEL_GAP + labelRowHeight;
     }
-  } else if (showLegend && colorEncoding) {
+  } else if (showChoroplethLegend && colorEncoding) {
     const labelHeight = Math.ceil(theme.fonts.sizes.small * 1.3);
     legendBlockHeight = Math.max(10, labelHeight) + 6;
   }
-  if (showLegend && mapSpec.points?.color) {
+  if (showLegend && !pointLegendOverlay && mapSpec.points?.color) {
     if (mapSpec.points.color.type === "quantitative") {
       const labelRowHeight = Math.ceil(theme.fonts.sizes.small * 1.3);
       legendBlockHeight += CONTINUOUS_BAR_HEIGHT + CONTINUOUS_LABEL_GAP + labelRowHeight + 8;
@@ -17987,7 +18014,18 @@ function compileMap(spec, options) {
     return emptyLayout3(chrome, theme, options, watermark);
   }
   const projectionType = mapSpec.geo.projection;
-  const projection2 = createProjection(projectionType, fullArea.width, mapAreaHeight, geoCollection);
+  let pointInset = 0;
+  if (mapSpec.points) {
+    const sizeRange = mapSpec.points.size?.scale?.range;
+    pointInset = sizeRange ? sizeRange[1] : SIZE_SCALE_DEFAULTS.mapPoint.range[1];
+  }
+  const projection2 = createProjection(
+    projectionType,
+    fullArea.width,
+    mapAreaHeight,
+    geoCollection,
+    pointInset
+  );
   const pathGen = path_default(projection2);
   if (projectionType !== "identity") {
     for (const feat of geoFeatures) {
@@ -18047,7 +18085,7 @@ function compileMap(spec, options) {
       droppedFeatures
     });
     featureMarks = result.marks;
-    if (showLegend && continuousContent) {
+    if (showChoroplethLegend && continuousContent) {
       const labelStyle = {
         fontFamily: theme.fonts.family,
         fontSize: theme.fonts.sizes.small,
@@ -18098,7 +18136,7 @@ function compileMap(spec, options) {
       mapAreaHeight,
       legendReserveGap,
       legendPosition,
-      showLegend,
+      showLegend: showChoroplethLegend,
       droppedFeatures
     });
     featureMarks = result.marks;
@@ -18242,15 +18280,15 @@ function compileMap(spec, options) {
       }));
       const bottomChoroplethHeight = legendPosition === "bottom" ? continuousLegend?.bounds.height ?? categoricalLegend?.bounds.height ?? 0 : 0;
       const choroplethLegendGap = bottomChoroplethHeight > 0 ? 8 : 0;
-      const legendX = fullArea.x;
-      const legendY = fullArea.y + mapAreaHeight + legendReserveGap + bottomChoroplethHeight + choroplethLegendGap;
-      const legendWidth = fullArea.width;
+      const legendX = pointLegendOverlay ? fullArea.x + OVERLAY_LEGEND_INSET : fullArea.x;
+      const legendY = pointLegendOverlay ? fullArea.y + OVERLAY_LEGEND_INSET : fullArea.y + mapAreaHeight + legendReserveGap + bottomChoroplethHeight + choroplethLegendGap;
+      const legendWidth = pointLegendOverlay ? fullArea.width - OVERLAY_LEGEND_INSET * 2 : fullArea.width;
       const swatchSize = 10;
       const swatchGap = 6;
       const entryGap = 16;
       pointCategoricalLegend = {
         type: "categorical",
-        position: "bottom",
+        position: pointLegendOverlay ? "top-left" : "bottom",
         bounds: { x: legendX, y: legendY, width: legendWidth, height: swatchSize + 6 },
         labelStyle,
         entries,
@@ -18290,8 +18328,8 @@ function compileMap(spec, options) {
         };
         const bottomChoroplethH = legendPosition === "bottom" ? continuousLegend?.bounds.height ?? categoricalLegend?.bounds.height ?? 0 : 0;
         const choroplethLegendGap = bottomChoroplethH > 0 ? 8 : 0;
-        const legendX = fullArea.x;
-        const legendY = fullArea.y + mapAreaHeight + legendReserveGap + bottomChoroplethH + choroplethLegendGap;
+        const legendX = pointLegendOverlay ? fullArea.x + OVERLAY_LEGEND_INSET : fullArea.x;
+        const legendY = pointLegendOverlay ? fullArea.y + OVERLAY_LEGEND_INSET : fullArea.y + mapAreaHeight + legendReserveGap + bottomChoroplethH + choroplethLegendGap;
         const ptLabelRowHeight = Math.ceil(theme.fonts.sizes.small * 1.3);
         const ptLegendHeight = ptContinuousContent.barHeight + CONTINUOUS_LABEL_GAP + ptLabelRowHeight;
         const bounds = {
@@ -18309,7 +18347,7 @@ function compileMap(spec, options) {
         pointContinuousLegend = {
           type: "continuous",
           mode: ptContinuousContent.mode,
-          position: "bottom",
+          position: pointLegendOverlay ? "top-left" : "bottom",
           bounds,
           labelStyle,
           bar,
@@ -22795,6 +22833,38 @@ function applySparklineDefaults(spec, theme) {
   }
   return { ...spec, markDef: newMarkDef };
 }
+function resolveScaleInvert(resolved) {
+  if (!resolved) return void 0;
+  const { scale, type } = resolved;
+  if (type === "band" || type === "point") {
+    const domain = scale.domain();
+    const positions = domain.map((v) => {
+      const pos = scale(v) ?? 0;
+      return type === "band" ? pos + scale.bandwidth() / 2 : pos;
+    });
+    const range4 = scale.range();
+    return {
+      topPixel: range4[0],
+      bottomPixel: range4[range4.length - 1],
+      topData: 0,
+      bottomData: 0,
+      domain,
+      positions
+    };
+  }
+  const invert = scale.invert;
+  if (typeof invert !== "function") return void 0;
+  const range3 = scale.range();
+  const topPx = range3[0];
+  const bottomPx = range3[range3.length - 1];
+  const topVal = invert.call(scale, topPx);
+  const bottomVal = invert.call(scale, bottomPx);
+  const topData = topVal instanceof Date ? +topVal : Number(topVal);
+  const bottomData = bottomVal instanceof Date ? +bottomVal : Number(bottomVal);
+  if (!Number.isFinite(topData) || !Number.isFinite(bottomData)) return void 0;
+  const scaleType = type;
+  return { topPixel: topPx, bottomPixel: bottomPx, topData, bottomData, scaleType };
+}
 function compileChart(spec, optionsInput) {
   const sugarWarnings = [];
   const expandedSpec = spec && typeof spec === "object" && !Array.isArray(spec) ? expandSpecSugar(spec, sugarWarnings) : spec;
@@ -23160,6 +23230,8 @@ function compileChart(spec, optionsInput) {
   );
   assignAnimationIndices(marks, resolvedAnimation);
   const chrome = footnotes ? { ...dims.chrome, footnotes } : dims.chrome;
+  const xInvert = resolveScaleInvert(scales.x);
+  const yInvert = resolveScaleInvert(scales.y);
   return {
     area: chartArea,
     chrome,
@@ -23192,7 +23264,9 @@ function compileChart(spec, optionsInput) {
     watermark,
     display: chartSpec.display,
     crosshair,
-    measureText: options.measureText
+    measureText: options.measureText,
+    ...xInvert ? { xInvert } : {},
+    ...yInvert ? { yInvert } : {}
   };
 }
 function compileFaceted(chartSpec, renderSpec, facetChannel, options, theme, strategy, watermark, resolvedAnimation, crosshair, rawSpec, optionsInput) {