@cfasim-ui/charts 0.6.1 → 0.6.3
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 +42 -0
- package/dist/_shared/chartProps.d.ts +15 -0
- package/dist/index.css +1 -1
- package/dist/index.js +1120 -1051
- package/package.json +2 -2
|
@@ -66,6 +66,15 @@ type __VLS_Props = {
|
|
|
66
66
|
* When unset, data ids must match the base `geoType`.
|
|
67
67
|
*/
|
|
68
68
|
dataGeoType?: GeoType;
|
|
69
|
+
/**
|
|
70
|
+
* Scope the map to a single state: render only that state's outline with
|
|
71
|
+
* its `counties` or `hsas` inside it (no surrounding states), and refit
|
|
72
|
+
* the projection to zoom to it. Accepts a state name ("California") or a
|
|
73
|
+
* 2-digit FIPS code ("06"). Requires a counties topology when `geoType`
|
|
74
|
+
* is `"counties"` or `"hsas"`. If the value matches no state, the full
|
|
75
|
+
* national map is rendered and a warning is logged.
|
|
76
|
+
*/
|
|
77
|
+
state?: string;
|
|
69
78
|
width?: number;
|
|
70
79
|
height?: number;
|
|
71
80
|
colorScale?: ChoroplethColorScale | ThresholdStop[] | CategoricalStop[];
|
|
@@ -76,6 +85,21 @@ type __VLS_Props = {
|
|
|
76
85
|
title?: string;
|
|
77
86
|
/** Styling for the map title. See `TitleStyle`. */
|
|
78
87
|
titleStyle?: TitleStyle;
|
|
88
|
+
/**
|
|
89
|
+
* ARIA role for the map's root element. Defaults to `"figure"` when an
|
|
90
|
+
* accessible name is present (from `ariaLabel` or `title`), so screen
|
|
91
|
+
* readers announce the map as a labeled figure while its controls (menu,
|
|
92
|
+
* reset) stay reachable. Pass `"img"` to expose it as a single image
|
|
93
|
+
* (which hides the inner controls from assistive tech), or your own role.
|
|
94
|
+
*/
|
|
95
|
+
role?: string;
|
|
96
|
+
/**
|
|
97
|
+
* Accessible name for the map, announced by screen readers via the root
|
|
98
|
+
* element's `aria-label`. Defaults to the `title` prop. The individual
|
|
99
|
+
* regions aren't exposed to assistive tech, so set this to a short summary
|
|
100
|
+
* of what the map shows.
|
|
101
|
+
*/
|
|
102
|
+
ariaLabel?: string;
|
|
79
103
|
/** Styling for the legend (title, swatch labels, and continuous-scale ticks). */
|
|
80
104
|
legendStyle?: LabelStyle;
|
|
81
105
|
noDataColor?: string;
|
|
@@ -90,6 +114,14 @@ type __VLS_Props = {
|
|
|
90
114
|
zoom?: boolean;
|
|
91
115
|
/** Enable click-and-drag panning. Default: false */
|
|
92
116
|
pan?: boolean;
|
|
117
|
+
/**
|
|
118
|
+
* Require two fingers to pan/zoom on touch devices. Default `false`.
|
|
119
|
+
* When `true`, a single finger scrolls the page (the map sets
|
|
120
|
+
* `touch-action: pan-y` and ignores one-finger drags) while two fingers
|
|
121
|
+
* pan and pinch-zoom the map. Single-finger tap-to-select still works.
|
|
122
|
+
* Has no effect with a mouse.
|
|
123
|
+
*/
|
|
124
|
+
twoFingerPan?: boolean;
|
|
93
125
|
/** Tooltip activation mode */
|
|
94
126
|
tooltipTrigger?: "hover" | "click";
|
|
95
127
|
/**
|
|
@@ -133,6 +165,14 @@ type __VLS_Props = {
|
|
|
133
165
|
focus?: FocusValue;
|
|
134
166
|
/** Scale factor applied when `focus` is set. Default: 4 */
|
|
135
167
|
focusZoomLevel?: number;
|
|
168
|
+
/**
|
|
169
|
+
* Whether setting `focus` pans/zooms to fit the focused feature.
|
|
170
|
+
* Default `true`. Set `false` to highlight (and draw cross-geoType
|
|
171
|
+
* overlays) without changing the current pan/zoom — useful for a
|
|
172
|
+
* click-to-select interaction where the map should stay put. The
|
|
173
|
+
* built-in Reset button is unaffected.
|
|
174
|
+
*/
|
|
175
|
+
focusZoom?: boolean;
|
|
136
176
|
/**
|
|
137
177
|
* Where to teleport the map while expanded (the Expand menu item). A
|
|
138
178
|
* CSS selector or element; defaults to `body`. Moving it to the
|
|
@@ -255,7 +295,9 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
|
|
|
255
295
|
strokeColor: string;
|
|
256
296
|
zoom: boolean;
|
|
257
297
|
pan: boolean;
|
|
298
|
+
twoFingerPan: boolean;
|
|
258
299
|
focusZoomLevel: number;
|
|
300
|
+
focusZoom: boolean;
|
|
259
301
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
|
|
260
302
|
containerRef: HTMLDivElement;
|
|
261
303
|
svgRef: SVGSVGElement;
|
|
@@ -76,6 +76,21 @@ export interface ChartCommonProps {
|
|
|
76
76
|
title?: string;
|
|
77
77
|
/** Styling for the chart title. See `TitleStyle`. */
|
|
78
78
|
titleStyle?: TitleStyle;
|
|
79
|
+
/**
|
|
80
|
+
* ARIA role for the chart's root element. Defaults to `"figure"` when an
|
|
81
|
+
* accessible name is present (from `ariaLabel` or `title`), so screen
|
|
82
|
+
* readers announce the chart as a labeled figure while its controls (menu,
|
|
83
|
+
* download) stay reachable. Pass `"img"` to expose it as a single image
|
|
84
|
+
* (which hides the inner controls from assistive tech), or your own role.
|
|
85
|
+
*/
|
|
86
|
+
role?: string;
|
|
87
|
+
/**
|
|
88
|
+
* Accessible name for the chart, announced by screen readers via the root
|
|
89
|
+
* element's `aria-label`. Defaults to the `title` prop. The individual
|
|
90
|
+
* marks aren't exposed to assistive tech, so set this to a short summary of
|
|
91
|
+
* what the chart shows.
|
|
92
|
+
*/
|
|
93
|
+
ariaLabel?: string;
|
|
79
94
|
/** Styling for axis labels (the `xLabel` / `yLabel` text). */
|
|
80
95
|
axisLabelStyle?: LabelStyle;
|
|
81
96
|
/** Styling for axis tick labels (the numbers/categories on each axis). */
|
package/dist/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.chart-menu-trigger-area[data-v-f5743494]{z-index:1;position:absolute;top:.5em;right:.5em}.chart-menu-trigger-area--expanded[data-v-f5743494]{top:1.25em;right:1.25em}.chart-menu-button[data-v-f5743494]{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-f5743494],.chart-close-button[data-v-f5743494]{opacity:1}.chart-menu-button[data-v-f5743494]:hover{background:var(--color-bg-1,#0000000d);color:var(--color-text)}.line-chart-wrapper:hover .chart-menu-button,.bar-chart-wrapper:hover .chart-menu-button,.choropleth-wrapper:hover .chart-menu-button,.line-chart-wrapper:focus-within .chart-menu-button,.bar-chart-wrapper:focus-within .chart-menu-button,.choropleth-wrapper:focus-within .chart-menu-button{opacity:1}.chart-sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.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-f5743494]{z-index:1;position:absolute;top:.5em;right:.5em}.chart-menu-trigger-area--expanded[data-v-f5743494]{top:1.25em;right:1.25em}.chart-menu-button[data-v-f5743494]{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-f5743494],.chart-close-button[data-v-f5743494]{opacity:1}.chart-menu-button[data-v-f5743494]:hover{background:var(--color-bg-1,#0000000d);color:var(--color-text)}.line-chart-wrapper:hover .chart-menu-button,.bar-chart-wrapper:hover .chart-menu-button,.choropleth-wrapper:hover .chart-menu-button,.line-chart-wrapper:focus-within .chart-menu-button,.bar-chart-wrapper:focus-within .chart-menu-button,.choropleth-wrapper:focus-within .chart-menu-button{opacity:1}.chart-sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.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-0cf7b0c7]{width:100%;position:relative}.line-chart-tooltip-label[data-v-0cf7b0c7]{margin-bottom:.25em;font-weight:600}.line-chart-tooltip-row[data-v-0cf7b0c7]{align-items:center;gap:.375em;display:flex}.line-chart-download-link[data-v-0cf7b0c7]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}.line-chart-tooltip-swatch[data-v-0cf7b0c7]{border-radius:50%;flex-shrink:0;width:.625em;height:.625em;display:inline-block}.line-chart-download-button{border:1px solid var(--color-border);background:var(--color-bg-0,#fff);color:var(--color-text);font-size:var(--font-size-sm);cursor:pointer;border-radius:.25em;align-items:center;margin-top:.5em;padding:.5em 1em;display:inline-flex}.line-chart-download-button:hover{background:var(--color-bg-1,#0000000d)}.line-chart-download-button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.bar-chart-wrapper[data-v-5f38ef02]{width:100%;position:relative}.bar-chart-tooltip-label[data-v-5f38ef02]{margin-bottom:.25em;font-weight:600}.bar-chart-tooltip-row[data-v-5f38ef02]{align-items:center;gap:.375em;display:flex}.bar-chart-download-link[data-v-5f38ef02]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}.bar-chart-tooltip-swatch[data-v-5f38ef02]{border-radius:50%;flex-shrink:0;width:.625em;height:.625em;display:inline-block}.bar-chart-download-button{border:1px solid var(--color-border);background:var(--color-bg-0,#fff);color:var(--color-text);font-size:var(--font-size-sm);cursor:pointer;border-radius:.25em;align-items:center;margin-top:.5em;padding:.5em 1em;display:inline-flex}.bar-chart-download-button:hover{background:var(--color-bg-1,#0000000d)}.bar-chart-download-button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.choropleth-wrapper[data-v-7bd9e073]{--choropleth-legend-bg:var(--color-bg-0,#fff);width:100%;position:relative}.choropleth-wrapper svg[data-v-7bd9e073]{width:100%;height:auto;display:block}.choropleth-wrapper.pannable svg[data-v-7bd9e073]{cursor:grab}.choropleth-wrapper.is-fullscreen svg[data-v-7bd9e073]{flex:auto;width:100%;height:100%;min-height:0}.choropleth-wrapper.pannable svg[data-v-7bd9e073]:active{cursor:grabbing}.state-path[data-v-7bd9e073]{cursor:pointer}.choropleth-reset[data-v-7bd9e073]{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-7bd9e073]:hover{background:var(--color-bg-1,#f8f9fa);color:var(--color-text,#212529)}.choropleth-header[data-v-7bd9e073]{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-7bd9e073]{white-space:pre-line;font-size:14px;font-weight:600;line-height:1.2}.choropleth-legend[data-v-7bd9e073]{align-items:center;gap:14px;font-size:13px;line-height:1.2;display:flex}.choropleth-legend-title[data-v-7bd9e073]{font-weight:600}.choropleth-legend-item[data-v-7bd9e073]{align-items:center;gap:6px;display:inline-flex}.choropleth-legend-swatch[data-v-7bd9e073]{border-radius:3px;width:12px;height:12px;display:inline-block}.choropleth-legend-continuous[data-v-7bd9e073]{flex-direction:column;width:160px;display:flex}.choropleth-legend-gradient[data-v-7bd9e073]{border-radius:2px;height:12px}.choropleth-legend-ticks[data-v-7bd9e073]{opacity:.7;height:14px;margin-top:4px;font-size:11px;position:relative}.choropleth-legend-ticks>span[data-v-7bd9e073]{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-21721f41]{display:inline-block;position:relative}.TableOuter.full-width[data-v-21721f41]{display:block}.TableWrapper[data-v-21721f41]{font-size:var(--font-size-sm);overflow-x:auto}.Table[data-v-21721f41]{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-21721f41]{width:100%}.Table tr[data-v-21721f41],.Table th[data-v-21721f41],.Table td[data-v-21721f41]{background:0 0;border:none}.Table th[data-v-21721f41],.Table td[data-v-21721f41]{white-space:nowrap;text-overflow:ellipsis;text-align:left;padding:.75em 1.25em;overflow:hidden}.Table th.cell-wrap[data-v-21721f41],.Table td.cell-wrap[data-v-21721f41]{white-space:normal;text-overflow:clip;overflow:visible}.Table th[data-v-21721f41]{border-bottom:1px solid var(--color-border-header);font-weight:600;position:sticky;top:0}.Table tbody td[data-v-21721f41]{border-bottom:1px solid var(--color-border)}.Table tbody tr:last-child td[data-v-21721f41]{border-bottom:none}.TableOuter[data-v-21721f41] .chart-menu-trigger-area{top:4px;right:4px}.TableOuter[data-v-21721f41] .chart-menu-button{opacity:1}.TableOuter.has-menu .Table thead th[data-v-21721f41]:last-child{padding-right:2.5em}.data-table-download-button{border:1px solid var(--color-border);background:var(--color-bg-0,#fff);color:var(--color-text);font-size:var(--font-size-sm);cursor:pointer;border-radius:.25em;align-items:center;margin-top:.75em;padding:.5em 1em;display:inline-flex}.data-table-download-button:hover{background:var(--color-bg-1,#0000000d)}.data-table-download-button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.data-table-download-link{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}
|
|
2
2
|
/*$vite$:1*/
|