@bicharts/chart-host 0.5.116 → 0.5.118

package/dist/{chunk-W5XDW6OK.mjs → chunk-2UU3N4AG.mjs}

@@ -3165,11 +3165,26 @@ var D3_PLUGIN_PACKAGES = {
   hexbin: "d3-hexbin",
   voronoiTreemap: "d3-voronoi-treemap",
   voronoiMap: "d3-voronoi-map",
-  weightedVoronoi: "d3-weighted-voronoi"
+  weightedVoronoi: "d3-weighted-voronoi",
+  // Attached onto d3 like the rest, but reached as d3.mermaid.render(...) — a NAMESPACE
+  // OBJECT with methods, not a function on d3. The scan below accounts for that shape.
+  mermaid: "mermaid",
+  // AND THE NAME A REAL CHART ACTUALLY WRITES. This one is not a member of the mermaid
+  // package at all: it is a helper the SERVER prepends into the generated code, and the
+  // helper is what reaches for the library. So a genuine diagram chart contains
+  // `d3.llmMermaid(` and never once writes `d3.mermaid` — measured on the first real
+  // generation of that type, for which this scan returned an EMPTY list. It drew, because
+  // the host it ran in happened to carry the library; a host relying on this answer to
+  // decide what to install would have been told nothing and failed several frames deep.
+  //
+  // Mapping the helper is right rather than a hack, because this map answers "what must a
+  // host INSTALL for this code to run" and not "which package exports this symbol". For
+  // code that calls the helper, the answer is the library the helper reaches for.
+  llmMermaid: "mermaid"
 };
 function requiredD3Plugins(code) {
   const out = /* @__PURE__ */ new Set();
-  for (const m2 of String(code || "").matchAll(/\bd3\s*\.\s*(\w+)\s*\(/g)) {
+  for (const m2 of String(code || "").matchAll(/\bd3\s*\.\s*(\w+)\s*[.(]/g)) {
     const pkg = D3_PLUGIN_PACKAGES[m2[1]];
     if (pkg) out.add(pkg);
   }
@@ -3182,6 +3197,11 @@ function explainRenderFailure(err, d3) {
       "[@bicharts/chart-host] no d3 was provided, so the generated chart could not run. Pass it explicitly \u2014 createChartHost(el, { d3 }) / <BicChart d3={d3} /> \u2014 or set window.d3. The chart needs D3 v7 (npm install d3@7). Original error: " + msg
     );
   }
+  if (typeof d3?.mermaid?.render !== "function" && /\bmermaid\b/i.test(msg)) {
+    return new Error(
+      "[@bicharts/chart-host] this chart draws its diagram with Mermaid, which it reaches as d3.mermaid.render(...), and the d3 you passed has no mermaid on it \u2014 this host did not load the library. A host supplies it exactly the way the other plugins are supplied: attach it onto the SAME d3 instance you hand to createChartHost \u2014  npm install mermaid  then  import mermaid from 'mermaid'; Object.assign(d3, { mermaid });  Original error: " + msg
+    );
+  }
   const m2 = /d3\.(\w+) is not a function|(\w+) is not a function/.exec(msg);
   const name = m2?.[1] ?? m2?.[2] ?? "";
   const pkg = D3_PLUGIN_PACKAGES[name];
@@ -3218,6 +3238,8 @@ function compileRenderFn(code, win, doc, d3) {
   if (typeof fn !== "function") throw new Error("generated code did not define render(container, data, options)");
   return fn;
 }
+var ASYNC_RENDER_TIMEOUT_MS = 15e3;
+var isThenable = (v3) => !!v3 && (typeof v3 === "object" || typeof v3 === "function") && typeof v3.then === "function";
 function createChartHost(container, config) {
   const doc = container.ownerDocument;
   const win = doc?.defaultView ?? globalThis;
@@ -3264,6 +3286,13 @@ function createChartHost(container, config) {
   let destroyed = false;
   let warnedGeo = false;
   let warnedBlank = false;
+  let renderSeq = 0;
+  let renderedPromise = Promise.resolve();
+  const settle = (p2) => {
+    renderedPromise = p2;
+    p2.catch(() => {
+    });
+  };
   let current = null;
   let activeTickEl = null;
   let selectionIsPeriod = false;
@@ -3423,9 +3452,82 @@ function createChartHost(container, config) {
       }
     }
   };
+  const runPostRenderPasses = () => {
+    if (labelContrastOpts !== false) {
+      try {
+        const lc = labelContrastOpts === true ? {} : { ...labelContrastOpts };
+        if (!lc.pageBg) {
+          const bg = resolved.backgroundColor ?? resolved.themeBg;
+          if (typeof bg === "string" && bg) lc.pageBg = bg;
+        }
+        const r = applyLabelContrast(container, lc);
+        config.onLabelContrast?.(r);
+      } catch {
+      }
+    }
+    ensureCrossfilterHitTargets(container, doc);
+    paintSelection();
+    try {
+      const census = censusMarks(container);
+      if (isBlankRender({
+        markCount: census.markCount,
+        rows: data.rows ? data.rows.length : 0,
+        animated: config.animated,
+        contractUntagged: config.contractUntagged
+      })) {
+        if (!warnedBlank) {
+          warnedBlank = true;
+          try {
+            (win?.console ?? console)?.warn(
+              `[@bicharts/chart-host] this chart rendered without error but painted no data marks, against ${data.rows.length} row(s) \u2014 so the container is empty. The usual cause is that the generated code binds a column BY NAME that is no longer in the data, sending it down its own "no data" branch. Check that the columns in your table still match the ones the chart was generated for.`
+            );
+          } catch {
+          }
+        }
+        config.onBlankRender?.({ census, rows: data.rows ? data.rows.length : 0 });
+      }
+    } catch {
+    }
+    if (config.onHitBandCensus) {
+      try {
+        config.onHitBandCensus(censusHitBands(container, doc));
+      } catch {
+      }
+    }
+    if (config.onColourSpreadCensus) {
+      try {
+        config.onColourSpreadCensus(censusColourSpread(container, doc));
+      } catch {
+      }
+    }
+    if (config.onValuePlacementCensus) {
+      try {
+        config.onValuePlacementCensus(censusValuePlacement(container, data));
+      } catch {
+      }
+    }
+    if (fitOpts !== false) {
+      try {
+        const r = fitRenderedChart(container, fitOpts === true ? {} : fitOpts);
+        config.onFit?.(r);
+      } catch {
+      }
+    }
+  };
+  const renderFailure = (err) => {
+    const message = String(err?.message ?? err ?? "");
+    if (config.onInvalidSentinel && isInvalidSentinelError(message)) {
+      stopAnim();
+      container.innerHTML = "";
+      config.onInvalidSentinel({ reason: invalidSentinelReason(message), message });
+      return null;
+    }
+    return explainRenderFailure(err, d3);
+  };
   const host = {
     render() {
       if (destroyed) return;
+      const seq = ++renderSeq;
       stopAnim();
       container.innerHTML = "";
       if (!renderFn) {
@@ -3449,78 +3551,53 @@ function createChartHost(container, config) {
       if (resolved.geoPoint === void 0 && data.geoPoint) resolved = { ...resolved, geoPoint: data.geoPoint };
       if (resolved.geoPointDest === void 0 && data.geoPointDest) resolved = { ...resolved, geoPointDest: data.geoPointDest };
       if (resolved.dateCellsAreUtcDays === void 0 && data.dateCellsAreUtcDays) resolved = { ...resolved, dateCellsAreUtcDays: true };
+      let outcome;
       try {
-        renderFn(container, { columns: data.columns, rows: data.rows }, resolved);
+        outcome = renderFn(container, { columns: data.columns, rows: data.rows }, resolved);
       } catch (err) {
-        const message = String(err?.message ?? err ?? "");
-        if (config.onInvalidSentinel && isInvalidSentinelError(message)) {
-          stopAnim();
-          container.innerHTML = "";
-          config.onInvalidSentinel({ reason: invalidSentinelReason(message), message });
-          return;
+        const fatal = renderFailure(err);
+        if (fatal) {
+          settle(Promise.reject(fatal));
+          throw fatal;
         }
-        throw explainRenderFailure(err, d3);
+        settle(Promise.resolve());
+        return;
       }
-      if (labelContrastOpts !== false) {
-        try {
-          const lc = labelContrastOpts === true ? {} : { ...labelContrastOpts };
-          if (!lc.pageBg) {
-            const bg = resolved.backgroundColor ?? resolved.themeBg;
-            if (typeof bg === "string" && bg) lc.pageBg = bg;
-          }
-          const r = applyLabelContrast(container, lc);
-          config.onLabelContrast?.(r);
-        } catch {
-        }
+      if (!isThenable(outcome)) {
+        runPostRenderPasses();
+        settle(Promise.resolve());
+        return;
       }
-      ensureCrossfilterHitTargets(container, doc);
-      paintSelection();
-      try {
-        const census = censusMarks(container);
-        if (isBlankRender({
-          markCount: census.markCount,
-          rows: data.rows ? data.rows.length : 0,
-          animated: config.animated,
-          contractUntagged: config.contractUntagged
-        })) {
-          if (!warnedBlank) {
-            warnedBlank = true;
-            try {
-              (win?.console ?? console)?.warn(
-                `[@bicharts/chart-host] this chart rendered without error but painted no data marks, against ${data.rows.length} row(s) \u2014 so the container is empty. The usual cause is that the generated code binds a column BY NAME that is no longer in the data, sending it down its own "no data" branch. Check that the columns in your table still match the ones the chart was generated for.`
-              );
-            } catch {
+      settle(new Promise((resolve, reject) => {
+        const timer = setTimeout(() => {
+          reject(new Error(
+            `[@bicharts/chart-host] the chart did not finish drawing within ${Math.round(ASYNC_RENDER_TIMEOUT_MS / 1e3)}s, so the host stopped waiting for it. Nothing past that point ran: no label-contrast pass, no hit-target heal, no census, no fit. A render() that returns a promise has to settle it.`
+          ));
+        }, ASYNC_RENDER_TIMEOUT_MS);
+        const done = (fn) => {
+          clearTimeout(timer);
+          fn();
+        };
+        Promise.resolve(outcome).then(
+          () => done(() => {
+            if (destroyed || seq !== renderSeq) {
+              resolve();
+              return;
             }
-          }
-          config.onBlankRender?.({ census, rows: data.rows ? data.rows.length : 0 });
-        }
-      } catch {
-      }
-      if (config.onHitBandCensus) {
-        try {
-          config.onHitBandCensus(censusHitBands(container, doc));
-        } catch {
-        }
-      }
-      if (config.onColourSpreadCensus) {
-        try {
-          config.onColourSpreadCensus(censusColourSpread(container, doc));
-        } catch {
-        }
-      }
-      if (config.onValuePlacementCensus) {
-        try {
-          config.onValuePlacementCensus(censusValuePlacement(container, data));
-        } catch {
-        }
-      }
-      if (fitOpts !== false) {
-        try {
-          const r = fitRenderedChart(container, fitOpts === true ? {} : fitOpts);
-          config.onFit?.(r);
-        } catch {
-        }
-      }
+            runPostRenderPasses();
+            resolve();
+          }),
+          (err) => done(() => {
+            if (destroyed || seq !== renderSeq) {
+              resolve();
+              return;
+            }
+            const fatal = renderFailure(err);
+            if (fatal) reject(fatal);
+            else resolve();
+          })
+        );
+      }));
     },
     setOptions(partial) {
       raw = { ...raw, ...partial };
@@ -3534,6 +3611,11 @@ function createChartHost(container, config) {
     get options() {
       return resolved;
     },
+    // A GETTER, not a captured value: `rendered` names the LATEST render, so a host that
+    // read it once would otherwise hold the promise of a draw long since replaced.
+    get rendered() {
+      return renderedPromise;
+    },
     selection: {
       onChange(cb) {
         subs.add(cb);

package/dist/index.mjs

@@ -130,7 +130,7 @@ import {
   toRGBA,
   unpinScrolledAxis,
   valuePlacementFlag
-} from "./chunk-W5XDW6OK.mjs";
+} from "./chunk-2UU3N4AG.mjs";
 import "./chunk-A2GMXZP7.mjs";
 import "./chunk-GHODWOAL.mjs";
 

package/dist/react.mjs

@@ -4,7 +4,7 @@ import {
   createChartHost,
   geoFromCache,
   loadGeo
-} from "./chunk-W5XDW6OK.mjs";
+} from "./chunk-2UU3N4AG.mjs";
 import "./chunk-A2GMXZP7.mjs";
 import "./chunk-GHODWOAL.mjs";
 

package/dist/types/host.d.ts

@@ -184,6 +184,20 @@ export interface ChartHostConfig {
 }
 export interface ChartHost {
     render(): void;
+    /**
+     * THE LAST RENDER, SETTLED. render() stays synchronous — it returns nothing, exactly as it
+     * always has — but a generated chart whose drawing library has no synchronous API returns a
+     * PROMISE from its own render(), and every post-render pass (label contrast, hit-target
+     * heal, census, fit) has to wait for that before it measures anything. This is how a caller
+     * waits for the same moment: it resolves once those passes have run, and rejects with the
+     * error render() would have thrown had the chart drawn synchronously.
+     *
+     * On a synchronous chart it is an ALREADY-RESOLVED promise, so awaiting it is free and
+     * correct for both kinds and a host needs no test for which it has. Replaced on every
+     * render(), so read it after the render() whose finish you mean; when renders overlap, the
+     * LAST one wins and the superseded one settles without touching the chart.
+     */
+    readonly rendered: Promise<void>;
     /** Merge raw option changes and re-render — the live-restyle path (colour scale,
      *  aggregation, animMaxIdealFrames, timeline style…). Never a regeneration. */
     setOptions(partial: ResolveOptionsInput): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bicharts/chart-host",
-  "version": "0.5.116",
+  "version": "0.5.118",
   "description": "Run a BIC-generated D3 chart in any web host: compiles the generated render() function, applies the shared option defaults, resolves mark clicks (through tooltip overlays), owns the selection affordance, and translates row indices between cross-filtered charts. The same contract the BIC Power BI visual implements, minus Power BI. React bindings at @bicharts/chart-host/react.",
   "license": "Apache-2.0",
   "type": "module",