@cfasim-ui/charts 0.4.10 → 0.4.12

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.
@@ -1,5 +1,5 @@
1
1
  import { NumberFormat } from '@cfasim-ui/shared';
2
- import { ChartData, ChartCommonProps, ChartHoverPayload, ChartTooltipBaseProps } from '../_shared/index.js';
2
+ import { ChartData, DateFormat, ChartCommonProps, ChartHoverPayload, ChartTooltipBaseProps } from '../_shared/index.js';
3
3
  export type BarChartData = ChartData;
4
4
  export interface BarSeries {
5
5
  /** Bar values; one entry per category. `y` is accepted as an alias. */
@@ -9,6 +9,16 @@ export interface BarSeries {
9
9
  opacity?: number;
10
10
  /** Label shown in the inline legend. */
11
11
  legend?: string;
12
+ /**
13
+ * Whether this series appears in the inline legend. Defaults to true.
14
+ * Has no effect when `legend` is unset (no legend entry to begin with).
15
+ */
16
+ showInLegend?: boolean;
17
+ /**
18
+ * Whether this series contributes a value to the tooltip. Defaults to
19
+ * true. The bars are still drawn.
20
+ */
21
+ showInTooltip?: boolean;
12
22
  }
13
23
  interface BarChartProps extends ChartCommonProps {
14
24
  /** Single-series values. Equivalent to `y`. */
@@ -20,8 +30,11 @@ interface BarChartProps extends ChartCommonProps {
20
30
  /**
21
31
  * Category labels for the categorical axis. Length should match the
22
32
  * longest series. When omitted, indices (0, 1, 2, ...) are used.
33
+ * Accepts date strings or `Date` objects: when every category parses
34
+ * as a date, label formatting switches to date mode (bar positions
35
+ * stay ordinal — they are not time-proportional).
23
36
  */
24
- categories?: readonly string[];
37
+ categories?: readonly (string | Date)[];
25
38
  /** "vertical" (default, aka column) draws upright bars; "horizontal" draws sideways. */
26
39
  orientation?: "vertical" | "horizontal";
27
40
  /** "grouped" (default) places series side-by-side; "stacked" stacks them. */
@@ -50,6 +63,16 @@ interface BarChartProps extends ChartCommonProps {
50
63
  valueTickFormat?: NumberFormat;
51
64
  /** Formatter for category-axis labels. Receives the resolved category string. */
52
65
  categoryFormat?: (label: string, index: number) => string;
66
+ /**
67
+ * Date-tick formatter for date-mode category labels (auto-detected
68
+ * when every entry of `categories` parses as a date). Ignored unless
69
+ * the axis is in date mode. Accepts a `DateFormat` — preset name,
70
+ * `Intl.DateTimeFormatOptions`, or `(ms, unit?) => string`. When
71
+ * omitted, the formatter is picked from the chosen tick unit (e.g.
72
+ * monthly ticks → `"month-year"`). Has no effect when
73
+ * `categoryFormat` is also set.
74
+ */
75
+ dateFormat?: DateFormat;
53
76
  /**
54
77
  * Fraction of each category slot reserved as gap between groups (0..1).
55
78
  * Default 0.2 — i.e. bars/groups fill 80% of their slot.
@@ -1,6 +1,8 @@
1
1
  export interface ChartMenuItem {
2
2
  label: string;
3
3
  action: () => void;
4
+ /** Sets aria-pressed on the menu item — use for toggle-style items. */
5
+ ariaPressed?: boolean;
4
6
  }
5
7
  type __VLS_Props = {
6
8
  items: ChartMenuItem[];
@@ -1,5 +1,6 @@
1
1
  import { Topology } from 'topojson-specification';
2
2
  import { NumberFormat } from '@cfasim-ui/shared';
3
+ import { TitleStyle, LabelStyle } from '../_shared/index.js';
3
4
  export type GeoType = "states" | "counties" | "hsas";
4
5
  export interface StateData {
5
6
  /** FIPS code (e.g. "06" for California, "04015" for a county) or name */
@@ -68,7 +69,15 @@ type __VLS_Props = {
68
69
  width?: number;
69
70
  height?: number;
70
71
  colorScale?: ChoroplethColorScale | ThresholdStop[] | CategoricalStop[];
72
+ /**
73
+ * Map title. `\n` in the string creates additional lines, each
74
+ * adding `titleStyle.lineHeight` (default 18px) of vertical space.
75
+ */
71
76
  title?: string;
77
+ /** Styling for the map title. See `TitleStyle`. */
78
+ titleStyle?: TitleStyle;
79
+ /** Styling for the legend (title, swatch labels, and continuous-scale ticks). */
80
+ legendStyle?: LabelStyle;
72
81
  noDataColor?: string;
73
82
  strokeColor?: string;
74
83
  strokeWidth?: number;
@@ -1,5 +1,5 @@
1
1
  import { NumberFormat } from '@cfasim-ui/shared';
2
- import { ChartData, ChartCommonProps, ChartHoverPayload, ChartTooltipBaseProps } from '../_shared/index.js';
2
+ import { ChartData, LabelStyle, DateFormat, DateTimezone, ChartCommonProps, ChartHoverPayload, ChartTooltipBaseProps } from '../_shared/index.js';
3
3
  /**
4
4
  * Numeric input accepted by the chart. `number[]` and any standard numeric
5
5
  * typed array are supported, so the output of
@@ -7,6 +7,12 @@ import { ChartData, ChartCommonProps, ChartHoverPayload, ChartTooltipBaseProps }
7
7
  * without copying into a plain array.
8
8
  */
9
9
  export type LineChartData = ChartData;
10
+ /**
11
+ * Accepted shapes for an `x` array. Numeric arrays (typed or plain) plot
12
+ * as numbers; string-or-`Date` arrays trigger date-axis mode when every
13
+ * element parses. See the `timezone` prop and `dateAxis` module.
14
+ */
15
+ export type LineChartXInput = LineChartData | readonly (string | Date)[];
10
16
  export interface Series {
11
17
  /**
12
18
  * Y-values. One of `y` or `data` must be supplied; `y` wins if both
@@ -18,9 +24,10 @@ export interface Series {
18
24
  /**
19
25
  * Optional x-values, parallel to `y`/`data`. When set, the chart
20
26
  * plots points at the given x positions (irregular spacing supported).
21
- * When omitted, points are plotted at indices 0, 1, 2, ...
27
+ * When omitted, points are plotted at indices 0, 1, 2, ... Accepts
28
+ * date strings or `Date` objects to enable date-axis mode.
22
29
  */
23
- x?: LineChartData;
30
+ x?: LineChartXInput;
24
31
  color?: string;
25
32
  dashed?: boolean;
26
33
  strokeWidth?: number;
@@ -28,18 +35,34 @@ export interface Series {
28
35
  lineOpacity?: number;
29
36
  dotOpacity?: number;
30
37
  line?: boolean;
38
+ /**
39
+ * Draw a page-colored stroke behind the line so it stays visually
40
+ * separated from overlapping series and busy backgrounds. Has no
41
+ * effect when `line` is `false`.
42
+ */
43
+ outline?: boolean;
31
44
  dots?: boolean;
32
45
  dotRadius?: number;
33
46
  dotFill?: string;
34
47
  dotStroke?: string;
35
48
  /** Label shown in the inline legend */
36
49
  legend?: string;
50
+ /**
51
+ * Whether this series appears in the inline legend. Defaults to true.
52
+ * Has no effect when `legend` is unset (no legend entry to begin with).
53
+ */
54
+ showInLegend?: boolean;
55
+ /**
56
+ * Whether this series contributes a value to the tooltip and shows a
57
+ * hover dot. Defaults to true. The series line/dots are still drawn.
58
+ */
59
+ showInTooltip?: boolean;
37
60
  }
38
61
  export interface Area {
39
62
  upper: LineChartData;
40
63
  lower: LineChartData;
41
64
  /** Optional x-values parallel to `upper`/`lower`. See `Series.x`. */
42
- x?: LineChartData;
65
+ x?: LineChartXInput;
43
66
  color?: string;
44
67
  opacity?: number;
45
68
  }
@@ -64,6 +87,17 @@ export interface AreaSection {
64
87
  dashed?: boolean;
65
88
  /** Label placement: "below" (default) renders below chart, "inline" renders in legend row, false hides label */
66
89
  legend?: "inline" | "below" | false;
90
+ /**
91
+ * Style for the area section's primary label text. Defaults: font-size
92
+ * 11, font-weight 600, color taken from the section's `color`.
93
+ */
94
+ inlineLabelStyle?: LabelStyle;
95
+ /**
96
+ * Style for the area section's secondary description text. Defaults:
97
+ * font-size 11, currentColor at 0.6 opacity. Providing `color` drops
98
+ * the default opacity.
99
+ */
100
+ inlineDescriptionStyle?: LabelStyle;
67
101
  }
68
102
  interface LineChartProps extends ChartCommonProps {
69
103
  /** Y-values. Equivalent to `data`. If both are set, `y` wins. */
@@ -74,8 +108,9 @@ interface LineChartProps extends ChartCommonProps {
74
108
  * Optional x-values paired with `y`/`data`. When provided, points
75
109
  * are plotted at the given x positions instead of at their indices.
76
110
  * Ignored when `series` is used — set `x` on each `Series` instead.
111
+ * Accepts date strings or `Date` objects to enable date-axis mode.
77
112
  */
78
- x?: LineChartData;
113
+ x?: LineChartXInput;
79
114
  series?: Series[];
80
115
  areas?: Area[];
81
116
  areaSections?: AreaSection[];
@@ -108,12 +143,21 @@ interface LineChartProps extends ChartCommonProps {
108
143
  */
109
144
  yTicks?: number | number[];
110
145
  /**
111
- * Formatter for x-axis tick labels. Accepts a preset name, a printf-style
112
- * format string, or a function. The two-arg function form `(value, index)`
113
- * is also supported for index-based labels. See `formatNumber` in
114
- * `@cfasim-ui/shared`.
146
+ * Formatter for x-axis tick labels. On a numeric axis, accepts a
147
+ * preset name, a printf-style format string, or a function (the
148
+ * two-arg `(value, index)` form is also supported for index-based
149
+ * labels — see `formatNumber` in `@cfasim-ui/shared`). On a date
150
+ * axis (auto-detected when every x value parses as a date), accepts
151
+ * a `DateFormat` instead — see the `dateAxis` module.
152
+ */
153
+ xTickFormat?: NumberFormat | ((value: number, index: number) => string) | DateFormat;
154
+ /**
155
+ * Timezone used when parsing offset-less ISO strings and rendering
156
+ * date-axis tick labels. `"utc"` (default) keeps visuals consistent
157
+ * across viewers; `"local"` uses the browser timezone. Ignored on a
158
+ * numeric axis.
115
159
  */
116
- xTickFormat?: NumberFormat | ((value: number, index: number) => string);
160
+ timezone?: DateTimezone;
117
161
  /**
118
162
  * Formatter for y-axis tick labels. Accepts a preset name, a printf-style
119
163
  * format string, or a function. See `formatNumber` in `@cfasim-ui/shared`.
@@ -39,18 +39,23 @@ export interface ChartAnnotation {
39
39
  */
40
40
  fontWeight?: string | number;
41
41
  /**
42
- * Halo (stroke) color drawn behind the text so the label stays legible
43
- * against busy chart elements. Defaults to `var(--color-bg-0, #fff)` so
44
- * it matches the page background out of the box.
42
+ * Color of the legibility outline drawn behind the text, pointer/rule
43
+ * line, and arrow tip. Defaults to `var(--color-bg-0, #fff)` so it
44
+ * matches the page background out of the box.
45
45
  */
46
- haloColor?: string;
47
- /** Halo stroke width in pixels. Default: 3. */
48
- haloWidth?: number;
46
+ outlineColor?: string;
49
47
  /**
50
- * SVG text-anchor for the label. When omitted, derived from the sign of
51
- * `offset.x`: positive `start`, negative `end`, zero → `middle`.
48
+ * Outline stroke width in pixels. Applied to the text (via paint-order
49
+ * stroke), and added to `lineWidth` for the pointer/rule line and
50
+ * arrow tip outline pass. Set to `0` to disable the outline. Default: 3.
52
51
  */
53
- textAnchor?: "start" | "middle" | "end";
52
+ outlineWidth?: number;
53
+ /**
54
+ * Horizontal alignment of the label relative to its anchor position.
55
+ * When omitted, derived from the sign of `offset.x`: positive →
56
+ * `"left"`, negative → `"right"`, zero → `"center"`.
57
+ */
58
+ align?: "left" | "center" | "right";
54
59
  /** Pointer- or rule-line color override. Defaults to `color`. */
55
60
  lineColor?: string;
56
61
  /** Pointer- or rule-line width in pixels. Default: 1. */
@@ -1,6 +1,31 @@
1
1
  import { NumberFormat } from '@cfasim-ui/shared';
2
2
  import { ChartAnnotation } from './annotations.js';
3
3
  import { ChartPadding } from './useChartPadding.js';
4
+ /**
5
+ * Visual styling for the chart title. All fields optional; unspecified
6
+ * fields fall back to the chart's defaults (font-size 14, line-height 18,
7
+ * font-weight 600, currentColor, align "left"). `lineHeight` is in pixels
8
+ * and controls spacing between lines when the title contains `\n`.
9
+ */
10
+ export interface TitleStyle {
11
+ fontSize?: number;
12
+ lineHeight?: number;
13
+ color?: string;
14
+ fontWeight?: number | string;
15
+ /** Horizontal alignment of the title. Default: `"left"`. */
16
+ align?: "left" | "center" | "right";
17
+ }
18
+ /**
19
+ * Visual styling for axis labels, tick labels, and legend text. Each
20
+ * field is optional; unspecified fields fall back to that element's
21
+ * default. When `color` is set, the default fill-opacity (used by tick
22
+ * labels) is dropped so the exact color is rendered.
23
+ */
24
+ export interface LabelStyle {
25
+ fontSize?: number;
26
+ color?: string;
27
+ fontWeight?: number | string;
28
+ }
4
29
  /**
5
30
  * Props common to every cartesian chart component. Anything specific to
6
31
  * the chart type (series shape, layout, value-axis details) lives on the
@@ -9,7 +34,19 @@ import { ChartPadding } from './useChartPadding.js';
9
34
  export interface ChartCommonProps {
10
35
  width?: number;
11
36
  height?: number;
37
+ /**
38
+ * Chart title. `\n` in the string creates additional lines, each
39
+ * adding `titleStyle.lineHeight` (default 18px) of vertical space.
40
+ */
12
41
  title?: string;
42
+ /** Styling for the chart title. See `TitleStyle`. */
43
+ titleStyle?: TitleStyle;
44
+ /** Styling for axis labels (the `xLabel` / `yLabel` text). */
45
+ axisLabelStyle?: LabelStyle;
46
+ /** Styling for axis tick labels (the numbers/categories on each axis). */
47
+ tickLabelStyle?: LabelStyle;
48
+ /** Styling for the inline legend item labels. */
49
+ legendStyle?: LabelStyle;
13
50
  xLabel?: string;
14
51
  yLabel?: string;
15
52
  debounce?: number;
@@ -0,0 +1,65 @@
1
+ /**
2
+ * Date axis support: parsing, auto-detection, tick selection, and
3
+ * formatting for chart x-axes that carry temporal data. All functions
4
+ * are pure (no Vue reactivity, no DOM); chart components call into this
5
+ * module from their computed setup.
6
+ *
7
+ * Design notes:
8
+ * - Parsing is regex-based, not `Date.parse`. The ES spec parses bare
9
+ * `YYYY-MM-DD` as UTC but offset-less `YYYY-MM-DDTHH:mm:ss` as local,
10
+ * which makes a `timezone` prop incoherent. Manual parsing keeps the
11
+ * timezone interpretation consistent.
12
+ * - `isDateLike` deliberately rejects plain numbers so existing numeric
13
+ * demos (generation indices, day counters) aren't misclassified.
14
+ * - Tick stepping for month/year (and day/week in local mode) goes
15
+ * through `Date` field math so DST and month-length irregularities
16
+ * don't drift the tick boundaries.
17
+ */
18
+ export type DateTickUnit = "year" | "month" | "week" | "day" | "hour" | "minute" | "second";
19
+ export type DateTimezone = "utc" | "local";
20
+ export type DateFormatPreset = "iso" | "iso-datetime" | "year" | "month-year" | "month-day" | "day" | "time" | "datetime" | "medium";
21
+ /**
22
+ * How to render a tick label on a date axis. Accepts:
23
+ * - A preset name (`"iso"`, `"month-year"`, ...).
24
+ * - An `Intl.DateTimeFormatOptions` literal for full control.
25
+ * - A function receiving the tick's epoch-ms and the tick unit the
26
+ * chart picked. Useful for unit-aware custom formatting.
27
+ */
28
+ export type DateFormat = DateFormatPreset | Intl.DateTimeFormatOptions | ((ms: number, unit?: DateTickUnit) => string);
29
+ /**
30
+ * Parse `v` into an epoch-ms timestamp under the given timezone.
31
+ * Accepts `Date` instances and ISO-shaped strings; returns `null` for
32
+ * anything else (including plain `number`s — see `isDateLike`).
33
+ */
34
+ export declare function parseDate(v: unknown, tz: DateTimezone): number | null;
35
+ /**
36
+ * Whether `v` looks like a date value to the auto-detector. Strict:
37
+ * `Date` instances or ISO-shaped strings only. Plain numbers are *not*
38
+ * considered date-like so numeric demos can't be silently promoted to
39
+ * a date axis.
40
+ */
41
+ export declare function isDateLike(v: unknown): boolean;
42
+ /**
43
+ * Whether every entry of `values` is date-like and parses cleanly. An
44
+ * empty array is *not* considered all-dates (auto-detection should
45
+ * stay opt-in by content).
46
+ */
47
+ export declare function isAllDates(values: ArrayLike<unknown>, tz: DateTimezone): boolean;
48
+ /**
49
+ * Choose tick values for a date axis spanning `[minMs, maxMs]`. The
50
+ * returned `unit` lets the default formatter pick a unit-appropriate
51
+ * preset (year ticks → "year", month → "month-year", day → "month-day",
52
+ * etc.) — same trick Vega-Lite uses.
53
+ */
54
+ export declare function pickDateTicks(minMs: number, maxMs: number, targetCount: number, tz: DateTimezone): {
55
+ values: number[];
56
+ unit: DateTickUnit;
57
+ };
58
+ /** All valid preset names. Exported for the disjointness invariant test. */
59
+ export declare const DATE_FORMAT_PRESETS: readonly DateFormatPreset[];
60
+ /**
61
+ * Format an epoch-ms timestamp into a tick label. When `format` is
62
+ * undefined, picks a preset based on the tick `unit` (Vega-Lite style:
63
+ * year ticks read as "2024", month ticks as "Jan 2024", etc.).
64
+ */
65
+ export declare function formatDate(ms: number, format: DateFormat | undefined, tz: DateTimezone, unit?: DateTickUnit): string;
@@ -0,0 +1 @@
1
+ export {};
@@ -2,11 +2,13 @@ export { snap, niceStep, intervalValues, formatTick, type ChartData, } from './a
2
2
  export { computeTickValues, type TickValueOptions } from './computeTicks.js';
3
3
  export { scaleFraction, clampExtentForScale, computeLogTickValues, LOG_FLOOR, type ScaleType, } from './scale.js';
4
4
  export { useChartSize, type ChartSizeOptions } from './useChartSize.js';
5
- export { useChartPadding, INLINE_LEGEND_HEIGHT, type ChartPaddingOptions, type ChartPadding, type ChartBounds, } from './useChartPadding.js';
5
+ export { useChartPadding, resolveLabelStyle, INLINE_LEGEND_ROW_HEIGHT, TITLE_LINE_HEIGHT, TITLE_FONT_SIZE, TITLE_FONT_WEIGHT, AXIS_LABEL_FONT_SIZE, TICK_LABEL_FONT_SIZE, TICK_LABEL_OPACITY, LEGEND_FONT_SIZE, type ChartPaddingOptions, type ChartPadding, type ChartBounds, type PositionedLegendItem, } from './useChartPadding.js';
6
6
  export { useChartTooltip, type ChartTooltipOptions, } from './useChartTooltip.js';
7
7
  export { useChartMenu, type ChartMenuOptions } from './useChartMenu.js';
8
+ export { useChartFullscreen } from './useChartFullscreen.js';
8
9
  export { seriesToCsv, categoricalToCsv, type CsvSeries } from './seriesCsv.js';
9
10
  export { default as ChartAnnotations } from './ChartAnnotations';
10
11
  export type { ChartAnnotation } from './annotations.js';
11
12
  export { useChartFoundation, makeTooltipValueFormatter, type ChartFoundationOptions, } from './useChartFoundation.js';
12
- export type { ChartCommonProps, ChartHoverPayload, ChartTooltipValue, ChartTooltipBaseProps, } from './chartProps.js';
13
+ export type { ChartCommonProps, ChartHoverPayload, ChartTooltipValue, ChartTooltipBaseProps, TitleStyle, LabelStyle, } from './chartProps.js';
14
+ export { parseDate, isDateLike, isAllDates, pickDateTicks, formatDate, DATE_FORMAT_PRESETS, type DateFormat, type DateFormatPreset, type DateTickUnit, type DateTimezone, } from './dateAxis.js';
@@ -1,10 +1,12 @@
1
1
  import { NumberFormat } from '@cfasim-ui/shared';
2
2
  import { ChartPadding } from './useChartPadding.js';
3
3
  import { TooltipClamp } from '../tooltip-position.js';
4
+ import { TitleStyle } from './chartProps.js';
4
5
  export interface ChartFoundationOptions {
5
6
  width: () => number | undefined;
6
7
  height: () => number | undefined;
7
8
  title: () => string | undefined;
9
+ titleStyle: () => TitleStyle | undefined;
8
10
  xLabel: () => string | undefined;
9
11
  yLabel: () => string | undefined;
10
12
  debounce: () => number | undefined;
@@ -14,13 +16,24 @@ export interface ChartFoundationOptions {
14
16
  filename: () => string | undefined;
15
17
  downloadLink: () => boolean | string | undefined;
16
18
  chartPadding: () => ChartPadding | undefined;
17
- hasInlineLegend: () => boolean;
19
+ /**
20
+ * Labels for the inline legend in render order. Empty array = no
21
+ * legend strip. Drives wrapping into multiple rows and the resulting
22
+ * top-padding reservation.
23
+ */
24
+ inlineLegendLabels: () => readonly string[];
18
25
  hasTooltipSlot: () => boolean;
19
26
  getCsv: () => string;
20
27
  pointerToIndex: (clientX: number, clientY: number) => number | null;
21
28
  onHover: (payload: {
22
29
  index: number;
23
30
  } | null) => void;
31
+ /**
32
+ * Extra height (in px) the chart adds *below* the SVG plot area
33
+ * (e.g. LineChart's area-section labels). Used to keep the SVG total
34
+ * height matched to the container when fullscreen.
35
+ */
36
+ extraBelowHeight?: () => number;
24
37
  }
25
38
  /**
26
39
  * Wires up the shared chart plumbing — size measurement, padding, tooltip
@@ -35,11 +48,15 @@ export declare function useChartFoundation(opts: ChartFoundationOptions): {
35
48
  height: import('vue').ComputedRef<number>;
36
49
  padding: import('vue').ComputedRef<{
37
50
  top: number;
38
- right: number;
39
51
  bottom: number;
40
52
  left: number;
53
+ right: number;
41
54
  }>;
42
55
  legendY: import('vue').ComputedRef<number>;
56
+ inlineLegendLayout: import('vue').ComputedRef<{
57
+ positions: import('./useChartPadding.js').PositionedLegendItem[];
58
+ rowCount: number;
59
+ }>;
43
60
  innerW: import('vue').ComputedRef<number>;
44
61
  innerH: import('vue').ComputedRef<number>;
45
62
  bounds: import('vue').ComputedRef<{
@@ -74,6 +91,8 @@ export declare function useChartFoundation(opts: ChartFoundationOptions): {
74
91
  downloadLinkText: import('vue').ComputedRef<string | null>;
75
92
  csvHref: import('vue').ComputedRef<string | null>;
76
93
  menuFilename: () => string;
94
+ isFullscreen: import('vue').Ref<boolean, boolean>;
95
+ measuredHeight: import('vue').Ref<number, number>;
77
96
  };
78
97
  /**
79
98
  * Build a tooltip value formatter that prefers `tooltipValueFormat`,
@@ -0,0 +1,16 @@
1
+ import { ChartMenuItem } from '../ChartMenu/ChartMenu';
2
+ /**
3
+ * Tracks whether the chart is in "expanded" mode (fills the window via
4
+ * CSS). The browser Fullscreen API isn't used — the consumer wires a
5
+ * `.is-fullscreen` class to its wrapper and the CSS handles positioning,
6
+ * which avoids Fullscreen API restrictions (user-gesture requirement,
7
+ * permission policy, iframe sandboxing) and keeps the chart inside the
8
+ * document so the rest of the page remains keyboard-navigable.
9
+ */
10
+ export declare function useChartFullscreen(): {
11
+ isFullscreen: import('vue').Ref<boolean, boolean>;
12
+ toggle: () => void;
13
+ enter: () => void;
14
+ exit: () => void;
15
+ menuItem: import('vue').ComputedRef<ChartMenuItem>;
16
+ };
@@ -8,10 +8,17 @@ export interface ChartMenuOptions {
8
8
  getCsv: () => string;
9
9
  /** Whether a separate download link is rendered (and the CSV menu item should be hidden). */
10
10
  downloadLink: () => boolean | string | undefined;
11
+ /**
12
+ * When true, prepends an Expand/Collapse menu item that toggles the
13
+ * chart into a full-window view. The consumer is responsible for
14
+ * binding the returned `isFullscreen` ref to a CSS class on its
15
+ * wrapper.
16
+ */
17
+ fullscreen?: boolean;
11
18
  }
12
19
  /**
13
- * Computes the standard chart menu items (SVG / PNG / CSV) plus the
14
- * CSV-download-link state shared by every chart.
20
+ * Computes the standard chart menu items (Expand / SVG / PNG / CSV) plus
21
+ * the CSV-download-link state shared by every chart.
15
22
  */
16
23
  export declare function useChartMenu(opts: ChartMenuOptions): {
17
24
  svgRef: Ref<SVGSVGElement | null>;
@@ -19,4 +26,5 @@ export declare function useChartMenu(opts: ChartMenuOptions): {
19
26
  downloadLinkText: import('vue').ComputedRef<string | null>;
20
27
  csvHref: import('vue').ComputedRef<string | null>;
21
28
  resolvedFilename: () => string;
29
+ isFullscreen: Ref<boolean, boolean>;
22
30
  };
@@ -1,5 +1,34 @@
1
- /** Vertical space reserved at the top of the chart for inline legend swatches. */
2
- export declare const INLINE_LEGEND_HEIGHT = 20;
1
+ import { LabelStyle, TitleStyle } from './chartProps.js';
2
+ /** Vertical space reserved per row of the inline legend strip. */
3
+ export declare const INLINE_LEGEND_ROW_HEIGHT = 20;
4
+ /** Default line height (px) for the chart title; overridable per chart. */
5
+ export declare const TITLE_LINE_HEIGHT = 18;
6
+ /** Default font size (px) for the chart title; overridable per chart. */
7
+ export declare const TITLE_FONT_SIZE = 14;
8
+ /** Default font weight for the chart title; overridable per chart. */
9
+ export declare const TITLE_FONT_WEIGHT: number | string;
10
+ /** Default font size (px) for axis labels (`xLabel` / `yLabel`). */
11
+ export declare const AXIS_LABEL_FONT_SIZE = 13;
12
+ /** Default font size (px) for axis tick labels (the numbers on each axis). */
13
+ export declare const TICK_LABEL_FONT_SIZE = 10;
14
+ /** Default fill-opacity for tick labels when no custom color is set. */
15
+ export declare const TICK_LABEL_OPACITY = 0.6;
16
+ /** Default font size (px) for inline legend item labels. */
17
+ export declare const LEGEND_FONT_SIZE = 11;
18
+ /**
19
+ * Resolve a `LabelStyle` against per-element defaults. Returns the
20
+ * fields the chart's `<text>` element needs. When `style.color` is set,
21
+ * the default fill-opacity is dropped so the exact color renders.
22
+ */
23
+ export declare function resolveLabelStyle(style: LabelStyle | undefined, defaults: {
24
+ fontSize: number;
25
+ fillOpacity?: number;
26
+ }): {
27
+ fontSize: number;
28
+ fill: string;
29
+ fontWeight: number | string | undefined;
30
+ fillOpacity: number | undefined;
31
+ };
3
32
  /**
4
33
  * Extra space added around the chart's standard layout. A number applies
5
34
  * the same amount to all four sides; an object lets you pad sides
@@ -14,14 +43,27 @@ export type ChartPadding = number | {
14
43
  };
15
44
  export interface ChartPaddingOptions {
16
45
  title: () => string | undefined;
46
+ titleStyle?: () => TitleStyle | undefined;
17
47
  xLabel: () => string | undefined;
18
48
  yLabel: () => string | undefined;
19
- hasInlineLegend: () => boolean;
49
+ /**
50
+ * Labels for the inline legend items, in render order. Empty array
51
+ * (or omitted) means no legend strip. Drives both row-count for
52
+ * reserving top padding and per-item wrap positions.
53
+ */
54
+ inlineLegendLabels: () => readonly string[];
20
55
  width: () => number;
21
56
  height: () => number;
22
57
  /** Extra pixels added on top of the standard axis spacing. */
23
58
  extraPadding?: () => ChartPadding | undefined;
24
59
  }
60
+ /** Position of a single legend item within the legend strip. */
61
+ export interface PositionedLegendItem {
62
+ /** X offset relative to `padding.left`. */
63
+ x: number;
64
+ /** Row index, 0-based. */
65
+ row: number;
66
+ }
25
67
  /**
26
68
  * Computes the standard chart padding (top/right/bottom/left) and the
27
69
  * derived inner plotting region (innerW, innerH). Shared by LineChart
@@ -29,15 +71,23 @@ export interface ChartPaddingOptions {
29
71
  * consistent. `extraPadding` adds extra space outside the plot — useful
30
72
  * for annotations that need to extend past the data area without
31
73
  * clipping.
74
+ *
75
+ * The inline legend wraps to multiple rows when items don't fit in the
76
+ * available width; `padding.top` grows by `INLINE_LEGEND_ROW_HEIGHT` per
77
+ * row so the plot stays clear of the legend strip.
32
78
  */
33
79
  export declare function useChartPadding(opts: ChartPaddingOptions): {
34
80
  padding: import('vue').ComputedRef<{
35
81
  top: number;
36
- right: number;
37
82
  bottom: number;
38
83
  left: number;
84
+ right: number;
39
85
  }>;
40
86
  legendY: import('vue').ComputedRef<number>;
87
+ inlineLegendLayout: import('vue').ComputedRef<{
88
+ positions: PositionedLegendItem[];
89
+ rowCount: number;
90
+ }>;
41
91
  innerW: import('vue').ComputedRef<number>;
42
92
  innerH: import('vue').ComputedRef<number>;
43
93
  bounds: import('vue').ComputedRef<{
@@ -13,4 +13,5 @@ export interface ChartSizeOptions {
13
13
  export declare function useChartSize(opts?: ChartSizeOptions): {
14
14
  containerRef: Ref<HTMLElement | null>;
15
15
  measuredWidth: Ref<number>;
16
+ measuredHeight: Ref<number>;
16
17
  };
@@ -0,0 +1 @@
1
+ export { fipsToHsa, hsaNames } from './ChoroplethMap/hsaMapping.js';
@@ -0,0 +1,2 @@
1
+ import { r as e, t } from "./hsaMapping-Devrp7Rk.js";
2
+ export { t as fipsToHsa, e as hsaNames };