@cfasim-ui/docs 0.3.18 → 0.4.1

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

@@ -322,6 +322,47 @@ 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 when
+`tooltip-trigger` is set). Use `tooltip-format` instead if you want full
+control over the tooltip's HTML.
+
+<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>
+
 ## Props
 
 | Prop | Type | Required | Default |
@@ -346,6 +387,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"` |
 
 

package/charts/ChoroplethMap/ChoroplethMap.vue

@@ -82,6 +82,12 @@ const props = withDefaults(
       name: string;
       value?: number | string;
     }) => string;
+    /**
+     * Formatter for numeric values shown in the default tooltip. Receives
+     * the raw value. Ignored when `tooltipFormat` is provided (the caller
+     * controls the entire tooltip in that case).
+     */
+    tooltipValueFormat?: (value: number) => string;
     /**
      * Boundary for tooltip flip/clamp. `"none"` always places to the right of
      * the pointer with no clamping. `"chart"` (default) uses the map
@@ -392,6 +398,14 @@ function stateValue(
   return dataMap.value.get(String(feat.id));
 }
 
+function formatTooltipValue(value: number | string | undefined): string {
+  if (value == null) return "";
+  if (typeof value === "number" && props.tooltipValueFormat) {
+    return props.tooltipValueFormat(value);
+  }
+  return String(value);
+}
+
 const featMap = computed(() => {
   const m = new Map<string, (typeof featuresGeo.value.features)[number]>();
   for (const f of featuresGeo.value.features) m.set(String(f.id), f);
@@ -429,8 +443,10 @@ function showTooltip(
   const data = { id: String(feat.id), name, value };
   if (props.tooltipFormat) {
     tooltipEl.innerHTML = props.tooltipFormat(data);
+  } else if (value == null) {
+    tooltipEl.textContent = name;
   } else {
-    tooltipEl.textContent = value != null ? `${name}: ${value}` : name;
+    tooltipEl.textContent = `${name}: ${formatTooltipValue(value)}`;
   }
   const chartRect = containerRef.value?.getBoundingClientRect();
   const { left, top } = placeTooltip(
@@ -643,7 +659,11 @@ const menuItems = computed<ChartMenuItem[]>(() => {
         >
           <title v-if="!tooltipTrigger">
             {{ stateName(feat)
-            }}{{ stateValue(feat) != null ? `: ${stateValue(feat)}` : "" }}
+            }}{{
+              stateValue(feat) != null
+                ? `: ${formatTooltipValue(stateValue(feat))}`
+                : ""
+            }}
           </title>
         </path>
         <path

package/charts/DataTable/DataTable.md

@@ -87,19 +87,48 @@ A table for displaying columnar data. Accepts a plain record of arrays or a `Mod
   </template>
 </ComponentDemo>
 
-### Download data link
+### Full width
 
-Pass `download-link` to render a plain text link below the table for
-downloading the CSV data. Set it to `true` for the default label or a
-string to customize it. When set, the Download CSV menu item is hidden.
-Use `filename` to control the downloaded filename, and `csv` to supply
-custom CSV content.
+By default the table sizes to its content (columns default to a fixed
+medium width, so they're evenly spaced). Pass `full-width` to stretch the
+table to fill its container; columns without an explicit width will share
+the available space equally.
+
+<ComponentDemo>
+  <DataTable
+    :data="{ day: [0, 1, 2, 3, 4], susceptible: [1000, 980, 945, 900, 860], infected: [1, 21, 56, 101, 141] }"
+    full-width
+  />
+
+<template #code>
+
+```vue
+<DataTable
+  :data="{
+    day: [0, 1, 2, 3, 4],
+    susceptible: [1000, 980, 945, 900, 860],
+    infected: [1, 21, 56, 101, 141],
+  }"
+  full-width
+/>
+```
+
+  </template>
+</ComponentDemo>
+
+### Download menu
+
+A `⋯` menu appears in the top-right corner of every table with a
+**Download** item that exports the data as CSV. Use `download-menu-link`
+to customize the menu item label, `filename` to control the downloaded
+filename, and `csv` to supply custom CSV content. Pass `:menu="false"`
+to hide the menu entirely.
 
 <ComponentDemo>
   <DataTable
     :data="{ day: [0, 1, 2, 3, 4], cases: [1, 21, 56, 101, 141] }"
     filename="sir-cases"
-    download-link="Download cases (CSV)"
+    download-menu-link="Download cases (CSV)"
   />
 
 <template #code>
@@ -111,7 +140,7 @@ custom CSV content.
     cases: [1, 21, 56, 101, 141],
   }"
   filename="sir-cases"
-  download-link="Download cases (CSV)"
+  download-menu-link="Download cases (CSV)"
 />
 ```
 
@@ -128,7 +157,8 @@ custom CSV content.
 | `menu` | `boolean \| string` | No | `true` |
 | `csv` | `string \| (() =&gt; string)` | No | — |
 | `filename` | `string` | No | — |
-| `downloadLink` | `boolean \| string` | No | — |
+| `downloadMenuLink` | `string` | No | `"Download"` |
+| `fullWidth` | `boolean` | No | `false` |
 
 
 ### ColumnConfig

package/charts/DataTable/DataTable.vue

@@ -31,22 +31,22 @@ const props = withDefaults(
     columnConfig?: Record<string, ColumnConfig>;
     menu?: boolean | string;
     /**
-     * Custom CSV content for the Download CSV menu item and download link.
-     * Can be a raw CSV string or a function returning one. When omitted, CSV
-     * is generated from the table data.
+     * Custom CSV content for the Download menu item. Can be a raw CSV string
+     * or a function returning one. When omitted, CSV is generated from the
+     * table data.
      */
     csv?: string | (() => string);
     /** Filename (without extension) for downloaded CSV files. */
     filename?: string;
     /**
-     * Show a plain text link below the table to download the CSV data.
-     * Pass `true` for the default label ("Download data (CSV)") or a string
-     * to customize the link text. When set, the Download CSV menu item is
-     * hidden.
+     * Label for the Download item in the table's top-right menu.
+     * Defaults to "Download".
      */
-    downloadLink?: boolean | string;
+    downloadMenuLink?: string;
+    /** Stretch the table to fill its container's width. */
+    fullWidth?: boolean;
   }>(),
-  { menu: true },
+  { menu: true, fullWidth: false, downloadMenuLink: "Download" },
 );
 
 function columnLabel(name: string): string {
@@ -55,7 +55,10 @@ function columnLabel(name: string): string {
 
 function columnStyle(name: string): Record<string, string> | undefined {
   const w = props.columnConfig?.[name]?.width;
-  if (w == null) return undefined;
+  if (w == null) {
+    if (props.fullWidth) return undefined;
+    return { width: COLUMN_WIDTHS.medium, minWidth: COLUMN_WIDTHS.medium };
+  }
   const value = typeof w === "number" ? `${w}px` : COLUMN_WIDTHS[w];
   return { width: value, minWidth: value };
 }
@@ -135,36 +138,24 @@ function toCsv(): string {
   return lines.join("\n");
 }
 
-const menuItems = computed<ChartMenuItem[]>(() => {
-  if (props.downloadLink) return [];
-  return [
-    {
-      label: "Download CSV",
-      action: () => downloadCsv(toCsv(), menuFilename()),
-    },
-  ];
-});
-
-const downloadLinkText = computed(() => {
-  if (!props.downloadLink) return null;
-  return typeof props.downloadLink === "string"
-    ? props.downloadLink
-    : "Download data (CSV)";
-});
-
-const csvHref = computed(() => {
-  if (!props.downloadLink) return null;
-  return `data:text/csv;charset=utf-8,${encodeURIComponent(toCsv())}`;
-});
+const menuItems = computed<ChartMenuItem[]>(() => [
+  {
+    label: props.downloadMenuLink,
+    action: () => downloadCsv(toCsv(), menuFilename()),
+  },
+]);
 
-const showMenu = computed(() => props.menu && menuItems.value.length > 0);
+const showMenu = computed(() => Boolean(props.menu));
 </script>
 
 <template>
-  <div class="TableOuter" :class="{ 'has-menu': showMenu }">
-    <ChartMenu v-if="showMenu" :items="menuItems" />
+  <div
+    class="TableOuter"
+    :class="{ 'full-width': fullWidth, 'has-menu': showMenu }"
+  >
+    <ChartMenu v-if="showMenu" :items="menuItems" force-dropdown />
     <div class="TableWrapper">
-      <table class="Table">
+      <table class="Table" :class="{ 'full-width': fullWidth }">
         <colgroup>
           <col
             v-for="col in columns"
@@ -197,14 +188,6 @@ const showMenu = computed(() => props.menu && menuItems.value.length > 0);
         </tbody>
       </table>
     </div>
-    <a
-      v-if="downloadLinkText"
-      class="data-table-download-link"
-      :href="csvHref!"
-      :download="`${menuFilename()}.csv`"
-    >
-      {{ downloadLinkText }}
-    </a>
   </div>
 </template>
 
@@ -214,17 +197,8 @@ const showMenu = computed(() => props.menu && menuItems.value.length > 0);
   display: inline-block;
 }
 
-.TableOuter.has-menu {
-  margin-top: 32px;
-}
-
-.TableOuter :deep(.chart-menu-trigger-area) {
-  top: -32px;
-  right: 0;
-}
-
-.TableOuter:hover :deep(.chart-menu-button) {
-  opacity: 1;
+.TableOuter.full-width {
+  display: block;
 }
 
 .TableWrapper {
@@ -238,6 +212,11 @@ const showMenu = computed(() => props.menu && menuItems.value.length > 0);
   border-collapse: collapse;
   font-variant-numeric: tabular-nums;
   border: 1px solid var(--color-border);
+  table-layout: fixed;
+}
+
+.Table.full-width {
+  width: 100%;
 }
 
 .Table tr,
@@ -251,6 +230,7 @@ const showMenu = computed(() => props.menu && menuItems.value.length > 0);
 .Table td {
   padding: 0.75em 1.25em;
   white-space: nowrap;
+  text-align: left;
 }
 
 .Table th {
@@ -268,10 +248,16 @@ const showMenu = computed(() => props.menu && menuItems.value.length > 0);
   border-bottom: none;
 }
 
-.data-table-download-link {
-  display: block;
-  text-align: right;
-  font-size: var(--font-size-sm);
-  margin-top: 0.25em;
+.TableOuter :deep(.chart-menu-trigger-area) {
+  top: 4px;
+  right: 4px;
+}
+
+.TableOuter :deep(.chart-menu-button) {
+  opacity: 1;
+}
+
+.TableOuter.has-menu .Table thead th:last-child {
+  padding-right: 2.5em;
 }
 </style>

package/charts/LineChart/LineChart.md

@@ -100,7 +100,7 @@ When `x` is omitted, `y`/`data` values are plotted at indices 0, 1, 2, etc.
 
 ### Tooltip
 
-Hover over the chart to see a tooltip with values at each data point. Set `tooltip-trigger="hover"` to enable the built-in tooltip with crosshair and highlight dots. Use the `#tooltip` slot for custom content.
+Hover over the chart to see a tooltip with values at each data point. Set `tooltip-trigger="hover"` to enable the built-in tooltip with crosshair and highlight dots. Use the `#tooltip` slot for custom content. Pass `tooltip-value-format` to control how numeric values render (e.g. percentages, currency); it falls back to `y-tick-format` when omitted.
 
 <ComponentDemo>
   <LineChart
@@ -462,12 +462,13 @@ until the user clicks Download:
 | `yTicks` | `number \| number[]` | No | — |
 | `xTickFormat` | `(value: number, index: number) =&gt; string` | No | — |
 | `yTickFormat` | `(value: number) =&gt; string` | No | — |
+| `tooltipValueFormat` | `(value: number) =&gt; string` | No | — |
 | `xLabels` | `string[]` | No | — |
 | `debounce` | `number` | No | — |
 | `menu` | `boolean \| string` | No | `true` |
 | `xGrid` | `boolean` | No | — |
 | `yGrid` | `boolean` | No | — |
-| `tooltipData` | `unknown[]` | No | — |
+| `tooltipData` | `ArrayLike&lt;unknown&gt;` | No | — |
 | `tooltipTrigger` | `"hover" \| "click"` | No | — |
 | `tooltipClamp` | `"none" \| "chart" \| "window"` | No | `"chart"` |
 | `csv` | `string \| (() =&gt; string)` | No | — |