@sentropic/design-system-react 0.13.0 → 0.14.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/BoxPlotChart.d.ts +21 -0
- package/dist/BoxPlotChart.d.ts.map +1 -0
- package/dist/BoxPlotChart.js +77 -0
- package/dist/BoxPlotChart.js.map +1 -0
- package/dist/HeatmapChart.d.ts +18 -0
- package/dist/HeatmapChart.d.ts.map +1 -0
- package/dist/HeatmapChart.js +79 -0
- package/dist/HeatmapChart.js.map +1 -0
- package/dist/HistogramChart.d.ts +17 -0
- package/dist/HistogramChart.d.ts.map +1 -0
- package/dist/HistogramChart.js +94 -0
- package/dist/HistogramChart.js.map +1 -0
- package/dist/RadarChart.d.ts +21 -0
- package/dist/RadarChart.d.ts.map +1 -0
- package/dist/RadarChart.js +66 -0
- package/dist/RadarChart.js.map +1 -0
- package/dist/SankeyChart.d.ts +23 -0
- package/dist/SankeyChart.d.ts.map +1 -0
- package/dist/SankeyChart.js +126 -0
- package/dist/SankeyChart.js.map +1 -0
- package/dist/SunburstChart.d.ts +20 -0
- package/dist/SunburstChart.d.ts.map +1 -0
- package/dist/SunburstChart.js +125 -0
- package/dist/SunburstChart.js.map +1 -0
- package/dist/chartContrast.d.ts +0 -4
- package/dist/chartContrast.d.ts.map +1 -1
- package/dist/chartContrast.js +4 -56
- package/dist/chartContrast.js.map +1 -1
- package/dist/index.d.ts +12 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +6 -0
- package/dist/index.js.map +1 -1
- package/dist/styles.css +401 -0
- package/package.json +1 -1
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export type BoxPlotChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
|
|
3
|
+
export type BoxPlotChartDatum = {
|
|
4
|
+
label: string;
|
|
5
|
+
min: number;
|
|
6
|
+
q1: number;
|
|
7
|
+
median: number;
|
|
8
|
+
q3: number;
|
|
9
|
+
max: number;
|
|
10
|
+
outliers?: number[];
|
|
11
|
+
tone?: BoxPlotChartTone;
|
|
12
|
+
};
|
|
13
|
+
export type BoxPlotChartProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
|
|
14
|
+
data: BoxPlotChartDatum[];
|
|
15
|
+
width?: number;
|
|
16
|
+
height?: number;
|
|
17
|
+
label: string;
|
|
18
|
+
className?: string;
|
|
19
|
+
};
|
|
20
|
+
export declare function BoxPlotChart({ data, width, height, label, className, ...rest }: BoxPlotChartProps): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
//# sourceMappingURL=BoxPlotChart.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BoxPlotChart.d.ts","sourceRoot":"","sources":["../src/BoxPlotChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,gBAAgB,GACxB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC,GAAG;IACxF,IAAI,EAAE,iBAAiB,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAyBF,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,KAAW,EAAE,MAAY,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,2CA6H7G"}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { classNames } from "./classNames.js";
|
|
4
|
+
import { ChartDataList } from "./chartScale.js";
|
|
5
|
+
const MARGIN = { top: 16, right: 20, bottom: 38, left: 48 };
|
|
6
|
+
const TONES = [
|
|
7
|
+
"category1",
|
|
8
|
+
"category2",
|
|
9
|
+
"category3",
|
|
10
|
+
"category4",
|
|
11
|
+
"category5",
|
|
12
|
+
"category6",
|
|
13
|
+
"category7",
|
|
14
|
+
"category8",
|
|
15
|
+
];
|
|
16
|
+
function formatNumber(value) {
|
|
17
|
+
if (!Number.isFinite(value))
|
|
18
|
+
return "0";
|
|
19
|
+
if (Number.isInteger(value))
|
|
20
|
+
return String(value);
|
|
21
|
+
return value.toFixed(2).replace(/\.?0+$/, "");
|
|
22
|
+
}
|
|
23
|
+
function scaleLinear(v, d0, d1, r0, r1) {
|
|
24
|
+
if (d1 === d0)
|
|
25
|
+
return r0;
|
|
26
|
+
return r0 + ((v - d0) * (r1 - r0)) / (d1 - d0);
|
|
27
|
+
}
|
|
28
|
+
export function BoxPlotChart({ data, width = 480, height = 260, label, className, ...rest }) {
|
|
29
|
+
const [hoveredIndex, setHoveredIndex] = React.useState(null);
|
|
30
|
+
const plotWidth = Math.max(width - MARGIN.left - MARGIN.right, 1);
|
|
31
|
+
const plotHeight = Math.max(height - MARGIN.top - MARGIN.bottom, 1);
|
|
32
|
+
const allValues = data
|
|
33
|
+
.flatMap((datum) => [datum.min, datum.q1, datum.median, datum.q3, datum.max, ...(datum.outliers ?? [])])
|
|
34
|
+
.filter(Number.isFinite);
|
|
35
|
+
const domainRaw = allValues.length === 0 ? { min: 0, max: 1 } : { min: Math.min(...allValues), max: Math.max(...allValues) };
|
|
36
|
+
const pad = (domainRaw.max - domainRaw.min) * 0.08 || Math.max(Math.abs(domainRaw.max), 1) * 0.1;
|
|
37
|
+
const domain = { min: domainRaw.min - pad, max: domainRaw.max + pad };
|
|
38
|
+
const band = data.length > 0 ? plotWidth / data.length : plotWidth;
|
|
39
|
+
const boxWidth = Math.min(54, Math.max(18, band * 0.44));
|
|
40
|
+
const plots = data.map((datum, index) => {
|
|
41
|
+
const cx = MARGIN.left + band * (index + 0.5);
|
|
42
|
+
const y = (value) => MARGIN.top + scaleLinear(value, domain.min, domain.max, plotHeight, 0);
|
|
43
|
+
const q1Y = y(datum.q1);
|
|
44
|
+
const q3Y = y(datum.q3);
|
|
45
|
+
return {
|
|
46
|
+
datum,
|
|
47
|
+
tone: datum.tone ?? TONES[index % TONES.length],
|
|
48
|
+
cx,
|
|
49
|
+
boxX: cx - boxWidth / 2,
|
|
50
|
+
boxY: Math.min(q1Y, q3Y),
|
|
51
|
+
boxWidth,
|
|
52
|
+
boxHeight: Math.max(Math.abs(q1Y - q3Y), 1),
|
|
53
|
+
medianY: y(datum.median),
|
|
54
|
+
minY: y(datum.min),
|
|
55
|
+
maxY: y(datum.max),
|
|
56
|
+
capWidth: boxWidth * 0.72,
|
|
57
|
+
outliers: (datum.outliers ?? []).filter(Number.isFinite).map((value) => ({ value, y: y(value) })),
|
|
58
|
+
};
|
|
59
|
+
});
|
|
60
|
+
const dataValueItems = data.map((datum) => {
|
|
61
|
+
const summary = `${datum.label}: min ${formatNumber(datum.min)}, q1 ${formatNumber(datum.q1)}, median ${formatNumber(datum.median)}, q3 ${formatNumber(datum.q3)}, max ${formatNumber(datum.max)}`;
|
|
62
|
+
const outliersStr = datum.outliers?.length ? `, outliers ${datum.outliers.map(formatNumber).join(", ")}` : "";
|
|
63
|
+
return `${summary}${outliersStr}`;
|
|
64
|
+
});
|
|
65
|
+
function handleVisualPointerMove(event) {
|
|
66
|
+
const target = event.target;
|
|
67
|
+
if (!(target instanceof Element)) {
|
|
68
|
+
setHoveredIndex(null);
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
71
|
+
const index = Number(target.getAttribute("data-chart-index"));
|
|
72
|
+
setHoveredIndex(Number.isInteger(index) ? index : null);
|
|
73
|
+
}
|
|
74
|
+
const hoveredPlot = hoveredIndex !== null ? plots[hoveredIndex] : undefined;
|
|
75
|
+
return (_jsxs("div", { ...rest, className: classNames("st-boxPlotChart", className), children: [_jsx("div", { className: "st-boxPlotChart__visual", role: "img", "aria-label": label, onPointerMove: handleVisualPointerMove, onPointerLeave: () => setHoveredIndex(null), children: _jsxs("svg", { viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "xMidYMid meet", width: "100%", height: "100%", focusable: "false", "aria-hidden": "true", children: [_jsx("line", { className: "st-boxPlotChart__axis", x1: MARGIN.left, x2: MARGIN.left, y1: MARGIN.top, y2: height - MARGIN.bottom }), _jsx("line", { className: "st-boxPlotChart__axis", x1: MARGIN.left, x2: width - MARGIN.right, y1: height - MARGIN.bottom, y2: height - MARGIN.bottom }), plots.map((plot, i) => (_jsxs(React.Fragment, { children: [_jsx("line", { className: "st-boxPlotChart__whisker", x1: plot.cx, x2: plot.cx, y1: plot.minY, y2: plot.maxY, "data-chart-index": i }), _jsx("line", { className: "st-boxPlotChart__whiskerCap", x1: plot.cx - plot.capWidth / 2, x2: plot.cx + plot.capWidth / 2, y1: plot.minY, y2: plot.minY, "data-chart-index": i }), _jsx("line", { className: "st-boxPlotChart__whiskerCap", x1: plot.cx - plot.capWidth / 2, x2: plot.cx + plot.capWidth / 2, y1: plot.maxY, y2: plot.maxY, "data-chart-index": i }), _jsx("rect", { className: classNames("st-boxPlotChart__box", `st-boxPlotChart__box--${plot.tone}`, hoveredIndex !== null && hoveredIndex !== i ? "st-boxPlotChart__box--dim" : undefined), x: plot.boxX, y: plot.boxY, width: plot.boxWidth, height: plot.boxHeight, "data-chart-index": i }), _jsx("line", { className: "st-boxPlotChart__median", x1: plot.boxX, x2: plot.boxX + plot.boxWidth, y1: plot.medianY, y2: plot.medianY, "data-chart-index": i }), plot.outliers.map((outlier) => (_jsx("circle", { className: "st-boxPlotChart__outlier", cx: plot.cx, cy: outlier.y, r: "3", "data-chart-index": i }, `${plot.datum.label}-${outlier.value}`))), _jsx("text", { className: "st-boxPlotChart__label", x: plot.cx, y: height - MARGIN.bottom + 16, textAnchor: "middle", children: plot.datum.label })] }, plot.datum.label)))] }) }), _jsx(ChartDataList, { label: label, items: dataValueItems }), hoveredPlot ? (_jsxs("div", { className: "st-boxPlotChart__tooltip", role: "presentation", style: { left: `${(hoveredPlot.cx / width) * 100}%`, top: `${(hoveredPlot.medianY / height) * 100}%` }, children: [_jsx("span", { className: "st-boxPlotChart__tooltipLabel", children: hoveredPlot.datum.label }), _jsxs("span", { className: "st-boxPlotChart__tooltipValue", children: ["Median ", formatNumber(hoveredPlot.datum.median)] })] })) : null] }));
|
|
76
|
+
}
|
|
77
|
+
//# sourceMappingURL=BoxPlotChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BoxPlotChart.js","sourceRoot":"","sources":["../src/BoxPlotChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export type HeatmapChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
|
|
3
|
+
export type HeatmapChartDatum = {
|
|
4
|
+
x: string;
|
|
5
|
+
y: string;
|
|
6
|
+
value: number;
|
|
7
|
+
tone?: HeatmapChartTone;
|
|
8
|
+
};
|
|
9
|
+
export type HeatmapChartProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
|
|
10
|
+
data: HeatmapChartDatum[];
|
|
11
|
+
width?: number;
|
|
12
|
+
height?: number;
|
|
13
|
+
legend?: boolean;
|
|
14
|
+
label: string;
|
|
15
|
+
className?: string;
|
|
16
|
+
};
|
|
17
|
+
export declare function HeatmapChart({ data, width, height, legend, label, className, ...rest }: HeatmapChartProps): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
//# sourceMappingURL=HeatmapChart.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HeatmapChart.d.ts","sourceRoot":"","sources":["../src/HeatmapChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,gBAAgB,GACxB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC,GAAG;IACxF,IAAI,EAAE,iBAAiB,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAgCF,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,KAAW,EACX,MAAY,EACZ,MAAc,EACd,KAAK,EACL,SAAS,EACT,GAAG,IAAI,EACR,EAAE,iBAAiB,2CAqJnB"}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { classNames } from "./classNames.js";
|
|
4
|
+
import { ChartDataList } from "./chartScale.js";
|
|
5
|
+
const MARGIN = { top: 28, right: 18, bottom: 44, left: 64 };
|
|
6
|
+
const TONES = [
|
|
7
|
+
"category1",
|
|
8
|
+
"category2",
|
|
9
|
+
"category3",
|
|
10
|
+
"category4",
|
|
11
|
+
"category5",
|
|
12
|
+
"category6",
|
|
13
|
+
"category7",
|
|
14
|
+
"category8",
|
|
15
|
+
];
|
|
16
|
+
function uniqueInOrder(values) {
|
|
17
|
+
const seen = new Set();
|
|
18
|
+
const out = [];
|
|
19
|
+
for (const value of values) {
|
|
20
|
+
if (!seen.has(value)) {
|
|
21
|
+
seen.add(value);
|
|
22
|
+
out.push(value);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
return out;
|
|
26
|
+
}
|
|
27
|
+
function toneForValue(value, min, max) {
|
|
28
|
+
if (!Number.isFinite(value) || max <= min)
|
|
29
|
+
return "category1";
|
|
30
|
+
const index = Math.max(0, Math.min(TONES.length - 1, Math.floor(((value - min) / (max - min)) * TONES.length)));
|
|
31
|
+
return TONES[index];
|
|
32
|
+
}
|
|
33
|
+
export function HeatmapChart({ data, width = 480, height = 300, legend = false, label, className, ...rest }) {
|
|
34
|
+
const [hoveredIndex, setHoveredIndex] = React.useState(null);
|
|
35
|
+
const xLabels = uniqueInOrder(data.map((d) => d.x));
|
|
36
|
+
const yLabels = uniqueInOrder(data.map((d) => d.y));
|
|
37
|
+
const plotWidth = Math.max(width - MARGIN.left - MARGIN.right, 1);
|
|
38
|
+
const plotHeight = Math.max(height - MARGIN.top - MARGIN.bottom, 1);
|
|
39
|
+
const cellWidth = xLabels.length > 0 ? plotWidth / xLabels.length : plotWidth;
|
|
40
|
+
const cellHeight = yLabels.length > 0 ? plotHeight / yLabels.length : plotHeight;
|
|
41
|
+
// Fix: filtrer NaN avant min/max
|
|
42
|
+
const finiteValues = data.map((d) => d.value).filter(Number.isFinite);
|
|
43
|
+
const minValue = finiteValues.length > 0 ? Math.min(...finiteValues) : 0;
|
|
44
|
+
const maxValue = finiteValues.length > 0 ? Math.max(...finiteValues) : 1;
|
|
45
|
+
const cells = data.map((datum, index) => {
|
|
46
|
+
const xIndex = Math.max(0, xLabels.indexOf(datum.x));
|
|
47
|
+
const yIndex = Math.max(0, yLabels.indexOf(datum.y));
|
|
48
|
+
const x = MARGIN.left + xIndex * cellWidth;
|
|
49
|
+
const y = MARGIN.top + yIndex * cellHeight;
|
|
50
|
+
return {
|
|
51
|
+
datum,
|
|
52
|
+
index,
|
|
53
|
+
tone: datum.tone ?? toneForValue(datum.value, minValue, maxValue),
|
|
54
|
+
x,
|
|
55
|
+
y,
|
|
56
|
+
width: Math.max(cellWidth - 2, 1),
|
|
57
|
+
height: Math.max(cellHeight - 2, 1),
|
|
58
|
+
cx: x + cellWidth / 2,
|
|
59
|
+
cy: y + cellHeight / 2,
|
|
60
|
+
};
|
|
61
|
+
});
|
|
62
|
+
const dataValueItems = data.map((d) => `${d.y}, ${d.x}: ${d.value}`);
|
|
63
|
+
const legendItems = TONES.map((tone, index) => ({
|
|
64
|
+
tone,
|
|
65
|
+
label: index === 0 ? "Low" : index === TONES.length - 1 ? "High" : "",
|
|
66
|
+
}));
|
|
67
|
+
function handleVisualPointerMove(event) {
|
|
68
|
+
const target = event.target;
|
|
69
|
+
if (!(target instanceof Element)) {
|
|
70
|
+
setHoveredIndex(null);
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
73
|
+
const index = Number(target.getAttribute("data-chart-index"));
|
|
74
|
+
setHoveredIndex(Number.isInteger(index) ? index : null);
|
|
75
|
+
}
|
|
76
|
+
const hoveredCell = hoveredIndex !== null ? cells[hoveredIndex] : undefined;
|
|
77
|
+
return (_jsxs("div", { ...rest, className: classNames("st-heatmapChart", className), children: [_jsx("div", { className: "st-heatmapChart__visual", role: "img", "aria-label": label, onPointerMove: handleVisualPointerMove, onPointerLeave: () => setHoveredIndex(null), children: _jsxs("svg", { viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "xMidYMid meet", width: "100%", height: "100%", focusable: "false", "aria-hidden": "true", children: [yLabels.map((yLabel, index) => (_jsx("text", { className: "st-heatmapChart__axisLabel st-heatmapChart__axisLabel--y", x: MARGIN.left - 8, y: MARGIN.top + (index + 0.5) * (plotHeight / Math.max(yLabels.length, 1)), textAnchor: "end", dominantBaseline: "middle", children: yLabel }, yLabel))), xLabels.map((xLabel, index) => (_jsx("text", { className: "st-heatmapChart__axisLabel st-heatmapChart__axisLabel--x", x: MARGIN.left + (index + 0.5) * (plotWidth / Math.max(xLabels.length, 1)), y: height - MARGIN.bottom + 20, textAnchor: "middle", children: xLabel }, xLabel))), _jsx("rect", { className: "st-heatmapChart__plot", x: MARGIN.left, y: MARGIN.top, width: plotWidth, height: plotHeight }), cells.map((cell, i) => (_jsx("rect", { className: classNames("st-heatmapChart__cell", `st-heatmapChart__cell--${cell.tone}`, hoveredIndex !== null && hoveredIndex !== i ? "st-heatmapChart__cell--dim" : undefined), x: cell.x, y: cell.y, width: cell.width, height: cell.height, rx: "2", "data-chart-index": i }, `${cell.datum.y}-${cell.datum.x}-${i}`)))] }) }), _jsx(ChartDataList, { label: label, items: dataValueItems }), hoveredCell ? (_jsxs("div", { className: "st-heatmapChart__tooltip", role: "presentation", style: { left: `${(hoveredCell.cx / width) * 100}%`, top: `${(hoveredCell.cy / height) * 100}%` }, children: [_jsxs("span", { className: "st-heatmapChart__tooltipLabel", children: [hoveredCell.datum.y, ", ", hoveredCell.datum.x] }), _jsx("span", { className: "st-heatmapChart__tooltipValue", children: hoveredCell.datum.value })] })) : null, legend ? (_jsxs("div", { className: "st-heatmapChart__legend", "aria-hidden": "true", children: [_jsx("span", { className: "st-heatmapChart__legendText", children: "Low" }), _jsx("span", { className: "st-heatmapChart__legendRamp", children: legendItems.map((item) => (_jsx("span", { className: `st-heatmapChart__legendSwatch st-heatmapChart__legendSwatch--${item.tone}` }, item.tone))) }), _jsx("span", { className: "st-heatmapChart__legendText", children: "High" })] })) : null] }));
|
|
78
|
+
}
|
|
79
|
+
//# sourceMappingURL=HeatmapChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HeatmapChart.js","sourceRoot":"","sources":["../src/HeatmapChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export type HistogramChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
|
|
3
|
+
export type HistogramChartDatum = {
|
|
4
|
+
label: string;
|
|
5
|
+
value: number;
|
|
6
|
+
tone?: HistogramChartTone;
|
|
7
|
+
};
|
|
8
|
+
export type HistogramChartProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
|
|
9
|
+
data: HistogramChartDatum[] | number[];
|
|
10
|
+
bins?: number;
|
|
11
|
+
width?: number;
|
|
12
|
+
height?: number;
|
|
13
|
+
label: string;
|
|
14
|
+
className?: string;
|
|
15
|
+
};
|
|
16
|
+
export declare function HistogramChart({ data, bins, width, height, label, className, ...rest }: HistogramChartProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
//# sourceMappingURL=HistogramChart.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HistogramChart.d.ts","sourceRoot":"","sources":["../src/HistogramChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,kBAAkB,GAC1B,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,kBAAkB,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC,GAAG;IAC1F,IAAI,EAAE,mBAAmB,EAAE,GAAG,MAAM,EAAE,CAAC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA4DF,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,IAAI,EACJ,KAAW,EACX,MAAY,EACZ,KAAK,EACL,SAAS,EACT,GAAG,IAAI,EACR,EAAE,mBAAmB,2CAsGrB"}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { classNames } from "./classNames.js";
|
|
4
|
+
import { ChartDataList } from "./chartScale.js";
|
|
5
|
+
const MARGIN = { top: 14, right: 16, bottom: 36, left: 44 };
|
|
6
|
+
const TONES = [
|
|
7
|
+
"category1",
|
|
8
|
+
"category2",
|
|
9
|
+
"category3",
|
|
10
|
+
"category4",
|
|
11
|
+
"category5",
|
|
12
|
+
"category6",
|
|
13
|
+
"category7",
|
|
14
|
+
"category8",
|
|
15
|
+
];
|
|
16
|
+
function isNumberArray(values) {
|
|
17
|
+
return values.every((value) => typeof value === "number");
|
|
18
|
+
}
|
|
19
|
+
function formatNumber(value) {
|
|
20
|
+
if (!Number.isFinite(value))
|
|
21
|
+
return "0";
|
|
22
|
+
if (Number.isInteger(value))
|
|
23
|
+
return String(value);
|
|
24
|
+
return value.toFixed(2).replace(/\.?0+$/, "");
|
|
25
|
+
}
|
|
26
|
+
function buildNumericBins(values, count) {
|
|
27
|
+
const finite = values.filter(Number.isFinite);
|
|
28
|
+
if (finite.length === 0)
|
|
29
|
+
return [];
|
|
30
|
+
const binCount = Math.max(1, Math.floor(count));
|
|
31
|
+
const min = Math.min(...finite);
|
|
32
|
+
const max = Math.max(...finite);
|
|
33
|
+
const step = max === min ? 1 : (max - min) / binCount;
|
|
34
|
+
const out = Array.from({ length: binCount }, (_, index) => {
|
|
35
|
+
const start = min + step * index;
|
|
36
|
+
const end = index === binCount - 1 ? max : min + step * (index + 1);
|
|
37
|
+
return {
|
|
38
|
+
label: `${formatNumber(start)}-${formatNumber(end)}`,
|
|
39
|
+
value: 0,
|
|
40
|
+
tone: TONES[index % TONES.length],
|
|
41
|
+
};
|
|
42
|
+
});
|
|
43
|
+
for (const value of finite) {
|
|
44
|
+
const index = value === max ? binCount - 1 : Math.max(0, Math.min(binCount - 1, Math.floor((value - min) / step)));
|
|
45
|
+
out[index].value += 1;
|
|
46
|
+
}
|
|
47
|
+
return out;
|
|
48
|
+
}
|
|
49
|
+
function scaleLinear(v, d0, d1, r0, r1) {
|
|
50
|
+
if (d1 === d0)
|
|
51
|
+
return r0;
|
|
52
|
+
return r0 + ((v - d0) * (r1 - r0)) / (d1 - d0);
|
|
53
|
+
}
|
|
54
|
+
export function HistogramChart({ data, bins, width = 480, height = 240, label, className, ...rest }) {
|
|
55
|
+
const [hoveredIndex, setHoveredIndex] = React.useState(null);
|
|
56
|
+
const plotWidth = Math.max(width - MARGIN.left - MARGIN.right, 1);
|
|
57
|
+
const plotHeight = Math.max(height - MARGIN.top - MARGIN.bottom, 1);
|
|
58
|
+
// bins = 10 fixe par défaut (pas ceil(√n)) pour parité Svelte/React/Vue
|
|
59
|
+
const normalizedBins = isNumberArray(data)
|
|
60
|
+
? buildNumericBins(data, bins ?? 10)
|
|
61
|
+
: data.map((datum, index) => ({
|
|
62
|
+
label: datum.label,
|
|
63
|
+
value: Number.isFinite(datum.value) ? datum.value : 0,
|
|
64
|
+
tone: datum.tone ?? TONES[index % TONES.length],
|
|
65
|
+
}));
|
|
66
|
+
const maxValue = Math.max(0, ...normalizedBins.map((bin) => bin.value));
|
|
67
|
+
const safeMax = maxValue > 0 ? maxValue : 1;
|
|
68
|
+
const band = normalizedBins.length > 0 ? plotWidth / normalizedBins.length : plotWidth;
|
|
69
|
+
const barWidth = Math.max(band * 0.68, 1);
|
|
70
|
+
const bars = normalizedBins.map((bin, index) => {
|
|
71
|
+
const h = scaleLinear(bin.value, 0, safeMax, 0, plotHeight);
|
|
72
|
+
return {
|
|
73
|
+
bin,
|
|
74
|
+
x: MARGIN.left + band * index + (band - barWidth) / 2,
|
|
75
|
+
y: MARGIN.top + plotHeight - h,
|
|
76
|
+
width: barWidth,
|
|
77
|
+
height: Math.max(h, 0.5),
|
|
78
|
+
labelX: MARGIN.left + band * (index + 0.5),
|
|
79
|
+
};
|
|
80
|
+
});
|
|
81
|
+
const dataValueItems = normalizedBins.map((bin) => `${bin.label}: ${bin.value}`);
|
|
82
|
+
function handleVisualPointerMove(event) {
|
|
83
|
+
const target = event.target;
|
|
84
|
+
if (!(target instanceof Element)) {
|
|
85
|
+
setHoveredIndex(null);
|
|
86
|
+
return;
|
|
87
|
+
}
|
|
88
|
+
const index = Number(target.getAttribute("data-chart-index"));
|
|
89
|
+
setHoveredIndex(Number.isInteger(index) ? index : null);
|
|
90
|
+
}
|
|
91
|
+
const hoveredBar = hoveredIndex !== null ? bars[hoveredIndex] : undefined;
|
|
92
|
+
return (_jsxs("div", { ...rest, className: classNames("st-histogramChart", className), children: [_jsx("div", { className: "st-histogramChart__visual", role: "img", "aria-label": label, onPointerMove: handleVisualPointerMove, onPointerLeave: () => setHoveredIndex(null), children: _jsxs("svg", { viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "xMidYMid meet", width: "100%", height: "100%", focusable: "false", "aria-hidden": "true", children: [_jsx("line", { className: "st-histogramChart__axis", x1: MARGIN.left, x2: MARGIN.left, y1: MARGIN.top, y2: height - MARGIN.bottom }), _jsx("line", { className: "st-histogramChart__axis", x1: MARGIN.left, x2: width - MARGIN.right, y1: height - MARGIN.bottom, y2: height - MARGIN.bottom }), bars.map((bar, i) => (_jsxs(React.Fragment, { children: [_jsx("rect", { className: classNames("st-histogramChart__bar", `st-histogramChart__bar--${bar.bin.tone}`, hoveredIndex !== null && hoveredIndex !== i ? "st-histogramChart__bar--dim" : undefined), x: bar.x, y: bar.y, width: bar.width, height: bar.height, "data-chart-index": i }), _jsx("text", { className: "st-histogramChart__label", x: bar.labelX, y: height - MARGIN.bottom + 16, textAnchor: "middle", children: bar.bin.label })] }, `${bar.bin.label}-${i}`)))] }) }), _jsx(ChartDataList, { label: label, items: dataValueItems }), hoveredBar ? (_jsxs("div", { className: "st-histogramChart__tooltip", role: "presentation", style: { left: `${(hoveredBar.labelX / width) * 100}%`, top: `${(hoveredBar.y / height) * 100}%` }, children: [_jsx("span", { className: "st-histogramChart__tooltipLabel", children: hoveredBar.bin.label }), _jsx("span", { className: "st-histogramChart__tooltipValue", children: hoveredBar.bin.value })] })) : null] }));
|
|
93
|
+
}
|
|
94
|
+
//# sourceMappingURL=HistogramChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HistogramChart.js","sourceRoot":"","sources":["../src/HistogramChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export type RadarChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
|
|
3
|
+
export type RadarChartSeries = {
|
|
4
|
+
label: string;
|
|
5
|
+
values: number[];
|
|
6
|
+
tone?: RadarChartTone;
|
|
7
|
+
};
|
|
8
|
+
export type RadarChartProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
|
|
9
|
+
axes: string[];
|
|
10
|
+
series: RadarChartSeries[];
|
|
11
|
+
/** Valeur plafond du domaine. PAS de plancher arbitraire à 100 - s'adapte aux données. */
|
|
12
|
+
maxValue?: number;
|
|
13
|
+
levels?: number;
|
|
14
|
+
legend?: boolean;
|
|
15
|
+
width?: number;
|
|
16
|
+
height?: number;
|
|
17
|
+
label: string;
|
|
18
|
+
className?: string;
|
|
19
|
+
};
|
|
20
|
+
export declare function RadarChart({ axes, series, maxValue, levels, legend, width, height, label, className, ...rest }: RadarChartProps): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
//# sourceMappingURL=RadarChart.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadarChart.d.ts","sourceRoot":"","sources":["../src/RadarChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,cAAc,GACtB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC,GAAG;IACtF,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAiBF,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,MAAU,EACV,MAAc,EACd,KAAW,EACX,MAAY,EACZ,KAAK,EACL,SAAS,EACT,GAAG,IAAI,EACR,EAAE,eAAe,2CA2IjB"}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { classNames } from "./classNames.js";
|
|
4
|
+
import { ChartDataList } from "./chartScale.js";
|
|
5
|
+
const TONES = [
|
|
6
|
+
"category1",
|
|
7
|
+
"category2",
|
|
8
|
+
"category3",
|
|
9
|
+
"category4",
|
|
10
|
+
"category5",
|
|
11
|
+
"category6",
|
|
12
|
+
"category7",
|
|
13
|
+
"category8",
|
|
14
|
+
];
|
|
15
|
+
function polarPoint(cx, cy, radius, angle) {
|
|
16
|
+
return { x: cx + radius * Math.cos(angle), y: cy + radius * Math.sin(angle) };
|
|
17
|
+
}
|
|
18
|
+
export function RadarChart({ axes, series, maxValue, levels = 4, legend = false, width = 360, height = 320, label, className, ...rest }) {
|
|
19
|
+
const [hoveredIndex, setHoveredIndex] = React.useState(null);
|
|
20
|
+
const cx = width / 2;
|
|
21
|
+
const cy = height / 2;
|
|
22
|
+
const radius = Math.max(Math.min(width, height) / 2 - 42, 1);
|
|
23
|
+
const levelCount = Math.max(1, Math.floor(levels));
|
|
24
|
+
// Pas de plancher Math.max(100, …) - l'échelle s'adapte aux données
|
|
25
|
+
const allValues = series.flatMap((s) => s.values).filter(Number.isFinite);
|
|
26
|
+
const domainMax = Number.isFinite(maxValue) && (maxValue ?? 0) > 0 ? maxValue : Math.max(1, ...allValues);
|
|
27
|
+
const angles = axes.map((_, index) => -Math.PI / 2 + (Math.PI * 2 * index) / Math.max(axes.length, 1));
|
|
28
|
+
const rings = Array.from({ length: levelCount }, (_, index) => {
|
|
29
|
+
const ringRadius = (radius * (index + 1)) / levelCount;
|
|
30
|
+
return angles.map((angle) => polarPoint(cx, cy, ringRadius, angle)).map((p) => `${p.x},${p.y}`).join(" ");
|
|
31
|
+
});
|
|
32
|
+
const polygons = series.map((entry, seriesIndex) => {
|
|
33
|
+
const tone = entry.tone ?? TONES[seriesIndex % TONES.length];
|
|
34
|
+
const points = axes.map((_, axisIndex) => {
|
|
35
|
+
const value = Math.max(0, entry.values[axisIndex] ?? 0);
|
|
36
|
+
const scaled = Math.min(value / domainMax, 1) * radius;
|
|
37
|
+
return polarPoint(cx, cy, scaled, angles[axisIndex]);
|
|
38
|
+
});
|
|
39
|
+
return {
|
|
40
|
+
entry,
|
|
41
|
+
tone,
|
|
42
|
+
points,
|
|
43
|
+
pointString: points.map((p) => `${p.x},${p.y}`).join(" "),
|
|
44
|
+
};
|
|
45
|
+
});
|
|
46
|
+
const dataValueItems = series.flatMap((entry) => axes.map((axis, axisIndex) => `${entry.label}, ${axis}: ${entry.values[axisIndex] ?? 0}`));
|
|
47
|
+
function handleVisualPointerMove(event) {
|
|
48
|
+
const target = event.target;
|
|
49
|
+
if (!(target instanceof Element)) {
|
|
50
|
+
setHoveredIndex(null);
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
53
|
+
const index = Number(target.getAttribute("data-chart-index"));
|
|
54
|
+
setHoveredIndex(Number.isInteger(index) ? index : null);
|
|
55
|
+
}
|
|
56
|
+
const hoveredPolygon = hoveredIndex !== null ? polygons[hoveredIndex] : undefined;
|
|
57
|
+
return (_jsxs("div", { ...rest, className: classNames("st-radarChart", className), children: [_jsx("div", { className: "st-radarChart__visual", role: "img", "aria-label": label, onPointerMove: handleVisualPointerMove, onPointerLeave: () => setHoveredIndex(null), children: _jsxs("svg", { viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "xMidYMid meet", width: "100%", height: "100%", focusable: "false", "aria-hidden": "true", children: [rings.map((ring, i) => (_jsx("polygon", { className: "st-radarChart__ring", points: ring }, i))), axes.map((axis, index) => {
|
|
58
|
+
const end = polarPoint(cx, cy, radius, angles[index]);
|
|
59
|
+
const labelPoint = polarPoint(cx, cy, radius + 22, angles[index]);
|
|
60
|
+
return (_jsxs(React.Fragment, { children: [_jsx("line", { className: "st-radarChart__axis", x1: cx, y1: cy, x2: end.x, y2: end.y }), _jsx("text", { className: "st-radarChart__axisLabel", x: labelPoint.x, y: labelPoint.y, textAnchor: "middle", dominantBaseline: "middle", children: axis })] }, axis));
|
|
61
|
+
}), polygons.map((polygon, i) => (_jsxs(React.Fragment, { children: [_jsx("polygon", { className: classNames("st-radarChart__polygon", `st-radarChart__polygon--${polygon.tone}`, hoveredIndex !== null && hoveredIndex !== i ? "st-radarChart__polygon--dim" : undefined), points: polygon.pointString, "data-chart-index": i }), polygon.points.map((point, pointIndex) => (_jsx("circle", { className: classNames("st-radarChart__point", `st-radarChart__point--${polygon.tone}`), cx: point.x, cy: point.y, r: "3", "data-chart-index": i }, `${polygon.entry.label}-${pointIndex}`)))] }, polygon.entry.label)))] }) }), _jsx(ChartDataList, { label: label, items: dataValueItems }), hoveredPolygon ? (_jsx("div", { className: "st-radarChart__tooltip", role: "presentation", children: _jsx("span", { className: "st-radarChart__tooltipLabel", children: hoveredPolygon.entry.label }) })) : null, legend && series.length > 0 ? (_jsx("ul", { className: "st-radarChart__legend", "aria-hidden": "true", children: series.map((item, index) => {
|
|
62
|
+
const tone = item.tone ?? TONES[index % TONES.length];
|
|
63
|
+
return (_jsxs("li", { className: "st-radarChart__legendItem", children: [_jsx("span", { className: `st-radarChart__legendSwatch st-radarChart__legendSwatch--${tone}` }), item.label] }, item.label));
|
|
64
|
+
}) })) : null] }));
|
|
65
|
+
}
|
|
66
|
+
//# sourceMappingURL=RadarChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadarChart.js","sourceRoot":"","sources":["../src/RadarChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export type SankeyChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
|
|
3
|
+
export type SankeyChartNode = {
|
|
4
|
+
id: string;
|
|
5
|
+
label: string;
|
|
6
|
+
tone?: SankeyChartTone;
|
|
7
|
+
};
|
|
8
|
+
export type SankeyChartLink = {
|
|
9
|
+
source: string;
|
|
10
|
+
target: string;
|
|
11
|
+
value: number;
|
|
12
|
+
tone?: SankeyChartTone;
|
|
13
|
+
};
|
|
14
|
+
export type SankeyChartProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
|
|
15
|
+
nodes: SankeyChartNode[];
|
|
16
|
+
links: SankeyChartLink[];
|
|
17
|
+
width?: number;
|
|
18
|
+
height?: number;
|
|
19
|
+
label: string;
|
|
20
|
+
className?: string;
|
|
21
|
+
};
|
|
22
|
+
export declare function SankeyChart({ nodes, links, width, height, label, className, ...rest }: SankeyChartProps): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
//# sourceMappingURL=SankeyChart.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SankeyChart.d.ts","sourceRoot":"","sources":["../src/SankeyChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,eAAe,GACvB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC,GAAG;IACvF,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAoCF,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAW,EAAE,MAAY,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,2CA6KnH"}
|