@mui/x-charts-pro 8.0.0-beta.2 → 8.0.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.
Files changed (200) hide show
  1. package/BarChartPro/BarChartPro.js +788 -9
  2. package/CHANGELOG.md +423 -96
  3. package/ChartDataProviderPro/ChartDataProviderPro.d.ts +1 -1
  4. package/ChartDataProviderPro/ChartDataProviderPro.js +27 -22
  5. package/ChartDataProviderPro/useChartDataProviderProProps.d.ts +1 -2
  6. package/ChartDataProviderPro/useChartDataProviderProProps.js +0 -2
  7. package/FunnelChart/FunnelChart.js +73 -4
  8. package/FunnelChart/categoryAxis.types.d.ts +3 -2
  9. package/FunnelChart/funnelSectionClasses.d.ts +5 -0
  10. package/FunnelChart/funnelSectionClasses.js +1 -1
  11. package/FunnelChart/index.d.ts +1 -0
  12. package/FunnelChart/index.js +12 -0
  13. package/FunnelChart/useFunnelChartProps.js +3 -3
  14. package/Heatmap/Heatmap.d.ts +1 -1
  15. package/Heatmap/Heatmap.js +4 -3
  16. package/Heatmap/{HeatmapTooltip.js → HeatmapTooltip/HeatmapTooltip.js} +30 -34
  17. package/Heatmap/HeatmapTooltip/HeatmapTooltipAxesValue.d.ts +4 -0
  18. package/Heatmap/HeatmapTooltip/HeatmapTooltipAxesValue.js +26 -0
  19. package/Heatmap/HeatmapTooltip/index.d.ts +1 -0
  20. package/Heatmap/HeatmapTooltip/index.js +16 -0
  21. package/Heatmap/heatmapClasses.d.ts +5 -0
  22. package/Heatmap/heatmapClasses.js +1 -1
  23. package/Heatmap/index.d.ts +1 -1
  24. package/LineChartPro/LineChartPro.js +788 -9
  25. package/ScatterChartPro/ScatterChartPro.js +788 -9
  26. package/esm/BarChartPro/BarChartPro.js +788 -9
  27. package/esm/ChartDataProviderPro/ChartDataProviderPro.d.ts +1 -1
  28. package/esm/ChartDataProviderPro/ChartDataProviderPro.js +28 -23
  29. package/esm/ChartDataProviderPro/useChartDataProviderProProps.d.ts +1 -2
  30. package/esm/ChartDataProviderPro/useChartDataProviderProProps.js +0 -2
  31. package/esm/FunnelChart/FunnelChart.js +73 -4
  32. package/esm/FunnelChart/categoryAxis.types.d.ts +3 -2
  33. package/esm/FunnelChart/funnelSectionClasses.d.ts +5 -0
  34. package/esm/FunnelChart/funnelSectionClasses.js +1 -1
  35. package/esm/FunnelChart/index.d.ts +1 -0
  36. package/esm/FunnelChart/index.js +1 -0
  37. package/esm/FunnelChart/useFunnelChartProps.js +3 -3
  38. package/esm/Heatmap/Heatmap.d.ts +1 -1
  39. package/esm/Heatmap/Heatmap.js +4 -3
  40. package/{modern/Heatmap → esm/Heatmap/HeatmapTooltip}/HeatmapTooltip.js +30 -34
  41. package/esm/Heatmap/HeatmapTooltip/HeatmapTooltipAxesValue.d.ts +4 -0
  42. package/esm/Heatmap/HeatmapTooltip/HeatmapTooltipAxesValue.js +22 -0
  43. package/esm/Heatmap/HeatmapTooltip/index.d.ts +1 -0
  44. package/esm/Heatmap/HeatmapTooltip/index.js +1 -0
  45. package/esm/Heatmap/heatmapClasses.d.ts +5 -0
  46. package/esm/Heatmap/heatmapClasses.js +1 -1
  47. package/esm/Heatmap/index.d.ts +1 -1
  48. package/esm/Heatmap/index.js +1 -1
  49. package/esm/LineChartPro/LineChartPro.js +788 -9
  50. package/esm/ScatterChartPro/ScatterChartPro.js +788 -9
  51. package/esm/index.js +1 -1
  52. package/esm/internals/plugins/useChartProZoom/useChartProZoom.js +28 -35
  53. package/esm/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.ts +7 -7
  54. package/index.js +1 -1
  55. package/internals/plugins/useChartProZoom/useChartProZoom.js +28 -34
  56. package/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.ts +7 -7
  57. package/package.json +9 -19
  58. package/esm/Heatmap/HeatmapTooltip.js +0 -288
  59. package/esm/internals/utils/releaseInfo.d.ts +0 -1
  60. package/esm/internals/utils/releaseInfo.js +0 -13
  61. package/internals/utils/releaseInfo.d.ts +0 -1
  62. package/internals/utils/releaseInfo.js +0 -21
  63. package/modern/BarChartPro/BarChartPro.d.ts +0 -18
  64. package/modern/BarChartPro/BarChartPro.js +0 -404
  65. package/modern/BarChartPro/BarChartPro.plugins.d.ts +0 -4
  66. package/modern/BarChartPro/BarChartPro.plugins.js +0 -3
  67. package/modern/BarChartPro/index.d.ts +0 -1
  68. package/modern/BarChartPro/index.js +0 -1
  69. package/modern/ChartContainerPro/ChartContainerPro.d.ts +0 -35
  70. package/modern/ChartContainerPro/ChartContainerPro.js +0 -290
  71. package/modern/ChartContainerPro/index.d.ts +0 -2
  72. package/modern/ChartContainerPro/index.js +0 -2
  73. package/modern/ChartContainerPro/useChartContainerProProps.d.ts +0 -9
  74. package/modern/ChartContainerPro/useChartContainerProProps.js +0 -35
  75. package/modern/ChartDataProviderPro/ChartDataProviderPro.d.ts +0 -37
  76. package/modern/ChartDataProviderPro/ChartDataProviderPro.js +0 -106
  77. package/modern/ChartDataProviderPro/index.d.ts +0 -2
  78. package/modern/ChartDataProviderPro/index.js +0 -2
  79. package/modern/ChartDataProviderPro/useChartDataProviderProProps.d.ts +0 -8
  80. package/modern/ChartDataProviderPro/useChartDataProviderProProps.js +0 -15
  81. package/modern/FunnelChart/FunnelChart.d.ts +0 -37
  82. package/modern/FunnelChart/FunnelChart.js +0 -212
  83. package/modern/FunnelChart/FunnelPlot.d.ts +0 -16
  84. package/modern/FunnelChart/FunnelPlot.js +0 -184
  85. package/modern/FunnelChart/FunnelSection.d.ts +0 -15
  86. package/modern/FunnelChart/FunnelSection.js +0 -56
  87. package/modern/FunnelChart/categoryAxis.types.d.ts +0 -24
  88. package/modern/FunnelChart/categoryAxis.types.js +0 -1
  89. package/modern/FunnelChart/funnel.types.d.ts +0 -124
  90. package/modern/FunnelChart/funnel.types.js +0 -1
  91. package/modern/FunnelChart/funnelPlotSlots.types.d.ts +0 -20
  92. package/modern/FunnelChart/funnelPlotSlots.types.js +0 -1
  93. package/modern/FunnelChart/funnelSectionClasses.d.ts +0 -13
  94. package/modern/FunnelChart/funnelSectionClasses.js +0 -20
  95. package/modern/FunnelChart/funnelSlots.types.d.ts +0 -19
  96. package/modern/FunnelChart/funnelSlots.types.js +0 -1
  97. package/modern/FunnelChart/funnelStepCurve.d.ts +0 -4
  98. package/modern/FunnelChart/funnelStepCurve.js +0 -67
  99. package/modern/FunnelChart/index.d.ts +0 -7
  100. package/modern/FunnelChart/index.js +0 -5
  101. package/modern/FunnelChart/labelUtils.d.ts +0 -42
  102. package/modern/FunnelChart/labelUtils.js +0 -166
  103. package/modern/FunnelChart/seriesConfig/extremums.d.ts +0 -3
  104. package/modern/FunnelChart/seriesConfig/extremums.js +0 -42
  105. package/modern/FunnelChart/seriesConfig/getColor.d.ts +0 -3
  106. package/modern/FunnelChart/seriesConfig/getColor.js +0 -4
  107. package/modern/FunnelChart/seriesConfig/getSeriesWithDefaultValues.d.ts +0 -3
  108. package/modern/FunnelChart/seriesConfig/getSeriesWithDefaultValues.js +0 -11
  109. package/modern/FunnelChart/seriesConfig/index.d.ts +0 -2
  110. package/modern/FunnelChart/seriesConfig/index.js +0 -15
  111. package/modern/FunnelChart/seriesConfig/legend.d.ts +0 -3
  112. package/modern/FunnelChart/seriesConfig/legend.js +0 -25
  113. package/modern/FunnelChart/seriesConfig/seriesProcessor.d.ts +0 -3
  114. package/modern/FunnelChart/seriesConfig/seriesProcessor.js +0 -89
  115. package/modern/FunnelChart/seriesConfig/tooltip.d.ts +0 -3
  116. package/modern/FunnelChart/seriesConfig/tooltip.js +0 -29
  117. package/modern/FunnelChart/useFunnelChartProps.d.ts +0 -30
  118. package/modern/FunnelChart/useFunnelChartProps.js +0 -161
  119. package/modern/Heatmap/Heatmap.d.ts +0 -57
  120. package/modern/Heatmap/Heatmap.js +0 -387
  121. package/modern/Heatmap/Heatmap.plugins.d.ts +0 -3
  122. package/modern/Heatmap/Heatmap.plugins.js +0 -2
  123. package/modern/Heatmap/HeatmapItem.d.ts +0 -49
  124. package/modern/Heatmap/HeatmapItem.js +0 -106
  125. package/modern/Heatmap/HeatmapPlot.d.ts +0 -8
  126. package/modern/Heatmap/HeatmapPlot.js +0 -59
  127. package/modern/Heatmap/HeatmapTooltip.d.ts +0 -16
  128. package/modern/Heatmap/heatmapClasses.d.ts +0 -11
  129. package/modern/Heatmap/heatmapClasses.js +0 -14
  130. package/modern/Heatmap/index.d.ts +0 -4
  131. package/modern/Heatmap/index.js +0 -4
  132. package/modern/Heatmap/seriesConfig/extremums.d.ts +0 -2
  133. package/modern/Heatmap/seriesConfig/extremums.js +0 -8
  134. package/modern/Heatmap/seriesConfig/getColor.d.ts +0 -3
  135. package/modern/Heatmap/seriesConfig/getColor.js +0 -15
  136. package/modern/Heatmap/seriesConfig/getSeriesWithDefaultValues.d.ts +0 -3
  137. package/modern/Heatmap/seriesConfig/getSeriesWithDefaultValues.js +0 -8
  138. package/modern/Heatmap/seriesConfig/index.d.ts +0 -2
  139. package/modern/Heatmap/seriesConfig/index.js +0 -14
  140. package/modern/Heatmap/seriesConfig/seriesProcessor.d.ts +0 -3
  141. package/modern/Heatmap/seriesConfig/seriesProcessor.js +0 -21
  142. package/modern/Heatmap/seriesConfig/tooltip.d.ts +0 -3
  143. package/modern/Heatmap/seriesConfig/tooltip.js +0 -25
  144. package/modern/LineChartPro/LineChartPro.d.ts +0 -17
  145. package/modern/LineChartPro/LineChartPro.js +0 -401
  146. package/modern/LineChartPro/LineChartPro.plugins.d.ts +0 -4
  147. package/modern/LineChartPro/LineChartPro.plugins.js +0 -3
  148. package/modern/LineChartPro/index.d.ts +0 -1
  149. package/modern/LineChartPro/index.js +0 -1
  150. package/modern/ScatterChartPro/ScatterChartPro.d.ts +0 -17
  151. package/modern/ScatterChartPro/ScatterChartPro.js +0 -395
  152. package/modern/ScatterChartPro/ScatterChartPro.plugins.d.ts +0 -4
  153. package/modern/ScatterChartPro/ScatterChartPro.plugins.js +0 -3
  154. package/modern/ScatterChartPro/index.d.ts +0 -1
  155. package/modern/ScatterChartPro/index.js +0 -1
  156. package/modern/hooks/index.d.ts +0 -2
  157. package/modern/hooks/index.js +0 -2
  158. package/modern/hooks/useFunnelSeries.d.ts +0 -33
  159. package/modern/hooks/useFunnelSeries.js +0 -42
  160. package/modern/hooks/useHeatmapSeries.d.ts +0 -33
  161. package/modern/hooks/useHeatmapSeries.js +0 -42
  162. package/modern/hooks/zoom/index.d.ts +0 -1
  163. package/modern/hooks/zoom/index.js +0 -1
  164. package/modern/hooks/zoom/useIsZoomInteracting.d.ts +0 -6
  165. package/modern/hooks/zoom/useIsZoomInteracting.js +0 -14
  166. package/modern/index.d.ts +0 -34
  167. package/modern/index.js +0 -45
  168. package/modern/internals/plugins/allPlugins.d.ts +0 -8
  169. package/modern/internals/plugins/allPlugins.js +0 -6
  170. package/modern/internals/plugins/useChartProZoom/index.d.ts +0 -3
  171. package/modern/internals/plugins/useChartProZoom/index.js +0 -3
  172. package/modern/internals/plugins/useChartProZoom/useChartProZoom.d.ts +0 -3
  173. package/modern/internals/plugins/useChartProZoom/useChartProZoom.js +0 -350
  174. package/modern/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.ts +0 -203
  175. package/modern/internals/plugins/useChartProZoom/useChartProZoom.selectors.js +0 -4
  176. package/modern/internals/plugins/useChartProZoom/useChartProZoom.types.d.ts +0 -53
  177. package/modern/internals/plugins/useChartProZoom/useChartProZoom.types.js +0 -1
  178. package/modern/internals/plugins/useChartProZoom/useChartProZoom.utils.d.ts +0 -45
  179. package/modern/internals/plugins/useChartProZoom/useChartProZoom.utils.js +0 -126
  180. package/modern/internals/utils/releaseInfo.d.ts +0 -1
  181. package/modern/internals/utils/releaseInfo.js +0 -13
  182. package/modern/models/index.d.ts +0 -2
  183. package/modern/models/index.js +0 -2
  184. package/modern/models/seriesType/heatmap.d.ts +0 -28
  185. package/modern/models/seriesType/heatmap.js +0 -1
  186. package/modern/models/seriesType/index.d.ts +0 -1
  187. package/modern/models/seriesType/index.js +0 -1
  188. package/modern/package.json +0 -1
  189. package/modern/themeAugmentation/components.d.ts +0 -23
  190. package/modern/themeAugmentation/index.d.ts +0 -4
  191. package/modern/themeAugmentation/index.js +0 -0
  192. package/modern/themeAugmentation/overrides.d.ts +0 -11
  193. package/modern/themeAugmentation/props.d.ts +0 -20
  194. package/modern/typeOverloads/index.d.ts +0 -1
  195. package/modern/typeOverloads/index.js +0 -1
  196. package/modern/typeOverloads/modules.d.ts +0 -33
  197. package/modern/typeOverloads/modules.js +0 -1
  198. package/tsconfig.build.tsbuildinfo +0 -1
  199. /package/Heatmap/{HeatmapTooltip.d.ts → HeatmapTooltip/HeatmapTooltip.d.ts} +0 -0
  200. /package/esm/Heatmap/{HeatmapTooltip.d.ts → HeatmapTooltip/HeatmapTooltip.d.ts} +0 -0
@@ -1,212 +0,0 @@
1
- 'use client';
2
-
3
- import _extends from "@babel/runtime/helpers/esm/extends";
4
- import * as React from 'react';
5
- import { useThemeProps } from '@mui/material/styles';
6
- import PropTypes from 'prop-types';
7
- import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
8
- import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
9
- import { ChartsWrapper } from '@mui/x-charts/internals';
10
- import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
11
- import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
12
- import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
13
- import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
14
- import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
15
- import { FunnelPlot } from "./FunnelPlot.js";
16
- import { useFunnelChartProps } from "./useFunnelChartProps.js";
17
- import { seriesConfig as funnelSeriesConfig } from "./seriesConfig/index.js";
18
- import { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
19
- import { ChartDataProviderPro } from "../ChartDataProviderPro/index.js";
20
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
21
- const seriesConfig = {
22
- funnel: funnelSeriesConfig
23
- };
24
- const FunnelChart = /*#__PURE__*/React.forwardRef(function FunnelChart(props, ref) {
25
- const themedProps = useThemeProps({
26
- props,
27
- name: 'MuiFunnelChart'
28
- });
29
- const {
30
- chartContainerProps,
31
- funnelPlotProps,
32
- overlayProps,
33
- legendProps,
34
- clipPathGroupProps,
35
- chartsAxisProps,
36
- clipPathProps,
37
- chartsWrapperProps,
38
- axisHighlightProps,
39
- children
40
- } = useFunnelChartProps(themedProps);
41
- const {
42
- chartDataProviderProProps,
43
- chartsSurfaceProps
44
- } = useChartContainerProProps(chartContainerProps, ref);
45
- const Tooltip = themedProps.slots?.tooltip ?? ChartsTooltip;
46
- return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
47
- seriesConfig: seriesConfig,
48
- children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
49
- children: [!themedProps.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
50
- children: [/*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
51
- children: [/*#__PURE__*/_jsx(FunnelPlot, _extends({}, funnelPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
52
- })), !themedProps.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, themedProps.slotProps?.tooltip, {
53
- trigger: "item"
54
- })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
55
- }))]
56
- }))
57
- }));
58
- });
59
- process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
60
- // ----------------------------- Warning --------------------------------
61
- // | These PropTypes are generated from the TypeScript type definitions |
62
- // | To update them edit the TypeScript types and run "pnpm proptypes" |
63
- // ----------------------------------------------------------------------
64
- apiRef: PropTypes.shape({
65
- current: PropTypes.shape({
66
- setZoomData: PropTypes.func.isRequired
67
- })
68
- }),
69
- /**
70
- * The configuration of axes highlight.
71
- * Default is set to 'band' in the bar direction.
72
- * Depends on `layout` prop.
73
- * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
74
- */
75
- axisHighlight: PropTypes.shape({
76
- x: PropTypes.oneOf(['band', 'line', 'none']),
77
- y: PropTypes.oneOf(['band', 'line', 'none'])
78
- }),
79
- /**
80
- * The configuration of the category axis.
81
- *
82
- * @default { position: 'none' }
83
- */
84
- categoryAxis: PropTypes.shape({
85
- categories: PropTypes.arrayOf(PropTypes.string),
86
- disableLine: PropTypes.bool,
87
- disableTicks: PropTypes.bool,
88
- id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
89
- position: PropTypes.oneOf(['bottom', 'left', 'none', 'right', 'top']),
90
- scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
91
- size: PropTypes.number,
92
- tickLabelStyle: PropTypes.object,
93
- tickSize: PropTypes.number
94
- }),
95
- children: PropTypes.node,
96
- className: PropTypes.string,
97
- /**
98
- * Color palette used to colorize multiple series.
99
- * @default rainbowSurgePalette
100
- */
101
- colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
102
- desc: PropTypes.string,
103
- /**
104
- * If `true`, the charts will not listen to the mouse move event.
105
- * It might break interactive features, but will improve performance.
106
- * @default false
107
- */
108
- disableAxisListener: PropTypes.bool,
109
- /**
110
- * The height of the chart in px. If not defined, it takes the height of the parent element.
111
- */
112
- height: PropTypes.number,
113
- /**
114
- * If `true`, the legend is not rendered.
115
- * @default false
116
- */
117
- hideLegend: PropTypes.bool,
118
- /**
119
- * The highlighted item.
120
- * Used when the highlight is controlled.
121
- */
122
- highlightedItem: PropTypes.shape({
123
- dataIndex: PropTypes.number,
124
- seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
125
- }),
126
- /**
127
- * This prop is used to help implement the accessibility logic.
128
- * If you don't provide this prop. It falls back to a randomly generated id.
129
- */
130
- id: PropTypes.string,
131
- /**
132
- * The list of zoom data related to each axis.
133
- * Used to initialize the zoom in a specific configuration without controlling it.
134
- */
135
- initialZoom: PropTypes.arrayOf(PropTypes.shape({
136
- axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
137
- end: PropTypes.number.isRequired,
138
- start: PropTypes.number.isRequired
139
- })),
140
- /**
141
- * If `true`, a loading overlay is displayed.
142
- * @default false
143
- */
144
- loading: PropTypes.bool,
145
- /**
146
- * The margin between the SVG and the drawing area.
147
- * It's used for leaving some space for extra information such as the x- and y-axis or legend.
148
- *
149
- * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
150
- */
151
- margin: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
152
- bottom: PropTypes.number,
153
- left: PropTypes.number,
154
- right: PropTypes.number,
155
- top: PropTypes.number
156
- })]),
157
- /**
158
- * The function called for onClick events.
159
- * The second argument contains information about all line/bar elements at the current mouse position.
160
- * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
161
- * @param {null | AxisData} data The data about the clicked axis and items associated with it.
162
- */
163
- onAxisClick: PropTypes.func,
164
- /**
165
- * The callback fired when the highlighted item changes.
166
- *
167
- * @param {HighlightItemData | null} highlightedItem The newly highlighted item.
168
- */
169
- onHighlightChange: PropTypes.func,
170
- /**
171
- * Callback fired when a funnel item is clicked.
172
- * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
173
- * @param {FunnelItemIdentifier} funnelItemIdentifier The funnel item identifier.
174
- */
175
- onItemClick: PropTypes.func,
176
- /**
177
- * The series to display in the funnel chart.
178
- * An array of [[FunnelSeriesType]] objects.
179
- */
180
- series: PropTypes.arrayOf(PropTypes.object).isRequired,
181
- /**
182
- * If `true`, animations are skipped.
183
- * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
184
- */
185
- skipAnimation: PropTypes.bool,
186
- /**
187
- * The props used for each component slot.
188
- * @default {}
189
- */
190
- slotProps: PropTypes.object,
191
- /**
192
- * Overridable component slots.
193
- * @default {}
194
- */
195
- slots: PropTypes.object,
196
- sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
197
- theme: PropTypes.oneOf(['dark', 'light']),
198
- title: PropTypes.string,
199
- /**
200
- * The width of the chart in px. If not defined, it takes the width of the parent element.
201
- */
202
- width: PropTypes.number,
203
- /**
204
- * The list of zoom data related to each axis.
205
- */
206
- zoomData: PropTypes.arrayOf(PropTypes.shape({
207
- axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
208
- end: PropTypes.number.isRequired,
209
- start: PropTypes.number.isRequired
210
- }))
211
- } : void 0;
212
- export { FunnelChart };
@@ -1,16 +0,0 @@
1
- import * as React from 'react';
2
- import { FunnelItemIdentifier } from "./funnel.types.js";
3
- import { FunnelPlotSlotExtension } from "./funnelPlotSlots.types.js";
4
- export interface FunnelPlotProps extends FunnelPlotSlotExtension {
5
- /**
6
- * Callback fired when a funnel item is clicked.
7
- * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
8
- * @param {FunnelItemIdentifier} funnelItemIdentifier The funnel item identifier.
9
- */
10
- onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, funnelItemIdentifier: FunnelItemIdentifier) => void;
11
- }
12
- declare function FunnelPlot(props: FunnelPlotProps): React.JSX.Element;
13
- declare namespace FunnelPlot {
14
- var propTypes: any;
15
- }
16
- export { FunnelPlot };
@@ -1,184 +0,0 @@
1
- import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
2
- import _extends from "@babel/runtime/helpers/esm/extends";
3
- const _excluded = ["onItemClick"];
4
- import * as React from 'react';
5
- import PropTypes from 'prop-types';
6
- import { line as d3Line } from '@mui/x-charts-vendor/d3-shape';
7
- import { getCurveFactory, cartesianSeriesTypes } from '@mui/x-charts/internals';
8
- import { useXAxes, useYAxes } from '@mui/x-charts/hooks';
9
- import { useTheme } from '@mui/material/styles';
10
- import { FunnelSection } from "./FunnelSection.js";
11
- import { alignLabel, positionLabel } from "./labelUtils.js";
12
- import { funnelHorizontalStepCurve, funnelVerticalStepCurve } from "./funnelStepCurve.js";
13
- import { useFunnelSeriesContext } from "../hooks/useFunnelSeries.js";
14
- import { createElement as _createElement } from "react";
15
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
16
- cartesianSeriesTypes.addType('funnel');
17
- const getFunnelCurve = (curve, isHorizontal) => {
18
- if (curve === 'step') {
19
- return isHorizontal ? funnelHorizontalStepCurve : funnelVerticalStepCurve;
20
- }
21
- if (curve === 'bump') {
22
- return isHorizontal ? getCurveFactory('bumpX') : getCurveFactory('bumpY');
23
- }
24
- return getCurveFactory(curve ?? 'linear');
25
- };
26
- const useAggregatedData = () => {
27
- const seriesData = useFunnelSeriesContext();
28
- const {
29
- xAxis,
30
- xAxisIds
31
- } = useXAxes();
32
- const {
33
- yAxis,
34
- yAxisIds
35
- } = useYAxes();
36
- const allData = React.useMemo(() => {
37
- if (seriesData === undefined) {
38
- return [];
39
- }
40
- const {
41
- series,
42
- seriesOrder
43
- } = seriesData;
44
- const defaultXAxisId = xAxisIds[0];
45
- const defaultYAxisId = yAxisIds[0];
46
- const isHorizontal = Object.values(series).some(s => s.layout === 'horizontal');
47
- const result = seriesOrder.map(seriesId => {
48
- const currentSeries = series[seriesId];
49
- const xAxisId = currentSeries.xAxisId ?? defaultXAxisId;
50
- const yAxisId = currentSeries.yAxisId ?? defaultYAxisId;
51
- const valueFormatter = currentSeries.valueFormatter;
52
- const baseScaleConfig = isHorizontal ? xAxis[xAxisId] : yAxis[yAxisId];
53
- const isXAxisBand = xAxis[xAxisId].scaleType === 'band';
54
- const isYAxisBand = yAxis[yAxisId].scaleType === 'band';
55
- const bandWidth = (isXAxisBand || isYAxisBand) && baseScaleConfig.scale?.bandwidth() || 0;
56
- const xScale = xAxis[xAxisId].scale;
57
- const yScale = yAxis[yAxisId].scale;
58
- const curve = getFunnelCurve(currentSeries.curve, isHorizontal);
59
- const xPosition = (value, bandIndex, stackOffset, useBand) => {
60
- if (isXAxisBand) {
61
- const position = xScale(bandIndex);
62
- return useBand ? position + bandWidth : position;
63
- }
64
- return xScale(isHorizontal ? value + (stackOffset || 0) : value);
65
- };
66
- const yPosition = (value, bandIndex, stackOffset, useBand) => {
67
- if (isYAxisBand) {
68
- const position = yScale(bandIndex);
69
- return useBand ? position + bandWidth : position;
70
- }
71
- return yScale(isHorizontal ? value : value + (stackOffset || 0));
72
- };
73
- return currentSeries.dataPoints.map((values, dataIndex) => {
74
- const color = currentSeries.data[dataIndex].color;
75
- const id = `${seriesId}-${dataIndex}`;
76
- const sectionLabel = typeof currentSeries.sectionLabel === 'function' ? currentSeries.sectionLabel({
77
- dataIndex,
78
- seriesId,
79
- value: currentSeries.data[dataIndex].value
80
- }) : currentSeries.sectionLabel;
81
- const line = d3Line().x(d => xPosition(d.x, baseScaleConfig.data?.[dataIndex], d.stackOffset, d.useBandWidth)).y(d => yPosition(d.y, baseScaleConfig.data?.[dataIndex], d.stackOffset, d.useBandWidth)).curve(curve);
82
- return {
83
- d: line(values),
84
- color,
85
- id,
86
- seriesId,
87
- dataIndex,
88
- label: sectionLabel !== false && _extends({}, positionLabel(_extends({}, sectionLabel, {
89
- xPosition,
90
- yPosition,
91
- isHorizontal,
92
- values,
93
- dataIndex,
94
- baseScaleData: baseScaleConfig.data ?? []
95
- })), alignLabel(sectionLabel ?? {}), {
96
- value: valueFormatter ? valueFormatter(currentSeries.data[dataIndex], {
97
- dataIndex
98
- }) : currentSeries.data[dataIndex].value?.toLocaleString()
99
- })
100
- };
101
- });
102
- });
103
- return result.flat();
104
- }, [seriesData, xAxis, xAxisIds, yAxis, yAxisIds]);
105
- return allData;
106
- };
107
- function FunnelPlot(props) {
108
- const {
109
- onItemClick
110
- } = props,
111
- other = _objectWithoutPropertiesLoose(props, _excluded);
112
- const theme = useTheme();
113
- const data = useAggregatedData();
114
- return /*#__PURE__*/_jsxs(React.Fragment, {
115
- children: [data.map(({
116
- d,
117
- color,
118
- id,
119
- seriesId,
120
- dataIndex
121
- }) => /*#__PURE__*/_createElement(FunnelSection, _extends({}, other, {
122
- d: d,
123
- color: color,
124
- key: id,
125
- dataIndex: dataIndex,
126
- seriesId: seriesId,
127
- onClick: onItemClick && (event => {
128
- onItemClick(event, {
129
- type: 'funnel',
130
- seriesId,
131
- dataIndex
132
- });
133
- })
134
- }))), data.map(({
135
- id,
136
- label
137
- }) => {
138
- if (!label) {
139
- return null;
140
- }
141
- return /*#__PURE__*/_jsx("text", {
142
- x: label.x,
143
- y: label.y,
144
- textAnchor: label.textAnchor,
145
- dominantBaseline: label.dominantBaseline,
146
- stroke: "none",
147
- pointerEvents: "none",
148
- fontFamily: theme.typography.body2.fontFamily,
149
- fontSize: theme.typography.body2.fontSize,
150
- fontSizeAdjust: theme.typography.body2.fontSizeAdjust,
151
- fontWeight: theme.typography.body2.fontWeight,
152
- letterSpacing: theme.typography.body2.letterSpacing,
153
- fontStretch: theme.typography.body2.fontStretch,
154
- fontStyle: theme.typography.body2.fontStyle,
155
- fontVariant: theme.typography.body2.fontVariant,
156
- fill: (theme.vars || theme)?.palette?.text?.primary,
157
- children: label.value
158
- }, id);
159
- })]
160
- });
161
- }
162
- process.env.NODE_ENV !== "production" ? FunnelPlot.propTypes = {
163
- // ----------------------------- Warning --------------------------------
164
- // | These PropTypes are generated from the TypeScript type definitions |
165
- // | To update them edit the TypeScript types and run "pnpm proptypes" |
166
- // ----------------------------------------------------------------------
167
- /**
168
- * Callback fired when a funnel item is clicked.
169
- * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
170
- * @param {FunnelItemIdentifier} funnelItemIdentifier The funnel item identifier.
171
- */
172
- onItemClick: PropTypes.func,
173
- /**
174
- * The props used for each component slot.
175
- * @default {}
176
- */
177
- slotProps: PropTypes.object,
178
- /**
179
- * Overridable component slots.
180
- * @default {}
181
- */
182
- slots: PropTypes.object
183
- } : void 0;
184
- export { FunnelPlot };
@@ -1,15 +0,0 @@
1
- import * as React from 'react';
2
- import { SeriesId } from '@mui/x-charts/internals';
3
- import { FunnelSectionClasses } from "./funnelSectionClasses.js";
4
- export interface FunnelSectionProps extends Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> {
5
- seriesId: SeriesId;
6
- dataIndex: number;
7
- color: string;
8
- classes?: Partial<FunnelSectionClasses>;
9
- }
10
- export declare const FunnelSectionPath: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, React.SVGProps<SVGPathElement>, {}>;
11
- /**
12
- * @ignore - internal component.
13
- */
14
- declare const FunnelSection: React.ForwardRefExoticComponent<FunnelSectionProps & React.RefAttributes<{}>>;
15
- export { FunnelSection };
@@ -1,56 +0,0 @@
1
- 'use client';
2
-
3
- import _extends from "@babel/runtime/helpers/esm/extends";
4
- import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
5
- const _excluded = ["seriesId", "dataIndex", "classes", "color", "onClick", "className"];
6
- import * as React from 'react';
7
- import { styled } from '@mui/material/styles';
8
- import { useInteractionItemProps, consumeSlots } from '@mui/x-charts/internals';
9
- import { useItemHighlighted } from '@mui/x-charts/hooks';
10
- import clsx from 'clsx';
11
- import { useUtilityClasses } from "./funnelSectionClasses.js";
12
- import { jsx as _jsx } from "react/jsx-runtime";
13
- export const FunnelSectionPath = styled('path')(() => ({
14
- transition: 'opacity 0.2s ease-in, fill 0.2s ease-in'
15
- }));
16
-
17
- /**
18
- * @ignore - internal component.
19
- */
20
- const FunnelSection = consumeSlots('MuiFunnelSection', 'funnelSection', {
21
- classesResolver: useUtilityClasses
22
- }, /*#__PURE__*/React.forwardRef(function FunnelSection(props, ref) {
23
- const {
24
- seriesId,
25
- dataIndex,
26
- classes,
27
- color,
28
- onClick,
29
- className
30
- } = props,
31
- other = _objectWithoutPropertiesLoose(props, _excluded);
32
- const interactionProps = useInteractionItemProps({
33
- type: 'funnel',
34
- seriesId,
35
- dataIndex
36
- });
37
- const {
38
- isFaded,
39
- isHighlighted
40
- } = useItemHighlighted({
41
- seriesId,
42
- dataIndex
43
- });
44
- return /*#__PURE__*/_jsx(FunnelSectionPath, _extends({}, interactionProps, {
45
- filter: isHighlighted ? 'brightness(120%)' : undefined,
46
- opacity: isFaded ? 0.3 : 1,
47
- fill: color,
48
- stroke: "none",
49
- cursor: onClick ? 'pointer' : 'unset',
50
- onClick: onClick,
51
- className: clsx(classes?.root, className, isHighlighted && classes?.highlighted, isFaded && classes?.faded)
52
- }, other, {
53
- ref: ref
54
- }));
55
- }));
56
- export { FunnelSection };
@@ -1,24 +0,0 @@
1
- import { AxisConfig, ScaleName } from '@mui/x-charts/models';
2
- import { MakeOptional } from '@mui/x-internals/types';
3
- export type CategoryAxis = {
4
- /**
5
- * The categories to be displayed on the axis.
6
- * The order of the categories is the order in which they are displayed.
7
- */
8
- categories?: string[];
9
- /**
10
- * The position of the axis.
11
- * - 'left' - The axis is positioned on the left side of the chart.
12
- * - 'right' - The axis is positioned on the right side of the chart.
13
- * - 'top' - The axis is positioned on the top side of the chart.
14
- * - 'bottom' - The axis is positioned on the bottom side of the chart.
15
- * - 'none' - The axis is not displayed.
16
- */
17
- position?: 'left' | 'right' | 'top' | 'bottom' | 'none';
18
- /**
19
- * The size of the axis.
20
- * - If the axis is horizontal, the size is the height of the axis.
21
- * - If the axis is vertical, the size is the width of the axis.
22
- */
23
- size?: number;
24
- } & MakeOptional<Pick<AxisConfig<ScaleName, any>, 'disableLine' | 'disableTicks' | 'scaleType' | 'tickLabelStyle' | 'tickSize' | 'id'>, 'id'>;
@@ -1 +0,0 @@
1
- export {};
@@ -1,124 +0,0 @@
1
- import { ChartsLabelMarkProps } from '@mui/x-charts/ChartsLabel';
2
- import { CommonSeriesType, CartesianSeriesType, CommonDefaultizedProps, SeriesId } from '@mui/x-charts/internals';
3
- import { CurveType, Position } from '@mui/x-charts/models';
4
- import { DefaultizedProps, MakeRequired } from '@mui/x-internals/types';
5
- export type FunnelItemId = string | number;
6
- export type FunnelCurveType = Extract<CurveType, 'linear' | 'step'> | 'bump';
7
- export type FunnelValueType = {
8
- /**
9
- * A unique identifier of the funnel section.
10
- */
11
- id?: FunnelItemId;
12
- /**
13
- * The value of the funnel section.
14
- */
15
- value: number;
16
- /**
17
- * The label to display on the tooltip, funnel section, or the legend. It can be a string or a function.
18
- */
19
- label?: string | ((location: 'tooltip' | 'legend' | 'section') => string);
20
- /**
21
- * The color of the funnel section
22
- */
23
- color?: string;
24
- /**
25
- * Defines the mark type for the funnel item.
26
- * @default 'square'
27
- */
28
- labelMarkType?: ChartsLabelMarkProps['type'];
29
- };
30
- export interface FunnelSeriesType extends Omit<CommonSeriesType<FunnelValueType>, 'color'>, CartesianSeriesType {
31
- type: 'funnel';
32
- /**
33
- * Data associated to the funnel section.
34
- */
35
- data: Readonly<FunnelValueType[]>;
36
- /**
37
- * The label to display on the tooltip or the legend. It can be a string or a function.
38
- */
39
- label?: string | ((location: 'tooltip' | 'legend') => string);
40
- /**
41
- * Layout of the funnel.
42
- * @default 'vertical'
43
- */
44
- layout?: 'horizontal' | 'vertical';
45
- /**
46
- * The type of curve to use for the line. Read more about curves at
47
- * [line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
48
- * @default 'linear'
49
- */
50
- curve?: FunnelCurveType;
51
- /**
52
- * The label configuration for the funnel plot.
53
- * Allows to customize the position and margin of the label that is displayed on the funnel sections.
54
- *
55
- * If set to `false`, the label will not be displayed.
56
- * @default { vertical: 'middle', horizontal: 'center' }
57
- */
58
- sectionLabel?: FunnelLabelOptions | ((item: FunnelItem) => FunnelLabelOptions | false) | false;
59
- }
60
- /**
61
- * An object that allows to identify a funnel item.
62
- * Used for item interaction
63
- */
64
- export type FunnelItemIdentifier = {
65
- type: 'funnel';
66
- /**
67
- * The series id of the funnel.
68
- */
69
- seriesId: SeriesId;
70
- /**
71
- * The index of the data point in the series.
72
- */
73
- dataIndex: number;
74
- };
75
- export type FunnelItem = {
76
- /**
77
- * The series id of the funnel.
78
- */
79
- seriesId: SeriesId;
80
- /**
81
- * The index of the data point in the series.
82
- */
83
- dataIndex: number;
84
- /**
85
- * The value of the data point.
86
- */
87
- value: number;
88
- };
89
- export interface DefaultizedFunnelSeriesType extends DefaultizedProps<FunnelSeriesType, CommonDefaultizedProps | 'layout'> {
90
- dataPoints: FunnelDataPoints[][];
91
- data: Readonly<MakeRequired<FunnelValueType, 'id' | 'color'>[]>;
92
- }
93
- export type FunnelDataPoints = Record<'x' | 'y', number> & {
94
- useBandWidth: boolean;
95
- stackOffset: number;
96
- };
97
- export type FunnelLabelOptions = {
98
- /**
99
- * The position of the label.
100
- * @default { vertical: 'middle', horizontal: 'center' }
101
- */
102
- position?: Position;
103
- /**
104
- * The text anchor of the label. Affects the horizontal alignment of the text.
105
- *
106
- * Default value depends on the position.
107
- */
108
- textAnchor?: 'start' | 'middle' | 'end';
109
- /**
110
- * The dominant baseline of the label. Affects the vertical alignment of the text.
111
- *
112
- * Default value depends on the position.
113
- */
114
- dominantBaseline?: 'auto' | 'baseline' | 'hanging' | 'middle' | 'central' | 'text-after-edge' | 'text-before-edge';
115
- /**
116
- * The offset of the label from the anchor point.
117
- * If a single number is provided, the offset will be applied in both directions.
118
- * @default 0
119
- */
120
- offset?: number | {
121
- x?: number;
122
- y?: number;
123
- };
124
- };
@@ -1 +0,0 @@
1
- export {};
@@ -1,20 +0,0 @@
1
- import * as React from 'react';
2
- import type { FunnelSectionProps } from './FunnelSection';
3
- export interface FunnelPlotSlots {
4
- funnelSection?: React.ElementType<FunnelSectionProps>;
5
- }
6
- export interface FunnelPlotSlotProps {
7
- funnelSection?: FunnelSectionProps;
8
- }
9
- export interface FunnelPlotSlotExtension {
10
- /**
11
- * Overridable component slots.
12
- * @default {}
13
- */
14
- slots?: FunnelPlotSlots;
15
- /**
16
- * The props used for each component slot.
17
- * @default {}
18
- */
19
- slotProps?: FunnelPlotSlotProps;
20
- }
@@ -1 +0,0 @@
1
- export {};
@@ -1,13 +0,0 @@
1
- import type { FunnelSectionProps } from './FunnelSection';
2
- export interface FunnelSectionClasses {
3
- /** Styles applied to the root element. */
4
- root: string;
5
- /** Styles applied to the root element if `highlighted={true}`. */
6
- highlighted: string;
7
- /** Styles applied to the root element if `faded={true}`. */
8
- faded: string;
9
- /** Styles applied to the label element. */
10
- label: string;
11
- }
12
- export declare const useUtilityClasses: (props: FunnelSectionProps) => Record<"label" | "highlighted" | "faded" | "root", string>;
13
- export declare const funnelSectionClasses: FunnelSectionClasses;