@cfasim-ui/charts 0.1.6 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfasim-ui/charts",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "type": "module",
   "description": "Chart visualization components for cfasim-ui",
   "license": "Apache-2.0",
@@ -25,7 +25,7 @@
     "reka-ui": "^2.9.2",
     "topojson-client": "^3.1.0",
     "us-atlas": "^3.0.1",
-    "@cfasim-ui/shared": "0.1.6"
+    "@cfasim-ui/shared": "0.1.8"
   },
   "peerDependencies": {
     "vue": "^3.5.0"
@@ -38,7 +38,7 @@
     "@types/topojson-specification": "^1.0.5",
     "@vitejs/plugin-vue": "^6.0.5",
     "@vue/test-utils": "^2.4.6",
-    "happy-dom": "^20.8.8",
+    "happy-dom": "^20.8.9",
     "vitest": "^4.1.0"
   }
 }

package/src/LineChart/LineChart.md

@@ -125,6 +125,48 @@ A responsive SVG line chart with support for multiple series, axis labels, and c
   </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

package/src/LineChart/LineChart.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect } from "@playwright/test";
 
 test("LineChart page renders demos", async ({ page }) => {
-  await page.goto("/cfa-simulator/cfasim-ui/charts/line-chart");
+  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();

package/src/LineChart/LineChart.vue

@@ -32,8 +32,11 @@ const props = withDefaults(
     yLabel?: string;
     yMin?: number;
     xMin?: number;
+    xLabels?: string[];
     debounce?: number;
     menu?: boolean | string;
+    xGrid?: boolean;
+    yGrid?: boolean;
   }>(),
   { lineOpacity: 1, menu: true },
 );
@@ -110,16 +113,19 @@ const extent = computed(() => {
   let max = -Infinity;
   for (const s of allSeries.value) {
     for (const v of s.data) {
+      if (!isFinite(v)) continue;
       if (v < min) min = v;
       if (v > max) max = v;
     }
   }
   for (const a of allAreas.value) {
     for (const v of a.upper) {
+      if (!isFinite(v)) continue;
       if (v < min) min = v;
       if (v > max) max = v;
     }
     for (const v of a.lower) {
+      if (!isFinite(v)) continue;
       if (v < min) min = v;
       if (v > max) max = v;
     }
@@ -136,9 +142,17 @@ function toPath(data: number[]): string {
   const xScale = innerW.value / (len - 1 || 1);
   const yScale = innerH.value / range;
   const py = padding.value.top + innerH.value;
-  let d = `M${padding.value.left},${py - (data[0] - min) * yScale}`;
-  for (let i = 1; i < data.length; i++) {
-    d += `L${padding.value.left + i * xScale},${py - (data[i] - min) * yScale}`;
+  let d = "";
+  let inSegment = false;
+  for (let i = 0; i < data.length; i++) {
+    if (!isFinite(data[i])) {
+      inSegment = false;
+      continue;
+    }
+    const x = padding.value.left + i * xScale;
+    const y = py - (data[i] - min) * yScale;
+    d += inSegment ? `L${x},${y}` : `M${x},${y}`;
+    inSegment = true;
   }
   return d;
 }
@@ -153,10 +167,27 @@ function toAreaPath(upper: number[], lower: number[]): string {
   const py = padding.value.top + innerH.value;
   const x = (i: number) => padding.value.left + i * xScale;
   const y = (v: number) => py - (v - min) * yScale;
-  let d = `M${x(0)},${y(upper[0])}`;
-  for (let i = 1; i < len; i++) d += `L${x(i)},${y(upper[i])}`;
-  for (let i = len - 1; i >= 0; i--) d += `L${x(i)},${y(lower[i])}`;
-  return d + "Z";
+  // Collect contiguous segments where both upper and lower are finite
+  const segments: number[][] = [];
+  let seg: number[] = [];
+  for (let i = 0; i < len; i++) {
+    if (isFinite(upper[i]) && isFinite(lower[i])) {
+      seg.push(i);
+    } else if (seg.length) {
+      segments.push(seg);
+      seg = [];
+    }
+  }
+  if (seg.length) segments.push(seg);
+  let d = "";
+  for (const s of segments) {
+    d += `M${x(s[0])},${y(upper[s[0]])}`;
+    for (let j = 1; j < s.length; j++) d += `L${x(s[j])},${y(upper[s[j]])}`;
+    for (let j = s.length - 1; j >= 0; j--)
+      d += `L${x(s[j])},${y(lower[s[j]])}`;
+    d += "Z";
+  }
+  return d;
 }
 
 function niceStep(range: number, targetTicks: number): number {
@@ -171,6 +202,11 @@ function niceStep(range: number, targetTicks: number): number {
   return step * mag;
 }
 
+/** Round to nearest half-pixel so 1px SVG strokes stay sharp. */
+function snap(v: number): number {
+  return Math.round(v) + 0.5;
+}
+
 const numFmt = new Intl.NumberFormat();
 function formatTick(v: number): string {
   if (Math.abs(v) >= 1000) return numFmt.format(v);
@@ -184,7 +220,7 @@ const yTicks = computed(() => {
     return [
       {
         value: formatTick(min),
-        y: padding.value.top + innerH.value / 2,
+        y: snap(padding.value.top + innerH.value / 2),
       },
     ];
   }
@@ -195,10 +231,11 @@ const yTicks = computed(() => {
   for (let v = start; v <= max; v += step) {
     ticks.push({
       value: formatTick(v),
-      y:
+      y: snap(
         padding.value.top +
-        innerH.value -
-        ((v - min) / extent.value.range) * innerH.value,
+          innerH.value -
+          ((v - min) / extent.value.range) * innerH.value,
+      ),
     });
   }
   return ticks;
@@ -207,6 +244,19 @@ const yTicks = computed(() => {
 const xTicks = computed(() => {
   const len = maxLen.value;
   if (len <= 1) return [];
+  const labels = props.xLabels;
+  if (labels && labels.length === len) {
+    const targetTicks = Math.max(3, Math.floor(innerW.value / 80));
+    const step = Math.max(1, Math.round((len - 1) / targetTicks));
+    const ticks: { value: string; x: number }[] = [];
+    for (let i = 0; i < len; i += step) {
+      ticks.push({
+        value: labels[i],
+        x: snap(padding.value.left + (i / (len - 1)) * innerW.value),
+      });
+    }
+    return ticks;
+  }
   const offset = props.xMin ?? 0;
   const targetTicks = Math.max(3, Math.floor(innerW.value / 80));
   const step = niceStep(len - 1, targetTicks);
@@ -215,7 +265,7 @@ const xTicks = computed(() => {
     const idx = Math.round(i);
     ticks.push({
       value: formatTick(idx + offset),
-      x: padding.value.left + (idx / (len - 1)) * innerW.value,
+      x: snap(padding.value.left + (idx / (len - 1)) * innerW.value),
     });
   }
   return ticks;
@@ -288,21 +338,47 @@ const menuItems = computed<ChartMenuItem[]>(() => {
       </text>
       <!-- axes -->
       <line
-        :x1="padding.left"
-        :y1="padding.top"
-        :x2="padding.left"
-        :y2="padding.top + innerH"
+        :x1="snap(padding.left)"
+        :y1="snap(padding.top)"
+        :x2="snap(padding.left)"
+        :y2="snap(padding.top + innerH)"
         stroke="currentColor"
         stroke-opacity="0.3"
       />
       <line
-        :x1="padding.left"
-        :y1="padding.top + innerH"
-        :x2="padding.left + innerW"
-        :y2="padding.top + innerH"
+        :x1="snap(padding.left)"
+        :y1="snap(padding.top + innerH)"
+        :x2="snap(padding.left + innerW)"
+        :y2="snap(padding.top + innerH)"
         stroke="currentColor"
         stroke-opacity="0.3"
       />
+      <!-- y grid lines -->
+      <template v-if="yGrid">
+        <line
+          v-for="(tick, i) in yTicks"
+          :key="'yg' + i"
+          :x1="padding.left"
+          :y1="tick.y"
+          :x2="padding.left + innerW"
+          :y2="tick.y"
+          stroke="currentColor"
+          stroke-opacity="0.1"
+        />
+      </template>
+      <!-- x grid lines -->
+      <template v-if="xGrid">
+        <line
+          v-for="(tick, i) in xTicks"
+          :key="'xg' + i"
+          :x1="tick.x"
+          :y1="padding.top"
+          :x2="tick.x"
+          :y2="padding.top + innerH"
+          stroke="currentColor"
+          stroke-opacity="0.1"
+        />
+      </template>
       <!-- y tick labels -->
       <text
         v-for="(tick, i) in yTicks"