@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,202 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import PropTypes from 'prop-types';
|
|
6
|
+
import { ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip';
|
|
7
|
+
import { SankeyTooltipContent } from "./SankeyTooltipContent.js";
|
|
8
|
+
import { useUtilityClasses } from "./SankeyTooltip.classes.js";
|
|
9
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
+
function SankeyTooltip(props) {
|
|
11
|
+
const classes = useUtilityClasses(props);
|
|
12
|
+
return /*#__PURE__*/_jsx(ChartsTooltipContainer, _extends({
|
|
13
|
+
trigger: "item"
|
|
14
|
+
}, props, {
|
|
15
|
+
classes: classes,
|
|
16
|
+
children: /*#__PURE__*/_jsx(SankeyTooltipContent, {
|
|
17
|
+
classes: classes
|
|
18
|
+
})
|
|
19
|
+
}));
|
|
20
|
+
}
|
|
21
|
+
process.env.NODE_ENV !== "production" ? SankeyTooltip.propTypes = {
|
|
22
|
+
// ----------------------------- Warning --------------------------------
|
|
23
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
24
|
+
// | To update them edit the TypeScript types and run "pnpm proptypes" |
|
|
25
|
+
// ----------------------------------------------------------------------
|
|
26
|
+
/**
|
|
27
|
+
* An HTML element, [virtualElement](https://popper.js.org/docs/v2/virtual-elements/),
|
|
28
|
+
* or a function that returns either.
|
|
29
|
+
* It's used to set the position of the popper.
|
|
30
|
+
* The return value will passed as the reference object of the Popper instance.
|
|
31
|
+
*/
|
|
32
|
+
anchorEl: PropTypes.oneOfType([(props, propName) => {
|
|
33
|
+
if (props[propName] == null) {
|
|
34
|
+
return new Error(`Prop '${propName}' is required but wasn't specified`);
|
|
35
|
+
}
|
|
36
|
+
if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
|
|
37
|
+
return new Error(`Expected prop '${propName}' to be of type Element`);
|
|
38
|
+
}
|
|
39
|
+
return null;
|
|
40
|
+
}, PropTypes.func, PropTypes.shape({
|
|
41
|
+
contextElement: (props, propName) => {
|
|
42
|
+
if (props[propName] == null) {
|
|
43
|
+
return null;
|
|
44
|
+
}
|
|
45
|
+
if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
|
|
46
|
+
return new Error(`Expected prop '${propName}' to be of type Element`);
|
|
47
|
+
}
|
|
48
|
+
return null;
|
|
49
|
+
},
|
|
50
|
+
getBoundingClientRect: PropTypes.func.isRequired
|
|
51
|
+
})]),
|
|
52
|
+
/**
|
|
53
|
+
* Override or extend the styles applied to the component.
|
|
54
|
+
*/
|
|
55
|
+
classes: PropTypes.object,
|
|
56
|
+
/**
|
|
57
|
+
* The component used for the root node.
|
|
58
|
+
* Either a string to use a HTML element or a component.
|
|
59
|
+
*/
|
|
60
|
+
component: PropTypes.elementType,
|
|
61
|
+
/**
|
|
62
|
+
* The components used for each slot inside the Popper.
|
|
63
|
+
* Either a string to use a HTML element or a component.
|
|
64
|
+
*
|
|
65
|
+
* @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/).
|
|
66
|
+
* @default {}
|
|
67
|
+
*/
|
|
68
|
+
components: PropTypes.shape({
|
|
69
|
+
Root: PropTypes.elementType
|
|
70
|
+
}),
|
|
71
|
+
/**
|
|
72
|
+
* The props used for each slot inside the Popper.
|
|
73
|
+
*
|
|
74
|
+
* @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/).
|
|
75
|
+
* @default {}
|
|
76
|
+
*/
|
|
77
|
+
componentsProps: PropTypes.shape({
|
|
78
|
+
root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
|
|
79
|
+
}),
|
|
80
|
+
/**
|
|
81
|
+
* An HTML element or function that returns one.
|
|
82
|
+
* The `container` will have the portal children appended to it.
|
|
83
|
+
*
|
|
84
|
+
* You can also provide a callback, which is called in a React layout effect.
|
|
85
|
+
* This lets you set the container from a ref, and also makes server-side rendering possible.
|
|
86
|
+
*
|
|
87
|
+
* By default, it uses the body of the top-level document object,
|
|
88
|
+
* so it's simply `document.body` most of the time.
|
|
89
|
+
*/
|
|
90
|
+
container: PropTypes.oneOfType([(props, propName) => {
|
|
91
|
+
if (props[propName] == null) {
|
|
92
|
+
return new Error(`Prop '${propName}' is required but wasn't specified`);
|
|
93
|
+
}
|
|
94
|
+
if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
|
|
95
|
+
return new Error(`Expected prop '${propName}' to be of type Element`);
|
|
96
|
+
}
|
|
97
|
+
return null;
|
|
98
|
+
}, PropTypes.func]),
|
|
99
|
+
/**
|
|
100
|
+
* The `children` will be under the DOM hierarchy of the parent component.
|
|
101
|
+
* @default false
|
|
102
|
+
*/
|
|
103
|
+
disablePortal: PropTypes.bool,
|
|
104
|
+
/**
|
|
105
|
+
* Always keep the children in the DOM.
|
|
106
|
+
* This prop can be useful in SEO situation or
|
|
107
|
+
* when you want to maximize the responsiveness of the Popper.
|
|
108
|
+
* @default false
|
|
109
|
+
*/
|
|
110
|
+
keepMounted: PropTypes.bool,
|
|
111
|
+
/**
|
|
112
|
+
* Popper.js is based on a "plugin-like" architecture,
|
|
113
|
+
* most of its features are fully encapsulated "modifiers".
|
|
114
|
+
*
|
|
115
|
+
* A modifier is a function that is called each time Popper.js needs to
|
|
116
|
+
* compute the position of the popper.
|
|
117
|
+
* For this reason, modifiers should be very performant to avoid bottlenecks.
|
|
118
|
+
* To learn how to create a modifier, [read the modifiers documentation](https://popper.js.org/docs/v2/modifiers/).
|
|
119
|
+
*/
|
|
120
|
+
modifiers: PropTypes.arrayOf(PropTypes.shape({
|
|
121
|
+
data: PropTypes.object,
|
|
122
|
+
effect: PropTypes.func,
|
|
123
|
+
enabled: PropTypes.bool,
|
|
124
|
+
fn: PropTypes.func,
|
|
125
|
+
name: PropTypes.any,
|
|
126
|
+
options: PropTypes.object,
|
|
127
|
+
phase: PropTypes.oneOf(['afterMain', 'afterRead', 'afterWrite', 'beforeMain', 'beforeRead', 'beforeWrite', 'main', 'read', 'write']),
|
|
128
|
+
requires: PropTypes.arrayOf(PropTypes.string),
|
|
129
|
+
requiresIfExists: PropTypes.arrayOf(PropTypes.string)
|
|
130
|
+
})),
|
|
131
|
+
/**
|
|
132
|
+
* If `true`, the component is shown.
|
|
133
|
+
*/
|
|
134
|
+
open: PropTypes.bool,
|
|
135
|
+
/**
|
|
136
|
+
* Popper placement.
|
|
137
|
+
* @default 'bottom'
|
|
138
|
+
*/
|
|
139
|
+
placement: PropTypes.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']),
|
|
140
|
+
/**
|
|
141
|
+
* Options provided to the [`Popper.js`](https://popper.js.org/docs/v2/constructors/#options) instance.
|
|
142
|
+
* @default {}
|
|
143
|
+
*/
|
|
144
|
+
popperOptions: PropTypes.shape({
|
|
145
|
+
modifiers: PropTypes.array,
|
|
146
|
+
onFirstUpdate: PropTypes.func,
|
|
147
|
+
placement: PropTypes.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']),
|
|
148
|
+
strategy: PropTypes.oneOf(['absolute', 'fixed'])
|
|
149
|
+
}),
|
|
150
|
+
/**
|
|
151
|
+
* A ref that points to the used popper instance.
|
|
152
|
+
*/
|
|
153
|
+
popperRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
|
|
154
|
+
current: PropTypes.shape({
|
|
155
|
+
destroy: PropTypes.func.isRequired,
|
|
156
|
+
forceUpdate: PropTypes.func.isRequired,
|
|
157
|
+
setOptions: PropTypes.func.isRequired,
|
|
158
|
+
state: PropTypes.shape({
|
|
159
|
+
attributes: PropTypes.object.isRequired,
|
|
160
|
+
elements: PropTypes.object.isRequired,
|
|
161
|
+
modifiersData: PropTypes.object.isRequired,
|
|
162
|
+
options: PropTypes.object.isRequired,
|
|
163
|
+
orderedModifiers: PropTypes.arrayOf(PropTypes.object).isRequired,
|
|
164
|
+
placement: PropTypes.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,
|
|
165
|
+
rects: PropTypes.object.isRequired,
|
|
166
|
+
reset: PropTypes.bool.isRequired,
|
|
167
|
+
scrollParents: PropTypes.object.isRequired,
|
|
168
|
+
strategy: PropTypes.oneOf(['absolute', 'fixed']).isRequired,
|
|
169
|
+
styles: PropTypes.object.isRequired
|
|
170
|
+
}).isRequired,
|
|
171
|
+
update: PropTypes.func.isRequired
|
|
172
|
+
})
|
|
173
|
+
})]),
|
|
174
|
+
/**
|
|
175
|
+
* The props used for each slot inside the Popper.
|
|
176
|
+
* @default {}
|
|
177
|
+
*/
|
|
178
|
+
slotProps: PropTypes.object,
|
|
179
|
+
/**
|
|
180
|
+
* The components used for each slot inside the Popper.
|
|
181
|
+
* Either a string to use a HTML element or a component.
|
|
182
|
+
* @default {}
|
|
183
|
+
*/
|
|
184
|
+
slots: PropTypes.object,
|
|
185
|
+
/**
|
|
186
|
+
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
187
|
+
*/
|
|
188
|
+
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
|
189
|
+
/**
|
|
190
|
+
* Help supporting a react-transition-group/Transition component.
|
|
191
|
+
* @default false
|
|
192
|
+
*/
|
|
193
|
+
transition: PropTypes.bool,
|
|
194
|
+
/**
|
|
195
|
+
* Select the kind of tooltip to display
|
|
196
|
+
* - 'item': Shows data about the item below the mouse.
|
|
197
|
+
* - 'none': Does not display tooltip
|
|
198
|
+
* @default 'item'
|
|
199
|
+
*/
|
|
200
|
+
trigger: PropTypes.oneOf(['item', 'none'])
|
|
201
|
+
} : void 0;
|
|
202
|
+
export { SankeyTooltip };
|
|
@@ -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 @@
|
|
|
1
|
+
export {};
|
|
@@ -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,59 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import PropTypes from 'prop-types';
|
|
5
|
+
import clsx from 'clsx';
|
|
6
|
+
import { ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipRow, ChartsTooltipCell, useItemTooltip } from '@mui/x-charts/ChartsTooltip';
|
|
7
|
+
import { ChartsLabelMark } from '@mui/x-charts/internals';
|
|
8
|
+
import { useUtilityClasses } from "./SankeyTooltip.classes.js";
|
|
9
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
|
+
export function SankeyTooltipContent(props) {
|
|
11
|
+
const classes = useUtilityClasses(props);
|
|
12
|
+
const tooltipData = useItemTooltip();
|
|
13
|
+
if (!tooltipData) {
|
|
14
|
+
return null;
|
|
15
|
+
}
|
|
16
|
+
const {
|
|
17
|
+
color,
|
|
18
|
+
formattedValue,
|
|
19
|
+
markType,
|
|
20
|
+
label
|
|
21
|
+
} = tooltipData;
|
|
22
|
+
return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
|
|
23
|
+
className: classes.paper,
|
|
24
|
+
children: /*#__PURE__*/_jsx(ChartsTooltipTable, {
|
|
25
|
+
className: classes.table,
|
|
26
|
+
children: /*#__PURE__*/_jsx("tbody", {
|
|
27
|
+
children: /*#__PURE__*/_jsxs(ChartsTooltipRow, {
|
|
28
|
+
className: classes.row,
|
|
29
|
+
children: [/*#__PURE__*/_jsxs(ChartsTooltipCell, {
|
|
30
|
+
className: clsx(classes.cell),
|
|
31
|
+
component: "th",
|
|
32
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
33
|
+
className: classes.markContainer,
|
|
34
|
+
children: /*#__PURE__*/_jsx(ChartsLabelMark, {
|
|
35
|
+
type: markType,
|
|
36
|
+
color: color,
|
|
37
|
+
className: classes.mark
|
|
38
|
+
})
|
|
39
|
+
}), label]
|
|
40
|
+
}), /*#__PURE__*/_jsx(ChartsTooltipCell, {
|
|
41
|
+
className: clsx(classes.valueCell, classes.cell),
|
|
42
|
+
component: "td",
|
|
43
|
+
children: formattedValue
|
|
44
|
+
})]
|
|
45
|
+
})
|
|
46
|
+
})
|
|
47
|
+
})
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
process.env.NODE_ENV !== "production" ? SankeyTooltipContent.propTypes = {
|
|
51
|
+
// ----------------------------- Warning --------------------------------
|
|
52
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
53
|
+
// | To update them edit the TypeScript types and run "pnpm proptypes" |
|
|
54
|
+
// ----------------------------------------------------------------------
|
|
55
|
+
/**
|
|
56
|
+
* Override or extend the styles applied to the component.
|
|
57
|
+
*/
|
|
58
|
+
classes: PropTypes.object
|
|
59
|
+
} : void 0;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { ChartDrawingArea } from '@mui/x-charts/hooks';
|
|
2
|
+
import type { Theme } from '@mui/material/styles';
|
|
3
|
+
import type { SankeySeriesType, SankeyLayout, SankeyLayoutLink, DefaultizedSankeySeriesType } from "./sankey.types.js";
|
|
4
|
+
/**
|
|
5
|
+
* Calculates the layout for a Sankey diagram using d3-sankey
|
|
6
|
+
*
|
|
7
|
+
* @param data The Sankey data (nodes and links)
|
|
8
|
+
* @param drawingArea The drawing area dimensions
|
|
9
|
+
* @param options Layout configuration options
|
|
10
|
+
* @returns The calculated layout
|
|
11
|
+
*/
|
|
12
|
+
export declare function calculateSankeyLayout(data: DefaultizedSankeySeriesType['data'], drawingArea: ChartDrawingArea, theme: Theme, series?: Pick<SankeySeriesType, 'nodeOptions' | 'linkOptions' | 'iterations'>): SankeyLayout;
|
|
13
|
+
export declare function improvedNaiveSankeyLinkPathHorizontal(link: SankeyLayoutLink, curveCorrection?: number): string;
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
4
|
+
import { sankey } from '@mui/x-charts-vendor/d3-sankey';
|
|
5
|
+
import { path } from '@mui/x-charts-vendor/d3-path';
|
|
6
|
+
import { getNodeAlignFunction } from "./utils.js";
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Calculates the layout for a Sankey diagram using d3-sankey
|
|
10
|
+
*
|
|
11
|
+
* @param data The Sankey data (nodes and links)
|
|
12
|
+
* @param drawingArea The drawing area dimensions
|
|
13
|
+
* @param options Layout configuration options
|
|
14
|
+
* @returns The calculated layout
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
export function calculateSankeyLayout(data, drawingArea, theme, series = {}) {
|
|
18
|
+
const {
|
|
19
|
+
iterations = 6,
|
|
20
|
+
nodeOptions,
|
|
21
|
+
linkOptions
|
|
22
|
+
} = series;
|
|
23
|
+
const {
|
|
24
|
+
width: nodeWidth = 15,
|
|
25
|
+
padding: nodePadding = 10,
|
|
26
|
+
align: nodeAlign = 'justify',
|
|
27
|
+
sort: nodeSort = null
|
|
28
|
+
} = nodeOptions ?? {};
|
|
29
|
+
const {
|
|
30
|
+
color: linkColor = (theme.vars || theme).palette.text.primary,
|
|
31
|
+
sort: linkSort = null,
|
|
32
|
+
curveCorrection = 10
|
|
33
|
+
} = linkOptions ?? {};
|
|
34
|
+
const {
|
|
35
|
+
width,
|
|
36
|
+
height,
|
|
37
|
+
left,
|
|
38
|
+
top,
|
|
39
|
+
bottom,
|
|
40
|
+
right
|
|
41
|
+
} = drawingArea;
|
|
42
|
+
if (!data || !data.links) {
|
|
43
|
+
return {
|
|
44
|
+
nodes: [],
|
|
45
|
+
links: []
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
// Prepare the data structure expected by d3-sankey
|
|
50
|
+
const graph = {
|
|
51
|
+
nodes: data.nodes.values().toArray().map(v => _extends({}, v)),
|
|
52
|
+
links: data.links.map(v => _extends({}, v))
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
// Create the sankey layout generator
|
|
56
|
+
let sankeyGenerator = sankey().nodeWidth(nodeWidth).nodePadding(nodePadding).nodeAlign(getNodeAlignFunction(nodeAlign)).extent([[left, top], [width + right, height + bottom]]).nodeId(d => d.id).iterations(iterations);
|
|
57
|
+
if (nodeSort) {
|
|
58
|
+
sankeyGenerator = sankeyGenerator.nodeSort(nodeSort);
|
|
59
|
+
}
|
|
60
|
+
if (linkSort) {
|
|
61
|
+
sankeyGenerator = sankeyGenerator.linkSort(linkSort);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
// Generate the layout
|
|
65
|
+
let result;
|
|
66
|
+
try {
|
|
67
|
+
result = sankeyGenerator(graph);
|
|
68
|
+
} catch (error) {
|
|
69
|
+
// There are two errors that can occur:
|
|
70
|
+
// 1. If the data contains circular references, d3-sankey will throw an error.
|
|
71
|
+
// 2. If there are missing source/target nodes, d3-sankey will throw an error.
|
|
72
|
+
// We handle the second case by building a map of nodes ourselves, so they are always present.
|
|
73
|
+
if (error instanceof Error && error.message === 'circular link') {
|
|
74
|
+
throw new Error('MUI X Charts: Sankey diagram contains circular references.');
|
|
75
|
+
}
|
|
76
|
+
throw error;
|
|
77
|
+
}
|
|
78
|
+
const {
|
|
79
|
+
nodes,
|
|
80
|
+
links
|
|
81
|
+
} = result;
|
|
82
|
+
|
|
83
|
+
// Convert d3-sankey links to our format
|
|
84
|
+
const layoutLinks = links.map(link => {
|
|
85
|
+
// Get the original link data
|
|
86
|
+
const originalLink = data.links.find(l => {
|
|
87
|
+
return l.source === link.source.id && l.target === link.target.id;
|
|
88
|
+
});
|
|
89
|
+
return _extends({}, originalLink, link, {
|
|
90
|
+
color: originalLink?.color ?? linkColor,
|
|
91
|
+
path: improvedNaiveSankeyLinkPathHorizontal(link, curveCorrection)
|
|
92
|
+
});
|
|
93
|
+
});
|
|
94
|
+
const layoutNodes = nodes.map(node => {
|
|
95
|
+
const originalNode = data.nodes.get(node.id) || {};
|
|
96
|
+
return _extends({}, originalNode, node);
|
|
97
|
+
});
|
|
98
|
+
return {
|
|
99
|
+
nodes: layoutNodes,
|
|
100
|
+
links: layoutLinks
|
|
101
|
+
};
|
|
102
|
+
}
|
|
103
|
+
export function improvedNaiveSankeyLinkPathHorizontal(link, curveCorrection) {
|
|
104
|
+
const sx = link.source.x1;
|
|
105
|
+
const tx = link.target.x0;
|
|
106
|
+
// Weirdly this seems to work for any chart or node width change
|
|
107
|
+
// But needs to be changed when the sankey height changes.
|
|
108
|
+
const correction = curveCorrection ?? 5;
|
|
109
|
+
const y0 = link.y0;
|
|
110
|
+
const y1 = link.y1;
|
|
111
|
+
const w = link.width;
|
|
112
|
+
const halfW = w / 2;
|
|
113
|
+
const sy0 = y0 - halfW;
|
|
114
|
+
const sy1 = y0 + halfW;
|
|
115
|
+
const ty0 = y1 - halfW;
|
|
116
|
+
const ty1 = y1 + halfW;
|
|
117
|
+
const halfX = (tx - sx) / 2;
|
|
118
|
+
const p = path();
|
|
119
|
+
p.moveTo(sx, sy0);
|
|
120
|
+
const isDecreasing = y0 > y1;
|
|
121
|
+
const direction = isDecreasing ? -1 : 1;
|
|
122
|
+
let cpx1 = sx + halfX + correction * direction;
|
|
123
|
+
let cpy1 = sy0;
|
|
124
|
+
let cpx2 = sx + halfX + correction * direction;
|
|
125
|
+
let cpy2 = ty0;
|
|
126
|
+
p.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, tx, ty0);
|
|
127
|
+
p.lineTo(tx, ty1);
|
|
128
|
+
cpx1 = sx + halfX - correction * direction;
|
|
129
|
+
cpy1 = ty1;
|
|
130
|
+
cpx2 = sx + halfX - correction * direction;
|
|
131
|
+
cpy2 = sy1;
|
|
132
|
+
p.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, sx, sy1);
|
|
133
|
+
p.lineTo(sx, sy0);
|
|
134
|
+
return p.toString();
|
|
135
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export { SankeyChart as Unstable_SankeyChart } from "./SankeyChart.js";
|
|
2
|
+
export type { SankeyChartProps, SankeySeries } from "./SankeyChart.js";
|
|
3
|
+
export { SankeyPlot } from "./SankeyPlot.js";
|
|
4
|
+
export type { SankeyPlotProps } from "./SankeyPlot.js";
|
|
5
|
+
export * from "./sankey.types.js";
|
|
6
|
+
export * from "./sankeySlots.types.js";
|
|
7
|
+
export { type SankeyPlotClasses, sankeyPlotClasses } from "./sankeyClasses.js";
|
|
8
|
+
export { SankeyTooltip, SankeyTooltipContent } from "./SankeyTooltip/index.js";
|
|
9
|
+
export type { SankeyTooltipProps } from "./SankeyTooltip/index.js";
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { SankeyChart as Unstable_SankeyChart } from "./SankeyChart.js";
|
|
2
|
+
export { SankeyPlot } from "./SankeyPlot.js";
|
|
3
|
+
export * from "./sankey.types.js";
|
|
4
|
+
export * from "./sankeySlots.types.js";
|
|
5
|
+
export { sankeyPlotClasses } from "./sankeyClasses.js";
|
|
6
|
+
export { SankeyTooltip, SankeyTooltipContent } from "./SankeyTooltip/index.js";
|
|
@@ -0,0 +1,225 @@
|
|
|
1
|
+
import type { HighlightScope, SeriesId } from '@mui/x-charts/internals';
|
|
2
|
+
import type { DefaultizedProps, MakeRequired } from '@mui/x-internals/types';
|
|
3
|
+
import type { SankeyLink as D3SankeyLink, SankeyNode as D3SankeyNode } from '@mui/x-charts-vendor/d3-sankey';
|
|
4
|
+
export type SankeyNodeId = string | number;
|
|
5
|
+
export interface SankeyNode {
|
|
6
|
+
/**
|
|
7
|
+
* Unique identifier for the node
|
|
8
|
+
*/
|
|
9
|
+
id: SankeyNodeId;
|
|
10
|
+
/**
|
|
11
|
+
* The node label to display
|
|
12
|
+
*/
|
|
13
|
+
label?: string;
|
|
14
|
+
/**
|
|
15
|
+
* Optional custom data for the node
|
|
16
|
+
*/
|
|
17
|
+
data?: any;
|
|
18
|
+
/**
|
|
19
|
+
* Optional color override for the node
|
|
20
|
+
*/
|
|
21
|
+
color?: string;
|
|
22
|
+
}
|
|
23
|
+
export interface SankeyLink {
|
|
24
|
+
/**
|
|
25
|
+
* Source node ID
|
|
26
|
+
*/
|
|
27
|
+
source: SankeyNodeId;
|
|
28
|
+
/**
|
|
29
|
+
* Target node ID
|
|
30
|
+
*/
|
|
31
|
+
target: SankeyNodeId;
|
|
32
|
+
/**
|
|
33
|
+
* The value/weight of the link (affects width)
|
|
34
|
+
*/
|
|
35
|
+
value: number;
|
|
36
|
+
/**
|
|
37
|
+
* Optional custom data for the link
|
|
38
|
+
*/
|
|
39
|
+
data?: any;
|
|
40
|
+
/**
|
|
41
|
+
* Optional color override for the link
|
|
42
|
+
*/
|
|
43
|
+
color?: string;
|
|
44
|
+
}
|
|
45
|
+
export type SankeyNodeOptions = {
|
|
46
|
+
/**
|
|
47
|
+
* Default color for nodes without specified colors
|
|
48
|
+
*/
|
|
49
|
+
color?: string;
|
|
50
|
+
/**
|
|
51
|
+
* Width of the nodes in pixels
|
|
52
|
+
*/
|
|
53
|
+
width?: number;
|
|
54
|
+
/**
|
|
55
|
+
* Padding between nodes in pixels
|
|
56
|
+
*/
|
|
57
|
+
padding?: number;
|
|
58
|
+
/**
|
|
59
|
+
* Node alignment strategy
|
|
60
|
+
* - 'justify': Nodes are evenly distributed across the width.
|
|
61
|
+
* - 'left': Nodes are aligned to the left.
|
|
62
|
+
* - 'right': Nodes are aligned to the right.
|
|
63
|
+
* - 'center': Nodes are centered.
|
|
64
|
+
* @default 'justify'
|
|
65
|
+
*/
|
|
66
|
+
align?: 'justify' | 'left' | 'right' | 'center';
|
|
67
|
+
/**
|
|
68
|
+
* Whether to show node labels
|
|
69
|
+
*/
|
|
70
|
+
showLabels?: boolean;
|
|
71
|
+
/**
|
|
72
|
+
* Custom sort function for nodes
|
|
73
|
+
* @param {SankeyLayoutNode} a - First node to compare
|
|
74
|
+
* @param {SankeyLayoutNode} b - Second node to compare
|
|
75
|
+
* @returns {number} Comparison result
|
|
76
|
+
*/
|
|
77
|
+
sort?: (a: SankeyLayoutNode, b: SankeyLayoutNode) => number | null;
|
|
78
|
+
};
|
|
79
|
+
export type SankeyLinkOptions = {
|
|
80
|
+
/**
|
|
81
|
+
* Default color for links without specified colors
|
|
82
|
+
*/
|
|
83
|
+
color?: string;
|
|
84
|
+
/**
|
|
85
|
+
* Opacity of the links (0-1)
|
|
86
|
+
*/
|
|
87
|
+
opacity?: number;
|
|
88
|
+
/**
|
|
89
|
+
* Whether to show link values
|
|
90
|
+
*/
|
|
91
|
+
showValues?: boolean;
|
|
92
|
+
/**
|
|
93
|
+
* Custom sort function for links
|
|
94
|
+
* @param {SankeyLayoutLink} a - First link to compare
|
|
95
|
+
* @param {SankeyLayoutLink} b - Second link to compare
|
|
96
|
+
* @returns {number} Comparison result
|
|
97
|
+
*/
|
|
98
|
+
sort?: (a: SankeyLayoutLink, b: SankeyLayoutLink) => number | null;
|
|
99
|
+
/**
|
|
100
|
+
* Applies the given number to the X dimension of the control points of the link's curve function.
|
|
101
|
+
* This can create better looking links between nodes, but is dependent on the graph layout.
|
|
102
|
+
* It is specially impacted by the chart height.
|
|
103
|
+
* @default 10
|
|
104
|
+
*/
|
|
105
|
+
curveCorrection?: number;
|
|
106
|
+
};
|
|
107
|
+
export interface SankeyData {
|
|
108
|
+
/**
|
|
109
|
+
* An array of node configs for the Sankey diagram
|
|
110
|
+
*
|
|
111
|
+
* This is optional, but can be used to provide custom labels or styles for nodes.
|
|
112
|
+
*/
|
|
113
|
+
nodes?: readonly SankeyNode[];
|
|
114
|
+
/**
|
|
115
|
+
* Array of links between nodes.
|
|
116
|
+
*
|
|
117
|
+
* The node ids will be used as the labels. If you want to provide custom labels, use the `nodes` property.
|
|
118
|
+
*
|
|
119
|
+
* Each link should have a `source`, `target`, and `value` property.
|
|
120
|
+
*/
|
|
121
|
+
links: readonly SankeyLink[];
|
|
122
|
+
}
|
|
123
|
+
export interface SankeySeriesType {
|
|
124
|
+
/**
|
|
125
|
+
* Unique identifier for the series
|
|
126
|
+
*/
|
|
127
|
+
id?: SeriesId;
|
|
128
|
+
/**
|
|
129
|
+
* Type identifier for Sankey series
|
|
130
|
+
*/
|
|
131
|
+
type: 'sankey';
|
|
132
|
+
/**
|
|
133
|
+
* The data for the Sankey diagram
|
|
134
|
+
*/
|
|
135
|
+
data: SankeyData;
|
|
136
|
+
/**
|
|
137
|
+
* Optional configuration for the nodes style, layout, and behavior
|
|
138
|
+
*/
|
|
139
|
+
nodeOptions?: SankeyNodeOptions;
|
|
140
|
+
/**
|
|
141
|
+
* Optional configuration for the links style, layout, and behavior
|
|
142
|
+
*/
|
|
143
|
+
linkOptions?: SankeyLinkOptions;
|
|
144
|
+
/**
|
|
145
|
+
* Number of iterations for the layout algorithm
|
|
146
|
+
* @default 6
|
|
147
|
+
*/
|
|
148
|
+
iterations?: number;
|
|
149
|
+
}
|
|
150
|
+
/**
|
|
151
|
+
* Represents the calculated positions and dimensions for a node in the Sankey diagram
|
|
152
|
+
*/
|
|
153
|
+
export interface SankeyLayoutNode extends D3SankeyNode<MakeRequired<SankeyNode, 'label' | 'color'>, SankeyLayoutLink> {
|
|
154
|
+
targetLinks: SankeyLayoutLink[];
|
|
155
|
+
sourceLinks: SankeyLayoutLink[];
|
|
156
|
+
value: number;
|
|
157
|
+
}
|
|
158
|
+
/**
|
|
159
|
+
* Represents the calculated positions and paths for a link in the Sankey diagram
|
|
160
|
+
*/
|
|
161
|
+
export interface SankeyLayoutLink extends D3SankeyLink<SankeyLayoutNode, Omit<MakeRequired<SankeyLink, 'color'>, 'source' | 'target'>> {
|
|
162
|
+
path?: string | null;
|
|
163
|
+
source: SankeyLayoutNode;
|
|
164
|
+
target: SankeyLayoutNode;
|
|
165
|
+
}
|
|
166
|
+
/**
|
|
167
|
+
* Calculated layout for the Sankey diagram
|
|
168
|
+
*/
|
|
169
|
+
export interface SankeyLayout {
|
|
170
|
+
nodes: readonly SankeyLayoutNode[];
|
|
171
|
+
links: readonly SankeyLayoutLink[];
|
|
172
|
+
}
|
|
173
|
+
export interface DefaultizedSankeySeriesType extends DefaultizedProps<Omit<SankeySeriesType, 'data'>, 'id'> {
|
|
174
|
+
data: {
|
|
175
|
+
nodes: Map<SankeyNodeId, SankeyNode>;
|
|
176
|
+
links: readonly SankeyLink[];
|
|
177
|
+
};
|
|
178
|
+
highlightScope?: HighlightScope;
|
|
179
|
+
}
|
|
180
|
+
type SankeyNodeIdentifierBase = {
|
|
181
|
+
type: 'sankey';
|
|
182
|
+
/**
|
|
183
|
+
* Unique identifier for the series
|
|
184
|
+
*/
|
|
185
|
+
seriesId: SeriesId;
|
|
186
|
+
};
|
|
187
|
+
export type SankeyNodeIdentifier = SankeyNodeIdentifierBase & {
|
|
188
|
+
/**
|
|
189
|
+
* Subtype to differentiate between node and link
|
|
190
|
+
*/
|
|
191
|
+
subType: 'node';
|
|
192
|
+
/**
|
|
193
|
+
* The id of the node
|
|
194
|
+
*/
|
|
195
|
+
nodeId: SankeyNodeId;
|
|
196
|
+
};
|
|
197
|
+
export type SankeyNodeIdentifierWithData = SankeyNodeIdentifier & {
|
|
198
|
+
/**
|
|
199
|
+
* The node object with all the calculated properties
|
|
200
|
+
*/
|
|
201
|
+
node: SankeyLayoutNode;
|
|
202
|
+
};
|
|
203
|
+
export type SankeyLinkIdentifier = SankeyNodeIdentifierBase & {
|
|
204
|
+
/**
|
|
205
|
+
* Subtype to differentiate between node and link
|
|
206
|
+
*/
|
|
207
|
+
subType: 'link';
|
|
208
|
+
/**
|
|
209
|
+
* The id of the source node
|
|
210
|
+
*/
|
|
211
|
+
sourceId: SankeyNodeId;
|
|
212
|
+
/**
|
|
213
|
+
* The id of the target node
|
|
214
|
+
*/
|
|
215
|
+
targetId: SankeyNodeId;
|
|
216
|
+
};
|
|
217
|
+
export type SankeyLinkIdentifierWithData = SankeyLinkIdentifier & {
|
|
218
|
+
/**
|
|
219
|
+
* The link object with all the calculated properties
|
|
220
|
+
*/
|
|
221
|
+
link: SankeyLayoutLink;
|
|
222
|
+
};
|
|
223
|
+
export type SankeyItemIdentifier = SankeyNodeIdentifier | SankeyLinkIdentifier;
|
|
224
|
+
export type SankeyItemIdentifierWithData = SankeyNodeIdentifierWithData | SankeyLinkIdentifierWithData;
|
|
225
|
+
export {};
|