@sentropic/design-system-react 0.13.0 → 0.15.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/BulletChart.d.ts +17 -0
- package/dist/BulletChart.d.ts.map +1 -0
- package/dist/BulletChart.js +185 -0
- package/dist/BulletChart.js.map +1 -0
- package/dist/BumpChart.d.ts +17 -0
- package/dist/BumpChart.d.ts.map +1 -0
- package/dist/BumpChart.js +142 -0
- package/dist/BumpChart.js.map +1 -0
- package/dist/CalendarHeatmapChart.d.ts +14 -0
- package/dist/CalendarHeatmapChart.d.ts.map +1 -0
- package/dist/CalendarHeatmapChart.js +138 -0
- package/dist/CalendarHeatmapChart.js.map +1 -0
- package/dist/CandlestickChart.d.ts +17 -0
- package/dist/CandlestickChart.d.ts.map +1 -0
- package/dist/CandlestickChart.js +116 -0
- package/dist/CandlestickChart.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/MarimekkoChart.d.ts +21 -0
- package/dist/MarimekkoChart.d.ts.map +1 -0
- package/dist/MarimekkoChart.js +88 -0
- package/dist/MarimekkoChart.js.map +1 -0
- package/dist/ParallelCoordinatesChart.d.ts +19 -0
- package/dist/ParallelCoordinatesChart.d.ts.map +1 -0
- package/dist/ParallelCoordinatesChart.js +116 -0
- package/dist/ParallelCoordinatesChart.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 +24 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +12 -0
- package/dist/index.js.map +1 -1
- package/dist/styles.css +906 -0
- package/package.json +1 -1
|
@@ -0,0 +1,88 @@
|
|
|
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
|
+
import { contrastTextForTone } from "./chartContrast.js";
|
|
6
|
+
const TONES = [
|
|
7
|
+
"category1", "category2", "category3", "category4",
|
|
8
|
+
"category5", "category6", "category7", "category8",
|
|
9
|
+
];
|
|
10
|
+
const MARGIN = { top: 12, right: 16, bottom: 32, left: 8 };
|
|
11
|
+
export function MarimekkoChart({ data = [], label, width = 480, height = 300, className, ...rest }) {
|
|
12
|
+
const [hoveredKey, setHoveredKey] = React.useState(null);
|
|
13
|
+
const plotWidth = Math.max(width - MARGIN.left - MARGIN.right, 1);
|
|
14
|
+
const plotHeight = Math.max(height - MARGIN.top - MARGIN.bottom, 1);
|
|
15
|
+
// FIX: ignore (skip) non-finite or <=0 widths, NO Math.abs
|
|
16
|
+
const totalWidth = React.useMemo(() => {
|
|
17
|
+
const sum = data.reduce((acc, d) => {
|
|
18
|
+
const w = d.width;
|
|
19
|
+
return acc + (Number.isFinite(w) && w > 0 ? w : 0);
|
|
20
|
+
}, 0);
|
|
21
|
+
return sum > 0 ? sum : 1;
|
|
22
|
+
}, [data]);
|
|
23
|
+
const cells = React.useMemo(() => {
|
|
24
|
+
let xCursor = MARGIN.left;
|
|
25
|
+
const result = [];
|
|
26
|
+
for (const datum of data) {
|
|
27
|
+
const safeW = Number.isFinite(datum.width) && datum.width > 0 ? datum.width : 0;
|
|
28
|
+
// FIX: skip invalid columns (zero or non-finite width)
|
|
29
|
+
if (safeW <= 0)
|
|
30
|
+
continue;
|
|
31
|
+
const colW = (safeW / totalWidth) * plotWidth;
|
|
32
|
+
const colPct = safeW / totalWidth;
|
|
33
|
+
// FIX: ignore non-finite or <=0 segments (NO Math.abs, NO 0.5px floor)
|
|
34
|
+
const validSegs = datum.segments.filter((s) => Number.isFinite(s.value) && s.value > 0);
|
|
35
|
+
const segSum = validSegs.reduce((acc, s) => acc + s.value, 0);
|
|
36
|
+
const safeSum = segSum > 0 ? segSum : 1;
|
|
37
|
+
let yCursor = MARGIN.top;
|
|
38
|
+
for (let si = 0; si < validSegs.length; si++) {
|
|
39
|
+
const seg = validSegs[si];
|
|
40
|
+
const pct = seg.value / safeSum;
|
|
41
|
+
const segH = pct * plotHeight;
|
|
42
|
+
const tone = seg.tone ?? TONES[si % TONES.length];
|
|
43
|
+
result.push({
|
|
44
|
+
key: `${datum.label}-${seg.label}`,
|
|
45
|
+
catLabel: datum.label,
|
|
46
|
+
segLabel: seg.label,
|
|
47
|
+
tone,
|
|
48
|
+
x: xCursor,
|
|
49
|
+
y: yCursor,
|
|
50
|
+
// FIX: no min floor at 0.5px for zeros (they are filtered)
|
|
51
|
+
w: Math.max(colW - 1, 1),
|
|
52
|
+
h: Math.max(segH, 1),
|
|
53
|
+
cx: xCursor + colW / 2,
|
|
54
|
+
cy: yCursor + segH / 2,
|
|
55
|
+
pct,
|
|
56
|
+
colPct,
|
|
57
|
+
});
|
|
58
|
+
yCursor += segH;
|
|
59
|
+
}
|
|
60
|
+
xCursor += colW;
|
|
61
|
+
}
|
|
62
|
+
return result;
|
|
63
|
+
}, [data, totalWidth, plotWidth, plotHeight]);
|
|
64
|
+
// FIX a11y: SR includes column width share (colPct) in addition to segment %
|
|
65
|
+
const dataValueItems = cells.map((c) => `${c.catLabel}, ${c.segLabel}: ${Math.round(c.pct * 100)}% (colonne ${Math.round(c.colPct * 100)}%)`);
|
|
66
|
+
function handlePointerMove(event) {
|
|
67
|
+
const target = event.target;
|
|
68
|
+
if (!(target instanceof Element)) {
|
|
69
|
+
setHoveredKey(null);
|
|
70
|
+
return;
|
|
71
|
+
}
|
|
72
|
+
setHoveredKey(target.getAttribute("data-chart-key") ?? null);
|
|
73
|
+
}
|
|
74
|
+
const hoveredCell = hoveredKey !== null ? cells.find((c) => c.key === hoveredKey) ?? null : null;
|
|
75
|
+
return (_jsxs("div", { ...rest, className: classNames("st-marimekkoChart", className), children: [_jsx("div", { className: "st-marimekkoChart__visual", role: "img", "aria-label": label, onPointerMove: handlePointerMove, onPointerLeave: () => setHoveredKey(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-marimekkoChart__axis", x1: MARGIN.left, x2: width - MARGIN.right, y1: height - MARGIN.bottom, y2: height - MARGIN.bottom }), cells.map((cell) => (_jsxs(React.Fragment, { children: [_jsx("rect", { className: classNames("st-marimekkoChart__cell", `st-marimekkoChart__cell--${cell.tone}`, hoveredKey !== null && hoveredKey !== cell.key
|
|
76
|
+
? "st-marimekkoChart__cell--dim"
|
|
77
|
+
: undefined), x: cell.x, y: cell.y, width: cell.w, height: cell.h, "data-chart-key": cell.key }), cell.w > 28 && cell.h > 14 ? (_jsxs("text", { className: "st-marimekkoChart__cellLabel", x: cell.cx, y: cell.cy, textAnchor: "middle", dominantBaseline: "middle", style: { fill: contrastTextForTone(cell.tone) }, pointerEvents: "none", children: [Math.round(cell.pct * 100), "%"] })) : null] }, cell.key))), data.map((datum) => {
|
|
78
|
+
if (!Number.isFinite(datum.width) || datum.width <= 0)
|
|
79
|
+
return null;
|
|
80
|
+
const colW = (datum.width / totalWidth) * plotWidth;
|
|
81
|
+
const startX = cells.find((c) => c.catLabel === datum.label)?.x ?? MARGIN.left;
|
|
82
|
+
return (_jsx("text", { className: "st-marimekkoChart__catLabel", x: startX + colW / 2, y: height - MARGIN.bottom + 16, textAnchor: "middle", children: datum.label }, datum.label));
|
|
83
|
+
})] }) }), _jsx(ChartDataList, { label: label, items: dataValueItems }), hoveredCell !== null ? (_jsxs("div", { className: "st-marimekkoChart__tooltip", role: "presentation", style: {
|
|
84
|
+
left: `${(hoveredCell.cx / width) * 100}%`,
|
|
85
|
+
top: `${(hoveredCell.cy / height) * 100}%`,
|
|
86
|
+
}, children: [_jsxs("span", { className: "st-marimekkoChart__tooltipLabel", children: [hoveredCell.catLabel, " / ", hoveredCell.segLabel] }), _jsxs("span", { className: "st-marimekkoChart__tooltipValue", children: [Math.round(hoveredCell.pct * 100), "%"] })] })) : null] }));
|
|
87
|
+
}
|
|
88
|
+
//# sourceMappingURL=MarimekkoChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MarimekkoChart.js","sourceRoot":"","sources":["../src/MarimekkoChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export type ParallelCoordinatesChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
|
|
3
|
+
export type ParallelAxis = {
|
|
4
|
+
key: string;
|
|
5
|
+
label: string;
|
|
6
|
+
min?: number;
|
|
7
|
+
max?: number;
|
|
8
|
+
};
|
|
9
|
+
export type ParallelCoordinatesChartProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
|
|
10
|
+
axes: ParallelAxis[];
|
|
11
|
+
data: Record<string, unknown>[];
|
|
12
|
+
label: string;
|
|
13
|
+
tones?: ParallelCoordinatesChartTone[];
|
|
14
|
+
width?: number;
|
|
15
|
+
height?: number;
|
|
16
|
+
className?: string;
|
|
17
|
+
};
|
|
18
|
+
export declare function ParallelCoordinatesChart({ axes, data, label, tones, width, height, className, ...rest }: ParallelCoordinatesChartProps): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
//# sourceMappingURL=ParallelCoordinatesChart.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ParallelCoordinatesChart.d.ts","sourceRoot":"","sources":["../src/ParallelCoordinatesChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,4BAA4B,GACpC,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC,GAAG;IACpG,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IAEd,KAAK,CAAC,EAAE,4BAA4B,EAAE,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAqDF,wBAAgB,wBAAwB,CAAC,EACvC,IAAS,EACT,IAAS,EACT,KAAK,EACL,KAAK,EACL,KAAW,EACX,MAAY,EACZ,SAAS,EACT,GAAG,IAAI,EACR,EAAE,6BAA6B,2CAsJ/B"}
|
|
@@ -0,0 +1,116 @@
|
|
|
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", "category2", "category3", "category4",
|
|
7
|
+
"category5", "category6", "category7", "category8",
|
|
8
|
+
];
|
|
9
|
+
const MARGIN = { top: 32, right: 24, bottom: 16, left: 24 };
|
|
10
|
+
function formatTick(v) {
|
|
11
|
+
if (Math.abs(v) >= 1000)
|
|
12
|
+
return `${(v / 1000).toFixed(1)}k`;
|
|
13
|
+
if (Number.isInteger(v))
|
|
14
|
+
return String(v);
|
|
15
|
+
return v.toFixed(1);
|
|
16
|
+
}
|
|
17
|
+
// FIX: strict parse of a row value. Returns null if not finite → GAP in path.
|
|
18
|
+
function parseStrictFinite(raw) {
|
|
19
|
+
if (typeof raw === "number")
|
|
20
|
+
return Number.isFinite(raw) ? raw : null;
|
|
21
|
+
if (typeof raw === "string" && raw !== "") {
|
|
22
|
+
const n = Number(raw);
|
|
23
|
+
return Number.isFinite(n) ? n : null;
|
|
24
|
+
}
|
|
25
|
+
return null;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Builds an SVG path with GAP (M...L... M...) for null points.
|
|
29
|
+
* A segment containing a null point is not drawn.
|
|
30
|
+
*/
|
|
31
|
+
function buildPathWithGaps(points) {
|
|
32
|
+
const parts = [];
|
|
33
|
+
let segment = [];
|
|
34
|
+
for (const pt of points) {
|
|
35
|
+
if (pt === null) {
|
|
36
|
+
if (segment.length > 0) {
|
|
37
|
+
parts.push(segment.map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(2)},${p.y.toFixed(2)}`).join(" "));
|
|
38
|
+
segment = [];
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
else {
|
|
42
|
+
segment.push(pt);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
if (segment.length > 0) {
|
|
46
|
+
parts.push(segment.map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(2)},${p.y.toFixed(2)}`).join(" "));
|
|
47
|
+
}
|
|
48
|
+
return parts.join(" ");
|
|
49
|
+
}
|
|
50
|
+
export function ParallelCoordinatesChart({ axes = [], data = [], label, tones, width = 480, height = 300, className, ...rest }) {
|
|
51
|
+
const [hoveredIndex, setHoveredIndex] = React.useState(null);
|
|
52
|
+
const plotWidth = Math.max(width - MARGIN.left - MARGIN.right, 1);
|
|
53
|
+
const plotHeight = Math.max(height - MARGIN.top - MARGIN.bottom, 1);
|
|
54
|
+
// FIX: per-axis domains with strict parse, no silent Number() coercion
|
|
55
|
+
function axisDomain(axis) {
|
|
56
|
+
const vals = data
|
|
57
|
+
.map((d) => {
|
|
58
|
+
const raw = d[axis.key];
|
|
59
|
+
if (typeof raw === "number")
|
|
60
|
+
return Number.isFinite(raw) ? raw : null;
|
|
61
|
+
if (typeof raw === "string" && raw !== "") {
|
|
62
|
+
const n = Number(raw);
|
|
63
|
+
return Number.isFinite(n) ? n : null;
|
|
64
|
+
}
|
|
65
|
+
return null;
|
|
66
|
+
})
|
|
67
|
+
.filter((v) => v !== null);
|
|
68
|
+
const rawMin = vals.length > 0 ? Math.min(...vals) : 0;
|
|
69
|
+
const rawMax = vals.length > 0 ? Math.max(...vals) : 1;
|
|
70
|
+
const safeMax = rawMax === rawMin ? rawMin + 1 : rawMax;
|
|
71
|
+
return {
|
|
72
|
+
min: Number.isFinite(axis.min) ? axis.min : rawMin,
|
|
73
|
+
max: Number.isFinite(axis.max) ? axis.max : safeMax,
|
|
74
|
+
};
|
|
75
|
+
}
|
|
76
|
+
const axisX = axes.map((_, i) => MARGIN.left +
|
|
77
|
+
(axes.length <= 1 ? plotWidth / 2 : (i / (axes.length - 1)) * plotWidth));
|
|
78
|
+
const lines = React.useMemo(() => {
|
|
79
|
+
return data.map((row, ri) => {
|
|
80
|
+
const seriesTones = tones ?? [];
|
|
81
|
+
const rowTone = seriesTones[ri] ?? TONES[ri % TONES.length];
|
|
82
|
+
const points = axes.map((axis, ai) => {
|
|
83
|
+
const domain = axisDomain(axis);
|
|
84
|
+
// FIX: strict parse → null if invalid
|
|
85
|
+
const val = parseStrictFinite(row[axis.key]);
|
|
86
|
+
if (val === null)
|
|
87
|
+
return null; // GAP
|
|
88
|
+
// FIX: clamp to domain bounds
|
|
89
|
+
const clamped = Math.min(Math.max(val, domain.min), domain.max);
|
|
90
|
+
const t = domain.max === domain.min ? 0.5 : (clamped - domain.min) / (domain.max - domain.min);
|
|
91
|
+
return { x: axisX[ai], y: MARGIN.top + (1 - t) * plotHeight };
|
|
92
|
+
});
|
|
93
|
+
return { points, tone: rowTone, index: ri, row, path: buildPathWithGaps(points) };
|
|
94
|
+
});
|
|
95
|
+
}, [data, axes, tones, axisX, plotHeight]);
|
|
96
|
+
const dataValueItems = data.map((row) => axes.map((axis) => `${axis.label}: ${row[axis.key] ?? ""}`).join(", "));
|
|
97
|
+
function handlePointerMove(event) {
|
|
98
|
+
const target = event.target;
|
|
99
|
+
if (!(target instanceof Element)) {
|
|
100
|
+
setHoveredIndex(null);
|
|
101
|
+
return;
|
|
102
|
+
}
|
|
103
|
+
const idx = Number(target.getAttribute("data-chart-index"));
|
|
104
|
+
setHoveredIndex(Number.isInteger(idx) ? idx : null);
|
|
105
|
+
}
|
|
106
|
+
return (_jsxs("div", { ...rest, className: classNames("st-parallelCoordinatesChart", className), children: [_jsx("div", { className: "st-parallelCoordinatesChart__visual", role: "img", "aria-label": label, onPointerMove: handlePointerMove, onPointerLeave: () => setHoveredIndex(null), children: _jsxs("svg", { viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "xMidYMid meet", width: "100%", height: "100%", focusable: "false", "aria-hidden": "true", children: [lines.map((line) => (_jsx("path", { className: classNames("st-parallelCoordinatesChart__line", `st-parallelCoordinatesChart__line--${line.tone}`, hoveredIndex !== null && hoveredIndex !== line.index
|
|
107
|
+
? "st-parallelCoordinatesChart__line--dim"
|
|
108
|
+
: undefined, hoveredIndex === line.index
|
|
109
|
+
? "st-parallelCoordinatesChart__line--active"
|
|
110
|
+
: undefined), d: line.path, fill: "none", "data-chart-index": line.index }, line.index))), axes.map((axis, ai) => {
|
|
111
|
+
const domain = axisDomain(axis);
|
|
112
|
+
const ax = axisX[ai];
|
|
113
|
+
return (_jsxs(React.Fragment, { children: [_jsx("line", { className: "st-parallelCoordinatesChart__axis", x1: ax, x2: ax, y1: MARGIN.top, y2: MARGIN.top + plotHeight }), _jsx("text", { className: "st-parallelCoordinatesChart__axisLabel", x: ax, y: MARGIN.top - 10, textAnchor: "middle", children: axis.label }), _jsx("text", { className: "st-parallelCoordinatesChart__tickLabel", x: ax + 4, y: MARGIN.top + plotHeight, dominantBaseline: "auto", children: formatTick(domain.min) }), _jsx("text", { className: "st-parallelCoordinatesChart__tickLabel", x: ax + 4, y: MARGIN.top, dominantBaseline: "hanging", children: formatTick(domain.max) })] }, axis.key));
|
|
114
|
+
})] }) }), _jsx(ChartDataList, { label: label, items: dataValueItems })] }));
|
|
115
|
+
}
|
|
116
|
+
//# sourceMappingURL=ParallelCoordinatesChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ParallelCoordinatesChart.js","sourceRoot":"","sources":["../src/ParallelCoordinatesChart.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"}
|
|
@@ -0,0 +1,126 @@
|
|
|
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: 18, right: 26, bottom: 18, left: 26 };
|
|
6
|
+
const NODE_WIDTH = 14;
|
|
7
|
+
const TONES = [
|
|
8
|
+
"category1",
|
|
9
|
+
"category2",
|
|
10
|
+
"category3",
|
|
11
|
+
"category4",
|
|
12
|
+
"category5",
|
|
13
|
+
"category6",
|
|
14
|
+
"category7",
|
|
15
|
+
"category8",
|
|
16
|
+
];
|
|
17
|
+
function magnitude(value) {
|
|
18
|
+
return Number.isFinite(value) && value > 0 ? value : 0;
|
|
19
|
+
}
|
|
20
|
+
function buildDepths(nodes, links) {
|
|
21
|
+
const depths = new Map(nodes.map((node) => [node.id, 0]));
|
|
22
|
+
for (let pass = 0; pass < nodes.length; pass += 1) {
|
|
23
|
+
let changed = false;
|
|
24
|
+
for (const link of links) {
|
|
25
|
+
const sourceDepth = depths.get(link.source) ?? 0;
|
|
26
|
+
const targetDepth = depths.get(link.target) ?? 0;
|
|
27
|
+
if (sourceDepth + 1 > targetDepth) {
|
|
28
|
+
depths.set(link.target, sourceDepth + 1);
|
|
29
|
+
changed = true;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
if (!changed)
|
|
33
|
+
break;
|
|
34
|
+
}
|
|
35
|
+
return depths;
|
|
36
|
+
}
|
|
37
|
+
export function SankeyChart({ nodes, links, width = 560, height = 280, label, className, ...rest }) {
|
|
38
|
+
const [hoveredLinkIndex, setHoveredLinkIndex] = React.useState(null);
|
|
39
|
+
const nodeById = new Map(nodes.map((node) => [node.id, node]));
|
|
40
|
+
// Conservation de flux : hauteur nœud = max(Σ flux sortants, Σ flux entrants)
|
|
41
|
+
const valueOut = new Map();
|
|
42
|
+
const valueIn = new Map();
|
|
43
|
+
nodes.forEach((node) => {
|
|
44
|
+
valueOut.set(node.id, 0);
|
|
45
|
+
valueIn.set(node.id, 0);
|
|
46
|
+
});
|
|
47
|
+
links.forEach((link) => {
|
|
48
|
+
const v = magnitude(link.value);
|
|
49
|
+
valueOut.set(link.source, (valueOut.get(link.source) ?? 0) + v);
|
|
50
|
+
valueIn.set(link.target, (valueIn.get(link.target) ?? 0) + v);
|
|
51
|
+
});
|
|
52
|
+
const nodeValues = new Map();
|
|
53
|
+
nodes.forEach((node) => {
|
|
54
|
+
nodeValues.set(node.id, Math.max(valueOut.get(node.id) ?? 0, valueIn.get(node.id) ?? 0));
|
|
55
|
+
});
|
|
56
|
+
const depths = buildDepths(nodes, links);
|
|
57
|
+
const maxDepth = Math.max(0, ...nodes.map((node) => depths.get(node.id) ?? 0));
|
|
58
|
+
const plotWidth = Math.max(width - MARGIN.left - MARGIN.right - NODE_WIDTH, 1);
|
|
59
|
+
const plotHeight = Math.max(height - MARGIN.top - MARGIN.bottom, 1);
|
|
60
|
+
const maxNodeValue = Math.max(1, ...Array.from(nodeValues.values()));
|
|
61
|
+
const byDepth = new Map();
|
|
62
|
+
nodes.forEach((node) => {
|
|
63
|
+
const depth = depths.get(node.id) ?? 0;
|
|
64
|
+
const bucket = byDepth.get(depth) ?? [];
|
|
65
|
+
bucket.push(node);
|
|
66
|
+
byDepth.set(depth, bucket);
|
|
67
|
+
});
|
|
68
|
+
const positionedNodes = nodes.map((node, index) => {
|
|
69
|
+
const depth = depths.get(node.id) ?? 0;
|
|
70
|
+
const bucket = byDepth.get(depth) ?? [node];
|
|
71
|
+
const row = Math.max(0, bucket.findIndex((entry) => entry.id === node.id));
|
|
72
|
+
const slot = plotHeight / Math.max(bucket.length, 1);
|
|
73
|
+
const nodeHeight = Math.max(24, Math.min(slot * 0.72, 18 + ((nodeValues.get(node.id) ?? 0) / maxNodeValue) * 54));
|
|
74
|
+
const x = MARGIN.left + (maxDepth === 0 ? plotWidth / 2 : (plotWidth * depth) / maxDepth);
|
|
75
|
+
const y = MARGIN.top + slot * row + (slot - nodeHeight) / 2;
|
|
76
|
+
const tone = node.tone ?? TONES[index % TONES.length];
|
|
77
|
+
return {
|
|
78
|
+
node,
|
|
79
|
+
tone,
|
|
80
|
+
x,
|
|
81
|
+
y,
|
|
82
|
+
width: NODE_WIDTH,
|
|
83
|
+
height: nodeHeight,
|
|
84
|
+
centerY: y + nodeHeight / 2,
|
|
85
|
+
};
|
|
86
|
+
});
|
|
87
|
+
const positionedById = new Map(positionedNodes.map((pn) => [pn.node.id, pn]));
|
|
88
|
+
const maxLinkValue = Math.max(1, ...links.map((link) => magnitude(link.value)));
|
|
89
|
+
const positionedLinks = links.map((link, index) => {
|
|
90
|
+
const source = positionedById.get(link.source);
|
|
91
|
+
const target = positionedById.get(link.target);
|
|
92
|
+
const fallbackY = MARGIN.top + plotHeight / 2;
|
|
93
|
+
const x1 = (source?.x ?? MARGIN.left) + NODE_WIDTH;
|
|
94
|
+
const y1 = source?.centerY ?? fallbackY;
|
|
95
|
+
const x2 = target?.x ?? width - MARGIN.right;
|
|
96
|
+
const y2 = target?.centerY ?? fallbackY;
|
|
97
|
+
const c = Math.max(32, Math.abs(x2 - x1) * 0.5);
|
|
98
|
+
return {
|
|
99
|
+
link,
|
|
100
|
+
source,
|
|
101
|
+
target,
|
|
102
|
+
tone: link.tone ?? source?.tone ?? TONES[index % TONES.length],
|
|
103
|
+
strokeWidth: Math.max(2, (magnitude(link.value) / maxLinkValue) * 18),
|
|
104
|
+
path: `M ${x1} ${y1} C ${x1 + c} ${y1}, ${x2 - c} ${y2}, ${x2} ${y2}`,
|
|
105
|
+
midX: (x1 + x2) / 2,
|
|
106
|
+
midY: (y1 + y2) / 2,
|
|
107
|
+
};
|
|
108
|
+
});
|
|
109
|
+
const dataValueItems = links.map((link) => {
|
|
110
|
+
const sourceLabel = nodeById.get(link.source)?.label ?? link.source;
|
|
111
|
+
const targetLabel = nodeById.get(link.target)?.label ?? link.target;
|
|
112
|
+
return `${sourceLabel} -> ${targetLabel}: ${link.value}`;
|
|
113
|
+
});
|
|
114
|
+
function handleVisualPointerMove(event) {
|
|
115
|
+
const target = event.target;
|
|
116
|
+
if (!(target instanceof Element)) {
|
|
117
|
+
setHoveredLinkIndex(null);
|
|
118
|
+
return;
|
|
119
|
+
}
|
|
120
|
+
const index = Number(target.getAttribute("data-link-index"));
|
|
121
|
+
setHoveredLinkIndex(Number.isInteger(index) ? index : null);
|
|
122
|
+
}
|
|
123
|
+
const hoveredFlow = hoveredLinkIndex !== null ? positionedLinks[hoveredLinkIndex] : undefined;
|
|
124
|
+
return (_jsxs("div", { ...rest, className: classNames("st-sankeyChart", className), children: [_jsx("div", { className: "st-sankeyChart__visual", role: "img", "aria-label": label, onPointerMove: handleVisualPointerMove, onPointerLeave: () => setHoveredLinkIndex(null), children: _jsxs("svg", { viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "xMidYMid meet", width: "100%", height: "100%", focusable: "false", "aria-hidden": "true", children: [_jsx("g", { className: "st-sankeyChart__links", children: positionedLinks.map((flow, i) => (_jsx("path", { className: classNames("st-sankeyChart__link", `st-sankeyChart__link--${flow.tone}`, hoveredLinkIndex !== null && hoveredLinkIndex !== i ? "st-sankeyChart__link--dim" : undefined), d: flow.path, strokeWidth: flow.strokeWidth, "data-link-index": i }, `${flow.link.source}-${flow.link.target}-${i}`))) }), _jsx("g", { className: "st-sankeyChart__nodes", children: positionedNodes.map((entry) => (_jsxs(React.Fragment, { children: [_jsx("rect", { className: classNames("st-sankeyChart__node", `st-sankeyChart__node--${entry.tone}`), x: entry.x, y: entry.y, width: entry.width, height: entry.height, rx: "2" }), _jsx("text", { className: "st-sankeyChart__nodeLabel", x: entry.x + entry.width + 6, y: entry.centerY, dominantBaseline: "middle", children: entry.node.label })] }, entry.node.id))) })] }) }), _jsx(ChartDataList, { label: label, items: dataValueItems }), hoveredFlow ? (_jsxs("div", { className: "st-sankeyChart__tooltip", role: "presentation", style: { left: `${(hoveredFlow.midX / width) * 100}%`, top: `${(hoveredFlow.midY / height) * 100}%` }, children: [_jsxs("span", { className: "st-sankeyChart__tooltipLabel", children: [hoveredFlow.source?.node.label ?? hoveredFlow.link.source, " -> ", hoveredFlow.target?.node.label ?? hoveredFlow.link.target] }), _jsx("span", { className: "st-sankeyChart__tooltipValue", children: hoveredFlow.link.value })] })) : null] }));
|
|
125
|
+
}
|
|
126
|
+
//# sourceMappingURL=SankeyChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SankeyChart.js","sourceRoot":"","sources":["../src/SankeyChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export type SunburstChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
|
|
3
|
+
export type SunburstChartDatum = {
|
|
4
|
+
label: string;
|
|
5
|
+
value?: number;
|
|
6
|
+
tone?: SunburstChartTone;
|
|
7
|
+
children?: SunburstChartDatum[];
|
|
8
|
+
};
|
|
9
|
+
export type SunburstChartProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
|
|
10
|
+
data: SunburstChartDatum;
|
|
11
|
+
/** Largeur du viewBox (défaut 320). */
|
|
12
|
+
width?: number;
|
|
13
|
+
/** Hauteur du viewBox (défaut 320). */
|
|
14
|
+
height?: number;
|
|
15
|
+
legend?: boolean;
|
|
16
|
+
label: string;
|
|
17
|
+
className?: string;
|
|
18
|
+
};
|
|
19
|
+
export declare function SunburstChart({ data, width, height, legend, label, className, ...rest }: SunburstChartProps): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
//# sourceMappingURL=SunburstChart.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SunburstChart.d.ts","sourceRoot":"","sources":["../src/SunburstChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,MAAM,iBAAiB,GACzB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,QAAQ,CAAC,EAAE,kBAAkB,EAAE,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC,GAAG;IACzF,IAAI,EAAE,kBAAkB,CAAC;IACzB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA6DF,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAW,EACX,MAAY,EACZ,MAAc,EACd,KAAK,EACL,SAAS,EACT,GAAG,IAAI,EACR,EAAE,kBAAkB,2CAsKpB"}
|