@cfasim-ui/charts 0.6.0 → 0.6.2
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 +27 -0
- package/dist/LineChart/LineChart.d.ts +7 -1
- package/dist/index.css +1 -1
- package/dist/index.js +919 -861
- 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[];
|
|
@@ -90,6 +99,14 @@ type __VLS_Props = {
|
|
|
90
99
|
zoom?: boolean;
|
|
91
100
|
/** Enable click-and-drag panning. Default: false */
|
|
92
101
|
pan?: boolean;
|
|
102
|
+
/**
|
|
103
|
+
* Require two fingers to pan/zoom on touch devices. Default `false`.
|
|
104
|
+
* When `true`, a single finger scrolls the page (the map sets
|
|
105
|
+
* `touch-action: pan-y` and ignores one-finger drags) while two fingers
|
|
106
|
+
* pan and pinch-zoom the map. Single-finger tap-to-select still works.
|
|
107
|
+
* Has no effect with a mouse.
|
|
108
|
+
*/
|
|
109
|
+
twoFingerPan?: boolean;
|
|
93
110
|
/** Tooltip activation mode */
|
|
94
111
|
tooltipTrigger?: "hover" | "click";
|
|
95
112
|
/**
|
|
@@ -133,6 +150,14 @@ type __VLS_Props = {
|
|
|
133
150
|
focus?: FocusValue;
|
|
134
151
|
/** Scale factor applied when `focus` is set. Default: 4 */
|
|
135
152
|
focusZoomLevel?: number;
|
|
153
|
+
/**
|
|
154
|
+
* Whether setting `focus` pans/zooms to fit the focused feature.
|
|
155
|
+
* Default `true`. Set `false` to highlight (and draw cross-geoType
|
|
156
|
+
* overlays) without changing the current pan/zoom — useful for a
|
|
157
|
+
* click-to-select interaction where the map should stay put. The
|
|
158
|
+
* built-in Reset button is unaffected.
|
|
159
|
+
*/
|
|
160
|
+
focusZoom?: boolean;
|
|
136
161
|
/**
|
|
137
162
|
* Where to teleport the map while expanded (the Expand menu item). A
|
|
138
163
|
* CSS selector or element; defaults to `body`. Moving it to the
|
|
@@ -255,7 +280,9 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
|
|
|
255
280
|
strokeColor: string;
|
|
256
281
|
zoom: boolean;
|
|
257
282
|
pan: boolean;
|
|
283
|
+
twoFingerPan: boolean;
|
|
258
284
|
focusZoomLevel: number;
|
|
285
|
+
focusZoom: boolean;
|
|
259
286
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
|
|
260
287
|
containerRef: HTMLDivElement;
|
|
261
288
|
svgRef: SVGSVGElement;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { NumberFormat } from '@cfasim-ui/shared';
|
|
2
|
-
import { ChartData, LabelStyle, DateFormat, DateTimezone, ChartCommonProps, ChartHoverPayload, ChartTooltipBaseProps, LineMarkStyle } from '../_shared/index.js';
|
|
2
|
+
import { ChartData, LabelStyle, DateFormat, DateTimezone, ChartCommonProps, ChartHoverPayload, ChartTooltipBaseProps, BlendMode, LineMarkStyle } 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
|
|
@@ -72,6 +72,12 @@ export interface Area {
|
|
|
72
72
|
x?: LineChartXInput;
|
|
73
73
|
color?: string;
|
|
74
74
|
opacity?: number;
|
|
75
|
+
/**
|
|
76
|
+
* CSS `mix-blend-mode` applied to the area fill. Lets overlapping
|
|
77
|
+
* areas (e.g. confidence bands) combine their colors instead of one
|
|
78
|
+
* obscuring the other.
|
|
79
|
+
*/
|
|
80
|
+
blendMode?: BlendMode;
|
|
75
81
|
}
|
|
76
82
|
export interface AreaSection {
|
|
77
83
|
/** Index into the series array. When omitted, fills the full chart height with no line. */
|
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-e96123bd]{width:100%;position:relative}.line-chart-tooltip-label[data-v-e96123bd]{margin-bottom:.25em;font-weight:600}.line-chart-tooltip-row[data-v-e96123bd]{align-items:center;gap:.375em;display:flex}.line-chart-download-link[data-v-e96123bd]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}.line-chart-tooltip-swatch[data-v-e96123bd]{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-67594e38]{width:100%;position:relative}.bar-chart-tooltip-label[data-v-67594e38]{margin-bottom:.25em;font-weight:600}.bar-chart-tooltip-row[data-v-67594e38]{align-items:center;gap:.375em;display:flex}.bar-chart-download-link[data-v-67594e38]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}.bar-chart-tooltip-swatch[data-v-67594e38]{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-63f25207]{--choropleth-legend-bg:var(--color-bg-0,#fff);width:100%;position:relative}.choropleth-wrapper svg[data-v-63f25207]{width:100%;height:auto;display:block}.choropleth-wrapper.pannable svg[data-v-63f25207]{cursor:grab}.choropleth-wrapper.is-fullscreen svg[data-v-63f25207]{flex:auto;width:100%;height:100%;min-height:0}.choropleth-wrapper.pannable svg[data-v-63f25207]:active{cursor:grabbing}.state-path[data-v-63f25207]{cursor:pointer}.choropleth-reset[data-v-63f25207]{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-63f25207]:hover{background:var(--color-bg-1,#f8f9fa);color:var(--color-text,#212529)}.choropleth-header[data-v-63f25207]{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-63f25207]{white-space:pre-line;font-size:14px;font-weight:600;line-height:1.2}.choropleth-legend[data-v-63f25207]{align-items:center;gap:14px;font-size:13px;line-height:1.2;display:flex}.choropleth-legend-title[data-v-63f25207]{font-weight:600}.choropleth-legend-item[data-v-63f25207]{align-items:center;gap:6px;display:inline-flex}.choropleth-legend-swatch[data-v-63f25207]{border-radius:3px;width:12px;height:12px;display:inline-block}.choropleth-legend-continuous[data-v-63f25207]{flex-direction:column;width:160px;display:flex}.choropleth-legend-gradient[data-v-63f25207]{border-radius:2px;height:12px}.choropleth-legend-ticks[data-v-63f25207]{opacity:.7;height:14px;margin-top:4px;font-size:11px;position:relative}.choropleth-legend-ticks>span[data-v-63f25207]{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*/
|