@mui/x-charts-pro 8.0.0 → 8.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/BarChartPro/BarChartPro.js +7 -1
- package/BarChartPro/BarChartPro.plugins.d.ts +2 -1
- package/BarChartPro/BarChartPro.plugins.js +2 -1
- package/CHANGELOG.md +230 -5
- package/ChartContainerPro/ChartContainerPro.d.ts +1 -0
- package/ChartContainerPro/useChartContainerProProps.d.ts +1 -1
- package/ChartDataProviderPro/ChartDataProviderPro.js +11 -2
- package/ChartDataProviderPro/useChartDataProviderProProps.d.ts +3 -2
- package/ChartDataProviderPro/useChartDataProviderProProps.js +2 -0
- package/FunnelChart/FunnelChart.js +12 -1
- package/FunnelChart/FunnelPlot.d.ts +5 -0
- package/FunnelChart/FunnelPlot.js +13 -16
- package/FunnelChart/curves/bump.d.ts +24 -0
- package/FunnelChart/curves/bump.js +82 -0
- package/FunnelChart/curves/curve.types.d.ts +8 -0
- package/FunnelChart/curves/curve.types.js +5 -0
- package/FunnelChart/curves/funnelStep.d.ts +25 -0
- package/FunnelChart/{funnelStepCurve.js → curves/funnelStep.js} +32 -19
- package/FunnelChart/curves/getFunnelCurve.d.ts +3 -0
- package/FunnelChart/curves/getFunnelCurve.js +22 -0
- package/FunnelChart/curves/index.d.ts +2 -0
- package/FunnelChart/curves/index.js +27 -0
- package/FunnelChart/curves/linear.d.ts +24 -0
- package/FunnelChart/curves/linear.js +113 -0
- package/FunnelChart/funnel.types.d.ts +2 -2
- package/FunnelChart/funnelPlotSlots.types.d.ts +1 -1
- package/FunnelChart/funnelSectionClasses.d.ts +1 -1
- package/FunnelChart/index.d.ts +3 -2
- package/FunnelChart/useFunnelChartProps.d.ts +1 -1
- package/FunnelChart/useFunnelChartProps.js +7 -4
- package/Heatmap/Heatmap.js +5 -1
- package/Heatmap/HeatmapItem.js +1 -1
- package/LineChartPro/LineChartPro.js +7 -1
- package/LineChartPro/LineChartPro.plugins.d.ts +2 -1
- package/LineChartPro/LineChartPro.plugins.js +2 -1
- package/ScatterChartPro/ScatterChartPro.js +7 -1
- package/ScatterChartPro/ScatterChartPro.plugins.d.ts +2 -1
- package/ScatterChartPro/ScatterChartPro.plugins.js +2 -1
- package/esm/BarChartPro/BarChartPro.js +7 -1
- package/esm/BarChartPro/BarChartPro.plugins.d.ts +2 -1
- package/esm/BarChartPro/BarChartPro.plugins.js +2 -1
- package/esm/ChartContainerPro/ChartContainerPro.d.ts +1 -0
- package/esm/ChartContainerPro/useChartContainerProProps.d.ts +1 -1
- package/esm/ChartDataProviderPro/ChartDataProviderPro.js +11 -2
- package/esm/ChartDataProviderPro/useChartDataProviderProProps.d.ts +3 -2
- package/esm/ChartDataProviderPro/useChartDataProviderProProps.js +2 -0
- package/esm/FunnelChart/FunnelChart.js +12 -1
- package/esm/FunnelChart/FunnelPlot.d.ts +5 -0
- package/esm/FunnelChart/FunnelPlot.js +14 -17
- package/esm/FunnelChart/curves/bump.d.ts +24 -0
- package/esm/FunnelChart/curves/bump.js +75 -0
- package/esm/FunnelChart/curves/curve.types.d.ts +8 -0
- package/esm/FunnelChart/curves/curve.types.js +1 -0
- package/esm/FunnelChart/curves/funnelStep.d.ts +25 -0
- package/esm/FunnelChart/{funnelStepCurve.js → curves/funnelStep.js} +32 -19
- package/esm/FunnelChart/curves/getFunnelCurve.d.ts +3 -0
- package/esm/FunnelChart/curves/getFunnelCurve.js +15 -0
- package/esm/FunnelChart/curves/index.d.ts +2 -0
- package/esm/FunnelChart/curves/index.js +2 -0
- package/esm/FunnelChart/curves/linear.d.ts +24 -0
- package/esm/FunnelChart/curves/linear.js +106 -0
- package/esm/FunnelChart/funnel.types.d.ts +2 -2
- package/esm/FunnelChart/funnelPlotSlots.types.d.ts +1 -1
- package/esm/FunnelChart/funnelSectionClasses.d.ts +1 -1
- package/esm/FunnelChart/index.d.ts +3 -2
- package/esm/FunnelChart/useFunnelChartProps.d.ts +1 -1
- package/esm/FunnelChart/useFunnelChartProps.js +7 -4
- package/esm/Heatmap/Heatmap.js +5 -1
- package/esm/Heatmap/HeatmapItem.js +1 -1
- package/esm/LineChartPro/LineChartPro.js +7 -1
- package/esm/LineChartPro/LineChartPro.plugins.d.ts +2 -1
- package/esm/LineChartPro/LineChartPro.plugins.js +2 -1
- package/esm/ScatterChartPro/ScatterChartPro.js +7 -1
- package/esm/ScatterChartPro/ScatterChartPro.plugins.d.ts +2 -1
- package/esm/ScatterChartPro/ScatterChartPro.plugins.js +2 -1
- package/esm/index.d.ts +1 -0
- package/esm/index.js +2 -1
- package/esm/internals/plugins/allPlugins.d.ts +5 -4
- package/esm/internals/plugins/allPlugins.js +3 -2
- package/esm/internals/plugins/useChartProExport/common.d.ts +1 -0
- package/esm/internals/plugins/useChartProExport/common.js +8 -0
- package/esm/internals/plugins/useChartProExport/exportImage.d.ts +3 -0
- package/esm/internals/plugins/useChartProExport/exportImage.js +85 -0
- package/esm/internals/plugins/useChartProExport/index.d.ts +2 -0
- package/esm/internals/plugins/useChartProExport/index.js +2 -0
- package/esm/internals/plugins/useChartProExport/print.d.ts +4 -0
- package/esm/internals/plugins/useChartProExport/print.js +28 -0
- package/esm/internals/plugins/useChartProExport/useChartProExport.d.ts +3 -0
- package/esm/internals/plugins/useChartProExport/useChartProExport.js +65 -0
- package/esm/internals/plugins/useChartProExport/useChartProExport.types.d.ts +67 -0
- package/esm/internals/plugins/useChartProExport/useChartProExport.types.js +1 -0
- package/esm/internals/plugins/useChartProZoom/useChartProZoom.d.ts +2 -1
- package/esm/internals/plugins/useChartProZoom/useChartProZoom.js +54 -30
- package/esm/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.ts +25 -25
- package/esm/locales/index.d.ts +1 -0
- package/esm/locales/index.js +1 -0
- package/esm/themeAugmentation/components.d.ts +0 -4
- package/esm/themeAugmentation/components.js +1 -0
- package/esm/themeAugmentation/index.d.ts +3 -3
- package/esm/themeAugmentation/overrides.d.ts +0 -3
- package/esm/themeAugmentation/overrides.js +2 -0
- package/esm/themeAugmentation/props.d.ts +0 -6
- package/esm/themeAugmentation/props.js +2 -0
- package/index.d.ts +1 -0
- package/index.js +12 -1
- package/internals/plugins/allPlugins.d.ts +5 -4
- package/internals/plugins/allPlugins.js +3 -2
- package/internals/plugins/useChartProExport/common.d.ts +1 -0
- package/internals/plugins/useChartProExport/common.js +14 -0
- package/internals/plugins/useChartProExport/exportImage.d.ts +3 -0
- package/internals/plugins/useChartProExport/exportImage.js +95 -0
- package/internals/plugins/useChartProExport/index.d.ts +2 -0
- package/internals/plugins/useChartProExport/index.js +27 -0
- package/internals/plugins/useChartProExport/print.d.ts +4 -0
- package/internals/plugins/useChartProExport/print.js +35 -0
- package/internals/plugins/useChartProExport/useChartProExport.d.ts +3 -0
- package/internals/plugins/useChartProExport/useChartProExport.js +73 -0
- package/internals/plugins/useChartProExport/useChartProExport.types.d.ts +67 -0
- package/internals/plugins/useChartProExport/useChartProExport.types.js +5 -0
- package/internals/plugins/useChartProZoom/useChartProZoom.d.ts +2 -1
- package/internals/plugins/useChartProZoom/useChartProZoom.js +54 -30
- package/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.ts +25 -25
- package/locales/index.d.ts +1 -0
- package/locales/index.js +16 -0
- package/package.json +7 -4
- package/themeAugmentation/components.d.ts +0 -4
- package/themeAugmentation/components.js +5 -0
- package/themeAugmentation/index.d.ts +3 -3
- package/themeAugmentation/overrides.d.ts +0 -3
- package/themeAugmentation/overrides.js +5 -0
- package/themeAugmentation/props.d.ts +0 -6
- package/themeAugmentation/props.js +5 -0
- package/FunnelChart/funnelStepCurve.d.ts +0 -4
- package/esm/FunnelChart/funnelStepCurve.d.ts +0 -4
|
@@ -91,6 +91,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
|
|
|
91
91
|
// ----------------------------------------------------------------------
|
|
92
92
|
apiRef: _propTypes.default.shape({
|
|
93
93
|
current: _propTypes.default.shape({
|
|
94
|
+
exportAsImage: _propTypes.default.func.isRequired,
|
|
95
|
+
exportAsPrint: _propTypes.default.func.isRequired,
|
|
94
96
|
setZoomData: _propTypes.default.func.isRequired
|
|
95
97
|
})
|
|
96
98
|
}),
|
|
@@ -181,6 +183,10 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
|
|
|
181
183
|
* @default false
|
|
182
184
|
*/
|
|
183
185
|
loading: _propTypes.default.bool,
|
|
186
|
+
/**
|
|
187
|
+
* Localized text for chart components.
|
|
188
|
+
*/
|
|
189
|
+
localeText: _propTypes.default.object,
|
|
184
190
|
/**
|
|
185
191
|
* The margin between the SVG and the drawing area.
|
|
186
192
|
* It's used for leaving some space for extra information such as the x- and y-axis or legend.
|
|
@@ -197,7 +203,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
|
|
|
197
203
|
* The function called for onClick events.
|
|
198
204
|
* The second argument contains information about all line/bar elements at the current mouse position.
|
|
199
205
|
* @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
|
|
200
|
-
* @param {null |
|
|
206
|
+
* @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
|
|
201
207
|
*/
|
|
202
208
|
onAxisClick: _propTypes.default.func,
|
|
203
209
|
/**
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
|
|
2
|
+
import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
|
|
2
3
|
import { UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
|
|
3
|
-
export type BarChartProPluginsSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'bar'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProZoomSignature];
|
|
4
|
+
export type BarChartProPluginsSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'bar'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProZoomSignature, UseChartProExportSignature];
|
|
4
5
|
export declare const BAR_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<BarChartProPluginsSignatures>;
|
|
@@ -5,5 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.BAR_CHART_PRO_PLUGINS = void 0;
|
|
7
7
|
var _internals = require("@mui/x-charts/internals");
|
|
8
|
+
var _useChartProExport = require("../internals/plugins/useChartProExport");
|
|
8
9
|
var _useChartProZoom = require("../internals/plugins/useChartProZoom");
|
|
9
|
-
const BAR_CHART_PRO_PLUGINS = exports.BAR_CHART_PRO_PLUGINS = [_internals.useChartZAxis, _internals.useChartCartesianAxis, _internals.useChartInteraction, _internals.useChartHighlight, _useChartProZoom.useChartProZoom];
|
|
10
|
+
const BAR_CHART_PRO_PLUGINS = exports.BAR_CHART_PRO_PLUGINS = [_internals.useChartZAxis, _internals.useChartCartesianAxis, _internals.useChartInteraction, _internals.useChartHighlight, _useChartProZoom.useChartProZoom, _useChartProExport.useChartProExport];
|
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,227 @@
|
|
|
5
5
|
All notable changes to this project will be documented in this file.
|
|
6
6
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
7
7
|
|
|
8
|
+
## 8.2.0
|
|
9
|
+
|
|
10
|
+
_May 1, 2025_
|
|
11
|
+
|
|
12
|
+
We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
|
|
13
|
+
|
|
14
|
+
- 📊 `<FunnelChart/>` now uses the `strawberrySky` sequential color palette by default.
|
|
15
|
+
<img width="481" alt="Screenshot 2025-04-29 at 13 55 21" src="https://github.com/user-attachments/assets/182085d1-a7ce-4e4d-9d8d-a4fe87f27167" />
|
|
16
|
+
- 📊 Add API to export a chart as an image: `apiRef.exportAsImage` — [Learn more](https://mui.com/x/react-charts/export/#export-as-image).
|
|
17
|
+
|
|
18
|
+
Special thanks go out to the community members for their valuable contributions:
|
|
19
|
+
@federico-ntr, @nusr.
|
|
20
|
+
Following are all team members who have contributed to this release:
|
|
21
|
+
@alexfauquette, @arminmeh, @bernardobelchior, @hasdfa, @Janpot, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @oliviertassinari, @romgrk.
|
|
22
|
+
|
|
23
|
+
<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
|
|
24
|
+
|
|
25
|
+
### Data Grid
|
|
26
|
+
|
|
27
|
+
#### `@mui/x-data-grid@8.2.0`
|
|
28
|
+
|
|
29
|
+
- [DataGrid] Fix panel alignment (#17625) @KenanYusuf
|
|
30
|
+
- [DataGrid] Fix theme `defaultProps` causing unwanted re-renders (#17490) @KenanYusuf
|
|
31
|
+
- [DataGrid] Fix circular reference error (#17591) @romgrk
|
|
32
|
+
- [DataGrid] Fix `<GridEditInputCell />` break input (#16773) @nusr
|
|
33
|
+
|
|
34
|
+
#### `@mui/x-data-grid-pro@8.2.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
35
|
+
|
|
36
|
+
Same changes as in `@mui/x-data-grid@8.2.0`, plus:
|
|
37
|
+
|
|
38
|
+
- [DataGridPro] Use intersection observer to trigger server-side infinite loading (#17369) @arminmeh
|
|
39
|
+
|
|
40
|
+
#### `@mui/x-data-grid-premium@8.2.0` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
41
|
+
|
|
42
|
+
Same changes as in `@mui/x-data-grid-pro@8.2.0`.
|
|
43
|
+
|
|
44
|
+
### Date and Time Pickers
|
|
45
|
+
|
|
46
|
+
#### `@mui/x-date-pickers@8.2.0`
|
|
47
|
+
|
|
48
|
+
- [l10n] Improve Italian (it-IT) locale (#17600) @federico-ntr
|
|
49
|
+
- [pickers] Refactor owner state typing (#17517) @LukasTy
|
|
50
|
+
|
|
51
|
+
#### `@mui/x-date-pickers-pro@8.2.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
52
|
+
|
|
53
|
+
Same changes as in `@mui/x-date-pickers@8.2.0`.
|
|
54
|
+
|
|
55
|
+
### Charts
|
|
56
|
+
|
|
57
|
+
#### `@mui/x-charts@8.2.0`
|
|
58
|
+
|
|
59
|
+
- [charts] Add library name to errors (#17547) @bernardobelchior
|
|
60
|
+
- [charts] Add monochrome palettes (#17610) @JCQuintas
|
|
61
|
+
- [charts] Add screenshot of the tooltip (#17395) @alexfauquette
|
|
62
|
+
- [charts] Default bar chart x-axis scale type to band (#17519) @bernardobelchior
|
|
63
|
+
- [charts] Document axis ID uniqueness constraints (#17630) @bernardobelchior
|
|
64
|
+
- [charts] Refactor axis types (#17632) @bernardobelchior
|
|
65
|
+
- [charts] Use `<circle />` for circular legend mark (#17590) @alexfauquette
|
|
66
|
+
|
|
67
|
+
#### `@mui/x-charts-pro@8.2.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
68
|
+
|
|
69
|
+
Same changes as in `@mui/x-charts@8.2.0`, plus:
|
|
70
|
+
|
|
71
|
+
- [charts-pro] Add `gap` option to `<FunnelChart />` (#17642) @JCQuintas
|
|
72
|
+
- [charts-pro] Export charts as image (#17353) @bernardobelchior
|
|
73
|
+
- [charts-pro] Simplify zoom testing (#17525) @JCQuintas
|
|
74
|
+
- [charts-pro] Use new sequential color palette in `<FunnelChart />` (#17606) @JCQuintas
|
|
75
|
+
|
|
76
|
+
### Tree View
|
|
77
|
+
|
|
78
|
+
#### `@mui/x-tree-view@8.2.0`
|
|
79
|
+
|
|
80
|
+
Internal changes.
|
|
81
|
+
|
|
82
|
+
#### `@mui/x-tree-view-pro@8.2.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
83
|
+
|
|
84
|
+
Same changes as in `@mui/x-tree-view@8.2.0`.
|
|
85
|
+
|
|
86
|
+
### Docs
|
|
87
|
+
|
|
88
|
+
- [docs][charts] Add composition sections (#17377) @alexfauquette
|
|
89
|
+
- [docs][charts] Add docs on tooltip style (#17601) @bernardobelchior
|
|
90
|
+
- [docs][charts] Fix highlighting heading structure (#17581) @oliviertassinari
|
|
91
|
+
- [docs][charts] Improve export docs (#17538) @oliviertassinari
|
|
92
|
+
- [docs][charts] Similar introduction on most charts pages (#17374) @alexfauquette
|
|
93
|
+
- [docs][DataGrid] Clear component docs (#17540) @oliviertassinari
|
|
94
|
+
- [docs] Explicitly state that `groupingColDef` reference needs to be stable (#17544) @arminmeh
|
|
95
|
+
- [docs] Fix <kbd> a11y (#17536) @oliviertassinari
|
|
96
|
+
- [docs] Fix CodeSandbox spelling @oliviertassinari
|
|
97
|
+
- [docs] Fix coding style function @oliviertassinari
|
|
98
|
+
- [docs] Fix migration guide format (#17450) @oliviertassinari
|
|
99
|
+
- [docs] Improve data grid export docs (#17551) @MBilalShafi
|
|
100
|
+
- [docs] Remove leftover `@next` usages (#17542) @LukasTy
|
|
101
|
+
|
|
102
|
+
### Core
|
|
103
|
+
|
|
104
|
+
- [core] Add security label to dependabot PRs @oliviertassinari
|
|
105
|
+
- [core] Allow post-install vale @oliviertassinari
|
|
106
|
+
- [core] Component consistency @oliviertassinari
|
|
107
|
+
- [core] Fix all Vale errors @oliviertassinari
|
|
108
|
+
- [core] Move `loadStyleSheets` to internals and use it in data grid and charts (#17548) @bernardobelchior
|
|
109
|
+
- [core] Remove empty version (#17582) @oliviertassinari
|
|
110
|
+
- [core] Remove eslint from codemod spec files (#17443) @alexfauquette
|
|
111
|
+
- [core] Remove unnecessary versions (#17597) @oliviertassinari
|
|
112
|
+
- [code-infra] Allow postinstall scripts for packages requesting it (#17635) @LukasTy
|
|
113
|
+
- [code-infra] Data Grid `vitest` changes (#17619) @JCQuintas
|
|
114
|
+
- [code-infra] Fix date-time sensitive tests (#17644) @JCQuintas
|
|
115
|
+
- [code-infra] Fix extension handling for type imports (#17636) @Janpot
|
|
116
|
+
- [code-infra] Further remove `clock=fake` and add `async act` for datagrid (#17563) @JCQuintas
|
|
117
|
+
- [code-infra] Latest vitest picker changes (#17577) @JCQuintas
|
|
118
|
+
- [docs-infra] Fix Vale no longer working (#17602) @alexfauquette
|
|
119
|
+
- [docs-infra] Uniformize Vale between repositories @oliviertassinari
|
|
120
|
+
- [infra] Updates to `branch switch comments` (#17589) @michelengelen
|
|
121
|
+
- [x-telemetry] Fix issue with get machineid hash (#17614) @hasdfa
|
|
122
|
+
|
|
123
|
+
## 8.1.0
|
|
124
|
+
|
|
125
|
+
_Apr 24, 2025_
|
|
126
|
+
|
|
127
|
+
We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
|
|
128
|
+
|
|
129
|
+
- 📊 Add API to print a chart or export it as PDF: `apiRef.exportAsPrint()`.
|
|
130
|
+
- 📚 Documentation improvements
|
|
131
|
+
- 🐞 Bugfixes
|
|
132
|
+
|
|
133
|
+
Special thanks go out to the community members for their valuable contributions:
|
|
134
|
+
@lhilgert9, @ArturAghakaryan, @sai6855.
|
|
135
|
+
Following are all team members who have contributed to this release:
|
|
136
|
+
@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @JCQuintas, @joserodolfofreitas, @KenanYusuf, @LukasTy, @mapache-salvaje, @oliviertassinari, @romgrk.
|
|
137
|
+
|
|
138
|
+
<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
|
|
139
|
+
|
|
140
|
+
### Data Grid
|
|
141
|
+
|
|
142
|
+
#### `@mui/x-data-grid@8.1.0`
|
|
143
|
+
|
|
144
|
+
- [DataGrid] Allow row deselection with multiple rows selected (#17473) @arminmeh
|
|
145
|
+
- [DataGrid] Fix column title truncation on touch devices (#17375) @KenanYusuf
|
|
146
|
+
- [DataGrid] Remove internal usage of `material` prop (#17513) @KenanYusuf
|
|
147
|
+
- [DataGrid] Fix apiRef not being passed on onCellClick params (#17335) @sai6855
|
|
148
|
+
- [DataGrid] Add Armenian (hy-AM) locale (#17527) @ArturAghakaryan
|
|
149
|
+
|
|
150
|
+
#### `@mui/x-data-grid-pro@8.1.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
151
|
+
|
|
152
|
+
Same changes as in `@mui/x-data-grid@8.1.0`, plus:
|
|
153
|
+
|
|
154
|
+
- [DataGridPro] Fix locales.ts export (#17433) @lhilgert9
|
|
155
|
+
- [DataGridPro] Avoid proptypes warnings with header filters in React 17 (#17482) @cherniavskii
|
|
156
|
+
- [DataGridPro] Fix expandable rows detail content height updates (#17394) @arminmeh
|
|
157
|
+
|
|
158
|
+
#### `@mui/x-data-grid-premium@8.1.0` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
159
|
+
|
|
160
|
+
Same changes as in `@mui/x-data-grid-pro@8.1.0`.
|
|
161
|
+
|
|
162
|
+
### Date and Time Pickers
|
|
163
|
+
|
|
164
|
+
#### `@mui/x-date-pickers@8.1.0`
|
|
165
|
+
|
|
166
|
+
- [pickers] Improve `PickersInputBase` owner state typing (#17478) @LukasTy
|
|
167
|
+
|
|
168
|
+
#### `@mui/x-date-pickers-pro@8.1.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
169
|
+
|
|
170
|
+
Same changes as in `@mui/x-date-pickers@8.1.0`.
|
|
171
|
+
|
|
172
|
+
### Charts
|
|
173
|
+
|
|
174
|
+
- Add API to print a chart or export it as PDF: `apiRef.exportAsPrint()`.
|
|
175
|
+
|
|
176
|
+
#### `@mui/x-charts@8.1.0`
|
|
177
|
+
|
|
178
|
+
- [charts] Add a localization provider (#17325) @alexfauquette
|
|
179
|
+
- [charts] Add codemod for replacing legend's hidden slot prop (#17392) @bernardobelchior
|
|
180
|
+
- [charts] Fix chart visual tests flakiness (#17469) @bernardobelchior
|
|
181
|
+
- [charts] Fix tooltip position (#17440) @alexfauquette
|
|
182
|
+
- [charts] Improve axis tooltip performances (#17398) @alexfauquette
|
|
183
|
+
- [charts] Move radar from under development to preview (#17418) @alexfauquette
|
|
184
|
+
- [charts] Advance time in charts regression tests (#17420) @bernardobelchior
|
|
185
|
+
- [charts] Fix charts visuals flakiness (#17472) @bernardobelchior
|
|
186
|
+
- [charts] Move `rafThrottle` on event handlers instead of setter (#17489) @bernardobelchior
|
|
187
|
+
|
|
188
|
+
#### `@mui/x-charts-pro@8.1.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
189
|
+
|
|
190
|
+
Same changes as in `@mui/x-charts@8.1.0`, plus:
|
|
191
|
+
|
|
192
|
+
- [charts-pro] Add export as PDF/print functionality (#17285) @bernardobelchior
|
|
193
|
+
- [charts-pro] Fix axis zoom being disabled when not specified in `initialZoom` (#17500) @bernardobelchior
|
|
194
|
+
|
|
195
|
+
### Tree View
|
|
196
|
+
|
|
197
|
+
#### `@mui/x-tree-view@8.1.0`
|
|
198
|
+
|
|
199
|
+
Internal changes.
|
|
200
|
+
|
|
201
|
+
#### `@mui/x-tree-view-pro@8.1.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
202
|
+
|
|
203
|
+
Same changes as in `@mui/x-tree-view@8.1.0`.
|
|
204
|
+
|
|
205
|
+
### Docs
|
|
206
|
+
|
|
207
|
+
- [docs] Fix AI Assistant Panel Trigger demo (#17426) @KenanYusuf
|
|
208
|
+
- [docs] Fix DataGrid's master-detail demo for one expanded detail panel at a time (#17471) @arminmeh
|
|
209
|
+
- [docs] Improve StackOverflow links (#17483) @oliviertassinari
|
|
210
|
+
- [docs] Refine charts demos (#17417) @alexfauquette
|
|
211
|
+
- [docs] Remove ad on paid docs pages (#17373) @oliviertassinari
|
|
212
|
+
- [docs] Serve migration guides in raw markdown format (#17210) @cherniavskii
|
|
213
|
+
- [docs] Fix heading structure (#17495) @oliviertassinari
|
|
214
|
+
- [docs] Revise the Row Grouping doc (#16217) @mapache-salvaje
|
|
215
|
+
- [docs] Fix ellipsis in the demo (#17476) @oliviertassinari
|
|
216
|
+
- [docs] Add docs information for Legend HTML (#17502) @alexfauquette
|
|
217
|
+
- [docs] Refine charts demos (#17417) @alexfauquette
|
|
218
|
+
- [tree view][docs] Copyedit the Tree View Overview page (#17498) @mapache-salvaje
|
|
219
|
+
|
|
220
|
+
### Core
|
|
221
|
+
|
|
222
|
+
- [core] Bump `@types/node` (#17444) @LukasTy
|
|
223
|
+
- [core] Remove `react-is` dependency (#17470) @LukasTy
|
|
224
|
+
- [core] Remove redundant `overridesResolver` in `styled` components (#17466) @romgrk
|
|
225
|
+
- [core] Update support table (#17425) @joserodolfofreitas
|
|
226
|
+
- [code-infra] Ditch `@babel/node` (#17446) @LukasTy
|
|
227
|
+
- [code-infra] Further remove `clock=fake` from pickers (#17253) @JCQuintas
|
|
228
|
+
|
|
8
229
|
## 8.0.0
|
|
9
230
|
|
|
10
231
|
_Apr 17, 2025_
|
|
@@ -1715,7 +1936,7 @@ Same changes as in `@mui/x-tree-view@8.0.0-alpha.8`.
|
|
|
1715
1936
|
- [docs] Add example for custom legend (#16169) @alexfauquette
|
|
1716
1937
|
- [docs] Add full custom field creation example (#15194) @flaviendelangle
|
|
1717
1938
|
- [docs] Copyedit the Data Grid cell selection page (#16099) @samuelsycamore
|
|
1718
|
-
- [docs] Fix demo rendering issue on
|
|
1939
|
+
- [docs] Fix demo rendering issue on CodeSandbox (#16118) @arminmeh
|
|
1719
1940
|
- [docs] Remove broken links (#16167) @alexfauquette
|
|
1720
1941
|
- [docs] Split the Data Grid editing page (#14931) @MBilalShafi
|
|
1721
1942
|
- [docs] Fix wrong props warnings (#16119) @JCQuintas
|
|
@@ -2162,7 +2383,7 @@ Releasing to benefit from license package fix (#15814).
|
|
|
2162
2383
|
|
|
2163
2384
|
- [code-infra] Add Charts sandbox generation (#15830) @JCQuintas
|
|
2164
2385
|
- [code-infra] Remove redundant `@type/react-test-renderer` dep (#15766) @LukasTy
|
|
2165
|
-
- [license] Use `console.log` for the error message on
|
|
2386
|
+
- [license] Use `console.log` for the error message on CodeSandbox to avoid rendering error (#15814) @arminmeh
|
|
2166
2387
|
|
|
2167
2388
|
## 8.0.0-alpha.3
|
|
2168
2389
|
|
|
@@ -2378,6 +2599,8 @@ Same changes as in `@mui/x-tree-view@v8.0.0-alpha.2`.
|
|
|
2378
2599
|
|
|
2379
2600
|
### Docs
|
|
2380
2601
|
|
|
2602
|
+
<!-- vale MUI.CorrectRererenceCased = NO -->
|
|
2603
|
+
|
|
2381
2604
|
- [docs] Fix 404 links (#15575) @oliviertassinari
|
|
2382
2605
|
- [docs] Fix bash comments (#15571) @oliviertassinari
|
|
2383
2606
|
- [docs] Fix Pickers theme augmentation example (#15672) @LukasTy
|
|
@@ -2387,6 +2610,8 @@ Same changes as in `@mui/x-tree-view@v8.0.0-alpha.2`.
|
|
|
2387
2610
|
- [docs] Fix `anchorEl` API page for charts (#15625) @oliviertassinari
|
|
2388
2611
|
- [docs] Add documentation for the list view feature (#15344) @KenanYusuf
|
|
2389
2612
|
|
|
2613
|
+
<!-- vale MUI.CorrectRererenceCased = YES -->
|
|
2614
|
+
|
|
2390
2615
|
### Core
|
|
2391
2616
|
|
|
2392
2617
|
- [core] Follow `()` function convention for docs @oliviertassinari
|
|
@@ -3295,7 +3520,7 @@ Same changes as in `@mui/x-tree-view@7.24.0`.
|
|
|
3295
3520
|
### Docs
|
|
3296
3521
|
|
|
3297
3522
|
- [docs] Copyedit the Data Grid cell selection page (#16213) @samuelsycamore
|
|
3298
|
-
- [docs] Fix demo rendering issue on
|
|
3523
|
+
- [docs] Fix demo rendering issue on CodeSandbox (#16129) @arminmeh
|
|
3299
3524
|
|
|
3300
3525
|
### Core
|
|
3301
3526
|
|
|
@@ -3573,7 +3798,7 @@ Releasing to benefit from license package fix (#15818).
|
|
|
3573
3798
|
### Core
|
|
3574
3799
|
|
|
3575
3800
|
- [core] Add `@mui/x-tree-view-pro` to `releaseChangelog` (#15747) @flaviendelangle
|
|
3576
|
-
- [license] Use `console.log` for the error message on
|
|
3801
|
+
- [license] Use `console.log` for the error message on CodeSandbox to avoid rendering error (#15818) @arminmeh
|
|
3577
3802
|
|
|
3578
3803
|
## 7.23.1
|
|
3579
3804
|
|
|
@@ -6914,7 +7139,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.4`.
|
|
|
6914
7139
|
/>
|
|
6915
7140
|
```
|
|
6916
7141
|
|
|
6917
|
-
- The headless field hooks (
|
|
7142
|
+
- The headless field hooks (for example `useDateField()`) now returns a new prop called `enableAccessibleFieldDOMStructure`.
|
|
6918
7143
|
This property is utilized to determine whether the anticipated UI is constructed using an accessible DOM structure.
|
|
6919
7144
|
Learn more about this new accessible DOM structure in the [v8 migration guide](https://v7.mui.com/x/migration/migration-pickers-v7/#new-dom-structure-for-the-field).
|
|
6920
7145
|
|
|
@@ -7,6 +7,7 @@ export type ChartContainerProProps<TSeries extends ChartSeriesType = ChartSeries
|
|
|
7
7
|
type ChartContainerProComponent = <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartContainerProProps<TSeries, TSignatures> & {
|
|
8
8
|
ref?: React.ForwardedRef<SVGSVGElement>;
|
|
9
9
|
}) => React.JSX.Element;
|
|
10
|
+
export type ChartProApi = NonNullable<NonNullable<ChartContainerProProps['apiRef']>['current']>;
|
|
10
11
|
/**
|
|
11
12
|
* It sets up the data providers as well as the `<svg>` for the chart.
|
|
12
13
|
*
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ChartAnyPluginSignature, ChartSeriesType, UseChartContainerPropsReturnValue } from '@mui/x-charts/internals';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { ChartDataProviderProps } from '@mui/x-charts/ChartDataProvider';
|
|
4
|
-
import type { ChartContainerProProps } from
|
|
4
|
+
import type { ChartContainerProProps } from "./ChartContainerPro.js";
|
|
5
5
|
import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
|
|
6
6
|
export type UseChartContainerProPropsReturnValue<TSeries extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]> = Pick<UseChartContainerPropsReturnValue<TSeries, TSignatures>, 'chartsSurfaceProps' | 'children'> & {
|
|
7
7
|
chartDataProviderProProps: ChartDataProviderProps<TSeries, TSignatures>;
|
|
@@ -12,11 +12,12 @@ var React = _interopRequireWildcard(require("react"));
|
|
|
12
12
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
13
|
var _Watermark = require("@mui/x-license/Watermark");
|
|
14
14
|
var _internals = require("@mui/x-charts/internals");
|
|
15
|
+
var _ChartsLocalizationProvider = require("@mui/x-charts/ChartsLocalizationProvider");
|
|
15
16
|
var _useLicenseVerifier = require("@mui/x-license/useLicenseVerifier");
|
|
16
17
|
var _allPlugins = require("../internals/plugins/allPlugins");
|
|
17
18
|
var _useChartDataProviderProProps = require("./useChartDataProviderProProps");
|
|
18
19
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
19
|
-
const releaseInfo = "
|
|
20
|
+
const releaseInfo = "MTc0NjA0NjgwMDAwMA==";
|
|
20
21
|
const packageIdentifier = 'x-charts-pro';
|
|
21
22
|
/**
|
|
22
23
|
* Orchestrates the data providers for the chart components and hooks.
|
|
@@ -48,13 +49,17 @@ const packageIdentifier = 'x-charts-pro';
|
|
|
48
49
|
function ChartDataProviderPro(props) {
|
|
49
50
|
const {
|
|
50
51
|
children,
|
|
52
|
+
localeText,
|
|
51
53
|
chartProviderProps
|
|
52
54
|
} = (0, _useChartDataProviderProProps.useChartDataProviderProProps)((0, _extends2.default)({}, props, {
|
|
53
55
|
plugins: props.plugins ?? _allPlugins.DEFAULT_PLUGINS
|
|
54
56
|
}));
|
|
55
57
|
(0, _useLicenseVerifier.useLicenseVerifier)(packageIdentifier, releaseInfo);
|
|
56
58
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.ChartProvider, (0, _extends2.default)({}, chartProviderProps, {
|
|
57
|
-
children: [
|
|
59
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLocalizationProvider.ChartsLocalizationProvider, {
|
|
60
|
+
localeText: localeText,
|
|
61
|
+
children: children
|
|
62
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Watermark.Watermark, {
|
|
58
63
|
packageName: packageIdentifier,
|
|
59
64
|
releaseInfo: releaseInfo
|
|
60
65
|
})]
|
|
@@ -86,6 +91,10 @@ process.env.NODE_ENV !== "production" ? ChartDataProviderPro.propTypes = {
|
|
|
86
91
|
* If you don't provide this prop. It falls back to a randomly generated id.
|
|
87
92
|
*/
|
|
88
93
|
id: _propTypes.default.string,
|
|
94
|
+
/**
|
|
95
|
+
* Localized text for chart components.
|
|
96
|
+
*/
|
|
97
|
+
localeText: _propTypes.default.object,
|
|
89
98
|
/**
|
|
90
99
|
* The margin between the SVG and the drawing area.
|
|
91
100
|
* It's used for leaving some space for extra information such as the x- and y-axis or legend.
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { ChartAnyPluginSignature, ChartSeriesType } from '@mui/x-charts/internals';
|
|
2
|
-
import type { ChartDataProviderProProps } from
|
|
3
|
-
import type { AllPluginSignatures } from
|
|
2
|
+
import type { ChartDataProviderProProps } from "./ChartDataProviderPro.js";
|
|
3
|
+
import type { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
|
|
4
4
|
export declare const useChartDataProviderProProps: <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartDataProviderProProps<TSeries, TSignatures>) => {
|
|
5
5
|
children: import("react").ReactNode;
|
|
6
|
+
localeText: Partial<import("@mui/x-charts/locales").ChartsLocaleText> | undefined;
|
|
6
7
|
chartProviderProps: import("@mui/x-charts/internals").ChartProviderProps<TSeries, TSignatures>;
|
|
7
8
|
};
|
|
@@ -9,10 +9,12 @@ var _internals = require("@mui/x-charts/internals");
|
|
|
9
9
|
const useChartDataProviderProProps = props => {
|
|
10
10
|
const {
|
|
11
11
|
chartProviderProps,
|
|
12
|
+
localeText,
|
|
12
13
|
children
|
|
13
14
|
} = (0, _internals.useChartDataProviderProps)(props);
|
|
14
15
|
return {
|
|
15
16
|
children,
|
|
17
|
+
localeText,
|
|
16
18
|
chartProviderProps
|
|
17
19
|
};
|
|
18
20
|
};
|
|
@@ -70,6 +70,8 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
|
|
|
70
70
|
// ----------------------------------------------------------------------
|
|
71
71
|
apiRef: _propTypes.default.shape({
|
|
72
72
|
current: _propTypes.default.shape({
|
|
73
|
+
exportAsImage: _propTypes.default.func.isRequired,
|
|
74
|
+
exportAsPrint: _propTypes.default.func.isRequired,
|
|
73
75
|
setZoomData: _propTypes.default.func.isRequired
|
|
74
76
|
})
|
|
75
77
|
}),
|
|
@@ -182,6 +184,11 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
|
|
|
182
184
|
* @default false
|
|
183
185
|
*/
|
|
184
186
|
disableAxisListener: _propTypes.default.bool,
|
|
187
|
+
/**
|
|
188
|
+
* The gap, in pixels, between funnel sections.
|
|
189
|
+
* @default 0
|
|
190
|
+
*/
|
|
191
|
+
gap: _propTypes.default.number,
|
|
185
192
|
/**
|
|
186
193
|
* The height of the chart in px. If not defined, it takes the height of the parent element.
|
|
187
194
|
*/
|
|
@@ -218,6 +225,10 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
|
|
|
218
225
|
* @default false
|
|
219
226
|
*/
|
|
220
227
|
loading: _propTypes.default.bool,
|
|
228
|
+
/**
|
|
229
|
+
* Localized text for chart components.
|
|
230
|
+
*/
|
|
231
|
+
localeText: _propTypes.default.object,
|
|
221
232
|
/**
|
|
222
233
|
* The margin between the SVG and the drawing area.
|
|
223
234
|
* It's used for leaving some space for extra information such as the x- and y-axis or legend.
|
|
@@ -234,7 +245,7 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
|
|
|
234
245
|
* The function called for onClick events.
|
|
235
246
|
* The second argument contains information about all line/bar elements at the current mouse position.
|
|
236
247
|
* @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
|
|
237
|
-
* @param {null |
|
|
248
|
+
* @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
|
|
238
249
|
*/
|
|
239
250
|
onAxisClick: _propTypes.default.func,
|
|
240
251
|
/**
|
|
@@ -2,6 +2,11 @@ import * as React from 'react';
|
|
|
2
2
|
import { FunnelItemIdentifier } from "./funnel.types.js";
|
|
3
3
|
import { FunnelPlotSlotExtension } from "./funnelPlotSlots.types.js";
|
|
4
4
|
export interface FunnelPlotProps extends FunnelPlotSlotExtension {
|
|
5
|
+
/**
|
|
6
|
+
* The gap, in pixels, between funnel sections.
|
|
7
|
+
* @default 0
|
|
8
|
+
*/
|
|
9
|
+
gap?: number;
|
|
5
10
|
/**
|
|
6
11
|
* Callback fired when a funnel item is clicked.
|
|
7
12
|
* @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
|
|
@@ -17,21 +17,12 @@ var _hooks = require("@mui/x-charts/hooks");
|
|
|
17
17
|
var _styles = require("@mui/material/styles");
|
|
18
18
|
var _FunnelSection = require("./FunnelSection");
|
|
19
19
|
var _labelUtils = require("./labelUtils");
|
|
20
|
-
var _funnelStepCurve = require("./funnelStepCurve");
|
|
21
20
|
var _useFunnelSeries = require("../hooks/useFunnelSeries");
|
|
21
|
+
var _curves = require("./curves");
|
|
22
22
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
23
|
-
const _excluded = ["onItemClick"];
|
|
23
|
+
const _excluded = ["onItemClick", "gap"];
|
|
24
24
|
_internals.cartesianSeriesTypes.addType('funnel');
|
|
25
|
-
const
|
|
26
|
-
if (curve === 'step') {
|
|
27
|
-
return isHorizontal ? _funnelStepCurve.funnelHorizontalStepCurve : _funnelStepCurve.funnelVerticalStepCurve;
|
|
28
|
-
}
|
|
29
|
-
if (curve === 'bump') {
|
|
30
|
-
return isHorizontal ? (0, _internals.getCurveFactory)('bumpX') : (0, _internals.getCurveFactory)('bumpY');
|
|
31
|
-
}
|
|
32
|
-
return (0, _internals.getCurveFactory)(curve ?? 'linear');
|
|
33
|
-
};
|
|
34
|
-
const useAggregatedData = () => {
|
|
25
|
+
const useAggregatedData = gap => {
|
|
35
26
|
const seriesData = (0, _useFunnelSeries.useFunnelSeriesContext)();
|
|
36
27
|
const {
|
|
37
28
|
xAxis,
|
|
@@ -63,7 +54,7 @@ const useAggregatedData = () => {
|
|
|
63
54
|
const bandWidth = (isXAxisBand || isYAxisBand) && baseScaleConfig.scale?.bandwidth() || 0;
|
|
64
55
|
const xScale = xAxis[xAxisId].scale;
|
|
65
56
|
const yScale = yAxis[yAxisId].scale;
|
|
66
|
-
const curve = getFunnelCurve(currentSeries.curve, isHorizontal);
|
|
57
|
+
const curve = (0, _curves.getFunnelCurve)(currentSeries.curve, isHorizontal, gap);
|
|
67
58
|
const xPosition = (value, bandIndex, stackOffset, useBand) => {
|
|
68
59
|
if (isXAxisBand) {
|
|
69
60
|
const position = xScale(bandIndex);
|
|
@@ -109,16 +100,17 @@ const useAggregatedData = () => {
|
|
|
109
100
|
});
|
|
110
101
|
});
|
|
111
102
|
return result.flat();
|
|
112
|
-
}, [seriesData, xAxis, xAxisIds, yAxis, yAxisIds]);
|
|
103
|
+
}, [seriesData, xAxis, xAxisIds, yAxis, yAxisIds, gap]);
|
|
113
104
|
return allData;
|
|
114
105
|
};
|
|
115
106
|
function FunnelPlot(props) {
|
|
116
107
|
const {
|
|
117
|
-
onItemClick
|
|
108
|
+
onItemClick,
|
|
109
|
+
gap
|
|
118
110
|
} = props,
|
|
119
111
|
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
|
|
120
112
|
const theme = (0, _styles.useTheme)();
|
|
121
|
-
const data = useAggregatedData();
|
|
113
|
+
const data = useAggregatedData(gap);
|
|
122
114
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
|
|
123
115
|
children: [data.map(({
|
|
124
116
|
d,
|
|
@@ -172,6 +164,11 @@ process.env.NODE_ENV !== "production" ? FunnelPlot.propTypes = {
|
|
|
172
164
|
// | These PropTypes are generated from the TypeScript type definitions |
|
|
173
165
|
// | To update them edit the TypeScript types and run "pnpm proptypes" |
|
|
174
166
|
// ----------------------------------------------------------------------
|
|
167
|
+
/**
|
|
168
|
+
* The gap, in pixels, between funnel sections.
|
|
169
|
+
* @default 0
|
|
170
|
+
*/
|
|
171
|
+
gap: _propTypes.default.number,
|
|
175
172
|
/**
|
|
176
173
|
* Callback fired when a funnel item is clicked.
|
|
177
174
|
* @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { CurveGenerator } from '@mui/x-charts-vendor/d3-shape';
|
|
2
|
+
/**
|
|
3
|
+
* This is a custom "bump" curve generator.
|
|
4
|
+
*
|
|
5
|
+
* It takes into account the gap between the points and draws a smooth curve between them.
|
|
6
|
+
*
|
|
7
|
+
* It is based on the d3-shape bump curve generator.
|
|
8
|
+
* https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/bump.js
|
|
9
|
+
*/
|
|
10
|
+
export declare class Bump implements CurveGenerator {
|
|
11
|
+
private context;
|
|
12
|
+
private line;
|
|
13
|
+
private x;
|
|
14
|
+
private y;
|
|
15
|
+
private currentPoint;
|
|
16
|
+
private isHorizontal;
|
|
17
|
+
private gap;
|
|
18
|
+
constructor(context: CanvasRenderingContext2D, isHorizontal: boolean, gap?: number);
|
|
19
|
+
areaStart(): void;
|
|
20
|
+
areaEnd(): void;
|
|
21
|
+
lineStart(): void;
|
|
22
|
+
lineEnd(): void;
|
|
23
|
+
point(x: number, y: number): void;
|
|
24
|
+
}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.Bump = void 0;
|
|
7
|
+
/**
|
|
8
|
+
* This is a custom "bump" curve generator.
|
|
9
|
+
*
|
|
10
|
+
* It takes into account the gap between the points and draws a smooth curve between them.
|
|
11
|
+
*
|
|
12
|
+
* It is based on the d3-shape bump curve generator.
|
|
13
|
+
* https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/bump.js
|
|
14
|
+
*/
|
|
15
|
+
class Bump {
|
|
16
|
+
constructor(context, isHorizontal, gap = 0) {
|
|
17
|
+
this.context = void 0;
|
|
18
|
+
this.line = NaN;
|
|
19
|
+
this.x = NaN;
|
|
20
|
+
this.y = NaN;
|
|
21
|
+
this.currentPoint = 0;
|
|
22
|
+
this.isHorizontal = false;
|
|
23
|
+
this.gap = 0;
|
|
24
|
+
this.context = context;
|
|
25
|
+
this.isHorizontal = isHorizontal;
|
|
26
|
+
this.gap = gap / 2;
|
|
27
|
+
}
|
|
28
|
+
areaStart() {
|
|
29
|
+
this.line = 0;
|
|
30
|
+
}
|
|
31
|
+
areaEnd() {
|
|
32
|
+
this.line = NaN;
|
|
33
|
+
}
|
|
34
|
+
lineStart() {
|
|
35
|
+
this.currentPoint = 0;
|
|
36
|
+
}
|
|
37
|
+
lineEnd() {
|
|
38
|
+
if (this.line || this.line !== 0 && this.currentPoint === 1) {
|
|
39
|
+
this.context.closePath();
|
|
40
|
+
}
|
|
41
|
+
this.line = 1 - this.line;
|
|
42
|
+
}
|
|
43
|
+
point(x, y) {
|
|
44
|
+
x = +x;
|
|
45
|
+
y = +y;
|
|
46
|
+
|
|
47
|
+
// 0 is the top-left corner.
|
|
48
|
+
if (this.isHorizontal) {
|
|
49
|
+
if (this.currentPoint === 0) {
|
|
50
|
+
this.context.moveTo(x + this.gap, y);
|
|
51
|
+
this.context.lineTo(x + this.gap, y);
|
|
52
|
+
} else if (this.currentPoint === 1) {
|
|
53
|
+
this.context.bezierCurveTo((this.x + x) / 2, this.y, (this.x + x) / 2, y, x - this.gap, y);
|
|
54
|
+
} else if (this.currentPoint === 2) {
|
|
55
|
+
this.context.lineTo(x - this.gap, y);
|
|
56
|
+
} else {
|
|
57
|
+
this.context.bezierCurveTo((this.x + x) / 2, this.y, (this.x + x) / 2, y, x + this.gap, y);
|
|
58
|
+
}
|
|
59
|
+
this.currentPoint += 1;
|
|
60
|
+
this.x = x;
|
|
61
|
+
this.y = y;
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
// 0 is the top-right corner.
|
|
66
|
+
if (this.currentPoint === 0) {
|
|
67
|
+
// X from Y
|
|
68
|
+
this.context.moveTo(x, y + this.gap);
|
|
69
|
+
this.context.lineTo(x, y + this.gap);
|
|
70
|
+
} else if (this.currentPoint === 1) {
|
|
71
|
+
this.context.bezierCurveTo(this.x, (this.y + y) / 2, x, (this.y + y) / 2, x, y - this.gap);
|
|
72
|
+
} else if (this.currentPoint === 2) {
|
|
73
|
+
this.context.lineTo(x, y - this.gap);
|
|
74
|
+
} else {
|
|
75
|
+
this.context.bezierCurveTo(this.x, (this.y + y) / 2, x, (this.y + y) / 2, x, y + this.gap);
|
|
76
|
+
}
|
|
77
|
+
this.currentPoint += 1;
|
|
78
|
+
this.x = x;
|
|
79
|
+
this.y = y;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
exports.Bump = Bump;
|