@cfasim-ui/docs 0.4.0 → 0.4.2

package/charts/BarChart/BarChart.md

@@ -130,13 +130,17 @@ menu, and CSV export wiring with [`LineChart`](./line-chart).
 
 ### Custom value tick format
 
+Use `value-tick-format` to format the value-axis labels. `tooltip-value-format` controls the tooltip values independently; if omitted, the tooltip uses `value-tick-format`.
+
 <ComponentDemo>
   <BarChart
     :data="[0.12, 0.34, 0.56, 0.78]"
     :categories="['A', 'B', 'C', 'D']"
     :value-tick-format="(v) => `${(v * 100).toFixed(0)}%`"
+    :tooltip-value-format="(v) => `${(v * 100).toFixed(1)}%`"
     :height="220"
     y-label="Coverage"
+    tooltip-trigger="hover"
   />
 
 <template #code>
@@ -146,8 +150,10 @@ menu, and CSV export wiring with [`LineChart`](./line-chart).
   :data="[0.12, 0.34, 0.56, 0.78]"
   :categories="['A', 'B', 'C', 'D']"
   :value-tick-format="(v) => `${(v * 100).toFixed(0)}%`"
+  :tooltip-value-format="(v) => `${(v * 100).toFixed(1)}%`"
   :height="220"
   y-label="Coverage"
+  tooltip-trigger="hover"
 />
 ```
 
@@ -174,13 +180,14 @@ menu, and CSV export wiring with [`LineChart`](./line-chart).
 | `valueMin` | `number` | No | `0` |
 | `valueTicks` | `number \| number[]` | No | — |
 | `valueTickFormat` | `(value: number) =&gt; string` | No | — |
+| `tooltipValueFormat` | `(value: number) =&gt; string` | No | — |
 | `categoryFormat` | `(label: string, index: number) =&gt; string` | No | — |
 | `barPadding` | `number` | No | `0.2` |
 | `groupGap` | `number` | No | `1` |
 | `debounce` | `number` | No | — |
 | `menu` | `boolean \| string` | No | `true` |
 | `valueGrid` | `boolean` | No | `true` |
-| `tooltipData` | `unknown[]` | No | — |
+| `tooltipData` | `ArrayLike&lt;unknown&gt;` | No | — |
 | `tooltipTrigger` | `"hover" \| "click"` | No | — |
 | `tooltipClamp` | `"none" \| "chart" \| "window"` | No | `"chart"` |
 | `csv` | `string \| (() =&gt; string)` | No | — |

package/charts/BarChart/BarChart.vue

@@ -57,6 +57,11 @@ const props = withDefaults(
     valueTicks?: number | number[];
     /** Formatter for value-axis tick labels. */
     valueTickFormat?: (value: number) => string;
+    /**
+     * Formatter for numeric values shown in the default tooltip. Receives
+     * the raw value. Defaults to the same tick formatter used for axes.
+     */
+    tooltipValueFormat?: (value: number) => string;
     /** Formatter for category-axis labels. Receives the resolved category string. */
     categoryFormat?: (label: string, index: number) => string;
     /**
@@ -72,8 +77,12 @@ const props = withDefaults(
     debounce?: number;
     menu?: boolean | string;
     valueGrid?: boolean;
-    /** Custom per-index data passed to the tooltip slot. */
-    tooltipData?: unknown[];
+    /**
+     * Custom per-index data passed to the tooltip slot. Accepts a plain
+     * array or any `ArrayLike` (e.g. a typed array column from a
+     * `ModelOutput`).
+     */
+    tooltipData?: ArrayLike<unknown>;
     /** Tooltip activation mode. */
     tooltipTrigger?: "hover" | "click";
     /** Boundary for tooltip flip/clamp. Default "chart". */
@@ -399,6 +408,12 @@ function defaultColor(i: number): string {
   return DEFAULT_COLORS[i % DEFAULT_COLORS.length];
 }
 
+function formatTooltipValue(v: number): string {
+  if (props.tooltipValueFormat) return props.tooltipValueFormat(v);
+  if (props.valueTickFormat) return props.valueTickFormat(v);
+  return formatTick(v);
+}
+
 const valueTickItems = computed(() => {
   const { min, max } = valueExtent.value;
   const fmt = (v: number) =>
@@ -775,7 +790,7 @@ const hoverBand = computed(() => {
               class="bar-chart-tooltip-swatch"
               :style="{ background: v.color }"
             />
-            {{ isFinite(v.value) ? formatTick(v.value) : "—" }}
+            {{ isFinite(v.value) ? formatTooltipValue(v.value) : "—" }}
           </div>
         </div>
       </slot>

package/charts/ChartMenu/ChartMenu.vue

@@ -12,16 +12,23 @@ export interface ChartMenuItem {
   action: () => void;
 }
 
-defineProps<{
-  items: ChartMenuItem[];
-}>();
+const props = withDefaults(
+  defineProps<{
+    items: ChartMenuItem[];
+    /** Force the dropdown style even when only one item is provided. */
+    forceDropdown?: boolean;
+  }>(),
+  { forceDropdown: false },
+);
+
+const useDropdown = () => props.forceDropdown || props.items.length > 1;
 </script>
 
 <template>
   <div class="chart-menu-trigger-area">
     <!-- Single item: plain button -->
     <button
-      v-if="items.length === 1"
+      v-if="!useDropdown()"
       class="chart-menu-button chart-menu-single"
       :aria-label="items[0].label"
       @click="items[0].action"

package/charts/ChoroplethMap/ChoroplethMap.md

@@ -1,3 +1,18 @@
+<script setup>
+import { computed } 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,
+  }));
+});
+</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,6 +337,150 @@ Set `geoType="hsas"` to render Health Service Area boundaries. HSAs are dissolve
   </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). Use the
+`#tooltip` slot if you want full control over the tooltip's content.
+
+<ComponentDemo>
+  <ChoroplethMap
+    :topology="statesTopo"
+    :data="[
+      { id: '06', value: 39538223 },
+      { id: '48', value: 29145505 },
+      { id: '12', value: 21538187 },
+      { id: '36', value: 20201249 },
+    ]"
+    :tooltip-value-format="(v) => v.toLocaleString('en-US')"
+    title="US population (2020)"
+    :height="300"
+  />
+
+<template #code>
+
+```vue
+<ChoroplethMap
+  :topology="statesTopo"
+  :data="[
+    { id: '06', value: 39538223 },
+    { id: '48', value: 29145505 },
+    { id: '12', value: 21538187 },
+    { id: '36', value: 20201249 },
+  ]"
+  :tooltip-value-format="(v) => v.toLocaleString('en-US')"
+  title="US population (2020)"
+  :height="300"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
+### Dense county map (~3,143 features) for tooltip perf profiling
+
+Renders every US county with a value and a custom tooltip slot. Useful as a
+manual perf harness — open DevTools Performance, record a hover/sweep across
+many counties, and inspect tooltip update cost. The tooltip element is
+mounted once and patched in place; `mousemove` writes the position
+straight to the DOM.
+
+<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 |
@@ -346,6 +505,7 @@ Set `geoType="hsas"` to render Health Service Area boundaries. HSAs are dissolve
       id: string` | No | — |
 | `name` | `string` | Yes | — |
 | `value` | `number \| string` | No | — |
+| `tooltipValueFormat` | `(value: number) =&gt; string` | No | — |
 | `tooltipClamp` | `"none" \| "chart" \| "window"` | No | `"chart"` |