@cfasim-ui/docs 0.4.10 → 0.4.11

package/charts/BarChart/BarChart.vue

@@ -13,10 +13,12 @@ import {
   useChartFoundation,
   makeTooltipValueFormatter,
   ChartAnnotations,
+  INLINE_LEGEND_ROW_HEIGHT,
   type ChartData,
   type ChartCommonProps,
   type ChartHoverPayload,
   type ChartTooltipBaseProps,
+  type ChartTooltipValue,
 } from "../_shared/index.js";
 
 export type BarChartData = ChartData;
@@ -29,6 +31,16 @@ export interface BarSeries {
   opacity?: number;
   /** Label shown in the inline legend. */
   legend?: string;
+  /**
+   * Whether this series appears in the inline legend. Defaults to true.
+   * Has no effect when `legend` is unset (no legend entry to begin with).
+   */
+  showInLegend?: boolean;
+  /**
+   * Whether this series contributes a value to the tooltip. Defaults to
+   * true. The bars are still drawn.
+   */
+  showInTooltip?: boolean;
 }
 
 interface BarChartProps extends ChartCommonProps {
@@ -104,8 +116,6 @@ defineSlots<{
   tooltip?(props: ChartTooltipBaseProps & { category: string }): unknown;
 }>();
 
-const hasInlineLegend = computed(() => allSeries.value.some((s) => s.legend));
-
 const EMPTY_DATA: readonly number[] = [];
 
 type ResolvedSeries = {
@@ -113,6 +123,8 @@ type ResolvedSeries = {
   color?: string;
   opacity?: number;
   legend?: string;
+  showInLegend?: boolean;
+  showInTooltip?: boolean;
 };
 
 function resolveSeries(s: BarSeries): ResolvedSeries {
@@ -121,6 +133,8 @@ function resolveSeries(s: BarSeries): ResolvedSeries {
     color: s.color,
     opacity: s.opacity,
     legend: s.legend,
+    showInLegend: s.showInLegend,
+    showInTooltip: s.showInTooltip,
   };
 }
 
@@ -462,12 +476,16 @@ interface InlineLegendItem {
 const inlineLegendItems = computed<InlineLegendItem[]>(() => {
   const items: InlineLegendItem[] = [];
   allSeries.value.forEach((s, i) => {
-    if (!s.legend) return;
+    if (!s.legend || s.showInLegend === false) return;
     items.push({ label: s.legend, color: s.color ?? defaultColor(i) });
   });
   return items;
 });
 
+const inlineLegendLabels = computed(() =>
+  inlineLegendItems.value.map((item) => item.label),
+);
+
 function toCsv(): string {
   if (typeof props.csv === "function") return props.csv();
   if (typeof props.csv === "string") return props.csv;
@@ -514,6 +532,7 @@ const {
   height,
   padding,
   legendY,
+  inlineLegendLayout,
   innerW,
   innerH,
   bounds,
@@ -525,6 +544,7 @@ const {
   downloadLinkText,
   csvHref,
   menuFilename,
+  isFullscreen,
 } = useChartFoundation({
   width: () => props.width,
   height: () => props.height,
@@ -538,7 +558,7 @@ const {
   filename: () => props.filename,
   downloadLink: () => props.downloadLink,
   chartPadding: () => props.chartPadding,
-  hasInlineLegend: () => hasInlineLegend.value,
+  inlineLegendLabels: () => inlineLegendLabels.value,
   hasTooltipSlot: () => hasTooltipSlot.value,
   getCsv: toCsv,
   pointerToIndex,
@@ -554,14 +574,21 @@ const hoveredCategoryLabel = computed(() => {
 const hoverSlotProps = computed(() => {
   const idx = hoverIndex.value;
   if (idx === null) return null;
-  return {
-    index: idx,
-    category: categoryLabels.value[idx] ?? String(idx),
-    values: allSeries.value.map((s, i) => ({
+  const series = allSeries.value;
+  const values: ChartTooltipValue[] = [];
+  for (let i = 0; i < series.length; i++) {
+    const s = series[i];
+    if (s.showInTooltip === false) continue;
+    values.push({
       value: Number(s.data[idx] ?? NaN),
       color: s.color ?? defaultColor(i),
       seriesIndex: i,
-    })),
+    });
+  }
+  return {
+    index: idx,
+    category: categoryLabels.value[idx] ?? String(idx),
+    values,
     data: props.tooltipData?.[idx] ?? null,
   };
 });
@@ -586,11 +613,36 @@ const hoverBand = computed(() => {
     h: slotSize.value,
   };
 });
+
+/**
+ * Legend items joined with their wrapped pixel positions. `x` is the
+ * left edge of the indicator; `y` is the center of the row.
+ */
+const positionedLegendItems = computed(() => {
+  const positions = inlineLegendLayout.value.positions;
+  const pad = padding.value.left;
+  const baseY = legendY.value;
+  return inlineLegendItems.value.map((item, i) => {
+    const pos = positions[i];
+    return {
+      ...item,
+      x: pad + pos.x,
+      y: baseY + pos.row * INLINE_LEGEND_ROW_HEIGHT,
+    };
+  });
+});
 </script>
 
 <template>
-  <div ref="containerRef" class="bar-chart-wrapper">
+  <div
+    ref="containerRef"
+    class="bar-chart-wrapper"
+    :class="{ 'is-fullscreen': isFullscreen }"
+  >
     <ChartMenu v-if="menu" :items="menuItems" />
+    <div class="chart-sr-only" aria-live="polite">
+      {{ isFullscreen ? "Chart expanded to fill window" : "" }}
+    </div>
     <svg ref="svgRef" :width="width" :height="height">
       <!-- title -->
       <text
@@ -605,18 +657,18 @@ const hoverBand = computed(() => {
         {{ title }}
       </text>
       <!-- inline legend -->
-      <g v-if="inlineLegendItems.length > 0">
-        <template v-for="(item, i) in inlineLegendItems" :key="'ileg' + i">
+      <g v-if="positionedLegendItems.length > 0">
+        <template v-for="(item, i) in positionedLegendItems" :key="'ileg' + i">
           <rect
-            :x="padding.left + i * 120"
-            :y="legendY - 5"
+            :x="item.x"
+            :y="item.y - 5"
             width="12"
             height="10"
             :fill="item.color"
           />
           <text
-            :x="padding.left + i * 120 + 18"
-            :y="legendY + 4"
+            :x="item.x + 18"
+            :y="item.y + 4"
             font-size="11"
             fill="currentColor"
           >
@@ -837,10 +889,6 @@ const hoverBand = computed(() => {
   width: 100%;
 }
 
-.bar-chart-wrapper:hover :deep(.chart-menu-button) {
-  opacity: 1;
-}
-
 .bar-chart-tooltip-label {
   font-weight: 600;
   margin-bottom: 0.25em;

package/charts/ChartMenu/ChartMenu.vue

@@ -10,6 +10,8 @@ import {
 export interface ChartMenuItem {
   label: string;
   action: () => void;
+  /** Sets aria-pressed on the menu item — use for toggle-style items. */
+  ariaPressed?: boolean;
 }
 
 const props = withDefaults(
@@ -72,6 +74,7 @@ const useDropdown = () => props.forceDropdown || props.items.length > 1;
             v-for="item in items"
             :key="item.label"
             class="chart-menu-item"
+            :aria-pressed="item.ariaPressed"
             @select="item.action"
           >
             {{ item.label }}

package/charts/ChoroplethMap/ChoroplethMap.vue

@@ -21,6 +21,7 @@ import { fipsToHsa, hsaNames } from "./hsaMapping.js";
 import ChartMenu from "../ChartMenu/ChartMenu.vue";
 import type { ChartMenuItem } from "../ChartMenu/ChartMenu.vue";
 import { saveSvg, savePng } from "../ChartMenu/download.js";
+import { useChartFullscreen } from "../_shared/index.js";
 import { placeTooltip } from "../tooltip-position.js";
 import ChoroplethTooltip from "./ChoroplethTooltip.vue";
 
@@ -1298,9 +1299,12 @@ const gradientCss = computed(() => {
   return `linear-gradient(to right, ${stops})`;
 });
 
+const fullscreen = useChartFullscreen();
+
 const menuItems = computed<ChartMenuItem[]>(() => {
   const fname = menuFilename();
   return [
+    fullscreen.menuItem.value,
     {
       label: "Save as SVG",
       action: () => {
@@ -1360,8 +1364,17 @@ watch(
 </script>
 
 <template>
-  <div ref="containerRef" :class="['choropleth-wrapper', { pannable: pan }]">
+  <div
+    ref="containerRef"
+    :class="[
+      'choropleth-wrapper',
+      { pannable: pan, 'is-fullscreen': fullscreen.isFullscreen.value },
+    ]"
+  >
     <ChartMenu v-if="menu" :items="menuItems" />
+    <div class="chart-sr-only" aria-live="polite">
+      {{ fullscreen.isFullscreen.value ? "Map expanded to fill window" : "" }}
+    </div>
     <!--
       Title + legend live as an HTML overlay on top of the SVG so they keep
       their intrinsic px sizes regardless of how the browser scales the
@@ -1476,10 +1489,6 @@ watch(
   cursor: grabbing;
 }
 
-.choropleth-wrapper:hover :deep(.chart-menu-button) {
-  opacity: 1;
-}
-
 .state-path {
   cursor: pointer;
 }

package/charts/LineChart/LineChart.md

@@ -98,6 +98,46 @@ When `x` is omitted, `y`/`data` values are plotted at indices 0, 1, 2, etc.
   </template>
 </ComponentDemo>
 
+### Legend
+
+Set `legend` on a series to add an entry to the inline legend strip above the plot. When the items don't all fit on one row at the chart's current width, the legend wraps to additional rows and the plot area shrinks to keep the legend clear of the data. Use `showInLegend: false` to keep a series off the legend (e.g. when its `legend` string is reused as a CSV column header) and `showInTooltip: false` to omit it from the hover tooltip.
+
+<ComponentDemo>
+  <LineChart
+    :series="[
+      { data: [0, 12, 28, 45, 60, 55, 40, 25, 12], color: '#0057b7', legend: 'No interventions' },
+      { data: [0, 10, 22, 38, 50, 45, 32, 18, 8], color: '#fb7e38', legend: 'School closures' },
+      { data: [0, 8, 18, 30, 40, 35, 25, 14, 6], color: '#ef4444', legend: 'Masking + distancing' },
+      { data: [0, 6, 14, 24, 32, 28, 20, 10, 4], color: '#10b981', legend: 'Vaccination only' },
+      { data: [0, 4, 10, 16, 22, 19, 13, 7, 3], color: '#6366f1', legend: 'Vaccination + masking' },
+      { data: [0, 3, 7, 11, 15, 13, 9, 5, 2], color: '#a855f7', legend: 'All interventions combined' },
+    ]"
+    :height="240"
+    x-label="Weeks"
+    y-label="Incidence"
+  />
+
+<template #code>
+
+```vue
+<LineChart
+  :series="[
+    { data: scenarioA, color: '#0057b7', legend: 'No interventions' },
+    { data: scenarioB, color: '#fb7e38', legend: 'School closures' },
+    { data: scenarioC, color: '#ef4444', legend: 'Masking + distancing' },
+    { data: scenarioD, color: '#10b981', legend: 'Vaccination only' },
+    { data: scenarioE, color: '#6366f1', legend: 'Vaccination + masking' },
+    { data: scenarioF, color: '#a855f7', legend: 'All interventions combined' },
+  ]"
+  :height="240"
+  x-label="Weeks"
+  y-label="Incidence"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
 ### 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. Pass `tooltip-value-format` to control how numeric values render (e.g. percentages, currency); it falls back to `y-tick-format` when omitted.
@@ -248,6 +288,46 @@ floor, and `yMin <= 0` is ignored.
   </template>
 </ComponentDemo>
 
+### Outline
+
+Set `outline: true` on a series to draw a page-colored stroke behind the
+line. This is useful when lines overlap, cross dense areas, or sit on a
+busy background — the outline keeps each series visually distinct.
+
+<ComponentDemo>
+  <LineChart
+    :series="[
+      { data: [0, 10, 25, 45, 60, 55, 40, 20, 8], color: '#fb7e38', strokeWidth: 3, outline: true },
+      { data: [0, 12, 22, 40, 58, 58, 42, 22, 10], color: '#0057b7', strokeWidth: 3, outline: true },
+    ]"
+    :height="200"
+  />
+
+<template #code>
+
+```vue
+<LineChart
+  :series="[
+    {
+      data: [0, 10, 25, 45, 60, 55, 40, 20, 8],
+      color: '#fb7e38',
+      strokeWidth: 3,
+      outline: true,
+    },
+    {
+      data: [0, 12, 22, 40, 58, 58, 42, 22, 10],
+      color: '#0057b7',
+      strokeWidth: 3,
+      outline: true,
+    },
+  ]"
+  :height="200"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
 ### Many trajectories with low opacity
 
 <ComponentDemo>
@@ -664,6 +744,13 @@ positioned from the anchor as usual via `offset`.
   </template>
 </ComponentDemo>
 
+### Chart menu
+
+The chart menu (top-right) leads with Expand / Collapse and then Save as SVG,
+Save as PNG, and Download CSV. Expand grows the chart to fill the browser
+window so the plot has more room; press <kbd>Esc</kbd> or pick "Collapse" to
+return to the inline size. Set `menu="false"` to hide the trigger entirely.
+
 ### Custom CSV download
 
 By default, the Download CSV menu item exports the chart series as CSV. Use
@@ -789,6 +876,7 @@ interface Series {
   strokeWidth?: number;
   opacity?: number;
   line?: boolean;
+  outline?: boolean; // page-colored stroke drawn behind the line
   dots?: boolean;
   dotRadius?: number;
   dotFill?: string;

package/charts/LineChart/LineChart.vue

@@ -13,10 +13,12 @@ import {
   useChartFoundation,
   makeTooltipValueFormatter,
   ChartAnnotations,
+  INLINE_LEGEND_ROW_HEIGHT,
   type ChartData,
   type ChartCommonProps,
   type ChartHoverPayload,
   type ChartTooltipBaseProps,
+  type ChartTooltipValue,
 } from "../_shared/index.js";
 
 /**
@@ -48,12 +50,28 @@ export interface Series {
   lineOpacity?: number;
   dotOpacity?: number;
   line?: boolean;
+  /**
+   * Draw a page-colored stroke behind the line so it stays visually
+   * separated from overlapping series and busy backgrounds. Has no
+   * effect when `line` is `false`.
+   */
+  outline?: boolean;
   dots?: boolean;
   dotRadius?: number;
   dotFill?: string;
   dotStroke?: string;
   /** Label shown in the inline legend */
   legend?: string;
+  /**
+   * Whether this series appears in the inline legend. Defaults to true.
+   * Has no effect when `legend` is unset (no legend entry to begin with).
+   */
+  showInLegend?: boolean;
+  /**
+   * Whether this series contributes a value to the tooltip and shows a
+   * hover dot. Defaults to true. The series line/dots are still drawn.
+   */
+  showInTooltip?: boolean;
 }
 
 export interface Area {
@@ -167,15 +185,6 @@ defineSlots<{
   tooltip?(props: ChartTooltipBaseProps & { xLabel?: string }): unknown;
 }>();
 
-const hasInlineLegend = computed(
-  () =>
-    allSeries.value.some((s) => s.legend) ||
-    props.areaSections?.some(
-      (s) => s.legend === "inline" && (s.label || s.description),
-    ) ||
-    false,
-);
-
 /**
  * Internal series shape where `data` (y-values) is always resolved.
  * `Series.y` takes precedence over `Series.data` when both are set.
@@ -503,7 +512,7 @@ interface InlineLegendItem {
 const inlineLegendItems = computed<InlineLegendItem[]>(() => {
   const items: InlineLegendItem[] = [];
   for (const s of allSeries.value) {
-    if (!s.legend) continue;
+    if (!s.legend || s.showInLegend === false) continue;
     items.push({
       label: s.legend,
       color: s.color ?? "currentColor",
@@ -533,6 +542,10 @@ const inlineLegendItems = computed<InlineLegendItem[]>(() => {
   return items;
 });
 
+const inlineLegendLabels = computed(() =>
+  inlineLegendItems.value.map((item) => item.label),
+);
+
 const totalHeight = computed(
   () => height.value + sectionLabels.value.extraHeight,
 );
@@ -675,6 +688,7 @@ const hoverDots = computed(() => {
   if (targetX === null) return [];
   const dots: { x: number; y: number; color: string }[] = [];
   for (const s of allSeries.value) {
+    if (s.showInTooltip === false) continue;
     const nIdx = nearestIndex(s, targetX);
     if (nIdx === null) continue;
     const yv = s.data[nIdx];
@@ -704,17 +718,22 @@ const hoverSlotProps = computed(() => {
   } else {
     xLabel = formatTick(displayX);
   }
+  const series = allSeries.value;
+  const values: ChartTooltipValue[] = [];
+  for (let i = 0; i < series.length; i++) {
+    const s = series[i];
+    if (s.showInTooltip === false) continue;
+    const nIdx = nearestIndex(s, targetX);
+    values.push({
+      value: nIdx !== null ? Number(s.data[nIdx]) : NaN,
+      color: s.color ?? "currentColor",
+      seriesIndex: i,
+    });
+  }
   return {
     index: idx,
     xLabel,
-    values: allSeries.value.map((s, i) => {
-      const nIdx = nearestIndex(s, targetX);
-      return {
-        value: nIdx !== null ? Number(s.data[nIdx]) : NaN,
-        color: s.color ?? "currentColor",
-        seriesIndex: i,
-      };
-    }),
+    values,
     data: props.tooltipData?.[idx] ?? null,
   };
 });
@@ -747,6 +766,7 @@ const {
   height,
   padding,
   legendY,
+  inlineLegendLayout,
   innerW,
   innerH,
   bounds,
@@ -758,6 +778,7 @@ const {
   downloadLinkText,
   csvHref,
   menuFilename,
+  isFullscreen,
 } = useChartFoundation({
   width: () => props.width,
   height: () => props.height,
@@ -771,17 +792,43 @@ const {
   filename: () => props.filename,
   downloadLink: () => props.downloadLink,
   chartPadding: () => props.chartPadding,
-  hasInlineLegend: () => hasInlineLegend.value,
+  inlineLegendLabels: () => inlineLegendLabels.value,
   hasTooltipSlot: () => hasTooltipSlot.value,
   getCsv: toCsv,
   pointerToIndex: indexFromPointer,
   onHover: (payload) => emit("hover", payload),
+  extraBelowHeight: () => sectionLabels.value.extraHeight,
+});
+
+/**
+ * Legend items joined with their wrapped pixel positions. `x` is the
+ * left edge of the indicator; `y` is the center of the row.
+ */
+const positionedLegendItems = computed(() => {
+  const positions = inlineLegendLayout.value.positions;
+  const pad = padding.value.left;
+  const baseY = legendY.value;
+  return inlineLegendItems.value.map((item, i) => {
+    const pos = positions[i];
+    return {
+      ...item,
+      x: pad + pos.x,
+      y: baseY + pos.row * INLINE_LEGEND_ROW_HEIGHT,
+    };
+  });
 });
 </script>
 
 <template>
-  <div ref="containerRef" class="line-chart-wrapper">
+  <div
+    ref="containerRef"
+    class="line-chart-wrapper"
+    :class="{ 'is-fullscreen': isFullscreen }"
+  >
     <ChartMenu v-if="menu" :items="menuItems" />
+    <div class="chart-sr-only" aria-live="polite">
+      {{ isFullscreen ? "Chart expanded to fill window" : "" }}
+    </div>
     <svg ref="svgRef" :width="width" :height="totalHeight">
       <!-- title -->
       <text
@@ -796,15 +843,15 @@ const {
         {{ title }}
       </text>
       <!-- inline legend -->
-      <g v-if="inlineLegendItems.length > 0">
-        <template v-for="(item, i) in inlineLegendItems" :key="'ileg' + i">
+      <g v-if="positionedLegendItems.length > 0">
+        <template v-for="(item, i) in positionedLegendItems" :key="'ileg' + i">
           <!-- series indicator: line -->
           <line
             v-if="item.type === 'series'"
-            :x1="padding.left + i * 120"
-            :y1="legendY"
-            :x2="padding.left + i * 120 + 12"
-            :y2="legendY"
+            :x1="item.x"
+            :y1="item.y"
+            :x2="item.x + 12"
+            :y2="item.y"
             :stroke="item.color"
             stroke-width="2"
             :stroke-dasharray="item.dashed ? '4 2' : undefined"
@@ -812,8 +859,8 @@ const {
           <!-- section indicator: filled circle -->
           <circle
             v-else
-            :cx="padding.left + i * 120 + 4"
-            :cy="legendY"
+            :cx="item.x + 4"
+            :cy="item.y"
             r="4"
             :fill="item.color"
             :fill-opacity="item.fillOpacity"
@@ -821,8 +868,8 @@ const {
             stroke-width="1.5"
           />
           <text
-            :x="padding.left + i * 120 + 18"
-            :y="legendY + 4"
+            :x="item.x + 18"
+            :y="item.y + 4"
             font-size="11"
             fill="currentColor"
           >
@@ -936,6 +983,16 @@ const {
       />
       <!-- data lines and dots -->
       <template v-for="(s, i) in allSeries" :key="i">
+        <path
+          v-if="s.line !== false && s.outline"
+          :d="toPath(s)"
+          fill="none"
+          stroke="var(--color-bg-0, #fff)"
+          :stroke-width="(s.strokeWidth ?? 1.5) + 4"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          data-testid="line-outline"
+        />
         <path
           v-if="s.line !== false"
           :d="toPath(s)"
@@ -1147,10 +1204,6 @@ const {
   width: 100%;
 }
 
-.line-chart-wrapper:hover :deep(.chart-menu-button) {
-  opacity: 1;
-}
-
 .line-chart-tooltip-label {
   font-weight: 600;
   margin-bottom: 0.25em;

package/charts/_shared/fullscreen.css

@@ -0,0 +1,51 @@
+/* Shared chart styles for the Expand / fullscreen menu item.
+   Bundled into @cfasim-ui/charts/style.css via index.ts so it ships
+   once for the whole package instead of repeating in every chart SFC. */
+
+.line-chart-wrapper:hover .chart-menu-button,
+.bar-chart-wrapper:hover .chart-menu-button,
+.choropleth-wrapper:hover .chart-menu-button,
+.line-chart-wrapper:focus-within .chart-menu-button,
+.bar-chart-wrapper:focus-within .chart-menu-button,
+.choropleth-wrapper:focus-within .chart-menu-button,
+.line-chart-wrapper.is-fullscreen .chart-menu-button,
+.bar-chart-wrapper.is-fullscreen .chart-menu-button,
+.choropleth-wrapper.is-fullscreen .chart-menu-button {
+  opacity: 1;
+}
+
+.line-chart-wrapper.is-fullscreen,
+.bar-chart-wrapper.is-fullscreen,
+.choropleth-wrapper.is-fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: var(--cfasim-z-fullscreen, 1000);
+  background: var(--color-bg-0, #fff);
+  color: var(--color-text, inherit);
+  padding: 2em;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+/* ChoroplethMap doesn't go through useChartFoundation, so its SVG keeps
+   its prop-driven width/height. Stretch it to fill the expanded box. */
+.choropleth-wrapper.is-fullscreen svg {
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.chart-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/charts/_shared/index.ts

@@ -16,16 +16,18 @@ export {
 export { useChartSize, type ChartSizeOptions } from "./useChartSize.js";
 export {
   useChartPadding,
-  INLINE_LEGEND_HEIGHT,
+  INLINE_LEGEND_ROW_HEIGHT,
   type ChartPaddingOptions,
   type ChartPadding,
   type ChartBounds,
+  type PositionedLegendItem,
 } from "./useChartPadding.js";
 export {
   useChartTooltip,
   type ChartTooltipOptions,
 } from "./useChartTooltip.js";
 export { useChartMenu, type ChartMenuOptions } from "./useChartMenu.js";
+export { useChartFullscreen } from "./useChartFullscreen.js";
 export { seriesToCsv, categoricalToCsv, type CsvSeries } from "./seriesCsv.js";
 export { default as ChartAnnotations } from "./ChartAnnotations.vue";
 export type { ChartAnnotation } from "./annotations.js";

package/charts/_shared/useChartFoundation.ts

@@ -25,11 +25,22 @@ export interface ChartFoundationOptions {
   downloadLink: () => boolean | string | undefined;
   chartPadding: () => ChartPadding | undefined;
   // Chart-specific hooks that the composable can't infer.
-  hasInlineLegend: () => boolean;
+  /**
+   * Labels for the inline legend in render order. Empty array = no
+   * legend strip. Drives wrapping into multiple rows and the resulting
+   * top-padding reservation.
+   */
+  inlineLegendLabels: () => readonly string[];
   hasTooltipSlot: () => boolean;
   getCsv: () => string;
   pointerToIndex: (clientX: number, clientY: number) => number | null;
   onHover: (payload: { index: number } | null) => void;
+  /**
+   * Extra height (in px) the chart adds *below* the SVG plot area
+   * (e.g. LineChart's area-section labels). Used to keep the SVG total
+   * height matched to the container when fullscreen.
+   */
+  extraBelowHeight?: () => number;
 }
 
 /**
@@ -39,25 +50,51 @@ export interface ChartFoundationOptions {
  * consumes.
  */
 export function useChartFoundation(opts: ChartFoundationOptions) {
-  const { containerRef, measuredWidth } = useChartSize({
+  const { containerRef, measuredWidth, measuredHeight } = useChartSize({
     debounce: opts.debounce,
   });
 
-  const width = computed(
-    () => opts.width() ?? (measuredWidth.value || DEFAULT_WIDTH_FALLBACK),
-  );
-  const height = computed(() => opts.height() ?? DEFAULT_HEIGHT);
+  const {
+    svgRef,
+    items: menuItems,
+    downloadLinkText,
+    csvHref,
+    resolvedFilename: menuFilename,
+    isFullscreen,
+  } = useChartMenu({
+    filename: opts.filename,
+    legacyMenuLabel: opts.menu,
+    getCsv: opts.getCsv,
+    downloadLink: opts.downloadLink,
+    fullscreen: true,
+  });
+
+  const width = computed(() => {
+    if (isFullscreen.value && measuredWidth.value > 0) {
+      return measuredWidth.value;
+    }
+    return opts.width() ?? (measuredWidth.value || DEFAULT_WIDTH_FALLBACK);
+  });
 
-  const { padding, legendY, innerW, innerH, bounds } = useChartPadding({
-    title: opts.title,
-    xLabel: opts.xLabel,
-    yLabel: opts.yLabel,
-    hasInlineLegend: opts.hasInlineLegend,
-    width: () => width.value,
-    height: () => height.value,
-    extraPadding: opts.chartPadding,
+  const height = computed(() => {
+    if (isFullscreen.value && measuredHeight.value > 0) {
+      const extra = opts.extraBelowHeight?.() ?? 0;
+      return measuredHeight.value - extra;
+    }
+    return opts.height() ?? DEFAULT_HEIGHT;
   });
 
+  const { padding, legendY, inlineLegendLayout, innerW, innerH, bounds } =
+    useChartPadding({
+      title: opts.title,
+      xLabel: opts.xLabel,
+      yLabel: opts.yLabel,
+      inlineLegendLabels: opts.inlineLegendLabels,
+      width: () => width.value,
+      height: () => height.value,
+      extraPadding: opts.chartPadding,
+    });
+
   const {
     hoverIndex,
     tooltipRef,
@@ -72,19 +109,6 @@ export function useChartFoundation(opts: ChartFoundationOptions) {
     onHover: opts.onHover,
   });
 
-  const {
-    svgRef,
-    items: menuItems,
-    downloadLinkText,
-    csvHref,
-    resolvedFilename: menuFilename,
-  } = useChartMenu({
-    filename: opts.filename,
-    legacyMenuLabel: opts.menu,
-    getCsv: opts.getCsv,
-    downloadLink: opts.downloadLink,
-  });
-
   return {
     containerRef,
     svgRef,
@@ -92,6 +116,7 @@ export function useChartFoundation(opts: ChartFoundationOptions) {
     height,
     padding,
     legendY,
+    inlineLegendLayout,
     innerW,
     innerH,
     bounds,
@@ -103,6 +128,8 @@ export function useChartFoundation(opts: ChartFoundationOptions) {
     downloadLinkText,
     csvHref,
     menuFilename,
+    isFullscreen,
+    measuredHeight,
   };
 }
 

package/charts/_shared/useChartFullscreen.ts

@@ -0,0 +1,104 @@
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import type { ChartMenuItem } from "../ChartMenu/ChartMenu.vue";
+
+/**
+ * Module-level refcount so multiple expanded charts on the same page
+ * share one body-scroll lock — the last one to collapse restores the
+ * original `overflow` value.
+ */
+let bodyLockCount = 0;
+let savedBodyOverflow = "";
+
+function lockBodyScroll() {
+  if (typeof document === "undefined") return;
+  if (bodyLockCount === 0) {
+    savedBodyOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  bodyLockCount++;
+}
+
+function unlockBodyScroll() {
+  if (typeof document === "undefined") return;
+  if (bodyLockCount === 0) return;
+  bodyLockCount--;
+  if (bodyLockCount === 0) {
+    document.body.style.overflow = savedBodyOverflow;
+  }
+}
+
+/**
+ * Tracks whether the chart is in "expanded" mode (fills the window via
+ * CSS). The browser Fullscreen API isn't used — the consumer wires a
+ * `.is-fullscreen` class to its wrapper and the CSS handles positioning,
+ * which avoids Fullscreen API restrictions (user-gesture requirement,
+ * permission policy, iframe sandboxing) and keeps the chart inside the
+ * document so the rest of the page remains keyboard-navigable.
+ */
+export function useChartFullscreen() {
+  const isFullscreen = ref(false);
+  let locked = false;
+
+  function setExpanded(value: boolean) {
+    if (value === isFullscreen.value) return;
+    isFullscreen.value = value;
+    if (value && !locked) {
+      lockBodyScroll();
+      locked = true;
+    } else if (!value && locked) {
+      unlockBodyScroll();
+      locked = false;
+    }
+  }
+
+  function onKey(e: KeyboardEvent) {
+    if (e.key !== "Escape" || !isFullscreen.value) return;
+    // Skip when Esc is closing a menu/dialog layered on top of us so we
+    // don't collapse the chart at the same time. Reka's dropdown menu
+    // uses a document-level Esc listener and doesn't call preventDefault,
+    // so checking the event target is the most reliable signal.
+    const t = e.target;
+    if (t instanceof Element && t.closest('[role="menu"], [role="dialog"]')) {
+      return;
+    }
+    setExpanded(false);
+  }
+
+  function enter() {
+    setExpanded(true);
+  }
+  function exit() {
+    setExpanded(false);
+  }
+  function toggle() {
+    setExpanded(!isFullscreen.value);
+  }
+
+  onMounted(() => {
+    if (typeof document === "undefined") return;
+    document.addEventListener("keydown", onKey);
+  });
+  onUnmounted(() => {
+    if (typeof document === "undefined") return;
+    document.removeEventListener("keydown", onKey);
+    // Component torn down while expanded — release the lock so the body
+    // doesn't stay frozen.
+    if (locked) {
+      unlockBodyScroll();
+      locked = false;
+    }
+  });
+
+  /**
+   * Returns a reactive ChartMenuItem ref that flips between Expand and
+   * Collapse — shared by useChartMenu and any chart (e.g. ChoroplethMap)
+   * that builds its menu list directly.
+   */
+  const menuItem = computed<ChartMenuItem>(() => ({
+    label: isFullscreen.value ? "Collapse" : "Expand",
+    action: toggle,
+    ariaPressed: isFullscreen.value,
+  }));
+
+  return { isFullscreen, toggle, enter, exit, menuItem };
+}

package/charts/_shared/useChartMenu.ts

@@ -1,6 +1,7 @@
 import { computed, ref, type Ref } from "vue";
 import type { ChartMenuItem } from "../ChartMenu/ChartMenu.vue";
 import { saveSvg, savePng, downloadCsv } from "../ChartMenu/download.js";
+import { useChartFullscreen } from "./useChartFullscreen.js";
 
 export interface ChartMenuOptions {
   filename: () => string | undefined;
@@ -10,11 +11,18 @@ export interface ChartMenuOptions {
   getCsv: () => string;
   /** Whether a separate download link is rendered (and the CSV menu item should be hidden). */
   downloadLink: () => boolean | string | undefined;
+  /**
+   * When true, prepends an Expand/Collapse menu item that toggles the
+   * chart into a full-window view. The consumer is responsible for
+   * binding the returned `isFullscreen` ref to a CSS class on its
+   * wrapper.
+   */
+  fullscreen?: boolean;
 }
 
 /**
- * Computes the standard chart menu items (SVG / PNG / CSV) plus the
- * CSV-download-link state shared by every chart.
+ * Computes the standard chart menu items (Expand / SVG / PNG / CSV) plus
+ * the CSV-download-link state shared by every chart.
  */
 export function useChartMenu(opts: ChartMenuOptions) {
   const svgRef = ref<SVGSVGElement | null>(null);
@@ -26,9 +34,15 @@ export function useChartMenu(opts: ChartMenuOptions) {
     return typeof menu === "string" ? menu : "chart";
   }
 
+  const fullscreen = opts.fullscreen ? useChartFullscreen() : null;
+
   const items = computed<ChartMenuItem[]>(() => {
     const fname = resolvedFilename();
-    const out: ChartMenuItem[] = [
+    const out: ChartMenuItem[] = [];
+    if (fullscreen) {
+      out.push(fullscreen.menuItem.value);
+    }
+    out.push(
       {
         label: "Save as SVG",
         action: () => {
@@ -41,7 +55,7 @@ export function useChartMenu(opts: ChartMenuOptions) {
           if (svgRef.value) savePng(svgRef.value, fname);
         },
       },
-    ];
+    );
     if (!opts.downloadLink()) {
       out.push({
         label: "Download CSV",
@@ -68,5 +82,6 @@ export function useChartMenu(opts: ChartMenuOptions) {
     downloadLinkText,
     csvHref,
     resolvedFilename,
+    isFullscreen: fullscreen?.isFullscreen ?? ref(false),
   };
 }

package/charts/_shared/useChartPadding.ts

@@ -1,7 +1,17 @@
 import { computed } from "vue";
 
-/** Vertical space reserved at the top of the chart for inline legend swatches. */
-export const INLINE_LEGEND_HEIGHT = 20;
+/** Vertical space reserved per row of the inline legend strip. */
+export const INLINE_LEGEND_ROW_HEIGHT = 20;
+/**
+ * Estimated character width at font-size 11 used by inline-legend
+ * measurement. Matches the value used by LineChart's area-section labels
+ * so wrapping behaves consistently across the chart's text overlays.
+ */
+const LEGEND_CHAR_WIDTH = 7;
+/** X offset of legend text from the start of its row slot. */
+const LEGEND_TEXT_INDENT = 18;
+/** Horizontal gap between adjacent legend items on the same row. */
+const LEGEND_ITEM_GAP = 16;
 
 /**
  * Extra space added around the chart's standard layout. A number applies
@@ -22,13 +32,26 @@ export interface ChartPaddingOptions {
   title: () => string | undefined;
   xLabel: () => string | undefined;
   yLabel: () => string | undefined;
-  hasInlineLegend: () => boolean;
+  /**
+   * Labels for the inline legend items, in render order. Empty array
+   * (or omitted) means no legend strip. Drives both row-count for
+   * reserving top padding and per-item wrap positions.
+   */
+  inlineLegendLabels: () => readonly string[];
   width: () => number;
   height: () => number;
   /** Extra pixels added on top of the standard axis spacing. */
   extraPadding?: () => ChartPadding | undefined;
 }
 
+/** Position of a single legend item within the legend strip. */
+export interface PositionedLegendItem {
+  /** X offset relative to `padding.left`. */
+  x: number;
+  /** Row index, 0-based. */
+  row: number;
+}
+
 function resolvePadding(p: ChartPadding | undefined) {
   if (p == null) return { top: 0, right: 0, bottom: 0, left: 0 };
   if (typeof p === "number") return { top: p, right: p, bottom: p, left: p };
@@ -40,6 +63,14 @@ function resolvePadding(p: ChartPadding | undefined) {
   };
 }
 
+/**
+ * Estimated rendered width (in px) of a single legend item — indicator,
+ * text, and surrounding spacing. Used to flow items into rows.
+ */
+function estimateLegendItemWidth(label: string): number {
+  return LEGEND_TEXT_INDENT + label.length * LEGEND_CHAR_WIDTH;
+}
+
 /**
  * Computes the standard chart padding (top/right/bottom/left) and the
  * derived inner plotting region (innerW, innerH). Shared by LineChart
@@ -47,30 +78,78 @@ function resolvePadding(p: ChartPadding | undefined) {
  * consistent. `extraPadding` adds extra space outside the plot — useful
  * for annotations that need to extend past the data area without
  * clipping.
+ *
+ * The inline legend wraps to multiple rows when items don't fit in the
+ * available width; `padding.top` grows by `INLINE_LEGEND_ROW_HEIGHT` per
+ * row so the plot stays clear of the legend strip.
  */
 export function useChartPadding(opts: ChartPaddingOptions) {
+  // Horizontal padding is computed first because `innerW` depends only
+  // on left/right (not on legend row count). Splitting padding this way
+  // keeps the legend layout — which depends on `innerW` — out of the
+  // reactivity cycle for left/right.
+  const horizontalPadding = computed(() => {
+    const extra = resolvePadding(opts.extraPadding?.());
+    return {
+      left: (opts.yLabel() ? 56 : 50) + extra.left,
+      right: 10 + extra.right,
+    };
+  });
+
+  const innerW = computed(
+    () =>
+      opts.width() -
+      horizontalPadding.value.left -
+      horizontalPadding.value.right,
+  );
+
+  const inlineLegendLayout = computed<{
+    positions: PositionedLegendItem[];
+    rowCount: number;
+  }>(() => {
+    const labels = opts.inlineLegendLabels();
+    if (labels.length === 0) return { positions: [], rowCount: 0 };
+    const available = Math.max(0, innerW.value);
+    const positions: PositionedLegendItem[] = [];
+    let row = 0;
+    let x = 0;
+    for (const label of labels) {
+      const w = estimateLegendItemWidth(label);
+      // Wrap to a new row when the item won't fit, except when we're
+      // already at row-start (`x === 0`): a single oversized label gets
+      // its own row instead of triggering an infinite-wrap loop.
+      if (x > 0 && x + w > available) {
+        row++;
+        x = 0;
+      }
+      positions.push({ x, row });
+      x += w + LEGEND_ITEM_GAP;
+    }
+    return { positions, rowCount: row + 1 };
+  });
+
   const padding = computed(() => {
     const extra = resolvePadding(opts.extraPadding?.());
+    const rowCount = inlineLegendLayout.value.rowCount;
     return {
       top:
         (opts.title() ? 26 : 10) +
-        (opts.hasInlineLegend() ? INLINE_LEGEND_HEIGHT : 0) +
+        rowCount * INLINE_LEGEND_ROW_HEIGHT +
         extra.top,
-      right: 10 + extra.right,
       bottom: (opts.xLabel() ? 38 : 30) + extra.bottom,
-      left: (opts.yLabel() ? 56 : 50) + extra.left,
+      left: horizontalPadding.value.left,
+      right: horizontalPadding.value.right,
     };
   });
-  // Y-center of the inline legend strip. Sits at the top of the padding
-  // band (just below any title), so any user-supplied `extraPadding.top`
-  // becomes empty room between the legend and the plot — useful for
-  // annotations that need to extend above the data area.
+
+  // Y-center of the first inline-legend row. Sits at the top of the
+  // padding band (just below any title), so any user-supplied
+  // `extraPadding.top` becomes empty room between the legend and the
+  // plot. Subsequent rows are offset by `INLINE_LEGEND_ROW_HEIGHT`.
   const legendY = computed(
-    () => (opts.title() ? 26 : 10) + INLINE_LEGEND_HEIGHT / 2,
-  );
-  const innerW = computed(
-    () => opts.width() - padding.value.left - padding.value.right,
+    () => (opts.title() ? 26 : 10) + INLINE_LEGEND_ROW_HEIGHT / 2,
   );
+
   const innerH = computed(
     () => opts.height() - padding.value.top - padding.value.bottom,
   );
@@ -88,7 +167,14 @@ export function useChartPadding(opts: ChartPaddingOptions) {
       height: innerH.value,
     };
   });
-  return { padding, legendY, innerW, innerH, bounds };
+  return {
+    padding,
+    legendY,
+    inlineLegendLayout,
+    innerW,
+    innerH,
+    bounds,
+  };
 }
 
 export type ChartBounds = {

package/charts/_shared/useChartSize.ts

@@ -15,23 +15,27 @@ export interface ChartSizeOptions {
 export function useChartSize(opts: ChartSizeOptions = {}) {
   const containerRef = ref<HTMLElement | null>(null);
   const measuredWidth = ref(0);
+  const measuredHeight = ref(0);
   let observer: ResizeObserver | null = null;
   let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
 
   onMounted(() => {
     if (!containerRef.value) return;
     measuredWidth.value = containerRef.value.clientWidth;
+    measuredHeight.value = containerRef.value.clientHeight;
     observer = new ResizeObserver((entries) => {
       const entry = entries[0];
       if (!entry) return;
+      const apply = () => {
+        measuredWidth.value = entry.contentRect.width;
+        measuredHeight.value = entry.contentRect.height;
+      };
       const debounce = opts.debounce?.();
       if (debounce) {
         if (resizeTimeout) clearTimeout(resizeTimeout);
-        resizeTimeout = setTimeout(() => {
-          measuredWidth.value = entry.contentRect.width;
-        }, debounce);
+        resizeTimeout = setTimeout(apply, debounce);
       } else {
-        measuredWidth.value = entry.contentRect.width;
+        apply();
       }
     });
     observer.observe(containerRef.value);
@@ -45,5 +49,10 @@ export function useChartSize(opts: ChartSizeOptions = {}) {
   return {
     containerRef,
     measuredWidth,
-  } as { containerRef: Ref<HTMLElement | null>; measuredWidth: Ref<number> };
+    measuredHeight,
+  } as {
+    containerRef: Ref<HTMLElement | null>;
+    measuredWidth: Ref<number>;
+    measuredHeight: Ref<number>;
+  };
 }

package/charts/index.ts

@@ -1,3 +1,5 @@
+import "./_shared/fullscreen.css";
+
 export {
   default as LineChart,
   type LineChartData,

package/index.json

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

package/package.json

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