@sentropic/design-system-react 0.16.0 → 0.17.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/BarChart.d.ts +18 -2
- package/dist/BarChart.d.ts.map +1 -1
- package/dist/BarChart.js +13 -2
- package/dist/BarChart.js.map +1 -1
- package/dist/styles.css +89 -6
- package/package.json +1 -1
package/dist/BarChart.d.ts
CHANGED
|
@@ -5,13 +5,29 @@ 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 with the bar's key (its `label`) when the user selects it. When
|
|
23
|
+
* provided, an ACCESSIBLE row of filter chips (real <button>s) is rendered
|
|
24
|
+
* OUTSIDE the aria-hidden SVG — that is the keyboard + screen-reader surface.
|
|
25
|
+
* The SVG bars themselves stay decorative (aria-hidden) and only offer a
|
|
26
|
+
* mouse click shortcut for sighted pointer users. When omitted the chart is
|
|
27
|
+
* purely presentational (no interactivity, unchanged).
|
|
28
|
+
*/
|
|
29
|
+
onSelect?: (key: string) => void;
|
|
14
30
|
className?: string;
|
|
15
31
|
};
|
|
16
|
-
export declare function BarChart({ data, width, height, orientation, label, className, ...rest }: BarChartProps): import("react/jsx-runtime").JSX.Element;
|
|
32
|
+
export declare function BarChart({ data, width, height, orientation, label, selectedKeys, onSelect, className, ...rest }: BarChartProps): import("react/jsx-runtime").JSX.Element;
|
|
17
33
|
//# 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;;;;;;;OAOG;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,2CA2Pf"}
|
package/dist/BarChart.js
CHANGED
|
@@ -3,8 +3,13 @@ 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";
|
|
8
13
|
const values = data.map((d) => d.value);
|
|
9
14
|
const minRaw = Math.min(0, ...values);
|
|
10
15
|
const maxRaw = Math.max(0, ...values);
|
|
@@ -86,6 +91,12 @@ export function BarChart({ data, width = 480, height = 240, orientation = "verti
|
|
|
86
91
|
const hoveredBar = hoveredIndex !== null ? bars[hoveredIndex] : undefined;
|
|
87
92
|
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
93
|
? 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) =>
|
|
94
|
+
: 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) => {
|
|
95
|
+
const isSelected = selectedSet.has(bar.datum.label);
|
|
96
|
+
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, onClick: interactive ? () => onSelect?.(bar.datum.label) : undefined }, bar.datum.label));
|
|
97
|
+
})] }) }), interactive ? (_jsx("div", { className: "st-barChart__filters", role: "group", "aria-label": `Filtrer par ${label}`, children: bars.map((bar) => {
|
|
98
|
+
const isSelected = selectedSet.has(bar.datum.label);
|
|
99
|
+
return (_jsxs("button", { type: "button", className: classNames("st-barChart__filterChip", `st-barChart__filterChip--${bar.tone}`, isSelected && "st-barChart__filterChip--selected"), "aria-pressed": isSelected, onClick: () => onSelect?.(bar.datum.label), children: [_jsx("span", { className: "st-barChart__filterSwatch", "aria-hidden": "true" }), `${bar.datum.label}: ${bar.datum.value}`] }, bar.datum.label));
|
|
100
|
+
}) })) : null, _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
101
|
}
|
|
91
102
|
//# 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":"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"}
|
package/dist/styles.css
CHANGED
|
@@ -394,17 +394,33 @@
|
|
|
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
|
-
.st-barChart__bar:hover
|
|
401
|
-
.st-barChart__bar:focus-visible {
|
|
400
|
+
.st-barChart__bar:hover {
|
|
402
401
|
opacity: 0.82;
|
|
403
402
|
}
|
|
404
403
|
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
404
|
+
/* Non-selected bars are dimmed while a selection is active. Floor kept high
|
|
405
|
+
(0.6) so the colour stays distinguishable — opacity is never the sole cue;
|
|
406
|
+
selection also adds a stroke (shape), and the values stay in the chips +
|
|
407
|
+
ChartDataList. */
|
|
408
|
+
.st-barChart__bar--dim {
|
|
409
|
+
opacity: 0.6;
|
|
410
|
+
}
|
|
411
|
+
/* Hover still lifts a dimmed bar so it stays explorable. */
|
|
412
|
+
.st-barChart__bar--dim:hover {
|
|
413
|
+
opacity: 0.8;
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
/* Selected bar: full opacity + a contrast-safe accent stroke (two signals,
|
|
417
|
+
never a font/size reflow). Outranks the dim rule. */
|
|
418
|
+
.st-barChart__bar--selected,
|
|
419
|
+
.st-barChart__bar--selected:hover {
|
|
420
|
+
opacity: 1;
|
|
421
|
+
stroke: var(--st-semantic-border-interactive, var(--st-semantic-action-primary));
|
|
422
|
+
stroke-width: 2;
|
|
423
|
+
paint-order: stroke;
|
|
408
424
|
}
|
|
409
425
|
|
|
410
426
|
.st-barChart__bar--category1 { fill: var(--st-semantic-data-category1); }
|
|
@@ -416,6 +432,68 @@
|
|
|
416
432
|
.st-barChart__bar--category7 { fill: var(--st-semantic-data-category7); }
|
|
417
433
|
.st-barChart__bar--category8 { fill: var(--st-semantic-data-category8); }
|
|
418
434
|
|
|
435
|
+
/* Accessible filter chips — keyboard + screen-reader selection surface,
|
|
436
|
+
rendered outside the aria-hidden SVG. */
|
|
437
|
+
.st-barChart__filters {
|
|
438
|
+
display: flex;
|
|
439
|
+
flex-wrap: wrap;
|
|
440
|
+
gap: var(--st-spacing-2, 0.5rem);
|
|
441
|
+
margin-top: var(--st-spacing-2, 0.5rem);
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
.st-barChart__filterChip {
|
|
445
|
+
align-items: center;
|
|
446
|
+
background: var(--st-semantic-surface-subtle, #f8fafc);
|
|
447
|
+
border: 1px solid var(--st-semantic-border-interactive, #cbd5e1);
|
|
448
|
+
border-radius: var(--st-radius-pill, 999px);
|
|
449
|
+
color: var(--st-semantic-text-secondary, #475569);
|
|
450
|
+
cursor: var(--st-cursor-interactive, pointer);
|
|
451
|
+
display: inline-flex;
|
|
452
|
+
font: inherit;
|
|
453
|
+
font-size: 0.8125rem;
|
|
454
|
+
font-weight: 500;
|
|
455
|
+
gap: var(--st-spacing-1, 0.25rem);
|
|
456
|
+
line-height: 1;
|
|
457
|
+
padding: 0.3125rem var(--st-spacing-2, 0.5rem);
|
|
458
|
+
transition:
|
|
459
|
+
background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
|
|
460
|
+
color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
|
|
461
|
+
border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
|
|
462
|
+
}
|
|
463
|
+
|
|
464
|
+
.st-barChart__filterChip:hover {
|
|
465
|
+
background: var(--st-semantic-surface-hover, #eef2f7);
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
.st-barChart__filterChip:focus-visible {
|
|
469
|
+
outline: 2px solid var(--st-semantic-border-interactive, var(--st-semantic-action-primary));
|
|
470
|
+
outline-offset: 2px;
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
/* Selected chip: solid accent fill + matching text — signalled by colour AND
|
|
474
|
+
by aria-pressed, never by opacity alone. */
|
|
475
|
+
.st-barChart__filterChip--selected {
|
|
476
|
+
background: var(--st-semantic-action-primary, #2563eb);
|
|
477
|
+
border-color: var(--st-semantic-action-primary, #2563eb);
|
|
478
|
+
color: var(--st-semantic-text-inverse, #fff);
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
/* Colour swatch echoing the bar tone, for quick visual mapping chip-to-bar. */
|
|
482
|
+
.st-barChart__filterSwatch {
|
|
483
|
+
border-radius: var(--st-radius-sm, 0.25rem);
|
|
484
|
+
display: inline-block;
|
|
485
|
+
height: 0.625rem;
|
|
486
|
+
width: 0.625rem;
|
|
487
|
+
}
|
|
488
|
+
.st-barChart__filterChip--category1 .st-barChart__filterSwatch { background: var(--st-semantic-data-category1); }
|
|
489
|
+
.st-barChart__filterChip--category2 .st-barChart__filterSwatch { background: var(--st-semantic-data-category2); }
|
|
490
|
+
.st-barChart__filterChip--category3 .st-barChart__filterSwatch { background: var(--st-semantic-data-category3); }
|
|
491
|
+
.st-barChart__filterChip--category4 .st-barChart__filterSwatch { background: var(--st-semantic-data-category4); }
|
|
492
|
+
.st-barChart__filterChip--category5 .st-barChart__filterSwatch { background: var(--st-semantic-data-category5); }
|
|
493
|
+
.st-barChart__filterChip--category6 .st-barChart__filterSwatch { background: var(--st-semantic-data-category6); }
|
|
494
|
+
.st-barChart__filterChip--category7 .st-barChart__filterSwatch { background: var(--st-semantic-data-category7); }
|
|
495
|
+
.st-barChart__filterChip--category8 .st-barChart__filterSwatch { background: var(--st-semantic-data-category8); }
|
|
496
|
+
|
|
419
497
|
.st-barChart__tooltip {
|
|
420
498
|
background: var(--st-component-barChart-tooltipBackground, var(--st-semantic-surface-inverse));
|
|
421
499
|
border-radius: var(--st-radius-sm, 0.25rem);
|
|
@@ -441,6 +519,11 @@
|
|
|
441
519
|
opacity: 0.85;
|
|
442
520
|
}
|
|
443
521
|
|
|
522
|
+
@media (prefers-reduced-motion: reduce) {
|
|
523
|
+
.st-barChart__bar,
|
|
524
|
+
.st-barChart__filterChip { transition: none; }
|
|
525
|
+
}
|
|
526
|
+
|
|
444
527
|
.st-breadcrumb {
|
|
445
528
|
font-size: var(--st-component-breadcrumb-fontSize, inherit);
|
|
446
529
|
letter-spacing: var(--st-component-breadcrumb-letterSpacing, normal);
|