@cfasim-ui/charts 0.1.9 → 0.2.0

package/src/DataTable/DataTable.md

@@ -1,101 +0,0 @@
-# DataTable
-
-A table for displaying columnar data. Accepts a plain record of arrays or a `ModelOutput` from a simulation.
-
-## Examples
-
-### Basic usage
-
-<ComponentDemo>
-  <DataTable :data="{ day: [0, 1, 2, 3, 4], susceptible: [1000, 980, 945, 900, 860], infected: [1, 21, 56, 101, 141] }" />
-
-<template #code>
-
-```vue
-<DataTable
-  :data="{
-    day: [0, 1, 2, 3, 4],
-    susceptible: [1000, 980, 945, 900, 860],
-    infected: [1, 21, 56, 101, 141],
-  }"
-/>
-```
-
-  </template>
-</ComponentDemo>
-
-### Column labels and width
-
-<ComponentDemo>
-  <DataTable
-    :data="{ day: [0, 1, 2, 3, 4], susceptible: [1000, 980, 945, 900, 860], infected: [1, 21, 56, 101, 141] }"
-    :column-config="{
-      day: { label: 'Day', width: 'small' },
-      susceptible: { label: 'Susceptible' },
-      infected: { label: 'Infected' },
-    }"
-  />
-
-<template #code>
-
-```vue
-<DataTable
-  :data="{
-    day: [0, 1, 2, 3, 4],
-    susceptible: [1000, 980, 945, 900, 860],
-    infected: [1, 21, 56, 101, 141],
-  }"
-  :column-config="{
-    day: { label: 'Day', width: 'small' },
-    susceptible: { label: 'Susceptible' },
-    infected: { label: 'Infected' },
-  }"
-/>
-```
-
-  </template>
-</ComponentDemo>
-
-### Cell class and max rows
-
-<ComponentDemo>
-  <DataTable
-    :data="{ generation: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], cases: [1, 3, 8, 15, 28, 45, 62, 71, 55, 30] }"
-    :max-rows="5"
-    :column-config="{
-      generation: { label: 'Gen', cellClass: 'text-secondary', width: 50 },
-      cases: { label: 'Cases' },
-    }"
-  />
-
-<template #code>
-
-```vue
-<DataTable
-  :data="{
-    generation: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
-    cases: [1, 3, 8, 15, 28, 45, 62, 71, 55, 30],
-  }"
-  :max-rows="5"
-  :column-config="{
-    generation: { label: 'Gen', cellClass: 'text-secondary', width: 50 },
-    cases: { label: 'Cases' },
-  }"
-/>
-```
-
-  </template>
-</ComponentDemo>
-
-<!--@include: ./_api/data-table.md-->
-
-### ColumnConfig
-
-```ts
-interface ColumnConfig {
-  label?: string;
-  width?: "small" | "medium" | "large" | number;
-  align?: "left" | "center" | "right";
-  cellClass?: string;
-}
-```

package/src/DataTable/DataTable.test.ts

@@ -1,177 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { mount } from "@vue/test-utils";
-import DataTable from "./DataTable.vue";
-import { ModelOutput } from "@cfasim-ui/shared";
-
-describe("Table", () => {
-  it("renders a plain record", () => {
-    const wrapper = mount(DataTable, {
-      props: {
-        data: {
-          day: [0, 1, 2],
-          infected: [10, 25, 50],
-        },
-      },
-    });
-    const headers = wrapper.findAll("th");
-    expect(headers.map((h) => h.text())).toEqual(["day", "infected"]);
-    const rows = wrapper.findAll("tbody tr");
-    expect(rows).toHaveLength(3);
-    expect(rows[0].findAll("td").map((td) => td.text())).toEqual(["0", "10"]);
-    expect(rows[2].findAll("td").map((td) => td.text())).toEqual(["2", "50"]);
-  });
-
-  it("formats floats to 4 decimal places", () => {
-    const wrapper = mount(DataTable, {
-      props: {
-        data: { value: [1.23456789] },
-      },
-    });
-    const cell = wrapper.find("tbody td");
-    expect(cell.text()).toBe("1.2346");
-  });
-
-  it("renders a ModelOutput", () => {
-    const output = new ModelOutput(
-      2,
-      [
-        { name: "day", type: "i32" },
-        { name: "cases", type: "f64" },
-      ],
-      [new Int32Array([0, 1]), new Float64Array([100.5, 200.75])],
-    );
-    const wrapper = mount(DataTable, { props: { data: output } });
-    const headers = wrapper.findAll("th");
-    expect(headers.map((h) => h.text())).toEqual(["day", "cases"]);
-    const rows = wrapper.findAll("tbody tr");
-    expect(rows).toHaveLength(2);
-    expect(rows[0].findAll("td").map((td) => td.text())).toEqual([
-      "0",
-      "100.5000",
-    ]);
-  });
-
-  it("renders enum labels from ModelOutput", () => {
-    const output = new ModelOutput(
-      2,
-      [{ name: "status", type: "enum", enumLabels: ["S", "I", "R"] }],
-      [new Uint32Array([0, 2])],
-    );
-    const wrapper = mount(DataTable, { props: { data: output } });
-    const cells = wrapper.findAll("tbody td");
-    expect(cells.map((c) => c.text())).toEqual(["S", "R"]);
-  });
-
-  it("respects maxRows", () => {
-    const wrapper = mount(DataTable, {
-      props: {
-        data: { x: [1, 2, 3, 4, 5] },
-        maxRows: 3,
-      },
-    });
-    expect(wrapper.findAll("tbody tr")).toHaveLength(3);
-  });
-
-  it("handles empty data", () => {
-    const wrapper = mount(DataTable, { props: { data: {} } });
-    expect(wrapper.findAll("th")).toHaveLength(0);
-    expect(wrapper.findAll("tbody tr")).toHaveLength(0);
-  });
-
-  it("uses columnConfig labels", () => {
-    const wrapper = mount(DataTable, {
-      props: {
-        data: { day: [0], infected: [10] },
-        columnConfig: {
-          day: { label: "Day #" },
-          infected: { label: "Total Infected" },
-        },
-      },
-    });
-    const headers = wrapper.findAll("th");
-    expect(headers.map((h) => h.text())).toEqual(["Day #", "Total Infected"]);
-  });
-
-  it("falls back to column name when no label configured", () => {
-    const wrapper = mount(DataTable, {
-      props: {
-        data: { day: [0], infected: [10] },
-        columnConfig: { day: { label: "Day #" } },
-      },
-    });
-    const headers = wrapper.findAll("th");
-    expect(headers.map((h) => h.text())).toEqual(["Day #", "infected"]);
-  });
-
-  it("applies named column widths", () => {
-    const wrapper = mount(DataTable, {
-      props: {
-        data: { day: [0], infected: [10] },
-        columnConfig: {
-          day: { width: "small" },
-          infected: { width: "large" },
-        },
-      },
-    });
-    const cols = wrapper.findAll("col");
-    expect(cols[0].attributes("style")).toContain("width: 80px");
-    expect(cols[1].attributes("style")).toContain("width: 250px");
-  });
-
-  it("applies pixel column widths", () => {
-    const wrapper = mount(DataTable, {
-      props: {
-        data: { day: [0] },
-        columnConfig: { day: { width: 120 } },
-      },
-    });
-    const col = wrapper.find("col");
-    expect(col.attributes("style")).toContain("width: 120px");
-    expect(col.attributes("style")).toContain("min-width: 120px");
-  });
-
-  it("applies column alignment to th and td", () => {
-    const wrapper = mount(DataTable, {
-      props: {
-        data: { day: [0], infected: [10] },
-        columnConfig: {
-          day: { align: "center" },
-          infected: { align: "left" },
-        },
-      },
-    });
-    const headers = wrapper.findAll("th");
-    expect(headers[0].attributes("style")).toContain("text-align: center");
-    expect(headers[1].attributes("style")).toContain("text-align: left");
-    const cells = wrapper.findAll("tbody td");
-    expect(cells[0].attributes("style")).toContain("text-align: center");
-    expect(cells[1].attributes("style")).toContain("text-align: left");
-  });
-
-  it("uses default alignment when no align configured", () => {
-    const wrapper = mount(DataTable, {
-      props: {
-        data: { day: [0] },
-      },
-    });
-    const th = wrapper.find("th");
-    expect(th.attributes("style")).toBeUndefined();
-  });
-
-  it("applies cellClass to td elements", () => {
-    const wrapper = mount(DataTable, {
-      props: {
-        data: { day: [0, 1], value: [10, 20] },
-        columnConfig: {
-          day: { cellClass: "text-secondary" },
-        },
-      },
-    });
-    const rows = wrapper.findAll("tbody tr");
-    for (const row of rows) {
-      const cells = row.findAll("td");
-      expect(cells[0].classes()).toContain("text-secondary");
-      expect(cells[1].classes()).not.toContain("text-secondary");
-    }
-  });
-});

package/src/DataTable/DataTable.vue

@@ -1,217 +0,0 @@
-<script setup lang="ts">
-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;
-export type ColumnWidth = "small" | "medium" | "large";
-export type ColumnAlign = "left" | "center" | "right";
-
-export interface ColumnConfig {
-  label?: string;
-  width?: ColumnWidth | number;
-  align?: ColumnAlign;
-  cellClass?: string;
-}
-
-const COLUMN_WIDTHS: Record<ColumnWidth, string> = {
-  small: "80px",
-  medium: "150px",
-  large: "250px",
-};
-
-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;
-}
-
-function columnStyle(name: string): Record<string, string> | undefined {
-  const w = props.columnConfig?.[name]?.width;
-  if (w == null) return undefined;
-  const value = typeof w === "number" ? `${w}px` : COLUMN_WIDTHS[w];
-  return { width: value, minWidth: value };
-}
-
-function columnAlignStyle(name: string): CSSProperties | undefined {
-  const align = props.columnConfig?.[name]?.align;
-  if (!align) return undefined;
-  return { textAlign: align };
-}
-
-function isModelOutput(d: TableData): d is ModelOutput {
-  return typeof (d as ModelOutput).column === "function";
-}
-
-interface Column {
-  name: string;
-  values: ArrayLike<number | string | boolean>;
-  enumLabels?: string[];
-}
-
-const columns = computed<Column[]>(() => {
-  const d = props.data;
-  if (isModelOutput(d)) {
-    return d.columns.map((col) => ({
-      name: col.name,
-      values: d.column(col.name),
-      enumLabels: col.enumLabels,
-    }));
-  }
-  return Object.entries(d).map(([name, values]) => ({ name, values }));
-});
-
-const rowCount = computed(() => {
-  const cols = columns.value;
-  if (cols.length === 0) return 0;
-  let max = 0;
-  for (const col of cols) max = Math.max(max, col.values.length);
-  return props.maxRows ? Math.min(max, props.maxRows) : max;
-});
-
-function cellValue(col: Column, row: number): string {
-  const v = col.values[row];
-  if (v === undefined || v === null) return "";
-  if (col.enumLabels && typeof v === "number")
-    return col.enumLabels[v] ?? String(v);
-  if (typeof v === "number") {
-    if (Number.isInteger(v)) return v.toString();
-    return v.toFixed(4);
-  }
-  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="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"
-            :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);
-}
-
-.Table {
-  border-collapse: collapse;
-  font-variant-numeric: tabular-nums;
-  border: 1px solid var(--color-border);
-}
-
-.Table tr,
-.Table th,
-.Table td {
-  background: transparent;
-  border: none;
-}
-
-.Table th,
-.Table td {
-  padding: 0.75em 1.25em;
-  white-space: nowrap;
-}
-
-.Table th {
-  font-weight: 600;
-  border-bottom: 1px solid var(--color-border-header);
-  position: sticky;
-  top: 0;
-}
-
-.Table tbody td {
-  border-bottom: 1px solid var(--color-border);
-}
-
-.Table tbody tr:last-child td {
-  border-bottom: none;
-}
-</style>

package/src/LineChart/LineChart.md

@@ -1,182 +0,0 @@
-# LineChart
-
-A responsive SVG line chart with support for multiple series, axis labels, and custom styling.
-
-## Examples
-
-### Single series
-
-<ComponentDemo>
-  <LineChart :data="[0, 4, 8, 15, 22, 30, 28, 20, 12, 5, 2]" :height="200" x-label="Days" y-label="Cases" />
-
-<template #code>
-
-```vue
-<LineChart
-  :data="[0, 4, 8, 15, 22, 30, 28, 20, 12, 5, 2]"
-  :height="200"
-  x-label="Days"
-  y-label="Cases"
-/>
-```
-
-  </template>
-</ComponentDemo>
-
-### Multiple series
-
-<ComponentDemo>
-  <LineChart
-    :series="[
-      { data: [0, 10, 25, 45, 60, 55, 40, 20, 8], color: '#fb7e38', strokeWidth: 3 },
-      { data: [0, 5, 12, 20, 28, 25, 18, 10, 4], color: '#0057b7', strokeWidth: 3 },
-    ]"
-    :height="200"
-    x-label="Weeks"
-    y-label="Incidence"
-  />
-
-<template #code>
-
-```vue
-<LineChart
-  :series="[
-    {
-      data: [0, 10, 25, 45, 60, 55, 40, 20, 8],
-      color: '#fb7e38',
-      strokeWidth: 3,
-    },
-    {
-      data: [0, 5, 12, 20, 28, 25, 18, 10, 4],
-      color: '#0057b7',
-      strokeWidth: 3,
-    },
-  ]"
-  :height="200"
-  x-label="Weeks"
-  y-label="Incidence"
-/>
-```
-
-  </template>
-</ComponentDemo>
-
-### Dashed baseline
-
-<ComponentDemo>
-  <LineChart
-    :series="[
-      { data: [0, 10, 25, 45, 60, 55, 40, 20, 8], color: '#999', dashed: true, strokeWidth: 2 },
-      { data: [0, 5, 12, 20, 28, 25, 18, 10, 4], color: '#2563eb', strokeWidth: 2 },
-    ]"
-    :height="200"
-  />
-
-<template #code>
-
-```vue
-<LineChart
-  :series="[
-    {
-      data: [0, 10, 25, 45, 60, 55, 40, 20, 8],
-      color: '#999',
-      dashed: true,
-      strokeWidth: 2,
-    },
-    {
-      data: [0, 5, 12, 20, 28, 25, 18, 10, 4],
-      color: '#2563eb',
-      strokeWidth: 2,
-    },
-  ]"
-  :height="200"
-/>
-```
-
-  </template>
-</ComponentDemo>
-
-### Many trajectories with low opacity
-
-<ComponentDemo>
-  <LineChart
-    :series="Array.from({ length: 20 }, (_, i) => ({
-      data: Array.from({ length: 50 }, (_, t) => Math.max(0, 30 * Math.sin(t / 8) + (Math.random() - 0.5) * 15 + i * 0.5)),
-      color: '#0057b7',
-    }))"
-    :height="250"
-    :line-opacity="0.15"
-    x-label="Days"
-    y-label="Incidence"
-  />
-
-<template #code>
-
-```vue
-<LineChart
-  :series="trajectories"
-  :height="250"
-  :line-opacity="0.15"
-  x-label="Days"
-  y-label="Incidence"
-/>
-```
-
-  </template>
-</ComponentDemo>
-
-### Grid lines
-
-<ComponentDemo>
-  <LineChart
-    :series="[
-      { data: [0, 10, 25, 45, 60, 55, 40, 20, 8], color: '#fb7e38', strokeWidth: 3 },
-      { data: [0, 5, 12, 20, 28, 25, 18, 10, 4], color: '#0057b7', strokeWidth: 3 },
-    ]"
-    :height="200"
-    x-label="Weeks"
-    y-label="Incidence"
-    x-grid
-    y-grid
-  />
-
-<template #code>
-
-```vue
-<LineChart
-  :series="[
-    {
-      data: [0, 10, 25, 45, 60, 55, 40, 20, 8],
-      color: '#fb7e38',
-      strokeWidth: 3,
-    },
-    {
-      data: [0, 5, 12, 20, 28, 25, 18, 10, 4],
-      color: '#0057b7',
-      strokeWidth: 3,
-    },
-  ]"
-  :height="200"
-  x-label="Weeks"
-  y-label="Incidence"
-  x-grid
-  y-grid
-/>
-```
-
-  </template>
-</ComponentDemo>
-
-<!--@include: ./_api/line-chart.md-->
-
-### Series
-
-```ts
-interface Series {
-  data: number[];
-  color?: string;
-  dashed?: boolean;
-  strokeWidth?: number;
-  opacity?: number;
-}
-```

package/src/LineChart/LineChart.spec.ts

@@ -1,11 +0,0 @@
-import { test, expect } from "@playwright/test";
-
-test("LineChart page renders demos", async ({ page }) => {
-  await page.goto("./cfasim-ui/charts/line-chart");
-  await expect(page.locator("h1")).toBeVisible();
-  const demos = page.locator(".demo-preview");
-  await expect(demos.first()).toBeVisible();
-  const chartSvg = demos.first().locator("svg").last();
-  await expect(chartSvg).toBeVisible();
-  await expect(chartSvg.locator("path")).toBeAttached();
-});