@mantine/charts 9.1.1 → 9.2.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/cjs/SankeyChart/SankeyChart.cjs +202 -0
- package/cjs/SankeyChart/SankeyChart.cjs.map +1 -0
- package/cjs/SankeyChart/SankeyChart.module.cjs +7 -0
- package/cjs/SankeyChart/SankeyChart.module.cjs.map +1 -0
- package/cjs/index.cjs +2 -0
- package/esm/SankeyChart/SankeyChart.mjs +200 -0
- package/esm/SankeyChart/SankeyChart.mjs.map +1 -0
- package/esm/SankeyChart/SankeyChart.module.mjs +7 -0
- package/esm/SankeyChart/SankeyChart.module.mjs.map +1 -0
- package/esm/index.mjs +2 -1
- package/lib/SankeyChart/SankeyChart.d.ts +71 -0
- package/lib/SankeyChart/index.d.ts +12 -0
- package/lib/index.d.mts +1 -0
- package/lib/index.d.ts +1 -0
- package/package.json +3 -3
- package/styles.css +16 -0
- package/styles.layer.css +16 -0
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
|
|
3
|
+
const require_ChartTooltip = require("../ChartTooltip/ChartTooltip.cjs");
|
|
4
|
+
const require_SankeyChart_module = require("./SankeyChart.module.cjs");
|
|
5
|
+
let _mantine_core = require("@mantine/core");
|
|
6
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
7
|
+
let react = require("react");
|
|
8
|
+
react = require_runtime.__toESM(react);
|
|
9
|
+
let recharts = require("recharts");
|
|
10
|
+
//#region packages/@mantine/charts/src/SankeyChart/SankeyChart.tsx
|
|
11
|
+
const defaultProps = {
|
|
12
|
+
height: 300,
|
|
13
|
+
nodeWidth: 10,
|
|
14
|
+
nodePadding: 10,
|
|
15
|
+
linkCurvature: .5,
|
|
16
|
+
iterations: 32,
|
|
17
|
+
linkOpacity: .4,
|
|
18
|
+
withTooltip: true,
|
|
19
|
+
tooltipAnimationDuration: 0
|
|
20
|
+
};
|
|
21
|
+
const varsResolver = (0, _mantine_core.createVarsResolver)((theme, { nodeColor, linkColor, textColor, height }) => ({ root: {
|
|
22
|
+
"--chart-node-color": nodeColor ? (0, _mantine_core.getThemeColor)(nodeColor, theme) : void 0,
|
|
23
|
+
"--chart-link-color": linkColor ? (0, _mantine_core.getThemeColor)(linkColor, theme) : void 0,
|
|
24
|
+
"--chart-text-color": textColor ? (0, _mantine_core.getThemeColor)(textColor, theme) : void 0,
|
|
25
|
+
"--chart-height": (0, _mantine_core.rem)(height)
|
|
26
|
+
} }));
|
|
27
|
+
const DEFAULT_COLORS = [
|
|
28
|
+
"var(--mantine-color-blue-filled)",
|
|
29
|
+
"var(--mantine-color-cyan-filled)",
|
|
30
|
+
"var(--mantine-color-teal-filled)",
|
|
31
|
+
"var(--mantine-color-green-filled)",
|
|
32
|
+
"var(--mantine-color-lime-filled)",
|
|
33
|
+
"var(--mantine-color-yellow-filled)",
|
|
34
|
+
"var(--mantine-color-orange-filled)",
|
|
35
|
+
"var(--mantine-color-red-filled)",
|
|
36
|
+
"var(--mantine-color-pink-filled)",
|
|
37
|
+
"var(--mantine-color-grape-filled)",
|
|
38
|
+
"var(--mantine-color-violet-filled)",
|
|
39
|
+
"var(--mantine-color-indigo-filled)"
|
|
40
|
+
];
|
|
41
|
+
function SankeyNodeContent({ x, y, width, height, index, payload, resolvedNodeColors, resolvedDefaultColors, valueFormatter }) {
|
|
42
|
+
const fill = resolvedNodeColors[index] || `var(--chart-node-color, ${resolvedDefaultColors[index % resolvedDefaultColors.length]})`;
|
|
43
|
+
const isLeaf = !payload.targetNodes || payload.targetNodes.length === 0;
|
|
44
|
+
const labelX = isLeaf ? x - 6 : x + width + 6;
|
|
45
|
+
const textAnchor = isLeaf ? "end" : "start";
|
|
46
|
+
const formattedValue = valueFormatter ? valueFormatter(payload.value) : payload.value;
|
|
47
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
|
|
48
|
+
x,
|
|
49
|
+
y,
|
|
50
|
+
width,
|
|
51
|
+
height,
|
|
52
|
+
fill,
|
|
53
|
+
stroke: "none"
|
|
54
|
+
}), height >= 28 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
|
|
55
|
+
x: labelX,
|
|
56
|
+
y: y + height / 2 - 7,
|
|
57
|
+
textAnchor,
|
|
58
|
+
dominantBaseline: "central",
|
|
59
|
+
fill: "var(--chart-text-color, var(--mantine-color-text))",
|
|
60
|
+
fontSize: 12,
|
|
61
|
+
fontFamily: "var(--mantine-font-family)",
|
|
62
|
+
children: payload.name
|
|
63
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
|
|
64
|
+
x: labelX,
|
|
65
|
+
y: y + height / 2 + 7,
|
|
66
|
+
textAnchor,
|
|
67
|
+
dominantBaseline: "central",
|
|
68
|
+
fill: "var(--chart-text-color, var(--mantine-color-text))",
|
|
69
|
+
fontSize: 12,
|
|
70
|
+
fontFamily: "var(--mantine-font-family)",
|
|
71
|
+
opacity: .8,
|
|
72
|
+
children: formattedValue
|
|
73
|
+
})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("text", {
|
|
74
|
+
x: labelX,
|
|
75
|
+
y: y + height / 2,
|
|
76
|
+
textAnchor,
|
|
77
|
+
dominantBaseline: "central",
|
|
78
|
+
fill: "var(--chart-text-color, var(--mantine-color-text))",
|
|
79
|
+
fontSize: 12,
|
|
80
|
+
fontFamily: "var(--mantine-font-family)",
|
|
81
|
+
children: [
|
|
82
|
+
payload.name,
|
|
83
|
+
" ",
|
|
84
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("tspan", {
|
|
85
|
+
opacity: .8,
|
|
86
|
+
children: formattedValue
|
|
87
|
+
})
|
|
88
|
+
]
|
|
89
|
+
})] });
|
|
90
|
+
}
|
|
91
|
+
function SankeyLinkContent({ sourceX, targetX, sourceY, targetY, sourceControlX, targetControlX, linkWidth, sourceResolvedColor, linkOpacity }) {
|
|
92
|
+
const fill = sourceResolvedColor || "var(--chart-link-color, var(--mantine-color-gray-4))";
|
|
93
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
94
|
+
d: `
|
|
95
|
+
M${sourceX},${sourceY + linkWidth / 2}
|
|
96
|
+
C${sourceControlX},${sourceY + linkWidth / 2}
|
|
97
|
+
${targetControlX},${targetY + linkWidth / 2}
|
|
98
|
+
${targetX},${targetY + linkWidth / 2}
|
|
99
|
+
L${targetX},${targetY - linkWidth / 2}
|
|
100
|
+
C${targetControlX},${targetY - linkWidth / 2}
|
|
101
|
+
${sourceControlX},${sourceY - linkWidth / 2}
|
|
102
|
+
${sourceX},${sourceY - linkWidth / 2}
|
|
103
|
+
Z
|
|
104
|
+
`,
|
|
105
|
+
fill,
|
|
106
|
+
opacity: linkOpacity,
|
|
107
|
+
stroke: "none"
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
|
+
const SankeyChart = (0, _mantine_core.factory)((_props) => {
|
|
111
|
+
const props = (0, _mantine_core.useProps)("SankeyChart", defaultProps, _props);
|
|
112
|
+
const { classNames, className, style, styles, unstyled, vars, data, height: chartHeight, nodeWidth, nodePadding, linkCurvature, iterations, nodeColor, colors, linkColor, linkOpacity, textColor, withTooltip, tooltipAnimationDuration, tooltipProps, sankeyProps, valueFormatter, children, attributes, ...others } = props;
|
|
113
|
+
const theme = (0, _mantine_core.useMantineTheme)();
|
|
114
|
+
const resolvedNodeColors = {};
|
|
115
|
+
data.nodes.forEach((node, index) => {
|
|
116
|
+
if (node.color) resolvedNodeColors[index] = (0, _mantine_core.getThemeColor)(node.color, theme);
|
|
117
|
+
});
|
|
118
|
+
const resolvedDefaultColors = colors ? colors.map((color) => (0, _mantine_core.getThemeColor)(color, theme)) : DEFAULT_COLORS;
|
|
119
|
+
const getStyles = (0, _mantine_core.useStyles)({
|
|
120
|
+
name: "SankeyChart",
|
|
121
|
+
classes: require_SankeyChart_module.default,
|
|
122
|
+
props,
|
|
123
|
+
className,
|
|
124
|
+
style,
|
|
125
|
+
classNames,
|
|
126
|
+
styles,
|
|
127
|
+
unstyled,
|
|
128
|
+
attributes,
|
|
129
|
+
vars,
|
|
130
|
+
varsResolver
|
|
131
|
+
});
|
|
132
|
+
const { resolvedClassNames, resolvedStyles } = (0, _mantine_core.useResolvedStylesApi)({
|
|
133
|
+
classNames,
|
|
134
|
+
styles,
|
|
135
|
+
props
|
|
136
|
+
});
|
|
137
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
|
|
138
|
+
...getStyles("root"),
|
|
139
|
+
...others,
|
|
140
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ResponsiveContainer, {
|
|
141
|
+
height: chartHeight,
|
|
142
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.Sankey, {
|
|
143
|
+
data,
|
|
144
|
+
nodeWidth,
|
|
145
|
+
nodePadding,
|
|
146
|
+
linkCurvature,
|
|
147
|
+
iterations,
|
|
148
|
+
node: (nodeProps) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SankeyNodeContent, {
|
|
149
|
+
...nodeProps,
|
|
150
|
+
resolvedNodeColors,
|
|
151
|
+
resolvedDefaultColors,
|
|
152
|
+
valueFormatter
|
|
153
|
+
}),
|
|
154
|
+
link: (linkProps) => {
|
|
155
|
+
const sourceIndex = linkProps.index >= 0 && linkProps.index < data.links.length ? data.links[linkProps.index].source : -1;
|
|
156
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SankeyLinkContent, {
|
|
157
|
+
...linkProps,
|
|
158
|
+
sourceResolvedColor: resolvedNodeColors[sourceIndex],
|
|
159
|
+
linkOpacity
|
|
160
|
+
});
|
|
161
|
+
},
|
|
162
|
+
...sankeyProps,
|
|
163
|
+
children: [withTooltip && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Tooltip, {
|
|
164
|
+
animationDuration: tooltipAnimationDuration,
|
|
165
|
+
isAnimationActive: false,
|
|
166
|
+
content: ({ payload }) => {
|
|
167
|
+
const resolveColor = (item) => {
|
|
168
|
+
const nodeIndex = data.nodes.findIndex((n) => n.name === item.name);
|
|
169
|
+
if (nodeIndex !== -1) return resolvedNodeColors[nodeIndex] || resolvedDefaultColors[nodeIndex % resolvedDefaultColors.length];
|
|
170
|
+
const sourceNode = item.payload?.source;
|
|
171
|
+
if (sourceNode) {
|
|
172
|
+
const sourceIndex = data.nodes.findIndex((n) => n.name === sourceNode.name);
|
|
173
|
+
if (sourceIndex !== -1) return resolvedNodeColors[sourceIndex] || resolvedDefaultColors[sourceIndex % resolvedDefaultColors.length];
|
|
174
|
+
}
|
|
175
|
+
return "var(--mantine-color-blue-6)";
|
|
176
|
+
};
|
|
177
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChartTooltip.ChartTooltip, {
|
|
178
|
+
payload: payload?.map((item) => ({
|
|
179
|
+
name: item.name,
|
|
180
|
+
value: item.value,
|
|
181
|
+
color: resolveColor(item)
|
|
182
|
+
})) || [],
|
|
183
|
+
classNames: resolvedClassNames,
|
|
184
|
+
styles: resolvedStyles,
|
|
185
|
+
type: "radial",
|
|
186
|
+
valueFormatter,
|
|
187
|
+
attributes
|
|
188
|
+
});
|
|
189
|
+
},
|
|
190
|
+
...tooltipProps
|
|
191
|
+
}), children]
|
|
192
|
+
})
|
|
193
|
+
})
|
|
194
|
+
});
|
|
195
|
+
});
|
|
196
|
+
SankeyChart.displayName = "@mantine/charts/SankeyChart";
|
|
197
|
+
SankeyChart.classes = require_SankeyChart_module.default;
|
|
198
|
+
SankeyChart.varsResolver = varsResolver;
|
|
199
|
+
//#endregion
|
|
200
|
+
exports.SankeyChart = SankeyChart;
|
|
201
|
+
|
|
202
|
+
//# sourceMappingURL=SankeyChart.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SankeyChart.cjs","names":["Box","ResponsiveContainer","RechartsSankey","Tooltip","ChartTooltip","classes"],"sources":["../../src/SankeyChart/SankeyChart.tsx"],"sourcesContent":["import React from 'react';\nimport {\n Sankey as RechartsSankey,\n SankeyProps as RechartsSankeyProps,\n ResponsiveContainer,\n Tooltip,\n TooltipProps,\n} from 'recharts';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n rem,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';\nimport classes from './SankeyChart.module.css';\n\nexport interface SankeyChartNode {\n name: string;\n color?: MantineColor;\n [key: string]: unknown;\n}\n\nexport interface SankeyChartLink {\n source: number;\n target: number;\n value: number;\n [key: string]: unknown;\n}\n\nexport interface SankeyChartData {\n nodes: SankeyChartNode[];\n links: SankeyChartLink[];\n}\n\nexport type SankeyChartStylesNames = 'root' | ChartTooltipStylesNames;\nexport type SankeyChartCssVariables = {\n root: '--chart-node-color' | '--chart-link-color' | '--chart-text-color' | '--chart-height';\n};\n\nexport interface SankeyChartProps\n extends BoxProps, StylesApiProps<SankeyChartFactory>, ElementProps<'div'> {\n /** Data used to render chart, must include `nodes` and `links` arrays */\n data: SankeyChartData;\n\n /** Controls chart height @default 300 */\n height?: number;\n\n /** The width of each node @default 10 */\n nodeWidth?: number;\n\n /** The padding between nodes @default 10 */\n nodePadding?: number;\n\n /** The curvature of links between nodes @default 0.5 */\n linkCurvature?: number;\n\n /** The number of relaxation iterations @default 32 */\n iterations?: number;\n\n /** Default color for nodes, by default depends on color scheme */\n nodeColor?: MantineColor;\n\n /** An array of colors used for nodes when no `color` is set on individual nodes */\n colors?: MantineColor[];\n\n /** Default color for links, by default depends on color scheme */\n linkColor?: MantineColor;\n\n /** Opacity of the link fill @default 0.4 */\n linkOpacity?: number;\n\n /** Determines whether the tooltip should be displayed when hovered @default true */\n withTooltip?: boolean;\n\n /** Tooltip animation duration in ms @default 0 */\n tooltipAnimationDuration?: number;\n\n /** Props passed down to `Tooltip` recharts component */\n tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n\n /** Props passed down to recharts `Sankey` component */\n sankeyProps?: Partial<Omit<RechartsSankeyProps, 'ref' | 'data'>>;\n\n /** Controls text color of labels @default dimmed */\n textColor?: MantineColor;\n\n /** A function to format values inside the tooltip and node labels */\n valueFormatter?: (value: number) => string;\n\n /** Additional elements rendered inside `Sankey` component */\n children?: React.ReactNode;\n}\n\nexport type SankeyChartFactory = Factory<{\n props: SankeyChartProps;\n ref: HTMLDivElement;\n stylesNames: SankeyChartStylesNames;\n vars: SankeyChartCssVariables;\n}>;\n\nconst defaultProps = {\n height: 300,\n nodeWidth: 10,\n nodePadding: 10,\n linkCurvature: 0.5,\n iterations: 32,\n linkOpacity: 0.4,\n withTooltip: true,\n tooltipAnimationDuration: 0,\n} satisfies Partial<SankeyChartProps>;\n\nconst varsResolver = createVarsResolver<SankeyChartFactory>(\n (theme, { nodeColor, linkColor, textColor, height }) => ({\n root: {\n '--chart-node-color': nodeColor ? getThemeColor(nodeColor, theme) : undefined,\n '--chart-link-color': linkColor ? getThemeColor(linkColor, theme) : undefined,\n '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n '--chart-height': rem(height),\n },\n })\n);\n\ninterface SankeyNodeContentProps {\n x: number;\n y: number;\n width: number;\n height: number;\n index: number;\n payload: { name: string; value: number; targetNodes: number[]; color?: string };\n resolvedNodeColors: Record<number, string>;\n resolvedDefaultColors: string[];\n valueFormatter?: (value: number) => string;\n}\n\nconst DEFAULT_COLORS = [\n 'var(--mantine-color-blue-filled)',\n 'var(--mantine-color-cyan-filled)',\n 'var(--mantine-color-teal-filled)',\n 'var(--mantine-color-green-filled)',\n 'var(--mantine-color-lime-filled)',\n 'var(--mantine-color-yellow-filled)',\n 'var(--mantine-color-orange-filled)',\n 'var(--mantine-color-red-filled)',\n 'var(--mantine-color-pink-filled)',\n 'var(--mantine-color-grape-filled)',\n 'var(--mantine-color-violet-filled)',\n 'var(--mantine-color-indigo-filled)',\n];\n\nfunction SankeyNodeContent({\n x,\n y,\n width,\n height,\n index,\n payload,\n resolvedNodeColors,\n resolvedDefaultColors,\n valueFormatter,\n}: SankeyNodeContentProps) {\n const fill =\n resolvedNodeColors[index] ||\n `var(--chart-node-color, ${resolvedDefaultColors[index % resolvedDefaultColors.length]})`;\n\n const isLeaf = !payload.targetNodes || payload.targetNodes.length === 0;\n const labelX = isLeaf ? x - 6 : x + width + 6;\n const textAnchor = isLeaf ? 'end' : 'start';\n const formattedValue = valueFormatter ? valueFormatter(payload.value) : payload.value;\n const stacked = height >= 28;\n\n return (\n <g>\n <rect x={x} y={y} width={width} height={height} fill={fill} stroke=\"none\" />\n {stacked ? (\n <>\n <text\n x={labelX}\n y={y + height / 2 - 7}\n textAnchor={textAnchor}\n dominantBaseline=\"central\"\n fill=\"var(--chart-text-color, var(--mantine-color-text))\"\n fontSize={12}\n fontFamily=\"var(--mantine-font-family)\"\n >\n {payload.name}\n </text>\n <text\n x={labelX}\n y={y + height / 2 + 7}\n textAnchor={textAnchor}\n dominantBaseline=\"central\"\n fill=\"var(--chart-text-color, var(--mantine-color-text))\"\n fontSize={12}\n fontFamily=\"var(--mantine-font-family)\"\n opacity={0.8}\n >\n {formattedValue}\n </text>\n </>\n ) : (\n <text\n x={labelX}\n y={y + height / 2}\n textAnchor={textAnchor}\n dominantBaseline=\"central\"\n fill=\"var(--chart-text-color, var(--mantine-color-text))\"\n fontSize={12}\n fontFamily=\"var(--mantine-font-family)\"\n >\n {payload.name} <tspan opacity={0.8}>{formattedValue}</tspan>\n </text>\n )}\n </g>\n );\n}\n\ninterface SankeyLinkContentProps {\n sourceX: number;\n targetX: number;\n sourceY: number;\n targetY: number;\n sourceControlX: number;\n targetControlX: number;\n linkWidth: number;\n index: number;\n payload: {\n source: { color?: string };\n target: { color?: string };\n };\n sourceResolvedColor?: string;\n linkOpacity: number;\n}\n\nfunction SankeyLinkContent({\n sourceX,\n targetX,\n sourceY,\n targetY,\n sourceControlX,\n targetControlX,\n linkWidth,\n sourceResolvedColor,\n linkOpacity,\n}: SankeyLinkContentProps) {\n const fill = sourceResolvedColor || 'var(--chart-link-color, var(--mantine-color-gray-4))';\n\n return (\n <path\n d={`\n M${sourceX},${sourceY + linkWidth / 2}\n C${sourceControlX},${sourceY + linkWidth / 2}\n ${targetControlX},${targetY + linkWidth / 2}\n ${targetX},${targetY + linkWidth / 2}\n L${targetX},${targetY - linkWidth / 2}\n C${targetControlX},${targetY - linkWidth / 2}\n ${sourceControlX},${sourceY - linkWidth / 2}\n ${sourceX},${sourceY - linkWidth / 2}\n Z\n `}\n fill={fill}\n opacity={linkOpacity}\n stroke=\"none\"\n />\n );\n}\n\nexport const SankeyChart = factory<SankeyChartFactory>((_props) => {\n const props = useProps('SankeyChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n height: chartHeight,\n nodeWidth,\n nodePadding,\n linkCurvature,\n iterations,\n nodeColor,\n colors,\n linkColor,\n linkOpacity,\n textColor,\n withTooltip,\n tooltipAnimationDuration,\n tooltipProps,\n sankeyProps,\n valueFormatter,\n children,\n attributes,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n\n const resolvedNodeColors: Record<number, string> = {};\n data.nodes.forEach((node, index) => {\n if (node.color) {\n resolvedNodeColors[index] = getThemeColor(node.color, theme);\n }\n });\n\n const resolvedDefaultColors = colors\n ? colors.map((color) => getThemeColor(color, theme))\n : DEFAULT_COLORS;\n\n const getStyles = useStyles<SankeyChartFactory>({\n name: 'SankeyChart',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<SankeyChartFactory>({\n classNames,\n styles,\n props,\n });\n\n return (\n <Box {...getStyles('root')} {...others}>\n <ResponsiveContainer height={chartHeight}>\n <RechartsSankey\n data={data as any}\n nodeWidth={nodeWidth}\n nodePadding={nodePadding}\n linkCurvature={linkCurvature}\n iterations={iterations}\n node={(nodeProps: any) => (\n <SankeyNodeContent\n {...nodeProps}\n resolvedNodeColors={resolvedNodeColors}\n resolvedDefaultColors={resolvedDefaultColors}\n valueFormatter={valueFormatter}\n />\n )}\n link={(linkProps: any) => {\n const sourceIndex =\n linkProps.index >= 0 && linkProps.index < data.links.length\n ? data.links[linkProps.index].source\n : -1;\n return (\n <SankeyLinkContent\n {...linkProps}\n sourceResolvedColor={resolvedNodeColors[sourceIndex]}\n linkOpacity={linkOpacity!}\n />\n );\n }}\n {...sankeyProps}\n >\n {withTooltip && (\n <Tooltip\n animationDuration={tooltipAnimationDuration}\n isAnimationActive={false}\n content={({ payload }) => {\n const resolveColor = (item: any) => {\n const nodeIndex = data.nodes.findIndex((n) => n.name === item.name);\n if (nodeIndex !== -1) {\n return (\n resolvedNodeColors[nodeIndex] ||\n resolvedDefaultColors[nodeIndex % resolvedDefaultColors.length]\n );\n }\n\n const sourceNode = item.payload?.source;\n if (sourceNode) {\n const sourceIndex = data.nodes.findIndex((n) => n.name === sourceNode.name);\n if (sourceIndex !== -1) {\n return (\n resolvedNodeColors[sourceIndex] ||\n resolvedDefaultColors[sourceIndex % resolvedDefaultColors.length]\n );\n }\n }\n\n return 'var(--mantine-color-blue-6)';\n };\n\n return (\n <ChartTooltip\n payload={\n payload?.map((item) => ({\n name: item.name as string,\n value: item.value as number,\n color: resolveColor(item),\n })) || []\n }\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n type=\"radial\"\n valueFormatter={valueFormatter}\n attributes={attributes}\n />\n );\n }}\n {...tooltipProps}\n />\n )}\n\n {children}\n </RechartsSankey>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nSankeyChart.displayName = '@mantine/charts/SankeyChart';\nSankeyChart.classes = classes;\nSankeyChart.varsResolver = varsResolver;\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SankeyChart.module.cjs","names":[],"sources":["../../src/SankeyChart/SankeyChart.module.css"],"sourcesContent":[".root {\n min-height: var(--chart-height, auto);\n\n & :where(*) {\n outline: 0;\n }\n\n @mixin where-light {\n --chart-link-color: var(--mantine-color-gray-1);\n }\n\n @mixin where-dark {\n --chart-link-color: var(--mantine-color-dark-5);\n }\n}\n"],"mappings":""}
|
package/cjs/index.cjs
CHANGED
|
@@ -18,6 +18,7 @@ const require_FunnelChart = require("./FunnelChart/FunnelChart.cjs");
|
|
|
18
18
|
const require_Heatmap = require("./Heatmap/Heatmap.cjs");
|
|
19
19
|
const require_BarsList = require("./BarsList/BarsList.cjs");
|
|
20
20
|
const require_Treemap = require("./Treemap/Treemap.cjs");
|
|
21
|
+
const require_SankeyChart = require("./SankeyChart/SankeyChart.cjs");
|
|
21
22
|
exports.AreaChart = require_AreaChart.AreaChart;
|
|
22
23
|
exports.AreaGradient = require_AreaGradient.AreaGradient;
|
|
23
24
|
exports.BarChart = require_BarChart.BarChart;
|
|
@@ -33,6 +34,7 @@ exports.LineChart = require_LineChart.LineChart;
|
|
|
33
34
|
exports.PieChart = require_PieChart.PieChart;
|
|
34
35
|
exports.RadarChart = require_RadarChart.RadarChart;
|
|
35
36
|
exports.RadialBarChart = require_RadialBarChart.RadialBarChart;
|
|
37
|
+
exports.SankeyChart = require_SankeyChart.SankeyChart;
|
|
36
38
|
exports.ScatterChart = require_ScatterChart.ScatterChart;
|
|
37
39
|
exports.Sparkline = require_Sparkline.Sparkline;
|
|
38
40
|
exports.Treemap = require_Treemap.Treemap;
|
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { ChartTooltip } from "../ChartTooltip/ChartTooltip.mjs";
|
|
3
|
+
import SankeyChart_module_default from "./SankeyChart.module.mjs";
|
|
4
|
+
import { Box, createVarsResolver, factory, getThemeColor, rem, useMantineTheme, useProps, useResolvedStylesApi, useStyles } from "@mantine/core";
|
|
5
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
import "react";
|
|
7
|
+
import { ResponsiveContainer, Sankey, Tooltip as Tooltip$1 } from "recharts";
|
|
8
|
+
//#region packages/@mantine/charts/src/SankeyChart/SankeyChart.tsx
|
|
9
|
+
const defaultProps = {
|
|
10
|
+
height: 300,
|
|
11
|
+
nodeWidth: 10,
|
|
12
|
+
nodePadding: 10,
|
|
13
|
+
linkCurvature: .5,
|
|
14
|
+
iterations: 32,
|
|
15
|
+
linkOpacity: .4,
|
|
16
|
+
withTooltip: true,
|
|
17
|
+
tooltipAnimationDuration: 0
|
|
18
|
+
};
|
|
19
|
+
const varsResolver = createVarsResolver((theme, { nodeColor, linkColor, textColor, height }) => ({ root: {
|
|
20
|
+
"--chart-node-color": nodeColor ? getThemeColor(nodeColor, theme) : void 0,
|
|
21
|
+
"--chart-link-color": linkColor ? getThemeColor(linkColor, theme) : void 0,
|
|
22
|
+
"--chart-text-color": textColor ? getThemeColor(textColor, theme) : void 0,
|
|
23
|
+
"--chart-height": rem(height)
|
|
24
|
+
} }));
|
|
25
|
+
const DEFAULT_COLORS = [
|
|
26
|
+
"var(--mantine-color-blue-filled)",
|
|
27
|
+
"var(--mantine-color-cyan-filled)",
|
|
28
|
+
"var(--mantine-color-teal-filled)",
|
|
29
|
+
"var(--mantine-color-green-filled)",
|
|
30
|
+
"var(--mantine-color-lime-filled)",
|
|
31
|
+
"var(--mantine-color-yellow-filled)",
|
|
32
|
+
"var(--mantine-color-orange-filled)",
|
|
33
|
+
"var(--mantine-color-red-filled)",
|
|
34
|
+
"var(--mantine-color-pink-filled)",
|
|
35
|
+
"var(--mantine-color-grape-filled)",
|
|
36
|
+
"var(--mantine-color-violet-filled)",
|
|
37
|
+
"var(--mantine-color-indigo-filled)"
|
|
38
|
+
];
|
|
39
|
+
function SankeyNodeContent({ x, y, width, height, index, payload, resolvedNodeColors, resolvedDefaultColors, valueFormatter }) {
|
|
40
|
+
const fill = resolvedNodeColors[index] || `var(--chart-node-color, ${resolvedDefaultColors[index % resolvedDefaultColors.length]})`;
|
|
41
|
+
const isLeaf = !payload.targetNodes || payload.targetNodes.length === 0;
|
|
42
|
+
const labelX = isLeaf ? x - 6 : x + width + 6;
|
|
43
|
+
const textAnchor = isLeaf ? "end" : "start";
|
|
44
|
+
const formattedValue = valueFormatter ? valueFormatter(payload.value) : payload.value;
|
|
45
|
+
return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
|
|
46
|
+
x,
|
|
47
|
+
y,
|
|
48
|
+
width,
|
|
49
|
+
height,
|
|
50
|
+
fill,
|
|
51
|
+
stroke: "none"
|
|
52
|
+
}), height >= 28 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("text", {
|
|
53
|
+
x: labelX,
|
|
54
|
+
y: y + height / 2 - 7,
|
|
55
|
+
textAnchor,
|
|
56
|
+
dominantBaseline: "central",
|
|
57
|
+
fill: "var(--chart-text-color, var(--mantine-color-text))",
|
|
58
|
+
fontSize: 12,
|
|
59
|
+
fontFamily: "var(--mantine-font-family)",
|
|
60
|
+
children: payload.name
|
|
61
|
+
}), /* @__PURE__ */ jsx("text", {
|
|
62
|
+
x: labelX,
|
|
63
|
+
y: y + height / 2 + 7,
|
|
64
|
+
textAnchor,
|
|
65
|
+
dominantBaseline: "central",
|
|
66
|
+
fill: "var(--chart-text-color, var(--mantine-color-text))",
|
|
67
|
+
fontSize: 12,
|
|
68
|
+
fontFamily: "var(--mantine-font-family)",
|
|
69
|
+
opacity: .8,
|
|
70
|
+
children: formattedValue
|
|
71
|
+
})] }) : /* @__PURE__ */ jsxs("text", {
|
|
72
|
+
x: labelX,
|
|
73
|
+
y: y + height / 2,
|
|
74
|
+
textAnchor,
|
|
75
|
+
dominantBaseline: "central",
|
|
76
|
+
fill: "var(--chart-text-color, var(--mantine-color-text))",
|
|
77
|
+
fontSize: 12,
|
|
78
|
+
fontFamily: "var(--mantine-font-family)",
|
|
79
|
+
children: [
|
|
80
|
+
payload.name,
|
|
81
|
+
" ",
|
|
82
|
+
/* @__PURE__ */ jsx("tspan", {
|
|
83
|
+
opacity: .8,
|
|
84
|
+
children: formattedValue
|
|
85
|
+
})
|
|
86
|
+
]
|
|
87
|
+
})] });
|
|
88
|
+
}
|
|
89
|
+
function SankeyLinkContent({ sourceX, targetX, sourceY, targetY, sourceControlX, targetControlX, linkWidth, sourceResolvedColor, linkOpacity }) {
|
|
90
|
+
const fill = sourceResolvedColor || "var(--chart-link-color, var(--mantine-color-gray-4))";
|
|
91
|
+
return /* @__PURE__ */ jsx("path", {
|
|
92
|
+
d: `
|
|
93
|
+
M${sourceX},${sourceY + linkWidth / 2}
|
|
94
|
+
C${sourceControlX},${sourceY + linkWidth / 2}
|
|
95
|
+
${targetControlX},${targetY + linkWidth / 2}
|
|
96
|
+
${targetX},${targetY + linkWidth / 2}
|
|
97
|
+
L${targetX},${targetY - linkWidth / 2}
|
|
98
|
+
C${targetControlX},${targetY - linkWidth / 2}
|
|
99
|
+
${sourceControlX},${sourceY - linkWidth / 2}
|
|
100
|
+
${sourceX},${sourceY - linkWidth / 2}
|
|
101
|
+
Z
|
|
102
|
+
`,
|
|
103
|
+
fill,
|
|
104
|
+
opacity: linkOpacity,
|
|
105
|
+
stroke: "none"
|
|
106
|
+
});
|
|
107
|
+
}
|
|
108
|
+
const SankeyChart = factory((_props) => {
|
|
109
|
+
const props = useProps("SankeyChart", defaultProps, _props);
|
|
110
|
+
const { classNames, className, style, styles, unstyled, vars, data, height: chartHeight, nodeWidth, nodePadding, linkCurvature, iterations, nodeColor, colors, linkColor, linkOpacity, textColor, withTooltip, tooltipAnimationDuration, tooltipProps, sankeyProps, valueFormatter, children, attributes, ...others } = props;
|
|
111
|
+
const theme = useMantineTheme();
|
|
112
|
+
const resolvedNodeColors = {};
|
|
113
|
+
data.nodes.forEach((node, index) => {
|
|
114
|
+
if (node.color) resolvedNodeColors[index] = getThemeColor(node.color, theme);
|
|
115
|
+
});
|
|
116
|
+
const resolvedDefaultColors = colors ? colors.map((color) => getThemeColor(color, theme)) : DEFAULT_COLORS;
|
|
117
|
+
const getStyles = useStyles({
|
|
118
|
+
name: "SankeyChart",
|
|
119
|
+
classes: SankeyChart_module_default,
|
|
120
|
+
props,
|
|
121
|
+
className,
|
|
122
|
+
style,
|
|
123
|
+
classNames,
|
|
124
|
+
styles,
|
|
125
|
+
unstyled,
|
|
126
|
+
attributes,
|
|
127
|
+
vars,
|
|
128
|
+
varsResolver
|
|
129
|
+
});
|
|
130
|
+
const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
|
|
131
|
+
classNames,
|
|
132
|
+
styles,
|
|
133
|
+
props
|
|
134
|
+
});
|
|
135
|
+
return /* @__PURE__ */ jsx(Box, {
|
|
136
|
+
...getStyles("root"),
|
|
137
|
+
...others,
|
|
138
|
+
children: /* @__PURE__ */ jsx(ResponsiveContainer, {
|
|
139
|
+
height: chartHeight,
|
|
140
|
+
children: /* @__PURE__ */ jsxs(Sankey, {
|
|
141
|
+
data,
|
|
142
|
+
nodeWidth,
|
|
143
|
+
nodePadding,
|
|
144
|
+
linkCurvature,
|
|
145
|
+
iterations,
|
|
146
|
+
node: (nodeProps) => /* @__PURE__ */ jsx(SankeyNodeContent, {
|
|
147
|
+
...nodeProps,
|
|
148
|
+
resolvedNodeColors,
|
|
149
|
+
resolvedDefaultColors,
|
|
150
|
+
valueFormatter
|
|
151
|
+
}),
|
|
152
|
+
link: (linkProps) => {
|
|
153
|
+
const sourceIndex = linkProps.index >= 0 && linkProps.index < data.links.length ? data.links[linkProps.index].source : -1;
|
|
154
|
+
return /* @__PURE__ */ jsx(SankeyLinkContent, {
|
|
155
|
+
...linkProps,
|
|
156
|
+
sourceResolvedColor: resolvedNodeColors[sourceIndex],
|
|
157
|
+
linkOpacity
|
|
158
|
+
});
|
|
159
|
+
},
|
|
160
|
+
...sankeyProps,
|
|
161
|
+
children: [withTooltip && /* @__PURE__ */ jsx(Tooltip$1, {
|
|
162
|
+
animationDuration: tooltipAnimationDuration,
|
|
163
|
+
isAnimationActive: false,
|
|
164
|
+
content: ({ payload }) => {
|
|
165
|
+
const resolveColor = (item) => {
|
|
166
|
+
const nodeIndex = data.nodes.findIndex((n) => n.name === item.name);
|
|
167
|
+
if (nodeIndex !== -1) return resolvedNodeColors[nodeIndex] || resolvedDefaultColors[nodeIndex % resolvedDefaultColors.length];
|
|
168
|
+
const sourceNode = item.payload?.source;
|
|
169
|
+
if (sourceNode) {
|
|
170
|
+
const sourceIndex = data.nodes.findIndex((n) => n.name === sourceNode.name);
|
|
171
|
+
if (sourceIndex !== -1) return resolvedNodeColors[sourceIndex] || resolvedDefaultColors[sourceIndex % resolvedDefaultColors.length];
|
|
172
|
+
}
|
|
173
|
+
return "var(--mantine-color-blue-6)";
|
|
174
|
+
};
|
|
175
|
+
return /* @__PURE__ */ jsx(ChartTooltip, {
|
|
176
|
+
payload: payload?.map((item) => ({
|
|
177
|
+
name: item.name,
|
|
178
|
+
value: item.value,
|
|
179
|
+
color: resolveColor(item)
|
|
180
|
+
})) || [],
|
|
181
|
+
classNames: resolvedClassNames,
|
|
182
|
+
styles: resolvedStyles,
|
|
183
|
+
type: "radial",
|
|
184
|
+
valueFormatter,
|
|
185
|
+
attributes
|
|
186
|
+
});
|
|
187
|
+
},
|
|
188
|
+
...tooltipProps
|
|
189
|
+
}), children]
|
|
190
|
+
})
|
|
191
|
+
})
|
|
192
|
+
});
|
|
193
|
+
});
|
|
194
|
+
SankeyChart.displayName = "@mantine/charts/SankeyChart";
|
|
195
|
+
SankeyChart.classes = SankeyChart_module_default;
|
|
196
|
+
SankeyChart.varsResolver = varsResolver;
|
|
197
|
+
//#endregion
|
|
198
|
+
export { SankeyChart };
|
|
199
|
+
|
|
200
|
+
//# sourceMappingURL=SankeyChart.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SankeyChart.mjs","names":["RechartsSankey","Tooltip","classes"],"sources":["../../src/SankeyChart/SankeyChart.tsx"],"sourcesContent":["import React from 'react';\nimport {\n Sankey as RechartsSankey,\n SankeyProps as RechartsSankeyProps,\n ResponsiveContainer,\n Tooltip,\n TooltipProps,\n} from 'recharts';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n rem,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';\nimport classes from './SankeyChart.module.css';\n\nexport interface SankeyChartNode {\n name: string;\n color?: MantineColor;\n [key: string]: unknown;\n}\n\nexport interface SankeyChartLink {\n source: number;\n target: number;\n value: number;\n [key: string]: unknown;\n}\n\nexport interface SankeyChartData {\n nodes: SankeyChartNode[];\n links: SankeyChartLink[];\n}\n\nexport type SankeyChartStylesNames = 'root' | ChartTooltipStylesNames;\nexport type SankeyChartCssVariables = {\n root: '--chart-node-color' | '--chart-link-color' | '--chart-text-color' | '--chart-height';\n};\n\nexport interface SankeyChartProps\n extends BoxProps, StylesApiProps<SankeyChartFactory>, ElementProps<'div'> {\n /** Data used to render chart, must include `nodes` and `links` arrays */\n data: SankeyChartData;\n\n /** Controls chart height @default 300 */\n height?: number;\n\n /** The width of each node @default 10 */\n nodeWidth?: number;\n\n /** The padding between nodes @default 10 */\n nodePadding?: number;\n\n /** The curvature of links between nodes @default 0.5 */\n linkCurvature?: number;\n\n /** The number of relaxation iterations @default 32 */\n iterations?: number;\n\n /** Default color for nodes, by default depends on color scheme */\n nodeColor?: MantineColor;\n\n /** An array of colors used for nodes when no `color` is set on individual nodes */\n colors?: MantineColor[];\n\n /** Default color for links, by default depends on color scheme */\n linkColor?: MantineColor;\n\n /** Opacity of the link fill @default 0.4 */\n linkOpacity?: number;\n\n /** Determines whether the tooltip should be displayed when hovered @default true */\n withTooltip?: boolean;\n\n /** Tooltip animation duration in ms @default 0 */\n tooltipAnimationDuration?: number;\n\n /** Props passed down to `Tooltip` recharts component */\n tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;\n\n /** Props passed down to recharts `Sankey` component */\n sankeyProps?: Partial<Omit<RechartsSankeyProps, 'ref' | 'data'>>;\n\n /** Controls text color of labels @default dimmed */\n textColor?: MantineColor;\n\n /** A function to format values inside the tooltip and node labels */\n valueFormatter?: (value: number) => string;\n\n /** Additional elements rendered inside `Sankey` component */\n children?: React.ReactNode;\n}\n\nexport type SankeyChartFactory = Factory<{\n props: SankeyChartProps;\n ref: HTMLDivElement;\n stylesNames: SankeyChartStylesNames;\n vars: SankeyChartCssVariables;\n}>;\n\nconst defaultProps = {\n height: 300,\n nodeWidth: 10,\n nodePadding: 10,\n linkCurvature: 0.5,\n iterations: 32,\n linkOpacity: 0.4,\n withTooltip: true,\n tooltipAnimationDuration: 0,\n} satisfies Partial<SankeyChartProps>;\n\nconst varsResolver = createVarsResolver<SankeyChartFactory>(\n (theme, { nodeColor, linkColor, textColor, height }) => ({\n root: {\n '--chart-node-color': nodeColor ? getThemeColor(nodeColor, theme) : undefined,\n '--chart-link-color': linkColor ? getThemeColor(linkColor, theme) : undefined,\n '--chart-text-color': textColor ? getThemeColor(textColor, theme) : undefined,\n '--chart-height': rem(height),\n },\n })\n);\n\ninterface SankeyNodeContentProps {\n x: number;\n y: number;\n width: number;\n height: number;\n index: number;\n payload: { name: string; value: number; targetNodes: number[]; color?: string };\n resolvedNodeColors: Record<number, string>;\n resolvedDefaultColors: string[];\n valueFormatter?: (value: number) => string;\n}\n\nconst DEFAULT_COLORS = [\n 'var(--mantine-color-blue-filled)',\n 'var(--mantine-color-cyan-filled)',\n 'var(--mantine-color-teal-filled)',\n 'var(--mantine-color-green-filled)',\n 'var(--mantine-color-lime-filled)',\n 'var(--mantine-color-yellow-filled)',\n 'var(--mantine-color-orange-filled)',\n 'var(--mantine-color-red-filled)',\n 'var(--mantine-color-pink-filled)',\n 'var(--mantine-color-grape-filled)',\n 'var(--mantine-color-violet-filled)',\n 'var(--mantine-color-indigo-filled)',\n];\n\nfunction SankeyNodeContent({\n x,\n y,\n width,\n height,\n index,\n payload,\n resolvedNodeColors,\n resolvedDefaultColors,\n valueFormatter,\n}: SankeyNodeContentProps) {\n const fill =\n resolvedNodeColors[index] ||\n `var(--chart-node-color, ${resolvedDefaultColors[index % resolvedDefaultColors.length]})`;\n\n const isLeaf = !payload.targetNodes || payload.targetNodes.length === 0;\n const labelX = isLeaf ? x - 6 : x + width + 6;\n const textAnchor = isLeaf ? 'end' : 'start';\n const formattedValue = valueFormatter ? valueFormatter(payload.value) : payload.value;\n const stacked = height >= 28;\n\n return (\n <g>\n <rect x={x} y={y} width={width} height={height} fill={fill} stroke=\"none\" />\n {stacked ? (\n <>\n <text\n x={labelX}\n y={y + height / 2 - 7}\n textAnchor={textAnchor}\n dominantBaseline=\"central\"\n fill=\"var(--chart-text-color, var(--mantine-color-text))\"\n fontSize={12}\n fontFamily=\"var(--mantine-font-family)\"\n >\n {payload.name}\n </text>\n <text\n x={labelX}\n y={y + height / 2 + 7}\n textAnchor={textAnchor}\n dominantBaseline=\"central\"\n fill=\"var(--chart-text-color, var(--mantine-color-text))\"\n fontSize={12}\n fontFamily=\"var(--mantine-font-family)\"\n opacity={0.8}\n >\n {formattedValue}\n </text>\n </>\n ) : (\n <text\n x={labelX}\n y={y + height / 2}\n textAnchor={textAnchor}\n dominantBaseline=\"central\"\n fill=\"var(--chart-text-color, var(--mantine-color-text))\"\n fontSize={12}\n fontFamily=\"var(--mantine-font-family)\"\n >\n {payload.name} <tspan opacity={0.8}>{formattedValue}</tspan>\n </text>\n )}\n </g>\n );\n}\n\ninterface SankeyLinkContentProps {\n sourceX: number;\n targetX: number;\n sourceY: number;\n targetY: number;\n sourceControlX: number;\n targetControlX: number;\n linkWidth: number;\n index: number;\n payload: {\n source: { color?: string };\n target: { color?: string };\n };\n sourceResolvedColor?: string;\n linkOpacity: number;\n}\n\nfunction SankeyLinkContent({\n sourceX,\n targetX,\n sourceY,\n targetY,\n sourceControlX,\n targetControlX,\n linkWidth,\n sourceResolvedColor,\n linkOpacity,\n}: SankeyLinkContentProps) {\n const fill = sourceResolvedColor || 'var(--chart-link-color, var(--mantine-color-gray-4))';\n\n return (\n <path\n d={`\n M${sourceX},${sourceY + linkWidth / 2}\n C${sourceControlX},${sourceY + linkWidth / 2}\n ${targetControlX},${targetY + linkWidth / 2}\n ${targetX},${targetY + linkWidth / 2}\n L${targetX},${targetY - linkWidth / 2}\n C${targetControlX},${targetY - linkWidth / 2}\n ${sourceControlX},${sourceY - linkWidth / 2}\n ${sourceX},${sourceY - linkWidth / 2}\n Z\n `}\n fill={fill}\n opacity={linkOpacity}\n stroke=\"none\"\n />\n );\n}\n\nexport const SankeyChart = factory<SankeyChartFactory>((_props) => {\n const props = useProps('SankeyChart', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n height: chartHeight,\n nodeWidth,\n nodePadding,\n linkCurvature,\n iterations,\n nodeColor,\n colors,\n linkColor,\n linkOpacity,\n textColor,\n withTooltip,\n tooltipAnimationDuration,\n tooltipProps,\n sankeyProps,\n valueFormatter,\n children,\n attributes,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n\n const resolvedNodeColors: Record<number, string> = {};\n data.nodes.forEach((node, index) => {\n if (node.color) {\n resolvedNodeColors[index] = getThemeColor(node.color, theme);\n }\n });\n\n const resolvedDefaultColors = colors\n ? colors.map((color) => getThemeColor(color, theme))\n : DEFAULT_COLORS;\n\n const getStyles = useStyles<SankeyChartFactory>({\n name: 'SankeyChart',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<SankeyChartFactory>({\n classNames,\n styles,\n props,\n });\n\n return (\n <Box {...getStyles('root')} {...others}>\n <ResponsiveContainer height={chartHeight}>\n <RechartsSankey\n data={data as any}\n nodeWidth={nodeWidth}\n nodePadding={nodePadding}\n linkCurvature={linkCurvature}\n iterations={iterations}\n node={(nodeProps: any) => (\n <SankeyNodeContent\n {...nodeProps}\n resolvedNodeColors={resolvedNodeColors}\n resolvedDefaultColors={resolvedDefaultColors}\n valueFormatter={valueFormatter}\n />\n )}\n link={(linkProps: any) => {\n const sourceIndex =\n linkProps.index >= 0 && linkProps.index < data.links.length\n ? data.links[linkProps.index].source\n : -1;\n return (\n <SankeyLinkContent\n {...linkProps}\n sourceResolvedColor={resolvedNodeColors[sourceIndex]}\n linkOpacity={linkOpacity!}\n />\n );\n }}\n {...sankeyProps}\n >\n {withTooltip && (\n <Tooltip\n animationDuration={tooltipAnimationDuration}\n isAnimationActive={false}\n content={({ payload }) => {\n const resolveColor = (item: any) => {\n const nodeIndex = data.nodes.findIndex((n) => n.name === item.name);\n if (nodeIndex !== -1) {\n return (\n resolvedNodeColors[nodeIndex] ||\n resolvedDefaultColors[nodeIndex % resolvedDefaultColors.length]\n );\n }\n\n const sourceNode = item.payload?.source;\n if (sourceNode) {\n const sourceIndex = data.nodes.findIndex((n) => n.name === sourceNode.name);\n if (sourceIndex !== -1) {\n return (\n resolvedNodeColors[sourceIndex] ||\n resolvedDefaultColors[sourceIndex % resolvedDefaultColors.length]\n );\n }\n }\n\n return 'var(--mantine-color-blue-6)';\n };\n\n return (\n <ChartTooltip\n payload={\n payload?.map((item) => ({\n name: item.name as string,\n value: item.value as number,\n color: resolveColor(item),\n })) || []\n }\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n type=\"radial\"\n valueFormatter={valueFormatter}\n attributes={attributes}\n />\n );\n }}\n {...tooltipProps}\n />\n )}\n\n {children}\n </RechartsSankey>\n </ResponsiveContainer>\n </Box>\n );\n});\n\nSankeyChart.displayName = '@mantine/charts/SankeyChart';\nSankeyChart.classes = classes;\nSankeyChart.varsResolver = varsResolver;\n"],"mappings":"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"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
//#region packages/@mantine/charts/src/SankeyChart/SankeyChart.module.css
|
|
3
|
+
var SankeyChart_module_default = { "root": "m_b42d2970" };
|
|
4
|
+
//#endregion
|
|
5
|
+
export { SankeyChart_module_default as default };
|
|
6
|
+
|
|
7
|
+
//# sourceMappingURL=SankeyChart.module.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SankeyChart.module.mjs","names":[],"sources":["../../src/SankeyChart/SankeyChart.module.css"],"sourcesContent":[".root {\n min-height: var(--chart-height, auto);\n\n & :where(*) {\n outline: 0;\n }\n\n @mixin where-light {\n --chart-link-color: var(--mantine-color-gray-1);\n }\n\n @mixin where-dark {\n --chart-link-color: var(--mantine-color-dark-5);\n }\n}\n"],"mappings":""}
|
package/esm/index.mjs
CHANGED
|
@@ -17,4 +17,5 @@ import { FunnelChart } from "./FunnelChart/FunnelChart.mjs";
|
|
|
17
17
|
import { Heatmap } from "./Heatmap/Heatmap.mjs";
|
|
18
18
|
import { BarsList } from "./BarsList/BarsList.mjs";
|
|
19
19
|
import { Treemap } from "./Treemap/Treemap.mjs";
|
|
20
|
-
|
|
20
|
+
import { SankeyChart } from "./SankeyChart/SankeyChart.mjs";
|
|
21
|
+
export { AreaChart, AreaGradient, BarChart, BarsList, BubbleChart, ChartLegend, ChartTooltip, CompositeChart, DonutChart, FunnelChart, Heatmap, LineChart, PieChart, RadarChart, RadialBarChart, SankeyChart, ScatterChart, Sparkline, Treemap, getFilteredChartLegendPayload, getFilteredChartTooltipPayload, getSplitOffset };
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { SankeyProps as RechartsSankeyProps, TooltipProps } from 'recharts';
|
|
3
|
+
import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '@mantine/core';
|
|
4
|
+
import { ChartTooltipStylesNames } from '../ChartTooltip/ChartTooltip';
|
|
5
|
+
export interface SankeyChartNode {
|
|
6
|
+
name: string;
|
|
7
|
+
color?: MantineColor;
|
|
8
|
+
[key: string]: unknown;
|
|
9
|
+
}
|
|
10
|
+
export interface SankeyChartLink {
|
|
11
|
+
source: number;
|
|
12
|
+
target: number;
|
|
13
|
+
value: number;
|
|
14
|
+
[key: string]: unknown;
|
|
15
|
+
}
|
|
16
|
+
export interface SankeyChartData {
|
|
17
|
+
nodes: SankeyChartNode[];
|
|
18
|
+
links: SankeyChartLink[];
|
|
19
|
+
}
|
|
20
|
+
export type SankeyChartStylesNames = 'root' | ChartTooltipStylesNames;
|
|
21
|
+
export type SankeyChartCssVariables = {
|
|
22
|
+
root: '--chart-node-color' | '--chart-link-color' | '--chart-text-color' | '--chart-height';
|
|
23
|
+
};
|
|
24
|
+
export interface SankeyChartProps extends BoxProps, StylesApiProps<SankeyChartFactory>, ElementProps<'div'> {
|
|
25
|
+
/** Data used to render chart, must include `nodes` and `links` arrays */
|
|
26
|
+
data: SankeyChartData;
|
|
27
|
+
/** Controls chart height @default 300 */
|
|
28
|
+
height?: number;
|
|
29
|
+
/** The width of each node @default 10 */
|
|
30
|
+
nodeWidth?: number;
|
|
31
|
+
/** The padding between nodes @default 10 */
|
|
32
|
+
nodePadding?: number;
|
|
33
|
+
/** The curvature of links between nodes @default 0.5 */
|
|
34
|
+
linkCurvature?: number;
|
|
35
|
+
/** The number of relaxation iterations @default 32 */
|
|
36
|
+
iterations?: number;
|
|
37
|
+
/** Default color for nodes, by default depends on color scheme */
|
|
38
|
+
nodeColor?: MantineColor;
|
|
39
|
+
/** An array of colors used for nodes when no `color` is set on individual nodes */
|
|
40
|
+
colors?: MantineColor[];
|
|
41
|
+
/** Default color for links, by default depends on color scheme */
|
|
42
|
+
linkColor?: MantineColor;
|
|
43
|
+
/** Opacity of the link fill @default 0.4 */
|
|
44
|
+
linkOpacity?: number;
|
|
45
|
+
/** Determines whether the tooltip should be displayed when hovered @default true */
|
|
46
|
+
withTooltip?: boolean;
|
|
47
|
+
/** Tooltip animation duration in ms @default 0 */
|
|
48
|
+
tooltipAnimationDuration?: number;
|
|
49
|
+
/** Props passed down to `Tooltip` recharts component */
|
|
50
|
+
tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;
|
|
51
|
+
/** Props passed down to recharts `Sankey` component */
|
|
52
|
+
sankeyProps?: Partial<Omit<RechartsSankeyProps, 'ref' | 'data'>>;
|
|
53
|
+
/** Controls text color of labels @default dimmed */
|
|
54
|
+
textColor?: MantineColor;
|
|
55
|
+
/** A function to format values inside the tooltip and node labels */
|
|
56
|
+
valueFormatter?: (value: number) => string;
|
|
57
|
+
/** Additional elements rendered inside `Sankey` component */
|
|
58
|
+
children?: React.ReactNode;
|
|
59
|
+
}
|
|
60
|
+
export type SankeyChartFactory = Factory<{
|
|
61
|
+
props: SankeyChartProps;
|
|
62
|
+
ref: HTMLDivElement;
|
|
63
|
+
stylesNames: SankeyChartStylesNames;
|
|
64
|
+
vars: SankeyChartCssVariables;
|
|
65
|
+
}>;
|
|
66
|
+
export declare const SankeyChart: import("@mantine/core").MantineComponent<{
|
|
67
|
+
props: SankeyChartProps;
|
|
68
|
+
ref: HTMLDivElement;
|
|
69
|
+
stylesNames: SankeyChartStylesNames;
|
|
70
|
+
vars: SankeyChartCssVariables;
|
|
71
|
+
}>;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { SankeyChartCssVariables, SankeyChartData, SankeyChartFactory, SankeyChartLink, SankeyChartNode, SankeyChartProps, SankeyChartStylesNames } from './SankeyChart';
|
|
2
|
+
export { SankeyChart } from './SankeyChart';
|
|
3
|
+
export type { SankeyChartProps, SankeyChartStylesNames, SankeyChartCssVariables, SankeyChartFactory, SankeyChartData, SankeyChartNode, SankeyChartLink, };
|
|
4
|
+
export declare namespace SankeyChart {
|
|
5
|
+
type Props = SankeyChartProps;
|
|
6
|
+
type StylesNames = SankeyChartStylesNames;
|
|
7
|
+
type CssVariables = SankeyChartCssVariables;
|
|
8
|
+
type Factory = SankeyChartFactory;
|
|
9
|
+
type Data = SankeyChartData;
|
|
10
|
+
type Node = SankeyChartNode;
|
|
11
|
+
type Link = SankeyChartLink;
|
|
12
|
+
}
|
package/lib/index.d.mts
CHANGED
package/lib/index.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mantine/charts",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.2.0",
|
|
4
4
|
"description": "Charts components built with recharts and Mantine",
|
|
5
5
|
"homepage": "https://mantine.dev/",
|
|
6
6
|
"license": "MIT",
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
"directory": "packages/@mantine/charts"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
|
-
"@mantine/core": "9.
|
|
39
|
-
"@mantine/hooks": "9.
|
|
38
|
+
"@mantine/core": "9.2.0",
|
|
39
|
+
"@mantine/hooks": "9.2.0",
|
|
40
40
|
"react": "^19.2.0",
|
|
41
41
|
"react-dom": "^19.2.0",
|
|
42
42
|
"recharts": ">=3.2.1"
|
package/styles.css
CHANGED
|
@@ -381,3 +381,19 @@
|
|
|
381
381
|
.m_3c064071 :where(*) {
|
|
382
382
|
outline: 0;
|
|
383
383
|
}
|
|
384
|
+
|
|
385
|
+
.m_b42d2970 {
|
|
386
|
+
min-height: var(--chart-height, auto);
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
.m_b42d2970 :where(*) {
|
|
390
|
+
outline: 0;
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
:where([data-mantine-color-scheme='light']) .m_b42d2970 {
|
|
394
|
+
--chart-link-color: var(--mantine-color-gray-1);
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
:where([data-mantine-color-scheme='dark']) .m_b42d2970 {
|
|
398
|
+
--chart-link-color: var(--mantine-color-dark-5);
|
|
399
|
+
}
|
package/styles.layer.css
CHANGED
|
@@ -381,4 +381,20 @@
|
|
|
381
381
|
.m_3c064071 :where(*) {
|
|
382
382
|
outline: 0;
|
|
383
383
|
}
|
|
384
|
+
|
|
385
|
+
.m_b42d2970 {
|
|
386
|
+
min-height: var(--chart-height, auto);
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
.m_b42d2970 :where(*) {
|
|
390
|
+
outline: 0;
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
:where([data-mantine-color-scheme='light']) .m_b42d2970 {
|
|
394
|
+
--chart-link-color: var(--mantine-color-gray-1);
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
:where([data-mantine-color-scheme='dark']) .m_b42d2970 {
|
|
398
|
+
--chart-link-color: var(--mantine-color-dark-5);
|
|
399
|
+
}
|
|
384
400
|
}
|