basalt-ui 1.30.2 → 1.32.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 +54 -0
- package/MIGRATING.md +256 -12
- package/agent/rules/basalt-controls.md +19 -19
- package/agent/rules/basalt-mantine.md +5 -5
- package/configs/oxlint-plugin.js +371 -4
- package/configs/oxlint-plugin.test.ts +327 -2
- package/configs/oxlint.json +2 -1
- package/dist/agent-chat/composer.d.ts.map +1 -1
- package/dist/agent-chat/composer.js +41 -43
- package/dist/agent-chat/thread-workspace.d.ts +2 -2
- package/dist/agent-chat/thread-workspace.d.ts.map +1 -1
- package/dist/agent-chat/thread-workspace.js +3 -4
- package/dist/agent-chat/use-keyboard-inset.d.ts +2 -0
- package/dist/agent-chat/use-keyboard-inset.d.ts.map +1 -0
- package/dist/agent-chat/use-keyboard-inset.js +34 -0
- package/dist/charts/cursor/touch-pin.d.ts +45 -0
- package/dist/charts/cursor/touch-pin.d.ts.map +1 -0
- package/dist/charts/cursor/touch-pin.js +79 -0
- package/dist/charts/hooks/use-discrete-cursor.d.ts +66 -0
- package/dist/charts/hooks/use-discrete-cursor.d.ts.map +1 -0
- package/dist/charts/hooks/use-discrete-cursor.js +198 -0
- package/dist/charts/hooks/use-hysteresis.d.ts +18 -0
- package/dist/charts/hooks/use-hysteresis.d.ts.map +1 -0
- package/dist/charts/hooks/use-hysteresis.js +12 -0
- package/dist/charts/hooks/useBandPlot.d.ts +7 -0
- package/dist/charts/hooks/useBandPlot.d.ts.map +1 -1
- package/dist/charts/hooks/useBandPlot.js +62 -18
- package/dist/charts/hooks/useChartCursor.d.ts +40 -11
- package/dist/charts/hooks/useChartCursor.d.ts.map +1 -1
- package/dist/charts/hooks/useChartCursor.js +102 -11
- package/dist/charts/index.d.ts +0 -1
- package/dist/charts/index.d.ts.map +1 -1
- package/dist/charts/index.js +0 -10
- package/dist/charts/kinds/BandStrip.d.ts.map +1 -1
- package/dist/charts/kinds/BandStrip.js +47 -82
- package/dist/charts/kinds/Donut.d.ts +9 -3
- package/dist/charts/kinds/Donut.d.ts.map +1 -1
- package/dist/charts/kinds/Donut.js +110 -48
- package/dist/charts/kinds/DualPanel.d.ts.map +1 -1
- package/dist/charts/kinds/DualPanel.js +138 -145
- package/dist/charts/kinds/Heatmap.d.ts +7 -0
- package/dist/charts/kinds/Heatmap.d.ts.map +1 -1
- package/dist/charts/kinds/Heatmap.js +37 -16
- package/dist/charts/kinds/MirroredBars.d.ts.map +1 -1
- package/dist/charts/kinds/MirroredBars.js +68 -111
- package/dist/charts/kinds/band-chrome.d.ts +31 -0
- package/dist/charts/kinds/band-chrome.d.ts.map +1 -0
- package/dist/charts/kinds/band-chrome.js +71 -0
- package/dist/charts/kinds/donut-layout.d.ts +47 -0
- package/dist/charts/kinds/donut-layout.d.ts.map +1 -0
- package/dist/charts/kinds/donut-layout.js +52 -0
- package/dist/charts/layout/auto-margin.d.ts +7 -2
- package/dist/charts/layout/auto-margin.d.ts.map +1 -1
- package/dist/charts/layout/auto-margin.js +12 -3
- package/dist/charts/layout/end-labels.d.ts +64 -0
- package/dist/charts/layout/end-labels.d.ts.map +1 -0
- package/dist/charts/layout/end-labels.js +76 -0
- package/dist/charts/primitives/Axes.d.ts +32 -4
- package/dist/charts/primitives/Axes.d.ts.map +1 -1
- package/dist/charts/primitives/Axes.js +62 -16
- package/dist/charts/primitives/CartesianChart.d.ts +7 -6
- package/dist/charts/primitives/CartesianChart.d.ts.map +1 -1
- package/dist/charts/primitives/CartesianChart.js +264 -145
- package/dist/charts/primitives/ChartCard.d.ts +0 -14
- package/dist/charts/primitives/ChartCard.d.ts.map +1 -1
- package/dist/charts/primitives/ChartCard.js +56 -21
- package/dist/charts/primitives/ChartFrame.d.ts +28 -22
- package/dist/charts/primitives/ChartFrame.d.ts.map +1 -1
- package/dist/charts/primitives/ChartFrame.js +116 -34
- package/dist/charts/primitives/ChartLegend.d.ts +19 -15
- package/dist/charts/primitives/ChartLegend.d.ts.map +1 -1
- package/dist/charts/primitives/ChartLegend.js +86 -73
- package/dist/charts/primitives/ChartTooltip.d.ts +5 -0
- package/dist/charts/primitives/ChartTooltip.d.ts.map +1 -1
- package/dist/charts/primitives/ChartTooltip.js +20 -4
- package/dist/charts/primitives/Crosshair.js +2 -2
- package/dist/charts/primitives/HoverOverlay.d.ts +29 -9
- package/dist/charts/primitives/HoverOverlay.d.ts.map +1 -1
- package/dist/charts/primitives/HoverOverlay.js +54 -27
- package/dist/charts/primitives/HoverOverlay.module.css +13 -0
- package/dist/charts/primitives/HoverOverlay.module.css.d.ts +8 -0
- package/dist/charts/primitives/chart-card-context.d.ts +33 -0
- package/dist/charts/primitives/chart-card-context.d.ts.map +1 -0
- package/dist/charts/primitives/chart-card-context.js +18 -0
- package/dist/charts/primitives/chart-frame-layout.d.ts +93 -113
- package/dist/charts/primitives/chart-frame-layout.d.ts.map +1 -1
- package/dist/charts/primitives/chart-frame-layout.js +75 -34
- package/dist/charts/primitives/chart-layout.d.ts +112 -0
- package/dist/charts/primitives/chart-layout.d.ts.map +1 -0
- package/dist/charts/primitives/chart-layout.js +175 -0
- package/dist/charts/primitives/chart-tier.d.ts +13 -11
- package/dist/charts/primitives/chart-tier.d.ts.map +1 -1
- package/dist/charts/primitives/chart-tier.js +42 -13
- package/dist/charts/primitives/legend-disclosure.d.ts +27 -0
- package/dist/charts/primitives/legend-disclosure.d.ts.map +1 -0
- package/dist/charts/primitives/legend-disclosure.js +153 -0
- package/dist/charts/series.d.ts +4 -1
- package/dist/charts/series.d.ts.map +1 -1
- package/dist/charts/utils/ticks.d.ts +27 -8
- package/dist/charts/utils/ticks.d.ts.map +1 -1
- package/dist/charts/utils/ticks.js +35 -11
- package/dist/common/errors.d.ts +11 -1
- package/dist/common/errors.d.ts.map +1 -1
- package/dist/common/errors.js +16 -2
- package/dist/common/hit-floor.d.ts +10 -0
- package/dist/common/hit-floor.d.ts.map +1 -0
- package/dist/common/hit-floor.js +6 -0
- package/dist/{shell → common}/isomorphic-layout-effect.d.ts +4 -3
- package/dist/common/isomorphic-layout-effect.d.ts.map +1 -0
- package/dist/common/use-measured-widths.d.ts +37 -0
- package/dist/common/use-measured-widths.d.ts.map +1 -0
- package/dist/common/use-measured-widths.js +51 -0
- package/dist/common/use-media-query.d.ts +6 -0
- package/dist/common/use-media-query.d.ts.map +1 -0
- package/dist/common/use-media-query.js +40 -0
- package/dist/common/validate.d.ts +9 -0
- package/dist/common/validate.d.ts.map +1 -1
- package/dist/common/validate.js +9 -4
- package/dist/content/article-layout.d.ts +4 -2
- package/dist/content/article-layout.d.ts.map +1 -1
- package/dist/content/article-layout.js +43 -3
- package/dist/content/article-layout.module.css +45 -4
- package/dist/content/article-layout.module.css.d.ts +3 -0
- package/dist/content/code-block.d.ts.map +1 -1
- package/dist/content/code-block.js +40 -2
- package/dist/content/code-block.module.css +32 -2
- package/dist/content/prose.module.css +13 -8
- package/dist/controls/actions.d.ts +29 -6
- package/dist/controls/actions.d.ts.map +1 -1
- package/dist/controls/actions.js +158 -27
- package/dist/controls/actions.module.css +14 -1
- package/dist/controls/actions.module.css.d.ts +1 -0
- package/dist/controls/controls.module.css +13 -31
- package/dist/controls/enum-filter.js +2 -2
- package/dist/controls/filter-context.d.ts +10 -0
- package/dist/controls/filter-context.d.ts.map +1 -1
- package/dist/controls/filter-context.js +2 -0
- package/dist/controls/filter-pill.d.ts.map +1 -1
- package/dist/controls/filter-pill.js +1 -0
- package/dist/controls/index.d.ts +1 -1
- package/dist/controls/index.d.ts.map +1 -1
- package/dist/controls/index.js +0 -2
- package/dist/controls/multi-select-filter.js +2 -2
- package/dist/controls/sync-button.module.css +2 -1
- package/dist/dashboard/section.d.ts.map +1 -1
- package/dist/dashboard/section.js +1 -0
- package/dist/dashboard/section.module.css +1 -26
- package/dist/dashboard/stat-card.d.ts +1 -1
- package/dist/dashboard/stat-card.d.ts.map +1 -1
- package/dist/dashboard/stat-card.js +4 -1
- package/dist/dashboard/stat-card.module.css +6 -9
- package/dist/dashboard/stat-group.module.css +33 -66
- package/dist/dashboard/widget-grid.d.ts.map +1 -1
- package/dist/dashboard/widget-grid.module.css +11 -38
- package/dist/dashboard/widget-header.d.ts +14 -4
- package/dist/dashboard/widget-header.d.ts.map +1 -1
- package/dist/dashboard/widget-header.js +23 -6
- package/dist/dashboard/widget-header.module.css +145 -133
- package/dist/dashboard/widget-header.module.css.d.ts +2 -0
- package/dist/data/data-table-state.d.ts +83 -0
- package/dist/data/data-table-state.d.ts.map +1 -0
- package/dist/data/data-table-state.js +139 -0
- package/dist/data/data-table.d.ts +56 -2
- package/dist/data/data-table.d.ts.map +1 -1
- package/dist/data/data-table.js +436 -336
- package/dist/data/data-table.module.css +94 -0
- package/dist/data/data-table.module.css.d.ts +11 -0
- package/dist/data/virtual-list.d.ts.map +1 -1
- package/dist/data/virtual-list.js +10 -0
- package/dist/forms/form-layout.d.ts.map +1 -1
- package/dist/forms/form-layout.js +3 -3
- package/dist/forms/form-layout.module.css +20 -5
- package/dist/forms/form-layout.module.css.d.ts +1 -0
- package/dist/guard/index.d.ts +8 -2
- package/dist/guard/index.d.ts.map +1 -1
- package/dist/guard/index.js +68 -2
- package/dist/guard/types.d.ts +3 -3
- package/dist/guard/types.d.ts.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -1
- package/dist/notifications/center.d.ts.map +1 -1
- package/dist/provider/index.d.ts +20 -1
- package/dist/provider/index.d.ts.map +1 -1
- package/dist/provider/index.js +30 -8
- package/dist/shell/app-brand.d.ts.map +1 -1
- package/dist/shell/app-brand.js +1 -0
- package/dist/shell/app-brand.module.css +2 -2
- package/dist/shell/app-header.module.css +18 -8
- package/dist/shell/app-main.module.css +54 -3
- package/dist/shell/app-main.module.css.d.ts +1 -0
- package/dist/shell/app-mobile-nav.module.css +16 -4
- package/dist/shell/app-sidebar.module.css +4 -6
- package/dist/shell/aside-docking.d.ts +31 -0
- package/dist/shell/aside-docking.d.ts.map +1 -0
- package/dist/shell/aside-docking.js +19 -0
- package/dist/shell/index.d.ts +1 -0
- package/dist/shell/index.d.ts.map +1 -1
- package/dist/shell/index.js +56 -16
- package/dist/shell/mobile-nav-model.d.ts +1 -1
- package/dist/shell/page-aside.d.ts +22 -3
- package/dist/shell/page-aside.d.ts.map +1 -1
- package/dist/shell/page-aside.js +27 -13
- package/dist/shell/page-bar.d.ts.map +1 -1
- package/dist/shell/page-bar.js +10 -5
- package/dist/shell/page-bar.module.css +10 -34
- package/dist/shell/use-breakpoint.d.ts +3 -4
- package/dist/shell/use-breakpoint.d.ts.map +1 -1
- package/dist/shell/use-breakpoint.js +3 -25
- package/dist/shell/use-size-class.d.ts +6 -0
- package/dist/shell/use-size-class.d.ts.map +1 -0
- package/dist/shell/use-size-class.js +19 -0
- package/dist/state/persisted-or-local.d.ts +4 -1
- package/dist/state/persisted-or-local.d.ts.map +1 -1
- package/dist/state/persisted-or-local.js +4 -3
- package/dist/state/persisted.d.ts +10 -0
- package/dist/state/persisted.d.ts.map +1 -1
- package/dist/state/persisted.js +44 -14
- package/dist/styles.css +41 -0
- package/dist/surfaces.d.ts +4 -4
- package/dist/surfaces.d.ts.map +1 -1
- package/dist/surfaces.js +11 -3
- package/dist/theme/controls.module.css +7 -0
- package/dist/theme/ctl-theme.d.ts +1 -0
- package/dist/theme/ctl-theme.d.ts.map +1 -1
- package/dist/theme/ctl-theme.js +12 -4
- package/dist/theme/floating.module.css +37 -0
- package/dist/theme/floating.module.css.d.ts +3 -0
- package/dist/theme/index.d.ts +2 -2
- package/dist/theme/index.d.ts.map +1 -1
- package/dist/theme/index.js +34 -5
- package/dist/theme/nav-link.module.css +7 -0
- package/dist/theme-lab/derive-controls.d.ts.map +1 -1
- package/dist/tokens/index.d.ts +7 -16
- package/dist/tokens/index.d.ts.map +1 -1
- package/dist/tokens/index.js +23 -28
- package/dist/tokens/palette.d.ts +5 -27
- package/dist/tokens/palette.d.ts.map +1 -1
- package/dist/tokens/palette.js +8 -30
- package/dist/tokens/size-classes.d.ts +40 -0
- package/dist/tokens/size-classes.d.ts.map +1 -0
- package/dist/tokens/size-classes.js +29 -0
- package/dist/tokens.css +8 -4
- package/llms.txt +3 -3
- package/package.json +18 -17
- package/src/agent-chat/composer.tsx +74 -47
- package/src/agent-chat/thread-workspace.tsx +8 -11
- package/src/agent-chat/use-keyboard-inset.ts +68 -0
- package/src/charts/cursor/touch-pin.ts +138 -0
- package/src/charts/hooks/use-discrete-cursor.ts +335 -0
- package/src/charts/hooks/use-hysteresis.ts +26 -0
- package/src/charts/hooks/useBandPlot.ts +90 -27
- package/src/charts/hooks/useChartCursor.ts +211 -26
- package/src/charts/index.ts +0 -8
- package/src/charts/kinds/BandStrip.tsx +25 -61
- package/src/charts/kinds/Donut.tsx +153 -62
- package/src/charts/kinds/DualPanel.tsx +21 -26
- package/src/charts/kinds/Heatmap.tsx +61 -22
- package/src/charts/kinds/MirroredBars.tsx +23 -65
- package/src/charts/kinds/band-chrome.tsx +91 -0
- package/src/charts/kinds/donut-layout.ts +82 -0
- package/src/charts/layout/auto-margin.ts +24 -5
- package/src/charts/layout/end-labels.ts +135 -0
- package/src/charts/primitives/Axes.tsx +112 -21
- package/src/charts/primitives/CartesianChart.tsx +282 -111
- package/src/charts/primitives/ChartCard.tsx +119 -48
- package/src/charts/primitives/ChartFrame.tsx +204 -60
- package/src/charts/primitives/ChartLegend.tsx +115 -78
- package/src/charts/primitives/ChartTooltip.tsx +24 -3
- package/src/charts/primitives/Crosshair.tsx +2 -2
- package/src/charts/primitives/HoverOverlay.module.css +13 -0
- package/src/charts/primitives/HoverOverlay.module.css.d.ts +8 -0
- package/src/charts/primitives/HoverOverlay.tsx +62 -20
- package/src/charts/primitives/chart-card-context.ts +46 -0
- package/src/charts/primitives/chart-frame-layout.ts +207 -182
- package/src/charts/primitives/chart-layout.ts +318 -0
- package/src/charts/primitives/chart-tier.tsx +66 -21
- package/src/charts/primitives/legend-disclosure.tsx +177 -0
- package/src/charts/series.ts +4 -1
- package/src/charts/utils/ticks.ts +95 -19
- package/src/common/errors.ts +25 -1
- package/src/common/hit-floor.ts +9 -0
- package/src/{shell → common}/isomorphic-layout-effect.ts +4 -3
- package/src/common/use-measured-widths.ts +88 -0
- package/src/common/use-media-query.ts +56 -0
- package/src/common/validate.ts +17 -4
- package/src/content/article-layout.module.css +45 -4
- package/src/content/article-layout.module.css.d.ts +3 -0
- package/src/content/article-layout.tsx +60 -5
- package/src/content/code-block.module.css +32 -2
- package/src/content/code-block.tsx +47 -3
- package/src/content/prose.module.css +13 -8
- package/src/controls/actions.module.css +14 -1
- package/src/controls/actions.module.css.d.ts +1 -0
- package/src/controls/actions.tsx +223 -75
- package/src/controls/controls.module.css +13 -31
- package/src/controls/enum-filter.tsx +2 -2
- package/src/controls/filter-context.tsx +11 -0
- package/src/controls/filter-pill.tsx +1 -0
- package/src/controls/index.ts +0 -1
- package/src/controls/multi-select-filter.tsx +2 -2
- package/src/controls/sync-button.module.css +2 -1
- package/src/dashboard/section.module.css +1 -26
- package/src/dashboard/section.tsx +1 -0
- package/src/dashboard/stat-card.module.css +6 -9
- package/src/dashboard/stat-card.tsx +6 -3
- package/src/dashboard/stat-group.module.css +33 -66
- package/src/dashboard/widget-grid.module.css +11 -38
- package/src/dashboard/widget-grid.tsx +7 -6
- package/src/dashboard/widget-header.module.css +145 -133
- package/src/dashboard/widget-header.module.css.d.ts +2 -0
- package/src/dashboard/widget-header.tsx +45 -11
- package/src/data/data-table-state.ts +218 -0
- package/src/data/data-table.module.css +94 -0
- package/src/data/data-table.module.css.d.ts +11 -0
- package/src/data/data-table.tsx +547 -299
- package/src/data/virtual-list.tsx +31 -0
- package/src/forms/form-layout.module.css +20 -5
- package/src/forms/form-layout.module.css.d.ts +1 -0
- package/src/forms/form-layout.tsx +12 -10
- package/src/guard/index.ts +188 -3
- package/src/guard/types.ts +3 -2
- package/src/index.ts +2 -0
- package/src/notifications/center.tsx +3 -0
- package/src/provider/index.tsx +60 -7
- package/src/shell/app-brand.module.css +2 -2
- package/src/shell/app-brand.tsx +1 -0
- package/src/shell/app-header.module.css +18 -8
- package/src/shell/app-main.module.css +54 -3
- package/src/shell/app-main.module.css.d.ts +1 -0
- package/src/shell/app-mobile-nav.module.css +16 -4
- package/src/shell/app-sidebar.module.css +4 -6
- package/src/shell/aside-docking.ts +54 -0
- package/src/shell/index.tsx +178 -129
- package/src/shell/mobile-nav-model.ts +1 -1
- package/src/shell/page-aside.tsx +70 -21
- package/src/shell/page-bar.module.css +10 -34
- package/src/shell/page-bar.tsx +10 -5
- package/src/shell/use-breakpoint.ts +9 -45
- package/src/shell/use-size-class.ts +31 -0
- package/src/state/persisted-or-local.ts +10 -4
- package/src/state/persisted.ts +76 -17
- package/src/styles.css +41 -0
- package/src/surfaces.ts +9 -1
- package/src/theme/controls.module.css +7 -0
- package/src/theme/ctl-theme.tsx +15 -3
- package/src/theme/floating.module.css +37 -0
- package/src/theme/floating.module.css.d.ts +3 -0
- package/src/theme/index.ts +46 -8
- package/src/theme/nav-link.module.css +7 -0
- package/src/theme-lab/derive-controls.tsx +2 -0
- package/src/tokens/index.ts +20 -30
- package/src/tokens/palette.ts +6 -28
- package/src/tokens/size-classes.ts +46 -0
- package/dist/shell/isomorphic-layout-effect.d.ts.map +0 -1
- /package/dist/{shell → common}/isomorphic-layout-effect.js +0 -0
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import type { ContainerClass } from '../../tokens/size-classes.js';
|
|
2
|
+
import type { ChartSeries } from '../series.js';
|
|
3
|
+
/** Space between the plot edge and an end label's first glyph. */
|
|
4
|
+
export declare const END_LABEL_GAP = 6;
|
|
5
|
+
/** End labels are for a handful of lines; past this the legend alone names them. */
|
|
6
|
+
export declare const MAX_END_LABELS = 3;
|
|
7
|
+
/** Line box of one end label, as a multiple of its font size — the collision gap. */
|
|
8
|
+
export declare const END_LABEL_LINE_HEIGHT = 1.3;
|
|
9
|
+
/**
|
|
10
|
+
* Greedy collision nudging for direct labels. Each `ys` entry is a label's preferred CENTRE; the
|
|
11
|
+
* result keeps input order and holds every label at least `minGap` from its neighbours, inside
|
|
12
|
+
* `[min, max]`. Sorted by y, each label yields to the one above it, then a backward pass pulls the
|
|
13
|
+
* stack up off the bottom edge. Returns `null` when the labels cannot all fit — the caller draws
|
|
14
|
+
* none (the legend still names every series) rather than a partial or overlapping set.
|
|
15
|
+
*/
|
|
16
|
+
export declare function nudgeLabels(input: {
|
|
17
|
+
ys: readonly number[];
|
|
18
|
+
minGap: number;
|
|
19
|
+
min: number;
|
|
20
|
+
max: number;
|
|
21
|
+
}): number[] | null;
|
|
22
|
+
/**
|
|
23
|
+
* The right gutter the end labels need: the widest label plus the gap. `null` when it would eat
|
|
24
|
+
* more than a quarter of the plot — a label longer than that has no honest place in a gutter.
|
|
25
|
+
*/
|
|
26
|
+
export declare function endLabelGutter(input: {
|
|
27
|
+
labels: readonly string[];
|
|
28
|
+
fontPx: number;
|
|
29
|
+
plotWidth: number;
|
|
30
|
+
}): number | null;
|
|
31
|
+
/** One drawn end label: the series it names and its nudged centre y. */
|
|
32
|
+
export type EndLabel<T> = {
|
|
33
|
+
series: ChartSeries<T>;
|
|
34
|
+
y: number;
|
|
35
|
+
};
|
|
36
|
+
/**
|
|
37
|
+
* Whether and how a chart draws end-of-line labels. Eligible only on a wide container with one y
|
|
38
|
+
* axis, no consumer `margin.right`, no header legend already naming every series for free (R2C-10:
|
|
39
|
+
* end labels REPLACE the legend, they never duplicate it), and 2..{@link MAX_END_LABELS} visible
|
|
40
|
+
* series that are all lines — a single line has its own title doing that job already (the same law
|
|
41
|
+
* that already suppresses a single-entry legend, `ChartFrame.resolveLegend`'s JSDoc). Each label
|
|
42
|
+
* sits at its line's last non-null value, nudged apart; the plan is `null` — no gutter reserved,
|
|
43
|
+
* nothing drawn — when any rule fails, a series has no plottable value, the stack cannot fit, or
|
|
44
|
+
* the gutter would be too wide. The gutter is measured from the label text.
|
|
45
|
+
*/
|
|
46
|
+
export declare function planEndLabels<T>(input: {
|
|
47
|
+
containerClass: ContainerClass;
|
|
48
|
+
hasY2: boolean;
|
|
49
|
+
hasMarginRight: boolean;
|
|
50
|
+
/** A `ChartCard` header slot already named every visible series — end labels would only repeat
|
|
51
|
+
* it, at the cost of a right-hand gutter the header slot cost nothing (R2C-10). */
|
|
52
|
+
hasHeaderLegend: boolean;
|
|
53
|
+
visible: readonly ChartSeries<T>[];
|
|
54
|
+
data: readonly T[];
|
|
55
|
+
yScale: (value: number) => number;
|
|
56
|
+
yMax: number;
|
|
57
|
+
fontPx: number;
|
|
58
|
+
/** Plot width before any gutter is taken. */
|
|
59
|
+
plotWidth: number;
|
|
60
|
+
}): {
|
|
61
|
+
gutter: number;
|
|
62
|
+
labels: EndLabel<T>[];
|
|
63
|
+
} | null;
|
|
64
|
+
//# sourceMappingURL=end-labels.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"end-labels.d.ts","sourceRoot":"","sources":["../../../src/charts/layout/end-labels.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC/D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAG5C,kEAAkE;AAClE,eAAO,MAAM,aAAa,IAAI,CAAA;AAE9B,oFAAoF;AACpF,eAAO,MAAM,cAAc,IAAI,CAAA;AAE/B,qFAAqF;AACrF,eAAO,MAAM,qBAAqB,MAAM,CAAA;AAKxC;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE;IACjC,EAAE,EAAE,SAAS,MAAM,EAAE,CAAA;IACrB,MAAM,EAAE,MAAM,CAAA;IACd,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;CACZ,GAAG,MAAM,EAAE,GAAG,IAAI,CAsBlB;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,MAAM,EAAE,SAAS,MAAM,EAAE,CAAA;IACzB,MAAM,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,MAAM,CAAA;CAClB,GAAG,MAAM,GAAG,IAAI,CAMhB;AAED,wEAAwE;AACxE,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI;IAAE,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAE/D;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,KAAK,EAAE;IACtC,cAAc,EAAE,cAAc,CAAA;IAC9B,KAAK,EAAE,OAAO,CAAA;IACd,cAAc,EAAE,OAAO,CAAA;IACvB;uFACmF;IACnF,eAAe,EAAE,OAAO,CAAA;IACxB,OAAO,EAAE,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,CAAA;IAClC,IAAI,EAAE,SAAS,CAAC,EAAE,CAAA;IAClB,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACjC,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,6CAA6C;IAC7C,SAAS,EAAE,MAAM,CAAA;CAClB,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAA;CAAE,GAAG,IAAI,CAuCnD"}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import { measureText } from "../utils/measure-text.js";
|
|
2
|
+
const END_LABEL_GAP = 6;
|
|
3
|
+
const MAX_END_LABELS = 3;
|
|
4
|
+
const END_LABEL_LINE_HEIGHT = 1.3;
|
|
5
|
+
const MAX_GUTTER_SHARE = 0.25;
|
|
6
|
+
function nudgeLabels(input) {
|
|
7
|
+
const { ys, minGap, min, max } = input;
|
|
8
|
+
if (ys.length === 0) return [];
|
|
9
|
+
if (ys.some((y) => !Number.isFinite(y))) return null;
|
|
10
|
+
if ((ys.length - 1) * minGap > max - min) return null;
|
|
11
|
+
const order = ys.map((y, i) => ({ y, i })).toSorted((a, b) => a.y - b.y);
|
|
12
|
+
let prev = Number.NEGATIVE_INFINITY;
|
|
13
|
+
const forward = order.map(({ y, i }) => {
|
|
14
|
+
prev = Math.max(y, min, prev + minGap);
|
|
15
|
+
return { i, y: prev };
|
|
16
|
+
});
|
|
17
|
+
let next = Number.POSITIVE_INFINITY;
|
|
18
|
+
const back = forward.toReversed().map(({ i, y }) => {
|
|
19
|
+
next = Math.min(y, max, next - minGap);
|
|
20
|
+
return { i, y: next };
|
|
21
|
+
});
|
|
22
|
+
if (next < min) return null;
|
|
23
|
+
return back.toSorted((a, b) => a.i - b.i).map((p) => p.y);
|
|
24
|
+
}
|
|
25
|
+
function endLabelGutter(input) {
|
|
26
|
+
const { labels, fontPx, plotWidth } = input;
|
|
27
|
+
if (labels.length === 0) return null;
|
|
28
|
+
const widest = labels.reduce((max, label) => Math.max(max, measureText(label, fontPx)), 0);
|
|
29
|
+
const gutter = Math.ceil(widest) + END_LABEL_GAP;
|
|
30
|
+
return gutter > plotWidth * MAX_GUTTER_SHARE ? null : gutter;
|
|
31
|
+
}
|
|
32
|
+
function planEndLabels(input) {
|
|
33
|
+
const {
|
|
34
|
+
containerClass,
|
|
35
|
+
hasY2,
|
|
36
|
+
hasMarginRight,
|
|
37
|
+
hasHeaderLegend,
|
|
38
|
+
visible,
|
|
39
|
+
data,
|
|
40
|
+
yScale,
|
|
41
|
+
yMax,
|
|
42
|
+
fontPx,
|
|
43
|
+
plotWidth
|
|
44
|
+
} = input;
|
|
45
|
+
if (containerClass !== "wide" || hasY2 || hasMarginRight || hasHeaderLegend) return null;
|
|
46
|
+
if (visible.length < 2 || visible.length > MAX_END_LABELS) return null;
|
|
47
|
+
if (!visible.every((s) => s.mark === "line")) return null;
|
|
48
|
+
const gutter = endLabelGutter({ labels: visible.map((s) => s.label), fontPx, plotWidth });
|
|
49
|
+
if (gutter === null) return null;
|
|
50
|
+
const placed = visible.flatMap((s) => {
|
|
51
|
+
const last = data.findLast((d) => s.getValue(d) !== null);
|
|
52
|
+
if (last === void 0) return [];
|
|
53
|
+
const value = s.getValue(last);
|
|
54
|
+
if (value === null) return [];
|
|
55
|
+
const y = yScale(value);
|
|
56
|
+
return Number.isFinite(y) ? [{ series: s, y }] : [];
|
|
57
|
+
});
|
|
58
|
+
if (placed.length !== visible.length) return null;
|
|
59
|
+
const lineHeight = Math.ceil(fontPx * END_LABEL_LINE_HEIGHT);
|
|
60
|
+
const ys = nudgeLabels({
|
|
61
|
+
ys: placed.map((p) => p.y),
|
|
62
|
+
minGap: lineHeight,
|
|
63
|
+
min: lineHeight / 2,
|
|
64
|
+
max: yMax - lineHeight / 2
|
|
65
|
+
});
|
|
66
|
+
if (ys === null) return null;
|
|
67
|
+
return { gutter, labels: placed.map((p, i) => ({ series: p.series, y: ys[i] ?? p.y })) };
|
|
68
|
+
}
|
|
69
|
+
export {
|
|
70
|
+
END_LABEL_GAP,
|
|
71
|
+
END_LABEL_LINE_HEIGHT,
|
|
72
|
+
MAX_END_LABELS,
|
|
73
|
+
endLabelGutter,
|
|
74
|
+
nudgeLabels,
|
|
75
|
+
planEndLabels
|
|
76
|
+
};
|
|
@@ -1,17 +1,33 @@
|
|
|
1
1
|
import type { AxisScale, TickFormatter } from '@visx/axis';
|
|
2
|
+
/**
|
|
3
|
+
* Tick label font — mono, per `docs/DESIGN-SPEC.md` §5 ("ticks mono 10.5px faint"). Not a `VX.*`
|
|
4
|
+
* ref (the token layer is off-limits to font-family additions here) — a plain reference to the
|
|
5
|
+
* `--basalt-font-mono` var that `styles.css` already defines. Exported so `CartesianChart`'s own
|
|
6
|
+
* end-of-line labels (the same mono tick font, painted outside any `Axis*` primitive here) read it
|
|
7
|
+
* rather than keeping a second, driftable copy of the literal.
|
|
8
|
+
*/
|
|
9
|
+
export declare const TICK_FONT_FAMILY = "var(--basalt-font-mono)";
|
|
10
|
+
/** Tick label colour. Default `VX.faint`; a dual-axis chart tints it with its series' colour. */
|
|
11
|
+
type TickColor = {
|
|
12
|
+
tickColor?: string;
|
|
13
|
+
};
|
|
2
14
|
/** Themed left numeric axis — baked-in theme colors + font size. The tick font tracks the ambient
|
|
3
15
|
* chart tier (`docs/CHARTS-SPEC.md` §8); a caller measuring its own gutter must measure at the
|
|
4
|
-
* SAME size (`
|
|
16
|
+
* SAME size (`chartMetrics().axisFont` into `autoMargin`'s `fontPx`), or the measured label
|
|
5
17
|
* and the painted one stop being the same string's width. */
|
|
6
|
-
export declare function AxisLeftNumeric({ scale, numTicks, tickFormat, tickValues, }: {
|
|
18
|
+
export declare function AxisLeftNumeric({ scale, numTicks, tickFormat, tickValues, inside, tickColor, }: TickColor & {
|
|
7
19
|
scale: AxisScale;
|
|
8
20
|
numTicks?: number;
|
|
9
21
|
tickFormat?: TickFormatter<number>;
|
|
10
22
|
/** Exact tick positions (e.g. a compass axis at 0/90/180/270). Overrides `numTicks`. */
|
|
11
23
|
tickValues?: readonly number[];
|
|
24
|
+
/** Labels drawn over the grid, left-aligned on a surface-coloured background chip (above their
|
|
25
|
+
* line, or below it for a tick within one line-height of the plot's top edge) — the caller
|
|
26
|
+
* reserves no gutter for them (`docs/CHARTS-SPEC.md` §8). */
|
|
27
|
+
inside?: boolean;
|
|
12
28
|
}): import("react").JSX.Element;
|
|
13
29
|
/** Themed right numeric axis — mirrors AxisLeftNumeric for dual-axis charts. */
|
|
14
|
-
export declare function AxisRightNumeric({ scale, left, numTicks, tickFormat, tickValues, }: {
|
|
30
|
+
export declare function AxisRightNumeric({ scale, left, numTicks, tickFormat, tickValues, tickColor, }: TickColor & {
|
|
15
31
|
scale: AxisScale;
|
|
16
32
|
/** Left offset inside the Group (typically xMax). Required since AxisRight needs positioning. */
|
|
17
33
|
left: number;
|
|
@@ -35,11 +51,22 @@ export declare function AxisBottomNumeric({ scale, top, numTicks, tickFormat, ti
|
|
|
35
51
|
/** Exact tick positions (e.g. a compass axis at 0/90/180/270). Overrides `numTicks`. */
|
|
36
52
|
tickValues?: readonly number[];
|
|
37
53
|
}): import("react").JSX.Element;
|
|
54
|
+
/** `textAnchor` of one x label: inward at the two terminals when asked, centred otherwise. */
|
|
55
|
+
export declare function terminalAnchor(input: {
|
|
56
|
+
anchorTerminals: boolean;
|
|
57
|
+
index: number;
|
|
58
|
+
count: number;
|
|
59
|
+
}): 'start' | 'middle' | 'end';
|
|
38
60
|
/** Themed bottom date axis — baked-in smartTicks + DD.MM formatting. */
|
|
39
|
-
export declare function AxisBottomDate({ scale, top, tickValues, tickFormat, rotate, }: {
|
|
61
|
+
export declare function AxisBottomDate({ scale, top, tickValues, tickFormat, rotate, anchorTerminals, wrapWidth, }: {
|
|
40
62
|
scale: AxisScale;
|
|
41
63
|
top: number;
|
|
42
64
|
tickValues: string[];
|
|
65
|
+
/** First label anchored `start`, last `end`, so the terminals stay inside the plot instead of
|
|
66
|
+
* overflowing it. Ignored when rotated. */
|
|
67
|
+
anchorTerminals?: boolean;
|
|
68
|
+
/** Wrap each label to this many px (SVG tspans) instead of thinning or rotating it. */
|
|
69
|
+
wrapWidth?: number;
|
|
43
70
|
/**
|
|
44
71
|
* Defaults to `fmtAxisDate` (DD.MM). Override for a sub-day window, where DD.MM collapses every
|
|
45
72
|
* tick to the same label.
|
|
@@ -52,4 +79,5 @@ export declare function AxisBottomDate({ scale, top, tickValues, tickFormat, rot
|
|
|
52
79
|
*/
|
|
53
80
|
rotate?: 45 | 90;
|
|
54
81
|
}): import("react").JSX.Element;
|
|
82
|
+
export {};
|
|
55
83
|
//# sourceMappingURL=Axes.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Axes.d.ts","sourceRoot":"","sources":["../../../src/charts/primitives/Axes.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,
|
|
1
|
+
{"version":3,"file":"Axes.d.ts","sourceRoot":"","sources":["../../../src/charts/primitives/Axes.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAqB,MAAM,YAAY,CAAA;AAM7E;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,4BAA4B,CAAA;AAezD,iGAAiG;AACjG,KAAK,SAAS,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAoCvC;;;6DAG6D;AAC7D,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAY,EACZ,UAAU,EACV,UAAU,EACV,MAAc,EACd,SAA8B,GAC/B,EAAE,SAAS,GAAG;IACb,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAClC,wFAAwF;IACxF,UAAU,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAC9B;;iEAE6D;IAC7D,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,+BAuBA;AAED,gFAAgF;AAChF,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,IAAI,EACJ,QAAY,EACZ,UAAU,EACV,UAAU,EACV,SAA8B,GAC/B,EAAE,SAAS,GAAG;IACb,KAAK,EAAE,SAAS,CAAA;IAChB,iGAAiG;IACjG,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAClC,wFAAwF;IACxF,UAAU,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;CAC/B,+BAmBA;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,GAAG,EACH,QAAY,EACZ,UAAU,EACV,UAAU,GACX,EAAE;IACD,KAAK,EAAE,SAAS,CAAA;IAChB,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAClC,wFAAwF;IACxF,UAAU,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;CAC/B,+BAmBA;AAYD,8FAA8F;AAC9F,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,eAAe,EAAE,OAAO,CAAA;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAK7B;AAED,wEAAwE;AACxE,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,GAAG,EACH,UAAU,EACV,UAAwB,EACxB,MAAM,EACN,eAAuB,EACvB,SAAS,GACV,EAAE;IACD,KAAK,EAAE,SAAS,CAAA;IAChB,GAAG,EAAE,MAAM,CAAA;IACX,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB;+CAC2C;IAC3C,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,uFAAuF;IACvF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAClC;;;;OAIG;IACH,MAAM,CAAC,EAAE,EAAE,GAAG,EAAE,CAAA;CACjB,+BA6BA"}
|
|
@@ -3,15 +3,45 @@ import { AxisBottom, AxisLeft, AxisRight } from "@visx/axis";
|
|
|
3
3
|
import { VX } from "../../tokens/index.js";
|
|
4
4
|
import { ROTATED_LABEL_OFFSET } from "../layout/auto-margin.js";
|
|
5
5
|
import { fmtAxisDate } from "../utils/format.js";
|
|
6
|
-
import {
|
|
6
|
+
import { useChartMetrics } from "./chart-tier.js";
|
|
7
7
|
const TICK_FONT_FAMILY = "var(--basalt-font-mono)";
|
|
8
|
+
const INSIDE_LABEL_PAD_X = 4;
|
|
9
|
+
const INSIDE_LABEL_GAP = 3;
|
|
10
|
+
const INSIDE_LABEL_HALO_WIDTH = 3;
|
|
11
|
+
const TOP_CLEARANCE_LINES = 1;
|
|
12
|
+
const DEFAULT_TICK_COLOR = VX.faint;
|
|
13
|
+
function InsideTickLabel({ x, y, formattedValue, fontSize, fill }) {
|
|
14
|
+
if (formattedValue === void 0) return null;
|
|
15
|
+
const size = typeof fontSize === "number" ? fontSize : VX.axisFont;
|
|
16
|
+
const lineHeight = Math.round(size * 1.3);
|
|
17
|
+
const nearTop = y <= lineHeight * TOP_CLEARANCE_LINES;
|
|
18
|
+
const centerY = nearTop ? y + INSIDE_LABEL_GAP + lineHeight / 2 : y - INSIDE_LABEL_GAP - lineHeight / 2;
|
|
19
|
+
return /* @__PURE__ */ jsx(
|
|
20
|
+
"text",
|
|
21
|
+
{
|
|
22
|
+
x: x + INSIDE_LABEL_PAD_X,
|
|
23
|
+
y: centerY,
|
|
24
|
+
dominantBaseline: "middle",
|
|
25
|
+
textAnchor: "start",
|
|
26
|
+
fill,
|
|
27
|
+
stroke: VX.surface.panel,
|
|
28
|
+
strokeWidth: INSIDE_LABEL_HALO_WIDTH,
|
|
29
|
+
paintOrder: "stroke",
|
|
30
|
+
fontFamily: TICK_FONT_FAMILY,
|
|
31
|
+
fontSize: size,
|
|
32
|
+
children: formattedValue
|
|
33
|
+
}
|
|
34
|
+
);
|
|
35
|
+
}
|
|
8
36
|
function AxisLeftNumeric({
|
|
9
37
|
scale,
|
|
10
38
|
numTicks = 5,
|
|
11
39
|
tickFormat,
|
|
12
|
-
tickValues
|
|
40
|
+
tickValues,
|
|
41
|
+
inside = false,
|
|
42
|
+
tickColor = DEFAULT_TICK_COLOR
|
|
13
43
|
}) {
|
|
14
|
-
const { axisFont } =
|
|
44
|
+
const { axisFont } = useChartMetrics();
|
|
15
45
|
return /* @__PURE__ */ jsx(
|
|
16
46
|
AxisLeft,
|
|
17
47
|
{
|
|
@@ -19,8 +49,9 @@ function AxisLeftNumeric({
|
|
|
19
49
|
numTicks,
|
|
20
50
|
...tickFormat !== void 0 && { tickFormat },
|
|
21
51
|
...tickValues !== void 0 && { tickValues: [...tickValues] },
|
|
22
|
-
|
|
23
|
-
|
|
52
|
+
...inside && { tickLength: 0, hideTicks: true, tickComponent: InsideTickLabel },
|
|
53
|
+
tickLabelProps: inside ? { fill: tickColor, fontSize: axisFont } : {
|
|
54
|
+
fill: tickColor,
|
|
24
55
|
fontFamily: TICK_FONT_FAMILY,
|
|
25
56
|
fontSize: axisFont,
|
|
26
57
|
dx: -4
|
|
@@ -35,9 +66,10 @@ function AxisRightNumeric({
|
|
|
35
66
|
left,
|
|
36
67
|
numTicks = 5,
|
|
37
68
|
tickFormat,
|
|
38
|
-
tickValues
|
|
69
|
+
tickValues,
|
|
70
|
+
tickColor = DEFAULT_TICK_COLOR
|
|
39
71
|
}) {
|
|
40
|
-
const { axisFont } =
|
|
72
|
+
const { axisFont } = useChartMetrics();
|
|
41
73
|
return /* @__PURE__ */ jsx(
|
|
42
74
|
AxisRight,
|
|
43
75
|
{
|
|
@@ -47,7 +79,7 @@ function AxisRightNumeric({
|
|
|
47
79
|
...tickFormat !== void 0 && { tickFormat },
|
|
48
80
|
...tickValues !== void 0 && { tickValues: [...tickValues] },
|
|
49
81
|
tickLabelProps: {
|
|
50
|
-
fill:
|
|
82
|
+
fill: tickColor,
|
|
51
83
|
fontFamily: TICK_FONT_FAMILY,
|
|
52
84
|
fontSize: axisFont,
|
|
53
85
|
dx: 4
|
|
@@ -64,7 +96,7 @@ function AxisBottomNumeric({
|
|
|
64
96
|
tickFormat,
|
|
65
97
|
tickValues
|
|
66
98
|
}) {
|
|
67
|
-
const { axisFont } =
|
|
99
|
+
const { axisFont } = useChartMetrics();
|
|
68
100
|
return /* @__PURE__ */ jsx(
|
|
69
101
|
AxisBottom,
|
|
70
102
|
{
|
|
@@ -85,14 +117,22 @@ function AxisBottomNumeric({
|
|
|
85
117
|
);
|
|
86
118
|
}
|
|
87
119
|
const ROTATED_OFFSET = ROTATED_LABEL_OFFSET;
|
|
120
|
+
function terminalAnchor(input) {
|
|
121
|
+
const { anchorTerminals, index, count } = input;
|
|
122
|
+
if (!anchorTerminals || count < 2) return "middle";
|
|
123
|
+
if (index === 0) return "start";
|
|
124
|
+
return index === count - 1 ? "end" : "middle";
|
|
125
|
+
}
|
|
88
126
|
function AxisBottomDate({
|
|
89
127
|
scale,
|
|
90
128
|
top,
|
|
91
129
|
tickValues,
|
|
92
130
|
tickFormat = fmtAxisDate,
|
|
93
|
-
rotate
|
|
131
|
+
rotate,
|
|
132
|
+
anchorTerminals = false,
|
|
133
|
+
wrapWidth
|
|
94
134
|
}) {
|
|
95
|
-
const { axisFont } =
|
|
135
|
+
const { axisFont } = useChartMetrics();
|
|
96
136
|
const rotated = rotate === void 0 ? void 0 : ROTATED_OFFSET[rotate];
|
|
97
137
|
return /* @__PURE__ */ jsx(
|
|
98
138
|
AxisBottom,
|
|
@@ -101,14 +141,18 @@ function AxisBottomDate({
|
|
|
101
141
|
scale,
|
|
102
142
|
tickValues,
|
|
103
143
|
tickFormat,
|
|
104
|
-
tickLabelProps: {
|
|
144
|
+
tickLabelProps: (_value, index, values) => ({
|
|
105
145
|
fill: VX.faint,
|
|
106
146
|
fontFamily: TICK_FONT_FAMILY,
|
|
107
147
|
fontSize: axisFont,
|
|
108
|
-
textAnchor: rotated
|
|
148
|
+
textAnchor: rotated !== void 0 ? "end" : terminalAnchor({ anchorTerminals, index, count: values.length }),
|
|
109
149
|
...rotate !== void 0 && { angle: -rotate },
|
|
110
|
-
...rotated !== void 0 && { dx: rotated.dx, dy: rotated.dy }
|
|
111
|
-
|
|
150
|
+
...rotated !== void 0 && { dx: rotated.dx, dy: rotated.dy },
|
|
151
|
+
// A wrapped label's default baseline anchors its LAST line, which stacks the earlier ones
|
|
152
|
+
// UPWARD into the axis line and ticks (R2C-7) — `autoMargin`'s `bottomLines` reserves room
|
|
153
|
+
// BELOW the axis, so the reservation and the paint have to agree on which line anchors.
|
|
154
|
+
...wrapWidth !== void 0 && rotated === void 0 && { width: wrapWidth, verticalAnchor: "start", dy: "-0.35em" }
|
|
155
|
+
}),
|
|
112
156
|
stroke: VX.surface.border,
|
|
113
157
|
tickStroke: VX.surface.border
|
|
114
158
|
}
|
|
@@ -118,5 +162,7 @@ export {
|
|
|
118
162
|
AxisBottomDate,
|
|
119
163
|
AxisBottomNumeric,
|
|
120
164
|
AxisLeftNumeric,
|
|
121
|
-
AxisRightNumeric
|
|
165
|
+
AxisRightNumeric,
|
|
166
|
+
TICK_FONT_FAMILY,
|
|
167
|
+
terminalAnchor
|
|
122
168
|
};
|
|
@@ -167,14 +167,15 @@ export type CartesianChartProps<T> = BasaltProps & {
|
|
|
167
167
|
* bottom gutter deepens by the rotated label's projected height, measured like every other side
|
|
168
168
|
* (`docs/CHARTS-SPEC.md` §1), so nothing clips.
|
|
169
169
|
*
|
|
170
|
-
* This is the phone answer to a
|
|
171
|
-
* the axis would otherwise have to thin away — which is
|
|
172
|
-
*
|
|
173
|
-
*
|
|
174
|
-
*
|
|
170
|
+
* This is the phone answer to a **categorical** axis whose labels are too wide to repeat
|
|
171
|
+
* horizontally: rotating keeps every tick the axis would otherwise have to thin away — which is
|
|
172
|
+
* why, LEFT UNSET, it is now the phone tier's DEFAULT for a band domain, below
|
|
173
|
+
* `CONTAINER_CLASSES.regular` (`planXLabels`). A time or number domain never auto-rotates (or
|
|
174
|
+
* wraps) — it thins instead, however narrow the plot. Nothing changes at desktop width, and
|
|
175
|
+
* nothing changes for a chart that already passes a value.
|
|
175
176
|
*
|
|
176
177
|
* **`0` is the opt-out** — "never rotate, thin the axis instead" — and is the only way to get
|
|
177
|
-
* the pre-tier behaviour back on a phone-width chart with very wide labels.
|
|
178
|
+
* the pre-tier behaviour back on a phone-width categorical chart with very wide labels.
|
|
178
179
|
*/
|
|
179
180
|
xLabelRotate?: 0 | 45 | 90;
|
|
180
181
|
/** Value-range bands on the left scale, drawn behind the marks. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../../src/charts/primitives/CartesianChart.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAE/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;
|
|
1
|
+
{"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../../src/charts/primitives/CartesianChart.tsx"],"names":[],"mappings":"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"}
|