@sentropic/design-system-react 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 +15 -2
- package/dist/BarChart.d.ts.map +1 -1
- package/dist/BarChart.js +17 -2
- package/dist/BarChart.js.map +1 -1
- package/dist/styles.css +27 -3
- package/package.json +1 -1
package/dist/BarChart.d.ts
CHANGED
|
@@ -5,13 +5,26 @@ export type BarChartDatum = {
|
|
|
5
5
|
value: number;
|
|
6
6
|
tone?: BarChartTone;
|
|
7
7
|
};
|
|
8
|
-
export type BarChartProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
|
|
8
|
+
export type BarChartProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "onSelect"> & {
|
|
9
9
|
data: BarChartDatum[];
|
|
10
10
|
width?: number;
|
|
11
11
|
height?: number;
|
|
12
12
|
orientation?: "vertical" | "horizontal";
|
|
13
13
|
label: string;
|
|
14
|
+
/**
|
|
15
|
+
* Keys of the currently selected bars (a bar's key is its `label`).
|
|
16
|
+
* CONTROLLED — the parent owns the toggle; the component never stores
|
|
17
|
+
* selection. When non-empty the selected bars stay full opacity (+ accent)
|
|
18
|
+
* and the rest dim; when empty every bar is normal. Defaults to [].
|
|
19
|
+
*/
|
|
20
|
+
selectedKeys?: string[];
|
|
21
|
+
/**
|
|
22
|
+
* Called when a bar is clicked / activated (Enter / Space) with the bar's
|
|
23
|
+
* key (its `label`). When provided the bars become focusable buttons; when
|
|
24
|
+
* omitted the chart is purely presentational (no interactivity, unchanged).
|
|
25
|
+
*/
|
|
26
|
+
onSelect?: (key: string) => void;
|
|
14
27
|
className?: string;
|
|
15
28
|
};
|
|
16
|
-
export declare function BarChart({ data, width, height, orientation, label, className, ...rest }: BarChartProps): import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
export declare function BarChart({ data, width, height, orientation, label, selectedKeys, onSelect, className, ...rest }: BarChartProps): import("react/jsx-runtime").JSX.Element;
|
|
17
30
|
//# 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.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,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,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC,GAAG;
|
|
1
|
+
{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../src/BarChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,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,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC,GAAG;IACjG,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,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAIF,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,KAAW,EACX,MAAY,EACZ,WAAwB,EACxB,KAAK,EACL,YAAiB,EACjB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,aAAa,2CA2Of"}
|
package/dist/BarChart.js
CHANGED
|
@@ -3,8 +3,20 @@ import React from "react";
|
|
|
3
3
|
import { classNames } from "./classNames.js";
|
|
4
4
|
import { CHART_MARGIN, ChartDataList, formatTick, niceTicks, scaleLinear } from "./chartScale.js";
|
|
5
5
|
const MARGIN = CHART_MARGIN;
|
|
6
|
-
export function BarChart({ data, width = 480, height = 240, orientation = "vertical", label, className, ...rest }) {
|
|
6
|
+
export function BarChart({ data, width = 480, height = 240, orientation = "vertical", label, selectedKeys = [], onSelect, className, ...rest }) {
|
|
7
7
|
const [hoveredIndex, setHoveredIndex] = React.useState(null);
|
|
8
|
+
// Selection (controlled): fast lookup + "is any bar selected" flag. Only when
|
|
9
|
+
// something is selected do we dim the non-selected bars.
|
|
10
|
+
const selectedSet = React.useMemo(() => new Set(selectedKeys), [selectedKeys]);
|
|
11
|
+
const hasSelection = selectedSet.size > 0;
|
|
12
|
+
const interactive = typeof onSelect === "function";
|
|
13
|
+
function handleBarKeyDown(key, e) {
|
|
14
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
15
|
+
// preventDefault on Space so it activates rather than scrolling the page.
|
|
16
|
+
e.preventDefault();
|
|
17
|
+
onSelect?.(key);
|
|
18
|
+
}
|
|
19
|
+
}
|
|
8
20
|
const values = data.map((d) => d.value);
|
|
9
21
|
const minRaw = Math.min(0, ...values);
|
|
10
22
|
const maxRaw = Math.max(0, ...values);
|
|
@@ -86,6 +98,9 @@ export function BarChart({ data, width = 480, height = 240, orientation = "verti
|
|
|
86
98
|
const hoveredBar = hoveredIndex !== null ? bars[hoveredIndex] : undefined;
|
|
87
99
|
return (_jsxs("div", { ...rest, className: classNames("st-barChart", className), children: [_jsx("div", { className: "st-barChart__visual", role: "img", "aria-label": label, onPointerMove: handleVisualPointerMove, onPointerLeave: handleLeave, children: _jsxs("svg", { viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "xMidYMid meet", width: "100%", height: "100%", focusable: "false", "aria-hidden": "true", children: [orientation === "vertical"
|
|
88
100
|
? valueAxisTicks.map((tick) => (_jsxs(React.Fragment, { children: [_jsx("line", { className: "st-barChart__grid", x1: tick.x1, x2: tick.x2, y1: tick.y, y2: tick.y }), _jsx("text", { className: "st-barChart__tickLabel", x: MARGIN.left - 6, y: tick.y, textAnchor: "end", dominantBaseline: "middle", children: formatTick(tick.value) })] }, tick.value)))
|
|
89
|
-
: valueAxisTicks.map((tick) => (_jsxs(React.Fragment, { children: [_jsx("line", { className: "st-barChart__grid", x1: tick.x, x2: tick.x, y1: tick.y1, y2: tick.y2 }), _jsx("text", { className: "st-barChart__tickLabel", x: tick.x, y: height - MARGIN.bottom + 16, textAnchor: "middle", children: formatTick(tick.value) })] }, tick.value))), _jsx("line", { className: "st-barChart__axis", x1: MARGIN.left, x2: MARGIN.left, y1: MARGIN.top, y2: height - MARGIN.bottom }), _jsx("line", { className: "st-barChart__axis", x1: MARGIN.left, x2: width - MARGIN.right, y1: height - MARGIN.bottom, y2: height - MARGIN.bottom }), bars.map((bar) => orientation === "vertical" ? (_jsx("text", { className: "st-barChart__categoryLabel", x: bar.x + bar.width / 2, y: height - MARGIN.bottom + 16, textAnchor: "middle", children: bar.datum.label }, bar.datum.label)) : (_jsx("text", { className: "st-barChart__categoryLabel", x: MARGIN.left - 6, y: bar.y + bar.height / 2, textAnchor: "end", dominantBaseline: "middle", children: bar.datum.label }, bar.datum.label))), bars.map((bar, i) =>
|
|
101
|
+
: valueAxisTicks.map((tick) => (_jsxs(React.Fragment, { children: [_jsx("line", { className: "st-barChart__grid", x1: tick.x, x2: tick.x, y1: tick.y1, y2: tick.y2 }), _jsx("text", { className: "st-barChart__tickLabel", x: tick.x, y: height - MARGIN.bottom + 16, textAnchor: "middle", children: formatTick(tick.value) })] }, tick.value))), _jsx("line", { className: "st-barChart__axis", x1: MARGIN.left, x2: MARGIN.left, y1: MARGIN.top, y2: height - MARGIN.bottom }), _jsx("line", { className: "st-barChart__axis", x1: MARGIN.left, x2: width - MARGIN.right, y1: height - MARGIN.bottom, y2: height - MARGIN.bottom }), bars.map((bar) => orientation === "vertical" ? (_jsx("text", { className: "st-barChart__categoryLabel", x: bar.x + bar.width / 2, y: height - MARGIN.bottom + 16, textAnchor: "middle", children: bar.datum.label }, bar.datum.label)) : (_jsx("text", { className: "st-barChart__categoryLabel", x: MARGIN.left - 6, y: bar.y + bar.height / 2, textAnchor: "end", dominantBaseline: "middle", children: bar.datum.label }, bar.datum.label))), bars.map((bar, i) => {
|
|
102
|
+
const isSelected = selectedSet.has(bar.datum.label);
|
|
103
|
+
return (_jsx("rect", { className: 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"), x: bar.x, y: bar.y, width: bar.width, height: bar.height, rx: "2", "data-chart-index": i, role: interactive ? "button" : undefined, tabIndex: interactive ? 0 : undefined, "aria-pressed": interactive ? isSelected : undefined, "aria-label": interactive ? `${bar.datum.label}: ${bar.datum.value}` : undefined, onClick: interactive ? () => onSelect?.(bar.datum.label) : undefined, onKeyDown: interactive ? (e) => handleBarKeyDown(bar.datum.label, e) : undefined }, bar.datum.label));
|
|
104
|
+
})] }) }), _jsx(ChartDataList, { label: label, items: dataValueItems }), hoveredBar ? (_jsxs("div", { className: "st-barChart__tooltip", role: "presentation", style: { left: `${(hoveredBar.cx / width) * 100}%`, top: `${(hoveredBar.cy / height) * 100}%` }, children: [_jsx("span", { className: "st-barChart__tooltipLabel", children: hoveredBar.datum.label }), _jsx("span", { className: "st-barChart__tooltipValue", children: hoveredBar.datum.value })] })) : null] }));
|
|
90
105
|
}
|
|
91
106
|
//# sourceMappingURL=BarChart.js.map
|
package/dist/BarChart.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarChart.js","sourceRoot":"","sources":["../src/BarChart.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,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.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,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,UAAU,QAAQ,CAAC,EACvB,IAAI,EACJ,KAAK,GAAG,GAAG,EACX,MAAM,GAAG,GAAG,EACZ,WAAW,GAAG,UAAU,EACxB,KAAK,EACL,YAAY,GAAG,EAAE,EACjB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACO;IACd,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAE5E,8EAA8E;IAC9E,yDAAyD;IACzD,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAC/E,MAAM,YAAY,GAAG,WAAW,CAAC,IAAI,GAAG,CAAC,CAAC;IAC1C,MAAM,WAAW,GAAG,OAAO,QAAQ,KAAK,UAAU,CAAC;IAEnD,SAAS,gBAAgB,CAAC,GAAW,EAAE,CAAsB;QAC3D,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YACvC,0EAA0E;YAC1E,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,QAAQ,EAAE,CAAC,GAAG,CAAC,CAAC;QAClB,CAAC;IACH,CAAC;IAED,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,MAAM,CAAC,CAAC;IACtC,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,MAAM,CAAC,CAAC;IACtC,MAAM,KAAK,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;IAC3C,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IAC3B,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAC1C,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAClE,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IAEpE,MAAM,IAAI,GAAG,CAAC,GAAG,EAAE;QACjB,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,EAS5B,CAAC;QACH,IAAI,WAAW,KAAK,UAAU,EAAE,CAAC;YAC/B,MAAM,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC;YACrC,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;YAC7B,MAAM,KAAK,GAAG,WAAW,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;YAClE,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;gBACvB,MAAM,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;gBACzE,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;gBAClC,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,MAAM,CAAC,CAAC;gBACnC,MAAM,CAAC,GAAG,MAAM,CAAC,IAAI,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,IAAI,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;gBACzD,OAAO;oBACL,CAAC;oBACD,CAAC,EAAE,MAAM,CAAC,GAAG,GAAG,CAAC;oBACjB,KAAK,EAAE,QAAQ;oBACf,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC;oBACxB,EAAE,EAAE,MAAM,CAAC,IAAI,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;oBAClC,EAAE,EAAE,MAAM,CAAC,GAAG,GAAG,MAAM;oBACvB,KAAK,EAAE,CAAC;oBACR,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,WAAW,CAAiB;iBAC9C,CAAC;YACJ,CAAC,CAAC,CAAC;QACL,CAAC;QACD,MAAM,IAAI,GAAG,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC;QACtC,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;QAC9B,MAAM,KAAK,GAAG,WAAW,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC;QACjE,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACvB,MAAM,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC;YACxE,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;YAClC,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC;YACnC,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,IAAI,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC;YACzD,OAAO;gBACL,CAAC,EAAE,MAAM,CAAC,IAAI,GAAG,CAAC;gBAClB,CAAC;gBACD,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC;gBACvB,MAAM,EAAE,SAAS;gBACjB,EAAE,EAAE,MAAM,CAAC,IAAI,GAAG,MAAM;gBACxB,EAAE,EAAE,MAAM,CAAC,GAAG,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;gBACjC,KAAK,EAAE,CAAC;gBACR,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,WAAW,CAAiB;aAC9C,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,EAAE,CAAC;IAEL,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;IAEjE,MAAM,cAAc,GAClB,WAAW,KAAK,UAAU;QACxB,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YACnB,KAAK,EAAE,IAAI;YACX,EAAE,EAAE,MAAM,CAAC,IAAI;YACf,EAAE,EAAE,MAAM,CAAC,IAAI,GAAG,SAAS;YAC3B,CAAC,EAAE,MAAM,CAAC,GAAG,GAAG,WAAW,CAAC,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC,CAAC;SACvE,CAAC,CAAC;QACL,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YACnB,KAAK,EAAE,IAAI;YACX,CAAC,EAAE,MAAM,CAAC,IAAI,GAAG,WAAW,CAAC,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,CAAC;YACtE,EAAE,EAAE,MAAM,CAAC,GAAG;YACd,EAAE,EAAE,MAAM,CAAC,GAAG,GAAG,UAAU;SAC5B,CAAC,CAAC,CAAC;IAEV,SAAS,WAAW;QAClB,eAAe,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC;IACD,SAAS,uBAAuB,CAAC,KAAyB;QACxD,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,CAAC,MAAM,YAAY,OAAO,CAAC,EAAE,CAAC;YACjC,eAAe,CAAC,IAAI,CAAC,CAAC;YACtB,OAAO;QACT,CAAC;QACD,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,CAAC;QAC9D,eAAe,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAC1D,CAAC;IAED,MAAM,UAAU,GAAG,YAAY,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE1E,OAAO,CACL,kBAAS,IAAI,EAAE,SAAS,EAAE,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,aAC5D,cACE,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAC,KAAK,gBACE,KAAK,EACjB,aAAa,EAAE,uBAAuB,EACtC,cAAc,EAAE,WAAW,YAE3B,eACE,OAAO,EAAE,OAAO,KAAK,IAAI,MAAM,EAAE,EACjC,mBAAmB,EAAC,eAAe,EACnC,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,SAAS,EAAC,OAAO,iBACL,MAAM,aAEjB,WAAW,KAAK,UAAU;4BACzB,CAAC,CAAE,cAA8E,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC5F,MAAC,KAAK,CAAC,QAAQ,eACb,eAAM,SAAS,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,CAAC,GAAI,EACxF,eACE,SAAS,EAAC,wBAAwB,EAClC,CAAC,EAAE,MAAM,CAAC,IAAI,GAAG,CAAC,EAClB,CAAC,EAAE,IAAI,CAAC,CAAC,EACT,UAAU,EAAC,KAAK,EAChB,gBAAgB,EAAC,QAAQ,YAExB,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,GAClB,KAVY,IAAI,CAAC,KAAK,CAWd,CAClB,CAAC;4BACJ,CAAC,CAAE,cAA8E,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC5F,MAAC,KAAK,CAAC,QAAQ,eACb,eAAM,SAAS,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,GAAI,EACxF,eACE,SAAS,EAAC,wBAAwB,EAClC,CAAC,EAAE,IAAI,CAAC,CAAC,EACT,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,GAAG,EAAE,EAC9B,UAAU,EAAC,QAAQ,YAElB,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,GAClB,KATY,IAAI,CAAC,KAAK,CAUd,CAClB,CAAC,EAEN,eAAM,SAAS,EAAC,mBAAmB,EAAC,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,GAAI,EACpH,eACE,SAAS,EAAC,mBAAmB,EAC7B,EAAE,EAAE,MAAM,CAAC,IAAI,EACf,EAAE,EAAE,KAAK,GAAG,MAAM,CAAC,KAAK,EACxB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAC1B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,GAC1B,EAED,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAChB,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,CAC3B,eAEE,SAAS,EAAC,4BAA4B,EACtC,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,KAAK,GAAG,CAAC,EACxB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,GAAG,EAAE,EAC9B,UAAU,EAAC,QAAQ,YAElB,GAAG,CAAC,KAAK,CAAC,KAAK,IANX,GAAG,CAAC,KAAK,CAAC,KAAK,CAOf,CACR,CAAC,CAAC,CAAC,CACF,eAEE,SAAS,EAAC,4BAA4B,EACtC,CAAC,EAAE,MAAM,CAAC,IAAI,GAAG,CAAC,EAClB,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,MAAM,GAAG,CAAC,EACzB,UAAU,EAAC,KAAK,EAChB,gBAAgB,EAAC,QAAQ,YAExB,GAAG,CAAC,KAAK,CAAC,KAAK,IAPX,GAAG,CAAC,KAAK,CAAC,KAAK,CAQf,CACR,CACF,EAEA,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;4BACnB,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;4BACpD,OAAO,CACL,eAEE,SAAS,EAAE,UAAU,CACnB,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,EACD,CAAC,EAAE,GAAG,CAAC,CAAC,EACR,CAAC,EAAE,GAAG,CAAC,CAAC,EACR,KAAK,EAAE,GAAG,CAAC,KAAK,EAChB,MAAM,EAAE,GAAG,CAAC,MAAM,EAClB,EAAE,EAAC,GAAG,sBACY,CAAC,EACnB,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACxC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,kBACvB,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,gBACtC,WAAW,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,KAAK,KAAK,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,EAC9E,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,EACpE,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,IAnB3E,GAAG,CAAC,KAAK,CAAC,KAAK,CAoBpB,CACH,CAAC;wBACJ,CAAC,CAAC,IACE,GACF,EAEN,KAAC,aAAa,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,cAAc,GAAI,EAErD,UAAU,CAAC,CAAC,CAAC,CACZ,eACE,SAAS,EAAC,sBAAsB,EAChC,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,CAAC,UAAU,CAAC,EAAE,GAAG,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,UAAU,CAAC,EAAE,GAAG,MAAM,CAAC,GAAG,GAAG,GAAG,EAAE,aAE/F,eAAM,SAAS,EAAC,2BAA2B,YAAE,UAAU,CAAC,KAAK,CAAC,KAAK,GAAQ,EAC3E,eAAM,SAAS,EAAC,2BAA2B,YAAE,UAAU,CAAC,KAAK,CAAC,KAAK,GAAQ,IACvE,CACP,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,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);
|