@cfasim-ui/docs 0.7.3 → 0.7.5

package/charts/ChartMenu/download.ts

@@ -104,6 +104,17 @@ export function savePng(svg: SVGSVGElement, filename: string) {
   img.src = url;
 }
 
+/**
+ * Downloads a rendering canvas's current contents as a PNG — no SVG
+ * round-trip. The canvas backing store is already sized at
+ * devicePixelRatio, so the export is naturally high-resolution.
+ */
+export function saveCanvasPng(canvas: HTMLCanvasElement, filename: string) {
+  canvas.toBlob((blob) => {
+    if (blob) downloadBlob(blob, `${filename}.png`);
+  }, "image/png");
+}
+
 export function downloadCsv(csv: string, filename: string) {
   downloadBlob(new Blob([csv], { type: "text/csv" }), `${filename}.csv`);
 }

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
@@ -581,6 +607,7 @@ on top with a `FocusItem`.
     geo-type="counties"
     data-geo-type="hsas"
     zoom
+    renderer="canvas"
     :touch-expand="false"
     :data="[
       { id: '060737', value: 80 },
@@ -608,6 +635,7 @@ on top with a `FocusItem`.
   geo-type="counties"
   data-geo-type="hsas"
   zoom
+  renderer="canvas"
   :touch-expand="false"
   :data="hsaData"
   :focus="[{ id: '06043' }, { id: '060737', geoType: 'hsas', style: 'dashed' }]"
@@ -733,9 +761,31 @@ Pass `tooltip-value-format` to format numeric values shown in the tooltip
   </template>
 </ComponentDemo>
 
+### Canvas rendering (`renderer="canvas"`)
+
+For dense maps — every US county, HSAs, or anything that feels sluggish on
+mobile — set `renderer="canvas"`. Instead of one DOM path per feature, the
+whole map paints into a single `<canvas>`: zooming, panning, and hover/tap
+highlights redraw in a few milliseconds regardless of feature count, and
+DOM memory stays flat. Interactions are identical (hover, click/tap
+selection, `focus`, every zoom mode and touch flow); hit-testing runs
+through an offscreen picking bitmap, so it stays pixel-accurate.
+
+Differences from the default SVG renderer:
+
+- The menu offers **Fullscreen** and **Save as PNG** only (there is no SVG
+  DOM to serialize; the PNG exports straight off the rendering canvas).
+- There is no per-feature `<title>` fallback or per-feature DOM for
+  assistive tech — configure an interactive tooltip (`tooltip-trigger` or
+  the `#tooltip` slot), or stay on SVG where that fallback matters.
+- `renderer` is fixed at mount.
+
+The dense county demo below uses it.
+
 ### Dense county map
 
-Renders every US county with a value and a custom tooltip slot.
+Renders every US county with a value and a custom tooltip slot, on the
+canvas backend.
 
 <ComponentDemo>
   <ChoroplethMap
@@ -743,6 +793,7 @@ Renders every US county with a value and a custom tooltip slot.
     geo-type="counties"
     :data="denseCountyData"
     zoom
+    renderer="canvas"
     :color-scale="{ min: '#f0f5ff', max: '#08306b' }"
     title="All US counties — tooltip perf demo"
     :height="500"
@@ -767,7 +818,13 @@ const data = countiesTopo.objects.counties.geometries.map((g, i) => ({
 }));
 </script>
 
-<ChoroplethMap :topology="countiesTopo" geo-type="counties" :data="data" zoom>
+<ChoroplethMap
+  :topology="countiesTopo"
+  geo-type="counties"
+  :data="data"
+  zoom
+  renderer="canvas"
+>
   <template #tooltip="{ id, name, value }">
     <div style="font-weight: 600">{{ name }}</div>
     <div style="opacity: 0.7; font-size: 0.85em">FIPS {{ id }}</div>
@@ -887,6 +944,7 @@ tech).
 | `focus` | `FocusValue` | No | — |
 | `focusZoomLevel` | `number` | No | `4` |
 | `focusZoom` | `boolean` | No | `true` |
+| `renderer` | `"svg" \| "canvas"` | No | `"svg"` |
 | `fullscreenTarget` | `string \| HTMLElement` | No | — |