basalt-ui 1.15.0 → 1.17.0

package/src/charts/series.ts

@@ -60,6 +60,14 @@ export type SeriesStyle = {
   strokeWidth?: number
   /** bar/area: the swatch honors this so it cannot lie. */
   fillOpacity?: number
+  /**
+   * A MARK property — dims the plotted stroke, e.g. a faint moving-average companion line. The
+   * legend swatch honors it too (parity with `fillOpacity`, which it already honors — a swatch
+   * that lies is the thing the derived-legend rule exists to prevent). The TOOLTIP ROW swatch and
+   * the CROSSHAIR DOT deliberately do NOT honor it: those are 12px value-readout chips where a
+   * sub-1 opacity reads as a rendering bug, not as data.
+   */
+  strokeOpacity?: number
   /** Which y-axis this series is measured against. Default 'left'. `'right'` is what makes a
    * chart dual-axis — `CartesianChart` reads it for the crosshair dots and the tooltip. */
   axis?: 'left' | 'right'
@@ -84,10 +92,13 @@ export type SeriesStyle = {
 export type ChartSeries<T> = SeriesStyle & {
   /** null = line gap + skipped tooltip row. */
   getValue: (d: T) => number | null
-  /** Per-series override of the shared tooltip/value formatter. */
-  formatValue?: (v: number) => string
-  /** PR star / status dot. Return null for no marker at that point. */
-  getMarker?: (d: T) => { color?: string; r?: number } | null
+  /** Per-series override of the shared tooltip/value formatter. Receives the hovered datum
+   * alongside the value so a row can read fields beyond the plotted number (e.g. `97.5 kg (92.5 ×
+   * 3)`). */
+  formatValue?: (v: number, d: T) => string
+  /** PR star / status dot. Return null for no marker at that point. `ring` defaults true (today's
+   * punched-out stroke, unchanged); `false` omits the stroke entirely. `fillOpacity` defaults 1. */
+  getMarker?: (d: T) => { color?: string; r?: number; fillOpacity?: number; ring?: boolean } | null
 }
 
 /** A single derived tooltip row, ready for `TooltipRow`. */
@@ -112,6 +123,7 @@ function legendEntryFor(s: SeriesStyle): LegendEntry {
     dashed: s.dash === 'dashed',
     ...(s.strokeWidth !== undefined && { strokeWidth: s.strokeWidth }),
     ...(s.fillOpacity !== undefined && { fillOpacity: s.fillOpacity }),
+    ...(s.strokeOpacity !== undefined && { strokeOpacity: s.strokeOpacity }),
     ...(s.role !== undefined && { role: s.role }),
     ...(s.note !== undefined && { note: s.note }),
   }
@@ -165,12 +177,12 @@ export function deriveTooltipRows<T>(
     if (s.tooltip === false) continue
     const value = s.getValue(datum)
     if (value === null) continue
-    const format = s.formatValue ?? fallbackFormat
+    const format: (v: number, d: T) => string = s.formatValue ?? fallbackFormat
     rows.push({
       key: s.key,
       label: s.label,
       color: s.color,
-      value: format(value),
+      value: format(value, datum),
       shape: shapeFor(s.mark),
       dashed: s.dash === 'dashed',
       ...(s.strokeWidth !== undefined && { strokeWidth: s.strokeWidth }),

package/src/charts/utils/domain.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'bun:test'
-import { padAutoLower } from './domain'
+import { padAutoLower, padAutoUpper } from './domain'
 
 describe('padAutoLower', () => {
   test('stays at 0 for the default zero-baseline case (never goes negative)', () => {
@@ -22,3 +22,33 @@ describe('padAutoLower', () => {
     }
   })
 })
+
+describe('padAutoUpper', () => {
+  test('stays at 0 (never pushed positive)', () => {
+    expect(padAutoUpper(0, 1.1)).toBe(0)
+  })
+
+  test('pads UP above a positive candidate', () => {
+    expect(padAutoUpper(78, 1.1)).toBeCloseTo(85.8, 5)
+  })
+
+  test('pads further up (toward and past zero) for a negative candidate', () => {
+    expect(padAutoUpper(-5, 1.1)).toBeCloseTo(-4.5454, 3)
+  })
+
+  test('upper never lands below the candidate it was derived from', () => {
+    for (const candidate of [-10, -0.5, 0, 0.5, 10, 78]) {
+      expect(padAutoUpper(candidate, 1.1)).toBeGreaterThanOrEqual(candidate)
+    }
+  })
+
+  test('the autoMaxFloor case: dataMax 3.2, pad 1.1, floor 6 -> 6.6', () => {
+    expect(padAutoUpper(Math.max(3.2, 6), 1.1)).toBeCloseTo(6.6, 5)
+  })
+
+  test('is the exact mirror of padAutoLower — same magnitude, opposite direction', () => {
+    for (const candidate of [-10, -0.5, 0.5, 10, 78]) {
+      expect(padAutoUpper(candidate, 1.1)).toBeCloseTo(-padAutoLower(-candidate, 1.1), 5)
+    }
+  })
+})

package/src/charts/utils/domain.ts

@@ -20,3 +20,22 @@ export function padAutoLower(candidate: number, pad: number): number {
   if (candidate === 0) return 0
   return candidate > 0 ? candidate / pad : candidate * pad
 }
+
+/**
+ * Auto y-domain upper-bound padding — the exact mirror of {@link padAutoLower}, sharing its
+ * sign-safety: pad AWAY from zero (`upper >= candidate`), never toward it. `candidate` is the
+ * caller's `Math.max(dataMax, floor)` — the `autoMaxFloor` clamp has already been applied, so
+ * padding runs AFTER the floor, not before it. Applying the floor post-pad (the pre-existing bug)
+ * lands a floored axis top exactly on the floor value with zero headroom — a target line pinned to
+ * that floor then sits glued to the plot edge instead of getting the same breathing room every
+ * other bound gets.
+ *
+ *  - `candidate === 0` stays exactly 0 — never pushed positive.
+ *  - `candidate > 0` multiplies by `pad`, moving the ceiling further UP (away from zero).
+ *  - `candidate < 0` divides by `pad`, moving the ceiling UP toward (and past) zero — the mirror of
+ *    `padAutoLower`'s `candidate > 0` branch.
+ */
+export function padAutoUpper(candidate: number, pad: number): number {
+  if (candidate === 0) return 0
+  return candidate > 0 ? candidate * pad : candidate / pad
+}

package/src/charts/primitives/CartesianChart.test.ts

@@ -1,99 +0,0 @@
-import { describe, expect, test } from 'bun:test'
-import type { ChartSeries } from '../series'
-import { resolveAxisDomain } from './CartesianChart'
-
-type Row = { date: string; a: number; b: number }
-
-const rows: Row[] = [
-  { date: '2026-08-01', a: 10, b: 4 },
-  { date: '2026-08-02', a: 40, b: 6 },
-  { date: '2026-08-03', a: 25, b: 5 },
-]
-
-const seriesFor = (key: 'a' | 'b'): ChartSeries<Row> => ({
-  key,
-  label: key,
-  color: '#000',
-  mark: 'line',
-  getValue: (d) => d[key],
-})
-
-const both = [seriesFor('a'), seriesFor('b')]
-
-describe('resolveAxisDomain', () => {
-  test('a fixed tuple passes through untouched', () => {
-    expect(resolveAxisDomain({ domain: [0, 100] }, rows, both)).toEqual([0, 100])
-  })
-
-  test('auto pads the upper bound away from zero and keeps the zero baseline', () => {
-    const [min, max] = resolveAxisDomain(undefined, rows, both)
-    expect(min).toBe(0)
-    expect(max).toBeCloseTo(44, 5)
-  })
-
-  test('auto over an ALL-NEGATIVE series keeps the largest value inside the plot', () => {
-    // `max * pad` would push the upper bound to -5.5, i.e. below the largest datum, clipping it.
-    const negative: ChartSeries<Row>[] = [
-      { ...seriesFor('a'), getValue: (d) => -d.a },
-      { ...seriesFor('b'), getValue: (d) => -d.b },
-    ]
-    const [min, max] = resolveAxisDomain({ autoMinCeil: Infinity }, rows, negative)
-    expect(max).toBeGreaterThanOrEqual(-4)
-    expect(min).toBeLessThanOrEqual(-40)
-  })
-
-  test('autoMaxFloor raises a low upper bound', () => {
-    const [, max] = resolveAxisDomain({ autoMaxFloor: 500 }, rows, both)
-    expect(max).toBe(500)
-  })
-
-  test('the domain follows the VISIBLE series — hiding the tall one shrinks the axis', () => {
-    const [, withBoth] = resolveAxisDomain(undefined, rows, both)
-    const [, onlyB] = resolveAxisDomain(undefined, rows, [seriesFor('b')])
-    expect(onlyB).toBeLessThan(withBoth)
-  })
-
-  test('a domain function receives the data AND the visible series', () => {
-    const domain = resolveAxisDomain(
-      { domain: (data, visible) => [0, data.length * visible.length] },
-      rows,
-      both,
-    )
-    expect(domain).toEqual([0, 6])
-  })
-
-  test('empty data falls back to a usable unit domain', () => {
-    expect(resolveAxisDomain(undefined, [], both)).toEqual([0, 1])
-  })
-})
-
-describe('resolveAxisDomain — overlay bounds', () => {
-  test('a zone past the data stretches the axis instead of clipping', () => {
-    const [, max] = resolveAxisDomain(undefined, rows, both, [0, 200])
-    expect(max).toBeGreaterThanOrEqual(200)
-  })
-
-  test('a reference line below the data lowers the floor', () => {
-    const [min] = resolveAxisDomain({ autoMinCeil: Infinity }, rows, both, [-30])
-    expect(min).toBeLessThanOrEqual(-30)
-  })
-
-  test('infinite bounds ("top/bottom of axis") are ignored, not blown up', () => {
-    const plain = resolveAxisDomain(undefined, rows, both)
-    expect(resolveAxisDomain(undefined, rows, both, [-Infinity, Infinity])).toEqual(plain)
-  })
-})
-
-describe('resolveAxisDomain — degenerate input', () => {
-  test('a flat all-zero series still gets a usable axis, not a zero-extent scale', () => {
-    const flat: ChartSeries<Row>[] = [{ ...seriesFor('a'), getValue: () => 0 }]
-    const [min, max] = resolveAxisDomain(undefined, rows, flat)
-    expect(max).toBeGreaterThan(min)
-  })
-
-  test('a flat non-zero series is not collapsed onto its own value', () => {
-    const flat: ChartSeries<Row>[] = [{ ...seriesFor('a'), getValue: () => 7 }]
-    const [min, max] = resolveAxisDomain({ autoMinCeil: Infinity }, rows, flat)
-    expect(max).toBeGreaterThan(min)
-  })
-})