@cfasim-ui/charts 0.6.2 → 0.6.4
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 +15 -0
- package/dist/_shared/chartProps.d.ts +15 -0
- package/dist/index.css +1 -1
- package/dist/index.js +708 -686
- package/package.json +2 -2
|
@@ -85,6 +85,21 @@ type __VLS_Props = {
|
|
|
85
85
|
title?: string;
|
|
86
86
|
/** Styling for the map title. See `TitleStyle`. */
|
|
87
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;
|
|
88
103
|
/** Styling for the legend (title, swatch labels, and continuous-scale ticks). */
|
|
89
104
|
legendStyle?: LabelStyle;
|
|
90
105
|
noDataColor?: string;
|
|
@@ -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 `<svg>`. Defaults to `"img"` when an accessible
|
|
81
|
+
* name is present (from `ariaLabel` or `title`), so screen readers announce
|
|
82
|
+
* the chart as a single labeled image instead of exposing the individual
|
|
83
|
+
* marks. The menu and download controls sit outside the `<svg>`, so they
|
|
84
|
+
* stay reachable regardless. Pass your own role to override.
|
|
85
|
+
*/
|
|
86
|
+
role?: string;
|
|
87
|
+
/**
|
|
88
|
+
* Accessible name for the chart, announced by screen readers via the
|
|
89
|
+
* `<svg>`'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-a3132bed]{width:100%;position:relative}.line-chart-tooltip-label[data-v-a3132bed]{margin-bottom:.25em;font-weight:600}.line-chart-tooltip-row[data-v-a3132bed]{align-items:center;gap:.375em;display:flex}.line-chart-download-link[data-v-a3132bed]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}.line-chart-tooltip-swatch[data-v-a3132bed]{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-251f7945]{width:100%;position:relative}.bar-chart-tooltip-label[data-v-251f7945]{margin-bottom:.25em;font-weight:600}.bar-chart-tooltip-row[data-v-251f7945]{align-items:center;gap:.375em;display:flex}.bar-chart-download-link[data-v-251f7945]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}.bar-chart-tooltip-swatch[data-v-251f7945]{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*/
|