@cfasim-ui/charts 0.6.0 → 0.6.1
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/LineChart/LineChart.d.ts +7 -1
- package/dist/index.css +1 -1
- package/dist/index.js +4 -3
- package/package.json +2 -2
|
@@ -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-96a5f36e]{--choropleth-legend-bg:var(--color-bg-0,#fff);width:100%;position:relative}.choropleth-wrapper svg[data-v-96a5f36e]{width:100%;height:auto;display:block}.choropleth-wrapper.pannable svg[data-v-96a5f36e]{cursor:grab}.choropleth-wrapper.is-fullscreen svg[data-v-96a5f36e]{flex:auto;width:100%;height:100%;min-height:0}.choropleth-wrapper.pannable svg[data-v-96a5f36e]:active{cursor:grabbing}.state-path[data-v-96a5f36e]{cursor:pointer}.choropleth-reset[data-v-96a5f36e]{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-96a5f36e]:hover{background:var(--color-bg-1,#f8f9fa);color:var(--color-text,#212529)}.choropleth-header[data-v-96a5f36e]{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-96a5f36e]{white-space:pre-line;font-size:14px;font-weight:600;line-height:1.2}.choropleth-legend[data-v-96a5f36e]{align-items:center;gap:14px;font-size:13px;line-height:1.2;display:flex}.choropleth-legend-title[data-v-96a5f36e]{font-weight:600}.choropleth-legend-item[data-v-96a5f36e]{align-items:center;gap:6px;display:inline-flex}.choropleth-legend-swatch[data-v-96a5f36e]{border-radius:3px;width:12px;height:12px;display:inline-block}.choropleth-legend-continuous[data-v-96a5f36e]{flex-direction:column;width:160px;display:flex}.choropleth-legend-gradient[data-v-96a5f36e]{border-radius:2px;height:12px}.choropleth-legend-ticks[data-v-96a5f36e]{opacity:.7;height:14px;margin-top:4px;font-size:11px;position:relative}.choropleth-legend-ticks>span[data-v-96a5f36e]{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*/
|
package/dist/index.js
CHANGED
|
@@ -2026,8 +2026,9 @@ var zt = {
|
|
|
2026
2026
|
d: ce(e),
|
|
2027
2027
|
fill: e.color ?? "currentColor",
|
|
2028
2028
|
"fill-opacity": e.opacity ?? .2,
|
|
2029
|
-
stroke: "none"
|
|
2030
|
-
|
|
2029
|
+
stroke: "none",
|
|
2030
|
+
style: m(e.blendMode ? { mixBlendMode: e.blendMode } : void 0)
|
|
2031
|
+
}, null, 12, tn))), 128)),
|
|
2031
2032
|
(_(!0), a(e, null, y(O.value, (t, n) => (_(), a(e, { key: n }, [
|
|
2032
2033
|
t.line !== !1 && t.outline ? (_(), a("path", {
|
|
2033
2034
|
key: 0,
|
|
@@ -2211,7 +2212,7 @@ var zt = {
|
|
|
2211
2212
|
}, x(C(He)), 1)) : i("", !0)
|
|
2212
2213
|
], 16)], 8, ["to", "disabled"]));
|
|
2213
2214
|
}
|
|
2214
|
-
}), [["__scopeId", "data-v-
|
|
2215
|
+
}), [["__scopeId", "data-v-e96123bd"]]), En = {
|
|
2215
2216
|
class: "chart-sr-only",
|
|
2216
2217
|
"aria-live": "polite"
|
|
2217
2218
|
}, Dn = ["width", "height"], On = [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cfasim-ui/charts",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Chart visualization components for cfasim-ui",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"d3-zoom": "^3.0.0",
|
|
39
39
|
"reka-ui": "^2.9.2",
|
|
40
40
|
"topojson-client": "^3.1.0",
|
|
41
|
-
"@cfasim-ui/shared": "0.6.
|
|
41
|
+
"@cfasim-ui/shared": "0.6.1"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"vue": "^3.5.0"
|