@cfasim-ui/docs 0.4.9 → 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";