@cfasim-ui/docs 0.7.2 → 0.7.4

package/charts/ChoroplethMap/ChoroplethMap.md

@@ -279,10 +279,10 @@ hide it.
   full extent.
 - **Touch:** a **double tap** expands the map to fill the window, zoomed
   in on the tapped point; single taps select features inline. Inside the
-  expanded view, one finger pans, a pinch zooms, and a tap selects; the
-  +/−/reset controls sit top-left and a close (✕) button top-right returns
-  to the inline map at full extent. A single finger over the inline map
-  still scrolls the page.
+  expanded view, one finger pans, a pinch zooms, and a tap selects — its
+  tooltip slides up as a bottom sheet; the +/−/reset controls sit top-left
+  and a close (✕) button top-right returns to the inline map at full
+  extent. A single finger over the inline map still scrolls the page.
 
 Filling the window is always an activated state: whether entered via the
 menu's **Fullscreen** item or a double tap, pan/zoom works immediately and
@@ -319,11 +319,16 @@ pans, and touch gestures work inline with no tap-to-expand step. The
 
 Set `geoType="counties"` to render county-level data using 5-digit FIPS codes. State borders are drawn on top for context. Double-click (or double-tap on touch) to explore — useful for dense county data.
 
+This demo also wires up an interactive tooltip (`tooltip-trigger="hover"`):
+hover a county on desktop, or tap one on touch, and it works the same
+before and after zooming in.
+
 <ComponentDemo>
   <ChoroplethMap
     :topology="countiesTopo"
     geo-type="counties"
     zoom
+    tooltip-trigger="hover"
     :data="[
       { id: '06037', value: 100 },
       { id: '06073', value: 80 },
@@ -348,6 +353,7 @@ Set `geoType="counties"` to render county-level data using 5-digit FIPS codes. S
   :topology="countiesTopo"
   geo-type="counties"
   zoom
+  tooltip-trigger="hover"
   :data="[
     { id: '06037', value: 100 },
     { id: '36061', value: 90 },
@@ -368,11 +374,15 @@ Set `geoType="counties"` to render county-level data using 5-digit FIPS codes. S
 
 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.
 
+This demo pairs `tooltip-trigger="hover"` with a custom `#tooltip` slot —
+hover an HSA on desktop, or tap one on touch, before or after zooming in.
+
 <ComponentDemo>
   <ChoroplethMap
     :topology="countiesTopo"
     geo-type="hsas"
     zoom
+    tooltip-trigger="hover"
     :data="[
       { id: '010259', value: 100 },
       { id: '060766', value: 90 },
@@ -388,7 +398,14 @@ Set `geoType="hsas"` to render Health Service Area boundaries. HSAs are dissolve
     title="Cases by HSA"
     :legend-title="'Cases'"
     :height="400"
-  />
+  >
+    <template #tooltip="{ id, name, value }">
+      <div style="font-weight: 600">{{ name }}</div>
+      <div style="opacity: 0.7; font-size: 0.85em">HSA {{ id }}</div>
+      <div v-if="value != null">Cases: {{ value }}</div>
+      <div v-else style="opacity: 0.6">No data</div>
+    </template>
+  </ChoroplethMap>
 
 <template #code>
 
@@ -397,6 +414,7 @@ Set `geoType="hsas"` to render Health Service Area boundaries. HSAs are dissolve
   :topology="countiesTopo"
   geo-type="hsas"
   zoom
+  tooltip-trigger="hover"
   :data="[
     { id: '010259', value: 100 },
     { id: '060766', value: 90 },
@@ -407,7 +425,14 @@ Set `geoType="hsas"` to render Health Service Area boundaries. HSAs are dissolve
   title="Cases by HSA"
   :legend-title="'Cases'"
   :height="400"
-/>
+>
+  <template #tooltip="{ id, name, value }">
+    <div style="font-weight: 600">{{ name }}</div>
+    <div style="opacity: 0.7; font-size: 0.85em">HSA {{ id }}</div>
+    <div v-if="value != null">Cases: {{ value }}</div>
+    <div v-else style="opacity: 0.6">No data</div>
+  </template>
+</ChoroplethMap>
 ```
 
   </template>
@@ -499,8 +524,9 @@ Selection works the same on touch: a single-finger **tap** on a feature
 emits `stateClick` and toggles focus, inline or inside the expanded view.
 (Inline with `zoom` on, the selection fires after the brief double-tap
 window.) A tap also stands in for hover — it applies the hover highlight,
-emits `stateHover`, and shows the feature's tooltip at the tapped point;
-only continuous hover _tracking_ is off on touch, for performance.
+emits `stateHover`, and shows the feature's tooltip (anchored to the
+feature inline; sliding up as a bottom sheet in the expanded view); only
+continuous hover _tracking_ is off on touch, for performance.
 
 Click-to-focus interactions usually pair best with `:touch-expand="false"`,
 as in the demos below — a double tap zooms in place while taps keep

package/charts/ChoroplethMap/ChoroplethMap.vue

@@ -474,6 +474,8 @@ function setupInteraction() {
   // `touchend` is non-passive so a confirmed tap can preventDefault and
   // suppress the compatibility click/hover the browser would otherwise
   // synthesize (the double-fire and iOS first-tap-hover sources).
+  // Must run before setupZoom(): d3-zoom stopImmediatePropagation()s
+  // touch events once its filter passes, which would starve these.
   svg.addEventListener("touchstart", onTouchStart, { passive: true });
   svg.addEventListener("touchend", onTouchEnd);
   svg.addEventListener("touchcancel", onTouchCancel, { passive: true });
@@ -515,8 +517,13 @@ function dismissOnViewportChange() {
 let svgResizeObserver: ResizeObserver | null = null;
 
 onMounted(() => {
-  setupZoom();
+  // Order is load-bearing: once its filter passes (zoom activated /
+  // expanded), d3-zoom calls stopImmediatePropagation() on touchstart and
+  // touchend. Same-element listeners run in registration order, so our
+  // tap listeners must be registered BEFORE d3-zoom's or taps (selection,
+  // tooltips) go dead the moment the map owns touch gestures.
   setupInteraction();
+  setupZoom();
   rebuildPaths();
   applyFocus();
   attachTooltipObserver();
@@ -555,11 +562,20 @@ function setupZoom() {
   const svg = select(svgRef.value);
   zoomBehavior = d3Zoom<SVGSVGElement, unknown>()
     .scaleExtent([1, maxScale.value])
+    // d3-zoom swallows the click after any mousedown→mouseup movement
+    // beyond this distance. The default of 0 makes clicks unreliable the
+    // moment drag-pan is live (a pixel of hand jitter reads as a drag),
+    // so allow a few pixels of slack.
+    .clickDistance(6)
     .on("start", () => {
       isZooming = true;
-      clearHover();
     })
     .on("zoom", (event) => {
+      // Cleared here, not on gesture start: a plain mousedown opens a
+      // gesture once drag-pan is live, and hiding the tooltip on every
+      // click press felt broken. The tooltip only needs to go once the
+      // map actually moves under the cursor.
+      clearHover();
       if (mapGroupRef.value) {
         mapGroupRef.value.setAttribute("transform", event.transform);
       }
@@ -924,8 +940,12 @@ const svgStyle = computed(() => {
   if (
     hasZoomed.value ||
     fullscreen.isFullscreen.value ||
-    (props.zoom && isScrollMode.value)
+    (props.zoom && (isScrollMode.value || isTouchDevice()))
   ) {
+    // Touch maps get the layer up front, not just once zoomed: a tap
+    // restyles a feature path, and without the layer WebKit repaints the
+    // surrounding page layer (~200ms per mutation on the HSA map — taps
+    // felt sluggish inline while fullscreen, already layered, was fast).
     style["will-change"] = "transform";
   }
   return Object.keys(style).length ? style : undefined;
@@ -1511,23 +1531,53 @@ function applyTooltipPosition(clientX: number, clientY: number) {
     chartRect,
   );
   el.style.transform = `translate3d(${left}px, ${top}px, 0) translateY(-50%)`;
+  // Safari reports client coordinates (events AND element rects) in
+  // visual-viewport space, while position: fixed resolves against the
+  // layout viewport — under page pinch-zoom the tooltip lands offset from
+  // its target (typically "too high" by the pan offset). Rather than
+  // sniffing engines, self-calibrate: re-measure where the tooltip
+  // actually landed — the rect comes back in the same client space as the
+  // target coords — and shift by the residual. Chrome measures ~0.
+  const vv = typeof window !== "undefined" ? window.visualViewport : null;
+  if (!vv || (vv.scale <= 1.01 && vv.offsetTop < 1 && vv.offsetLeft < 1)) {
+    return;
+  }
+  const actual = el.getBoundingClientRect();
+  const dx = actual.left - left;
+  const dy = actual.top + actual.height / 2 - top;
+  if (Math.abs(dx) > 1 || Math.abs(dy) > 1) {
+    el.style.transform = `translate3d(${left - dx}px, ${top - dy}px, 0) translateY(-50%)`;
+  }
 }
 
+// The expanded touch view swaps the pointer-anchored tooltip for a bottom
+// sheet: floating fixed positioning is unreliable there (Safari reports
+// touch/rect coordinates in visual-viewport space once the page is
+// pinch-zoomed), while a sheet pinned to the wrapper is always right.
+const tooltipMode = computed<"float" | "sheet">(() =>
+  fullscreen.isFullscreen.value && isTouchDevice() ? "sheet" : "float",
+);
+
 function showTooltip(featId: string, clientX: number, clientY: number) {
   const data = tooltipDataById.get(featId);
   if (!data) return;
   const child = tooltipChildRef.value;
-  const el = child?.getEl();
-  if (!child || !el) return;
+  if (!child) return;
   child.setData(data);
-  lastPointer = { x: clientX, y: clientY };
   tooltipVisible = true;
+  if (tooltipMode.value === "sheet") {
+    child.setOpen(true);
+    return;
+  }
+  const el = child.getEl();
+  if (!el) return;
+  lastPointer = { x: clientX, y: clientY };
   applyTooltipPosition(clientX, clientY);
   el.style.visibility = "visible";
 }
 
 function moveTooltip(clientX: number, clientY: number) {
-  if (!tooltipVisible) return;
+  if (!tooltipVisible || tooltipMode.value === "sheet") return;
   pendingMoveX = clientX;
   pendingMoveY = clientY;
   if (pendingMoveFrame) return;
@@ -1545,6 +1595,7 @@ function hideTooltip() {
   if (!tooltipVisible) return;
   tooltipVisible = false;
   lastPointer = null;
+  tooltipChildRef.value?.setOpen(false);
   const el = tooltipChildRef.value?.getEl();
   if (el) el.style.visibility = "hidden";
 }
@@ -1690,7 +1741,10 @@ function emitSelection(data: TooltipPayload) {
 }
 
 function onDelegatedEvent(event: Event) {
-  if (isZooming) return;
+  // Only hover is suppressed mid-gesture (stroke churn while the map
+  // moves); clicks stay live — even during zoom animations — since d3
+  // already swallows genuine post-drag clicks via clickDistance.
+  if (event.type === "mouseover" && isZooming) return;
   const me = event as MouseEvent;
   const featId = eventToFeatureId(me.target);
   if (!featId) return;
@@ -1821,14 +1875,29 @@ function onTouchEnd(event: TouchEvent) {
 }
 
 // A tap doubles as the touch replacement for hover: apply the hover-style
-// highlight, announce it, and show the tooltip at the tapped point.
-// (Continuous hover *tracking* stays off on touch — see setupInteraction —
-// this is the one-shot equivalent.)
+// highlight, announce it, and show the tooltip. (Continuous hover
+// *tracking* stays off on touch — see setupInteraction — this is the
+// one-shot equivalent.)
 function touchHover(data: TooltipPayload, clientX: number, clientY: number) {
   const pathEl = pathsByFeatureId.get(data.id);
   if (pathEl) setHover(pathEl);
   emit("stateHover", { id: data.id, name: data.name, value: data.value });
-  if (hasInteractiveTooltip.value) showTooltip(data.id, clientX, clientY);
+  if (!hasInteractiveTooltip.value) return;
+  if (pathEl) {
+    // Anchor to the feature, not the finger: element rects and fixed
+    // positioning share the layout-viewport coordinate space, so this
+    // stays put when the page itself is pinch-zoomed — Safari reports
+    // touch client coords in *visual*-viewport space, which would skew a
+    // finger-anchored tooltip. Also keeps it out from under the finger.
+    const rect = pathEl.getBoundingClientRect();
+    showTooltip(
+      data.id,
+      rect.left + rect.width / 2,
+      rect.top + rect.height / 2,
+    );
+  } else {
+    showTooltip(data.id, clientX, clientY);
+  }
 }
 
 function onTouchCancel() {
@@ -2099,10 +2168,12 @@ watch(
 
 // Exiting the expanded touch view (✕, Escape) returns to the static inline
 // map at full extent — the inline map has no pan gestures, so a preserved
-// transform would strand the user off-center.
+// transform would strand the user off-center. Any toggle also drops the
+// tooltip: the presentation mode (float vs sheet) may change with it.
 watch(
   () => fullscreen.isFullscreen.value,
   (expanded) => {
+    hideTooltip();
     if (expanded || !isTouchDevice()) return;
     if (!svgRef.value || !zoomBehavior) return;
     const svg = select(svgRef.value);
@@ -2222,7 +2293,11 @@ watch(
         @zoom-out="zoomBy(1 / ZOOM_STEP)"
         @reset="resetZoom"
       />
-      <ChoroplethTooltip v-if="hasInteractiveTooltip" ref="tooltipChildRef">
+      <ChoroplethTooltip
+        v-if="hasInteractiveTooltip"
+        ref="tooltipChildRef"
+        :mode="tooltipMode"
+      >
         <template #default="raw">
           <slot name="tooltip" v-bind="narrowSlotProps(raw)">
             <span v-if="tooltipFormat" v-html="tooltipFormat(raw)" />

package/charts/ChoroplethMap/ChoroplethTooltip.vue

@@ -8,20 +8,36 @@ export interface ChoroplethTooltipData {
   feature: unknown;
 }
 
-defineSlots<{
-  default?(props: ChoroplethTooltipData): unknown;
-}>();
+withDefaults(
+  defineProps<{
+    /**
+     * `"float"` (default) renders the classic pointer-anchored tooltip.
+     * `"sheet"` renders a bottom sheet that slides up inside the map
+     * wrapper instead — used in the expanded touch view, where it stays
+     * correctly positioned regardless of the page's pinch-zoom state
+     * (the wrapper is pinned to the visual viewport; floating fixed
+     * positioning is not).
+     */
+    mode?: "float" | "sheet";
+  }>(),
+  { mode: "float" },
+);
 
 // Local reactive state. Held inside the child so the parent's render scope
 // never subscribes to it — hover updates re-render only this small tree,
 // not the parent's 3,000+ paths.
 const data = ref<ChoroplethTooltipData | null>(null);
+const open = ref(false);
 const rootRef = useTemplateRef<HTMLDivElement>("root");
 
 defineExpose({
   setData(next: ChoroplethTooltipData | null) {
     data.value = next;
   },
+  /** Sheet-mode visibility (float mode is driven imperatively via getEl). */
+  setOpen(next: boolean) {
+    open.value = next;
+  },
   getEl(): HTMLDivElement | null {
     return rootRef.value;
   },
@@ -29,6 +45,10 @@ defineExpose({
 </script>
 
 <template>
+  <!-- Float: always mounted (the parent's ResizeObserver holds onto it);
+  its slot only renders in float mode. z-index sits one above the
+  fullscreen overlay so it stays visible while the map fills the window
+  (both live in body). -->
   <Teleport to="body">
     <div
       ref="root"
@@ -37,13 +57,47 @@ defineExpose({
         position: fixed;
         left: 0;
         top: 0;
+        z-index: calc(var(--cfasim-z-fullscreen, 1000) + 1);
         visibility: hidden;
         will-change: transform;
         pointer-events: none;
         transform: translateY(-50%);
       "
     >
-      <slot v-if="data" v-bind="data" />
+      <slot v-if="data && mode === 'float'" v-bind="data" />
     </div>
   </Teleport>
+  <!-- Sheet: rendered in place inside the map wrapper, so it anchors to
+  the (visual-viewport-pinned) expanded box. -->
+  <div
+    v-if="mode === 'sheet'"
+    class="chart-tooltip-sheet"
+    :class="{ 'is-open': open }"
+  >
+    <slot v-if="data" v-bind="data" />
+  </div>
 </template>
+
+<style scoped>
+.chart-tooltip-sheet {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  background: var(--color-bg-0, #fff);
+  color: var(--color-text, inherit);
+  border-top: 1px solid var(--color-border, #e5e7eb);
+  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.12);
+  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
+  font-size: 14px;
+  line-height: 1.4;
+  pointer-events: none;
+  transform: translateY(100%);
+  transition: transform 0.25s ease;
+}
+
+.chart-tooltip-sheet.is-open {
+  transform: translateY(0);
+}
+</style>

package/index.json

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

package/package.json

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