@mui/x-charts-pro 8.10.1 → 8.11.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/BarChartPro/BarChartPro.js +0 -36
- package/CHANGELOG.md +221 -8
- package/ChartDataProviderPro/ChartDataProviderPro.js +1 -1
- package/FunnelChart/curves/bump.js +0 -2
- package/FunnelChart/curves/linear.js +0 -2
- package/FunnelChart/curves/pyramid.js +0 -2
- package/FunnelChart/curves/step-pyramid.js +0 -2
- package/FunnelChart/curves/step.js +0 -2
- package/Heatmap/Heatmap.js +0 -4
- package/LineChartPro/LineChartPro.js +0 -36
- package/PieChartPro/PieChartPro.js +2 -2
- package/SankeyChart/SankeyChart.d.ts +32 -0
- package/SankeyChart/SankeyChart.js +161 -0
- package/SankeyChart/SankeyChart.plugins.d.ts +3 -0
- package/SankeyChart/SankeyChart.plugins.js +11 -0
- package/SankeyChart/SankeyLinkElement.d.ts +27 -0
- package/SankeyChart/SankeyLinkElement.js +53 -0
- package/SankeyChart/SankeyLinkLabel.d.ts +12 -0
- package/SankeyChart/SankeyLinkLabel.js +58 -0
- package/SankeyChart/SankeyNodeElement.d.ts +27 -0
- package/SankeyChart/SankeyNodeElement.js +76 -0
- package/SankeyChart/SankeyPlot.d.ts +29 -0
- package/SankeyChart/SankeyPlot.js +100 -0
- package/SankeyChart/SankeyTooltip/SankeyTooltip.classes.d.ts +2 -0
- package/SankeyChart/SankeyTooltip/SankeyTooltip.classes.js +27 -0
- package/SankeyChart/SankeyTooltip/SankeyTooltip.d.ts +7 -0
- package/SankeyChart/SankeyTooltip/SankeyTooltip.js +208 -0
- package/SankeyChart/SankeyTooltip/SankeyTooltip.types.d.ts +10 -0
- package/SankeyChart/SankeyTooltip/SankeyTooltip.types.js +5 -0
- package/SankeyChart/SankeyTooltip/SankeyTooltipContent.d.ts +7 -0
- package/SankeyChart/SankeyTooltip/SankeyTooltipContent.js +66 -0
- package/SankeyChart/SankeyTooltip/index.d.ts +3 -0
- package/SankeyChart/SankeyTooltip/index.js +27 -0
- package/SankeyChart/calculateSankeyLayout.d.ts +13 -0
- package/SankeyChart/calculateSankeyLayout.js +141 -0
- package/SankeyChart/index.d.ts +9 -0
- package/SankeyChart/index.js +70 -0
- package/SankeyChart/sankey.types.d.ts +225 -0
- package/SankeyChart/sankey.types.js +6 -0
- package/SankeyChart/sankeyClasses.d.ts +15 -0
- package/SankeyChart/sankeyClasses.js +28 -0
- package/SankeyChart/sankeySlots.types.d.ts +24 -0
- package/SankeyChart/sankeySlots.types.js +5 -0
- package/SankeyChart/seriesConfig/getSeriesWithDefaultValues.d.ts +2 -0
- package/SankeyChart/seriesConfig/getSeriesWithDefaultValues.js +55 -0
- package/SankeyChart/seriesConfig/index.d.ts +2 -0
- package/SankeyChart/seriesConfig/index.js +19 -0
- package/SankeyChart/seriesConfig/tooltipGetter.d.ts +2 -0
- package/SankeyChart/seriesConfig/tooltipGetter.js +46 -0
- package/SankeyChart/useSankeyChartProps.d.ts +22 -0
- package/SankeyChart/useSankeyChartProps.js +77 -0
- package/SankeyChart/utils.d.ts +3 -0
- package/SankeyChart/utils.js +21 -0
- package/ScatterChartPro/ScatterChartPro.js +1 -37
- package/esm/BarChartPro/BarChartPro.js +0 -36
- package/esm/ChartDataProviderPro/ChartDataProviderPro.js +1 -1
- package/esm/FunnelChart/curves/bump.js +0 -2
- package/esm/FunnelChart/curves/linear.js +0 -2
- package/esm/FunnelChart/curves/pyramid.js +0 -2
- package/esm/FunnelChart/curves/step-pyramid.js +0 -2
- package/esm/FunnelChart/curves/step.js +0 -2
- package/esm/Heatmap/Heatmap.js +0 -4
- package/esm/LineChartPro/LineChartPro.js +0 -36
- package/esm/PieChartPro/PieChartPro.js +2 -2
- package/esm/SankeyChart/SankeyChart.d.ts +32 -0
- package/esm/SankeyChart/SankeyChart.js +155 -0
- package/esm/SankeyChart/SankeyChart.plugins.d.ts +3 -0
- package/esm/SankeyChart/SankeyChart.plugins.js +9 -0
- package/esm/SankeyChart/SankeyLinkElement.d.ts +27 -0
- package/esm/SankeyChart/SankeyLinkElement.js +46 -0
- package/esm/SankeyChart/SankeyLinkLabel.d.ts +12 -0
- package/esm/SankeyChart/SankeyLinkLabel.js +52 -0
- package/esm/SankeyChart/SankeyNodeElement.d.ts +27 -0
- package/esm/SankeyChart/SankeyNodeElement.js +69 -0
- package/esm/SankeyChart/SankeyPlot.d.ts +29 -0
- package/esm/SankeyChart/SankeyPlot.js +94 -0
- package/esm/SankeyChart/SankeyTooltip/SankeyTooltip.classes.d.ts +2 -0
- package/esm/SankeyChart/SankeyTooltip/SankeyTooltip.classes.js +19 -0
- package/esm/SankeyChart/SankeyTooltip/SankeyTooltip.d.ts +7 -0
- package/esm/SankeyChart/SankeyTooltip/SankeyTooltip.js +202 -0
- package/esm/SankeyChart/SankeyTooltip/SankeyTooltip.types.d.ts +10 -0
- package/esm/SankeyChart/SankeyTooltip/SankeyTooltip.types.js +1 -0
- package/esm/SankeyChart/SankeyTooltip/SankeyTooltipContent.d.ts +7 -0
- package/esm/SankeyChart/SankeyTooltip/SankeyTooltipContent.js +59 -0
- package/esm/SankeyChart/SankeyTooltip/index.d.ts +3 -0
- package/esm/SankeyChart/SankeyTooltip/index.js +3 -0
- package/esm/SankeyChart/calculateSankeyLayout.d.ts +13 -0
- package/esm/SankeyChart/calculateSankeyLayout.js +135 -0
- package/esm/SankeyChart/index.d.ts +9 -0
- package/esm/SankeyChart/index.js +6 -0
- package/esm/SankeyChart/sankey.types.d.ts +225 -0
- package/esm/SankeyChart/sankey.types.js +3 -0
- package/esm/SankeyChart/sankeyClasses.d.ts +15 -0
- package/esm/SankeyChart/sankeyClasses.js +19 -0
- package/esm/SankeyChart/sankeySlots.types.d.ts +24 -0
- package/esm/SankeyChart/sankeySlots.types.js +1 -0
- package/esm/SankeyChart/seriesConfig/getSeriesWithDefaultValues.d.ts +2 -0
- package/esm/SankeyChart/seriesConfig/getSeriesWithDefaultValues.js +47 -0
- package/esm/SankeyChart/seriesConfig/index.d.ts +2 -0
- package/esm/SankeyChart/seriesConfig/index.js +14 -0
- package/esm/SankeyChart/seriesConfig/tooltipGetter.d.ts +2 -0
- package/esm/SankeyChart/seriesConfig/tooltipGetter.js +39 -0
- package/esm/SankeyChart/useSankeyChartProps.d.ts +22 -0
- package/esm/SankeyChart/useSankeyChartProps.js +70 -0
- package/esm/SankeyChart/utils.d.ts +3 -0
- package/esm/SankeyChart/utils.js +14 -0
- package/esm/ScatterChartPro/ScatterChartPro.js +1 -37
- package/esm/hooks/useSankeySeries.d.ts +33 -0
- package/esm/hooks/useSankeySeries.js +42 -0
- package/esm/index.d.ts +1 -0
- package/esm/index.js +2 -1
- package/esm/internals/plugins/allPlugins.d.ts +2 -2
- package/esm/typeOverloads/modules.d.ts +11 -0
- package/hooks/useSankeySeries.d.ts +33 -0
- package/hooks/useSankeySeries.js +48 -0
- package/index.d.ts +1 -0
- package/index.js +13 -1
- package/internals/plugins/allPlugins.d.ts +2 -2
- package/package.json +6 -6
- package/typeOverloads/modules.d.ts +11 -0
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
|
|
4
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.SankeyLinkLabel = void 0;
|
|
9
|
+
var React = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _styles = require("@mui/material/styles");
|
|
11
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
|
+
const getLinkMidpoint = link => {
|
|
13
|
+
if (link.y0 === undefined || link.y1 === undefined) {
|
|
14
|
+
return {
|
|
15
|
+
x: 0,
|
|
16
|
+
y: 0
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
// For Sankey links, we can calculate the midpoint using the source and target positions
|
|
21
|
+
const sourceX = link.source.x1 || 0;
|
|
22
|
+
const sourceY = (link.y0 + link.y1) / 2;
|
|
23
|
+
const targetX = link.target.x0 || 0;
|
|
24
|
+
const targetY = (link.y0 + link.y1) / 2;
|
|
25
|
+
return {
|
|
26
|
+
x: (sourceX + targetX) / 2,
|
|
27
|
+
y: (sourceY + targetY) / 2
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* @ignore - internal component.
|
|
33
|
+
*/
|
|
34
|
+
const SankeyLinkLabel = exports.SankeyLinkLabel = /*#__PURE__*/React.forwardRef(function SankeyLinkLabel(props, ref) {
|
|
35
|
+
const {
|
|
36
|
+
link
|
|
37
|
+
} = props;
|
|
38
|
+
const theme = (0, _styles.useTheme)();
|
|
39
|
+
if (!link.path || link.y0 === undefined || link.y1 === undefined) {
|
|
40
|
+
return null; // No path defined or invalid coordinates, nothing to render
|
|
41
|
+
}
|
|
42
|
+
const midpoint = getLinkMidpoint(link);
|
|
43
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("text", {
|
|
44
|
+
ref: ref,
|
|
45
|
+
x: midpoint.x,
|
|
46
|
+
y: midpoint.y,
|
|
47
|
+
textAnchor: "middle",
|
|
48
|
+
dominantBaseline: "middle",
|
|
49
|
+
fontSize: theme.typography.caption.fontSize,
|
|
50
|
+
fill: (theme.vars || theme).palette.text.primary,
|
|
51
|
+
"data-link-source": link.source.id,
|
|
52
|
+
"data-link-target": link.target.id,
|
|
53
|
+
fontFamily: theme.typography.fontFamily,
|
|
54
|
+
pointerEvents: "none",
|
|
55
|
+
children: link.value
|
|
56
|
+
});
|
|
57
|
+
});
|
|
58
|
+
if (process.env.NODE_ENV !== "production") SankeyLinkLabel.displayName = "SankeyLinkLabel";
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { SeriesId } from '@mui/x-charts/internals';
|
|
3
|
+
import { SankeyLayoutNode, type SankeyNodeIdentifierWithData } from "./sankey.types.js";
|
|
4
|
+
export interface SankeyNodeElementProps {
|
|
5
|
+
/**
|
|
6
|
+
* The series ID to which the node belongs
|
|
7
|
+
*/
|
|
8
|
+
seriesId: SeriesId;
|
|
9
|
+
/**
|
|
10
|
+
* The node data
|
|
11
|
+
*/
|
|
12
|
+
node: SankeyLayoutNode;
|
|
13
|
+
/**
|
|
14
|
+
* Whether to show the node label
|
|
15
|
+
*/
|
|
16
|
+
showLabel?: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Callback fired when a sankey item is clicked.
|
|
19
|
+
* @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
|
|
20
|
+
* @param {SankeyNodeIdentifierWithData} node The sankey node identifier.
|
|
21
|
+
*/
|
|
22
|
+
onClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* @ignore - internal component.
|
|
26
|
+
*/
|
|
27
|
+
export declare const SankeyNodeElement: React.ForwardRefExoticComponent<SankeyNodeElementProps & React.RefAttributes<SVGGElement>>;
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
|
|
4
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
5
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
6
|
+
Object.defineProperty(exports, "__esModule", {
|
|
7
|
+
value: true
|
|
8
|
+
});
|
|
9
|
+
exports.SankeyNodeElement = void 0;
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
var React = _interopRequireWildcard(require("react"));
|
|
12
|
+
var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
|
|
13
|
+
var _internals = require("@mui/x-charts/internals");
|
|
14
|
+
var _styles = require("@mui/material/styles");
|
|
15
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
16
|
+
/**
|
|
17
|
+
* @ignore - internal component.
|
|
18
|
+
*/
|
|
19
|
+
const SankeyNodeElement = exports.SankeyNodeElement = /*#__PURE__*/React.forwardRef(function SankeyNodeElement(props, ref) {
|
|
20
|
+
const {
|
|
21
|
+
node,
|
|
22
|
+
showLabel = true,
|
|
23
|
+
onClick,
|
|
24
|
+
seriesId
|
|
25
|
+
} = props;
|
|
26
|
+
const theme = (0, _styles.useTheme)();
|
|
27
|
+
const x0 = node.x0 ?? 0;
|
|
28
|
+
const y0 = node.y0 ?? 0;
|
|
29
|
+
const x1 = node.x1 ?? 0;
|
|
30
|
+
const y1 = node.y1 ?? 0;
|
|
31
|
+
const nodeWidth = x1 - x0;
|
|
32
|
+
const nodeHeight = y1 - y0;
|
|
33
|
+
|
|
34
|
+
// Determine label position
|
|
35
|
+
const labelX = node.depth === 0 ? x1 + 6 // Right side for first column
|
|
36
|
+
: x0 - 6; // Left side for other columns
|
|
37
|
+
|
|
38
|
+
const labelAnchor = node.depth === 0 ? 'start' : 'end';
|
|
39
|
+
const identifier = {
|
|
40
|
+
type: 'sankey',
|
|
41
|
+
seriesId,
|
|
42
|
+
subType: 'node',
|
|
43
|
+
nodeId: node.id,
|
|
44
|
+
node
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
// Add interaction props for tooltips
|
|
48
|
+
const interactionProps = (0, _internals.useInteractionItemProps)(identifier);
|
|
49
|
+
const handleClick = (0, _useEventCallback.default)(event => {
|
|
50
|
+
onClick?.(event, identifier);
|
|
51
|
+
});
|
|
52
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
|
|
53
|
+
ref: ref,
|
|
54
|
+
"data-node": node.id,
|
|
55
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", (0, _extends2.default)({
|
|
56
|
+
x: node.x0,
|
|
57
|
+
y: node.y0,
|
|
58
|
+
width: nodeWidth,
|
|
59
|
+
height: nodeHeight,
|
|
60
|
+
fill: node.color,
|
|
61
|
+
onClick: onClick ? handleClick : undefined,
|
|
62
|
+
cursor: onClick ? 'pointer' : 'default',
|
|
63
|
+
stroke: "none"
|
|
64
|
+
}, interactionProps)), showLabel && node.label && /*#__PURE__*/(0, _jsxRuntime.jsx)("text", {
|
|
65
|
+
x: labelX,
|
|
66
|
+
y: (y0 + y1) / 2,
|
|
67
|
+
textAnchor: labelAnchor,
|
|
68
|
+
fill: (theme.vars || theme).palette.text.primary,
|
|
69
|
+
fontSize: theme.typography.caption.fontSize,
|
|
70
|
+
fontFamily: theme.typography.fontFamily,
|
|
71
|
+
pointerEvents: "none",
|
|
72
|
+
children: node.label
|
|
73
|
+
})]
|
|
74
|
+
});
|
|
75
|
+
});
|
|
76
|
+
if (process.env.NODE_ENV !== "production") SankeyNodeElement.displayName = "SankeyNodeElement";
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { type SankeyLinkIdentifierWithData, type SankeyNodeIdentifierWithData } from "./sankey.types.js";
|
|
3
|
+
import { type SankeyPlotClasses } from "./sankeyClasses.js";
|
|
4
|
+
export interface SankeyPlotProps {
|
|
5
|
+
/**
|
|
6
|
+
* Classes applied to the various elements.
|
|
7
|
+
*/
|
|
8
|
+
classes?: Partial<SankeyPlotClasses>;
|
|
9
|
+
/**
|
|
10
|
+
* Callback fired when a sankey item is clicked.
|
|
11
|
+
* @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
|
|
12
|
+
* @param {SankeyNodeIdentifierWithData} node The sankey node identifier.
|
|
13
|
+
*/
|
|
14
|
+
onNodeClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void;
|
|
15
|
+
/**
|
|
16
|
+
* Callback fired when a sankey item is clicked.
|
|
17
|
+
* @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
|
|
18
|
+
* @param {SankeyLinkIdentifierWithData} link The sankey link identifier.
|
|
19
|
+
*/
|
|
20
|
+
onLinkClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Renders a Sankey diagram plot.
|
|
24
|
+
*/
|
|
25
|
+
declare function SankeyPlot(props: SankeyPlotProps): React.JSX.Element | null;
|
|
26
|
+
declare namespace SankeyPlot {
|
|
27
|
+
var propTypes: any;
|
|
28
|
+
}
|
|
29
|
+
export { SankeyPlot };
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
5
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
6
|
+
Object.defineProperty(exports, "__esModule", {
|
|
7
|
+
value: true
|
|
8
|
+
});
|
|
9
|
+
exports.SankeyPlot = SankeyPlot;
|
|
10
|
+
var React = _interopRequireWildcard(require("react"));
|
|
11
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
12
|
+
var _styles = require("@mui/material/styles");
|
|
13
|
+
var _hooks = require("@mui/x-charts/hooks");
|
|
14
|
+
var _calculateSankeyLayout = require("./calculateSankeyLayout");
|
|
15
|
+
var _SankeyNodeElement = require("./SankeyNodeElement");
|
|
16
|
+
var _SankeyLinkElement = require("./SankeyLinkElement");
|
|
17
|
+
var _SankeyLinkLabel = require("./SankeyLinkLabel");
|
|
18
|
+
var _useSankeySeries = require("../hooks/useSankeySeries");
|
|
19
|
+
var _sankeyClasses = require("./sankeyClasses");
|
|
20
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
21
|
+
/**
|
|
22
|
+
* Renders a Sankey diagram plot.
|
|
23
|
+
*/
|
|
24
|
+
function SankeyPlot(props) {
|
|
25
|
+
const {
|
|
26
|
+
classes: inputClasses,
|
|
27
|
+
onLinkClick,
|
|
28
|
+
onNodeClick
|
|
29
|
+
} = props;
|
|
30
|
+
const seriesContext = (0, _useSankeySeries.useSankeySeriesContext)();
|
|
31
|
+
if (!seriesContext) {
|
|
32
|
+
throw new Error(`MUI X Charts: Sankey series context is missing. Ensure the SankeyPlot is used inside a properly configured ChartDataProviderPro.`);
|
|
33
|
+
}
|
|
34
|
+
const series = seriesContext.series[seriesContext.seriesOrder?.[0]];
|
|
35
|
+
const classes = (0, _sankeyClasses.useUtilityClasses)({
|
|
36
|
+
classes: inputClasses
|
|
37
|
+
});
|
|
38
|
+
const drawingArea = (0, _hooks.useDrawingArea)();
|
|
39
|
+
const {
|
|
40
|
+
data,
|
|
41
|
+
linkOptions,
|
|
42
|
+
nodeOptions
|
|
43
|
+
} = series;
|
|
44
|
+
const theme = (0, _styles.useTheme)();
|
|
45
|
+
|
|
46
|
+
// Calculate layout based on data and dimensions
|
|
47
|
+
const layout = React.useMemo(() => (0, _calculateSankeyLayout.calculateSankeyLayout)(data, drawingArea, theme, series), [drawingArea, data, series, theme]);
|
|
48
|
+
|
|
49
|
+
// Early return if no data or dimensions
|
|
50
|
+
if (!data || !data.links) {
|
|
51
|
+
return null;
|
|
52
|
+
}
|
|
53
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
|
|
54
|
+
className: classes.root,
|
|
55
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
|
|
56
|
+
className: classes.links,
|
|
57
|
+
children: layout.links.map(link => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SankeyLinkElement.SankeyLinkElement, {
|
|
58
|
+
seriesId: series.id,
|
|
59
|
+
link: link,
|
|
60
|
+
opacity: linkOptions?.opacity,
|
|
61
|
+
onClick: onLinkClick
|
|
62
|
+
}, `${link.source.id}-${link.target.id}`))
|
|
63
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
|
|
64
|
+
className: classes.nodes,
|
|
65
|
+
children: layout.nodes.map(node => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SankeyNodeElement.SankeyNodeElement, {
|
|
66
|
+
seriesId: series.id,
|
|
67
|
+
node: node,
|
|
68
|
+
showLabel: nodeOptions?.showLabels,
|
|
69
|
+
onClick: onNodeClick
|
|
70
|
+
}, node.id))
|
|
71
|
+
}), linkOptions?.showValues && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
|
|
72
|
+
className: classes.linkLabels,
|
|
73
|
+
children: layout.links.map(link => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SankeyLinkLabel.SankeyLinkLabel, {
|
|
74
|
+
link: link
|
|
75
|
+
}, `label-${link.source.id}-${link.target.id}`))
|
|
76
|
+
})]
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
process.env.NODE_ENV !== "production" ? SankeyPlot.propTypes = {
|
|
80
|
+
// ----------------------------- Warning --------------------------------
|
|
81
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
82
|
+
// | To update them edit the TypeScript types and run "pnpm proptypes" |
|
|
83
|
+
// ----------------------------------------------------------------------
|
|
84
|
+
/**
|
|
85
|
+
* Classes applied to the various elements.
|
|
86
|
+
*/
|
|
87
|
+
classes: _propTypes.default.object,
|
|
88
|
+
/**
|
|
89
|
+
* Callback fired when a sankey item is clicked.
|
|
90
|
+
* @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
|
|
91
|
+
* @param {SankeyLinkIdentifierWithData} link The sankey link identifier.
|
|
92
|
+
*/
|
|
93
|
+
onLinkClick: _propTypes.default.func,
|
|
94
|
+
/**
|
|
95
|
+
* Callback fired when a sankey item is clicked.
|
|
96
|
+
* @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
|
|
97
|
+
* @param {SankeyNodeIdentifierWithData} node The sankey node identifier.
|
|
98
|
+
*/
|
|
99
|
+
onNodeClick: _propTypes.default.func
|
|
100
|
+
} : void 0;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.useUtilityClasses = void 0;
|
|
8
|
+
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
|
|
9
|
+
var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
|
|
10
|
+
const useUtilityClasses = props => {
|
|
11
|
+
const {
|
|
12
|
+
classes
|
|
13
|
+
} = props;
|
|
14
|
+
const slots = {
|
|
15
|
+
root: ['root'],
|
|
16
|
+
paper: ['paper'],
|
|
17
|
+
table: ['table'],
|
|
18
|
+
row: ['row'],
|
|
19
|
+
cell: ['cell'],
|
|
20
|
+
mark: ['mark'],
|
|
21
|
+
markContainer: ['markContainer'],
|
|
22
|
+
labelCell: ['labelCell'],
|
|
23
|
+
valueCell: ['valueCell']
|
|
24
|
+
};
|
|
25
|
+
return (0, _composeClasses.default)(slots, _ChartsTooltip.getChartsTooltipUtilityClass, classes);
|
|
26
|
+
};
|
|
27
|
+
exports.useUtilityClasses = useUtilityClasses;
|
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
|
|
4
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
5
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
6
|
+
Object.defineProperty(exports, "__esModule", {
|
|
7
|
+
value: true
|
|
8
|
+
});
|
|
9
|
+
exports.SankeyTooltip = SankeyTooltip;
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
var React = _interopRequireWildcard(require("react"));
|
|
12
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
+
var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
|
|
14
|
+
var _SankeyTooltipContent = require("./SankeyTooltipContent");
|
|
15
|
+
var _SankeyTooltip = require("./SankeyTooltip.classes");
|
|
16
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
|
+
function SankeyTooltip(props) {
|
|
18
|
+
const classes = (0, _SankeyTooltip.useUtilityClasses)(props);
|
|
19
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipContainer, (0, _extends2.default)({
|
|
20
|
+
trigger: "item"
|
|
21
|
+
}, props, {
|
|
22
|
+
classes: classes,
|
|
23
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SankeyTooltipContent.SankeyTooltipContent, {
|
|
24
|
+
classes: classes
|
|
25
|
+
})
|
|
26
|
+
}));
|
|
27
|
+
}
|
|
28
|
+
process.env.NODE_ENV !== "production" ? SankeyTooltip.propTypes = {
|
|
29
|
+
// ----------------------------- Warning --------------------------------
|
|
30
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
31
|
+
// | To update them edit the TypeScript types and run "pnpm proptypes" |
|
|
32
|
+
// ----------------------------------------------------------------------
|
|
33
|
+
/**
|
|
34
|
+
* An HTML element, [virtualElement](https://popper.js.org/docs/v2/virtual-elements/),
|
|
35
|
+
* or a function that returns either.
|
|
36
|
+
* It's used to set the position of the popper.
|
|
37
|
+
* The return value will passed as the reference object of the Popper instance.
|
|
38
|
+
*/
|
|
39
|
+
anchorEl: _propTypes.default.oneOfType([(props, propName) => {
|
|
40
|
+
if (props[propName] == null) {
|
|
41
|
+
return new Error(`Prop '${propName}' is required but wasn't specified`);
|
|
42
|
+
}
|
|
43
|
+
if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
|
|
44
|
+
return new Error(`Expected prop '${propName}' to be of type Element`);
|
|
45
|
+
}
|
|
46
|
+
return null;
|
|
47
|
+
}, _propTypes.default.func, _propTypes.default.shape({
|
|
48
|
+
contextElement: (props, propName) => {
|
|
49
|
+
if (props[propName] == null) {
|
|
50
|
+
return null;
|
|
51
|
+
}
|
|
52
|
+
if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
|
|
53
|
+
return new Error(`Expected prop '${propName}' to be of type Element`);
|
|
54
|
+
}
|
|
55
|
+
return null;
|
|
56
|
+
},
|
|
57
|
+
getBoundingClientRect: _propTypes.default.func.isRequired
|
|
58
|
+
})]),
|
|
59
|
+
/**
|
|
60
|
+
* Override or extend the styles applied to the component.
|
|
61
|
+
*/
|
|
62
|
+
classes: _propTypes.default.object,
|
|
63
|
+
/**
|
|
64
|
+
* The component used for the root node.
|
|
65
|
+
* Either a string to use a HTML element or a component.
|
|
66
|
+
*/
|
|
67
|
+
component: _propTypes.default.elementType,
|
|
68
|
+
/**
|
|
69
|
+
* The components used for each slot inside the Popper.
|
|
70
|
+
* Either a string to use a HTML element or a component.
|
|
71
|
+
*
|
|
72
|
+
* @deprecated use the `slots` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
|
|
73
|
+
* @default {}
|
|
74
|
+
*/
|
|
75
|
+
components: _propTypes.default.shape({
|
|
76
|
+
Root: _propTypes.default.elementType
|
|
77
|
+
}),
|
|
78
|
+
/**
|
|
79
|
+
* The props used for each slot inside the Popper.
|
|
80
|
+
*
|
|
81
|
+
* @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
|
|
82
|
+
* @default {}
|
|
83
|
+
*/
|
|
84
|
+
componentsProps: _propTypes.default.shape({
|
|
85
|
+
root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
|
|
86
|
+
}),
|
|
87
|
+
/**
|
|
88
|
+
* An HTML element or function that returns one.
|
|
89
|
+
* The `container` will have the portal children appended to it.
|
|
90
|
+
*
|
|
91
|
+
* You can also provide a callback, which is called in a React layout effect.
|
|
92
|
+
* This lets you set the container from a ref, and also makes server-side rendering possible.
|
|
93
|
+
*
|
|
94
|
+
* By default, it uses the body of the top-level document object,
|
|
95
|
+
* so it's simply `document.body` most of the time.
|
|
96
|
+
*/
|
|
97
|
+
container: _propTypes.default.oneOfType([(props, propName) => {
|
|
98
|
+
if (props[propName] == null) {
|
|
99
|
+
return new Error(`Prop '${propName}' is required but wasn't specified`);
|
|
100
|
+
}
|
|
101
|
+
if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
|
|
102
|
+
return new Error(`Expected prop '${propName}' to be of type Element`);
|
|
103
|
+
}
|
|
104
|
+
return null;
|
|
105
|
+
}, _propTypes.default.func]),
|
|
106
|
+
/**
|
|
107
|
+
* The `children` will be under the DOM hierarchy of the parent component.
|
|
108
|
+
* @default false
|
|
109
|
+
*/
|
|
110
|
+
disablePortal: _propTypes.default.bool,
|
|
111
|
+
/**
|
|
112
|
+
* Always keep the children in the DOM.
|
|
113
|
+
* This prop can be useful in SEO situation or
|
|
114
|
+
* when you want to maximize the responsiveness of the Popper.
|
|
115
|
+
* @default false
|
|
116
|
+
*/
|
|
117
|
+
keepMounted: _propTypes.default.bool,
|
|
118
|
+
/**
|
|
119
|
+
* Popper.js is based on a "plugin-like" architecture,
|
|
120
|
+
* most of its features are fully encapsulated "modifiers".
|
|
121
|
+
*
|
|
122
|
+
* A modifier is a function that is called each time Popper.js needs to
|
|
123
|
+
* compute the position of the popper.
|
|
124
|
+
* For this reason, modifiers should be very performant to avoid bottlenecks.
|
|
125
|
+
* To learn how to create a modifier, [read the modifiers documentation](https://popper.js.org/docs/v2/modifiers/).
|
|
126
|
+
*/
|
|
127
|
+
modifiers: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
128
|
+
data: _propTypes.default.object,
|
|
129
|
+
effect: _propTypes.default.func,
|
|
130
|
+
enabled: _propTypes.default.bool,
|
|
131
|
+
fn: _propTypes.default.func,
|
|
132
|
+
name: _propTypes.default.any,
|
|
133
|
+
options: _propTypes.default.object,
|
|
134
|
+
phase: _propTypes.default.oneOf(['afterMain', 'afterRead', 'afterWrite', 'beforeMain', 'beforeRead', 'beforeWrite', 'main', 'read', 'write']),
|
|
135
|
+
requires: _propTypes.default.arrayOf(_propTypes.default.string),
|
|
136
|
+
requiresIfExists: _propTypes.default.arrayOf(_propTypes.default.string)
|
|
137
|
+
})),
|
|
138
|
+
/**
|
|
139
|
+
* If `true`, the component is shown.
|
|
140
|
+
*/
|
|
141
|
+
open: _propTypes.default.bool,
|
|
142
|
+
/**
|
|
143
|
+
* Popper placement.
|
|
144
|
+
* @default 'bottom'
|
|
145
|
+
*/
|
|
146
|
+
placement: _propTypes.default.oneOf(['auto-end', 'auto-start', 'auto', 'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
|
|
147
|
+
/**
|
|
148
|
+
* Options provided to the [`Popper.js`](https://popper.js.org/docs/v2/constructors/#options) instance.
|
|
149
|
+
* @default {}
|
|
150
|
+
*/
|
|
151
|
+
popperOptions: _propTypes.default.shape({
|
|
152
|
+
modifiers: _propTypes.default.array,
|
|
153
|
+
onFirstUpdate: _propTypes.default.func,
|
|
154
|
+
placement: _propTypes.default.oneOf(['auto-end', 'auto-start', 'auto', 'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
|
|
155
|
+
strategy: _propTypes.default.oneOf(['absolute', 'fixed'])
|
|
156
|
+
}),
|
|
157
|
+
/**
|
|
158
|
+
* A ref that points to the used popper instance.
|
|
159
|
+
*/
|
|
160
|
+
popperRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
|
|
161
|
+
current: _propTypes.default.shape({
|
|
162
|
+
destroy: _propTypes.default.func.isRequired,
|
|
163
|
+
forceUpdate: _propTypes.default.func.isRequired,
|
|
164
|
+
setOptions: _propTypes.default.func.isRequired,
|
|
165
|
+
state: _propTypes.default.shape({
|
|
166
|
+
attributes: _propTypes.default.object.isRequired,
|
|
167
|
+
elements: _propTypes.default.object.isRequired,
|
|
168
|
+
modifiersData: _propTypes.default.object.isRequired,
|
|
169
|
+
options: _propTypes.default.object.isRequired,
|
|
170
|
+
orderedModifiers: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
|
|
171
|
+
placement: _propTypes.default.oneOf(['auto-end', 'auto-start', 'auto', 'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']).isRequired,
|
|
172
|
+
rects: _propTypes.default.object.isRequired,
|
|
173
|
+
reset: _propTypes.default.bool.isRequired,
|
|
174
|
+
scrollParents: _propTypes.default.object.isRequired,
|
|
175
|
+
strategy: _propTypes.default.oneOf(['absolute', 'fixed']).isRequired,
|
|
176
|
+
styles: _propTypes.default.object.isRequired
|
|
177
|
+
}).isRequired,
|
|
178
|
+
update: _propTypes.default.func.isRequired
|
|
179
|
+
})
|
|
180
|
+
})]),
|
|
181
|
+
/**
|
|
182
|
+
* The props used for each slot inside the Popper.
|
|
183
|
+
* @default {}
|
|
184
|
+
*/
|
|
185
|
+
slotProps: _propTypes.default.object,
|
|
186
|
+
/**
|
|
187
|
+
* The components used for each slot inside the Popper.
|
|
188
|
+
* Either a string to use a HTML element or a component.
|
|
189
|
+
* @default {}
|
|
190
|
+
*/
|
|
191
|
+
slots: _propTypes.default.object,
|
|
192
|
+
/**
|
|
193
|
+
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
194
|
+
*/
|
|
195
|
+
sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
|
|
196
|
+
/**
|
|
197
|
+
* Help supporting a react-transition-group/Transition component.
|
|
198
|
+
* @default false
|
|
199
|
+
*/
|
|
200
|
+
transition: _propTypes.default.bool,
|
|
201
|
+
/**
|
|
202
|
+
* Select the kind of tooltip to display
|
|
203
|
+
* - 'item': Shows data about the item below the mouse.
|
|
204
|
+
* - 'none': Does not display tooltip
|
|
205
|
+
* @default 'item'
|
|
206
|
+
*/
|
|
207
|
+
trigger: _propTypes.default.oneOf(['item', 'none'])
|
|
208
|
+
} : void 0;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ChartsTooltipContainerProps } from '@mui/x-charts/ChartsTooltip';
|
|
2
|
+
export interface SankeyTooltipProps extends Omit<ChartsTooltipContainerProps, 'trigger' | 'children'> {
|
|
3
|
+
/**
|
|
4
|
+
* Select the kind of tooltip to display
|
|
5
|
+
* - 'item': Shows data about the item below the mouse.
|
|
6
|
+
* - 'none': Does not display tooltip
|
|
7
|
+
* @default 'item'
|
|
8
|
+
*/
|
|
9
|
+
trigger?: 'item' | 'none';
|
|
10
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { SankeyTooltipProps } from "./SankeyTooltip.types.js";
|
|
3
|
+
export interface SankeyTooltipContentProps extends Pick<SankeyTooltipProps, 'classes'> {}
|
|
4
|
+
export declare function SankeyTooltipContent(props: SankeyTooltipContentProps): React.JSX.Element | null;
|
|
5
|
+
export declare namespace SankeyTooltipContent {
|
|
6
|
+
var propTypes: any;
|
|
7
|
+
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
5
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
6
|
+
Object.defineProperty(exports, "__esModule", {
|
|
7
|
+
value: true
|
|
8
|
+
});
|
|
9
|
+
exports.SankeyTooltipContent = SankeyTooltipContent;
|
|
10
|
+
var React = _interopRequireWildcard(require("react"));
|
|
11
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
12
|
+
var _clsx = _interopRequireDefault(require("clsx"));
|
|
13
|
+
var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
|
|
14
|
+
var _internals = require("@mui/x-charts/internals");
|
|
15
|
+
var _SankeyTooltip = require("./SankeyTooltip.classes");
|
|
16
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
|
+
function SankeyTooltipContent(props) {
|
|
18
|
+
const classes = (0, _SankeyTooltip.useUtilityClasses)(props);
|
|
19
|
+
const tooltipData = (0, _ChartsTooltip.useItemTooltip)();
|
|
20
|
+
if (!tooltipData) {
|
|
21
|
+
return null;
|
|
22
|
+
}
|
|
23
|
+
const {
|
|
24
|
+
color,
|
|
25
|
+
formattedValue,
|
|
26
|
+
markType,
|
|
27
|
+
label
|
|
28
|
+
} = tooltipData;
|
|
29
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipPaper, {
|
|
30
|
+
className: classes.paper,
|
|
31
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipTable, {
|
|
32
|
+
className: classes.table,
|
|
33
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
|
|
34
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltip.ChartsTooltipRow, {
|
|
35
|
+
className: classes.row,
|
|
36
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltip.ChartsTooltipCell, {
|
|
37
|
+
className: (0, _clsx.default)(classes.cell),
|
|
38
|
+
component: "th",
|
|
39
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
40
|
+
className: classes.markContainer,
|
|
41
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.ChartsLabelMark, {
|
|
42
|
+
type: markType,
|
|
43
|
+
color: color,
|
|
44
|
+
className: classes.mark
|
|
45
|
+
})
|
|
46
|
+
}), label]
|
|
47
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
|
|
48
|
+
className: (0, _clsx.default)(classes.valueCell, classes.cell),
|
|
49
|
+
component: "td",
|
|
50
|
+
children: formattedValue
|
|
51
|
+
})]
|
|
52
|
+
})
|
|
53
|
+
})
|
|
54
|
+
})
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
process.env.NODE_ENV !== "production" ? SankeyTooltipContent.propTypes = {
|
|
58
|
+
// ----------------------------- Warning --------------------------------
|
|
59
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
60
|
+
// | To update them edit the TypeScript types and run "pnpm proptypes" |
|
|
61
|
+
// ----------------------------------------------------------------------
|
|
62
|
+
/**
|
|
63
|
+
* Override or extend the styles applied to the component.
|
|
64
|
+
*/
|
|
65
|
+
classes: _propTypes.default.object
|
|
66
|
+
} : void 0;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
var _SankeyTooltip = require("./SankeyTooltip");
|
|
7
|
+
Object.keys(_SankeyTooltip).forEach(function (key) {
|
|
8
|
+
if (key === "default" || key === "__esModule") return;
|
|
9
|
+
if (key in exports && exports[key] === _SankeyTooltip[key]) return;
|
|
10
|
+
Object.defineProperty(exports, key, {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function () {
|
|
13
|
+
return _SankeyTooltip[key];
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
});
|
|
17
|
+
var _SankeyTooltipContent = require("./SankeyTooltipContent");
|
|
18
|
+
Object.keys(_SankeyTooltipContent).forEach(function (key) {
|
|
19
|
+
if (key === "default" || key === "__esModule") return;
|
|
20
|
+
if (key in exports && exports[key] === _SankeyTooltipContent[key]) return;
|
|
21
|
+
Object.defineProperty(exports, key, {
|
|
22
|
+
enumerable: true,
|
|
23
|
+
get: function () {
|
|
24
|
+
return _SankeyTooltipContent[key];
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
});
|