@cfasim-ui/docs 0.7.5 → 0.7.6

package/charts/ChoroplethMap/ChoroplethMap.md

@@ -370,6 +370,41 @@ before and after zooming in.
   </template>
 </ComponentDemo>
 
+### Tighter national fit (`tight-fit`)
+
+The Albers USA projection places Alaska and Hawaii in the bottom-left corner, and by default the whole composite is fit into view — so Alaska's western tail pushes the contiguous US in from the edges. Set `tight-fit` to crop that overhang and let the lower-48 fill more of the frame: Alaska's tail (and Hawaii) clip into the lower-left corner. Pass a number in `0`–`1` (e.g. `:tight-fit="0.5"`) to crop only partway.
+
+Only affects the national (multi-state) view — it's a no-op in single-state mode and on national HSA maps (HSA ids aren't FIPS codes, so Alaska/Hawaii can't be split out).
+
+<ComponentDemo>
+  <ChoroplethMap
+    :topology="statesTopo"
+    tight-fit
+    :data="[
+      { id: '06', value: 100 },
+      { id: '36', value: 80 },
+      { id: '48', value: 90 },
+      { id: '12', value: 70 },
+      { id: '17', value: 60 },
+    ]"
+    title="Cases by State (tight fit)"
+    :legend-title="'Cases'"
+    :height="400"
+  />
+
+<template #code>
+
+```vue
+<!-- Crop Alaska's overhang so the lower-48 fills the frame -->
+<ChoroplethMap :topology="statesTopo" tight-fit :data="data" />
+
+<!-- ...or crop only partway -->
+<ChoroplethMap :topology="statesTopo" :tight-fit="0.5" :data="data" />
+```
+
+  </template>
+</ComponentDemo>
+
 ### HSA-level map
 
 Set `geoType="hsas"` to render Health Service Area boundaries. HSAs are dissolved from county boundaries using a built-in FIPS-to-HSA mapping. Use 6-digit HSA codes as IDs. State borders are overlaid for context.
@@ -918,6 +953,7 @@ tech).
 | `state` | `string` | No | — |
 | `width` | `number` | No | — |
 | `height` | `number` | No | — |
+| `tightFit` | `boolean \| number` | No | `false` |
 | `colorScale` | `ChoroplethColorScale \| ThresholdStop[] \| CategoricalStop[]` | No | — |
 | `title` | `string` | No | — |
 | `titleStyle` | `TitleStyle` | No | — |

package/charts/ChoroplethMap/ChoroplethMap.vue

@@ -142,6 +142,16 @@ const props = withDefaults(
     state?: string;
     width?: number;
     height?: number;
+    /**
+     * Tighten the national (multi-state) fit by cropping the Alaska/Hawaii
+     * overhang so the contiguous US fills more of the frame. `false`/`0`
+     * (default) fits every region into view; `true`/`1` fits the lower-48 to
+     * the frame and lets Alaska's western tail (and Hawaii) clip into the
+     * lower-left corner. A number in between (e.g. `0.5`) crops partway. No
+     * effect in single-state mode or on a national HSA map (HSA ids aren't
+     * FIPS, so AK/HI can't be split out).
+     */
+    tightFit?: boolean | number;
     colorScale?: ChoroplethColorScale | ThresholdStop[] | CategoricalStop[];
     /**
      * Map title. `\n` in the string creates additional lines, each
@@ -301,6 +311,7 @@ const props = withDefaults(
     tooltipClamp: "chart",
     focusZoomLevel: 4,
     focusZoom: true,
+    tightFit: false,
   },
 );
 
@@ -1357,6 +1368,31 @@ const stateBordersPath = computed(() => {
 // flush against the SVG edge. Only applied in single-state mode.
 const STATE_FIT_INSET = 12;
 
+// Resolved `tightFit` amount in [0,1]: false/0 → 0 (full fit), true → 1.
+const tightFitAmount = computed(() => {
+  const v = props.tightFit;
+  if (v === true) return 1;
+  if (!v) return 0;
+  return Math.max(0, Math.min(1, Number(v)));
+});
+
+// The national fit target with Alaska (FIPS 02) and Hawaii (15) removed, so
+// the projection can be re-fit to just the contiguous US. Null when the crop
+// is off, in single-state mode, on an HSA map (ids aren't FIPS), or when
+// nothing was removed — the projection then uses the plain full fit.
+const conusFeaturesGeo = computed(() => {
+  if (tightFitAmount.value <= 0 || stateFips.value) return null;
+  if (props.geoType === "hsas") return null;
+  const fc = featuresGeo.value;
+  const pad = props.geoType === "counties" ? 5 : 2;
+  const kept = fc.features.filter((f) => {
+    const st = String(f.id).padStart(pad, "0").slice(0, 2);
+    return st !== "02" && st !== "15";
+  });
+  if (kept.length === fc.features.length) return null;
+  return { type: "FeatureCollection" as const, features: kept };
+});
+
 const projection = computed(() => {
   const outline = stateOutlineFeature.value;
   if (stateFips.value && outline) {
@@ -1376,13 +1412,27 @@ const projection = computed(() => {
     if (Number.isFinite(c[0]) && Number.isFinite(c[1])) return albers;
     return geoMercator().fitExtent(extent, outline);
   }
-  return geoAlbersUsa().fitExtent(
-    [
-      [0, 0],
-      [width.value, height.value],
-    ],
-    featuresGeo.value,
-  );
+  const extent: [[number, number], [number, number]] = [
+    [0, 0],
+    [width.value, height.value],
+  ];
+  const full = geoAlbersUsa().fitExtent(extent, featuresGeo.value);
+  const conus = conusFeaturesGeo.value;
+  if (!conus) return full;
+  // Tighten the fit by interpolating the projection's scale + translate from
+  // the full fit toward the contiguous-US fit. At amount 1 CONUS fills the
+  // frame and Alaska's western tail (and Hawaii) clip into the lower-left
+  // corner, cropped by the SVG/canvas viewport. Everything downstream (paths,
+  // picking, tooltip anchors, focus zoom) derives from this projection, so
+  // both renderers stay consistent.
+  const tight = geoAlbersUsa().fitExtent(extent, conus);
+  const t = tightFitAmount.value;
+  const lerp = (a: number, b: number) => a + (b - a) * t;
+  const [fx, fy] = full.translate();
+  const [tx, ty] = tight.translate();
+  return geoAlbersUsa()
+    .scale(lerp(full.scale(), tight.scale()))
+    .translate([lerp(fx, tx), lerp(fy, ty)]);
 });
 
 const pathGenerator = computed(() => geoPath(projection.value));
@@ -1623,7 +1673,8 @@ function titleText(name: string, value: number | string | undefined): string {
 //      using lastTooltipSize (possibly stale by one frame) → visibility:visible
 //   2. tooltipObserver fires when the slot DOM has actually committed → we
 //      refresh lastTooltipSize and re-apply the position if still visible.
-//   3. mousemove  → rAF-throttled direct DOM write of transform; no reactivity.
+//   3. mousemove  → rAF-throttled; re-runs the same flip/clamp placement as
+//      the initial hover (direct DOM write of transform, no reactivity).
 //   4. mouseout (leaving the map) → visibility:hidden.
 //
 // There is no `await` and no token: out-of-order completion is impossible
@@ -1723,11 +1774,14 @@ function moveTooltip(clientX: number, clientY: number) {
   if (pendingMoveFrame) return;
   pendingMoveFrame = requestAnimationFrame(() => {
     pendingMoveFrame = 0;
-    const el = tooltipChildRef.value?.getEl();
-    if (!el || !tooltipVisible) return;
+    if (!tooltipVisible) return;
     lastPointer = { x: pendingMoveX, y: pendingMoveY };
-    // Mid-hover: don't re-run flip/clamp on every pixel; just translate.
-    el.style.transform = `translate3d(${pendingMoveX + 16}px, ${pendingMoveY}px, 0) translateY(-50%)`;
+    // Re-run the same flip/clamp as the initial hover. This is already
+    // rAF-coalesced (at most once per frame), so the flip/clamp cost is
+    // negligible. Hardcoding the right side here instead made the tooltip
+    // ignore the boundary while moving and fight showTooltip's per-feature
+    // flip on dense maps (the tooltip appeared to switch sides).
+    applyTooltipPosition(pendingMoveX, pendingMoveY);
   });
 }
 
@@ -2244,8 +2298,10 @@ function onTouchEnd(event: TouchEvent) {
     !fullscreen.isFullscreen.value
   ) {
     // Suppress the synthetic click/hover the browser would replay from
-    // this tap (and iOS's hover-first tap).
-    event.preventDefault();
+    // this tap (and iOS's hover-first tap). Guard on cancelable: a
+    // touchend fired while the page is mid-scroll is non-cancelable, and
+    // preventDefault there is a no-op that only logs a console intervention.
+    if (event.cancelable) event.preventDefault();
     const prev = lastTap;
     lastTap = { x: t.clientX, y: t.clientY, time: event.timeStamp };
     const isDoubleTap =
@@ -2287,8 +2343,10 @@ function onTouchEnd(event: TouchEvent) {
   const data = tooltipDataById.get(start.featId);
   if (!data) return;
   // Suppress the synthetic click/hover the browser would replay from this
-  // tap, so selection fires exactly once and never via iOS's hover-first tap.
-  event.preventDefault();
+  // tap, so selection fires exactly once and never via iOS's hover-first
+  // tap. Guard on cancelable — a touchend fired mid page-scroll is
+  // non-cancelable, and preventDefault there only logs an intervention.
+  if (event.cancelable) event.preventDefault();
   touchHover(data, t.clientX, t.clientY);
   emitSelection(data);
 }

package/charts/tooltip-position.ts

@@ -39,7 +39,13 @@ export function placeTooltip(
         };
 
   const flip = clientX + GAP + tipW > bounds.right - PAD;
-  const left = flip ? clientX - GAP - tipW : clientX + GAP;
+  const rawLeft = flip ? clientX - GAP - tipW : clientX + GAP;
+  // Clamp horizontally too: a left-flip near a narrow boundary's left edge
+  // (or a right placement in a chart narrower than the tooltip) must not
+  // overflow the far side. The upper bound is floored to the lower one so a
+  // tooltip wider than the bounds still pins to the left edge.
+  const maxLeft = Math.max(bounds.left + PAD, bounds.right - PAD - tipW);
+  const left = Math.min(Math.max(rawLeft, bounds.left + PAD), maxLeft);
   const halfH = tipH / 2;
   const top = Math.min(
     Math.max(centerY, bounds.top + PAD + halfH),

package/index.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.5",
+  "version": "0.7.6",
   "package": "@cfasim-ui/docs",
   "content": {
     "components": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfasim-ui/docs",
-  "version": "0.7.5",
+  "version": "0.7.6",
   "description": "LLM-friendly component and chart documentation for cfasim-ui",
   "license": "Apache-2.0",
   "repository": {