@opendata-ai/openchart-vanilla 8.4.0 → 8.4.1

package/dist/{chunk-LNPRDSK3.js → chunk-3UIUANPI.js}

@@ -3,7 +3,7 @@ import {
   renderChromeElement,
   renderLegend,
   stampAnimationVars
-} from "./chunk-YGYMB7KB.js";
+} from "./chunk-KANNWAEA.js";
 
 // src/tilemap-renderer.ts
 var SVG_NS = "http://www.w3.org/2000/svg";
@@ -327,4 +327,4 @@ function renderTileMapSVG(layout, opts) {
 export {
   renderTileMapSVG
 };
-//# sourceMappingURL=chunk-LNPRDSK3.js.map
+//# sourceMappingURL=chunk-3UIUANPI.js.map

package/dist/{chunk-45XZOWYC.js → chunk-5A2NLYUW.js}

@@ -4,9 +4,10 @@ import {
   exportPNG,
   exportSVG,
   exportSVGWithFonts
-} from "./chunk-UOB422LY.js";
+} from "./chunk-6B5OBGIO.js";
 import {
   buildGradientDefs,
+  buildPatternDefs,
   nextSvgId,
   rectPathWithCorners,
   renderChartSVG,
@@ -14,13 +15,16 @@ import {
   renderLegend,
   renderSingleMark,
   resolveMarkFill,
-  stampAnimationVars
-} from "./chunk-YGYMB7KB.js";
+  resolvePatternFill,
+  resolvedSurface,
+  stampAnimationVars,
+  stampThemeProperties
+} from "./chunk-KANNWAEA.js";
 import {
   SVG_NS,
   createSVGElement,
   setAttrs
-} from "./chunk-HGRNXLDF.js";
+} from "./chunk-5RX6ZQGZ.js";
 
 // src/resize-observer.ts
 var DEBOUNCE_MS = 16;
@@ -3564,7 +3568,7 @@ function createYouDrawIt(options) {
 }
 
 // src/mount.ts
-import { cssTokenDefault as cssTokenDefault2, isGraphSpec, isLayerSpec } from "@opendata-ai/openchart-core";
+import { cssTokenDefault, isGraphSpec, isLayerSpec } from "@opendata-ai/openchart-core";
 import {
   compileChart,
   compileLayer,
@@ -6036,64 +6040,11 @@ function createSeriesSearch(options) {
   };
 }
 
-// src/theme-tokens.ts
-import { adaptForLightLineStroke, cssTokenDefault } from "@opendata-ai/openchart-core";
-function resolvedSurface(theme) {
-  return theme.colors.neutral.surface;
-}
-function stampThemeProperties(el, theme) {
-  const accent = theme.colors.categorical[0] ?? cssTokenDefault("--oc-accent", "light");
-  const bg = resolvedSurface(theme);
-  const n = theme.colors.neutral;
-  const props = [
-    ["--oc-font-family", theme.fonts.family],
-    ["--oc-font-mono", theme.fonts.mono],
-    ["--oc-title-size", `${theme.chrome.title.fontSize}px`],
-    ["--oc-title-weight", `${theme.chrome.title.fontWeight}`],
-    ["--oc-subtitle-size", `${theme.chrome.subtitle.fontSize}px`],
-    ["--oc-subtitle-weight", `${theme.chrome.subtitle.fontWeight}`],
-    ["--oc-source-size", `${theme.chrome.source.fontSize}px`],
-    ["--oc-source-weight", `${theme.chrome.source.fontWeight}`],
-    ["--oc-body-size", `${theme.fonts.sizes.body}px`],
-    ["--oc-eyebrow-size", `${theme.chrome.eyebrow.fontSize}px`],
-    ["--oc-eyebrow-weight", `${theme.chrome.eyebrow.fontWeight}`],
-    ["--oc-bg", bg],
-    ["--oc-text", theme.colors.text],
-    ["--oc-text-muted", theme.colors.axis],
-    // Secondary grays are derived from the theme's own text/background pair
-    // (ResolvedTheme.colors.neutral), so a warm or cool theme gets warm or
-    // cool grays instead of zinc. One direction only: theme -> CSS.
-    ["--oc-text-secondary", n.secondary],
-    ["--oc-text-faint", n.faint],
-    ["--oc-border", n.border],
-    ["--oc-gray-100", n[100]],
-    ["--oc-gray-200", n[200]],
-    ["--oc-gray-300", n[300]],
-    ["--oc-gray-400", n[400]],
-    ["--oc-gray-600", n[600]],
-    ["--oc-gray-800", n[800]],
-    ["--oc-gridline", theme.colors.gridline],
-    // --oc-axis is the hairline the axis line is drawn with, not the ink its
-    // tick labels take (that is --oc-text-muted, above).
-    ["--oc-axis", theme.colors.hairline],
-    ["--oc-border-radius", `${theme.borderRadius}px`],
-    ["--oc-accent", accent],
-    ["--oc-accent-strong", adaptForLightLineStroke(accent)],
-    ["--oc-positive", theme.colors.positive],
-    ["--oc-negative", theme.colors.negative],
-    ["--oc-space-2", `${theme.spacing.chromeGap * 2}px`],
-    ["--oc-space-4", `${theme.spacing.padding}px`]
-  ];
-  for (const [name, value] of props) {
-    el.style.setProperty(name, value);
-  }
-}
-
 // src/mount.ts
 var FALLBACK_HEIGHT = 400;
 var EDITABLE_HOVER_CSS = `
 .oc-editable-hover {
-  outline: 1.5px solid ${cssTokenDefault2("--oc-editable-hover", "light")};
+  outline: 1.5px solid ${cssTokenDefault("--oc-editable-hover", "light")};
   outline-offset: 2px;
   border-radius: 2px;
 }
@@ -7411,7 +7362,7 @@ function renderBorders(parent, borders) {
   }
   parent.appendChild(g);
 }
-function renderFeatures(parent, features, animation, staggerBudget = 0, focusIds) {
+function renderFeatures(parent, features, animation, staggerBudget = 0, focusIds, patternMap) {
   const g = createSVGElement2("g");
   g.setAttribute("class", "oc-map-features");
   g.setAttribute("role", "list");
@@ -7440,13 +7391,17 @@ function renderFeatures(parent, features, animation, staggerBudget = 0, focusIds
     const path = createSVGElement2("path");
     path.setAttribute("class", "oc-map-feature");
     path.setAttribute("role", "listitem");
+    const fill = feature.pattern && patternMap ? resolvePatternFill(feature.pattern, patternMap) : feature.fill;
     setAttrs2(path, {
       d: feature.path,
-      fill: feature.fill,
+      fill,
       stroke: feature.stroke,
       "stroke-width": feature.strokeWidth
     });
     path.setAttribute("data-feature-id", String(feature.id));
+    if (feature.noData) {
+      path.setAttribute("data-nodata", "true");
+    }
     path.setAttribute("data-key", String(feature.id));
     if (feature.binIndex !== void 0) {
       path.setAttribute("data-bin-index", String(feature.binIndex));
@@ -7466,7 +7421,7 @@ function renderFeatures(parent, features, animation, staggerBudget = 0, focusIds
       const idx = feature.animationIndex ?? i;
       path.setAttribute("data-animation-index", String(idx));
       s.setProperty("--oc-mark-index", String(idx));
-      s.setProperty("--oc-feature-fill", feature.fill);
+      s.setProperty("--oc-feature-fill", fill);
       if (dimmed) {
         s.setProperty("--oc-feature-target-opacity", String(FOCUS_DIM_OPACITY));
       }
@@ -7539,6 +7494,8 @@ function renderMapSVG(layout, opts) {
   }
   const defs = createSVGElement2("defs");
   svg.appendChild(defs);
+  const noDataSwatch = layout.continuousLegend?.noData ?? layout.categoricalLegend?.noData;
+  const patternMap = buildPatternDefs(noDataSwatch ? [...features, noDataSwatch] : features, defs);
   const mapGroup = createSVGElement2("g");
   mapGroup.setAttribute("class", "oc-map-group");
   mapGroup.setAttribute("transform", `translate(${layout.area.x},${layout.area.y})`);
@@ -7551,7 +7508,8 @@ function renderMapSVG(layout, opts) {
     features,
     animate ? animation : void 0,
     mapStaggerBudget,
-    focusIdSet
+    focusIdSet,
+    patternMap
   );
   renderBorders(cameraGroup, borders);
   if (animate && animation?.enter && layout.pointMarks.length > 1) {
@@ -7564,9 +7522,23 @@ function renderMapSVG(layout, opts) {
   svg.appendChild(mapGroup);
   renderChrome(svg, layout);
   if (layout.continuousLegend) {
-    renderLegend(svg, layout.continuousLegend);
+    const contNoData = layout.continuousLegend.noData;
+    renderLegend(
+      svg,
+      contNoData?.pattern ? {
+        ...layout.continuousLegend,
+        noData: { ...contNoData, fill: resolvePatternFill(contNoData.pattern, patternMap) }
+      } : layout.continuousLegend
+    );
   } else if (layout.categoricalLegend) {
-    renderLegend(svg, layout.categoricalLegend);
+    const catNoData = layout.categoricalLegend.noData;
+    renderLegend(
+      svg,
+      catNoData?.pattern ? {
+        ...layout.categoricalLegend,
+        noData: { ...catNoData, fill: resolvePatternFill(catNoData.pattern, patternMap) }
+      } : layout.categoricalLegend
+    );
   }
   const ptLegend = layout.pointCategoricalLegend ?? layout.pointContinuousLegend;
   if (ptLegend) {
@@ -8321,7 +8293,6 @@ export {
   prefersReducedMotion,
   createTween,
   createTextEditOverlay,
-  resolvedSurface,
   DEFAULT_UPDATE_MAX_MARKS,
   CANVAS_DEFAULT_UPDATE_MAX_MARKS,
   canTransitionSpecShape,
@@ -8340,4 +8311,4 @@ export {
   scrubCamera,
   createGeoMap
 };
-//# sourceMappingURL=chunk-45XZOWYC.js.map
+//# sourceMappingURL=chunk-5A2NLYUW.js.map