@sentropic/design-system-vue 0.16.0 → 0.17.0
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/BarChart.d.ts +31 -0
- package/dist/BarChart.d.ts.map +1 -1
- package/dist/BarChart.js +33 -10
- package/dist/BarChart.js.map +1 -1
- package/dist/styles.css +27 -3
- package/package.json +1 -1
package/dist/BarChart.d.ts
CHANGED
|
@@ -10,6 +10,19 @@ export type BarChartProps = {
|
|
|
10
10
|
height?: number;
|
|
11
11
|
orientation?: "vertical" | "horizontal";
|
|
12
12
|
label: string;
|
|
13
|
+
/**
|
|
14
|
+
* Keys of the currently selected bars (a bar's key is its `label`).
|
|
15
|
+
* CONTROLLED — the parent owns the toggle; the component never stores
|
|
16
|
+
* selection. When non-empty the selected bars stay full opacity (+ accent)
|
|
17
|
+
* and the rest dim; when empty every bar is normal. Defaults to [].
|
|
18
|
+
*/
|
|
19
|
+
selectedKeys?: string[];
|
|
20
|
+
/**
|
|
21
|
+
* Called when a bar is clicked / activated (Enter / Space) with the bar's
|
|
22
|
+
* key (its `label`). When provided the bars become focusable buttons; when
|
|
23
|
+
* omitted the chart is purely presentational (no interactivity, unchanged).
|
|
24
|
+
*/
|
|
25
|
+
onSelect?: (key: string) => void;
|
|
13
26
|
class?: string;
|
|
14
27
|
};
|
|
15
28
|
export declare const BarChart: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
@@ -33,6 +46,14 @@ export declare const BarChart: import("vue").DefineComponent<import("vue").Extra
|
|
|
33
46
|
type: StringConstructor;
|
|
34
47
|
required: true;
|
|
35
48
|
};
|
|
49
|
+
selectedKeys: {
|
|
50
|
+
type: () => string[];
|
|
51
|
+
default: () => never[];
|
|
52
|
+
};
|
|
53
|
+
onSelect: {
|
|
54
|
+
type: () => (key: string) => void;
|
|
55
|
+
default: undefined;
|
|
56
|
+
};
|
|
36
57
|
class: {
|
|
37
58
|
type: StringConstructor;
|
|
38
59
|
default: undefined;
|
|
@@ -60,14 +81,24 @@ export declare const BarChart: import("vue").DefineComponent<import("vue").Extra
|
|
|
60
81
|
type: StringConstructor;
|
|
61
82
|
required: true;
|
|
62
83
|
};
|
|
84
|
+
selectedKeys: {
|
|
85
|
+
type: () => string[];
|
|
86
|
+
default: () => never[];
|
|
87
|
+
};
|
|
88
|
+
onSelect: {
|
|
89
|
+
type: () => (key: string) => void;
|
|
90
|
+
default: undefined;
|
|
91
|
+
};
|
|
63
92
|
class: {
|
|
64
93
|
type: StringConstructor;
|
|
65
94
|
default: undefined;
|
|
66
95
|
};
|
|
67
96
|
}>> & Readonly<{}>, {
|
|
68
97
|
class: string;
|
|
98
|
+
onSelect: (key: string) => void;
|
|
69
99
|
width: number;
|
|
70
100
|
height: number;
|
|
71
101
|
orientation: "horizontal" | "vertical";
|
|
102
|
+
selectedKeys: string[];
|
|
72
103
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
73
104
|
//# sourceMappingURL=BarChart.d.ts.map
|
package/dist/BarChart.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../src/BarChart.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,YAAY,GACpB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAIF,eAAO,MAAM,QAAQ;;cAGM,MAAM,aAAa,EAAE;;;;;;;;;;;;cAGb,MAAM,UAAU,GAAG,YAAY
|
|
1
|
+
{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../src/BarChart.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,YAAY,GACpB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAIF,eAAO,MAAM,QAAQ;;cAGM,MAAM,aAAa,EAAE;;;;;;;;;;;;cAGb,MAAM,UAAU,GAAG,YAAY;;;;;;;;cAE/B,MAAM,MAAM,EAAE;;;;cACJ,MAAM,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI;;;;;;;;;;;cAN7C,MAAM,aAAa,EAAE;;;;;;;;;;;;cAGb,MAAM,UAAU,GAAG,YAAY;;;;;;;;cAE/B,MAAM,MAAM,EAAE;;;;cACJ,MAAM,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI;;;;;;;;;oBAAf,MAAM,KAAK,IAAI;;;;;4EAiOtE,CAAC"}
|
package/dist/BarChart.js
CHANGED
|
@@ -10,6 +10,8 @@ export const BarChart = defineComponent({
|
|
|
10
10
|
height: { type: Number, default: 240 },
|
|
11
11
|
orientation: { type: String, default: "vertical" },
|
|
12
12
|
label: { type: String, required: true },
|
|
13
|
+
selectedKeys: { type: Array, default: () => [] },
|
|
14
|
+
onSelect: { type: Function, default: undefined },
|
|
13
15
|
class: { type: String, default: undefined },
|
|
14
16
|
},
|
|
15
17
|
setup(props, { attrs }) {
|
|
@@ -26,12 +28,24 @@ export const BarChart = defineComponent({
|
|
|
26
28
|
const index = Number(target.getAttribute("data-chart-index"));
|
|
27
29
|
hoveredIndex.value = Number.isInteger(index) ? index : null;
|
|
28
30
|
}
|
|
31
|
+
function handleBarKeydown(key, event) {
|
|
32
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
33
|
+
// preventDefault on Space so it activates rather than scrolling the page.
|
|
34
|
+
event.preventDefault();
|
|
35
|
+
props.onSelect?.(key);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
29
38
|
return () => {
|
|
30
39
|
const width = props.width ?? 480;
|
|
31
40
|
const height = props.height ?? 240;
|
|
32
41
|
const orientation = props.orientation ?? "vertical";
|
|
33
42
|
const label = props.label;
|
|
34
43
|
const data = props.data;
|
|
44
|
+
// Selection (controlled): fast lookup + "is any bar selected" flag. Only
|
|
45
|
+
// when something is selected do we dim the non-selected bars.
|
|
46
|
+
const selectedSet = new Set(props.selectedKeys ?? []);
|
|
47
|
+
const hasSelection = selectedSet.size > 0;
|
|
48
|
+
const interactive = typeof props.onSelect === "function";
|
|
35
49
|
const values = data.map((d) => d.value);
|
|
36
50
|
const minRaw = Math.min(0, ...values);
|
|
37
51
|
const maxRaw = Math.max(0, ...values);
|
|
@@ -102,16 +116,25 @@ export const BarChart = defineComponent({
|
|
|
102
116
|
const categoryLabels = bars.map((bar) => orientation === "vertical"
|
|
103
117
|
? h("text", { key: `c${bar.datum.label}`, class: "st-barChart__categoryLabel", x: bar.x + bar.width / 2, y: height - MARGIN.bottom + 16, "text-anchor": "middle" }, bar.datum.label)
|
|
104
118
|
: h("text", { key: `c${bar.datum.label}`, class: "st-barChart__categoryLabel", x: MARGIN.left - 6, y: bar.y + bar.height / 2, "text-anchor": "end", "dominant-baseline": "middle" }, bar.datum.label));
|
|
105
|
-
const barRects = bars.map((bar, i) =>
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
119
|
+
const barRects = bars.map((bar, i) => {
|
|
120
|
+
const isSelected = selectedSet.has(bar.datum.label);
|
|
121
|
+
return h("rect", {
|
|
122
|
+
key: `b${bar.datum.label}`,
|
|
123
|
+
class: classNames("st-barChart__bar", `st-barChart__bar--${bar.tone}`, isSelected && "st-barChart__bar--selected", hasSelection && !isSelected && "st-barChart__bar--dim", interactive && "st-barChart__bar--interactive"),
|
|
124
|
+
x: bar.x,
|
|
125
|
+
y: bar.y,
|
|
126
|
+
width: bar.width,
|
|
127
|
+
height: bar.height,
|
|
128
|
+
rx: "2",
|
|
129
|
+
"data-chart-index": i,
|
|
130
|
+
role: interactive ? "button" : undefined,
|
|
131
|
+
tabindex: interactive ? 0 : undefined,
|
|
132
|
+
"aria-pressed": interactive ? (isSelected ? "true" : "false") : undefined,
|
|
133
|
+
"aria-label": interactive ? `${bar.datum.label}: ${bar.datum.value}` : undefined,
|
|
134
|
+
onClick: interactive ? () => props.onSelect?.(bar.datum.label) : undefined,
|
|
135
|
+
onKeydown: interactive ? (e) => handleBarKeydown(bar.datum.label, e) : undefined,
|
|
136
|
+
});
|
|
137
|
+
});
|
|
115
138
|
const hoveredBar = hoveredIndex.value !== null ? bars[hoveredIndex.value] : undefined;
|
|
116
139
|
return h("div", { ...attrs, class: classNames("st-barChart", props.class) }, [
|
|
117
140
|
h("div", {
|
package/dist/BarChart.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarChart.js","sourceRoot":"","sources":["../src/BarChart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"BarChart.js","sourceRoot":"","sources":["../src/BarChart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAwClG,MAAM,MAAM,GAAG,YAAY,CAAC;AAE5B,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC;IACtC,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE;QACL,IAAI,EAAE,EAAE,IAAI,EAAE,KAA8B,EAAE,QAAQ,EAAE,IAAI,EAAE;QAC9D,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;QACrC,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;QACtC,WAAW,EAAE,EAAE,IAAI,EAAE,MAAyC,EAAE,OAAO,EAAE,UAAU,EAAE;QACrF,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;QACvC,YAAY,EAAE,EAAE,IAAI,EAAE,KAAuB,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE;QAClE,QAAQ,EAAE,EAAE,IAAI,EAAE,QAAkD,EAAE,OAAO,EAAE,SAAS,EAAE;QAC1F,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;KAC5C;IACD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE;QACpB,MAAM,YAAY,GAAG,GAAG,CAAgB,IAAI,CAAC,CAAC;QAE9C,SAAS,WAAW;YAClB,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC;QAC5B,CAAC;QACD,SAAS,uBAAuB,CAAC,KAAmB;YAClD,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;YAC5B,IAAI,CAAC,CAAC,MAAM,YAAY,OAAO,CAAC,EAAE,CAAC;gBACjC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC;gBAC1B,OAAO;YACT,CAAC;YACD,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,CAAC;YAC9D,YAAY,CAAC,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;QAC9D,CAAC;QAED,SAAS,gBAAgB,CAAC,GAAW,EAAE,KAAoB;YACzD,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBAC/C,0EAA0E;gBAC1E,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,QAAQ,EAAE,CAAC,GAAG,CAAC,CAAC;YACxB,CAAC;QACH,CAAC;QAED,OAAO,GAAG,EAAE;YACV,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,GAAG,CAAC;YACjC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,IAAI,GAAG,CAAC;YACnC,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,UAAU,CAAC;YACpD,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;YAC1B,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;YAExB,yEAAyE;YACzE,8DAA8D;YAC9D,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC;YACtD,MAAM,YAAY,GAAG,WAAW,CAAC,IAAI,GAAG,CAAC,CAAC;YAC1C,MAAM,WAAW,GAAG,OAAO,KAAK,CAAC,QAAQ,KAAK,UAAU,CAAC;YAEzD,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;YACxC,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,MAAM,CAAC,CAAC;YACtC,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,MAAM,CAAC,CAAC;YACtC,MAAM,KAAK,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;YAC3C,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;YAC3B,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YAC1C,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;YAClE,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;YAapE,IAAI,IAAI,GAAU,EAAE,CAAC;YACrB,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACtB,IAAI,WAAW,KAAK,UAAU,EAAE,CAAC;oBAC/B,MAAM,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC;oBACrC,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;oBAC7B,MAAM,KAAK,GAAG,WAAW,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;oBAClE,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;wBACvB,MAAM,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;wBACzE,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;wBAClC,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,MAAM,CAAC,CAAC;wBACpC,MAAM,CAAC,GAAG,MAAM,CAAC,IAAI,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,IAAI,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;wBACzD,OAAO;4BACL,CAAC;4BACD,CAAC,EAAE,MAAM,CAAC,GAAG,GAAG,CAAC;4BACjB,KAAK,EAAE,QAAQ;4BACf,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,GAAG,CAAC;4BACzB,EAAE,EAAE,MAAM,CAAC,IAAI,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;4BAClC,EAAE,EAAE,MAAM,CAAC,GAAG,GAAG,MAAM;4BACvB,KAAK,EAAE,CAAC;4BACR,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,WAAW,CAAiB;yBAC9C,CAAC;oBACJ,CAAC,CAAC,CAAC;gBACL,CAAC;qBAAM,CAAC;oBACN,MAAM,IAAI,GAAG,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC;oBACtC,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;oBAC9B,MAAM,KAAK,GAAG,WAAW,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC;oBACjE,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;wBACvB,MAAM,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC;wBACxE,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;wBAClC,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC;wBACnC,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,IAAI,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC;wBACzD,OAAO;4BACL,CAAC,EAAE,MAAM,CAAC,IAAI,GAAG,CAAC;4BAClB,CAAC;4BACD,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC;4BACvB,MAAM,EAAE,SAAS;4BACjB,EAAE,EAAE,MAAM,CAAC,IAAI,GAAG,MAAM;4BACxB,EAAE,EAAE,MAAM,CAAC,GAAG,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;4BACjC,KAAK,EAAE,CAAC;4BACR,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,WAAW,CAAiB;yBAC9C,CAAC;oBACJ,CAAC,CAAC,CAAC;gBACL,CAAC;YACH,CAAC;YAED,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;YAEjE,MAAM,YAAY,GAA2B,EAAE,CAAC;YAChD,IAAI,WAAW,KAAK,UAAU,EAAE,CAAC;gBAC/B,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;oBACzB,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,GAAG,WAAW,CAAC,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;oBAC9E,YAAY,CAAC,IAAI,CACf,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,IAAI,IAAI,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,EAAE,EAAE,MAAM,CAAC,IAAI,EAAE,EAAE,EAAE,MAAM,CAAC,IAAI,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EACtH,CAAC,CACC,MAAM,EACN,EAAE,GAAG,EAAE,IAAI,IAAI,EAAE,EAAE,KAAK,EAAE,wBAAwB,EAAE,CAAC,EAAE,MAAM,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,mBAAmB,EAAE,QAAQ,EAAE,EAChI,UAAU,CAAC,IAAI,CAAC,CACjB,CACF,CAAC;gBACJ,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;oBACzB,MAAM,CAAC,GAAG,MAAM,CAAC,IAAI,GAAG,WAAW,CAAC,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC;oBAC9E,YAAY,CAAC,IAAI,CACf,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,IAAI,IAAI,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,GAAG,EAAE,EAAE,EAAE,MAAM,CAAC,GAAG,GAAG,UAAU,EAAE,CAAC,EACrH,CAAC,CACC,MAAM,EACN,EAAE,GAAG,EAAE,IAAI,IAAI,EAAE,EAAE,KAAK,EAAE,wBAAwB,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,GAAG,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,EAChH,UAAU,CAAC,IAAI,CAAC,CACjB,CACF,CAAC;gBACJ,CAAC;YACH,CAAC;YAED,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CACtC,WAAW,KAAK,UAAU;gBACxB,CAAC,CAAC,CAAC,CACC,MAAM,EACN,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,4BAA4B,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,GAAG,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,EACtJ,GAAG,CAAC,KAAK,CAAC,KAAK,CAChB;gBACH,CAAC,CAAC,CAAC,CACC,MAAM,EACN,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,4BAA4B,EAAE,CAAC,EAAE,MAAM,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,MAAM,GAAG,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,mBAAmB,EAAE,QAAQ,EAAE,EACvK,GAAG,CAAC,KAAK,CAAC,KAAK,CAChB,CACN,CAAC;YAEF,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;gBACnC,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;gBACpD,OAAO,CAAC,CAAC,MAAM,EAAE;oBACf,GAAG,EAAE,IAAI,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE;oBAC1B,KAAK,EAAE,UAAU,CACf,kBAAkB,EAClB,qBAAqB,GAAG,CAAC,IAAI,EAAE,EAC/B,UAAU,IAAI,4BAA4B,EAC1C,YAAY,IAAI,CAAC,UAAU,IAAI,uBAAuB,EACtD,WAAW,IAAI,+BAA+B,CAC/C;oBACD,CAAC,EAAE,GAAG,CAAC,CAAC;oBACR,CAAC,EAAE,GAAG,CAAC,CAAC;oBACR,KAAK,EAAE,GAAG,CAAC,KAAK;oBAChB,MAAM,EAAE,GAAG,CAAC,MAAM;oBAClB,EAAE,EAAE,GAAG;oBACP,kBAAkB,EAAE,CAAC;oBACrB,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;oBACxC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;oBACrC,cAAc,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS;oBACzE,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,KAAK,KAAK,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS;oBAChF,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS;oBAC1E,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAgB,EAAE,EAAE,CAAC,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;iBAChG,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;YAEH,MAAM,UAAU,GAAG,YAAY,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;YAEtF,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,aAAa,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE;gBAC3E,CAAC,CACC,KAAK,EACL;oBACE,KAAK,EAAE,qBAAqB;oBAC5B,IAAI,EAAE,KAAK;oBACX,YAAY,EAAE,KAAK;oBACnB,aAAa,EAAE,uBAAuB;oBACtC,cAAc,EAAE,WAAW;iBAC5B,EACD;oBACE,CAAC,CACC,KAAK,EACL;wBACE,OAAO,EAAE,OAAO,KAAK,IAAI,MAAM,EAAE;wBACjC,mBAAmB,EAAE,eAAe;wBACpC,KAAK,EAAE,MAAM;wBACb,MAAM,EAAE,MAAM;wBACd,SAAS,EAAE,OAAO;wBAClB,aAAa,EAAE,MAAM;qBACtB,EACD;wBACE,GAAG,YAAY;wBACf,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,EAAE,EAAE,MAAM,CAAC,IAAI,EAAE,EAAE,EAAE,MAAM,CAAC,IAAI,EAAE,EAAE,EAAE,MAAM,CAAC,GAAG,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC;wBACvH,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,EAAE,EAAE,MAAM,CAAC,IAAI,EAAE,EAAE,EAAE,KAAK,GAAG,MAAM,CAAC,KAAK,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC;wBAC5I,GAAG,cAAc;wBACjB,GAAG,QAAQ;qBACZ,CACF;iBACF,CACF;gBACD,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC;gBACpC,UAAU;oBACR,CAAC,CAAC,CAAC,CACC,KAAK,EACL;wBACE,KAAK,EAAE,sBAAsB;wBAC7B,IAAI,EAAE,cAAc;wBACpB,KAAK,EAAE,SAAS,CAAC,UAAU,CAAC,EAAE,GAAG,KAAK,CAAC,GAAG,GAAG,WAAW,CAAC,UAAU,CAAC,EAAE,GAAG,MAAM,CAAC,GAAG,GAAG,GAAG;qBAC1F,EACD;wBACE,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,2BAA2B,EAAE,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC;wBACzE,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,2BAA2B,EAAE,EAAE,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;qBAClF,CACF;oBACH,CAAC,CAAC,IAAI;aACT,CAAC,CAAC;QACL,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}
|
package/dist/styles.css
CHANGED
|
@@ -394,7 +394,7 @@
|
|
|
394
394
|
|
|
395
395
|
.st-barChart__bar {
|
|
396
396
|
cursor: pointer;
|
|
397
|
-
transition: opacity 120ms ease;
|
|
397
|
+
transition: opacity var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
|
|
398
398
|
}
|
|
399
399
|
|
|
400
400
|
.st-barChart__bar:hover,
|
|
@@ -402,11 +402,31 @@
|
|
|
402
402
|
opacity: 0.82;
|
|
403
403
|
}
|
|
404
404
|
|
|
405
|
-
.st-barChart__bar:focus-visible
|
|
406
|
-
|
|
405
|
+
.st-barChart__bar:focus-visible,
|
|
406
|
+
.st-barChart__bar--interactive:focus-visible {
|
|
407
|
+
outline: 2px solid var(--st-semantic-border-interactive, var(--st-semantic-action-primary));
|
|
407
408
|
outline-offset: 1px;
|
|
408
409
|
}
|
|
409
410
|
|
|
411
|
+
/* Non-selected bars are dimmed while a selection is active. */
|
|
412
|
+
.st-barChart__bar--dim {
|
|
413
|
+
opacity: 0.45;
|
|
414
|
+
}
|
|
415
|
+
/* Hover still lifts a dimmed bar so it stays explorable. */
|
|
416
|
+
.st-barChart__bar--dim:hover {
|
|
417
|
+
opacity: 0.7;
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
/* Selected bar: full opacity + a contrast-safe accent stroke (two signals,
|
|
421
|
+
never a font/size reflow). Outranks the dim rule. */
|
|
422
|
+
.st-barChart__bar--selected,
|
|
423
|
+
.st-barChart__bar--selected:hover {
|
|
424
|
+
opacity: 1;
|
|
425
|
+
stroke: var(--st-semantic-border-interactive, var(--st-semantic-action-primary));
|
|
426
|
+
stroke-width: 2;
|
|
427
|
+
paint-order: stroke;
|
|
428
|
+
}
|
|
429
|
+
|
|
410
430
|
.st-barChart__bar--category1 { fill: var(--st-semantic-data-category1); }
|
|
411
431
|
.st-barChart__bar--category2 { fill: var(--st-semantic-data-category2); }
|
|
412
432
|
.st-barChart__bar--category3 { fill: var(--st-semantic-data-category3); }
|
|
@@ -441,6 +461,10 @@
|
|
|
441
461
|
opacity: 0.85;
|
|
442
462
|
}
|
|
443
463
|
|
|
464
|
+
@media (prefers-reduced-motion: reduce) {
|
|
465
|
+
.st-barChart__bar { transition: none; }
|
|
466
|
+
}
|
|
467
|
+
|
|
444
468
|
.st-breadcrumb {
|
|
445
469
|
font-size: var(--st-component-breadcrumb-fontSize, inherit);
|
|
446
470
|
letter-spacing: var(--st-component-breadcrumb-letterSpacing, normal);
|