@cfasim-ui/docs 0.4.0 → 0.4.2

package/charts/ChoroplethMap/ChoroplethTooltip.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from "vue";
+
+export interface ChoroplethTooltipData {
+  id: string;
+  name: string;
+  value?: number | string;
+  feature: unknown;
+}
+
+defineSlots<{
+  default?(props: ChoroplethTooltipData): unknown;
+}>();
+
+// Local reactive state. Held inside the child so the parent's render scope
+// never subscribes to it — hover updates re-render only this small tree,
+// not the parent's 3,000+ paths.
+const data = ref<ChoroplethTooltipData | null>(null);
+const rootRef = useTemplateRef<HTMLDivElement>("root");
+
+defineExpose({
+  setData(next: ChoroplethTooltipData | null) {
+    data.value = next;
+  },
+  getEl(): HTMLDivElement | null {
+    return rootRef.value;
+  },
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      ref="root"
+      class="chart-tooltip-content"
+      style="
+        position: fixed;
+        left: 0;
+        top: 0;
+        visibility: hidden;
+        will-change: transform;
+        pointer-events: none;
+        transform: translateY(-50%);
+      "
+    >
+      <slot v-if="data" v-bind="data" />
+    </div>
+  </Teleport>
+</template>

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 | — |

package/charts/LineChart/LineChart.vue

@@ -128,6 +128,11 @@ const props = withDefaults(
     xTickFormat?: (value: number, index: number) => string;
     /** Formatter for y-axis tick labels. Receives the raw numeric value. */
     yTickFormat?: (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;
     /**
      * @deprecated Use `xTickFormat` (e.g. `(_, i) => labels[i]`) together
      * with `xTicks` for explicit control. Still honored for tooltip x-labels
@@ -138,8 +143,12 @@ const props = withDefaults(
     menu?: boolean | string;
     xGrid?: boolean;
     yGrid?: 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. Default: 'hover' */
     tooltipTrigger?: "hover" | "click";
     /**
@@ -216,6 +225,12 @@ function resolveSeries(s: Series): ResolvedSeries {
   return { ...s, data: s.y ?? s.data ?? EMPTY_DATA };
 }
 
+function formatTooltipValue(v: number): string {
+  if (props.tooltipValueFormat) return props.tooltipValueFormat(v);
+  if (props.yTickFormat) return props.yTickFormat(v);
+  return formatTick(v);
+}
+
 const allSeries = computed<ResolvedSeries[]>(() => {
   if (props.series && props.series.length > 0)
     return props.series.map(resolveSeries);
@@ -1122,7 +1137,7 @@ const {
               class="line-chart-tooltip-swatch"
               :style="{ background: v.color }"
             />
-            {{ isFinite(v.value) ? formatTick(v.value) : "—" }}
+            {{ isFinite(v.value) ? formatTooltipValue(v.value) : "—" }}
           </div>
         </div>
       </slot>

package/index.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.0",
+  "version": "0.4.2",
   "package": "@cfasim-ui/docs",
   "content": {
     "components": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfasim-ui/docs",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "LLM-friendly component and chart documentation for cfasim-ui",
   "license": "Apache-2.0",
   "repository": {