@svgrid/grid 2.1.22 → 2.2.0

package/src/sparkline.test.ts

@@ -1,68 +1,68 @@
-import { describe, expect, it } from 'vitest'
-import { buildSparkline, toSparklineValues } from './sparkline'
-
-describe('toSparklineValues', () => {
-  it('passes through number arrays and drops non-finite', () => {
-    expect(toSparklineValues([1, 2, NaN, 3])).toEqual([1, 2, 3])
-  })
-  it('parses comma / space separated strings', () => {
-    expect(toSparklineValues('1, 2 3,4')).toEqual([1, 2, 3, 4])
-  })
-  it('returns [] for empty / unusable input', () => {
-    expect(toSparklineValues(null)).toEqual([])
-    expect(toSparklineValues('')).toEqual([])
-    expect(toSparklineValues({})).toEqual([])
-  })
-})
-
-describe('buildSparkline', () => {
-  it('returns null for empty data', () => {
-    expect(buildSparkline([])).toBeNull()
-  })
-
-  it('builds a line path through every point', () => {
-    const g = buildSparkline([0, 5, 10], { type: 'line', width: 100, height: 20 })!
-    expect(g.type).toBe('line')
-    expect(g.linePath.startsWith('M')).toBe(true)
-    // three points => one M + two L commands
-    expect((g.linePath.match(/[ML]/g) ?? []).length).toBe(3)
-    expect(g.lastPoint).not.toBeNull()
-  })
-
-  it('closes the area path back to the baseline', () => {
-    const g = buildSparkline([1, 2, 3], { type: 'area' })!
-    expect(g.areaPath.endsWith('Z')).toBe(true)
-  })
-
-  it('renders a visible mark for a single data point (#84)', () => {
-    // A lone point used to produce just "M x,y" (a moveto), which draws
-    // nothing. The fix centres it and emits a short segment.
-    const g = buildSparkline([5], { type: 'line', width: 100, height: 20 })!
-    expect(g.linePath).not.toBe('')
-    expect(g.linePath).toMatch(/M[\d.]+,[\d.]+ L[\d.]+,[\d.]+/)
-    expect(g.lastPoint).not.toBeNull()
-  })
-
-  it('emits one bar per value and flags negatives', () => {
-    const g = buildSparkline([-2, 4, -1], { type: 'bar' })!
-    expect(g.bars).toHaveLength(3)
-    expect(g.bars[0]!.negative).toBe(true)
-    expect(g.bars[1]!.negative).toBe(false)
-  })
-
-  it('winloss uses sign only, equal-height up/down bars', () => {
-    const g = buildSparkline([1, -1, 1], { type: 'winloss', height: 20 })!
-    expect(g.bars).toHaveLength(3)
-    expect(g.bars[0]!.negative).toBe(false)
-    expect(g.bars[1]!.negative).toBe(true)
-    // up and down bars are the same height (sign-only chart)
-    expect(g.bars[0]!.h).toBeCloseTo(g.bars[1]!.h)
-  })
-
-  it('honors a fixed min/max scale', () => {
-    const a = buildSparkline([5, 5, 5], { type: 'line', min: 0, max: 10 })!
-    // flat series on a 0..10 scale sits at the vertical middle, not the top
-    const ys = a.linePath.match(/,(-?\d+(\.\d+)?)/g)!.map((s) => Number(s.slice(1)))
-    expect(new Set(ys).size).toBe(1)
-  })
-})
+import { describe, expect, it } from 'vitest'
+import { buildSparkline, toSparklineValues } from './sparkline'
+
+describe('toSparklineValues', () => {
+  it('passes through number arrays and drops non-finite', () => {
+    expect(toSparklineValues([1, 2, NaN, 3])).toEqual([1, 2, 3])
+  })
+  it('parses comma / space separated strings', () => {
+    expect(toSparklineValues('1, 2 3,4')).toEqual([1, 2, 3, 4])
+  })
+  it('returns [] for empty / unusable input', () => {
+    expect(toSparklineValues(null)).toEqual([])
+    expect(toSparklineValues('')).toEqual([])
+    expect(toSparklineValues({})).toEqual([])
+  })
+})
+
+describe('buildSparkline', () => {
+  it('returns null for empty data', () => {
+    expect(buildSparkline([])).toBeNull()
+  })
+
+  it('builds a line path through every point', () => {
+    const g = buildSparkline([0, 5, 10], { type: 'line', width: 100, height: 20 })!
+    expect(g.type).toBe('line')
+    expect(g.linePath.startsWith('M')).toBe(true)
+    // three points => one M + two L commands
+    expect((g.linePath.match(/[ML]/g) ?? []).length).toBe(3)
+    expect(g.lastPoint).not.toBeNull()
+  })
+
+  it('closes the area path back to the baseline', () => {
+    const g = buildSparkline([1, 2, 3], { type: 'area' })!
+    expect(g.areaPath.endsWith('Z')).toBe(true)
+  })
+
+  it('renders a visible mark for a single data point (#84)', () => {
+    // A lone point used to produce just "M x,y" (a moveto), which draws
+    // nothing. The fix centres it and emits a short segment.
+    const g = buildSparkline([5], { type: 'line', width: 100, height: 20 })!
+    expect(g.linePath).not.toBe('')
+    expect(g.linePath).toMatch(/M[\d.]+,[\d.]+ L[\d.]+,[\d.]+/)
+    expect(g.lastPoint).not.toBeNull()
+  })
+
+  it('emits one bar per value and flags negatives', () => {
+    const g = buildSparkline([-2, 4, -1], { type: 'bar' })!
+    expect(g.bars).toHaveLength(3)
+    expect(g.bars[0]!.negative).toBe(true)
+    expect(g.bars[1]!.negative).toBe(false)
+  })
+
+  it('winloss uses sign only, equal-height up/down bars', () => {
+    const g = buildSparkline([1, -1, 1], { type: 'winloss', height: 20 })!
+    expect(g.bars).toHaveLength(3)
+    expect(g.bars[0]!.negative).toBe(false)
+    expect(g.bars[1]!.negative).toBe(true)
+    // up and down bars are the same height (sign-only chart)
+    expect(g.bars[0]!.h).toBeCloseTo(g.bars[1]!.h)
+  })
+
+  it('honors a fixed min/max scale', () => {
+    const a = buildSparkline([5, 5, 5], { type: 'line', min: 0, max: 10 })!
+    // flat series on a 0..10 scale sits at the vertical middle, not the top
+    const ys = a.linePath.match(/,(-?\d+(\.\d+)?)/g)!.map((s) => Number(s.slice(1)))
+    expect(new Set(ys).size).toBe(1)
+  })
+})

package/src/sparkline.ts

@@ -1,169 +1,169 @@
-/**
- * Sparkline geometry. Pure functions that turn an array of numbers into the
- * SVG primitives a tiny in-cell chart needs - no DOM, so it is trivially
- * unit-testable and the `<SvGrid>` render component just paints the result.
- *
- * Four chart types, mirroring the de-facto enterprise-grid set:
- *   - `line`     a single polyline
- *   - `area`     a polyline plus a filled area down to the baseline
- *   - `bar`      one column per value, scaled from the dataset min..max
- *   - `winloss`  fixed-height up/down bars (sign only), e.g. W/L streaks
- */
-export type SparklineType = 'line' | 'area' | 'bar' | 'winloss'
-
-export type SparklineConfig = {
-  type?: SparklineType
-  /** Stroke (line/area) or positive fill (bar/winloss). */
-  color?: string
-  /** Fill for negative bars / losses. Defaults to a red. */
-  negativeColor?: string
-  width?: number
-  height?: number
-  /** Fix the value scale instead of deriving it from the row's own data. */
-  min?: number
-  max?: number
-  lineWidth?: number
-  /** Draw a dot on the last point (line/area). Default true. */
-  lastPoint?: boolean
-}
-
-export type SparklineBar = {
-  x: number
-  y: number
-  w: number
-  h: number
-  negative: boolean
-}
-
-export type SparklineGeometry = {
-  width: number
-  height: number
-  type: SparklineType
-  color: string
-  negativeColor: string
-  lineWidth: number
-  /** `line` / `area`: the polyline through every point. */
-  linePath: string
-  /** `area`: closed path filled down to the baseline. */
-  areaPath: string
-  /** `bar` / `winloss`: one rect per value. */
-  bars: SparklineBar[]
-  /** `line` / `area`: the final point, for the end-cap dot. */
-  lastPoint: { x: number; y: number } | null
-}
-
-const DEFAULTS = {
-  width: 88,
-  height: 22,
-  color: 'var(--sg-accent, #2563eb)',
-  negativeColor: '#ef4444',
-  lineWidth: 1.5,
-}
-
-/** Coerce loose cell values (arrays, comma strings) into a number array. */
-export function toSparklineValues(value: unknown): number[] {
-  if (Array.isArray(value)) {
-    return value.map((v) => Number(v)).filter((n) => Number.isFinite(n))
-  }
-  if (typeof value === 'string' && value.trim()) {
-    return value
-      .split(/[,\s]+/)
-      .map((v) => Number(v))
-      .filter((n) => Number.isFinite(n))
-  }
-  return []
-}
-
-export function buildSparkline(
-  values: number[],
-  cfg: SparklineConfig = {},
-): SparklineGeometry | null {
-  if (!values.length) return null
-
-  const width = cfg.width ?? DEFAULTS.width
-  const height = cfg.height ?? DEFAULTS.height
-  const type = cfg.type ?? 'line'
-  const color = cfg.color ?? DEFAULTS.color
-  const negativeColor = cfg.negativeColor ?? DEFAULTS.negativeColor
-  const lineWidth = cfg.lineWidth ?? DEFAULTS.lineWidth
-  const pad = Math.ceil(lineWidth) + 1
-  const innerW = Math.max(1, width - pad * 2)
-  const innerH = Math.max(1, height - pad * 2)
-
-  const base: Omit<
-    SparklineGeometry,
-    'linePath' | 'areaPath' | 'bars' | 'lastPoint'
-  > = { width, height, type, color, negativeColor, lineWidth }
-
-  if (type === 'winloss') {
-    const n = values.length
-    const gap = n > 1 ? Math.min(2, innerW / n / 3) : 0
-    const slot = innerW / n
-    const barW = Math.max(1, slot - gap)
-    const mid = height / 2
-    const h = innerH / 2
-    const bars: SparklineBar[] = values.map((v, i) => {
-      const x = pad + i * slot + (slot - barW) / 2
-      if (v > 0) return { x, y: mid - h, w: barW, h, negative: false }
-      if (v < 0) return { x, y: mid, w: barW, h, negative: true }
-      return { x, y: mid - 1, w: barW, h: 2, negative: false }
-    })
-    return { ...base, linePath: '', areaPath: '', bars, lastPoint: null }
-  }
-
-  const min = cfg.min ?? Math.min(...values)
-  const max = cfg.max ?? Math.max(...values)
-  const span = max - min || 1
-
-  if (type === 'bar') {
-    const n = values.length
-    const gap = n > 1 ? Math.min(2, innerW / n / 3) : 0
-    const slot = innerW / n
-    const barW = Math.max(1, slot - gap)
-    // Bars grow from a zero baseline when the data spans zero, else from min.
-    const baseVal = min < 0 && max > 0 ? 0 : min
-    const baseY = pad + innerH - ((baseVal - min) / span) * innerH
-    const bars: SparklineBar[] = values.map((v, i) => {
-      const x = pad + i * slot + (slot - barW) / 2
-      const vy = pad + innerH - ((v - min) / span) * innerH
-      const top = Math.min(vy, baseY)
-      const h = Math.max(1, Math.abs(vy - baseY))
-      return { x, y: top, w: barW, h, negative: v < baseVal }
-    })
-    return { ...base, linePath: '', areaPath: '', bars, lastPoint: null }
-  }
-
-  // line / area
-  const n = values.length
-  const stepX = n > 1 ? innerW / (n - 1) : 0
-  const pts = values.map((v, i) => ({
-    // A single point has no span to walk, so centre it rather than pinning it
-    // to the left edge.
-    x: n === 1 ? pad + innerW / 2 : pad + i * stepX,
-    y: pad + innerH - ((v - min) / span) * innerH,
-  }))
-  const linePath =
-    n === 1
-      ? // One point produces only a moveto, which draws nothing. Emit a tiny
-        // horizontal segment so a single value still renders a visible mark.
-        `M${round(pts[0]!.x - 1)},${round(pts[0]!.y)} L${round(pts[0]!.x + 1)},${round(pts[0]!.y)}`
-      : pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${round(p.x)},${round(p.y)}`).join(' ')
-  const first = pts[0]!
-  const last = pts[pts.length - 1]!
-  const baseY = pad + innerH
-  const areaPath =
-    type === 'area'
-      ? `${linePath} L${round(last.x)},${round(baseY)} L${round(first.x)},${round(baseY)} Z`
-      : ''
-  return {
-    ...base,
-    linePath,
-    areaPath,
-    bars: [],
-    lastPoint: cfg.lastPoint === false ? null : { x: last.x, y: last.y },
-  }
-}
-
-function round(n: number): number {
-  return Math.round(n * 100) / 100
-}
+/**
+ * Sparkline geometry. Pure functions that turn an array of numbers into the
+ * SVG primitives a tiny in-cell chart needs - no DOM, so it is trivially
+ * unit-testable and the `<SvGrid>` render component just paints the result.
+ *
+ * Four chart types, mirroring the de-facto enterprise-grid set:
+ *   - `line`     a single polyline
+ *   - `area`     a polyline plus a filled area down to the baseline
+ *   - `bar`      one column per value, scaled from the dataset min..max
+ *   - `winloss`  fixed-height up/down bars (sign only), e.g. W/L streaks
+ */
+export type SparklineType = 'line' | 'area' | 'bar' | 'winloss'
+
+export type SparklineConfig = {
+  type?: SparklineType
+  /** Stroke (line/area) or positive fill (bar/winloss). */
+  color?: string
+  /** Fill for negative bars / losses. Defaults to a red. */
+  negativeColor?: string
+  width?: number
+  height?: number
+  /** Fix the value scale instead of deriving it from the row's own data. */
+  min?: number
+  max?: number
+  lineWidth?: number
+  /** Draw a dot on the last point (line/area). Default true. */
+  lastPoint?: boolean
+}
+
+export type SparklineBar = {
+  x: number
+  y: number
+  w: number
+  h: number
+  negative: boolean
+}
+
+export type SparklineGeometry = {
+  width: number
+  height: number
+  type: SparklineType
+  color: string
+  negativeColor: string
+  lineWidth: number
+  /** `line` / `area`: the polyline through every point. */
+  linePath: string
+  /** `area`: closed path filled down to the baseline. */
+  areaPath: string
+  /** `bar` / `winloss`: one rect per value. */
+  bars: SparklineBar[]
+  /** `line` / `area`: the final point, for the end-cap dot. */
+  lastPoint: { x: number; y: number } | null
+}
+
+const DEFAULTS = {
+  width: 88,
+  height: 22,
+  color: 'var(--sg-accent, #2563eb)',
+  negativeColor: '#ef4444',
+  lineWidth: 1.5,
+}
+
+/** Coerce loose cell values (arrays, comma strings) into a number array. */
+export function toSparklineValues(value: unknown): number[] {
+  if (Array.isArray(value)) {
+    return value.map((v) => Number(v)).filter((n) => Number.isFinite(n))
+  }
+  if (typeof value === 'string' && value.trim()) {
+    return value
+      .split(/[,\s]+/)
+      .map((v) => Number(v))
+      .filter((n) => Number.isFinite(n))
+  }
+  return []
+}
+
+export function buildSparkline(
+  values: number[],
+  cfg: SparklineConfig = {},
+): SparklineGeometry | null {
+  if (!values.length) return null
+
+  const width = cfg.width ?? DEFAULTS.width
+  const height = cfg.height ?? DEFAULTS.height
+  const type = cfg.type ?? 'line'
+  const color = cfg.color ?? DEFAULTS.color
+  const negativeColor = cfg.negativeColor ?? DEFAULTS.negativeColor
+  const lineWidth = cfg.lineWidth ?? DEFAULTS.lineWidth
+  const pad = Math.ceil(lineWidth) + 1
+  const innerW = Math.max(1, width - pad * 2)
+  const innerH = Math.max(1, height - pad * 2)
+
+  const base: Omit<
+    SparklineGeometry,
+    'linePath' | 'areaPath' | 'bars' | 'lastPoint'
+  > = { width, height, type, color, negativeColor, lineWidth }
+
+  if (type === 'winloss') {
+    const n = values.length
+    const gap = n > 1 ? Math.min(2, innerW / n / 3) : 0
+    const slot = innerW / n
+    const barW = Math.max(1, slot - gap)
+    const mid = height / 2
+    const h = innerH / 2
+    const bars: SparklineBar[] = values.map((v, i) => {
+      const x = pad + i * slot + (slot - barW) / 2
+      if (v > 0) return { x, y: mid - h, w: barW, h, negative: false }
+      if (v < 0) return { x, y: mid, w: barW, h, negative: true }
+      return { x, y: mid - 1, w: barW, h: 2, negative: false }
+    })
+    return { ...base, linePath: '', areaPath: '', bars, lastPoint: null }
+  }
+
+  const min = cfg.min ?? Math.min(...values)
+  const max = cfg.max ?? Math.max(...values)
+  const span = max - min || 1
+
+  if (type === 'bar') {
+    const n = values.length
+    const gap = n > 1 ? Math.min(2, innerW / n / 3) : 0
+    const slot = innerW / n
+    const barW = Math.max(1, slot - gap)
+    // Bars grow from a zero baseline when the data spans zero, else from min.
+    const baseVal = min < 0 && max > 0 ? 0 : min
+    const baseY = pad + innerH - ((baseVal - min) / span) * innerH
+    const bars: SparklineBar[] = values.map((v, i) => {
+      const x = pad + i * slot + (slot - barW) / 2
+      const vy = pad + innerH - ((v - min) / span) * innerH
+      const top = Math.min(vy, baseY)
+      const h = Math.max(1, Math.abs(vy - baseY))
+      return { x, y: top, w: barW, h, negative: v < baseVal }
+    })
+    return { ...base, linePath: '', areaPath: '', bars, lastPoint: null }
+  }
+
+  // line / area
+  const n = values.length
+  const stepX = n > 1 ? innerW / (n - 1) : 0
+  const pts = values.map((v, i) => ({
+    // A single point has no span to walk, so centre it rather than pinning it
+    // to the left edge.
+    x: n === 1 ? pad + innerW / 2 : pad + i * stepX,
+    y: pad + innerH - ((v - min) / span) * innerH,
+  }))
+  const linePath =
+    n === 1
+      ? // One point produces only a moveto, which draws nothing. Emit a tiny
+        // horizontal segment so a single value still renders a visible mark.
+        `M${round(pts[0]!.x - 1)},${round(pts[0]!.y)} L${round(pts[0]!.x + 1)},${round(pts[0]!.y)}`
+      : pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${round(p.x)},${round(p.y)}`).join(' ')
+  const first = pts[0]!
+  const last = pts[pts.length - 1]!
+  const baseY = pad + innerH
+  const areaPath =
+    type === 'area'
+      ? `${linePath} L${round(last.x)},${round(baseY)} L${round(first.x)},${round(baseY)} Z`
+      : ''
+  return {
+    ...base,
+    linePath,
+    areaPath,
+    bars: [],
+    lastPoint: cfg.lastPoint === false ? null : { x: last.x, y: last.y },
+  }
+}
+
+function round(n: number): number {
+  return Math.round(n * 100) / 100
+}