@cfasim-ui/charts 0.4.4 → 0.4.5
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/ChoroplethMap/ChoroplethMap.d.ts +49 -8
- package/dist/index.css +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +631 -560
- package/package.json +2 -2
|
@@ -24,6 +24,29 @@ export interface CategoricalStop {
|
|
|
24
24
|
/** CSS color string */
|
|
25
25
|
color: string;
|
|
26
26
|
}
|
|
27
|
+
/**
|
|
28
|
+
* A focused feature. Pass a plain string to focus a feature in the map's
|
|
29
|
+
* current `geoType` with the default solid highlight, or an object to
|
|
30
|
+
* specify a different `geoType` (drawn as an overlay on top of the base
|
|
31
|
+
* map) and/or a `style`.
|
|
32
|
+
*/
|
|
33
|
+
export type FocusStyle = "solid" | "dashed" | "dotted";
|
|
34
|
+
export interface FocusItem {
|
|
35
|
+
/** Feature id (FIPS code, HSA code) or name. */
|
|
36
|
+
id: string;
|
|
37
|
+
/** Defaults to the map's `geoType`. Cross-geoType items render as
|
|
38
|
+
* non-interactive outlines on top of the base map. */
|
|
39
|
+
geoType?: GeoType;
|
|
40
|
+
/** Outline style. `"solid"` (default) matches the hover highlight;
|
|
41
|
+
* `"dashed"` uses long dashes; `"dotted"` uses small round dots —
|
|
42
|
+
* useful when stacking multiple outlines of different geoTypes. */
|
|
43
|
+
style?: FocusStyle;
|
|
44
|
+
/** Stroke color for the outline. Applies to cross-geoType overlay
|
|
45
|
+
* paths only (base-geoType highlights stay at the default focus
|
|
46
|
+
* color). Default: `"#fff"`. */
|
|
47
|
+
stroke?: string;
|
|
48
|
+
}
|
|
49
|
+
export type FocusValue = string | FocusItem | Array<string | FocusItem> | null;
|
|
27
50
|
type __VLS_Props = {
|
|
28
51
|
/** TopoJSON topology object (e.g. from us-atlas/states-10m.json or us-atlas/counties-10m.json).
|
|
29
52
|
* Must contain a "states" object for geoType="states", or both "states" and "counties" objects
|
|
@@ -32,6 +55,15 @@ type __VLS_Props = {
|
|
|
32
55
|
data?: StateData[];
|
|
33
56
|
/** Geographic type: "states" (default), "counties", or "hsas" (Health Service Areas) */
|
|
34
57
|
geoType?: GeoType;
|
|
58
|
+
/**
|
|
59
|
+
* GeoType of the entries in `data`, if different from `geoType`. Lets
|
|
60
|
+
* you color a county-level base map by HSA values (each county fills
|
|
61
|
+
* with its parent HSA's value) or by state values, without changing
|
|
62
|
+
* the rendered/interactive geometry. Supported combinations:
|
|
63
|
+
* `counties` ← `hsas`, `counties` ← `states`, `hsas` ← `states`.
|
|
64
|
+
* When unset, data ids must match the base `geoType`.
|
|
65
|
+
*/
|
|
66
|
+
dataGeoType?: GeoType;
|
|
35
67
|
width?: number;
|
|
36
68
|
height?: number;
|
|
37
69
|
colorScale?: ChoroplethColorScale | ThresholdStop[] | CategoricalStop[];
|
|
@@ -74,15 +106,20 @@ type __VLS_Props = {
|
|
|
74
106
|
*/
|
|
75
107
|
tooltipClamp?: "none" | "chart" | "window";
|
|
76
108
|
/**
|
|
77
|
-
* Feature
|
|
78
|
-
*
|
|
79
|
-
*
|
|
80
|
-
*
|
|
81
|
-
*
|
|
82
|
-
*
|
|
83
|
-
*
|
|
109
|
+
* Feature(s) to pan/zoom to. Accepts a feature id (FIPS code, HSA
|
|
110
|
+
* code, or feature name), a `FocusItem` object, or an array of
|
|
111
|
+
* either. `FocusItem` lets you pin features from a different
|
|
112
|
+
* `geoType` than the base map (drawn as a non-interactive outline) or
|
|
113
|
+
* pick a `style` ("solid" / "dashed"). All items contribute to the
|
|
114
|
+
* zoom bounds. Pass `null` or an empty array to clear focus — the
|
|
115
|
+
* current pan/zoom transform is preserved; only the highlight is
|
|
116
|
+
* removed. Works with `v-model:focus`: clicking an unfocused feature
|
|
117
|
+
* (in the base geoType) emits its id; clicking the focused feature
|
|
118
|
+
* emits `null`. The built-in Reset button clears focus *and* resets
|
|
119
|
+
* the zoom. If a tooltip is configured, focusing a feature in the
|
|
120
|
+
* base geoType shows its tooltip.
|
|
84
121
|
*/
|
|
85
|
-
focus?:
|
|
122
|
+
focus?: FocusValue;
|
|
86
123
|
/** Scale factor applied when `focus` is set. Default: 4 */
|
|
87
124
|
focusZoomLevel?: number;
|
|
88
125
|
};
|
|
@@ -107,6 +144,8 @@ declare function __VLS_template(): {
|
|
|
107
144
|
containerRef: HTMLDivElement;
|
|
108
145
|
svgRef: SVGSVGElement;
|
|
109
146
|
mapGroupRef: SVGGElement;
|
|
147
|
+
baseGroupRef: SVGGElement;
|
|
148
|
+
overlayGroupRef: SVGGElement;
|
|
110
149
|
tooltipChildRef: ({
|
|
111
150
|
$: import('vue').ComponentInternalInstance;
|
|
112
151
|
$data: {};
|
|
@@ -201,6 +240,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
|
|
|
201
240
|
containerRef: HTMLDivElement;
|
|
202
241
|
svgRef: SVGSVGElement;
|
|
203
242
|
mapGroupRef: SVGGElement;
|
|
243
|
+
baseGroupRef: SVGGElement;
|
|
244
|
+
overlayGroupRef: SVGGElement;
|
|
204
245
|
tooltipChildRef: ({
|
|
205
246
|
$: import('vue').ComponentInternalInstance;
|
|
206
247
|
$data: {};
|
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-083d1c2f]{width:100%;position:relative}.line-chart-wrapper[data-v-083d1c2f]:hover .chart-menu-button{opacity:1}.line-chart-tooltip-label[data-v-083d1c2f]{margin-bottom:.25em;font-weight:600}.line-chart-tooltip-row[data-v-083d1c2f]{align-items:center;gap:.375em;display:flex}.line-chart-download-link[data-v-083d1c2f]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}.line-chart-tooltip-swatch[data-v-083d1c2f]{border-radius:50%;flex-shrink:0;width:.625em;height:.625em;display:inline-block}.bar-chart-wrapper[data-v-4f604d9f]{width:100%;position:relative}.bar-chart-wrapper[data-v-4f604d9f]:hover .chart-menu-button{opacity:1}.bar-chart-tooltip-label[data-v-4f604d9f]{margin-bottom:.25em;font-weight:600}.bar-chart-tooltip-row[data-v-4f604d9f]{align-items:center;gap:.375em;display:flex}.bar-chart-download-link[data-v-4f604d9f]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}.bar-chart-tooltip-swatch[data-v-4f604d9f]{border-radius:50%;flex-shrink:0;width:.625em;height:.625em;display:inline-block}.choropleth-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-083d1c2f]{width:100%;position:relative}.line-chart-wrapper[data-v-083d1c2f]:hover .chart-menu-button{opacity:1}.line-chart-tooltip-label[data-v-083d1c2f]{margin-bottom:.25em;font-weight:600}.line-chart-tooltip-row[data-v-083d1c2f]{align-items:center;gap:.375em;display:flex}.line-chart-download-link[data-v-083d1c2f]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}.line-chart-tooltip-swatch[data-v-083d1c2f]{border-radius:50%;flex-shrink:0;width:.625em;height:.625em;display:inline-block}.bar-chart-wrapper[data-v-4f604d9f]{width:100%;position:relative}.bar-chart-wrapper[data-v-4f604d9f]:hover .chart-menu-button{opacity:1}.bar-chart-tooltip-label[data-v-4f604d9f]{margin-bottom:.25em;font-weight:600}.bar-chart-tooltip-row[data-v-4f604d9f]{align-items:center;gap:.375em;display:flex}.bar-chart-download-link[data-v-4f604d9f]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}.bar-chart-tooltip-swatch[data-v-4f604d9f]{border-radius:50%;flex-shrink:0;width:.625em;height:.625em;display:inline-block}.choropleth-wrapper[data-v-f0f75b22]{--choropleth-legend-bg:var(--color-bg-0,#fff);width:100%;position:relative}.choropleth-wrapper svg[data-v-f0f75b22]{width:100%;height:auto;display:block}.choropleth-wrapper.pannable svg[data-v-f0f75b22]{cursor:grab}.choropleth-wrapper.pannable svg[data-v-f0f75b22]:active{cursor:grabbing}.choropleth-wrapper[data-v-f0f75b22]:hover .chart-menu-button{opacity:1}.state-path[data-v-f0f75b22]{cursor:pointer}.choropleth-reset[data-v-f0f75b22]{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-f0f75b22]:hover{background:var(--color-bg-1,#f8f9fa);color:var(--color-text,#212529)}.choropleth-header[data-v-f0f75b22]{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-f0f75b22]{font-size:14px;font-weight:600;line-height:1.2}.choropleth-legend[data-v-f0f75b22]{align-items:center;gap:14px;font-size:13px;line-height:1.2;display:flex}.choropleth-legend-title[data-v-f0f75b22]{font-weight:600}.choropleth-legend-item[data-v-f0f75b22]{align-items:center;gap:6px;display:inline-flex}.choropleth-legend-swatch[data-v-f0f75b22]{border-radius:3px;width:12px;height:12px;display:inline-block}.choropleth-legend-continuous[data-v-f0f75b22]{flex-direction:column;width:160px;display:flex}.choropleth-legend-gradient[data-v-f0f75b22]{border-radius:2px;height:12px}.choropleth-legend-ticks[data-v-f0f75b22]{opacity:.7;height:14px;margin-top:4px;font-size:11px;position:relative}.choropleth-legend-ticks>span[data-v-f0f75b22]{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-d5c290dc]{display:inline-block;position:relative}.TableOuter.full-width[data-v-d5c290dc]{display:block}.TableWrapper[data-v-d5c290dc]{font-size:var(--font-size-sm);overflow-x:auto}.Table[data-v-d5c290dc]{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-d5c290dc]{width:100%}.Table tr[data-v-d5c290dc],.Table th[data-v-d5c290dc],.Table td[data-v-d5c290dc]{background:0 0;border:none}.Table th[data-v-d5c290dc],.Table td[data-v-d5c290dc]{white-space:nowrap;text-align:left;padding:.75em 1.25em}.Table th[data-v-d5c290dc]{border-bottom:1px solid var(--color-border-header);font-weight:600;position:sticky;top:0}.Table tbody td[data-v-d5c290dc]{border-bottom:1px solid var(--color-border)}.Table tbody tr:last-child td[data-v-d5c290dc]{border-bottom:none}.TableOuter[data-v-d5c290dc] .chart-menu-trigger-area{top:4px;right:4px}.TableOuter[data-v-d5c290dc] .chart-menu-button{opacity:1}.TableOuter.has-menu .Table thead th[data-v-d5c290dc]:last-child{padding-right:2.5em}
|
|
2
2
|
/*$vite$:1*/
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { default as LineChart, type LineChartData, type Series, type Area, type AreaSection, } from './LineChart/LineChart';
|
|
2
2
|
export { default as BarChart, type BarChartData, type BarSeries, } from './BarChart/BarChart';
|
|
3
|
-
export { default as ChoroplethMap, type GeoType, type StateData, type ChoroplethColorScale, type ThresholdStop, type CategoricalStop, } from './ChoroplethMap/ChoroplethMap';
|
|
3
|
+
export { default as ChoroplethMap, type GeoType, type StateData, type ChoroplethColorScale, type ThresholdStop, type CategoricalStop, type FocusItem, type FocusValue, type FocusStyle, } from './ChoroplethMap/ChoroplethMap';
|
|
4
|
+
export { fipsToHsa, hsaNames } from './ChoroplethMap/hsaMapping.js';
|
|
4
5
|
export { default as ChartTooltip } from './ChartTooltip/ChartTooltip';
|
|
5
6
|
export { default as DataTable, type TableData, type TableRecord, type ColumnAlign, type ColumnConfig, type ColumnWidth, } from './DataTable/DataTable';
|