@cfasim-ui/charts 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfasim-ui/charts",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "description": "Chart visualization components for cfasim-ui",
   "license": "Apache-2.0",
@@ -16,7 +16,8 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@cfasim-ui/shared": "0.1.0"
+    "reka-ui": "^2.9.2",
+    "@cfasim-ui/shared": "0.1.2"
   },
   "peerDependencies": {
     "vue": "^3.5.0"

package/src/ChartMenu/ChartMenu.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import {
+  DropdownMenuRoot,
+  DropdownMenuTrigger,
+  DropdownMenuPortal,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from "reka-ui";
+
+export interface ChartMenuItem {
+  label: string;
+  action: () => void;
+}
+
+defineProps<{
+  items: ChartMenuItem[];
+}>();
+</script>
+
+<template>
+  <div class="chart-menu-trigger-area">
+    <!-- Single item: plain button -->
+    <button
+      v-if="items.length === 1"
+      class="chart-menu-button chart-menu-single"
+      :aria-label="items[0].label"
+      @click="items[0].action"
+    >
+      <svg
+        width="14"
+        height="14"
+        viewBox="0 0 14 14"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M7 1v8M3 6l4 4 4-4M2 13h10" />
+      </svg>
+    </button>
+    <!-- Multiple items: dropdown menu -->
+    <DropdownMenuRoot v-else>
+      <DropdownMenuTrigger class="chart-menu-button" aria-label="Chart options">
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="currentColor"
+          aria-hidden="true"
+        >
+          <circle cx="3" cy="8" r="1.5" />
+          <circle cx="8" cy="8" r="1.5" />
+          <circle cx="13" cy="8" r="1.5" />
+        </svg>
+      </DropdownMenuTrigger>
+      <DropdownMenuPortal>
+        <DropdownMenuContent
+          class="chart-menu-content"
+          :side-offset="4"
+          align="end"
+        >
+          <DropdownMenuItem
+            v-for="item in items"
+            :key="item.label"
+            class="chart-menu-item"
+            @select="item.action"
+          >
+            {{ item.label }}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenuPortal>
+    </DropdownMenuRoot>
+  </div>
+</template>
+
+<style scoped>
+.chart-menu-trigger-area {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+}
+
+.chart-menu-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--color-border);
+  border-radius: 0.25em;
+  background: var(--color-bg-0, #fff);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.chart-menu-button[data-state="open"] {
+  opacity: 1;
+}
+
+.chart-menu-button:hover {
+  background: var(--color-bg-1, rgba(0, 0, 0, 0.05));
+  color: var(--color-text);
+}
+</style>
+
+<style>
+.chart-menu-content {
+  z-index: 100;
+  background: var(--color-bg-0);
+  border: 1px solid var(--color-border);
+  border-radius: 0.25em;
+  padding: 0.25em;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  min-width: 140px;
+}
+
+.chart-menu-item {
+  display: flex;
+  align-items: center;
+  padding: 0.375em 0.5em;
+  border-radius: 0.25em;
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  white-space: nowrap;
+}
+
+.chart-menu-item[data-highlighted] {
+  background: var(--color-primary);
+  color: white;
+}
+</style>

package/src/ChartMenu/download.ts

@@ -0,0 +1,44 @@
+export function downloadBlob(blob: Blob, name: string) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = name;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+export function saveSvg(svg: SVGSVGElement, filename: string) {
+  const clone = svg.cloneNode(true) as SVGSVGElement;
+  clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+  const xml = new XMLSerializer().serializeToString(clone);
+  downloadBlob(new Blob([xml], { type: "image/svg+xml" }), `${filename}.svg`);
+}
+
+export function savePng(svg: SVGSVGElement, filename: string) {
+  const clone = svg.cloneNode(true) as SVGSVGElement;
+  clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+  const xml = new XMLSerializer().serializeToString(clone);
+  const svgBlob = new Blob([xml], { type: "image/svg+xml;charset=utf-8" });
+  const url = URL.createObjectURL(svgBlob);
+  const img = new Image();
+  const w = svg.width.baseVal.value || svg.clientWidth;
+  const h = svg.height.baseVal.value || svg.clientHeight;
+  const scale = 2;
+  img.onload = () => {
+    const canvas = document.createElement("canvas");
+    canvas.width = w * scale;
+    canvas.height = h * scale;
+    const ctx = canvas.getContext("2d")!;
+    ctx.scale(scale, scale);
+    ctx.drawImage(img, 0, 0, w, h);
+    canvas.toBlob((blob) => {
+      if (blob) downloadBlob(blob, `${filename}.png`);
+    });
+    URL.revokeObjectURL(url);
+  };
+  img.src = url;
+}
+
+export function downloadCsv(csv: string, filename: string) {
+  downloadBlob(new Blob([csv], { type: "text/csv" }), `${filename}.csv`);
+}

package/src/DataTable/DataTable.vue

@@ -2,6 +2,9 @@
 import { computed } from "vue";
 import type { CSSProperties } from "vue";
 import type { ModelOutput } from "@cfasim-ui/shared";
+import ChartMenu from "../ChartMenu/ChartMenu.vue";
+import type { ChartMenuItem } from "../ChartMenu/ChartMenu.vue";
+import { downloadCsv } from "../ChartMenu/download.js";
 
 export type TableRecord = Record<string, ArrayLike<number | string | boolean>>;
 export type TableData = TableRecord | ModelOutput;
@@ -21,11 +24,15 @@ const COLUMN_WIDTHS: Record<ColumnWidth, string> = {
   large: "250px",
 };
 
-const props = defineProps<{
-  data: TableData;
-  maxRows?: number;
-  columnConfig?: Record<string, ColumnConfig>;
-}>();
+const props = withDefaults(
+  defineProps<{
+    data: TableData;
+    maxRows?: number;
+    columnConfig?: Record<string, ColumnConfig>;
+    menu?: boolean | string;
+  }>(),
+  { menu: true },
+);
 
 function columnLabel(name: string): string {
   return props.columnConfig?.[name]?.label ?? name;
@@ -86,46 +93,89 @@ function cellValue(col: Column, row: number): string {
   if (typeof v === "boolean") return v ? "true" : "false";
   return String(v);
 }
+
+function menuFilename() {
+  return typeof props.menu === "string" ? props.menu : "data";
+}
+
+function escapeCsvField(val: string): string {
+  if (val.includes(",") || val.includes('"') || val.includes("\n")) {
+    return `"${val.replace(/"/g, '""')}"`;
+  }
+  return val;
+}
+
+function toCsv(): string {
+  const cols = columns.value;
+  const rows = rowCount.value;
+  const headers = cols.map((c) => escapeCsvField(columnLabel(c.name)));
+  const lines = [headers.join(",")];
+  for (let r = 0; r < rows; r++) {
+    const cells = cols.map((c) => escapeCsvField(cellValue(c, r)));
+    lines.push(cells.join(","));
+  }
+  return lines.join("\n");
+}
+
+const menuItems = computed<ChartMenuItem[]>(() => [
+  { label: "Download CSV", action: () => downloadCsv(toCsv(), menuFilename()) },
+]);
 </script>
 
 <template>
-  <div class="TableWrapper">
-    <table class="Table">
-      <colgroup>
-        <col
-          v-for="col in columns"
-          :key="col.name"
-          :style="columnStyle(col.name)"
-        />
-      </colgroup>
-      <thead>
-        <tr>
-          <th
-            v-for="col in columns"
-            :key="col.name"
-            :style="columnAlignStyle(col.name)"
-          >
-            {{ columnLabel(col.name) }}
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="row in rowCount" :key="row">
-          <td
+  <div class="TableOuter" :class="{ 'has-menu': menu }">
+    <ChartMenu v-if="menu" :items="menuItems" />
+    <div class="TableWrapper">
+      <table class="Table">
+        <colgroup>
+          <col
             v-for="col in columns"
             :key="col.name"
-            :class="columnConfig?.[col.name]?.cellClass"
-            :style="columnAlignStyle(col.name)"
-          >
-            {{ cellValue(col, row - 1) }}
-          </td>
-        </tr>
-      </tbody>
-    </table>
+            :style="columnStyle(col.name)"
+          />
+        </colgroup>
+        <thead>
+          <tr>
+            <th
+              v-for="col in columns"
+              :key="col.name"
+              :style="columnAlignStyle(col.name)"
+            >
+              {{ columnLabel(col.name) }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="row in rowCount" :key="row">
+            <td
+              v-for="col in columns"
+              :key="col.name"
+              :class="columnConfig?.[col.name]?.cellClass"
+              :style="columnAlignStyle(col.name)"
+            >
+              {{ cellValue(col, row - 1) }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>
 
 <style scoped>
+.TableOuter {
+  position: relative;
+  display: inline-block;
+}
+
+.TableOuter.has-menu {
+  padding-top: 32px;
+}
+
+.TableOuter:hover :deep(.chart-menu-button) {
+  opacity: 1;
+}
+
 .TableWrapper {
   overflow-x: auto;
   font-size: var(--font-size-sm);

package/src/LineChart/LineChart.spec.ts

@@ -5,6 +5,7 @@ test("LineChart page renders demos", async ({ page }) => {
   await expect(page.locator("h1")).toBeVisible();
   const demos = page.locator(".demo-preview");
   await expect(demos.first()).toBeVisible();
-  await expect(demos.first().locator("svg")).toBeVisible();
-  await expect(demos.first().locator("svg path")).toBeAttached();
+  const chartSvg = demos.first().locator("svg").last();
+  await expect(chartSvg).toBeVisible();
+  await expect(chartSvg.locator("path")).toBeAttached();
 });

package/src/LineChart/LineChart.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { computed, ref, onMounted, onUnmounted } from "vue";
+import ChartMenu from "../ChartMenu/ChartMenu.vue";
+import type { ChartMenuItem } from "../ChartMenu/ChartMenu.vue";
+import { saveSvg, savePng, downloadCsv } from "../ChartMenu/download.js";
 
 export interface Series {
   data: number[];
@@ -16,14 +19,17 @@ const props = withDefaults(
     width?: number;
     height?: number;
     lineOpacity?: number;
+    title?: string;
     xLabel?: string;
     yLabel?: string;
     debounce?: number;
+    menu?: boolean | string;
   }>(),
-  { lineOpacity: 1 },
+  { lineOpacity: 1, menu: true },
 );
 
 const containerRef = ref<HTMLElement | null>(null);
+const svgRef = ref<SVGSVGElement | null>(null);
 const measuredWidth = ref(0);
 let observer: ResizeObserver | null = null;
 let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
@@ -56,7 +62,7 @@ const width = computed(() => props.width ?? (measuredWidth.value || 400));
 const height = computed(() => props.height ?? 200);
 
 const padding = computed(() => ({
-  top: 10,
+  top: props.title ? 30 : 10,
   right: 10,
   bottom: props.xLabel ? 46 : 30,
   left: props.yLabel ? 66 : 50,
@@ -170,11 +176,72 @@ const xTicks = computed(() => {
   }
   return ticks;
 });
+
+function menuFilename() {
+  return typeof props.menu === "string" ? props.menu : "chart";
+}
+
+function getSvgEl(): SVGSVGElement | null {
+  return svgRef.value;
+}
+
+function toCsv(): string {
+  const series = allSeries.value;
+  if (series.length === 0) return "";
+  const len = maxLen.value;
+  const headers =
+    series.length === 1
+      ? ["index", "value"]
+      : ["index", ...series.map((_, i) => `series_${i}`)];
+  const rows = [headers.join(",")];
+  for (let r = 0; r < len; r++) {
+    const cells = [r.toString()];
+    for (const s of series) {
+      cells.push(r < s.data.length ? String(s.data[r]) : "");
+    }
+    rows.push(cells.join(","));
+  }
+  return rows.join("\n");
+}
+
+const menuItems = computed<ChartMenuItem[]>(() => {
+  const fname = menuFilename();
+  return [
+    {
+      label: "Save as SVG",
+      action: () => {
+        const el = getSvgEl();
+        if (el) saveSvg(el, fname);
+      },
+    },
+    {
+      label: "Save as PNG",
+      action: () => {
+        const el = getSvgEl();
+        if (el) savePng(el, fname);
+      },
+    },
+    { label: "Download CSV", action: () => downloadCsv(toCsv(), fname) },
+  ];
+});
 </script>
 
 <template>
-  <div ref="containerRef" style="width: 100%">
-    <svg :width="width" :height="height">
+  <div ref="containerRef" class="line-chart-wrapper">
+    <ChartMenu v-if="menu" :items="menuItems" />
+    <svg ref="svgRef" :width="width" :height="height">
+      <!-- title -->
+      <text
+        v-if="title"
+        :x="width / 2"
+        :y="18"
+        text-anchor="middle"
+        font-size="14"
+        font-weight="600"
+        fill="currentColor"
+      >
+        {{ title }}
+      </text>
       <!-- axes -->
       <line
         :x1="padding.left"
@@ -256,3 +323,14 @@ const xTicks = computed(() => {
     </svg>
   </div>
 </template>
+
+<style scoped>
+.line-chart-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.line-chart-wrapper:hover :deep(.chart-menu-button) {
+  opacity: 1;
+}
+</style>