@bicharts/chart-host 0.6.66 → 0.6.70

package/README.md

@@ -145,6 +145,39 @@ group.onChange(sel => console.log(sel.sourceId, sel.rows));  // SOURCE row indic
 group.clear();
 ```
 
+## Reader options
+
+Everything a reader can tune lives in `options` - the `options` prop on `<BicChart>`, the
+`options` you hand `createChartHost`, or a later `setOptions`. The full set, with each option's
+default, bounds and whether it repaints the chart on screen, is exported as `OPTIONS_VOCABULARY`;
+`LIVE_OPTION_KEYS` lists the ones that apply without a new chart.
+
+**Card decks and carousels.** A chart that pages through several faces (a flippable multi-card
+deck, a rotating carousel) reads these on every draw, so they all restyle live:
+
+| Option | Values | Unset means |
+| --- | --- | --- |
+| `cardBackgroundColor` | any CSS color | the chart's own fill: a deck uses the page, a carousel a light tint |
+| `flipIntervalMs` | `0` (manual only), or 500-120000 ms | the chart's own: manual for a deck, 5 s for a carousel |
+| `flipDirection` | `"horizontal"`, `"vertical"` | `"horizontal"` (side to side) |
+| `flipMode` | `"both"`, `"all"`, `"single"` (the deck only; a carousel has its own arrows) | `"both"` |
+
+```tsx
+<BicChart id="kpis" code={code} d3={d3}
+          options={{ width, height, cardBackgroundColor: "#f4c7b8", flipIntervalMs: 4000 }} />
+```
+
+The fill is the only thing you set: the chart still chooses its text colors, and they are its
+job to keep readable on a dark card.
+
+**Clearing an option.** `setOptions` merges into what the chart already has, and so does a
+changed `options` prop - a key you simply drop keeps its last value. To hand an option back to
+the chart's own default, pass it explicitly as `undefined`:
+
+```js
+host.setOptions({ cardBackgroundColor: undefined, flipIntervalMs: undefined });
+```
+
 ## Sizing is yours
 
 `width`/`height` have **no defaults**. A chart draws once at whatever it is handed and does not

package/dist/{chunk-CXDTSQBJ.mjs → chunk-KBFJTRYA.mjs}

@@ -1978,17 +1978,17 @@ function Yn3(t, e, n, o4, u4) {
     for (let d2 of b4) {
       let S2 = y2(d2);
       if (A2(S2)) continue;
-      let _4 = z2(S2);
-      if (_4 < 95) continue;
+      let P4 = z2(S2);
+      if (P4 < 95) continue;
       let H2 = ee3(S2, (D2) => !!t3(D2)), Ne = ee3(S2, (D2) => !!t3(D2) && !ce3(D2, o4));
-      H2 < Z3 && Ne < 1 || (!s2 || _4 > s2.pct) && (s2 = { name: d2, pct: _4 });
+      H2 < Z3 && Ne < 1 || (!s2 || P4 > s2.pct) && (s2 = { name: d2, pct: P4 });
     }
     s2 && (i.state = s2.name, p4.add(s2.name), l2.push(`state=${s2.name} (${s2.pct}% states/provinces)`));
   }
   if (!i.zip) for (let s2 of b4) {
     if (p4.has(s2)) continue;
     let d2 = y2(s2), S2 = re2(d2);
-    if (!(S2 < 95) && de(d2, s2) && !(jn(d2, (_4) => r3(_4).length > 0) < Z3)) {
+    if (!(S2 < 95) && de(d2, s2) && !(jn(d2, (P4) => r3(P4).length > 0) < Z3)) {
       i.zip = s2, p4.add(s2), l2.push(`zip=${s2} (${S2}% ZIP codes)`);
       break;
     }
@@ -2007,12 +2007,12 @@ function Yn3(t, e, n, o4, u4) {
     let s2 = null;
     for (let d2 of b4) {
       if (p4.has(d2)) continue;
-      let S2 = y2(d2), _4 = Bn2(S2, o4);
-      _4 < D3 || ee3(S2, (H2) => j3(H2, o4)) < Z3 || (!s2 || _4 > s2.pct) && (s2 = { name: d2, pct: _4 });
+      let S2 = y2(d2), P4 = Bn2(S2, o4);
+      P4 < D3 || ee3(S2, (H2) => j3(H2, o4)) < Z3 || (!s2 || P4 > s2.pct) && (s2 = { name: d2, pct: P4 });
     }
     s2 && (i.city = s2.name, l2.push(`city=${s2.name} (${s2.pct}% known cities)`));
   }
-  let L4 = i.country ? y2(i.country) : [], R4 = !!i.country && A2(L4), M2 = R4 ? new Set(L4.map((s2) => k(s2 == null ? null : String(s2))).filter(Boolean)).size : 0, x3 = R4 && M2 >= 2, w3 = !!(i.lat && i.lon) && e.some((s2) => {
+  let v = i.country ? y2(i.country) : [], R4 = !!i.country && A2(v), L4 = R4 ? new Set(v.map((s2) => k(s2 == null ? null : String(s2))).filter(Boolean)).size : 0, x3 = R4 && L4 >= 2, w3 = !!(i.lat && i.lon) && e.some((s2) => {
     let d2 = +String(s2[i.lat] ?? "").trim(), S2 = +String(s2[i.lon] ?? "").trim();
     return isFinite(d2) && isFinite(S2) && d2 >= -90 && d2 <= 90 && S2 >= -180 && S2 <= 180 && String(s2[i.lat] ?? "").trim() !== "" && String(s2[i.lon] ?? "").trim() !== "";
   });
@@ -2022,9 +2022,9 @@ var r = (t, ...e) => ({ part: t, langs: Object.freeze(e) });
 var ie2 = Object.freeze({ jaar: r("year", "nl"), kwartaal: r("quarter", "nl"), maand: r("month", "nl"), dag: r("day", "nl", "sv", "da", "nb"), jahr: r("year", "de"), quartal: r("quarter", "de"), monat: r("month", "de"), tag: r("day", "de"), ann\u00E9e: r("year", "fr"), mois: r("month", "fr"), jour: r("day", "fr"), trimestre: r("quarter", "fr", "es", "pt", "it"), a\u00F1o: r("year", "es"), mes: r("month", "es"), d\u00EDa: r("day", "es"), ano: r("year", "pt"), m\u00EAs: r("month", "pt"), dia: r("day", "pt"), anno: r("year", "it"), mese: r("month", "it"), giorno: r("day", "it"), \u0433\u043E\u0434: r("year", "ru"), \u043C\u0435\u0441\u044F\u0446: r("month", "ru"), \u0440\u0456\u043A: r("year", "uk"), \u043C\u0456\u0441\u044F\u0446\u044C: r("month", "uk"), \u043A\u0432\u0430\u0440\u0442\u0430\u043B: r("quarter", "ru", "uk"), \u0434\u0435\u043D\u044C: r("day", "ru", "uk"), rok: r("year", "pl", "cs", "sk"), kwarta\u0142: r("quarter", "pl"), miesi\u0105c: r("month", "pl"), dzie\u0144: r("day", "pl"), \u010Dtvrtlet\u00ED: r("quarter", "cs"), m\u011Bs\u00EDc: r("month", "cs"), den: r("day", "cs"), \u0161tvr\u0165rok: r("quarter", "sk"), mesiac: r("month", "sk"), de\u0148: r("day", "sk"), \u00E5r: r("year", "sv", "da", "nb"), kvartal: r("quarter", "sv", "da", "nb"), m\u00E5nad: r("month", "sv"), m\u00E5ned: r("month", "da", "nb"), vuosi: r("year", "fi"), vuosinelj\u00E4nnes: r("quarter", "fi"), kuukausi: r("month", "fi"), p\u00E4iv\u00E4: r("day", "fi"), \u00E9v: r("year", "hu"), negyed\u00E9v: r("quarter", "hu"), h\u00F3nap: r("month", "hu"), nap: r("day", "hu"), y\u0131l: r("year", "tr"), \u00E7eyrek: r("quarter", "tr"), ay: r("month", "tr"), g\u00FCn: r("day", "tr"), \u03AD\u03C4\u03BF\u03C2: r("year", "el"), \u03C4\u03C1\u03AF\u03BC\u03B7\u03BD\u03BF: r("quarter", "el"), \u03BC\u03AE\u03BD\u03B1\u03C2: r("month", "el"), \u03B7\u03BC\u03AD\u03C1\u03B1: r("day", "el"), an: r("year", "ro"), trimestru: r("quarter", "ro"), lun\u0103: r("month", "ro"), zi: r("day", "ro"), godina: r("year", "hr"), tromjese\u010Dje: r("quarter", "hr"), mjesec: r("month", "hr"), dan: r("day", "hr"), \u5E74: r("year", "ja", "zh"), \u56DB\u534A\u671F: r("quarter", "ja"), \u5B63\u5EA6: r("quarter", "zh"), \u6708: r("month", "ja", "zh"), \u65E5: r("day", "ja", "zh"), \uC5F0\uB3C4: r("year", "ko"), \uBD84\uAE30: r("quarter", "ko"), \uC6D4: r("month", "ko"), \uC77C: r("day", "ko"), tahun: r("year", "id"), kuartal: r("quarter", "id"), triwulan: r("quarter", "id"), bulan: r("month", "id"), hari: r("day", "id"), n\u0103m: r("year", "vi"), qu\u00FD: r("quarter", "vi"), th\u00E1ng: r("month", "vi"), ng\u00E0y: r("day", "vi"), \u0E1B\u0E35: r("year", "th"), \u0E44\u0E15\u0E23\u0E21\u0E32\u0E2A: r("quarter", "th"), \u0E40\u0E14\u0E37\u0E2D\u0E19: r("month", "th"), \u0E27\u0E31\u0E19: r("day", "th"), \u0627\u0644\u0633\u0646\u0629: r("year", "ar"), \u0633\u0646\u0629: r("year", "ar"), \u0627\u0644\u0639\u0627\u0645: r("year", "ar"), \u0639\u0627\u0645: r("year", "ar"), \u0627\u0644\u0631\u0628\u0639: r("quarter", "ar"), \u0631\u0628\u0639: r("quarter", "ar"), "\u0631\u0628\u0639 \u0627\u0644\u0633\u0646\u0629": r("quarter", "ar"), \u0627\u0644\u0634\u0647\u0631: r("month", "ar"), \u0634\u0647\u0631: r("month", "ar"), \u0627\u0644\u064A\u0648\u0645: r("day", "ar"), \u064A\u0648\u0645: r("day", "ar"), \u05E9\u05E0\u05D4: r("year", "he"), \u05E8\u05D1\u05E2\u05D5\u05DF: r("quarter", "he"), \u05D7\u05D5\u05D3\u05E9: r("month", "he"), \u05D9\u05D5\u05DD: r("day", "he"), \u0935\u0930\u094D\u0937: r("year", "hi"), \u0938\u093E\u0932: r("year", "hi"), \u0924\u093F\u092E\u093E\u0939\u0940: r("quarter", "hi"), \u092E\u0939\u0940\u0928\u093E: r("month", "hi"), \u092E\u093E\u0939: r("month", "hi"), \u0926\u093F\u0928: r("day", "hi"), \u0633\u0627\u0644: r("year", "fa"), \u0645\u0627\u0647: r("month", "fa"), \u0631\u0648\u0632: r("day", "fa") });
 var Qn2 = Object.freeze(Array.from(new Set(Object.values(ie2).flatMap((t) => t.langs))));
 var fe = Object.freeze(["fa", "ar", "he", "th"]);
-var Rr = Object.freeze({ integer: "number", decimal: "number", double: "number", datetime: "date", date: "date", boolean: "boolean", string: "text" });
-var Or = Object.freeze({ RENDER_START: "render-start", RENDER_OK: "render-ok", RENDER_ERROR: "render-error", VIEW: "view", VIEW_VERDICT: "view-verdict" });
-var Me = 2 ** 31 - 1;
+var wr = Object.freeze({ integer: "number", decimal: "number", double: "number", datetime: "date", date: "date", boolean: "boolean", string: "text" });
+var Nr = Object.freeze({ RENDER_START: "render-start", RENDER_OK: "render-ok", RENDER_ERROR: "render-error", VIEW: "view", VIEW_VERDICT: "view-verdict" });
+var Le = 2 ** 31 - 1;
 
 // src/payload.ts
 var ROW_IDX_COLUMN = "__rowIdx__";

package/dist/index.mjs

@@ -122,7 +122,7 @@ import {
   toSourceRows,
   unpinScrolledAxis,
   valuePlacementFlag
-} from "./chunk-CXDTSQBJ.mjs";
+} from "./chunk-KBFJTRYA.mjs";
 import "./chunk-A2GMXZP7.mjs";
 import {
   ACTIVE_TICK_CLASS,
@@ -212,6 +212,12 @@ var OPTIONS_VOCABULARY = Object.freeze({
   flipIntervalMs: entry({ timing: "live", default: "", min: 0, max: FLIP_INTERVAL_MAX_MS }),
   /** Which way a face turns, for any chart that turns between faces: side to side, or top to bottom. */
   flipDirection: entry({ timing: "live", default: FLIP_DIRECTION_DEFAULT, values: ["horizontal", "vertical"] }),
+  /**
+   * The fill behind each card of a card deck and each face of a carousel. BLANK - "the chart's own" -
+   * is the default, and it differs by chart: a deck uses the page so its cards read as part of it, a
+   * carousel tints its faces so each reads as a surface. A color is a reader's choice.
+   */
+  cardBackgroundColor: entry({ timing: "live", default: "" }),
   /**
    * Hover drop lines on a 3D chart. BLANK - "the chart's own" - is the default: off, unless the request
    * that made the chart asked for them. "on" / "off" is a reader's choice and wins either way.

package/dist/react.mjs

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

package/dist/types/optionsVocabulary.d.ts

@@ -60,6 +60,12 @@ export declare const OPTIONS_VOCABULARY: Readonly<{
     flipIntervalMs: OptionVocabularyEntry;
     /** Which way a face turns, for any chart that turns between faces: side to side, or top to bottom. */
     flipDirection: OptionVocabularyEntry;
+    /**
+     * The fill behind each card of a card deck and each face of a carousel. BLANK - "the chart's own" -
+     * is the default, and it differs by chart: a deck uses the page so its cards read as part of it, a
+     * carousel tints its faces so each reads as a surface. A color is a reader's choice.
+     */
+    cardBackgroundColor: OptionVocabularyEntry;
     /**
      * Hover drop lines on a 3D chart. BLANK - "the chart's own" - is the default: off, unless the request
      * that made the chart asked for them. "on" / "off" is a reader's choice and wins either way.

package/package.json

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