@bicharts/chart-host 0.6.61 → 0.6.62

package/dist/{chunk-Q6AGV652.mjs → chunk-ZLJM3EIP.mjs}

@@ -3830,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;
@@ -4136,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(
@@ -4307,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 };
@@ -4386,7 +4443,7 @@ function createChartHost(container, config) {
   const host = {
     render() {
       if (destroyed) return;
-      const seq = ++renderSeq;
+      const seq2 = ++renderSeq;
       stopAnim();
       container.innerHTML = "";
       if (!renderFn) {
@@ -4439,7 +4496,7 @@ function createChartHost(container, config) {
         };
         Promise.resolve(outcome).then(
           () => done(() => {
-            if (destroyed || seq !== renderSeq) {
+            if (destroyed || seq2 !== renderSeq) {
               resolve();
               return;
             }
@@ -4447,7 +4504,7 @@ function createChartHost(container, config) {
             resolve();
           }),
           (err) => done(() => {
-            if (destroyed || seq !== renderSeq) {
+            if (destroyed || seq2 !== renderSeq) {
               resolve();
               return;
             }
@@ -4773,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-Q6AGV652.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-Q6AGV652.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.61",
+  "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",