@cfasim-ui/docs 0.7.4 → 0.7.6

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

@@ -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.
@@ -607,6 +642,7 @@ on top with a `FocusItem`.
     geo-type="counties"
     data-geo-type="hsas"
     zoom
+    renderer="canvas"
     :touch-expand="false"
     :data="[
       { id: '060737', value: 80 },
@@ -634,6 +670,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' }]"
@@ -759,9 +796,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
@@ -769,6 +828,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"
@@ -793,7 +853,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 +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 | — |
@@ -913,6 +980,7 @@ tech).
 | `focus` | `FocusValue` | No | — |
 | `focusZoomLevel` | `number` | No | `4` |
 | `focusZoom` | `boolean` | No | `true` |
+| `renderer` | `"svg" \| "canvas"` | No | `"svg"` |
 | `fullscreenTarget` | `string \| HTMLElement` | No | — |