@mui/x-charts-pro 8.11.3 → 8.12.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.d.ts +2 -2
- package/BarChartPro/BarChartPro.js +1 -0
- package/BarChartPro/BarChartPro.plugins.d.ts +3 -3
- package/BarChartPro/BarChartPro.plugins.js +1 -1
- package/BarChartPro/index.d.ts +2 -1
- package/BarChartPro/index.js +11 -0
- package/CHANGELOG.md +151 -6
- package/ChartDataProviderPro/ChartDataProviderPro.js +1 -1
- package/FunnelChart/FunnelChart.d.ts +2 -2
- package/FunnelChart/FunnelChart.plugins.d.ts +2 -2
- package/FunnelChart/funnelAxisPlugin/computeAxisValue.js +1 -1
- package/FunnelChart/index.d.ts +1 -0
- package/FunnelChart/index.js +12 -0
- package/FunnelChart/useFunnelChartProps.d.ts +2 -2
- package/Heatmap/Heatmap.d.ts +2 -2
- package/Heatmap/Heatmap.plugins.d.ts +2 -2
- package/Heatmap/index.d.ts +1 -0
- package/Heatmap/index.js +12 -0
- package/LineChartPro/LineChartPro.d.ts +2 -2
- package/LineChartPro/LineChartPro.js +1 -0
- package/LineChartPro/LineChartPro.plugins.d.ts +3 -3
- package/LineChartPro/LineChartPro.plugins.js +1 -1
- package/LineChartPro/index.d.ts +2 -1
- package/LineChartPro/index.js +11 -0
- package/PieChartPro/PieChartPro.js +1 -0
- package/PieChartPro/PieChartPro.plugins.d.ts +2 -2
- package/PieChartPro/index.d.ts +2 -1
- package/PieChartPro/index.js +11 -0
- package/RadarChartPro/RadarChartPro.d.ts +2 -2
- package/RadarChartPro/RadarChartPro.plugins.d.ts +2 -2
- package/RadarChartPro/index.d.ts +2 -1
- package/RadarChartPro/index.js +11 -0
- package/SankeyChart/SankeyChart.d.ts +2 -2
- package/SankeyChart/SankeyChart.js +4 -1
- package/SankeyChart/SankeyChart.plugins.d.ts +3 -2
- package/SankeyChart/SankeyChart.plugins.js +2 -4
- package/SankeyChart/SankeyLinkLabel.js +12 -1
- package/SankeyChart/calculateSankeyLayout.js +8 -2
- package/SankeyChart/sankey.types.d.ts +55 -5
- package/SankeyChart/seriesConfig/getSeriesWithDefaultValues.js +2 -0
- package/SankeyChart/seriesConfig/tooltipGetter.js +13 -3
- package/SankeyChart/useSankeyChartProps.d.ts +2 -2
- package/ScatterChartPro/ScatterChartPro.d.ts +2 -2
- package/ScatterChartPro/ScatterChartPro.js +13 -2
- package/ScatterChartPro/ScatterChartPro.plugins.d.ts +3 -3
- package/ScatterChartPro/ScatterChartPro.plugins.js +1 -1
- package/ScatterChartPro/index.d.ts +2 -1
- package/ScatterChartPro/index.js +11 -0
- package/context/ChartProApi.d.ts +14 -12
- package/esm/BarChartPro/BarChartPro.d.ts +2 -2
- package/esm/BarChartPro/BarChartPro.js +1 -0
- package/esm/BarChartPro/BarChartPro.plugins.d.ts +3 -3
- package/esm/BarChartPro/BarChartPro.plugins.js +2 -2
- package/esm/BarChartPro/index.d.ts +2 -1
- package/esm/BarChartPro/index.js +2 -1
- package/esm/ChartDataProviderPro/ChartDataProviderPro.js +1 -1
- package/esm/FunnelChart/FunnelChart.d.ts +2 -2
- package/esm/FunnelChart/FunnelChart.plugins.d.ts +2 -2
- package/esm/FunnelChart/funnelAxisPlugin/computeAxisValue.js +2 -2
- package/esm/FunnelChart/index.d.ts +1 -0
- package/esm/FunnelChart/index.js +1 -0
- package/esm/FunnelChart/useFunnelChartProps.d.ts +2 -2
- package/esm/Heatmap/Heatmap.d.ts +2 -2
- package/esm/Heatmap/Heatmap.plugins.d.ts +2 -2
- package/esm/Heatmap/index.d.ts +1 -0
- package/esm/Heatmap/index.js +1 -0
- package/esm/LineChartPro/LineChartPro.d.ts +2 -2
- package/esm/LineChartPro/LineChartPro.js +1 -0
- package/esm/LineChartPro/LineChartPro.plugins.d.ts +3 -3
- package/esm/LineChartPro/LineChartPro.plugins.js +2 -2
- package/esm/LineChartPro/index.d.ts +2 -1
- package/esm/LineChartPro/index.js +2 -1
- package/esm/PieChartPro/PieChartPro.js +1 -0
- package/esm/PieChartPro/PieChartPro.plugins.d.ts +2 -2
- package/esm/PieChartPro/index.d.ts +2 -1
- package/esm/PieChartPro/index.js +2 -1
- package/esm/RadarChartPro/RadarChartPro.d.ts +2 -2
- package/esm/RadarChartPro/RadarChartPro.plugins.d.ts +2 -2
- package/esm/RadarChartPro/index.d.ts +2 -1
- package/esm/RadarChartPro/index.js +2 -1
- package/esm/SankeyChart/SankeyChart.d.ts +2 -2
- package/esm/SankeyChart/SankeyChart.js +4 -1
- package/esm/SankeyChart/SankeyChart.plugins.d.ts +3 -2
- package/esm/SankeyChart/SankeyChart.plugins.js +2 -6
- package/esm/SankeyChart/SankeyLinkLabel.js +12 -1
- package/esm/SankeyChart/calculateSankeyLayout.js +8 -2
- package/esm/SankeyChart/sankey.types.d.ts +55 -5
- package/esm/SankeyChart/seriesConfig/getSeriesWithDefaultValues.js +2 -0
- package/esm/SankeyChart/seriesConfig/tooltipGetter.js +13 -3
- package/esm/SankeyChart/useSankeyChartProps.d.ts +2 -2
- package/esm/ScatterChartPro/ScatterChartPro.d.ts +2 -2
- package/esm/ScatterChartPro/ScatterChartPro.js +13 -2
- package/esm/ScatterChartPro/ScatterChartPro.plugins.d.ts +3 -3
- package/esm/ScatterChartPro/ScatterChartPro.plugins.js +2 -2
- package/esm/ScatterChartPro/index.d.ts +2 -1
- package/esm/ScatterChartPro/index.js +2 -1
- package/esm/context/ChartProApi.d.ts +14 -12
- package/esm/index.d.ts +1 -0
- package/esm/index.js +2 -1
- package/esm/internals/plugins/useChartProExport/useChartProExport.types.d.ts +1 -2
- package/esm/plugins/index.d.ts +3 -0
- package/esm/plugins/index.js +3 -0
- package/index.d.ts +1 -0
- package/index.js +13 -1
- package/internals/plugins/useChartProExport/useChartProExport.types.d.ts +1 -2
- package/package.json +6 -6
- package/plugins/index.d.ts +3 -0
- package/plugins/index.js +35 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ConvertSignaturesIntoPlugins, UseChartHighlightSignature, UseChartInteractionSignature } from '@mui/x-charts/internals';
|
|
1
|
+
import { ConvertSignaturesIntoPlugins, UseChartHighlightSignature, UseChartInteractionSignature, UseChartKeyboardNavigationSignature } from '@mui/x-charts/internals';
|
|
2
2
|
import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
|
|
3
|
-
export type PieChartProPluginSignatures = [UseChartInteractionSignature, UseChartHighlightSignature, UseChartProExportSignature];
|
|
3
|
+
export type PieChartProPluginSignatures = [UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartProExportSignature];
|
|
4
4
|
export declare const PIE_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<PieChartProPluginSignatures>;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export * from "./PieChartPro.js";
|
|
1
|
+
export * from "./PieChartPro.js";
|
|
2
|
+
export * from "./PieChartPro.plugins.js";
|
package/esm/PieChartPro/index.js
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export * from "./PieChartPro.js";
|
|
1
|
+
export * from "./PieChartPro.js";
|
|
2
|
+
export * from "./PieChartPro.plugins.js";
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { RadarChartProps, RadarDataProviderProps, RadarChartSlotProps, RadarChartSlots } from '@mui/x-charts/RadarChart';
|
|
3
|
-
import {
|
|
3
|
+
import { RadarChartProPluginSignatures } from "./RadarChartPro.plugins.js";
|
|
4
4
|
import { ChartsToolbarProSlotProps, ChartsToolbarProSlots } from "../ChartsToolbarPro/Toolbar.types.js";
|
|
5
5
|
import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
|
|
6
6
|
export interface RadarChartProSlots extends Omit<RadarChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
|
|
7
7
|
export interface RadarChartProSlotProps extends Omit<RadarChartSlotProps, 'toolbar'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {}
|
|
8
|
-
export interface RadarChartProProps extends Omit<RadarChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<RadarDataProviderProps<
|
|
8
|
+
export interface RadarChartProProps extends Omit<RadarChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<RadarDataProviderProps<RadarChartProPluginSignatures>, 'plugins' | 'seriesConfig' | 'slots' | 'slotProps' | 'experimentalFeatures'> {
|
|
9
9
|
/**
|
|
10
10
|
* Overridable component slots.
|
|
11
11
|
* @default {}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { ConvertSignaturesIntoPlugins, UseChartHighlightSignature, UseChartInteractionSignature, UseChartPolarAxisSignature } from '@mui/x-charts/internals';
|
|
2
2
|
import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
|
|
3
|
-
export type
|
|
4
|
-
export declare const RADAR_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<
|
|
3
|
+
export type RadarChartProPluginSignatures = [UseChartPolarAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProExportSignature];
|
|
4
|
+
export declare const RADAR_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<RadarChartProPluginSignatures>;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export * from "./RadarChartPro.js";
|
|
1
|
+
export * from "./RadarChartPro.js";
|
|
2
|
+
export * from "./RadarChartPro.plugins.js";
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export * from "./RadarChartPro.js";
|
|
1
|
+
export * from "./RadarChartPro.js";
|
|
2
|
+
export * from "./RadarChartPro.plugins.js";
|
|
@@ -3,11 +3,11 @@ import { type ChartsOverlayProps } from '@mui/x-charts/ChartsOverlay';
|
|
|
3
3
|
import type { MakeOptional } from '@mui/x-internals/types';
|
|
4
4
|
import { ChartContainerProProps } from "../ChartContainerPro/index.js";
|
|
5
5
|
import { type SankeyPlotProps } from "./SankeyPlot.js";
|
|
6
|
-
import { type
|
|
6
|
+
import { type SankeyChartPluginSignatures } from "./SankeyChart.plugins.js";
|
|
7
7
|
import type { SankeySeriesType } from "./sankey.types.js";
|
|
8
8
|
import type { SankeyChartSlotExtension } from "./sankeySlots.types.js";
|
|
9
9
|
export type SankeySeries = MakeOptional<SankeySeriesType, 'type'>;
|
|
10
|
-
export interface SankeyChartProps extends Omit<ChartContainerProProps<'sankey',
|
|
10
|
+
export interface SankeyChartProps extends Omit<ChartContainerProProps<'sankey', SankeyChartPluginSignatures>, 'plugins' | 'series' | 'slotProps' | 'slots' | 'dataset' | 'hideLegend' | 'skipAnimation' | 'highlightedItem' | 'onHighlightChange'>, Omit<SankeyPlotProps, 'data'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, SankeyChartSlotExtension {
|
|
11
11
|
/**
|
|
12
12
|
* The series to display in the Sankey chart.
|
|
13
13
|
* A single object is expected.
|
|
@@ -68,7 +68,10 @@ process.env.NODE_ENV !== "production" ? SankeyChart.propTypes = {
|
|
|
68
68
|
// | To update them edit the TypeScript types and run "pnpm proptypes" |
|
|
69
69
|
// ----------------------------------------------------------------------
|
|
70
70
|
apiRef: PropTypes.shape({
|
|
71
|
-
current: PropTypes.
|
|
71
|
+
current: PropTypes.shape({
|
|
72
|
+
exportAsImage: PropTypes.func.isRequired,
|
|
73
|
+
exportAsPrint: PropTypes.func.isRequired
|
|
74
|
+
})
|
|
72
75
|
}),
|
|
73
76
|
/**
|
|
74
77
|
* Classes applied to the various elements.
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
import { ConvertSignaturesIntoPlugins, UseChartHighlightSignature, UseChartInteractionSignature } from '@mui/x-charts/internals';
|
|
2
|
-
|
|
3
|
-
export
|
|
2
|
+
import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
|
|
3
|
+
export type SankeyChartPluginSignatures = [UseChartInteractionSignature, UseChartHighlightSignature, UseChartProExportSignature];
|
|
4
|
+
export declare const SANKEY_CHART_PLUGINS: ConvertSignaturesIntoPlugins<SankeyChartPluginSignatures>;
|
|
@@ -1,9 +1,5 @@
|
|
|
1
1
|
import { useChartHighlight
|
|
2
2
|
// useChartHighlight,
|
|
3
3
|
, useChartInteraction } from '@mui/x-charts/internals';
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
"../internals/plugins/useChartProExport/index.js";
|
|
7
|
-
export const SANKEY_CHART_PLUGINS = [useChartInteraction, useChartHighlight
|
|
8
|
-
// useChartProExport,
|
|
9
|
-
];
|
|
4
|
+
import { useChartProExport } from "../internals/plugins/useChartProExport/index.js";
|
|
5
|
+
export const SANKEY_CHART_PLUGINS = [useChartInteraction, useChartHighlight, useChartProExport];
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { useTheme } from '@mui/material/styles';
|
|
5
|
+
import { useSankeySeriesContext } from "../hooks/useSankeySeries.js";
|
|
5
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
7
|
const getLinkMidpoint = link => {
|
|
7
8
|
if (link.y0 === undefined || link.y1 === undefined) {
|
|
@@ -30,10 +31,20 @@ export const SankeyLinkLabel = /*#__PURE__*/React.forwardRef(function SankeyLink
|
|
|
30
31
|
link
|
|
31
32
|
} = props;
|
|
32
33
|
const theme = useTheme();
|
|
34
|
+
const seriesContext = useSankeySeriesContext();
|
|
33
35
|
if (!link.path || link.y0 === undefined || link.y1 === undefined) {
|
|
34
36
|
return null; // No path defined or invalid coordinates, nothing to render
|
|
35
37
|
}
|
|
36
38
|
const midpoint = getLinkMidpoint(link);
|
|
39
|
+
|
|
40
|
+
// Get the series data and valueFormatter
|
|
41
|
+
const series = seriesContext?.series[seriesContext.seriesOrder?.[0]];
|
|
42
|
+
const formattedValue = series?.valueFormatter ? series.valueFormatter(link.value, {
|
|
43
|
+
type: 'link',
|
|
44
|
+
sourceId: link.source.id,
|
|
45
|
+
targetId: link.target.id,
|
|
46
|
+
location: 'label'
|
|
47
|
+
}) : link.value;
|
|
37
48
|
return /*#__PURE__*/_jsx("text", {
|
|
38
49
|
ref: ref,
|
|
39
50
|
x: midpoint.x,
|
|
@@ -46,7 +57,7 @@ export const SankeyLinkLabel = /*#__PURE__*/React.forwardRef(function SankeyLink
|
|
|
46
57
|
"data-link-target": link.target.id,
|
|
47
58
|
fontFamily: theme.typography.fontFamily,
|
|
48
59
|
pointerEvents: "none",
|
|
49
|
-
children:
|
|
60
|
+
children: formattedValue
|
|
50
61
|
});
|
|
51
62
|
});
|
|
52
63
|
if (process.env.NODE_ENV !== "production") SankeyLinkLabel.displayName = "SankeyLinkLabel";
|
|
@@ -27,7 +27,7 @@ export function calculateSankeyLayout(data, drawingArea, theme, series = {}) {
|
|
|
27
27
|
sort: nodeSort = null
|
|
28
28
|
} = nodeOptions ?? {};
|
|
29
29
|
const {
|
|
30
|
-
color: linkColor =
|
|
30
|
+
color: linkColor = 'source',
|
|
31
31
|
sort: linkSort = null,
|
|
32
32
|
curveCorrection = 10
|
|
33
33
|
} = linkOptions ?? {};
|
|
@@ -86,8 +86,14 @@ export function calculateSankeyLayout(data, drawingArea, theme, series = {}) {
|
|
|
86
86
|
const originalLink = data.links.find(l => {
|
|
87
87
|
return l.source === link.source.id && l.target === link.target.id;
|
|
88
88
|
});
|
|
89
|
+
let resolvedColor = originalLink?.color ?? linkColor;
|
|
90
|
+
if (resolvedColor === 'source') {
|
|
91
|
+
resolvedColor = link.source.color ?? linkColor;
|
|
92
|
+
} else if (resolvedColor === 'target') {
|
|
93
|
+
resolvedColor = link.target.color ?? linkColor;
|
|
94
|
+
}
|
|
89
95
|
return _extends({}, originalLink, link, {
|
|
90
|
-
color:
|
|
96
|
+
color: resolvedColor,
|
|
91
97
|
path: improvedNaiveSankeyLinkPathHorizontal(link, curveCorrection)
|
|
92
98
|
});
|
|
93
99
|
});
|
|
@@ -38,9 +38,13 @@ export interface SankeyLink {
|
|
|
38
38
|
*/
|
|
39
39
|
data?: any;
|
|
40
40
|
/**
|
|
41
|
-
* Optional color override for the link
|
|
41
|
+
* Optional color override for the link.
|
|
42
|
+
* Can be a color string, or a keyword:
|
|
43
|
+
* - 'source': Use the color of the source node
|
|
44
|
+
* - 'target': Use the color of the target node
|
|
45
|
+
* @default 'source'
|
|
42
46
|
*/
|
|
43
|
-
color?: string;
|
|
47
|
+
color?: string | 'source' | 'target';
|
|
44
48
|
}
|
|
45
49
|
export type SankeyNodeOptions = {
|
|
46
50
|
/**
|
|
@@ -78,9 +82,13 @@ export type SankeyNodeOptions = {
|
|
|
78
82
|
};
|
|
79
83
|
export type SankeyLinkOptions = {
|
|
80
84
|
/**
|
|
81
|
-
* Default color for links without specified colors
|
|
85
|
+
* Default color for links without specified colors.
|
|
86
|
+
* Can be a color string, or a keyword:
|
|
87
|
+
* - 'source': Use the color of the source node
|
|
88
|
+
* - 'target': Use the color of the target node
|
|
89
|
+
* @default 'source'
|
|
82
90
|
*/
|
|
83
|
-
color?: string;
|
|
91
|
+
color?: string | 'source' | 'target';
|
|
84
92
|
/**
|
|
85
93
|
* Opacity of the links (0-1)
|
|
86
94
|
*/
|
|
@@ -146,6 +154,17 @@ export interface SankeySeriesType {
|
|
|
146
154
|
* @default 6
|
|
147
155
|
*/
|
|
148
156
|
iterations?: number;
|
|
157
|
+
/**
|
|
158
|
+
* Formatter used to render values in tooltip or other data display.
|
|
159
|
+
* @param {number} value The value to render.
|
|
160
|
+
* @param {SankeyValueFormatterContext} context The rendering context of the value.
|
|
161
|
+
* @param {'node' | 'link'} context.type The type of element being formatted.
|
|
162
|
+
* @param {SankeyNodeId} [context.nodeId] For nodes: the node ID. For links: undefined.
|
|
163
|
+
* @param {SankeyNodeId} [context.sourceId] For links: the source node ID. For nodes: undefined.
|
|
164
|
+
* @param {SankeyNodeId} [context.targetId] For links: the target node ID. For nodes: undefined.
|
|
165
|
+
* @returns {string | null} The formatted value to display.
|
|
166
|
+
*/
|
|
167
|
+
valueFormatter?: (value: number, context: SankeyValueFormatterContext) => string | null;
|
|
149
168
|
}
|
|
150
169
|
/**
|
|
151
170
|
* Represents the calculated positions and dimensions for a node in the Sankey diagram
|
|
@@ -170,7 +189,7 @@ export interface SankeyLayout {
|
|
|
170
189
|
nodes: readonly SankeyLayoutNode[];
|
|
171
190
|
links: readonly SankeyLayoutLink[];
|
|
172
191
|
}
|
|
173
|
-
export interface DefaultizedSankeySeriesType extends DefaultizedProps<Omit<SankeySeriesType, 'data'>, 'id'> {
|
|
192
|
+
export interface DefaultizedSankeySeriesType extends DefaultizedProps<Omit<SankeySeriesType, 'data'>, 'id' | 'valueFormatter'> {
|
|
174
193
|
data: {
|
|
175
194
|
nodes: Map<SankeyNodeId, SankeyNode>;
|
|
176
195
|
links: readonly SankeyLink[];
|
|
@@ -222,4 +241,35 @@ export type SankeyLinkIdentifierWithData = SankeyLinkIdentifier & {
|
|
|
222
241
|
};
|
|
223
242
|
export type SankeyItemIdentifier = SankeyNodeIdentifier | SankeyLinkIdentifier;
|
|
224
243
|
export type SankeyItemIdentifierWithData = SankeyNodeIdentifierWithData | SankeyLinkIdentifierWithData;
|
|
244
|
+
export type SankeyValueFormatterContext = {
|
|
245
|
+
/**
|
|
246
|
+
* Where the value will be displayed
|
|
247
|
+
*/
|
|
248
|
+
location: 'tooltip' | 'label';
|
|
249
|
+
/**
|
|
250
|
+
* Can be 'node' or 'link'
|
|
251
|
+
*/
|
|
252
|
+
type: 'node';
|
|
253
|
+
/**
|
|
254
|
+
* The id of the node
|
|
255
|
+
*/
|
|
256
|
+
nodeId: SankeyNodeId;
|
|
257
|
+
} | {
|
|
258
|
+
/**
|
|
259
|
+
* Where the value will be displayed
|
|
260
|
+
*/
|
|
261
|
+
location: 'tooltip' | 'label';
|
|
262
|
+
/**
|
|
263
|
+
* Can be 'node' or 'link'
|
|
264
|
+
*/
|
|
265
|
+
type: 'link';
|
|
266
|
+
/**
|
|
267
|
+
* The id of the source node
|
|
268
|
+
*/
|
|
269
|
+
sourceId: SankeyNodeId;
|
|
270
|
+
/**
|
|
271
|
+
* The id of the target node
|
|
272
|
+
*/
|
|
273
|
+
targetId: SankeyNodeId;
|
|
274
|
+
};
|
|
225
275
|
export {};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
const defaultSankeyValueFormatter = v => v == null ? '' : v.toLocaleString();
|
|
2
3
|
export const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
|
|
3
4
|
const nodeMap = new Map();
|
|
4
5
|
const nodeColor = seriesData.nodeOptions?.color;
|
|
@@ -39,6 +40,7 @@ export const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
|
|
|
39
40
|
return _extends({
|
|
40
41
|
id: seriesData.id ?? `auto-generated-id-${seriesIndex}`
|
|
41
42
|
}, seriesData, {
|
|
43
|
+
valueFormatter: seriesData.valueFormatter ?? defaultSankeyValueFormatter,
|
|
42
44
|
data: {
|
|
43
45
|
links: data.links,
|
|
44
46
|
nodes: nodeMap
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export const tooltipGetter = params => {
|
|
2
2
|
const {
|
|
3
|
-
identifier
|
|
3
|
+
identifier,
|
|
4
|
+
series
|
|
4
5
|
} = params;
|
|
5
6
|
if (!identifier) {
|
|
6
7
|
return null;
|
|
@@ -15,7 +16,11 @@ export const tooltipGetter = params => {
|
|
|
15
16
|
color: node.color,
|
|
16
17
|
label: `${node.label}:`,
|
|
17
18
|
value: node.value,
|
|
18
|
-
formattedValue:
|
|
19
|
+
formattedValue: series.valueFormatter(node.value, {
|
|
20
|
+
type: 'node',
|
|
21
|
+
nodeId: node.id,
|
|
22
|
+
location: 'tooltip'
|
|
23
|
+
}),
|
|
19
24
|
markType: 'square'
|
|
20
25
|
};
|
|
21
26
|
}
|
|
@@ -31,7 +36,12 @@ export const tooltipGetter = params => {
|
|
|
31
36
|
color: link.color,
|
|
32
37
|
label: `${sourceLabel} → ${targetLabel}:`,
|
|
33
38
|
value: link.value,
|
|
34
|
-
formattedValue:
|
|
39
|
+
formattedValue: series.valueFormatter(link.value, {
|
|
40
|
+
type: 'link',
|
|
41
|
+
sourceId: link.source.id,
|
|
42
|
+
targetId: link.target.id,
|
|
43
|
+
location: 'tooltip'
|
|
44
|
+
}),
|
|
35
45
|
markType: 'line'
|
|
36
46
|
};
|
|
37
47
|
}
|
|
@@ -2,7 +2,7 @@ import type { ChartsOverlayProps } from '@mui/x-charts/ChartsOverlay';
|
|
|
2
2
|
import type { ChartsWrapperProps } from '@mui/x-charts/ChartsWrapper';
|
|
3
3
|
import type { SankeyChartProps } from "./SankeyChart.js";
|
|
4
4
|
import type { ChartContainerProProps } from "../ChartContainerPro/index.js";
|
|
5
|
-
import { type
|
|
5
|
+
import { type SankeyChartPluginSignatures } from "./SankeyChart.plugins.js";
|
|
6
6
|
/**
|
|
7
7
|
* A helper function that extracts SankeyChartProps from the input props
|
|
8
8
|
* and returns an object with props for the children components of SankeyChart.
|
|
@@ -11,7 +11,7 @@ import { type SankeyChartPluginsSignatures } from "./SankeyChart.plugins.js";
|
|
|
11
11
|
* @returns An object with props for the children components of SankeyChart
|
|
12
12
|
*/
|
|
13
13
|
export declare const useSankeyChartProps: (props: SankeyChartProps) => {
|
|
14
|
-
chartContainerProps: ChartContainerProProps<"sankey",
|
|
14
|
+
chartContainerProps: ChartContainerProProps<"sankey", SankeyChartPluginSignatures>;
|
|
15
15
|
sankeyPlotProps: {
|
|
16
16
|
onNodeClick: ((event: React.MouseEvent<SVGElement, MouseEvent>, node: import("./sankey.types.js").SankeyNodeIdentifierWithData) => void) | undefined;
|
|
17
17
|
onLinkClick: ((event: React.MouseEvent<SVGElement, MouseEvent>, link: import("./sankey.types.js").SankeyLinkIdentifierWithData) => void) | undefined;
|
|
@@ -3,7 +3,7 @@ import { ScatterChartProps, ScatterChartSlotProps, ScatterChartSlots } from '@mu
|
|
|
3
3
|
import { ChartsTooltipProps } from '@mui/x-charts/ChartsTooltip';
|
|
4
4
|
import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
|
|
5
5
|
import { ChartContainerProProps } from "../ChartContainerPro/ChartContainerPro.js";
|
|
6
|
-
import {
|
|
6
|
+
import { ScatterChartProPluginSignatures } from "./ScatterChartPro.plugins.js";
|
|
7
7
|
import { ChartsToolbarProSlots, ChartsToolbarProSlotProps } from "../ChartsToolbarPro/Toolbar.types.js";
|
|
8
8
|
export interface ScatterChartProSlots extends Omit<ScatterChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
|
|
9
9
|
export interface ScatterChartProSlotProps extends Omit<ScatterChartSlotProps, 'toolbar' | 'tooltip'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {
|
|
@@ -13,7 +13,7 @@ export interface ScatterChartProSlotProps extends Omit<ScatterChartSlotProps, 't
|
|
|
13
13
|
*/
|
|
14
14
|
tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
|
|
15
15
|
}
|
|
16
|
-
export interface ScatterChartProProps extends Omit<ScatterChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'scatter',
|
|
16
|
+
export interface ScatterChartProProps extends Omit<ScatterChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'scatter', ScatterChartProPluginSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'onItemClick' | 'slots' | 'slotProps' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange'> {
|
|
17
17
|
/**
|
|
18
18
|
* Overridable component slots.
|
|
19
19
|
* @default {}
|
|
@@ -127,6 +127,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
|
|
|
127
127
|
* @default false
|
|
128
128
|
*/
|
|
129
129
|
disableVoronoi: PropTypes.bool,
|
|
130
|
+
enableKeyboardNavigation: PropTypes.bool,
|
|
130
131
|
/**
|
|
131
132
|
* Option to display a cartesian grid in the background.
|
|
132
133
|
*/
|
|
@@ -210,6 +211,15 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
|
|
|
210
211
|
* @param {ZoomData[]} zoomData Updated zoom data.
|
|
211
212
|
*/
|
|
212
213
|
onZoomChange: PropTypes.func,
|
|
214
|
+
/**
|
|
215
|
+
* The type of renderer to use for the scatter plot.
|
|
216
|
+
* - `svg-single`: Renders every scatter item in a `<circle />` element.
|
|
217
|
+
* - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
|
|
218
|
+
* Read more: https://mui.com/x/react-charts/scatter/#performance
|
|
219
|
+
*
|
|
220
|
+
* @default 'svg-single'
|
|
221
|
+
*/
|
|
222
|
+
renderer: PropTypes.oneOf(['svg-batch', 'svg-single']),
|
|
213
223
|
/**
|
|
214
224
|
* The series to display in the scatter chart.
|
|
215
225
|
* An array of [[ScatterSeries]] objects.
|
|
@@ -239,10 +249,11 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
|
|
|
239
249
|
theme: PropTypes.oneOf(['dark', 'light']),
|
|
240
250
|
title: PropTypes.string,
|
|
241
251
|
/**
|
|
242
|
-
* Defines the
|
|
252
|
+
* Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
|
|
253
|
+
* If set to `'item'`, the radius is the `markerSize`.
|
|
243
254
|
* If `undefined`, the radius is assumed to be infinite.
|
|
244
255
|
*/
|
|
245
|
-
voronoiMaxRadius: PropTypes.number,
|
|
256
|
+
voronoiMaxRadius: PropTypes.oneOfType([PropTypes.oneOf(['item']), PropTypes.number]),
|
|
246
257
|
/**
|
|
247
258
|
* The width of the chart in px. If not defined, it takes the width of the parent element.
|
|
248
259
|
*/
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature,
|
|
1
|
+
import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
|
|
2
2
|
import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
|
|
3
3
|
import { UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
|
|
4
|
-
export type
|
|
5
|
-
export declare const SCATTER_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<
|
|
4
|
+
export type ScatterChartProPluginSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
|
|
5
|
+
export declare const SCATTER_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartProPluginSignatures>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight,
|
|
1
|
+
import { useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation } from '@mui/x-charts/internals';
|
|
2
2
|
import { useChartProExport } from "../internals/plugins/useChartProExport/index.js";
|
|
3
3
|
import { useChartProZoom } from "../internals/plugins/useChartProZoom/index.js";
|
|
4
|
-
export const SCATTER_CHART_PRO_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight,
|
|
4
|
+
export const SCATTER_CHART_PRO_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation, useChartProZoom, useChartProExport];
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export * from "./ScatterChartPro.js";
|
|
1
|
+
export * from "./ScatterChartPro.js";
|
|
2
|
+
export * from "./ScatterChartPro.plugins.js";
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export * from "./ScatterChartPro.js";
|
|
1
|
+
export * from "./ScatterChartPro.js";
|
|
2
|
+
export * from "./ScatterChartPro.plugins.js";
|
|
@@ -1,20 +1,22 @@
|
|
|
1
1
|
import { ChartAnyPluginSignature, ChartPublicAPI } from '@mui/x-charts/internals';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
2
|
+
import { HeatmapPluginSignatures } from "../Heatmap/Heatmap.plugins.js";
|
|
3
|
+
import { LineChartProPluginSignatures } from "../LineChartPro/LineChartPro.plugins.js";
|
|
4
|
+
import { ScatterChartProPluginSignatures } from "../ScatterChartPro/ScatterChartPro.plugins.js";
|
|
5
|
+
import { BarChartProPluginSignatures } from "../BarChartPro/BarChartPro.plugins.js";
|
|
6
6
|
import { AllPluginSignatures, DefaultPluginSignatures } from "../internals/plugins/allPlugins.js";
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
7
|
+
import { FunnelChartPluginSignatures } from "../FunnelChart/FunnelChart.plugins.js";
|
|
8
|
+
import { RadarChartProPluginSignatures } from "../RadarChartPro/RadarChartPro.plugins.js";
|
|
9
9
|
import { PieChartProPluginSignatures } from "../PieChartPro/PieChartPro.plugins.js";
|
|
10
|
+
import { SankeyChartPluginSignatures } from "../SankeyChart/SankeyChart.plugins.js";
|
|
10
11
|
export type ProPluginsPerSeriesType = {
|
|
11
|
-
heatmap:
|
|
12
|
-
line:
|
|
13
|
-
scatter:
|
|
14
|
-
bar:
|
|
15
|
-
funnel:
|
|
16
|
-
radar:
|
|
12
|
+
heatmap: HeatmapPluginSignatures;
|
|
13
|
+
line: LineChartProPluginSignatures;
|
|
14
|
+
scatter: ScatterChartProPluginSignatures;
|
|
15
|
+
bar: BarChartProPluginSignatures;
|
|
16
|
+
funnel: FunnelChartPluginSignatures;
|
|
17
|
+
radar: RadarChartProPluginSignatures;
|
|
17
18
|
pie: PieChartProPluginSignatures;
|
|
19
|
+
sankey: SankeyChartPluginSignatures;
|
|
18
20
|
composition: DefaultPluginSignatures;
|
|
19
21
|
};
|
|
20
22
|
/**
|
package/esm/index.d.ts
CHANGED
|
@@ -26,6 +26,7 @@ export * from "./constants/index.js";
|
|
|
26
26
|
export * from "./hooks/index.js";
|
|
27
27
|
export * from "./context/index.js";
|
|
28
28
|
export * from "./models/index.js";
|
|
29
|
+
export * from "./plugins/index.js";
|
|
29
30
|
export * from "./colorPalettes/index.js";
|
|
30
31
|
export * from "./Heatmap/index.js";
|
|
31
32
|
export { ChartContainerPro } from "./ChartContainerPro/index.js";
|
package/esm/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @mui/x-charts-pro v8.
|
|
2
|
+
* @mui/x-charts-pro v8.12.0
|
|
3
3
|
*
|
|
4
4
|
* @license SEE LICENSE IN LICENSE
|
|
5
5
|
* This source code is licensed under the SEE LICENSE IN LICENSE license found in the
|
|
@@ -37,6 +37,7 @@ export * from "./constants/index.js";
|
|
|
37
37
|
export * from "./hooks/index.js";
|
|
38
38
|
export * from "./context/index.js";
|
|
39
39
|
export * from "./models/index.js";
|
|
40
|
+
export * from "./plugins/index.js";
|
|
40
41
|
// Locales should be imported from `@mui/x-charts-pro/locales`
|
|
41
42
|
// export * from './locales';
|
|
42
43
|
export * from "./colorPalettes/index.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ChartPluginSignature } from '@mui/x-charts/internals';
|
|
2
2
|
export interface UseChartProExportParameters {}
|
|
3
3
|
export type UseChartProExportDefaultizedParameters = UseChartProExportParameters;
|
|
4
4
|
export interface UseChartProExportState {
|
|
@@ -74,5 +74,4 @@ export type UseChartProExportSignature = ChartPluginSignature<{
|
|
|
74
74
|
state: UseChartProExportState;
|
|
75
75
|
publicAPI: UseChartProExportPublicApi;
|
|
76
76
|
instance: UseChartProExportInstance;
|
|
77
|
-
dependencies: [UseChartSeriesSignature, UseChartCartesianAxisSignature];
|
|
78
77
|
}>;
|
package/index.d.ts
CHANGED
|
@@ -26,6 +26,7 @@ export * from "./constants/index.js";
|
|
|
26
26
|
export * from "./hooks/index.js";
|
|
27
27
|
export * from "./context/index.js";
|
|
28
28
|
export * from "./models/index.js";
|
|
29
|
+
export * from "./plugins/index.js";
|
|
29
30
|
export * from "./colorPalettes/index.js";
|
|
30
31
|
export * from "./Heatmap/index.js";
|
|
31
32
|
export { ChartContainerPro } from "./ChartContainerPro/index.js";
|
package/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @mui/x-charts-pro v8.
|
|
2
|
+
* @mui/x-charts-pro v8.12.0
|
|
3
3
|
*
|
|
4
4
|
* @license SEE LICENSE IN LICENSE
|
|
5
5
|
* This source code is licensed under the SEE LICENSE IN LICENSE license found in the
|
|
@@ -344,6 +344,18 @@ Object.keys(_models).forEach(function (key) {
|
|
|
344
344
|
}
|
|
345
345
|
});
|
|
346
346
|
});
|
|
347
|
+
var _plugins = require("./plugins");
|
|
348
|
+
Object.keys(_plugins).forEach(function (key) {
|
|
349
|
+
if (key === "default" || key === "__esModule") return;
|
|
350
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
351
|
+
if (key in exports && exports[key] === _plugins[key]) return;
|
|
352
|
+
Object.defineProperty(exports, key, {
|
|
353
|
+
enumerable: true,
|
|
354
|
+
get: function () {
|
|
355
|
+
return _plugins[key];
|
|
356
|
+
}
|
|
357
|
+
});
|
|
358
|
+
});
|
|
347
359
|
var _colorPalettes = require("./colorPalettes");
|
|
348
360
|
Object.keys(_colorPalettes).forEach(function (key) {
|
|
349
361
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ChartPluginSignature } from '@mui/x-charts/internals';
|
|
2
2
|
export interface UseChartProExportParameters {}
|
|
3
3
|
export type UseChartProExportDefaultizedParameters = UseChartProExportParameters;
|
|
4
4
|
export interface UseChartProExportState {
|
|
@@ -74,5 +74,4 @@ export type UseChartProExportSignature = ChartPluginSignature<{
|
|
|
74
74
|
state: UseChartProExportState;
|
|
75
75
|
publicAPI: UseChartProExportPublicApi;
|
|
76
76
|
instance: UseChartProExportInstance;
|
|
77
|
-
dependencies: [UseChartSeriesSignature, UseChartCartesianAxisSignature];
|
|
78
77
|
}>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mui/x-charts-pro",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.12.0",
|
|
4
4
|
"author": "MUI Team",
|
|
5
5
|
"description": "The Pro plan edition of the MUI X Charts components.",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE",
|
|
@@ -31,11 +31,11 @@
|
|
|
31
31
|
"@mui/utils": "^7.3.2",
|
|
32
32
|
"clsx": "^2.1.1",
|
|
33
33
|
"prop-types": "^15.8.1",
|
|
34
|
-
"@mui/x-charts": "8.
|
|
35
|
-
"@mui/x-
|
|
36
|
-
"@mui/x-
|
|
37
|
-
"@mui/x-
|
|
38
|
-
"@mui/x-
|
|
34
|
+
"@mui/x-charts": "8.12.0",
|
|
35
|
+
"@mui/x-charts-vendor": "8.12.0",
|
|
36
|
+
"@mui/x-license": "8.12.0",
|
|
37
|
+
"@mui/x-internal-gestures": "0.3.0",
|
|
38
|
+
"@mui/x-internals": "8.12.0"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"@emotion/react": "^11.9.0",
|
package/plugins/index.js
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
var _exportNames = {
|
|
7
|
+
useChartProExport: true,
|
|
8
|
+
useChartProZoom: true
|
|
9
|
+
};
|
|
10
|
+
Object.defineProperty(exports, "useChartProExport", {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function () {
|
|
13
|
+
return _useChartProExport.useChartProExport;
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
Object.defineProperty(exports, "useChartProZoom", {
|
|
17
|
+
enumerable: true,
|
|
18
|
+
get: function () {
|
|
19
|
+
return _useChartProZoom.useChartProZoom;
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
var _plugins = require("@mui/x-charts/plugins");
|
|
23
|
+
Object.keys(_plugins).forEach(function (key) {
|
|
24
|
+
if (key === "default" || key === "__esModule") return;
|
|
25
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
26
|
+
if (key in exports && exports[key] === _plugins[key]) return;
|
|
27
|
+
Object.defineProperty(exports, key, {
|
|
28
|
+
enumerable: true,
|
|
29
|
+
get: function () {
|
|
30
|
+
return _plugins[key];
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
});
|
|
34
|
+
var _useChartProExport = require("../internals/plugins/useChartProExport");
|
|
35
|
+
var _useChartProZoom = require("../internals/plugins/useChartProZoom");
|