@sentropic/design-system-vue 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 +34 -0
- package/dist/BarChart.d.ts.map +1 -1
- package/dist/BarChart.js +43 -10
- package/dist/BarChart.js.map +1 -1
- package/dist/styles.css +89 -6
- package/package.json +1 -1
package/dist/BarChart.d.ts
CHANGED
|
@@ -10,6 +10,22 @@ 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 with the bar's key (its `label`) when the user selects it. When
|
|
22
|
+
* provided, an ACCESSIBLE row of filter chips (real <button>s) is rendered
|
|
23
|
+
* OUTSIDE the aria-hidden SVG — that is the keyboard + screen-reader surface.
|
|
24
|
+
* The SVG bars themselves stay decorative (aria-hidden) and only offer a
|
|
25
|
+
* mouse click shortcut for sighted pointer users. When omitted the chart is
|
|
26
|
+
* purely presentational (no interactivity, unchanged).
|
|
27
|
+
*/
|
|
28
|
+
onSelect?: (key: string) => void;
|
|
13
29
|
class?: string;
|
|
14
30
|
};
|
|
15
31
|
export declare const BarChart: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
@@ -33,6 +49,14 @@ export declare const BarChart: import("vue").DefineComponent<import("vue").Extra
|
|
|
33
49
|
type: StringConstructor;
|
|
34
50
|
required: true;
|
|
35
51
|
};
|
|
52
|
+
selectedKeys: {
|
|
53
|
+
type: () => string[];
|
|
54
|
+
default: () => never[];
|
|
55
|
+
};
|
|
56
|
+
onSelect: {
|
|
57
|
+
type: () => (key: string) => void;
|
|
58
|
+
default: undefined;
|
|
59
|
+
};
|
|
36
60
|
class: {
|
|
37
61
|
type: StringConstructor;
|
|
38
62
|
default: undefined;
|
|
@@ -60,14 +84,24 @@ export declare const BarChart: import("vue").DefineComponent<import("vue").Extra
|
|
|
60
84
|
type: StringConstructor;
|
|
61
85
|
required: true;
|
|
62
86
|
};
|
|
87
|
+
selectedKeys: {
|
|
88
|
+
type: () => string[];
|
|
89
|
+
default: () => never[];
|
|
90
|
+
};
|
|
91
|
+
onSelect: {
|
|
92
|
+
type: () => (key: string) => void;
|
|
93
|
+
default: undefined;
|
|
94
|
+
};
|
|
63
95
|
class: {
|
|
64
96
|
type: StringConstructor;
|
|
65
97
|
default: undefined;
|
|
66
98
|
};
|
|
67
99
|
}>> & Readonly<{}>, {
|
|
68
100
|
class: string;
|
|
101
|
+
onSelect: (key: string) => void;
|
|
69
102
|
width: number;
|
|
70
103
|
height: number;
|
|
71
104
|
orientation: "horizontal" | "vertical";
|
|
105
|
+
selectedKeys: string[];
|
|
72
106
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
73
107
|
//# 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;;;;;;;OAOG;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;;;;;4EAuPtE,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 }) {
|
|
@@ -32,6 +34,11 @@ export const BarChart = defineComponent({
|
|
|
32
34
|
const orientation = props.orientation ?? "vertical";
|
|
33
35
|
const label = props.label;
|
|
34
36
|
const data = props.data;
|
|
37
|
+
// Selection (controlled): fast lookup + "is any bar selected" flag. Only
|
|
38
|
+
// when something is selected do we dim the non-selected bars.
|
|
39
|
+
const selectedSet = new Set(props.selectedKeys ?? []);
|
|
40
|
+
const hasSelection = selectedSet.size > 0;
|
|
41
|
+
const interactive = typeof props.onSelect === "function";
|
|
35
42
|
const values = data.map((d) => d.value);
|
|
36
43
|
const minRaw = Math.min(0, ...values);
|
|
37
44
|
const maxRaw = Math.max(0, ...values);
|
|
@@ -102,16 +109,41 @@ export const BarChart = defineComponent({
|
|
|
102
109
|
const categoryLabels = bars.map((bar) => orientation === "vertical"
|
|
103
110
|
? 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
111
|
: 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
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
112
|
+
// The bars live inside an aria-hidden SVG, so they are NEVER an accessible
|
|
113
|
+
// surface. When `onSelect` is provided they only carry a mouse click
|
|
114
|
+
// shortcut (cursor:pointer) for sighted pointer users — keyboard + screen
|
|
115
|
+
// readers use the filter-chip buttons rendered below, outside this SVG.
|
|
116
|
+
const barRects = bars.map((bar, i) => {
|
|
117
|
+
const isSelected = selectedSet.has(bar.datum.label);
|
|
118
|
+
return h("rect", {
|
|
119
|
+
key: `b${bar.datum.label}`,
|
|
120
|
+
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"),
|
|
121
|
+
x: bar.x,
|
|
122
|
+
y: bar.y,
|
|
123
|
+
width: bar.width,
|
|
124
|
+
height: bar.height,
|
|
125
|
+
rx: "2",
|
|
126
|
+
"data-chart-index": i,
|
|
127
|
+
onClick: interactive ? () => props.onSelect?.(bar.datum.label) : undefined,
|
|
128
|
+
});
|
|
129
|
+
});
|
|
130
|
+
// Accessible selection surface — real <button>s OUTSIDE the aria-hidden
|
|
131
|
+
// SVG. This is the keyboard + screen-reader path for filtering.
|
|
132
|
+
const filterGroup = interactive
|
|
133
|
+
? h("div", { class: "st-barChart__filters", role: "group", "aria-label": `Filtrer par ${label}` }, bars.map((bar) => {
|
|
134
|
+
const isSelected = selectedSet.has(bar.datum.label);
|
|
135
|
+
return h("button", {
|
|
136
|
+
key: `f${bar.datum.label}`,
|
|
137
|
+
type: "button",
|
|
138
|
+
class: classNames("st-barChart__filterChip", `st-barChart__filterChip--${bar.tone}`, isSelected && "st-barChart__filterChip--selected"),
|
|
139
|
+
"aria-pressed": isSelected ? "true" : "false",
|
|
140
|
+
onClick: () => props.onSelect?.(bar.datum.label),
|
|
141
|
+
}, [
|
|
142
|
+
h("span", { class: "st-barChart__filterSwatch", "aria-hidden": "true" }),
|
|
143
|
+
`${bar.datum.label}: ${bar.datum.value}`,
|
|
144
|
+
]);
|
|
145
|
+
}))
|
|
146
|
+
: null;
|
|
115
147
|
const hoveredBar = hoveredIndex.value !== null ? bars[hoveredIndex.value] : undefined;
|
|
116
148
|
return h("div", { ...attrs, class: classNames("st-barChart", props.class) }, [
|
|
117
149
|
h("div", {
|
|
@@ -136,6 +168,7 @@ export const BarChart = defineComponent({
|
|
|
136
168
|
...barRects,
|
|
137
169
|
]),
|
|
138
170
|
]),
|
|
171
|
+
filterGroup,
|
|
139
172
|
chartDataList(label, dataValueItems),
|
|
140
173
|
hoveredBar
|
|
141
174
|
? 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":"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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);
|