@bicharts/chart-host 0.6.87 → 0.6.88

package/README.md

@@ -267,6 +267,16 @@ would show its selected lines at 38%, which the eye reads as dimmed. Such a char
 painted at full opacity. Undeclared charts are unchanged, so alpha used as an encoding (a depth
 cue, a hierarchy level) is never flattened by a fix meant for another chart.
 
+**How far the rest dims, per chart.** `options.dimOpacity` (a share of full opacity, `0.01`-`1`;
+`DIM_OPACITY_MIN` is the floor) sets the level for one host without writing CSS, and it is live
+through `setOptions`. The host writes it as `--lch-dim-opacity` on its own container and removes
+only what it wrote, so with the option absent nothing is written and the CSS above decides: the
+stylesheet's `0.25`, or whatever your page sets on the variable.
+
+```js
+createChartHost(el, { code, data, options: { dimOpacity: 0.15 } });
+```
+
 **Which marks count as selected.** By default a mark is selected when *any* of the rows in its
 `data-row-idx` list is selected, which is what lights a legend swatch together with its series. A
 chart whose marks share rows declares the other rule by stamping

package/dist/adapters.mjs

@@ -3,7 +3,7 @@ import {
   censusHitBands,
   ensureCrossfilterHitTargets,
   hitBandFlag
-} from "./chunk-7HKVV5T5.mjs";
+} from "./chunk-XNS34AMM.mjs";
 import {
   clickWasDrag,
   collectD3GlyphCenters,
@@ -12,13 +12,13 @@ import {
   markKeyOf,
   rowIdxsFromMark,
   selectionRuleOf
-} from "./chunk-IURROJT7.mjs";
+} from "./chunk-IUXNCX7D.mjs";
 import {
   AXIS_FILTER_CLASS,
   LEGEND_MARK_CLASS,
   MARK_CLASS,
   ROW_IDX_ATTR
-} from "./chunk-MR6TL7QZ.mjs";
+} from "./chunk-YDHXOIAI.mjs";
 import "./chunk-GHODWOAL.mjs";
 
 // src/adapters/types.ts

package/dist/{chunk-DTOGTKAJ.mjs → chunk-56IZWXW2.mjs}

@@ -1,7 +1,7 @@
 /*! @bicharts/chart-host — Apache-2.0. Bundled reference data: GeoNames (https://www.geonames.org/) CC BY 4.0; Natural Earth and US Census/TIGER (public domain). Full text: NOTICE in this package. */
 import {
   LASSO_KNOB_KEY
-} from "./chunk-QIRLWJBI.mjs";
+} from "./chunk-IZXVV74H.mjs";
 
 // src/filterScope.ts
 function viewToken(view) {

package/dist/{chunk-HZNMMRQ3.mjs → chunk-HXH6NIRV.mjs}

@@ -2,11 +2,11 @@
 import {
   LASSO_OUTLINE_CLASS,
   installLasso
-} from "./chunk-QIRLWJBI.mjs";
+} from "./chunk-IZXVV74H.mjs";
 import {
   censusHitBands,
   ensureCrossfilterHitTargets
-} from "./chunk-7HKVV5T5.mjs";
+} from "./chunk-XNS34AMM.mjs";
 import {
   clearPress,
   clickWasDrag,
@@ -20,12 +20,12 @@ import {
   selectionRuleOf,
   trackPress,
   validRowSet
-} from "./chunk-IURROJT7.mjs";
+} from "./chunk-IUXNCX7D.mjs";
 import {
   clipWindowOf,
   fitRenderedChart,
   unpinScrolledAxis
-} from "./chunk-BQFG5HWZ.mjs";
+} from "./chunk-QHIPRAZK.mjs";
 import {
   Fn,
   J3,
@@ -60,6 +60,7 @@ import {
   CONTAINER_SLOT_XF_CLEAR,
   CONTROL_CLASS,
   DIM_OPACITY_DEFAULT,
+  DIM_OPACITY_MIN,
   DIM_OPACITY_VAR,
   FLIP_DIRECTION_DEFAULT,
   FLIP_MODE_DEFAULT,
@@ -78,7 +79,7 @@ import {
   XFILTER_REFRESH_EVENT,
   chartOwnsTimeline,
   periodTickSuppressesFeedback
-} from "./chunk-MR6TL7QZ.mjs";
+} from "./chunk-YDHXOIAI.mjs";
 
 // src/labelContrast.ts
 function parseRGBA(c) {
@@ -608,6 +609,12 @@ function resolveOptions(p) {
     cultureCode: p.cultureCode,
     allowTooltips: p.allowTooltips,
     noDataText: p.noDataText,
+    // A finite number is clamped to DIM_OPACITY_MIN-1; absent, blank or junk stays undefined so the stylesheet - and a
+    // page's own CSS override - still decides. Never defaulted here: that would override every page's CSS.
+    dimOpacity: (() => {
+      const n = numberOr(p.dimOpacity, NaN);
+      return Number.isFinite(n) ? clamp(n, DIM_OPACITY_MIN, 1) : void 0;
+    })(),
     onSelect: p.onSelect,
     // Control gestures (1.10.0). Passed straight through like onSelect: the host owns what a gesture MEANS,
     // and a host that supplies nothing leaves every control behaving exactly as before.
@@ -2077,6 +2084,7 @@ function createChartHost(container, config) {
     p.catch(() => {
     });
   };
+  let dimVarSet = false;
   let current = null;
   let activeTickEl = null;
   let selectionIsPeriod = false;
@@ -2153,6 +2161,14 @@ function createChartHost(container, config) {
       const active = !!sel && sel.length > 0;
       const dim = active && !selectionIsPeriod;
       container.classList?.[dim ? "add" : "remove"](SELECTION_ACTIVE_CLASS);
+      const want = resolved.dimOpacity;
+      if (typeof want === "number") {
+        container.style?.setProperty(DIM_OPACITY_VAR, String(want));
+        dimVarSet = true;
+      } else if (dimVarSet) {
+        container.style?.removeProperty(DIM_OPACITY_VAR);
+        dimVarSet = false;
+      }
       const lit = container.querySelectorAll(`.${ACTIVE_TICK_CLASS}`);
       for (const t of Array.from(lit)) t.classList?.remove(ACTIVE_TICK_CLASS);
       const tickStillDrawn = !!activeTickEl && (typeof container.contains === "function" ? container.contains(activeTickEl) : activeTickEl.isConnected !== false);
@@ -2580,6 +2596,13 @@ function createChartHost(container, config) {
       clearPress(container);
       disposeLasso();
       subs.clear();
+      if (dimVarSet) {
+        try {
+          container.style?.removeProperty(DIM_OPACITY_VAR);
+        } catch {
+        }
+        dimVarSet = false;
+      }
       annotationLayer.destroy();
       unpinScrolledAxis(container);
       flushZoom();

package/dist/{chunk-IURROJT7.mjs → chunk-IUXNCX7D.mjs}

@@ -8,7 +8,7 @@ import {
   SELECTION_RULE_ATTR,
   SELECTION_RULE_CLICKED_MARKS,
   XFILTER_REFRESH_EVENT
-} from "./chunk-MR6TL7QZ.mjs";
+} from "./chunk-YDHXOIAI.mjs";
 
 // src/selection.ts
 function rowIdxsFromMark(el) {

package/dist/{chunk-QIRLWJBI.mjs → chunk-IZXVV74H.mjs}

@@ -4,7 +4,7 @@ import {
   gestureWasDrag,
   isInsideControl,
   rowIdxsFromMark
-} from "./chunk-IURROJT7.mjs";
+} from "./chunk-IUXNCX7D.mjs";
 import {
   AXIS_FILTER_CLASS,
   CONTROL_CLASS,
@@ -12,7 +12,7 @@ import {
   MARK_CLASS,
   ROW_IDX_ATTR,
   SNAPSHOT_SVG_ATTR
-} from "./chunk-MR6TL7QZ.mjs";
+} from "./chunk-YDHXOIAI.mjs";
 
 // src/lasso.ts
 var LASSO_ROW_CAP = 5e3;

package/dist/{chunk-BQFG5HWZ.mjs → chunk-QHIPRAZK.mjs}

@@ -1,7 +1,7 @@
 /*! @bicharts/chart-host — Apache-2.0. Bundled reference data: GeoNames (https://www.geonames.org/) CC BY 4.0; Natural Earth and US Census/TIGER (public domain). Full text: NOTICE in this package. */
 import {
   SNAPSHOT_SVG_ATTR
-} from "./chunk-MR6TL7QZ.mjs";
+} from "./chunk-YDHXOIAI.mjs";
 
 // src/fit.ts
 var SCROLL_SLACK_PX = 8;

package/dist/{chunk-ZGQURBRJ.mjs → chunk-UBB5LNH4.mjs}

@@ -1,7 +1,7 @@
 /*! @bicharts/chart-host — Apache-2.0. Bundled reference data: GeoNames (https://www.geonames.org/) CC BY 4.0; Natural Earth and US Census/TIGER (public domain). Full text: NOTICE in this package. */
 import {
   SNAPSHOT_SVG_ATTR
-} from "./chunk-MR6TL7QZ.mjs";
+} from "./chunk-YDHXOIAI.mjs";
 
 // src/snapshot.ts
 var DEFAULT_TIMEOUT_MS = 2e3;

package/dist/{chunk-7HKVV5T5.mjs → chunk-XNS34AMM.mjs}

@@ -4,7 +4,7 @@ import {
   LEGEND_MARK_CLASS,
   MARK_CLASS,
   ROW_IDX_ATTR
-} from "./chunk-MR6TL7QZ.mjs";
+} from "./chunk-YDHXOIAI.mjs";
 
 // src/hitTargets.ts
 var SVG_NS = "http://www.w3.org/2000/svg";

package/dist/{chunk-MR6TL7QZ.mjs → chunk-YDHXOIAI.mjs}

@@ -34,6 +34,7 @@ var MARK_SELECTED_CLASS = "lch-mark-selected";
 var ACTIVE_TICK_CLASS = "lch-tick-active";
 var DIM_OPACITY_VAR = "--lch-dim-opacity";
 var DIM_OPACITY_DEFAULT = 0.25;
+var DIM_OPACITY_MIN = 0.01;
 function chartOwnsTimeline(container) {
   return !!container && (!!container[CONTAINER_SLOT_XF_CLEAR] || !!container[CONTAINER_SLOT_ANIM_STOP]);
 }
@@ -97,6 +98,7 @@ export {
   ACTIVE_TICK_CLASS,
   DIM_OPACITY_VAR,
   DIM_OPACITY_DEFAULT,
+  DIM_OPACITY_MIN,
   chartOwnsTimeline,
   periodTickSuppressesFeedback,
   ANIM_PLAY_SPEED_DEFAULT,

package/dist/index.mjs

@@ -15,7 +15,7 @@ import {
   svgNaturalSize,
   svgToDataUrl,
   tableHostOf
-} from "./chunk-ZGQURBRJ.mjs";
+} from "./chunk-UBB5LNH4.mjs";
 import {
   ANNOTATION_CLASS,
   ANNOTATION_LAYER_CLASS,
@@ -97,7 +97,7 @@ import {
   toRGBA,
   toSourceRows,
   valuePlacementFlag
-} from "./chunk-HZNMMRQ3.mjs";
+} from "./chunk-HXH6NIRV.mjs";
 import {
   LASSO_AXES_SLOT,
   LASSO_COUNT_CLASS,
@@ -122,13 +122,13 @@ import {
   lassoVerdict,
   pointInShape,
   registerLassoAction
-} from "./chunk-QIRLWJBI.mjs";
+} from "./chunk-IZXVV74H.mjs";
 import {
   MIN_HIT_BAND_PX,
   censusHitBands,
   ensureCrossfilterHitTargets,
   hitBandFlag
-} from "./chunk-7HKVV5T5.mjs";
+} from "./chunk-XNS34AMM.mjs";
 import {
   CONTAINER_SLOT_PRESS_AT,
   DRAG_NOT_CLICK_PX,
@@ -153,7 +153,7 @@ import {
   selectionRuleOf,
   trackPress,
   validRowSet
-} from "./chunk-IURROJT7.mjs";
+} from "./chunk-IUXNCX7D.mjs";
 import {
   AXIS_PIN_BAND_PAD_PX,
   AXIS_PIN_MAX_BAND_FRACTION,
@@ -179,7 +179,7 @@ import {
   scrollFitFor,
   svgInkReach,
   unpinScrolledAxis
-} from "./chunk-BQFG5HWZ.mjs";
+} from "./chunk-QHIPRAZK.mjs";
 import {
   _3,
   l,
@@ -209,6 +209,7 @@ import {
   CONTAINER_SLOT_XF_CLEAR,
   CONTROL_CLASS,
   DIM_OPACITY_DEFAULT,
+  DIM_OPACITY_MIN,
   DIM_OPACITY_VAR,
   FLIP_DIRECTION_DEFAULT,
   FLIP_INTERVAL_MAX_MS,
@@ -236,7 +237,7 @@ import {
   chartOwnsTimeline,
   periodTickSuppressesFeedback,
   withoutViewOnlyKeys
-} from "./chunk-MR6TL7QZ.mjs";
+} from "./chunk-YDHXOIAI.mjs";
 import "./chunk-GHODWOAL.mjs";
 
 // src/optionsVocabulary.ts
@@ -2161,6 +2162,7 @@ export {
   DEFAULT_FILTER_MATCH_STYLE,
   DEFAULT_MODEL_SUFFIX,
   DIM_OPACITY_DEFAULT,
+  DIM_OPACITY_MIN,
   DIM_OPACITY_VAR,
   DRAG_NOT_CLICK_PX,
   DUPLICATE_GENERATE_WINDOW_MS,

package/dist/legend-fit.mjs

@@ -2,13 +2,13 @@
 import {
   chartSvgOf,
   tableHostOf
-} from "./chunk-ZGQURBRJ.mjs";
+} from "./chunk-UBB5LNH4.mjs";
 import {
   FIT_CONTENT_SELECTOR,
   ctmScaleOf,
   isPhantomBox
-} from "./chunk-BQFG5HWZ.mjs";
-import "./chunk-MR6TL7QZ.mjs";
+} from "./chunk-QHIPRAZK.mjs";
+import "./chunk-YDHXOIAI.mjs";
 import "./chunk-GHODWOAL.mjs";
 
 // src/legendFit/legendReconcile.ts

package/dist/page.mjs

@@ -14,10 +14,10 @@ import {
   readControls,
   viewFromToken,
   viewToken
-} from "./chunk-DTOGTKAJ.mjs";
-import "./chunk-QIRLWJBI.mjs";
-import "./chunk-IURROJT7.mjs";
-import "./chunk-MR6TL7QZ.mjs";
+} from "./chunk-56IZWXW2.mjs";
+import "./chunk-IZXVV74H.mjs";
+import "./chunk-IUXNCX7D.mjs";
+import "./chunk-YDHXOIAI.mjs";
 import "./chunk-GHODWOAL.mjs";
 export {
   LINKED_HOVER_CLASS,

package/dist/react.mjs

@@ -13,7 +13,7 @@ import {
   payloadRowReader,
   viewFromToken,
   viewToken
-} from "./chunk-DTOGTKAJ.mjs";
+} from "./chunk-56IZWXW2.mjs";
 import {
   assembleD3,
   createChartGroup,
@@ -22,14 +22,14 @@ import {
   loadGeo,
   syncMemberSelection,
   toSourceRows
-} from "./chunk-HZNMMRQ3.mjs";
-import "./chunk-QIRLWJBI.mjs";
-import "./chunk-7HKVV5T5.mjs";
-import "./chunk-IURROJT7.mjs";
-import "./chunk-BQFG5HWZ.mjs";
+} from "./chunk-HXH6NIRV.mjs";
+import "./chunk-IZXVV74H.mjs";
+import "./chunk-XNS34AMM.mjs";
+import "./chunk-IUXNCX7D.mjs";
+import "./chunk-QHIPRAZK.mjs";
 import "./chunk-KQN5C7SZ.mjs";
 import "./chunk-A2GMXZP7.mjs";
-import "./chunk-MR6TL7QZ.mjs";
+import "./chunk-YDHXOIAI.mjs";
 import "./chunk-GHODWOAL.mjs";
 
 // src/react.tsx

package/dist/testing.mjs

@@ -4,7 +4,7 @@ import {
   MARK_CLASS,
   MARK_SELECTED_CLASS,
   ROW_IDX_ATTR
-} from "./chunk-MR6TL7QZ.mjs";
+} from "./chunk-YDHXOIAI.mjs";
 import "./chunk-GHODWOAL.mjs";
 
 // src/testing/interact.ts

package/dist/types/contract.d.ts

@@ -72,6 +72,7 @@ export declare const MARK_SELECTED_CLASS = "lch-mark-selected";
 export declare const ACTIVE_TICK_CLASS = "lch-tick-active";
 export declare const DIM_OPACITY_VAR = "--lch-dim-opacity";
 export declare const DIM_OPACITY_DEFAULT = 0.25;
+export declare const DIM_OPACITY_MIN = 0.01;
 export declare function chartOwnsTimeline(container: any): boolean;
 export declare function periodTickSuppressesFeedback(isAxisTick: boolean, ownsTimeline: boolean): boolean;
 export declare const ANIM_PLAY_SPEED_DEFAULT = 1000;
@@ -159,6 +160,9 @@ export interface RenderOptions {
     cultureCode?: string;
     allowTooltips?: boolean;
     noDataText?: string;
+    /** How far a selection dims the marks outside it, as a share of full opacity (DIM_OPACITY_MIN-1). Absent: the
+     *  stylesheet decides - DIM_OPACITY_DEFAULT, or whatever the page sets on --lch-dim-opacity. */
+    dimOpacity?: number;
     animAutoPlay?: boolean;
     animPlaySpeedMs?: number;
     animLoopDelaySec?: number;

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-export { HOST_CONTRACT_VERSION, GEO_POINT_PRECISIONS, MARK_CLASS, LEGEND_MARK_CLASS, AXIS_FILTER_CLASS, ROW_IDX_ATTR, LIFT_SELECTED_CLASS, CONTROL_CLASS, NO_ROW_MARKS_ATTR, SELECTION_RULE_ATTR, SELECTION_RULE_CLICKED_MARKS, MARK_KEY_ATTR, CONTAINER_SLOT_CLICKED_MARKS, SNAPSHOT_SVG_ATTR, XFILTER_REFRESH_EVENT, CONTAINER_SLOT_ANIM_STOP, CONTAINER_SLOT_XF_CLEAR, CONTAINER_SLOT_INITIAL_XF_MARK, CONTAINER_SLOT_UI_STATE, VIEW_ONLY_UI_STATE_KEYS, withoutViewOnlyKeys, HOST_CONTAINER_CLASS, SELECTION_ACTIVE_CLASS, MARK_SELECTED_CLASS, ACTIVE_TICK_CLASS, DIM_OPACITY_VAR, DIM_OPACITY_DEFAULT, chartOwnsTimeline, periodTickSuppressesFeedback, ANIM_PLAY_SPEED_DEFAULT, ANIM_PLAY_SPEED_MIN, ANIM_PLAY_SPEED_MAX, ANIM_LOOP_DELAY_DEFAULT, ANIM_LOOP_DELAY_MIN, ANIM_MAX_IDEAL_FRAMES_DEFAULT, ANIM_MAX_IDEAL_FRAMES_MIN, ANIM_MAX_IDEAL_FRAMES_MAX, ANIMATION_OPTION_KEYS, COLOR_SCALE_SELF_CLAMP_PCT_DEFAULT, COLOR_SCALE_SELF_CLAMP_PCT_MIN, COLOR_SCALE_SELF_CLAMP_PCT_MAX, FLIP_MODE_DEFAULT, FLIP_INTERVAL_MIN_MS, FLIP_INTERVAL_MAX_MS, FLIP_DIRECTION_DEFAULT, APPROXIMATE_POSITIONS_DEFAULT, VALUE_AXIS_BASELINE_DEFAULT, SEASONAL_MARKERS_DEFAULT, MAX_MAP_POINTS_DEFAULT, type GeoPointPrecision, type GeoMapKind, type TimelineStyle, type FlipMode, type FlipDirection, type ApproximatePositions, type ValueAxisBaseline, type SeasonalMarkers, type ColorScaleScope, type RenderOptions, type ViewStateProvider, type ChartControlChange, type XfilterRefreshDetail, } from "./contract";
+export { HOST_CONTRACT_VERSION, GEO_POINT_PRECISIONS, MARK_CLASS, LEGEND_MARK_CLASS, AXIS_FILTER_CLASS, ROW_IDX_ATTR, LIFT_SELECTED_CLASS, CONTROL_CLASS, NO_ROW_MARKS_ATTR, SELECTION_RULE_ATTR, SELECTION_RULE_CLICKED_MARKS, MARK_KEY_ATTR, CONTAINER_SLOT_CLICKED_MARKS, SNAPSHOT_SVG_ATTR, XFILTER_REFRESH_EVENT, CONTAINER_SLOT_ANIM_STOP, CONTAINER_SLOT_XF_CLEAR, CONTAINER_SLOT_INITIAL_XF_MARK, CONTAINER_SLOT_UI_STATE, VIEW_ONLY_UI_STATE_KEYS, withoutViewOnlyKeys, HOST_CONTAINER_CLASS, SELECTION_ACTIVE_CLASS, MARK_SELECTED_CLASS, ACTIVE_TICK_CLASS, DIM_OPACITY_VAR, DIM_OPACITY_DEFAULT, DIM_OPACITY_MIN, chartOwnsTimeline, periodTickSuppressesFeedback, ANIM_PLAY_SPEED_DEFAULT, ANIM_PLAY_SPEED_MIN, ANIM_PLAY_SPEED_MAX, ANIM_LOOP_DELAY_DEFAULT, ANIM_LOOP_DELAY_MIN, ANIM_MAX_IDEAL_FRAMES_DEFAULT, ANIM_MAX_IDEAL_FRAMES_MIN, ANIM_MAX_IDEAL_FRAMES_MAX, ANIMATION_OPTION_KEYS, COLOR_SCALE_SELF_CLAMP_PCT_DEFAULT, COLOR_SCALE_SELF_CLAMP_PCT_MIN, COLOR_SCALE_SELF_CLAMP_PCT_MAX, FLIP_MODE_DEFAULT, FLIP_INTERVAL_MIN_MS, FLIP_INTERVAL_MAX_MS, FLIP_DIRECTION_DEFAULT, APPROXIMATE_POSITIONS_DEFAULT, VALUE_AXIS_BASELINE_DEFAULT, SEASONAL_MARKERS_DEFAULT, MAX_MAP_POINTS_DEFAULT, type GeoPointPrecision, type GeoMapKind, type TimelineStyle, type FlipMode, type FlipDirection, type ApproximatePositions, type ValueAxisBaseline, type SeasonalMarkers, type ColorScaleScope, type RenderOptions, type ViewStateProvider, type ChartControlChange, type XfilterRefreshDetail, } from "./contract";
 export { resolveOptions, type ResolveOptionsInput } from "./defaults";
 export { OPTIONS_VOCABULARY, LIVE_OPTION_KEYS, MAX_MAP_POINTS_MIN, MAX_MAP_POINTS_MAX, LIMIT_COUNT_MAX, wireLimitCount, codeReadsOption, type OptionVocabularyEntry, type OptionTiming, type OptionWire, type OptionKey, } from "./optionsVocabulary";
 export { loadGeo, geoFromCache, registerGeo, registerGeoAsset, geoAssetFor, clearGeoCache, type GeoAssetName, } from "./geoLazy";

package/package.json

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