basalt-ui 1.14.0 → 1.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +1 -1
- package/CHANGELOG.md +15 -0
- package/README.md +38 -2
- package/agent/rules/basalt-charts.md +279 -108
- package/agent/rules/basalt-mantine.md +4 -2
- package/agent/skills/basalt-charts/SKILL.md +114 -64
- package/agent/skills/basalt-design/SKILL.md +4 -3
- package/agent/templates/CLAUDE-block.md.tpl +9 -6
- package/configs/oxlint-plugin.js +152 -0
- package/configs/oxlint-plugin.test.ts +107 -0
- package/configs/oxlint.json +2 -0
- package/dist/charts/cursor/resolve.d.ts +33 -0
- package/dist/charts/cursor/resolve.d.ts.map +1 -0
- package/dist/charts/cursor/resolve.js +61 -0
- package/dist/charts/cursor/resolve.test.d.ts +2 -0
- package/dist/charts/cursor/resolve.test.d.ts.map +1 -0
- package/dist/charts/cursor/scope.d.ts +17 -0
- package/dist/charts/cursor/scope.d.ts.map +1 -0
- package/dist/charts/cursor/scope.js +20 -0
- package/dist/charts/cursor/store.d.ts +31 -0
- package/dist/charts/cursor/store.d.ts.map +1 -0
- package/dist/charts/cursor/store.js +25 -0
- package/dist/charts/cursor/store.test.d.ts +2 -0
- package/dist/charts/cursor/store.test.d.ts.map +1 -0
- package/dist/charts/hooks/useChartCursor.d.ts +39 -0
- package/dist/charts/hooks/useChartCursor.d.ts.map +1 -0
- package/dist/charts/hooks/useChartCursor.js +104 -0
- package/dist/charts/hooks/useChartSize.d.ts +8 -4
- package/dist/charts/hooks/useChartSize.d.ts.map +1 -1
- package/dist/charts/index.d.ts +16 -13
- package/dist/charts/index.d.ts.map +1 -1
- package/dist/charts/index.js +38 -19
- package/dist/charts/kinds/Bars.d.ts +45 -54
- package/dist/charts/kinds/Bars.d.ts.map +1 -1
- package/dist/charts/kinds/Bars.js +235 -392
- package/dist/charts/kinds/Bars.test.d.ts +2 -0
- package/dist/charts/kinds/Bars.test.d.ts.map +1 -0
- package/dist/charts/kinds/Donut.d.ts +5 -4
- package/dist/charts/kinds/Donut.d.ts.map +1 -1
- package/dist/charts/kinds/Donut.js +17 -14
- package/dist/charts/kinds/DualPanel.d.ts +13 -0
- package/dist/charts/kinds/DualPanel.d.ts.map +1 -1
- package/dist/charts/kinds/DualPanel.js +185 -92
- package/dist/charts/kinds/DualPanel.test.d.ts +2 -0
- package/dist/charts/kinds/DualPanel.test.d.ts.map +1 -0
- package/dist/charts/kinds/Heatmap.d.ts +15 -11
- package/dist/charts/kinds/Heatmap.d.ts.map +1 -1
- package/dist/charts/kinds/Heatmap.js +38 -22
- package/dist/charts/kinds/MultiLine.d.ts +27 -35
- package/dist/charts/kinds/MultiLine.d.ts.map +1 -1
- package/dist/charts/kinds/MultiLine.js +122 -235
- package/dist/charts/kinds/MultiLine.test.d.ts +2 -0
- package/dist/charts/kinds/MultiLine.test.d.ts.map +1 -0
- package/dist/charts/kinds/StackedArea.d.ts +21 -10
- package/dist/charts/kinds/StackedArea.d.ts.map +1 -1
- package/dist/charts/kinds/StackedArea.js +74 -132
- package/dist/charts/kinds/ZonedLine.d.ts +24 -40
- package/dist/charts/kinds/ZonedLine.d.ts.map +1 -1
- package/dist/charts/kinds/ZonedLine.js +104 -184
- package/dist/charts/kinds/ZonedLine.test.d.ts +2 -0
- package/dist/charts/kinds/ZonedLine.test.d.ts.map +1 -0
- package/dist/charts/layout/auto-margin.d.ts +60 -0
- package/dist/charts/layout/auto-margin.d.ts.map +1 -0
- package/dist/charts/layout/auto-margin.js +37 -0
- package/dist/charts/layout/auto-margin.test.d.ts +2 -0
- package/dist/charts/layout/auto-margin.test.d.ts.map +1 -0
- package/dist/charts/primitives/CartesianChart.d.ts +161 -0
- package/dist/charts/primitives/CartesianChart.d.ts.map +1 -0
- package/dist/charts/primitives/CartesianChart.js +359 -0
- package/dist/charts/primitives/CartesianChart.test.d.ts +2 -0
- package/dist/charts/primitives/CartesianChart.test.d.ts.map +1 -0
- package/dist/charts/primitives/ChartFrame.d.ts +16 -5
- package/dist/charts/primitives/ChartFrame.d.ts.map +1 -1
- package/dist/charts/primitives/ChartFrame.js +17 -2
- package/dist/charts/primitives/ChartLegend.d.ts +15 -1
- package/dist/charts/primitives/ChartLegend.d.ts.map +1 -1
- package/dist/charts/primitives/ChartLegend.js +25 -3
- package/dist/charts/primitives/ChartLegend.test.d.ts +2 -0
- package/dist/charts/primitives/ChartLegend.test.d.ts.map +1 -0
- package/dist/charts/primitives/ChartTooltip.d.ts +16 -16
- package/dist/charts/primitives/ChartTooltip.d.ts.map +1 -1
- package/dist/charts/primitives/ChartTooltip.js +45 -19
- package/dist/charts/primitives/HoverOverlay.d.ts +19 -4
- package/dist/charts/primitives/HoverOverlay.d.ts.map +1 -1
- package/dist/charts/primitives/HoverOverlay.js +22 -1
- package/dist/charts/primitives/XZoneRects.d.ts +54 -0
- package/dist/charts/primitives/XZoneRects.d.ts.map +1 -0
- package/dist/charts/primitives/XZoneRects.js +65 -0
- package/dist/charts/primitives/XZoneRects.test.d.ts +2 -0
- package/dist/charts/primitives/XZoneRects.test.d.ts.map +1 -0
- package/dist/charts/series.d.ts +28 -3
- package/dist/charts/series.d.ts.map +1 -1
- package/dist/charts/series.js +5 -2
- package/dist/charts/series.test.d.ts +2 -0
- package/dist/charts/series.test.d.ts.map +1 -0
- package/dist/charts/utils/measure-text.d.ts +25 -0
- package/dist/charts/utils/measure-text.d.ts.map +1 -0
- package/dist/charts/utils/measure-text.js +64 -0
- package/dist/charts/utils/measure-text.test.d.ts +2 -0
- package/dist/charts/utils/measure-text.test.d.ts.map +1 -0
- package/dist/content/fence-block.d.ts.map +1 -1
- package/dist/surfaces.d.ts +1 -1
- package/dist/surfaces.d.ts.map +1 -1
- package/dist/surfaces.js +1 -1
- package/dist/tokens/chart-margin.test.d.ts +2 -0
- package/dist/tokens/chart-margin.test.d.ts.map +1 -0
- package/dist/tokens/index.d.ts +29 -0
- package/dist/tokens/index.d.ts.map +1 -1
- package/dist/tokens/index.js +10 -0
- package/dist/tokens/palette.d.ts +4 -0
- package/dist/tokens/palette.d.ts.map +1 -1
- package/dist/tokens/palette.js +3 -0
- package/llms.txt +3 -3
- package/package.json +1 -1
- package/src/charts/cursor/resolve.test.ts +61 -0
- package/src/charts/cursor/resolve.ts +102 -0
- package/src/charts/cursor/scope.tsx +32 -0
- package/src/charts/cursor/store.test.ts +46 -0
- package/src/charts/cursor/store.ts +53 -0
- package/src/charts/hooks/useChartCursor.ts +163 -0
- package/src/charts/hooks/useChartSize.ts +8 -4
- package/src/charts/index.ts +35 -14
- package/src/charts/kinds/Bars.test.tsx +98 -0
- package/src/charts/kinds/Bars.tsx +350 -467
- package/src/charts/kinds/Donut.tsx +31 -23
- package/src/charts/kinds/DualPanel.test.tsx +131 -0
- package/src/charts/kinds/DualPanel.tsx +301 -135
- package/src/charts/kinds/Heatmap.tsx +72 -47
- package/src/charts/kinds/MultiLine.test.tsx +37 -0
- package/src/charts/kinds/MultiLine.tsx +171 -290
- package/src/charts/kinds/StackedArea.tsx +116 -175
- package/src/charts/kinds/ZonedLine.test.tsx +37 -0
- package/src/charts/kinds/ZonedLine.tsx +149 -255
- package/src/charts/layout/auto-margin.test.ts +42 -0
- package/src/charts/layout/auto-margin.ts +110 -0
- package/src/charts/primitives/CartesianChart.test.tsx +160 -0
- package/src/charts/primitives/CartesianChart.tsx +598 -0
- package/src/charts/primitives/ChartFrame.test.tsx +33 -0
- package/src/charts/primitives/ChartFrame.tsx +40 -4
- package/src/charts/primitives/ChartLegend.test.tsx +78 -0
- package/src/charts/primitives/ChartLegend.tsx +52 -2
- package/src/charts/primitives/ChartTooltip.tsx +67 -37
- package/src/charts/primitives/HoverOverlay.tsx +39 -3
- package/src/charts/primitives/XZoneRects.test.tsx +123 -0
- package/src/charts/primitives/XZoneRects.tsx +132 -0
- package/src/charts/series.test.ts +112 -0
- package/src/charts/series.ts +33 -5
- package/src/charts/utils/measure-text.test.ts +36 -0
- package/src/charts/utils/measure-text.ts +109 -0
- package/src/content/fence-block.tsx +2 -3
- package/src/surfaces.ts +2 -1
- package/src/theme/spacing.test.ts +2 -0
- package/src/tokens/chart-margin.test.ts +39 -0
- package/src/tokens/density.test.ts +1 -0
- package/src/tokens/index.ts +36 -0
- package/src/tokens/palette.ts +3 -0
- package/dist/charts/hooks/useChartTooltip.d.ts +0 -13
- package/dist/charts/hooks/useChartTooltip.d.ts.map +0 -1
- package/dist/charts/hooks/useChartTooltip.js +0 -26
- package/dist/charts/hooks/useHoverSync.d.ts +0 -46
- package/dist/charts/hooks/useHoverSync.d.ts.map +0 -1
- package/dist/charts/hooks/useHoverSync.js +0 -75
- package/dist/charts/hover-context.d.ts +0 -21
- package/dist/charts/hover-context.d.ts.map +0 -1
- package/dist/charts/hover-context.js +0 -12
- package/dist/charts/hover-sync.d.ts +0 -14
- package/dist/charts/hover-sync.d.ts.map +0 -1
- package/dist/charts/hover-sync.js +0 -17
- package/dist/charts/primitives/ResponsiveChart.d.ts +0 -45
- package/dist/charts/primitives/ResponsiveChart.d.ts.map +0 -1
- package/dist/charts/primitives/ResponsiveChart.js +0 -24
- package/src/charts/hooks/useChartTooltip.ts +0 -31
- package/src/charts/hooks/useHoverSync.ts +0 -152
- package/src/charts/hover-context.ts +0 -28
- package/src/charts/hover-sync.tsx +0 -37
- package/src/charts/primitives/ResponsiveChart.tsx +0 -64
package/dist/tokens/palette.d.ts
CHANGED
|
@@ -501,6 +501,9 @@ declare const SPACE_STEP_BASE: {
|
|
|
501
501
|
readonly chartMarginTop: 12;
|
|
502
502
|
/** Chart plot-area margin, right (`VX.margin.right`). */
|
|
503
503
|
readonly chartMarginRight: 16;
|
|
504
|
+
/** Minimum right margin when an `AxisRightNumeric` is rendered — labels like "100"/"60m" need
|
|
505
|
+
* more room than the no-right-axis default (`chartMargin({ rightAxis: true })`, `tokens/index.ts`). */
|
|
506
|
+
readonly chartMarginRightAxis: 40;
|
|
504
507
|
/** Chart plot-area margin, bottom (`VX.margin.bottom`). */
|
|
505
508
|
readonly chartMarginBottom: 30;
|
|
506
509
|
/** Chart plot-area margin, left (`VX.margin.left`). */
|
|
@@ -870,6 +873,7 @@ export declare const SPACE_STEP: {
|
|
|
870
873
|
readonly chartLegendGap: number;
|
|
871
874
|
readonly chartMarginTop: number;
|
|
872
875
|
readonly chartMarginRight: number;
|
|
876
|
+
readonly chartMarginRightAxis: number;
|
|
873
877
|
readonly chartMarginBottom: number;
|
|
874
878
|
readonly chartMarginLeft: number;
|
|
875
879
|
readonly chartDotR: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/tokens/palette.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/tokens/palette.ts"],"names":[],"mappings":"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"}
|
package/dist/tokens/palette.js
CHANGED
|
@@ -420,6 +420,9 @@ const SPACE_STEP_BASE = {
|
|
|
420
420
|
chartMarginTop: 12,
|
|
421
421
|
/** Chart plot-area margin, right (`VX.margin.right`). */
|
|
422
422
|
chartMarginRight: 16,
|
|
423
|
+
/** Minimum right margin when an `AxisRightNumeric` is rendered — labels like "100"/"60m" need
|
|
424
|
+
* more room than the no-right-axis default (`chartMargin({ rightAxis: true })`, `tokens/index.ts`). */
|
|
425
|
+
chartMarginRightAxis: 40,
|
|
423
426
|
/** Chart plot-area margin, bottom (`VX.margin.bottom`). */
|
|
424
427
|
chartMarginBottom: 30,
|
|
425
428
|
/** Chart plot-area margin, left (`VX.margin.left`). */
|
package/llms.txt
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# basalt-ui v1.
|
|
1
|
+
# basalt-ui v1.16.0
|
|
2
2
|
# Opinionated framework for Mantine-based React apps — theme, app shell, visx charts, toolchain presets
|
|
3
3
|
#
|
|
4
4
|
# basalt-ui is an opinionated framework for Mantine-based React apps.
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
# ./tokens.css subpath. Guide: docs/FRAMEWORK-FREE.md in the repo.
|
|
20
20
|
|
|
21
21
|
Package: basalt-ui
|
|
22
|
-
Version: 1.
|
|
22
|
+
Version: 1.16.0
|
|
23
23
|
|
|
24
24
|
## basalt-ui
|
|
25
25
|
Import: import { ... } from 'basalt-ui'
|
|
@@ -30,7 +30,7 @@ OptionalPeers: react-markdown@^10.1.0, remark-gfm@^4.0.1, rehype-sanitize@^6.0.0
|
|
|
30
30
|
|
|
31
31
|
## basalt-ui/charts
|
|
32
32
|
Import: import { ... } from 'basalt-ui/charts'
|
|
33
|
-
Description: visx chart primitives, sparklines, hooks, and token re-exports (Mantine-free)
|
|
33
|
+
Description: CartesianChart + visx chart primitives, kinds, sparklines, hooks, and token re-exports (Mantine-free)
|
|
34
34
|
Layer: headless
|
|
35
35
|
Rule: basalt-charts
|
|
36
36
|
|
package/package.json
CHANGED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { describe, expect, test } from 'bun:test'
|
|
2
|
+
import { buildDomainIndex, parseKey, resolveCursorPoint } from './resolve'
|
|
3
|
+
|
|
4
|
+
type Point = { date: string }
|
|
5
|
+
|
|
6
|
+
const daily = (days: string[]): Point[] => days.map((d) => ({ date: `2026-08-${d}` }))
|
|
7
|
+
const index = (points: Point[]) => buildDomainIndex(points, (p) => p.date)
|
|
8
|
+
|
|
9
|
+
describe('parseKey', () => {
|
|
10
|
+
test('reads numeric strings as numbers', () => {
|
|
11
|
+
expect(parseKey('42')).toBe(42)
|
|
12
|
+
expect(parseKey('-1.5')).toBe(-1.5)
|
|
13
|
+
})
|
|
14
|
+
|
|
15
|
+
test('reads ISO dates as timestamps', () => {
|
|
16
|
+
expect(parseKey('2026-08-18')).toBe(Date.parse('2026-08-18'))
|
|
17
|
+
})
|
|
18
|
+
|
|
19
|
+
test('returns null for a plain category', () => {
|
|
20
|
+
expect(parseKey('Direct')).toBeNull()
|
|
21
|
+
})
|
|
22
|
+
})
|
|
23
|
+
|
|
24
|
+
describe('resolveCursorPoint', () => {
|
|
25
|
+
test('resolves an exact key', () => {
|
|
26
|
+
const i = index(daily(['01', '02', '03']))
|
|
27
|
+
expect(resolveCursorPoint(i, '2026-08-02')?.date).toBe('2026-08-02')
|
|
28
|
+
})
|
|
29
|
+
|
|
30
|
+
test('resolves a FOLDED sibling key to the nearest own point', () => {
|
|
31
|
+
// The failure this replaced: a chart holding every other day never owned the keys its unfolded sibling
|
|
32
|
+
// broadcast, so the shared crosshair appeared on roughly one hover in two.
|
|
33
|
+
const folded = index(daily(['01', '03', '05']))
|
|
34
|
+
expect(resolveCursorPoint(folded, '2026-08-02')?.date).toBe('2026-08-01')
|
|
35
|
+
expect(resolveCursorPoint(folded, '2026-08-04')?.date).toBe('2026-08-03')
|
|
36
|
+
})
|
|
37
|
+
|
|
38
|
+
test('returns null beyond one domain step, so unrelated charts never sync', () => {
|
|
39
|
+
const i = index(daily(['01', '02', '03']))
|
|
40
|
+
expect(resolveCursorPoint(i, '2026-09-30')).toBeNull()
|
|
41
|
+
})
|
|
42
|
+
|
|
43
|
+
test('tolerates one step past each end', () => {
|
|
44
|
+
const i = index(daily(['02', '03', '04']))
|
|
45
|
+
expect(resolveCursorPoint(i, '2026-08-01')?.date).toBe('2026-08-02')
|
|
46
|
+
expect(resolveCursorPoint(i, '2026-08-05')?.date).toBe('2026-08-04')
|
|
47
|
+
})
|
|
48
|
+
|
|
49
|
+
test('categorical domains fall back to exact match only', () => {
|
|
50
|
+
const points = [{ date: 'Direct' }, { date: 'Referral' }]
|
|
51
|
+
const i = buildDomainIndex(points, (p) => p.date)
|
|
52
|
+
expect(resolveCursorPoint(i, 'Direct')?.date).toBe('Direct')
|
|
53
|
+
expect(resolveCursorPoint(i, 'Organic')).toBeNull()
|
|
54
|
+
})
|
|
55
|
+
|
|
56
|
+
test('a single-point chart resolves only its own key', () => {
|
|
57
|
+
const i = index(daily(['01']))
|
|
58
|
+
expect(resolveCursorPoint(i, '2026-08-01')?.date).toBe('2026-08-01')
|
|
59
|
+
expect(resolveCursorPoint(i, '2026-08-02')).toBeNull()
|
|
60
|
+
})
|
|
61
|
+
})
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Domain-aware resolution of a BROADCAST cursor key against a chart's own points.
|
|
3
|
+
*
|
|
4
|
+
* The layer this replaced matched keys byte-for-byte, so two charts shared a cursor only if they emitted identical
|
|
5
|
+
* strings. A chart that folded its domain to fit a narrow viewport stopped owning most of the keys
|
|
6
|
+
* its siblings broadcast, and the shared crosshair then landed on roughly one hover in three with
|
|
7
|
+
* no rule a reader could infer — patched per chart by a manual `resolveKey`. Resolving on the
|
|
8
|
+
* PARSED domain instead makes that automatic (`docs/CHARTS-SPEC.md` §3).
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* A key as a comparable number: numeric-looking strings as numbers, everything else as a date.
|
|
13
|
+
* Neither (a plain category like "Direct") → null, which degrades to exact-match only — correct,
|
|
14
|
+
* since "nearest category" is meaningless.
|
|
15
|
+
*/
|
|
16
|
+
export function parseKey(key: string): number | null {
|
|
17
|
+
if (/^[-+]?\d*\.?\d+$/.test(key)) {
|
|
18
|
+
const n = Number(key)
|
|
19
|
+
return Number.isFinite(n) ? n : null
|
|
20
|
+
}
|
|
21
|
+
const t = Date.parse(key)
|
|
22
|
+
return Number.isNaN(t) ? null : t
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export type DomainIndex<T> = {
|
|
26
|
+
byKey: Map<string, T>
|
|
27
|
+
/** Parsed positions, ascending. Empty when the domain isn't parseable. */
|
|
28
|
+
values: number[]
|
|
29
|
+
/** Points parallel to `values`. */
|
|
30
|
+
points: T[]
|
|
31
|
+
/** Median spacing — the tolerance within which a foreign key still resolves. */
|
|
32
|
+
step: number
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/** Build the lookup structure once per `data` identity. */
|
|
36
|
+
export function buildDomainIndex<T>(data: readonly T[], getKey: (d: T) => string): DomainIndex<T> {
|
|
37
|
+
const byKey = new Map<string, T>()
|
|
38
|
+
const parsed: { value: number; point: T }[] = []
|
|
39
|
+
let parseable = true
|
|
40
|
+
|
|
41
|
+
for (const d of data) {
|
|
42
|
+
byKey.set(getKey(d), d)
|
|
43
|
+
if (!parseable) continue
|
|
44
|
+
const value = parseKey(getKey(d))
|
|
45
|
+
if (value === null) parseable = false
|
|
46
|
+
else parsed.push({ value, point: d })
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
// Under two parseable points there is no step to reason about, so nearest-match would be
|
|
50
|
+
// unbounded — fall back to exact match.
|
|
51
|
+
if (!parseable || parsed.length < 2) return { byKey, values: [], points: [], step: 0 }
|
|
52
|
+
|
|
53
|
+
parsed.sort((a, b) => a.value - b.value)
|
|
54
|
+
const values = parsed.map((p) => p.value)
|
|
55
|
+
const points = parsed.map((p) => p.point)
|
|
56
|
+
|
|
57
|
+
const diffs: number[] = []
|
|
58
|
+
for (let i = 1; i < values.length; i++) {
|
|
59
|
+
diffs.push((values[i] as number) - (values[i - 1] as number))
|
|
60
|
+
}
|
|
61
|
+
diffs.sort((a, b) => a - b)
|
|
62
|
+
|
|
63
|
+
return { byKey, values, points, step: diffs[Math.floor(diffs.length / 2)] ?? 0 }
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/**
|
|
67
|
+
* The own point a broadcast `key` maps to: exact match first, else the nearest parsed position
|
|
68
|
+
* within one domain step. Out of range → null, so charts over unrelated domains never paint a
|
|
69
|
+
* cursor for each other — which is what makes "shared by default" safe.
|
|
70
|
+
*/
|
|
71
|
+
export function resolveCursorPoint<T>(index: DomainIndex<T>, key: string): T | null {
|
|
72
|
+
const exact = index.byKey.get(key)
|
|
73
|
+
if (exact !== undefined) return exact
|
|
74
|
+
|
|
75
|
+
const target = parseKey(key)
|
|
76
|
+
if (target === null || index.values.length === 0) return null
|
|
77
|
+
|
|
78
|
+
const first = index.values[0] as number
|
|
79
|
+
const last = index.values[index.values.length - 1] as number
|
|
80
|
+
if (target < first - index.step || target > last + index.step) return null
|
|
81
|
+
|
|
82
|
+
let lo = 0
|
|
83
|
+
let hi = index.values.length - 1
|
|
84
|
+
while (lo < hi) {
|
|
85
|
+
const mid = (lo + hi) >> 1
|
|
86
|
+
if ((index.values[mid] as number) < target) lo = mid + 1
|
|
87
|
+
else hi = mid
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
let best = lo
|
|
91
|
+
let bestDist = Math.abs((index.values[lo] as number) - target)
|
|
92
|
+
if (lo > 0) {
|
|
93
|
+
const prevDist = Math.abs((index.values[lo - 1] as number) - target)
|
|
94
|
+
// `<=`, not `<`: a key landing exactly between two own points belongs to the EARLIER one —
|
|
95
|
+
// the folded bucket that swallowed it starts there, so ties resolve backwards, consistently.
|
|
96
|
+
if (prevDist <= bestDist) {
|
|
97
|
+
best = lo - 1
|
|
98
|
+
bestDist = prevDist
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
return bestDist <= index.step ? (index.points[best] as T) : null
|
|
102
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { createContext, useContext, useMemo, useSyncExternalStore } from 'react'
|
|
2
|
+
import type { ReactNode } from 'react'
|
|
3
|
+
import type { CursorState, CursorStore } from './store'
|
|
4
|
+
import { createCursorStore, EMPTY_CURSOR, globalCursorStore } from './store'
|
|
5
|
+
|
|
6
|
+
const CursorStoreContext = createContext<CursorStore>(globalCursorStore)
|
|
7
|
+
|
|
8
|
+
export type ChartCursorScopeProps = {
|
|
9
|
+
children: ReactNode
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* ISOLATES its subtree onto a private cursor store — the inverse of the removed `ChartHoverSync`, which
|
|
14
|
+
* had to be mounted to enable sharing at all. Charts share a cursor by default now; wrap a group
|
|
15
|
+
* in this only when it must NOT follow the rest of the page (e.g. two independent dashboards
|
|
16
|
+
* rendered side by side over the same calendar).
|
|
17
|
+
*/
|
|
18
|
+
export function ChartCursorScope({ children }: ChartCursorScopeProps) {
|
|
19
|
+
const store = useMemo(() => createCursorStore(), [])
|
|
20
|
+
return <CursorStoreContext.Provider value={store}>{children}</CursorStoreContext.Provider>
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/** The cursor store this chart belongs to — the nearest `ChartCursorScope`, else the global one. */
|
|
24
|
+
export function useCursorStore(): CursorStore {
|
|
25
|
+
return useContext(CursorStoreContext)
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/** Subscribe to the ambient cursor. Re-renders only on an actual cursor change. */
|
|
29
|
+
export function useCursorState(): CursorState {
|
|
30
|
+
const store = useCursorStore()
|
|
31
|
+
return useSyncExternalStore(store.subscribe, store.get, () => EMPTY_CURSOR)
|
|
32
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { describe, expect, test } from 'bun:test'
|
|
2
|
+
import { createCursorStore, globalCursorStore } from './store'
|
|
3
|
+
|
|
4
|
+
describe('cursor store', () => {
|
|
5
|
+
test('notifies subscribers on change', () => {
|
|
6
|
+
const store = createCursorStore()
|
|
7
|
+
let calls = 0
|
|
8
|
+
const unsubscribe = store.subscribe(() => {
|
|
9
|
+
calls++
|
|
10
|
+
})
|
|
11
|
+
|
|
12
|
+
store.set('2026-08-18', 'chart-a')
|
|
13
|
+
expect(calls).toBe(1)
|
|
14
|
+
expect(store.get()).toEqual({ key: '2026-08-18', source: 'chart-a' })
|
|
15
|
+
|
|
16
|
+
unsubscribe()
|
|
17
|
+
store.set('2026-08-19', 'chart-a')
|
|
18
|
+
expect(calls).toBe(1)
|
|
19
|
+
})
|
|
20
|
+
|
|
21
|
+
test('a redundant set does not notify — a re-hover of the same point costs no render', () => {
|
|
22
|
+
const store = createCursorStore()
|
|
23
|
+
let calls = 0
|
|
24
|
+
store.subscribe(() => {
|
|
25
|
+
calls++
|
|
26
|
+
})
|
|
27
|
+
|
|
28
|
+
store.set('2026-08-18', 'chart-a')
|
|
29
|
+
store.set('2026-08-18', 'chart-a')
|
|
30
|
+
expect(calls).toBe(1)
|
|
31
|
+
})
|
|
32
|
+
|
|
33
|
+
test('clearing returns the stable empty identity', () => {
|
|
34
|
+
const store = createCursorStore()
|
|
35
|
+
const before = store.get()
|
|
36
|
+
store.set('2026-08-18', 'chart-a')
|
|
37
|
+
store.set(null, null)
|
|
38
|
+
expect(store.get()).toBe(before)
|
|
39
|
+
})
|
|
40
|
+
|
|
41
|
+
test('scoped stores are independent of the global one', () => {
|
|
42
|
+
const scoped = createCursorStore()
|
|
43
|
+
scoped.set('2026-08-18', 'chart-a')
|
|
44
|
+
expect(globalCursorStore.get().key).toBeNull()
|
|
45
|
+
})
|
|
46
|
+
})
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The shared chart cursor — an external store, not a React context value.
|
|
3
|
+
*
|
|
4
|
+
* Sharing used to require a `ChartHoverSync` ancestor, so it was opt-in and silently absent
|
|
5
|
+
* whenever someone forgot the wrapper. This inverts that: a module-level store means every
|
|
6
|
+
* chart on the page shares a cursor by default, and `ChartCursorScope` exists to ISOLATE a
|
|
7
|
+
* subtree (`docs/CHARTS-SPEC.md` §3). Charts with non-overlapping domains never resolve each
|
|
8
|
+
* other's keys, so "shared by default" cannot produce a false cursor.
|
|
9
|
+
*
|
|
10
|
+
* External store rather than context for a second reason: a cursor move re-renders only the
|
|
11
|
+
* charts subscribed to it, instead of every descendant of a provider whose value object is new
|
|
12
|
+
* on each pointer frame.
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
/** Broadcast cursor position: an opaque domain key plus the chart that owns it. */
|
|
16
|
+
export type CursorState = {
|
|
17
|
+
/** The hovered x-domain key (a date/category string), or null when nothing is hovered. */
|
|
18
|
+
key: string | null
|
|
19
|
+
/** `chartId` of the chart the pointer is actually over — the one that owns the tooltip. */
|
|
20
|
+
source: string | null
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export type CursorStore = {
|
|
24
|
+
get: () => CursorState
|
|
25
|
+
set: (key: string | null, source: string | null) => void
|
|
26
|
+
subscribe: (onChange: () => void) => () => void
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/** Stable identity for "nothing hovered" — also the SSR snapshot, so it must never be recreated. */
|
|
30
|
+
export const EMPTY_CURSOR: CursorState = { key: null, source: null }
|
|
31
|
+
|
|
32
|
+
export function createCursorStore(): CursorStore {
|
|
33
|
+
let state: CursorState = EMPTY_CURSOR
|
|
34
|
+
const listeners = new Set<() => void>()
|
|
35
|
+
|
|
36
|
+
return {
|
|
37
|
+
get: () => state,
|
|
38
|
+
set: (key, source) => {
|
|
39
|
+
if (state.key === key && state.source === source) return
|
|
40
|
+
state = key === null && source === null ? EMPTY_CURSOR : { key, source }
|
|
41
|
+
for (const listener of listeners) listener()
|
|
42
|
+
},
|
|
43
|
+
subscribe: (onChange) => {
|
|
44
|
+
listeners.add(onChange)
|
|
45
|
+
return () => {
|
|
46
|
+
listeners.delete(onChange)
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/** The default store every chart shares unless a `ChartCursorScope` overrides it. */
|
|
53
|
+
export const globalCursorStore: CursorStore = createCursorStore()
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
import { localPoint } from '@visx/event'
|
|
2
|
+
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
|
3
|
+
import type { KeyboardEvent, PointerEvent } from 'react'
|
|
4
|
+
import { buildDomainIndex, resolveCursorPoint } from '../cursor/resolve'
|
|
5
|
+
import { useCursorState, useCursorStore } from '../cursor/scope'
|
|
6
|
+
|
|
7
|
+
/** Viewport-space pointer anchor the tooltip positions against. */
|
|
8
|
+
export type CursorAnchor = { x: number; y: number }
|
|
9
|
+
|
|
10
|
+
export type ChartCursor<T> = {
|
|
11
|
+
/** The point this chart paints its crosshair + dots at — own hover, or a resolved sibling key. */
|
|
12
|
+
point: T | null
|
|
13
|
+
/** True when the pointer is over THIS chart. Only the source chart shows the floating tooltip. */
|
|
14
|
+
isSource: boolean
|
|
15
|
+
/** Latest pointer position in viewport coords, or null when not hovered. */
|
|
16
|
+
anchor: CursorAnchor | null
|
|
17
|
+
onPointerMove: (event: PointerEvent<SVGRectElement>) => void
|
|
18
|
+
onPointerLeave: () => void
|
|
19
|
+
onKeyDown: (event: KeyboardEvent<SVGRectElement>) => void
|
|
20
|
+
onBlur: () => void
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* Wires a chart into the ambient cursor store: snaps the pointer to the nearest own point,
|
|
25
|
+
* broadcasts it, and reads back a sibling's broadcast through domain-aware resolution. Replaces
|
|
26
|
+
* the removed `useHoverSync` + `useChartTooltip` pair, including their `resolveKey` escape hatch —
|
|
27
|
+
* resolution is now automatic.
|
|
28
|
+
*
|
|
29
|
+
* The tooltip anchor is coalesced through `requestAnimationFrame`, so a fast scrub costs one local
|
|
30
|
+
* state write per frame instead of one per event. The BROADCAST is not rAF-gated — it is deduped
|
|
31
|
+
* instead (the store ignores a set that doesn't change the value), so a scrub within one x-bucket
|
|
32
|
+
* costs nothing while a real bucket change reaches siblings on the same tick rather than a frame
|
|
33
|
+
* late.
|
|
34
|
+
*/
|
|
35
|
+
export function useChartCursor<T>({
|
|
36
|
+
data,
|
|
37
|
+
chartId,
|
|
38
|
+
getKey,
|
|
39
|
+
xScale,
|
|
40
|
+
marginLeft,
|
|
41
|
+
}: {
|
|
42
|
+
data: readonly T[]
|
|
43
|
+
chartId: string
|
|
44
|
+
getKey: (d: T) => string
|
|
45
|
+
/** Own x scale — maps a domain key to a plot-local x offset. */
|
|
46
|
+
xScale: (key: string) => number | undefined
|
|
47
|
+
marginLeft: number
|
|
48
|
+
}): ChartCursor<T> {
|
|
49
|
+
const store = useCursorStore()
|
|
50
|
+
const cursor = useCursorState()
|
|
51
|
+
const [anchor, setAnchor] = useState<CursorAnchor | null>(null)
|
|
52
|
+
|
|
53
|
+
// Accessors read through refs so the pointer callbacks stay referentially stable: the natural
|
|
54
|
+
// call style is an inline arrow, fresh every render, and re-creating these would re-bind the
|
|
55
|
+
// overlay's listeners on every cursor frame in every sibling chart.
|
|
56
|
+
const getKeyRef = useRef(getKey)
|
|
57
|
+
getKeyRef.current = getKey
|
|
58
|
+
const xScaleRef = useRef(xScale)
|
|
59
|
+
xScaleRef.current = xScale
|
|
60
|
+
|
|
61
|
+
const index = useMemo(() => buildDomainIndex(data, getKeyRef.current), [data])
|
|
62
|
+
|
|
63
|
+
const frameRef = useRef<number | null>(null)
|
|
64
|
+
const pendingRef = useRef<CursorAnchor | null>(null)
|
|
65
|
+
useEffect(
|
|
66
|
+
() => () => {
|
|
67
|
+
if (frameRef.current !== null) cancelAnimationFrame(frameRef.current)
|
|
68
|
+
// Release the shared cursor if this chart still owns it. Unmounting while hovered (a filter
|
|
69
|
+
// drops the chart, a tab switches) fires no leave/blur, so the store would keep pointing at
|
|
70
|
+
// a dead chartId — and any sibling whose domain resolves that stale key would paint a ghost
|
|
71
|
+
// crosshair with no way to clear it. Same ownership guard as `clear()`.
|
|
72
|
+
if (store.get().source === chartId) store.set(null, null)
|
|
73
|
+
},
|
|
74
|
+
[store, chartId],
|
|
75
|
+
)
|
|
76
|
+
|
|
77
|
+
const scheduleAnchor = useCallback((next: CursorAnchor) => {
|
|
78
|
+
pendingRef.current = next
|
|
79
|
+
if (frameRef.current !== null) return
|
|
80
|
+
frameRef.current = requestAnimationFrame(() => {
|
|
81
|
+
frameRef.current = null
|
|
82
|
+
setAnchor(pendingRef.current)
|
|
83
|
+
})
|
|
84
|
+
}, [])
|
|
85
|
+
|
|
86
|
+
const onPointerMove = useCallback(
|
|
87
|
+
(event: PointerEvent<SVGRectElement>) => {
|
|
88
|
+
if (data.length === 0) return
|
|
89
|
+
// Explicit reference node: `localPoint(event)` resolves it from `event.target`, which is the
|
|
90
|
+
// overlay rect only while the overlay is genuinely the topmost hit element. Passing
|
|
91
|
+
// `currentTarget` pins the coordinate space to the overlay regardless of what a kind draws
|
|
92
|
+
// above it.
|
|
93
|
+
const local = localPoint(event.currentTarget, event.nativeEvent)
|
|
94
|
+
if (local === null) return
|
|
95
|
+
const px = local.x - marginLeft
|
|
96
|
+
|
|
97
|
+
let closest = data[0] as T
|
|
98
|
+
let minDist = Infinity
|
|
99
|
+
for (const d of data) {
|
|
100
|
+
const x = xScaleRef.current(getKeyRef.current(d)) ?? 0
|
|
101
|
+
const dist = Math.abs(x - px)
|
|
102
|
+
if (dist < minDist) {
|
|
103
|
+
minDist = dist
|
|
104
|
+
closest = d
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
scheduleAnchor({ x: event.clientX, y: event.clientY })
|
|
109
|
+
store.set(getKeyRef.current(closest), chartId)
|
|
110
|
+
},
|
|
111
|
+
[data, marginLeft, chartId, store, scheduleAnchor],
|
|
112
|
+
)
|
|
113
|
+
|
|
114
|
+
const clear = useCallback(() => {
|
|
115
|
+
if (frameRef.current !== null) {
|
|
116
|
+
cancelAnimationFrame(frameRef.current)
|
|
117
|
+
frameRef.current = null
|
|
118
|
+
}
|
|
119
|
+
pendingRef.current = null
|
|
120
|
+
setAnchor(null)
|
|
121
|
+
// Only clear the SHARED cursor if this chart still owns it: moving fast from chart A to B lets
|
|
122
|
+
// A's leave fire after B's move, and an unconditional clear would wipe B's cursor.
|
|
123
|
+
if (store.get().source === chartId) store.set(null, null)
|
|
124
|
+
}, [store, chartId])
|
|
125
|
+
|
|
126
|
+
const onKeyDown = useCallback(
|
|
127
|
+
(event: KeyboardEvent<SVGRectElement>) => {
|
|
128
|
+
if (data.length === 0) return
|
|
129
|
+
if (event.key === 'Escape') {
|
|
130
|
+
clear()
|
|
131
|
+
return
|
|
132
|
+
}
|
|
133
|
+
const delta = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0
|
|
134
|
+
if (delta === 0) return
|
|
135
|
+
event.preventDefault()
|
|
136
|
+
|
|
137
|
+
const current = store.get().key
|
|
138
|
+
const currentIndex = data.findIndex((d) => getKeyRef.current(d) === current)
|
|
139
|
+
const nextIndex = Math.min(
|
|
140
|
+
Math.max((currentIndex === -1 ? (delta > 0 ? -1 : data.length) : currentIndex) + delta, 0),
|
|
141
|
+
data.length - 1,
|
|
142
|
+
)
|
|
143
|
+
const next = data[nextIndex] as T
|
|
144
|
+
const rect = event.currentTarget.getBoundingClientRect()
|
|
145
|
+
const x = xScaleRef.current(getKeyRef.current(next)) ?? 0
|
|
146
|
+
scheduleAnchor({ x: rect.left + x, y: rect.top })
|
|
147
|
+
store.set(getKeyRef.current(next), chartId)
|
|
148
|
+
},
|
|
149
|
+
[data, store, chartId, clear, scheduleAnchor],
|
|
150
|
+
)
|
|
151
|
+
|
|
152
|
+
const point = cursor.key === null ? null : resolveCursorPoint(index, cursor.key)
|
|
153
|
+
|
|
154
|
+
return {
|
|
155
|
+
point,
|
|
156
|
+
isSource: cursor.source === chartId,
|
|
157
|
+
anchor,
|
|
158
|
+
onPointerMove,
|
|
159
|
+
onPointerLeave: clear,
|
|
160
|
+
onKeyDown,
|
|
161
|
+
onBlur: clear,
|
|
162
|
+
}
|
|
163
|
+
}
|
|
@@ -15,12 +15,16 @@ export type UseChartSizeResult = ChartSize & {
|
|
|
15
15
|
* A thin basalt wrapper over `@visx/responsive`'s `useParentSize` — keeps the
|
|
16
16
|
* `@visx/*` import inside `src/charts/**` per the Mantine-free boundary rule.
|
|
17
17
|
*
|
|
18
|
+
* Charts do not call this directly — `ChartFrame` (and `CartesianChart` above it) measure for
|
|
19
|
+
* them, including the legend band. Reach for it when something OUTSIDE the chart system needs a
|
|
20
|
+
* measured box, e.g. sizing a sparkline to its table cell.
|
|
21
|
+
*
|
|
18
22
|
* @example
|
|
19
|
-
* function
|
|
20
|
-
* const { ref, width
|
|
23
|
+
* function CellSparkline({ points }: { points: number[] }) {
|
|
24
|
+
* const { ref, width } = useChartSize()
|
|
21
25
|
* return (
|
|
22
|
-
* <div ref={ref} style={{ width: '100%', height:
|
|
23
|
-
* {width > 0 && <
|
|
26
|
+
* <div ref={ref} style={{ width: '100%', height: 24 }}>
|
|
27
|
+
* {width > 0 && <LineSparkline data={points} width={width} height={24} />}
|
|
24
28
|
* </div>
|
|
25
29
|
* )
|
|
26
30
|
* }
|