@cfasim-ui/charts 0.4.7 → 0.4.9
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/dist/BarChart/BarChart.d.ts +17 -2
- package/dist/ChoroplethMap/ChoroplethMap.d.ts +6 -4
- package/dist/DataTable/DataTable.d.ts +12 -1
- package/dist/LineChart/LineChart.d.ts +21 -4
- package/dist/_shared/chartProps.d.ts +6 -4
- package/dist/_shared/index.d.ts +1 -0
- package/dist/_shared/scale.d.ts +39 -0
- package/dist/_shared/scale.test.d.ts +1 -0
- package/dist/_shared/useChartFoundation.d.ts +2 -1
- package/dist/index.css +1 -1
- package/dist/index.js +624 -568
- package/package.json +2 -2
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { NumberFormat } from '@cfasim-ui/shared';
|
|
1
2
|
import { ChartData, ChartCommonProps, ChartHoverPayload, ChartTooltipBaseProps } from '../_shared/index.js';
|
|
2
3
|
export type BarChartData = ChartData;
|
|
3
4
|
export interface BarSeries {
|
|
@@ -27,13 +28,26 @@ interface BarChartProps extends ChartCommonProps {
|
|
|
27
28
|
layout?: "grouped" | "stacked";
|
|
28
29
|
/** Force the value axis to start at this value or lower (default 0). */
|
|
29
30
|
valueMin?: number;
|
|
31
|
+
/**
|
|
32
|
+
* Scale type for the value axis. `"linear"` (default) maps values
|
|
33
|
+
* directly to pixels; `"log"` uses a base-10 log mapping. On a log
|
|
34
|
+
* axis, non-positive values collapse to the visible minimum, and
|
|
35
|
+
* `valueMin <= 0` is ignored. Stacked layout + log produces a
|
|
36
|
+
* cumulative axis but individual segment sizes are no longer
|
|
37
|
+
* proportional to their values.
|
|
38
|
+
*/
|
|
39
|
+
valueScaleType?: "linear" | "log";
|
|
30
40
|
/**
|
|
31
41
|
* Tick placement on the value axis (numeric). Number = interval,
|
|
32
42
|
* array = explicit values. When omitted, ticks are chosen automatically.
|
|
33
43
|
*/
|
|
34
44
|
valueTicks?: number | number[];
|
|
35
|
-
/**
|
|
36
|
-
|
|
45
|
+
/**
|
|
46
|
+
* Formatter for value-axis tick labels. Accepts a preset name, a
|
|
47
|
+
* printf-style format string, or a function. See `formatNumber` in
|
|
48
|
+
* `@cfasim-ui/shared`.
|
|
49
|
+
*/
|
|
50
|
+
valueTickFormat?: NumberFormat;
|
|
37
51
|
/** Formatter for category-axis labels. Receives the resolved category string. */
|
|
38
52
|
categoryFormat?: (label: string, index: number) => string;
|
|
39
53
|
/**
|
|
@@ -77,6 +91,7 @@ declare const __VLS_component: import('vue').DefineComponent<BarChartProps, {},
|
|
|
77
91
|
orientation: "vertical" | "horizontal";
|
|
78
92
|
layout: "grouped" | "stacked";
|
|
79
93
|
valueMin: number;
|
|
94
|
+
valueScaleType: "linear" | "log";
|
|
80
95
|
barPadding: number;
|
|
81
96
|
groupGap: number;
|
|
82
97
|
valueGrid: boolean;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Topology } from 'topojson-specification';
|
|
2
|
+
import { NumberFormat } from '@cfasim-ui/shared';
|
|
2
3
|
export type GeoType = "states" | "counties" | "hsas";
|
|
3
4
|
export interface StateData {
|
|
4
5
|
/** FIPS code (e.g. "06" for California, "04015" for a county) or name */
|
|
@@ -94,11 +95,12 @@ type __VLS_Props = {
|
|
|
94
95
|
value?: number | string;
|
|
95
96
|
}) => string;
|
|
96
97
|
/**
|
|
97
|
-
* Formatter for numeric values shown in the default tooltip.
|
|
98
|
-
*
|
|
99
|
-
* controls the entire tooltip in
|
|
98
|
+
* Formatter for numeric values shown in the default tooltip. Accepts a
|
|
99
|
+
* preset name, a printf-style format string, or a function. Ignored when
|
|
100
|
+
* `tooltipFormat` is provided (the caller controls the entire tooltip in
|
|
101
|
+
* that case). See `formatNumber` in `@cfasim-ui/shared`.
|
|
100
102
|
*/
|
|
101
|
-
tooltipValueFormat?:
|
|
103
|
+
tooltipValueFormat?: NumberFormat;
|
|
102
104
|
/**
|
|
103
105
|
* Boundary for tooltip flip/clamp. `"none"` always places to the right of
|
|
104
106
|
* the pointer with no clamping. `"chart"` (default) uses the map
|
|
@@ -1,13 +1,24 @@
|
|
|
1
|
-
import { ModelOutput } from '@cfasim-ui/shared';
|
|
1
|
+
import { ModelOutput, NumberFormat } from '@cfasim-ui/shared';
|
|
2
2
|
export type TableRecord = Record<string, ArrayLike<number | string | boolean>>;
|
|
3
3
|
export type TableData = TableRecord | ModelOutput;
|
|
4
4
|
export type ColumnWidth = "small" | "medium" | "large";
|
|
5
5
|
export type ColumnAlign = "left" | "center" | "right";
|
|
6
|
+
export type CellValue = number | string | boolean;
|
|
7
|
+
export type ColumnFormatter = (value: CellValue, row: number) => string;
|
|
6
8
|
export interface ColumnConfig {
|
|
7
9
|
label?: string;
|
|
8
10
|
width?: ColumnWidth | number;
|
|
9
11
|
align?: ColumnAlign;
|
|
10
12
|
cellClass?: string;
|
|
13
|
+
/**
|
|
14
|
+
* Custom formatter for cell values in this column. Accepts a
|
|
15
|
+
* {@link NumberFormat} (preset name, printf-style string, or
|
|
16
|
+
* `(value) => string` function — see `formatNumber` in
|
|
17
|
+
* `@cfasim-ui/shared`) or a `(value, row) => string` function for full
|
|
18
|
+
* control. Number presets/sprintf only apply to numeric cells; other
|
|
19
|
+
* types fall back to default rendering. Used in CSV exports.
|
|
20
|
+
*/
|
|
21
|
+
format?: NumberFormat | ColumnFormatter;
|
|
11
22
|
}
|
|
12
23
|
type __VLS_Props = {
|
|
13
24
|
data: TableData;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { NumberFormat } from '@cfasim-ui/shared';
|
|
1
2
|
import { ChartData, ChartCommonProps, ChartHoverPayload, ChartTooltipBaseProps } from '../_shared/index.js';
|
|
2
3
|
/**
|
|
3
4
|
* Numeric input accepted by the chart. `number[]` and any standard numeric
|
|
@@ -80,6 +81,13 @@ interface LineChartProps extends ChartCommonProps {
|
|
|
80
81
|
areaSections?: AreaSection[];
|
|
81
82
|
lineOpacity?: number;
|
|
82
83
|
yMin?: number;
|
|
84
|
+
/**
|
|
85
|
+
* Scale type for the y axis. `"linear"` (default) maps values directly
|
|
86
|
+
* to pixels; `"log"` uses a base-10 log mapping. On a log axis,
|
|
87
|
+
* non-positive values collapse to the visible minimum, and `yMin <= 0`
|
|
88
|
+
* is ignored.
|
|
89
|
+
*/
|
|
90
|
+
yScaleType?: "linear" | "log";
|
|
83
91
|
/**
|
|
84
92
|
* Offset applied to index-based x values (e.g. `xMin: 10` starts the
|
|
85
93
|
* x axis at 10 instead of 0). Ignored when any series or area has
|
|
@@ -99,10 +107,18 @@ interface LineChartProps extends ChartCommonProps {
|
|
|
99
107
|
* omitted, ticks are chosen automatically.
|
|
100
108
|
*/
|
|
101
109
|
yTicks?: number | number[];
|
|
102
|
-
/**
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
110
|
+
/**
|
|
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`.
|
|
115
|
+
*/
|
|
116
|
+
xTickFormat?: NumberFormat | ((value: number, index: number) => string);
|
|
117
|
+
/**
|
|
118
|
+
* Formatter for y-axis tick labels. Accepts a preset name, a printf-style
|
|
119
|
+
* format string, or a function. See `formatNumber` in `@cfasim-ui/shared`.
|
|
120
|
+
*/
|
|
121
|
+
yTickFormat?: NumberFormat;
|
|
106
122
|
/**
|
|
107
123
|
* @deprecated Use `xTickFormat` (e.g. `(_, i) => labels[i]`) together
|
|
108
124
|
* with `xTicks` for explicit control. Still honored for tooltip x-labels
|
|
@@ -138,6 +154,7 @@ declare const __VLS_component: import('vue').DefineComponent<LineChartProps, {},
|
|
|
138
154
|
}>, {
|
|
139
155
|
menu: boolean | string;
|
|
140
156
|
lineOpacity: number;
|
|
157
|
+
yScaleType: "linear" | "log";
|
|
141
158
|
tooltipClamp: "none" | "chart" | "window";
|
|
142
159
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
|
|
143
160
|
containerRef: HTMLDivElement;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { NumberFormat } from '@cfasim-ui/shared';
|
|
1
2
|
import { ChartAnnotation } from './annotations.js';
|
|
2
3
|
import { ChartPadding } from './useChartPadding.js';
|
|
3
4
|
/**
|
|
@@ -23,11 +24,12 @@ export interface ChartCommonProps {
|
|
|
23
24
|
/** Boundary for tooltip flip/clamp. Default: `"chart"`. */
|
|
24
25
|
tooltipClamp?: "none" | "chart" | "window";
|
|
25
26
|
/**
|
|
26
|
-
* Formatter for numeric values shown in the default tooltip.
|
|
27
|
-
*
|
|
28
|
-
* tick formatter, then
|
|
27
|
+
* Formatter for numeric values shown in the default tooltip. Accepts a
|
|
28
|
+
* preset name, a printf-style format string, or a function. When
|
|
29
|
+
* omitted, the chart falls back to its value-axis tick formatter, then
|
|
30
|
+
* `formatTick`. See `formatNumber` in `@cfasim-ui/shared`.
|
|
29
31
|
*/
|
|
30
|
-
tooltipValueFormat?:
|
|
32
|
+
tooltipValueFormat?: NumberFormat;
|
|
31
33
|
/**
|
|
32
34
|
* Custom CSV content (string or function) for the Download CSV menu
|
|
33
35
|
* item. When omitted, CSV is generated from the chart's series.
|
package/dist/_shared/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { snap, niceStep, intervalValues, formatTick, type ChartData, } from './axes.js';
|
|
2
2
|
export { computeTickValues, type TickValueOptions } from './computeTicks.js';
|
|
3
|
+
export { scaleFraction, clampExtentForScale, computeLogTickValues, LOG_FLOOR, type ScaleType, } from './scale.js';
|
|
3
4
|
export { useChartSize, type ChartSizeOptions } from './useChartSize.js';
|
|
4
5
|
export { useChartPadding, INLINE_LEGEND_HEIGHT, type ChartPaddingOptions, type ChartPadding, type ChartBounds, } from './useChartPadding.js';
|
|
5
6
|
export { useChartTooltip, type ChartTooltipOptions, } from './useChartTooltip.js';
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Linear and log scale helpers shared by chart components. The chart
|
|
3
|
+
* computes a `[min, max]` data extent then maps values to pixels via
|
|
4
|
+
* `scaleFraction`; log mode clamps `min` to a positive floor so we
|
|
5
|
+
* never take `log10(0)` or `log10(-x)`.
|
|
6
|
+
*/
|
|
7
|
+
export type ScaleType = "linear" | "log";
|
|
8
|
+
/** Default floor used when a log-scale extent contains no positive data. */
|
|
9
|
+
export declare const LOG_FLOOR = 1;
|
|
10
|
+
/**
|
|
11
|
+
* Project a value onto a [0, 1] fraction of the axis range. The caller
|
|
12
|
+
* multiplies by the pixel range and adds the axis origin. On log
|
|
13
|
+
* scales, non-positive values collapse to the visible minimum so they
|
|
14
|
+
* sit on the axis floor instead of producing -Infinity.
|
|
15
|
+
*/
|
|
16
|
+
export declare function scaleFraction(v: number, min: number, max: number, type: ScaleType): number;
|
|
17
|
+
/**
|
|
18
|
+
* Clamp the lower bound of a data extent so it's safe for log scale.
|
|
19
|
+
* For linear scales the inputs are returned unchanged. For log scales,
|
|
20
|
+
* `min` is raised to the smallest positive value in the data (or
|
|
21
|
+
* `LOG_FLOOR` when no positive values exist), and `max` is also
|
|
22
|
+
* floored to that value so a degenerate axis still renders.
|
|
23
|
+
*/
|
|
24
|
+
export declare function clampExtentForScale(min: number, max: number, type: ScaleType, smallestPositive: number): {
|
|
25
|
+
min: number;
|
|
26
|
+
max: number;
|
|
27
|
+
};
|
|
28
|
+
/**
|
|
29
|
+
* Generate tick values for a log axis. By default returns powers of 10
|
|
30
|
+
* inside `[min, max]`. Pass `ticks` as an explicit array to override;
|
|
31
|
+
* numeric `ticks` (linear interval) is ignored on a log axis since it
|
|
32
|
+
* would produce a swarm of densely-packed labels — use an array for
|
|
33
|
+
* non-default tick placement.
|
|
34
|
+
*/
|
|
35
|
+
export declare function computeLogTickValues(opts: {
|
|
36
|
+
min: number;
|
|
37
|
+
max: number;
|
|
38
|
+
ticks?: number | number[];
|
|
39
|
+
}): number[];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { NumberFormat } from '@cfasim-ui/shared';
|
|
1
2
|
import { ChartPadding } from './useChartPadding.js';
|
|
2
3
|
import { TooltipClamp } from '../tooltip-position.js';
|
|
3
4
|
export interface ChartFoundationOptions {
|
|
@@ -79,4 +80,4 @@ export declare function useChartFoundation(opts: ChartFoundationOptions): {
|
|
|
79
80
|
* falls back to the chart's axis tick formatter, and finally to
|
|
80
81
|
* `formatTick`. Both chart components use the same precedence order.
|
|
81
82
|
*/
|
|
82
|
-
export declare function makeTooltipValueFormatter(tooltipFormat: () =>
|
|
83
|
+
export declare function makeTooltipValueFormatter(tooltipFormat: () => NumberFormat | undefined, axisFormat: () => NumberFormat | undefined): (v: number) => string;
|
package/dist/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.chart-menu-trigger-area[data-v-b3c563e8]{z-index:1;position:absolute;top:0;right:0}.chart-menu-button[data-v-b3c563e8]{border:1px solid var(--color-border);background:var(--color-bg-0,#fff);width:28px;height:28px;color:var(--color-text-secondary);cursor:pointer;opacity:0;border-radius:.25em;justify-content:center;align-items:center;transition:opacity .15s;display:flex}.chart-menu-button[data-state=open][data-v-b3c563e8]{opacity:1}.chart-menu-button[data-v-b3c563e8]:hover{background:var(--color-bg-1,#0000000d);color:var(--color-text)}.chart-menu-content{z-index:100;background:var(--color-bg-0);border:1px solid var(--color-border);border-radius:.25em;min-width:140px;padding:.25em;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.chart-menu-item{font-size:var(--font-size-sm);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;border-radius:.25em;outline:none;align-items:center;padding:.375em .5em;display:flex}.chart-menu-item[data-highlighted]{background:var(--color-primary);color:#fff}.line-chart-wrapper[data-v-
|
|
1
|
+
.chart-menu-trigger-area[data-v-b3c563e8]{z-index:1;position:absolute;top:0;right:0}.chart-menu-button[data-v-b3c563e8]{border:1px solid var(--color-border);background:var(--color-bg-0,#fff);width:28px;height:28px;color:var(--color-text-secondary);cursor:pointer;opacity:0;border-radius:.25em;justify-content:center;align-items:center;transition:opacity .15s;display:flex}.chart-menu-button[data-state=open][data-v-b3c563e8]{opacity:1}.chart-menu-button[data-v-b3c563e8]:hover{background:var(--color-bg-1,#0000000d);color:var(--color-text)}.chart-menu-content{z-index:100;background:var(--color-bg-0);border:1px solid var(--color-border);border-radius:.25em;min-width:140px;padding:.25em;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.chart-menu-item{font-size:var(--font-size-sm);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;border-radius:.25em;outline:none;align-items:center;padding:.375em .5em;display:flex}.chart-menu-item[data-highlighted]{background:var(--color-primary);color:#fff}.line-chart-wrapper[data-v-384bab8e]{width:100%;position:relative}.line-chart-wrapper[data-v-384bab8e]:hover .chart-menu-button{opacity:1}.line-chart-tooltip-label[data-v-384bab8e]{margin-bottom:.25em;font-weight:600}.line-chart-tooltip-row[data-v-384bab8e]{align-items:center;gap:.375em;display:flex}.line-chart-download-link[data-v-384bab8e]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}.line-chart-tooltip-swatch[data-v-384bab8e]{border-radius:50%;flex-shrink:0;width:.625em;height:.625em;display:inline-block}.bar-chart-wrapper[data-v-734e6c4e]{width:100%;position:relative}.bar-chart-wrapper[data-v-734e6c4e]:hover .chart-menu-button{opacity:1}.bar-chart-tooltip-label[data-v-734e6c4e]{margin-bottom:.25em;font-weight:600}.bar-chart-tooltip-row[data-v-734e6c4e]{align-items:center;gap:.375em;display:flex}.bar-chart-download-link[data-v-734e6c4e]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}.bar-chart-tooltip-swatch[data-v-734e6c4e]{border-radius:50%;flex-shrink:0;width:.625em;height:.625em;display:inline-block}.choropleth-wrapper[data-v-a53cf9ce]{--choropleth-legend-bg:var(--color-bg-0,#fff);width:100%;position:relative}.choropleth-wrapper svg[data-v-a53cf9ce]{width:100%;height:auto;display:block}.choropleth-wrapper.pannable svg[data-v-a53cf9ce]{cursor:grab}.choropleth-wrapper.pannable svg[data-v-a53cf9ce]:active{cursor:grabbing}.choropleth-wrapper[data-v-a53cf9ce]:hover .chart-menu-button{opacity:1}.state-path[data-v-a53cf9ce]{cursor:pointer}.choropleth-reset[data-v-a53cf9ce]{font:inherit;color:var(--color-text-secondary,#555);background:var(--color-bg-0,#fff);border:1px solid var(--color-border,#e5e7eb);cursor:pointer;border-radius:4px;padding:4px 10px;font-size:12px;position:absolute;bottom:8px;left:8px;box-shadow:0 1px 2px #0000000d}.choropleth-reset[data-v-a53cf9ce]:hover{background:var(--color-bg-1,#f8f9fa);color:var(--color-text,#212529)}.choropleth-header[data-v-a53cf9ce]{background:var(--choropleth-legend-bg);color:currentColor;border-radius:4px;flex-direction:column;align-items:center;gap:10px;width:fit-content;margin:0 auto;padding:8px 14px;display:flex}.choropleth-title[data-v-a53cf9ce]{font-size:14px;font-weight:600;line-height:1.2}.choropleth-legend[data-v-a53cf9ce]{align-items:center;gap:14px;font-size:13px;line-height:1.2;display:flex}.choropleth-legend-title[data-v-a53cf9ce]{font-weight:600}.choropleth-legend-item[data-v-a53cf9ce]{align-items:center;gap:6px;display:inline-flex}.choropleth-legend-swatch[data-v-a53cf9ce]{border-radius:3px;width:12px;height:12px;display:inline-block}.choropleth-legend-continuous[data-v-a53cf9ce]{flex-direction:column;width:160px;display:flex}.choropleth-legend-gradient[data-v-a53cf9ce]{border-radius:2px;height:12px}.choropleth-legend-ticks[data-v-a53cf9ce]{opacity:.7;height:14px;margin-top:4px;font-size:11px;position:relative}.choropleth-legend-ticks>span[data-v-a53cf9ce]{position:absolute;transform:translate(-50%)}.chart-tooltip-anchor[data-v-44377f70]{pointer-events:none;width:1px;height:1px;position:absolute}.chart-tooltip-content{z-index:100;background:var(--color-bg-0,#fff);border:1px solid var(--color-border,#e5e7eb);font-size:var(--font-size-sm,.875rem);pointer-events:none;border-radius:.375em;padding:.5em .75em;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.TableOuter[data-v-d6b3bce8]{display:inline-block;position:relative}.TableOuter.full-width[data-v-d6b3bce8]{display:block}.TableWrapper[data-v-d6b3bce8]{font-size:var(--font-size-sm);overflow-x:auto}.Table[data-v-d6b3bce8]{border-collapse:collapse;font-variant-numeric:tabular-nums;border:1px solid var(--color-border);table-layout:fixed;margin:0;display:table}.Table.full-width[data-v-d6b3bce8]{width:100%}.Table tr[data-v-d6b3bce8],.Table th[data-v-d6b3bce8],.Table td[data-v-d6b3bce8]{background:0 0;border:none}.Table th[data-v-d6b3bce8],.Table td[data-v-d6b3bce8]{white-space:nowrap;text-align:left;padding:.75em 1.25em}.Table th[data-v-d6b3bce8]{border-bottom:1px solid var(--color-border-header);font-weight:600;position:sticky;top:0}.Table tbody td[data-v-d6b3bce8]{border-bottom:1px solid var(--color-border)}.Table tbody tr:last-child td[data-v-d6b3bce8]{border-bottom:none}.TableOuter[data-v-d6b3bce8] .chart-menu-trigger-area{top:4px;right:4px}.TableOuter[data-v-d6b3bce8] .chart-menu-button{opacity:1}.TableOuter.has-menu .Table thead th[data-v-d6b3bce8]:last-child{padding-right:2.5em}
|
|
2
2
|
/*$vite$:1*/
|