@bicharts/chart-host 0.4.0 → 0.4.1

package/README.md

@@ -72,7 +72,7 @@ geography away and leaves nothing to click to change the selection.
 
 ```tsx
 <BicChartGroup columns={columns} rows={rows} point={{ city: "City", state: "StateOrProvince" }}>
-  <BicChart id="map"   code={mapCode}   d3={d3} geoKind="na" respondsWith="highlight" />
+  <BicChart id="map"   code={mapCode}   d3={d3} geoKind="north-america" respondsWith="highlight" />
   <BicChart id="table" code={tableCode} d3={d3} />
 </BicChartGroup>
 ```
@@ -137,7 +137,11 @@ createChartHost(el, { code, data, d3, geoKind, geoProvider: geoForKind });
 createChartHost(el, { code, data, d3, options: { geo } });   // or pass data.geo.json directly
 ```
 
-Setting `geoKind` with no geometry available warns and draws without a basemap.
+The React `<BicChart>` handles this itself: give it `geoKind` and it fetches the geometry when
+the cache is cold, re-rendering with the basemap when it lands. `await loadGeo(kind)` before
+mounting still works and skips the one-frame pop-in. Outside React, `render()` is synchronous
+by contract, so setting `geoKind` with no geometry available warns and draws without a
+basemap — load or provide geometry first.
 
 ## D3 plugins
 

package/dist/react.mjs

@@ -1,7 +1,9 @@
 /*! @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 {
   buildRenderPayload,
-  createChartHost
+  createChartHost,
+  geoFromCache,
+  loadGeo
 } from "./chunk-CVJFLLAD.mjs";
 import "./chunk-A2GMXZP7.mjs";
 
@@ -70,6 +72,20 @@ function BicChart(props) {
   rowMapRef.current = built ? built.rowMap : null;
   const onSelectRef = useRef(onSelect);
   onSelectRef.current = onSelect;
+  const [geoTick, setGeoTick] = useState(0);
+  useEffect(() => {
+    if (!geoKind || geoFromCache(geoKind)) return;
+    let alive = true;
+    loadGeo(geoKind).then((g) => {
+      if (alive && g) setGeoTick((t) => t + 1);
+    });
+    return () => {
+      alive = false;
+    };
+  }, [geoKind]);
+  useEffect(() => {
+    if (geoTick) hostRef.current?.render();
+  }, [geoTick]);
   useLayoutEffect(() => {
     const el = ref.current;
     if (!el || !code && !renderFn || !data) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bicharts/chart-host",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "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",
@@ -69,6 +69,8 @@
   "devDependencies": {
     "@types/react": "^19.2.17",
     "esbuild": "^0.28.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "typescript": "^5.9.3"
   },
   "publishConfig": {