@cfasim-ui/docs 0.4.1 → 0.4.3

package/charts/ChoroplethMap/ChoroplethMap.md

@@ -1,3 +1,23 @@
+<script setup>
+import { computed, ref } from "vue";
+import countiesTopoForPerf from "us-atlas/counties-10m.json";
+
+// Build one row per county (~3,143) with a deterministic-ish value so the
+// perf example can render every region with a custom tooltip.
+const denseCountyData = computed(() => {
+  const geoms = countiesTopoForPerf.objects.counties.geometries;
+  return geoms.map((g, i) => ({
+    id: String(g.id).padStart(5, "0"),
+    value: (i * 37) % 100,
+  }));
+});
+
+// Focus demo state — bound directly to v-model:focus. The component
+// handles click-to-toggle and emits null when the focused feature is
+// re-clicked.
+const focused = ref(null);
+</script>
+
 # ChoroplethMap
 
 A US choropleth map using D3's Albers USA projection, which repositions Alaska and Hawaii to the bottom left. Supports state-level, county-level, and HSA-level (Health Service Areas) rendering via the `geoType` prop.
@@ -322,12 +342,76 @@ Set `geoType="hsas"` to render Health Service Area boundaries. HSAs are dissolve
   </template>
 </ComponentDemo>
 
+### Click to focus (`v-model:focus`)
+
+Bind the `focus` prop to pan and zoom to a specific feature. Pass a feature
+id (FIPS code, HSA code, or name) — or an array of ids to focus on a region.
+With `v-model:focus`, clicking an unfocused feature focuses it and clicking
+the focused feature toggles back off. If a tooltip is configured, focusing
+shows that feature's tooltip. Users can pan/zoom freely around the focused
+area; the built-in **Reset** button clears focus and snaps back.
+
+Counties are tiny without a zoom — focus is a natural fit for drill-down.
+
+<ComponentDemo>
+  <ChoroplethMap
+    :topology="countiesTopo"
+    geo-type="counties"
+    v-model:focus="focused"
+    :focus-zoom-level="8"
+    :data="[
+      { id: '06037', value: 100 },
+      { id: '06073', value: 80 },
+      { id: '36061', value: 90 },
+      { id: '17031', value: 85 },
+      { id: '48201', value: 65 },
+      { id: '04013', value: 60 },
+      { id: '12086', value: 55 },
+      { id: '53033', value: 50 },
+    ]"
+    title="Click a county to focus"
+    :legend-title="'Cases'"
+    :height="400"
+  >
+    <template #tooltip="{ name, value }">
+      <div style="font-weight: 600">{{ name }}</div>
+      <div v-if="value != null">Cases: {{ value }}</div>
+      <div v-else style="opacity: 0.6">No data</div>
+    </template>
+  </ChoroplethMap>
+
+<template #code>
+
+```vue
+<script setup>
+import { ref } from "vue";
+const focused = ref(null);
+</script>
+
+<ChoroplethMap
+  :topology="countiesTopo"
+  geo-type="counties"
+  v-model:focus="focused"
+  :focus-zoom-level="8"
+  :data="data"
+  title="Click a county to focus"
+>
+  <template #tooltip="{ name, value }">
+    <div style="font-weight: 600">{{ name }}</div>
+    <div v-if="value != null">Cases: {{ value }}</div>
+    <div v-else style="opacity: 0.6">No data</div>
+  </template>
+</ChoroplethMap>
+```
+
+  </template>
+</ComponentDemo>
+
 ### Custom tooltip number format
 
 Pass `tooltip-value-format` to format numeric values shown in the tooltip
-(both the native SVG `<title>` and the interactive HTML tooltip when
-`tooltip-trigger` is set). Use `tooltip-format` instead if you want full
-control over the tooltip's HTML.
+(both the native SVG `<title>` and the interactive HTML tooltip). Use the
+`#tooltip` slot if you want full control over the tooltip's content.
 
 <ComponentDemo>
   <ChoroplethMap
@@ -363,6 +447,106 @@ control over the tooltip's HTML.
   </template>
 </ComponentDemo>
 
+### Dense county map
+
+Renders every US county with a value and a custom tooltip slot.
+
+<ComponentDemo>
+  <ChoroplethMap
+    :topology="countiesTopo"
+    geo-type="counties"
+    :data="denseCountyData"
+    :pan="true"
+    :zoom="true"
+    :color-scale="{ min: '#f0f5ff', max: '#08306b' }"
+    title="All US counties — tooltip perf demo"
+    :height="500"
+  >
+    <template #tooltip="{ id, name, value }">
+      <div style="font-weight: 600">{{ name }}</div>
+      <div style="opacity: 0.7; font-size: 0.85em">FIPS {{ id }}</div>
+      <div>Value: {{ value }}</div>
+    </template>
+  </ChoroplethMap>
+
+<template #code>
+
+```vue
+<script setup>
+import countiesTopo from "us-atlas/counties-10m.json";
+
+// One row per county
+const data = countiesTopo.objects.counties.geometries.map((g, i) => ({
+  id: String(g.id).padStart(5, "0"),
+  value: (i * 37) % 100,
+}));
+</script>
+
+<ChoroplethMap
+  :topology="countiesTopo"
+  geo-type="counties"
+  :data="data"
+  pan
+  zoom
+>
+  <template #tooltip="{ id, name, value }">
+    <div style="font-weight: 600">{{ name }}</div>
+    <div style="opacity: 0.7; font-size: 0.85em">FIPS {{ id }}</div>
+    <div>Value: {{ value }}</div>
+  </template>
+</ChoroplethMap>
+```
+
+  </template>
+</ComponentDemo>
+
+### Custom tooltip content (`#tooltip` slot)
+
+Use the `#tooltip` slot to render any Vue template — components, scoped
+styles, multi-line layouts — instead of the default `name: value`. The slot
+receives `{ id, name, value, feature }` for the hovered region. Providing the
+slot automatically enables interactive (HTML) tooltips, so you don't need to
+set `tooltip-trigger`.
+
+<ComponentDemo>
+  <ChoroplethMap
+    :topology="statesTopo"
+    :data="[
+      { id: '06', value: 39538223 },
+      { id: '48', value: 29145505 },
+      { id: '12', value: 21538187 },
+      { id: '36', value: 20201249 },
+      { id: '17', value: 12812508 },
+    ]"
+    title="US population (2020)"
+    :height="300"
+  >
+    <template #tooltip="{ name, value }">
+      <div style="font-weight:600">{{ name }}</div>
+      <div v-if="typeof value === 'number'">
+        Pop: {{ value.toLocaleString('en-US') }}
+      </div>
+      <div v-else style="opacity:0.6">No data</div>
+    </template>
+  </ChoroplethMap>
+
+<template #code>
+
+```vue
+<ChoroplethMap :topology="statesTopo" :data="data" title="US population (2020)">
+  <template #tooltip="{ name, value }">
+    <div style="font-weight: 600">{{ name }}</div>
+    <div v-if="typeof value === 'number'">
+      Pop: {{ value.toLocaleString("en-US") }}
+    </div>
+    <div v-else style="opacity: 0.6">No data</div>
+  </template>
+</ChoroplethMap>
+```
+
+  </template>
+</ComponentDemo>
+
 ## Props
 
 | Prop | Type | Required | Default |
@@ -389,6 +573,8 @@ control over the tooltip's HTML.
 | `value` | `number \| string` | No | — |
 | `tooltipValueFormat` | `(value: number) =&gt; string` | No | — |
 | `tooltipClamp` | `"none" \| "chart" \| "window"` | No | `"chart"` |
+| `focus` | `string \| string[] \| null` | No | — |
+| `focusZoomLevel` | `number` | No | `4` |
 
 
 ### StateData