@bicharts/chart-host 0.6.60 → 0.6.62

package/dist/{chunk-5NSU3MYW.mjs → chunk-ZLJM3EIP.mjs}

@@ -2895,14 +2895,22 @@ function svgInkReach(svg) {
     const box = svg.getBoundingClientRect();
     if (!(box.width > 0) || !(box.height > 0)) return null;
     const els = svg.querySelectorAll(FIT_CONTENT_SELECTOR);
+    const clipOf = clipWindowReader(svg);
     let right = -Infinity, bottom = -Infinity, seen = 0;
     for (let i = 0; i < els.length && seen < FIT_WALK_CAP; i++) {
       const r2 = els[i].getBoundingClientRect();
       if (r2.width <= 0 && r2.height <= 0) continue;
       if (isPhantomBox(r2.width, r2.height, box.width, box.height)) continue;
+      let rr = r2.right, rb = r2.bottom;
+      const clip = clipOf(els[i]);
+      if (clip) {
+        if (r2.left >= clip.right || r2.top >= clip.bottom) continue;
+        rr = Math.min(rr, clip.right);
+        rb = Math.min(rb, clip.bottom);
+      }
       seen++;
-      if (r2.right > right) right = r2.right;
-      if (r2.bottom > bottom) bottom = r2.bottom;
+      if (rr > right) right = rr;
+      if (rb > bottom) bottom = rb;
     }
     if (seen === 0) return null;
     return { right: right - box.left, bottom: bottom - box.top };
@@ -2910,6 +2918,56 @@ function svgInkReach(svg) {
     return null;
   }
 }
+function clipWindowReader(svg) {
+  const own = /* @__PURE__ */ new Map();
+  const byId = (id) => {
+    try {
+      return svg.querySelector(`clipPath[id="${id.replace(/"/g, '\\"')}"]`);
+    } catch {
+      return null;
+    }
+  };
+  const windowOf = (el) => {
+    if (own.has(el)) return own.get(el);
+    let win = null;
+    try {
+      const ref = el.getAttribute("clip-path") || "";
+      const m4 = /url\(\s*['"]?#([^'")\s]+)['"]?\s*\)/.exec(ref);
+      const cp = m4 ? byId(m4[1]) : null;
+      const ctm = cp ? el.getScreenCTM?.() : null;
+      if (cp && ctm && cp.getAttribute("clipPathUnits") !== "objectBoundingBox") {
+        let r2 = -Infinity, b4 = -Infinity;
+        for (let i = 0; i < cp.children.length; i++) {
+          const bb = cp.children[i].getBBox?.();
+          if (!bb || !(bb.width > 0) || !(bb.height > 0)) continue;
+          for (const [x3, y2] of [
+            [bb.x, bb.y],
+            [bb.x + bb.width, bb.y],
+            [bb.x, bb.y + bb.height],
+            [bb.x + bb.width, bb.y + bb.height]
+          ]) {
+            const sx = ctm.a * x3 + ctm.c * y2 + ctm.e, sy = ctm.b * x3 + ctm.d * y2 + ctm.f;
+            if (sx > r2) r2 = sx;
+            if (sy > b4) b4 = sy;
+          }
+        }
+        if (isFinite(r2) && isFinite(b4)) win = { right: r2, bottom: b4 };
+      }
+    } catch {
+      win = null;
+    }
+    own.set(el, win);
+    return win;
+  };
+  return (el) => {
+    let acc = null;
+    for (let a3 = el; a3 && a3 !== svg; a3 = a3.parentElement) {
+      const w3 = windowOf(a3);
+      if (w3) acc = acc ? { right: Math.min(acc.right, w3.right), bottom: Math.min(acc.bottom, w3.bottom) } : w3;
+    }
+    return acc;
+  };
+}
 function measureContainerBoxes(c2, inkOf) {
   const boxes = [];
   if (!c2 || !c2.children) return boxes;
@@ -3772,6 +3830,47 @@ function applyLabelContrast(container, opts = {}) {
   }
 }
 
+// src/idScope.ts
+var seq = 0;
+function newIdScope() {
+  seq += 1;
+  return "h" + seq;
+}
+var URL_REF = /url\(\s*(['"]?)#([^'")\s]+)\1\s*\)/g;
+function scopeChartIds(container, scope) {
+  const report = { renamed: 0, collisions: [] };
+  try {
+    const tag = "--" + scope, doc = container.ownerDocument, map = /* @__PURE__ */ new Map();
+    const refs = [], used = /* @__PURE__ */ new Set();
+    container.querySelectorAll("*").forEach((el) => {
+      for (const a3 of el.getAttributeNames()) {
+        const v = el.getAttribute(a3);
+        const href = (a3 === "href" || a3 === "xlink:href") && v[0] === "#";
+        if (!href && v.indexOf("url(") < 0) continue;
+        refs.push([el, a3, v]);
+        if (href) used.add(v.slice(1));
+        for (const m4 of v.matchAll(URL_REF)) used.add(m4[2]);
+      }
+    });
+    container.querySelectorAll("[id]").forEach((el) => {
+      const id = el.id;
+      if (!used.has(id) || id.endsWith(tag) || id.startsWith("bic-")) return;
+      const q2 = id.replace(/["\\]/g, "\\$&");
+      if (doc && Array.from(doc.querySelectorAll(`[id="${q2}"],[id^="${q2}--h"]`)).some((o4) => !container.contains(o4))) {
+        report.collisions.push(id);
+      }
+      map.set(id, el.id = id + tag);
+      report.renamed++;
+    });
+    for (const [el, a3, v] of refs) {
+      const nv = v[0] === "#" && map.has(v.slice(1)) ? "#" + map.get(v.slice(1)) : v.replace(URL_REF, (m4, q2, id) => map.has(id) ? `url(${q2}#${map.get(id)}${q2})` : m4);
+      if (nv !== v) el.setAttribute(a3, nv);
+    }
+  } catch {
+  }
+  return report;
+}
+
 // src/invalidSentinel.ts
 function isInvalidSentinelError(text2) {
   if (!text2) return false;
@@ -4078,6 +4177,8 @@ function createChartHost(container, config) {
   let destroyed = false;
   let warnedGeo = false;
   let warnedBlank = false;
+  let warnedIds = false;
+  const idScope = newIdScope();
   let renderSeq = 0;
   const annotationLayer = createAnnotationLayer(container, (a3) => config.onAnnotationClick?.(a3));
   const drawAnnotations = () => annotationLayer.draw(
@@ -4249,6 +4350,20 @@ function createChartHost(container, config) {
     }
   };
   const runPostRenderPasses = () => {
+    try {
+      const r2 = scopeChartIds(container, idScope);
+      if (r2.collisions.length && !warnedIds) {
+        warnedIds = true;
+        try {
+          (win?.console ?? console)?.warn(
+            `[@bicharts/chart-host] this chart named ${r2.collisions.length} id(s) another element on the page already uses (${r2.collisions.slice(0, 5).join(", ")}). They were scoped to this chart, so its clip paths and gradients resolve to its own definitions.`
+          );
+        } catch {
+        }
+      }
+      config.onIdScope?.(r2);
+    } catch {
+    }
     if (labelContrastOpts !== false) {
       try {
         const lc = labelContrastOpts === true ? {} : { ...labelContrastOpts };
@@ -4328,7 +4443,7 @@ function createChartHost(container, config) {
   const host = {
     render() {
       if (destroyed) return;
-      const seq = ++renderSeq;
+      const seq2 = ++renderSeq;
       stopAnim();
       container.innerHTML = "";
       if (!renderFn) {
@@ -4381,7 +4496,7 @@ function createChartHost(container, config) {
         };
         Promise.resolve(outcome).then(
           () => done(() => {
-            if (destroyed || seq !== renderSeq) {
+            if (destroyed || seq2 !== renderSeq) {
               resolve();
               return;
             }
@@ -4389,7 +4504,7 @@ function createChartHost(container, config) {
             resolve();
           }),
           (err) => done(() => {
-            if (destroyed || seq !== renderSeq) {
+            if (destroyed || seq2 !== renderSeq) {
               resolve();
               return;
             }
@@ -4715,6 +4830,8 @@ export {
   LABEL_CONTRAST_CAP,
   LABEL_PILL_CLASS,
   applyLabelContrast,
+  newIdScope,
+  scopeChartIds,
   isInvalidSentinelError,
   invalidSentinelReason,
   ANNOTATION_LAYER_CLASS,

package/dist/index.mjs

@@ -91,6 +91,7 @@ import {
   measureContainerBoxes,
   minContrastOver,
   needsScroll,
+  newIdScope,
   nextSelection,
   noopViewStateProvider,
   o,
@@ -108,6 +109,7 @@ import {
   resolveAutoColorScale,
   resolveOptions,
   rowIdxsFromMark,
+  scopeChartIds,
   scrollFitFor,
   sessionViewStateProvider,
   straddleSampleGrid,
@@ -120,7 +122,7 @@ import {
   toSourceRows,
   unpinScrolledAxis,
   valuePlacementFlag
-} from "./chunk-5NSU3MYW.mjs";
+} from "./chunk-ZLJM3EIP.mjs";
 import "./chunk-A2GMXZP7.mjs";
 import {
   ACTIVE_TICK_CLASS,
@@ -3008,6 +3010,7 @@ export {
   minContrastOver,
   mountProductFeedbackBox,
   needsScroll,
+  newIdScope,
   newQualifyGroupState,
   newQualifyRefusalGroupState,
   nextSelection,
@@ -3058,6 +3061,7 @@ export {
   resolveOptions,
   rowIdxsFromMark,
   sameMarker,
+  scopeChartIds,
   scrollFitFor,
   servedCorrelationProves,
   sessionViewStateProvider,

package/dist/react.mjs

@@ -22,7 +22,7 @@ import {
   loadGeo,
   syncMemberSelection,
   toSourceRows
-} from "./chunk-5NSU3MYW.mjs";
+} from "./chunk-ZLJM3EIP.mjs";
 import "./chunk-A2GMXZP7.mjs";
 import "./chunk-WNGJUPEI.mjs";
 import "./chunk-GHODWOAL.mjs";

package/dist/types/host.d.ts

@@ -6,6 +6,7 @@ import { type ColourSpreadCensus } from "./colourSpread";
 import { type ValuePlacementCensus } from "./valuePlacement";
 import { type FitRenderedChartOptions, type FitRenderedChartResult } from "./fitDom";
 import { type LabelContrastOptions, type LabelContrastReport } from "./labelContrastDom";
+import { type IdScopeReport } from "./idScope";
 import { type MarkAnnotation, type AnnotationReport } from "./annotations";
 export type RenderFn = (container: HTMLElement, data: any, options: RenderOptions) => void;
 /**
@@ -166,6 +167,11 @@ export interface ChartHostConfig {
     labelContrast?: boolean | LabelContrastOptions;
     /** What the label-contrast pass did after each render - counts, so a host can log them. */
     onLabelContrast?: (report: LabelContrastReport) => void;
+    /**
+     * What the id-scoping pass did after each render: how many of the chart's ids got this host's suffix, and which
+     * of them also existed elsewhere in the page (a clash it prevented - two same-size charts naming one clip path).
+     */
+    onIdScope?: (report: IdScopeReport) => void;
     /**
      * THE CHART SAID THE DATA LACKS SOMETHING IT IS BUILT ON. Generated code has one sanctioned
      * hard stop at runtime: a column the chart needs is gone from `data.columns`, and it throws

package/dist/types/idScope.d.ts

@@ -0,0 +1,9 @@
+/** A fresh suffix for one chart host. Unique within the page for the page's lifetime. */
+export declare function newIdScope(): string;
+export interface IdScopeReport {
+    /** How many ids were given the suffix. */
+    renamed: number;
+    /** Ids that also existed outside this chart when the pass ran - each one a clash this pass prevented. */
+    collisions: string[];
+}
+export declare function scopeChartIds(container: Element, scope: string): IdScopeReport;

package/dist/types/index.d.ts

@@ -27,6 +27,7 @@ export { formatSourceDate, formatSourceDateFor, isExcelDateFormat, type SourceFo
 export { composeSummaryText } from "./summaryText";
 export { ensureCrossfilterHitTargets, type HitTargetReport } from "./hitTargets";
 export { applyLabelContrast, LABEL_CONTRAST_DONE_ATTR, LABEL_CONTRAST_CAP, LABEL_PILL_CLASS, type LabelContrastOptions, type LabelContrastReport, } from "./labelContrastDom";
+export { scopeChartIds, newIdScope, type IdScopeReport } from "./idScope";
 export { decideLabelColor, toRGBA, compositeOver, relativeLuminance, contrastRatio, isPillBackdropAlpha, pillBacksGlyph, backingHoldsGlyph, cellSuppressesNormalize, glyphSampleGrid, DARK_TEXT, LIGHT_TEXT, MIN_CONTRAST, WHITE_TEXT_BG_LUM, PILL_MIN_ALPHA, PILL_OPAQUE_ALPHA, PILL_MIN_COVERAGE, PAGE_MATCH_TOLERANCE, BACKING_MAJORITY, GLYPH_SAMPLE_N, straddles, straddleSampleGrid, minContrastOver, pickColorOver, STRADDLE_COLS, STRADDLE_ROWS, STRADDLE_MIN_SHARE, STRADDLE_TARGET_CONTRAST, STRADDLE_PILL_ALPHA, type LabelDecision, } from "./labelContrast";
 export { censusMarks, isBlankRender, blankRenderFlag, type MarkCensus, type BlankVerdictInput } from "./blankRender";
 export { isInvalidSentinelError, invalidSentinelReason } from "./invalidSentinel";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bicharts/chart-host",
-  "version": "0.6.60",
+  "version": "0.6.62",
   "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",