@mui/x-charts 7.0.0-beta.3 → 7.0.0-beta.4

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 (218) hide show
  1. package/BarChart/BarChart.js +0 -2
  2. package/CHANGELOG.md +226 -15
  3. package/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js +1 -1
  4. package/ChartsTooltip/utils.js +1 -1
  5. package/ChartsVoronoiHandler/ChartsVoronoiHandler.d.ts +0 -1
  6. package/ChartsVoronoiHandler/ChartsVoronoiHandler.js +1 -2
  7. package/ChartsXAxis/ChartsXAxis.js +1 -1
  8. package/ChartsYAxis/ChartsYAxis.js +1 -1
  9. package/Gauge/Gauge.js +0 -2
  10. package/Gauge/GaugeContainer.d.ts +0 -2
  11. package/Gauge/GaugeContainer.js +0 -2
  12. package/Gauge/GaugeProvider.js +3 -0
  13. package/Gauge/GaugeValueText.js +1 -1
  14. package/LineChart/LineChart.js +0 -2
  15. package/PieChart/PieChart.js +0 -2
  16. package/ResponsiveChartContainer/ResponsiveChartContainer.d.ts +0 -2
  17. package/ResponsiveChartContainer/ResponsiveChartContainer.js +0 -2
  18. package/ScatterChart/ScatterChart.js +0 -3
  19. package/SparkLineChart/SparkLineChart.js +0 -2
  20. package/context/CartesianContextProvider.d.ts +0 -8
  21. package/context/CartesianContextProvider.js +4 -89
  22. package/context/DrawingProvider.d.ts +2 -11
  23. package/context/DrawingProvider.js +10 -35
  24. package/context/HighlightProvider.js +3 -0
  25. package/context/InteractionProvider.js +3 -0
  26. package/context/SeriesContextProvider.js +3 -0
  27. package/context/index.d.ts +0 -2
  28. package/context/index.js +1 -15
  29. package/esm/BarChart/BarChart.js +0 -2
  30. package/esm/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js +2 -2
  31. package/esm/ChartsTooltip/utils.js +2 -2
  32. package/esm/ChartsVoronoiHandler/ChartsVoronoiHandler.js +2 -3
  33. package/esm/ChartsXAxis/ChartsXAxis.js +1 -1
  34. package/esm/ChartsYAxis/ChartsYAxis.js +1 -1
  35. package/esm/Gauge/Gauge.js +0 -2
  36. package/esm/Gauge/GaugeContainer.js +0 -2
  37. package/esm/Gauge/GaugeProvider.js +3 -0
  38. package/esm/Gauge/GaugeValueText.js +1 -1
  39. package/esm/LineChart/LineChart.js +0 -2
  40. package/esm/PieChart/PieChart.js +0 -2
  41. package/esm/ResponsiveChartContainer/ResponsiveChartContainer.js +0 -2
  42. package/esm/ScatterChart/ScatterChart.js +0 -3
  43. package/esm/SparkLineChart/SparkLineChart.js +0 -2
  44. package/esm/context/CartesianContextProvider.js +3 -88
  45. package/esm/context/DrawingProvider.js +10 -36
  46. package/esm/context/HighlightProvider.js +3 -0
  47. package/esm/context/InteractionProvider.js +3 -0
  48. package/esm/context/SeriesContextProvider.js +3 -0
  49. package/esm/context/index.js +1 -2
  50. package/esm/hooks/useAxisEvents.js +2 -2
  51. package/hooks/useAxisEvents.js +1 -1
  52. package/hooks/useTicks.d.ts +1 -1
  53. package/index.js +1 -1
  54. package/modern/BarChart/BarChart.js +0 -2
  55. package/modern/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js +2 -2
  56. package/modern/ChartsTooltip/utils.js +2 -2
  57. package/modern/ChartsVoronoiHandler/ChartsVoronoiHandler.js +2 -3
  58. package/modern/ChartsXAxis/ChartsXAxis.js +1 -1
  59. package/modern/ChartsYAxis/ChartsYAxis.js +1 -1
  60. package/modern/Gauge/Gauge.js +0 -2
  61. package/modern/Gauge/GaugeContainer.js +0 -2
  62. package/modern/Gauge/GaugeProvider.js +3 -0
  63. package/modern/Gauge/GaugeValueText.js +1 -1
  64. package/modern/LineChart/LineChart.js +0 -2
  65. package/modern/PieChart/PieChart.js +0 -2
  66. package/modern/ResponsiveChartContainer/ResponsiveChartContainer.js +0 -2
  67. package/modern/ScatterChart/ScatterChart.js +0 -3
  68. package/modern/SparkLineChart/SparkLineChart.js +0 -2
  69. package/modern/context/CartesianContextProvider.js +3 -88
  70. package/modern/context/DrawingProvider.js +10 -36
  71. package/modern/context/HighlightProvider.js +3 -0
  72. package/modern/context/InteractionProvider.js +3 -0
  73. package/modern/context/SeriesContextProvider.js +3 -0
  74. package/modern/context/index.js +1 -2
  75. package/modern/hooks/useAxisEvents.js +2 -2
  76. package/modern/index.js +1 -1
  77. package/package.json +1 -1
  78. package/legacy/BarChart/BarChart.js +0 -440
  79. package/legacy/BarChart/BarElement.js +0 -119
  80. package/legacy/BarChart/BarPlot.js +0 -232
  81. package/legacy/BarChart/extremums.js +0 -45
  82. package/legacy/BarChart/formatter.js +0 -78
  83. package/legacy/BarChart/index.js +0 -3
  84. package/legacy/BarChart/legend.js +0 -15
  85. package/legacy/ChartContainer/ChartContainer.js +0 -189
  86. package/legacy/ChartContainer/index.js +0 -1
  87. package/legacy/ChartsAxis/ChartsAxis.js +0 -215
  88. package/legacy/ChartsAxis/axisClasses.js +0 -5
  89. package/legacy/ChartsAxis/index.js +0 -2
  90. package/legacy/ChartsAxisHighlight/ChartsAxisHighlight.js +0 -105
  91. package/legacy/ChartsAxisHighlight/index.js +0 -1
  92. package/legacy/ChartsClipPath/ChartsClipPath.js +0 -48
  93. package/legacy/ChartsClipPath/index.js +0 -1
  94. package/legacy/ChartsGrid/ChartsGrid.js +0 -119
  95. package/legacy/ChartsGrid/chartsGridClasses.js +0 -6
  96. package/legacy/ChartsGrid/index.js +0 -2
  97. package/legacy/ChartsLegend/ChartsLegend.js +0 -100
  98. package/legacy/ChartsLegend/DefaultChartsLegend.js +0 -302
  99. package/legacy/ChartsLegend/chartsLegendClasses.js +0 -5
  100. package/legacy/ChartsLegend/index.js +0 -4
  101. package/legacy/ChartsLegend/utils.js +0 -15
  102. package/legacy/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js +0 -75
  103. package/legacy/ChartsOnAxisClickHandler/index.js +0 -1
  104. package/legacy/ChartsReferenceLine/ChartsReferenceLine.js +0 -72
  105. package/legacy/ChartsReferenceLine/ChartsXReferenceLine.js +0 -105
  106. package/legacy/ChartsReferenceLine/ChartsYReferenceLine.js +0 -105
  107. package/legacy/ChartsReferenceLine/chartsReferenceLineClasses.js +0 -6
  108. package/legacy/ChartsReferenceLine/common.js +0 -19
  109. package/legacy/ChartsReferenceLine/index.js +0 -2
  110. package/legacy/ChartsSurface.js +0 -78
  111. package/legacy/ChartsText/ChartsText.js +0 -95
  112. package/legacy/ChartsText/index.js +0 -1
  113. package/legacy/ChartsTooltip/ChartsAxisTooltipContent.js +0 -96
  114. package/legacy/ChartsTooltip/ChartsItemTooltipContent.js +0 -53
  115. package/legacy/ChartsTooltip/ChartsTooltip.js +0 -148
  116. package/legacy/ChartsTooltip/ChartsTooltipTable.js +0 -80
  117. package/legacy/ChartsTooltip/DefaultChartsAxisTooltipContent.js +0 -118
  118. package/legacy/ChartsTooltip/DefaultChartsItemTooltipContent.js +0 -78
  119. package/legacy/ChartsTooltip/chartsTooltipClasses.js +0 -5
  120. package/legacy/ChartsTooltip/index.js +0 -6
  121. package/legacy/ChartsTooltip/utils.js +0 -103
  122. package/legacy/ChartsVoronoiHandler/ChartsVoronoiHandler.js +0 -206
  123. package/legacy/ChartsVoronoiHandler/index.js +0 -1
  124. package/legacy/ChartsXAxis/ChartsXAxis.js +0 -339
  125. package/legacy/ChartsXAxis/index.js +0 -1
  126. package/legacy/ChartsYAxis/ChartsYAxis.js +0 -267
  127. package/legacy/ChartsYAxis/index.js +0 -1
  128. package/legacy/Gauge/Gauge.js +0 -146
  129. package/legacy/Gauge/GaugeContainer.js +0 -215
  130. package/legacy/Gauge/GaugeProvider.js +0 -87
  131. package/legacy/Gauge/GaugeReferenceArc.js +0 -37
  132. package/legacy/Gauge/GaugeValueArc.js +0 -44
  133. package/legacy/Gauge/GaugeValueText.js +0 -66
  134. package/legacy/Gauge/gaugeClasses.js +0 -7
  135. package/legacy/Gauge/index.js +0 -7
  136. package/legacy/Gauge/utils.js +0 -84
  137. package/legacy/LineChart/AnimatedArea.js +0 -102
  138. package/legacy/LineChart/AnimatedLine.js +0 -104
  139. package/legacy/LineChart/AreaElement.js +0 -112
  140. package/legacy/LineChart/AreaPlot.js +0 -149
  141. package/legacy/LineChart/LineChart.js +0 -452
  142. package/legacy/LineChart/LineElement.js +0 -112
  143. package/legacy/LineChart/LineHighlightElement.js +0 -79
  144. package/legacy/LineChart/LineHighlightPlot.js +0 -97
  145. package/legacy/LineChart/LinePlot.js +0 -144
  146. package/legacy/LineChart/MarkElement.js +0 -153
  147. package/legacy/LineChart/MarkPlot.js +0 -178
  148. package/legacy/LineChart/extremums.js +0 -54
  149. package/legacy/LineChart/formatter.js +0 -82
  150. package/legacy/LineChart/index.js +0 -11
  151. package/legacy/LineChart/legend.js +0 -15
  152. package/legacy/PieChart/PieArc.js +0 -103
  153. package/legacy/PieChart/PieArcLabel.js +0 -112
  154. package/legacy/PieChart/PieArcLabelPlot.js +0 -193
  155. package/legacy/PieChart/PieArcPlot.js +0 -180
  156. package/legacy/PieChart/PieChart.js +0 -404
  157. package/legacy/PieChart/PiePlot.js +0 -137
  158. package/legacy/PieChart/dataTransform/transition.js +0 -149
  159. package/legacy/PieChart/dataTransform/useTransformData.js +0 -63
  160. package/legacy/PieChart/formatter.js +0 -55
  161. package/legacy/PieChart/index.js +0 -6
  162. package/legacy/PieChart/legend.js +0 -16
  163. package/legacy/ResponsiveChartContainer/ResponsiveChartContainer.js +0 -185
  164. package/legacy/ResponsiveChartContainer/index.js +0 -1
  165. package/legacy/ResponsiveChartContainer/useChartContainerDimensions.js +0 -73
  166. package/legacy/ScatterChart/Scatter.js +0 -110
  167. package/legacy/ScatterChart/ScatterChart.js +0 -395
  168. package/legacy/ScatterChart/ScatterPlot.js +0 -80
  169. package/legacy/ScatterChart/extremums.js +0 -39
  170. package/legacy/ScatterChart/formatter.js +0 -12
  171. package/legacy/ScatterChart/index.js +0 -3
  172. package/legacy/ScatterChart/legend.js +0 -15
  173. package/legacy/SparkLineChart/SparkLineChart.js +0 -266
  174. package/legacy/SparkLineChart/index.js +0 -1
  175. package/legacy/colorPalettes/colorPalettes.js +0 -15
  176. package/legacy/colorPalettes/index.js +0 -1
  177. package/legacy/constants.js +0 -8
  178. package/legacy/context/CartesianContextProvider.js +0 -327
  179. package/legacy/context/DrawingProvider.js +0 -74
  180. package/legacy/context/HighlightProvider.js +0 -56
  181. package/legacy/context/InteractionProvider.js +0 -81
  182. package/legacy/context/SeriesContextProvider.js +0 -74
  183. package/legacy/context/index.js +0 -2
  184. package/legacy/hooks/index.js +0 -2
  185. package/legacy/hooks/useAxisEvents.js +0 -120
  186. package/legacy/hooks/useChartDimensions.js +0 -18
  187. package/legacy/hooks/useDrawingArea.js +0 -21
  188. package/legacy/hooks/useInteractionItemProps.js +0 -71
  189. package/legacy/hooks/useMounted.js +0 -21
  190. package/legacy/hooks/useReducedMotion.js +0 -27
  191. package/legacy/hooks/useScale.js +0 -33
  192. package/legacy/hooks/useTicks.js +0 -65
  193. package/legacy/index.js +0 -33
  194. package/legacy/internals/components/AxisSharedComponents.js +0 -25
  195. package/legacy/internals/defaultizeColor.js +0 -17
  196. package/legacy/internals/defaultizeValueFormatter.js +0 -12
  197. package/legacy/internals/domUtils.js +0 -121
  198. package/legacy/internals/geometry.js +0 -37
  199. package/legacy/internals/getCurve.js +0 -39
  200. package/legacy/internals/getScale.js +0 -17
  201. package/legacy/internals/getWordsByLines.js +0 -15
  202. package/legacy/internals/isBandScale.js +0 -3
  203. package/legacy/internals/stackSeries.js +0 -92
  204. package/legacy/internals/useAnimatedPath.js +0 -32
  205. package/legacy/internals/utils.js +0 -52
  206. package/legacy/models/axis.js +0 -6
  207. package/legacy/models/helpers.js +0 -1
  208. package/legacy/models/index.js +0 -4
  209. package/legacy/models/layout.js +0 -1
  210. package/legacy/models/seriesType/bar.js +0 -1
  211. package/legacy/models/seriesType/common.js +0 -1
  212. package/legacy/models/seriesType/config.js +0 -1
  213. package/legacy/models/seriesType/index.js +0 -5
  214. package/legacy/models/seriesType/line.js +0 -1
  215. package/legacy/models/seriesType/pie.js +0 -1
  216. package/legacy/models/seriesType/scatter.js +0 -1
  217. package/legacy/models/stacking.js +0 -1
  218. package/legacy/themeAugmentation/index.js +0 -3
@@ -1,146 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
2
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
3
- var _excluded = ["text", "children", "classes"];
4
- import * as React from 'react';
5
- import PropTypes from 'prop-types';
6
- import composeClasses from '@mui/utils/composeClasses';
7
- import { GaugeContainer } from './GaugeContainer';
8
- import { GaugeValueArc } from './GaugeValueArc';
9
- import { GaugeReferenceArc } from './GaugeReferenceArc';
10
- import { getGaugeUtilityClass } from './gaugeClasses';
11
- import { GaugeValueText } from './GaugeValueText';
12
- import { jsx as _jsx } from "react/jsx-runtime";
13
- import { jsxs as _jsxs } from "react/jsx-runtime";
14
- var useUtilityClasses = function useUtilityClasses(props) {
15
- var classes = props.classes;
16
- var slots = {
17
- root: ['root'],
18
- valueArc: ['valueArc'],
19
- referenceArc: ['referenceArc'],
20
- valueText: ['valueText']
21
- };
22
- return composeClasses(slots, getGaugeUtilityClass, classes);
23
- };
24
- function Gauge(props) {
25
- var text = props.text,
26
- children = props.children,
27
- propsClasses = props.classes,
28
- other = _objectWithoutProperties(props, _excluded);
29
- var classes = useUtilityClasses(props);
30
- return /*#__PURE__*/_jsxs(GaugeContainer, _extends({}, other, {
31
- className: classes.root,
32
- children: [/*#__PURE__*/_jsx(GaugeReferenceArc, {
33
- className: classes.referenceArc
34
- }), /*#__PURE__*/_jsx(GaugeValueArc, {
35
- className: classes.valueArc
36
- }), /*#__PURE__*/_jsx(GaugeValueText, {
37
- className: classes.valueText,
38
- text: text
39
- }), children]
40
- }));
41
- }
42
- process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
43
- // ----------------------------- Warning --------------------------------
44
- // | These PropTypes are generated from the TypeScript type definitions |
45
- // | To update them edit the TypeScript types and run "yarn proptypes" |
46
- // ----------------------------------------------------------------------
47
- children: PropTypes.node,
48
- classes: PropTypes.object,
49
- className: PropTypes.string,
50
- /**
51
- * The radius applied to arc corners (similar to border radius).
52
- * Set it to '50%' to get rounded arc.
53
- * @default 0
54
- */
55
- cornerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
56
- /**
57
- * The x coordinate of the arc center.
58
- * Can be a number (in px) or a string with a percentage such as '50%'.
59
- * The '100%' is the width the drawing area.
60
- */
61
- cx: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
62
- /**
63
- * The y coordinate of the arc center.
64
- * Can be a number (in px) or a string with a percentage such as '50%'.
65
- * The '100%' is the height the drawing area.
66
- */
67
- cy: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
68
- desc: PropTypes.string,
69
- /**
70
- * If `true`, the charts will not listen to the mouse move event.
71
- * It might break interactive features, but will improve performance.
72
- * @default false
73
- */
74
- disableAxisListener: PropTypes.bool,
75
- /**
76
- * The end angle (deg).
77
- * @default 360
78
- */
79
- endAngle: PropTypes.number,
80
- /**
81
- * The height of the chart in px. If not defined, it takes the height of the parent element.
82
- * @default undefined
83
- */
84
- height: PropTypes.number,
85
- /**
86
- * The radius between circle center and the begining of the arc.
87
- * Can be a number (in px) or a string with a percentage such as '50%'.
88
- * The '100%' is the maximal radius that fit into the drawing area.
89
- * @default '80%'
90
- */
91
- innerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
92
- /**
93
- * The margin between the SVG and the drawing area.
94
- * It's used for leaving some space for extra information such as the x- and y-axis or legend.
95
- * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
96
- * @default object Depends on the charts type.
97
- */
98
- margin: PropTypes.shape({
99
- bottom: PropTypes.number,
100
- left: PropTypes.number,
101
- right: PropTypes.number,
102
- top: PropTypes.number
103
- }),
104
- /**
105
- * The radius between circle center and the end of the arc.
106
- * Can be a number (in px) or a string with a percentage such as '50%'.
107
- * The '100%' is the maximal radius that fit into the drawing area.
108
- * @default '100%'
109
- */
110
- outerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
111
- /**
112
- * The start angle (deg).
113
- * @default 0
114
- */
115
- startAngle: PropTypes.number,
116
- sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
117
- text: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
118
- title: PropTypes.string,
119
- /**
120
- * The value of the gauge.
121
- * Set to `null` to not display a value.
122
- */
123
- value: PropTypes.number,
124
- /**
125
- * The maximal value of the gauge.
126
- * @default 100
127
- */
128
- valueMax: PropTypes.number,
129
- /**
130
- * The minimal value of the gauge.
131
- * @default 0
132
- */
133
- valueMin: PropTypes.number,
134
- viewBox: PropTypes.shape({
135
- height: PropTypes.number,
136
- width: PropTypes.number,
137
- x: PropTypes.number,
138
- y: PropTypes.number
139
- }),
140
- /**
141
- * The width of the chart in px. If not defined, it takes the width of the parent element.
142
- * @default undefined
143
- */
144
- width: PropTypes.number
145
- } : void 0;
146
- export { Gauge };
@@ -1,215 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
2
- import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
3
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
4
- var _excluded = ["width", "height", "margin", "title", "desc", "value", "valueMin", "valueMax", "startAngle", "endAngle", "outerRadius", "innerRadius", "cornerRadius", "cx", "cy", "children"];
5
- import * as React from 'react';
6
- import PropTypes from 'prop-types';
7
- import useForkRef from '@mui/utils/useForkRef';
8
- import { styled } from '@mui/material/styles';
9
- import { useChartContainerDimensions } from '../ResponsiveChartContainer/useChartContainerDimensions';
10
- import { ChartsSurface } from '../ChartsSurface';
11
- import { DrawingProvider } from '../context/DrawingProvider';
12
- import { GaugeProvider } from './GaugeProvider';
13
- import { jsx as _jsx } from "react/jsx-runtime";
14
- var ResizableContainer = styled('div', {
15
- name: 'MuiGauge',
16
- slot: 'Container'
17
- })(function (_ref) {
18
- var _ownerState$width, _ownerState$height;
19
- var ownerState = _ref.ownerState,
20
- theme = _ref.theme;
21
- return {
22
- width: (_ownerState$width = ownerState.width) != null ? _ownerState$width : '100%',
23
- height: (_ownerState$height = ownerState.height) != null ? _ownerState$height : '100%',
24
- display: 'flex',
25
- position: 'relative',
26
- flexGrow: 1,
27
- flexDirection: 'column',
28
- alignItems: 'center',
29
- justifyContent: 'center',
30
- overflow: 'hidden',
31
- '&>svg': {
32
- width: '100%',
33
- height: '100%'
34
- },
35
- '& text': {
36
- fill: (theme.vars || theme).palette.text.primary
37
- }
38
- };
39
- });
40
- var GaugeContainer = /*#__PURE__*/React.forwardRef(function GaugeContainer(props, ref) {
41
- var inWidth = props.width,
42
- inHeight = props.height,
43
- margin = props.margin,
44
- title = props.title,
45
- desc = props.desc,
46
- value = props.value,
47
- _props$valueMin = props.valueMin,
48
- valueMin = _props$valueMin === void 0 ? 0 : _props$valueMin,
49
- _props$valueMax = props.valueMax,
50
- valueMax = _props$valueMax === void 0 ? 100 : _props$valueMax,
51
- startAngle = props.startAngle,
52
- endAngle = props.endAngle,
53
- outerRadius = props.outerRadius,
54
- innerRadius = props.innerRadius,
55
- cornerRadius = props.cornerRadius,
56
- cx = props.cx,
57
- cy = props.cy,
58
- children = props.children,
59
- other = _objectWithoutProperties(props, _excluded);
60
- var _useChartContainerDim = useChartContainerDimensions(inWidth, inHeight),
61
- _useChartContainerDim2 = _slicedToArray(_useChartContainerDim, 3),
62
- containerRef = _useChartContainerDim2[0],
63
- width = _useChartContainerDim2[1],
64
- height = _useChartContainerDim2[2];
65
- var svgRef = React.useRef(null);
66
- var handleRef = useForkRef(ref, svgRef);
67
- return /*#__PURE__*/_jsx(ResizableContainer, _extends({
68
- ref: containerRef,
69
- ownerState: {
70
- width: inWidth,
71
- height: inHeight
72
- },
73
- role: "meter",
74
- "aria-valuenow": value === null ? undefined : value,
75
- "aria-valuemin": valueMin,
76
- "aria-valuemax": valueMax
77
- }, other, {
78
- children: width && height ? /*#__PURE__*/_jsx(DrawingProvider, {
79
- width: width,
80
- height: height,
81
- margin: _extends({
82
- left: 10,
83
- right: 10,
84
- top: 10,
85
- bottom: 10
86
- }, margin),
87
- svgRef: svgRef,
88
- children: /*#__PURE__*/_jsx(GaugeProvider, {
89
- value: value,
90
- valueMin: valueMin,
91
- valueMax: valueMax,
92
- startAngle: startAngle,
93
- endAngle: endAngle,
94
- outerRadius: outerRadius,
95
- innerRadius: innerRadius,
96
- cornerRadius: cornerRadius,
97
- cx: cx,
98
- cy: cy,
99
- children: /*#__PURE__*/_jsx(ChartsSurface, {
100
- width: width,
101
- height: height,
102
- ref: handleRef,
103
- title: title,
104
- desc: desc,
105
- disableAxisListener: true,
106
- "aria-hidden": "true",
107
- children: children
108
- })
109
- })
110
- }) : null
111
- }));
112
- });
113
- process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
114
- // ----------------------------- Warning --------------------------------
115
- // | These PropTypes are generated from the TypeScript type definitions |
116
- // | To update them edit the TypeScript types and run "yarn proptypes" |
117
- // ----------------------------------------------------------------------
118
- children: PropTypes.node,
119
- className: PropTypes.string,
120
- /**
121
- * The radius applied to arc corners (similar to border radius).
122
- * Set it to '50%' to get rounded arc.
123
- * @default 0
124
- */
125
- cornerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
126
- /**
127
- * The x coordinate of the arc center.
128
- * Can be a number (in px) or a string with a percentage such as '50%'.
129
- * The '100%' is the width the drawing area.
130
- */
131
- cx: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
132
- /**
133
- * The y coordinate of the arc center.
134
- * Can be a number (in px) or a string with a percentage such as '50%'.
135
- * The '100%' is the height the drawing area.
136
- */
137
- cy: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
138
- desc: PropTypes.string,
139
- /**
140
- * If `true`, the charts will not listen to the mouse move event.
141
- * It might break interactive features, but will improve performance.
142
- * @default false
143
- */
144
- disableAxisListener: PropTypes.bool,
145
- /**
146
- * The end angle (deg).
147
- * @default 360
148
- */
149
- endAngle: PropTypes.number,
150
- /**
151
- * The height of the chart in px. If not defined, it takes the height of the parent element.
152
- * @default undefined
153
- */
154
- height: PropTypes.number,
155
- /**
156
- * The radius between circle center and the begining of the arc.
157
- * Can be a number (in px) or a string with a percentage such as '50%'.
158
- * The '100%' is the maximal radius that fit into the drawing area.
159
- * @default '80%'
160
- */
161
- innerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
162
- /**
163
- * The margin between the SVG and the drawing area.
164
- * It's used for leaving some space for extra information such as the x- and y-axis or legend.
165
- * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
166
- * @default object Depends on the charts type.
167
- */
168
- margin: PropTypes.shape({
169
- bottom: PropTypes.number,
170
- left: PropTypes.number,
171
- right: PropTypes.number,
172
- top: PropTypes.number
173
- }),
174
- /**
175
- * The radius between circle center and the end of the arc.
176
- * Can be a number (in px) or a string with a percentage such as '50%'.
177
- * The '100%' is the maximal radius that fit into the drawing area.
178
- * @default '100%'
179
- */
180
- outerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
181
- /**
182
- * The start angle (deg).
183
- * @default 0
184
- */
185
- startAngle: PropTypes.number,
186
- sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
187
- title: PropTypes.string,
188
- /**
189
- * The value of the gauge.
190
- * Set to `null` to not display a value.
191
- */
192
- value: PropTypes.number,
193
- /**
194
- * The maximal value of the gauge.
195
- * @default 100
196
- */
197
- valueMax: PropTypes.number,
198
- /**
199
- * The minimal value of the gauge.
200
- * @default 0
201
- */
202
- valueMin: PropTypes.number,
203
- viewBox: PropTypes.shape({
204
- height: PropTypes.number,
205
- width: PropTypes.number,
206
- x: PropTypes.number,
207
- y: PropTypes.number
208
- }),
209
- /**
210
- * The width of the chart in px. If not defined, it takes the width of the parent element.
211
- * @default undefined
212
- */
213
- width: PropTypes.number
214
- } : void 0;
215
- export { GaugeContainer };
@@ -1,87 +0,0 @@
1
- // @ignore - do not document.
2
- import * as React from 'react';
3
- import { DrawingContext } from '../context/DrawingProvider';
4
- import { getPercentageValue } from '../internals/utils';
5
- import { getArcRatios, getAvailableRadius } from './utils';
6
- import { jsx as _jsx } from "react/jsx-runtime";
7
- export var GaugeContext = /*#__PURE__*/React.createContext({
8
- value: null,
9
- valueMin: 0,
10
- valueMax: 0,
11
- startAngle: 0,
12
- endAngle: 0,
13
- innerRadius: 0,
14
- outerRadius: 0,
15
- cornerRadius: 0,
16
- cx: 0,
17
- cy: 0,
18
- maxRadius: 0,
19
- valueAngle: null
20
- });
21
- export function GaugeProvider(props) {
22
- var _props$value = props.value,
23
- value = _props$value === void 0 ? null : _props$value,
24
- _props$valueMin = props.valueMin,
25
- valueMin = _props$valueMin === void 0 ? 0 : _props$valueMin,
26
- _props$valueMax = props.valueMax,
27
- valueMax = _props$valueMax === void 0 ? 100 : _props$valueMax,
28
- _props$startAngle = props.startAngle,
29
- startAngle = _props$startAngle === void 0 ? 0 : _props$startAngle,
30
- _props$endAngle = props.endAngle,
31
- endAngle = _props$endAngle === void 0 ? 360 : _props$endAngle,
32
- outerRadiusParam = props.outerRadius,
33
- innerRadiusParam = props.innerRadius,
34
- cornerRadiusParam = props.cornerRadius,
35
- cxParam = props.cx,
36
- cyParam = props.cy,
37
- children = props.children;
38
- var _React$useContext = React.useContext(DrawingContext),
39
- width = _React$useContext.width,
40
- height = _React$useContext.height,
41
- top = _React$useContext.top,
42
- left = _React$useContext.left;
43
- var ratios = getArcRatios(startAngle, endAngle);
44
- var innerCx = cxParam ? getPercentageValue(cxParam, width) : ratios.cx * width;
45
- var innerCy = cyParam ? getPercentageValue(cyParam, height) : ratios.cy * height;
46
- var cx = left + innerCx;
47
- var cy = top + innerCy;
48
- var maxRadius = getAvailableRadius(innerCx, innerCy, width, height, ratios);
49
-
50
- // If the center is not defined, after computation of the available radius, udpate the center to use the remaining space.
51
- if (cxParam === undefined) {
52
- var usedWidth = maxRadius * (ratios.maxX - ratios.minX);
53
- cx = left + (width - usedWidth) / 2 + ratios.cx * usedWidth;
54
- }
55
- if (cyParam === undefined) {
56
- var usedHeight = maxRadius * (ratios.maxY - ratios.minY);
57
- cy = top + (height - usedHeight) / 2 + ratios.cy * usedHeight;
58
- }
59
- var outerRadius = getPercentageValue(outerRadiusParam != null ? outerRadiusParam : maxRadius, maxRadius);
60
- var innerRadius = getPercentageValue(innerRadiusParam != null ? innerRadiusParam : '80%', maxRadius);
61
- var cornerRadius = getPercentageValue(cornerRadiusParam != null ? cornerRadiusParam : 0, outerRadius - innerRadius);
62
- var contextValue = React.useMemo(function () {
63
- var startAngleRad = Math.PI * startAngle / 180;
64
- var endAngleRad = Math.PI * endAngle / 180;
65
- return {
66
- value: value,
67
- valueMin: valueMin,
68
- valueMax: valueMax,
69
- startAngle: startAngleRad,
70
- endAngle: endAngleRad,
71
- outerRadius: outerRadius,
72
- innerRadius: innerRadius,
73
- cornerRadius: cornerRadius,
74
- cx: cx,
75
- cy: cy,
76
- maxRadius: maxRadius,
77
- valueAngle: value === null ? null : startAngleRad + (endAngleRad - startAngleRad) * (value - valueMin) / (valueMax - valueMin)
78
- };
79
- }, [value, valueMin, valueMax, startAngle, endAngle, outerRadius, innerRadius, cornerRadius, cx, cy, maxRadius]);
80
- return /*#__PURE__*/_jsx(GaugeContext.Provider, {
81
- value: contextValue,
82
- children: children
83
- });
84
- }
85
- export function useGaugeState() {
86
- return React.useContext(GaugeContext);
87
- }
@@ -1,37 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
2
- import * as React from 'react';
3
- import { arc as d3Arc } from 'd3-shape';
4
- import { styled } from '@mui/material/styles';
5
- import { useGaugeState } from './GaugeProvider';
6
- import { jsx as _jsx } from "react/jsx-runtime";
7
- var StyledPath = styled('path', {
8
- name: 'MuiGauge',
9
- slot: 'ReferenceArc',
10
- overridesResolver: function overridesResolver(props, styles) {
11
- return styles.referenceArc;
12
- }
13
- })(function (_ref) {
14
- var theme = _ref.theme;
15
- return {
16
- fill: (theme.vars || theme).palette.divider
17
- };
18
- });
19
- export function GaugeReferenceArc(props) {
20
- var _useGaugeState = useGaugeState(),
21
- startAngle = _useGaugeState.startAngle,
22
- endAngle = _useGaugeState.endAngle,
23
- outerRadius = _useGaugeState.outerRadius,
24
- innerRadius = _useGaugeState.innerRadius,
25
- cornerRadius = _useGaugeState.cornerRadius,
26
- cx = _useGaugeState.cx,
27
- cy = _useGaugeState.cy;
28
- return /*#__PURE__*/_jsx(StyledPath, _extends({
29
- transform: "translate(".concat(cx, ", ").concat(cy, ")"),
30
- d: d3Arc().cornerRadius(cornerRadius)({
31
- startAngle: startAngle,
32
- endAngle: endAngle,
33
- innerRadius: innerRadius,
34
- outerRadius: outerRadius
35
- })
36
- }, props));
37
- }
@@ -1,44 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
2
- import * as React from 'react';
3
- import { arc as d3Arc } from 'd3-shape';
4
- import { styled } from '@mui/material/styles';
5
- import { useGaugeState } from './GaugeProvider';
6
- import { jsx as _jsx } from "react/jsx-runtime";
7
- var StyledPath = styled('path', {
8
- name: 'MuiGauge',
9
- slot: 'ReferenceArc',
10
- overridesResolver: function overridesResolver(props, styles) {
11
- return styles.referenceArc;
12
- }
13
- })(function (_ref) {
14
- var theme = _ref.theme;
15
- return {
16
- fill: (theme.vars || theme).palette.primary.main
17
- };
18
- });
19
- export function GaugeValueArc(props) {
20
- var _useGaugeState = useGaugeState(),
21
- value = _useGaugeState.value,
22
- valueMin = _useGaugeState.valueMin,
23
- valueMax = _useGaugeState.valueMax,
24
- startAngle = _useGaugeState.startAngle,
25
- endAngle = _useGaugeState.endAngle,
26
- outerRadius = _useGaugeState.outerRadius,
27
- innerRadius = _useGaugeState.innerRadius,
28
- cornerRadius = _useGaugeState.cornerRadius,
29
- cx = _useGaugeState.cx,
30
- cy = _useGaugeState.cy;
31
- if (value === null) {
32
- return null;
33
- }
34
- var valueAngle = startAngle + (value - valueMin) / (valueMax - valueMin) * (endAngle - startAngle);
35
- return /*#__PURE__*/_jsx(StyledPath, _extends({
36
- transform: "translate(".concat(cx, ", ").concat(cy, ")"),
37
- d: d3Arc().cornerRadius(cornerRadius)({
38
- startAngle: startAngle,
39
- endAngle: valueAngle,
40
- innerRadius: innerRadius,
41
- outerRadius: outerRadius
42
- })
43
- }, props));
44
- }
@@ -1,66 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
2
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
3
- var _excluded = ["text", "className"];
4
- import * as React from 'react';
5
- import PropTypes from 'prop-types';
6
- import { useGaugeState } from './GaugeProvider';
7
- import { ChartsText } from '../ChartsText';
8
- import { jsx as _jsx } from "react/jsx-runtime";
9
- function defaultFormatter(_ref) {
10
- var value = _ref.value;
11
- return value === null ? 'NaN' : value.toLocaleString();
12
- }
13
- function GaugeValueText(props) {
14
- var _props$text = props.text,
15
- text = _props$text === void 0 ? defaultFormatter : _props$text,
16
- className = props.className,
17
- other = _objectWithoutProperties(props, _excluded);
18
- var _useGaugeState = useGaugeState(),
19
- value = _useGaugeState.value,
20
- valueMin = _useGaugeState.valueMin,
21
- valueMax = _useGaugeState.valueMax,
22
- cx = _useGaugeState.cx,
23
- cy = _useGaugeState.cy;
24
- var formattedText = typeof text === 'function' ? text({
25
- value: value,
26
- valueMin: valueMin,
27
- valueMax: valueMax
28
- }) : text;
29
- if (formattedText === null) {
30
- return null;
31
- }
32
- return /*#__PURE__*/_jsx("g", {
33
- className: className,
34
- children: /*#__PURE__*/_jsx(ChartsText, _extends({
35
- x: cx,
36
- y: cy,
37
- text: formattedText,
38
- style: {
39
- textAnchor: 'middle',
40
- dominantBaseline: 'central'
41
- }
42
- }, other))
43
- });
44
- }
45
- process.env.NODE_ENV !== "production" ? GaugeValueText.propTypes = {
46
- // ----------------------------- Warning --------------------------------
47
- // | These PropTypes are generated from the TypeScript type definitions |
48
- // | To update them edit the TypeScript types and run "yarn proptypes" |
49
- // ----------------------------------------------------------------------
50
- /**
51
- * Height of a text line (in `em`).
52
- */
53
- lineHeight: PropTypes.number,
54
- /**
55
- * If `true`, the line width is computed.
56
- * @default false
57
- */
58
- needsComputation: PropTypes.bool,
59
- ownerState: PropTypes.any,
60
- /**
61
- * Style applied to text elements.
62
- */
63
- style: PropTypes.object,
64
- text: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
65
- } : void 0;
66
- export { GaugeValueText };
@@ -1,7 +0,0 @@
1
- import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
2
- import generateUtilityClass from '@mui/utils/generateUtilityClass';
3
- export function getGaugeUtilityClass(slot) {
4
- return generateUtilityClass('MuiGauge', slot);
5
- }
6
- export var gaugeClasses = generateUtilityClasses('MuiGauge', ['root', 'valueArc', 'referenceArc', 'valueText']);
7
- export default gaugeClasses;
@@ -1,7 +0,0 @@
1
- export * from './Gauge';
2
- export * from './GaugeContainer';
3
- export * from './GaugeValueText';
4
- export * from './GaugeValueArc';
5
- export * from './GaugeReferenceArc';
6
- export * from './gaugeClasses';
7
- export { useGaugeState } from './GaugeProvider';