@mui/x-charts-premium 9.0.4 → 9.1.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 (171) hide show
  1. package/BarChartPremium/BarChartPremium.js +2 -1183
  2. package/BarChartPremium/BarChartPremium.mjs +2 -1183
  3. package/BarChartPremium/RangeBar/seriesConfig/seriesProcessor.js +2 -0
  4. package/BarChartPremium/RangeBar/seriesConfig/seriesProcessor.mjs +2 -0
  5. package/CHANGELOG.md +133 -0
  6. package/CandlestickChart/CandlestickChart.d.mts +2 -2
  7. package/CandlestickChart/CandlestickChart.d.ts +2 -2
  8. package/CandlestickChart/CandlestickChart.js +2 -1183
  9. package/CandlestickChart/CandlestickChart.mjs +2 -1183
  10. package/CandlestickChart/CandlestickWebGLProgram.d.mts +6 -11
  11. package/CandlestickChart/CandlestickWebGLProgram.d.ts +6 -11
  12. package/CandlestickChart/CandlestickWebGLProgram.js +136 -121
  13. package/CandlestickChart/CandlestickWebGLProgram.mjs +137 -122
  14. package/CandlestickChart/useCandlestickPlotData.d.mts +2 -2
  15. package/CandlestickChart/useCandlestickPlotData.d.ts +2 -2
  16. package/CandlestickChart/useCandlestickPlotData.js +121 -61
  17. package/CandlestickChart/useCandlestickPlotData.mjs +122 -61
  18. package/ChartsAxisHighlightValue/index.d.mts +1 -0
  19. package/ChartsAxisHighlightValue/index.d.ts +1 -0
  20. package/ChartsAxisHighlightValue/index.js +16 -0
  21. package/ChartsAxisHighlightValue/index.mjs +2 -0
  22. package/ChartsDataProviderPremium/ChartsDataProviderPremium.js +2 -2
  23. package/ChartsDataProviderPremium/ChartsDataProviderPremium.mjs +2 -2
  24. package/ChartsRadialAxisHighlight/index.d.mts +1 -0
  25. package/ChartsRadialAxisHighlight/index.d.ts +1 -0
  26. package/ChartsRadialAxisHighlight/index.js +16 -0
  27. package/ChartsRadialAxisHighlight/index.mjs +2 -0
  28. package/ChartsRadialDataProviderPremium/ChartsRadialDataProviderPremium.js +2 -2
  29. package/ChartsRadialDataProviderPremium/ChartsRadialDataProviderPremium.mjs +2 -2
  30. package/HeatmapPremium/HeatmapPremium.js +2 -155
  31. package/HeatmapPremium/HeatmapPremium.mjs +2 -155
  32. package/HeatmapPremium/webgl/HeatmapWebGLPlot.js +19 -112
  33. package/HeatmapPremium/webgl/HeatmapWebGLPlot.mjs +19 -111
  34. package/HeatmapPremium/webgl/HeatmapWebGLProgram.d.mts +24 -0
  35. package/HeatmapPremium/webgl/HeatmapWebGLProgram.d.ts +24 -0
  36. package/HeatmapPremium/webgl/HeatmapWebGLProgram.js +132 -0
  37. package/HeatmapPremium/webgl/HeatmapWebGLProgram.mjs +125 -0
  38. package/HeatmapPremium/webgl/useHeatmapPlotData.d.mts +3 -3
  39. package/HeatmapPremium/webgl/useHeatmapPlotData.d.ts +3 -3
  40. package/HeatmapPremium/webgl/useHeatmapPlotData.js +78 -26
  41. package/HeatmapPremium/webgl/useHeatmapPlotData.mjs +80 -26
  42. package/LICENSE +3 -1
  43. package/RadialBarChart/RadialBarChart.d.mts +60 -0
  44. package/RadialBarChart/RadialBarChart.d.ts +60 -0
  45. package/RadialBarChart/RadialBarChart.js +298 -0
  46. package/RadialBarChart/RadialBarChart.mjs +292 -0
  47. package/RadialBarChart/RadialBarChart.plugins.d.mts +4 -0
  48. package/RadialBarChart/RadialBarChart.plugins.d.ts +4 -0
  49. package/RadialBarChart/RadialBarChart.plugins.js +9 -0
  50. package/RadialBarChart/RadialBarChart.plugins.mjs +3 -0
  51. package/RadialBarChart/RadialBarElement.d.mts +16 -0
  52. package/RadialBarChart/RadialBarElement.d.ts +16 -0
  53. package/RadialBarChart/RadialBarElement.js +54 -0
  54. package/RadialBarChart/RadialBarElement.mjs +48 -0
  55. package/RadialBarChart/RadialBarPlot.d.mts +21 -0
  56. package/RadialBarChart/RadialBarPlot.d.ts +21 -0
  57. package/RadialBarChart/RadialBarPlot.js +85 -0
  58. package/RadialBarChart/RadialBarPlot.mjs +79 -0
  59. package/RadialBarChart/index.d.mts +3 -0
  60. package/RadialBarChart/index.d.ts +3 -0
  61. package/RadialBarChart/index.js +39 -0
  62. package/RadialBarChart/index.mjs +3 -0
  63. package/RadialBarChart/radialBarClasses.d.mts +15 -0
  64. package/RadialBarChart/radialBarClasses.d.ts +15 -0
  65. package/RadialBarChart/radialBarClasses.js +26 -0
  66. package/RadialBarChart/radialBarClasses.mjs +18 -0
  67. package/RadialBarChart/seriesConfig/seriesProcessor.js +4 -0
  68. package/RadialBarChart/seriesConfig/seriesProcessor.mjs +4 -0
  69. package/RadialBarChart/useRadialBarChartProps.d.mts +28 -0
  70. package/RadialBarChart/useRadialBarChartProps.d.ts +28 -0
  71. package/RadialBarChart/useRadialBarChartProps.js +100 -0
  72. package/RadialBarChart/useRadialBarChartProps.mjs +93 -0
  73. package/RadialBarChart/useRadialBarPlotData.d.mts +23 -0
  74. package/RadialBarChart/useRadialBarPlotData.d.ts +23 -0
  75. package/RadialBarChart/useRadialBarPlotData.js +94 -0
  76. package/RadialBarChart/useRadialBarPlotData.mjs +87 -0
  77. package/RadialLineChart/RadialArea.js +13 -1
  78. package/RadialLineChart/RadialArea.mjs +13 -1
  79. package/RadialLineChart/RadialLine.js +13 -1
  80. package/RadialLineChart/RadialLine.mjs +13 -1
  81. package/RadialLineChart/RadialLineChart.d.mts +11 -3
  82. package/RadialLineChart/RadialLineChart.d.ts +11 -3
  83. package/RadialLineChart/RadialLineChart.js +24 -673
  84. package/RadialLineChart/RadialLineChart.mjs +24 -673
  85. package/RadialLineChart/RadialLineHighlightElement.d.mts +15 -0
  86. package/RadialLineChart/RadialLineHighlightElement.d.ts +15 -0
  87. package/RadialLineChart/RadialLineHighlightElement.js +46 -0
  88. package/RadialLineChart/RadialLineHighlightElement.mjs +39 -0
  89. package/RadialLineChart/RadialLineHighlightPlot.d.mts +23 -0
  90. package/RadialLineChart/RadialLineHighlightPlot.d.ts +23 -0
  91. package/RadialLineChart/RadialLineHighlightPlot.js +92 -0
  92. package/RadialLineChart/RadialLineHighlightPlot.mjs +86 -0
  93. package/RadialLineChart/RadialMarkPlot.js +17 -2
  94. package/RadialLineChart/RadialMarkPlot.mjs +17 -2
  95. package/RadialLineChart/index.d.mts +3 -1
  96. package/RadialLineChart/index.d.ts +3 -1
  97. package/RadialLineChart/index.js +22 -0
  98. package/RadialLineChart/index.mjs +3 -1
  99. package/RadialLineChart/radialLineClasses.d.mts +3 -1
  100. package/RadialLineChart/radialLineClasses.d.ts +3 -1
  101. package/RadialLineChart/radialLineClasses.js +2 -1
  102. package/RadialLineChart/radialLineClasses.mjs +2 -1
  103. package/RadialLineChart/seriesConfig/getItemAtPosition.d.mts +6 -0
  104. package/RadialLineChart/seriesConfig/getItemAtPosition.d.ts +6 -0
  105. package/RadialLineChart/seriesConfig/getItemAtPosition.js +353 -0
  106. package/RadialLineChart/seriesConfig/getItemAtPosition.mjs +348 -0
  107. package/RadialLineChart/seriesConfig/getSeriesWithDefaultValues.js +2 -1
  108. package/RadialLineChart/seriesConfig/getSeriesWithDefaultValues.mjs +2 -1
  109. package/RadialLineChart/seriesConfig/index.js +2 -1
  110. package/RadialLineChart/seriesConfig/index.mjs +2 -1
  111. package/RadialLineChart/seriesConfig/seriesProcessor.js +4 -0
  112. package/RadialLineChart/seriesConfig/seriesProcessor.mjs +4 -0
  113. package/RadialLineChart/useRadialLineChartProps.d.mts +2 -0
  114. package/RadialLineChart/useRadialLineChartProps.d.ts +2 -0
  115. package/RadialLineChart/useRadialLineChartProps.js +16 -8
  116. package/RadialLineChart/useRadialLineChartProps.mjs +16 -8
  117. package/RadialLineChart/useRadialLinePlotData.js +2 -1
  118. package/RadialLineChart/useRadialLinePlotData.mjs +3 -2
  119. package/ScatterChartPremium/ScatterChartPremium.d.mts +25 -0
  120. package/ScatterChartPremium/ScatterChartPremium.d.ts +25 -0
  121. package/ScatterChartPremium/ScatterChartPremium.js +507 -0
  122. package/ScatterChartPremium/ScatterChartPremium.mjs +501 -0
  123. package/ScatterChartPremium/ScatterChartPremium.plugins.d.mts +3 -0
  124. package/ScatterChartPremium/ScatterChartPremium.plugins.d.ts +3 -0
  125. package/ScatterChartPremium/ScatterChartPremium.plugins.js +8 -0
  126. package/ScatterChartPremium/ScatterChartPremium.plugins.mjs +2 -0
  127. package/ScatterChartPremium/ScatterPlotPremium.d.mts +14 -0
  128. package/ScatterChartPremium/ScatterPlotPremium.d.ts +14 -0
  129. package/ScatterChartPremium/ScatterPlotPremium.js +28 -0
  130. package/ScatterChartPremium/ScatterPlotPremium.mjs +21 -0
  131. package/ScatterChartPremium/index.d.mts +3 -0
  132. package/ScatterChartPremium/index.d.ts +3 -0
  133. package/ScatterChartPremium/index.js +26 -0
  134. package/ScatterChartPremium/index.mjs +3 -0
  135. package/ScatterChartPremium/webgl/ScatterWebGLPlot.d.mts +4 -0
  136. package/ScatterChartPremium/webgl/ScatterWebGLPlot.d.ts +4 -0
  137. package/ScatterChartPremium/webgl/ScatterWebGLPlot.js +70 -0
  138. package/ScatterChartPremium/webgl/ScatterWebGLPlot.mjs +65 -0
  139. package/ScatterChartPremium/webgl/ScatterWebGLProgram.d.mts +18 -0
  140. package/ScatterChartPremium/webgl/ScatterWebGLProgram.d.ts +18 -0
  141. package/ScatterChartPremium/webgl/ScatterWebGLProgram.js +129 -0
  142. package/ScatterChartPremium/webgl/ScatterWebGLProgram.mjs +122 -0
  143. package/ScatterChartPremium/webgl/shaders.d.mts +2 -0
  144. package/ScatterChartPremium/webgl/shaders.d.ts +2 -0
  145. package/ScatterChartPremium/webgl/shaders.js +57 -0
  146. package/ScatterChartPremium/webgl/shaders.mjs +51 -0
  147. package/ScatterChartPremium/webgl/useScatterWebGLPlotData.d.mts +7 -0
  148. package/ScatterChartPremium/webgl/useScatterWebGLPlotData.d.ts +7 -0
  149. package/ScatterChartPremium/webgl/useScatterWebGLPlotData.js +140 -0
  150. package/ScatterChartPremium/webgl/useScatterWebGLPlotData.mjs +134 -0
  151. package/index.d.mts +3 -1
  152. package/index.d.ts +3 -1
  153. package/index.js +25 -1
  154. package/index.mjs +4 -2
  155. package/internals/index.d.mts +1 -0
  156. package/internals/index.d.ts +1 -0
  157. package/internals/index.js +13 -0
  158. package/internals/index.mjs +1 -0
  159. package/models/seriesType/radialLine.d.mts +7 -1
  160. package/models/seriesType/radialLine.d.ts +7 -1
  161. package/package.json +184 -114
  162. package/plugins/selectors/useChartCandlestickPosition.selectors.d.mts +1 -1
  163. package/plugins/selectors/useChartCandlestickPosition.selectors.d.ts +1 -1
  164. package/utils/webgl/parseColor.d.mts +2 -1
  165. package/utils/webgl/parseColor.d.ts +2 -1
  166. package/utils/webgl/parseColor.js +8 -7
  167. package/utils/webgl/parseColor.mjs +8 -7
  168. package/utils/webgl/utils.d.mts +13 -0
  169. package/utils/webgl/utils.d.ts +13 -0
  170. package/utils/webgl/utils.js +29 -0
  171. package/utils/webgl/utils.mjs +27 -0
@@ -0,0 +1,15 @@
1
+ import * as React from 'react';
2
+ import { type SeriesId } from '@mui/x-charts/models';
3
+ interface RadialLineHighlightElementCommonProps {
4
+ seriesId: SeriesId;
5
+ color: string;
6
+ x: number;
7
+ y: number;
8
+ }
9
+ export type RadialLineHighlightElementProps = (RadialLineHighlightElementCommonProps & {
10
+ shape: 'circle';
11
+ } & Omit<React.SVGProps<SVGCircleElement>, 'ref'>) | (RadialLineHighlightElementCommonProps & {
12
+ shape: 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
13
+ } & Omit<React.SVGProps<SVGPathElement>, 'ref'>);
14
+ declare function RadialLineHighlightElement(props: RadialLineHighlightElementProps): import("react/jsx-runtime").JSX.Element;
15
+ export { RadialLineHighlightElement };
@@ -0,0 +1,15 @@
1
+ import * as React from 'react';
2
+ import { type SeriesId } from '@mui/x-charts/models';
3
+ interface RadialLineHighlightElementCommonProps {
4
+ seriesId: SeriesId;
5
+ color: string;
6
+ x: number;
7
+ y: number;
8
+ }
9
+ export type RadialLineHighlightElementProps = (RadialLineHighlightElementCommonProps & {
10
+ shape: 'circle';
11
+ } & Omit<React.SVGProps<SVGCircleElement>, 'ref'>) | (RadialLineHighlightElementCommonProps & {
12
+ shape: 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
13
+ } & Omit<React.SVGProps<SVGPathElement>, 'ref'>);
14
+ declare function RadialLineHighlightElement(props: RadialLineHighlightElementProps): import("react/jsx-runtime").JSX.Element;
15
+ export { RadialLineHighlightElement };
@@ -0,0 +1,46 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.RadialLineHighlightElement = RadialLineHighlightElement;
9
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
+ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
11
+ var React = _interopRequireWildcard(require("react"));
12
+ var _reactMajor = _interopRequireDefault(require("@mui/x-internals/reactMajor"));
13
+ var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
14
+ var _internals = require("@mui/x-charts/internals");
15
+ var _radialLineClasses = require("./radialLineClasses");
16
+ var _jsxRuntime = require("react/jsx-runtime");
17
+ const _excluded = ["x", "y", "seriesId", "color", "shape"];
18
+ function RadialLineHighlightElement(props) {
19
+ const {
20
+ x,
21
+ y,
22
+ color,
23
+ shape
24
+ } = props,
25
+ other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
26
+ const classes = (0, _radialLineClasses.useUtilityClasses)();
27
+ const Element = shape === 'circle' ? 'circle' : 'path';
28
+ const additionalProps = shape === 'circle' ? {
29
+ cx: 0,
30
+ cy: 0,
31
+ r: other.r === undefined ? 5 : other.r
32
+ } : {
33
+ d: (0, _d3Shape.symbol)(_d3Shape.symbolsFill[(0, _internals.getSymbol)(shape)])()
34
+ };
35
+ const transformOrigin = _reactMajor.default > 18 ? {
36
+ transformOrigin: `${x} ${y}`
37
+ } : {
38
+ 'transform-origin': `${x} ${y}`
39
+ };
40
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({
41
+ pointerEvents: "none",
42
+ className: classes.highlight,
43
+ transform: `translate(${x} ${y})`,
44
+ fill: color
45
+ }, transformOrigin, additionalProps, other));
46
+ }
@@ -0,0 +1,39 @@
1
+ import _extends from "@babel/runtime/helpers/esm/extends";
2
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
+ const _excluded = ["x", "y", "seriesId", "color", "shape"];
4
+ import * as React from 'react';
5
+ import reactMajor from '@mui/x-internals/reactMajor';
6
+ import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from '@mui/x-charts-vendor/d3-shape';
7
+ import { getSymbol } from '@mui/x-charts/internals';
8
+ import { useUtilityClasses } from "./radialLineClasses.mjs";
9
+ import { jsx as _jsx } from "react/jsx-runtime";
10
+ function RadialLineHighlightElement(props) {
11
+ const {
12
+ x,
13
+ y,
14
+ color,
15
+ shape
16
+ } = props,
17
+ other = _objectWithoutPropertiesLoose(props, _excluded);
18
+ const classes = useUtilityClasses();
19
+ const Element = shape === 'circle' ? 'circle' : 'path';
20
+ const additionalProps = shape === 'circle' ? {
21
+ cx: 0,
22
+ cy: 0,
23
+ r: other.r === undefined ? 5 : other.r
24
+ } : {
25
+ d: d3Symbol(d3SymbolsFill[getSymbol(shape)])()
26
+ };
27
+ const transformOrigin = reactMajor > 18 ? {
28
+ transformOrigin: `${x} ${y}`
29
+ } : {
30
+ 'transform-origin': `${x} ${y}`
31
+ };
32
+ return /*#__PURE__*/_jsx(Element, _extends({
33
+ pointerEvents: "none",
34
+ className: classes.highlight,
35
+ transform: `translate(${x} ${y})`,
36
+ fill: color
37
+ }, transformOrigin, additionalProps, other));
38
+ }
39
+ export { RadialLineHighlightElement };
@@ -0,0 +1,23 @@
1
+ import * as React from 'react';
2
+ import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
3
+ import { type RadialLineHighlightElementProps } from "./RadialLineHighlightElement.mjs";
4
+ export interface RadialLineHighlightPlotSlots {
5
+ radialLineHighlight?: React.JSXElementConstructor<RadialLineHighlightElementProps>;
6
+ }
7
+ export interface RadialLineHighlightPlotSlotProps {
8
+ radialLineHighlight?: SlotComponentPropsFromProps<RadialLineHighlightElementProps, {}, {}>;
9
+ }
10
+ export interface RadialLineHighlightPlotProps extends React.SVGAttributes<SVGGElement> {
11
+ /**
12
+ * Overridable component slots.
13
+ * @default {}
14
+ */
15
+ slots?: RadialLineHighlightPlotSlots;
16
+ /**
17
+ * The props used for each component slot.
18
+ * @default {}
19
+ */
20
+ slotProps?: RadialLineHighlightPlotSlotProps;
21
+ }
22
+ declare function RadialLineHighlightPlot(props: RadialLineHighlightPlotProps): import("react/jsx-runtime").JSX.Element | null;
23
+ export { RadialLineHighlightPlot };
@@ -0,0 +1,23 @@
1
+ import * as React from 'react';
2
+ import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
3
+ import { type RadialLineHighlightElementProps } from "./RadialLineHighlightElement.js";
4
+ export interface RadialLineHighlightPlotSlots {
5
+ radialLineHighlight?: React.JSXElementConstructor<RadialLineHighlightElementProps>;
6
+ }
7
+ export interface RadialLineHighlightPlotSlotProps {
8
+ radialLineHighlight?: SlotComponentPropsFromProps<RadialLineHighlightElementProps, {}, {}>;
9
+ }
10
+ export interface RadialLineHighlightPlotProps extends React.SVGAttributes<SVGGElement> {
11
+ /**
12
+ * Overridable component slots.
13
+ * @default {}
14
+ */
15
+ slots?: RadialLineHighlightPlotSlots;
16
+ /**
17
+ * The props used for each component slot.
18
+ * @default {}
19
+ */
20
+ slotProps?: RadialLineHighlightPlotSlotProps;
21
+ }
22
+ declare function RadialLineHighlightPlot(props: RadialLineHighlightPlotProps): import("react/jsx-runtime").JSX.Element | null;
23
+ export { RadialLineHighlightPlot };
@@ -0,0 +1,92 @@
1
+ "use strict";
2
+ 'use client';
3
+
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
5
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
6
+ Object.defineProperty(exports, "__esModule", {
7
+ value: true
8
+ });
9
+ exports.RadialLineHighlightPlot = RadialLineHighlightPlot;
10
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
+ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
12
+ var React = _interopRequireWildcard(require("react"));
13
+ var _internals = require("@mui/x-charts/internals");
14
+ var _hooks = require("@mui/x-charts/hooks");
15
+ var _useRadialLineSeries = require("../hooks/useRadialLineSeries");
16
+ var _RadialLineHighlightElement = require("./RadialLineHighlightElement");
17
+ var _getColor = _interopRequireDefault(require("./seriesConfig/getColor"));
18
+ var _jsxRuntime = require("react/jsx-runtime");
19
+ const _excluded = ["slots", "slotProps"];
20
+ function RadialLineHighlightPlot(props) {
21
+ const {
22
+ slots,
23
+ slotProps
24
+ } = props,
25
+ other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
26
+ const seriesData = (0, _useRadialLineSeries.useRadialLineSeriesContext)();
27
+ const {
28
+ radiusAxis,
29
+ radiusAxisIds
30
+ } = (0, _hooks.useRadiusAxes)();
31
+ const {
32
+ rotationAxis,
33
+ rotationAxisIds
34
+ } = (0, _hooks.useRotationAxes)();
35
+ const {
36
+ instance,
37
+ store
38
+ } = (0, _internals.useChartsContext)();
39
+ const highlightedIndex = store.use(_internals.selectorChartsInteractionRotationAxisIndex);
40
+ if (highlightedIndex === null || highlightedIndex === -1) {
41
+ return null;
42
+ }
43
+ if (seriesData === undefined) {
44
+ return null;
45
+ }
46
+ const {
47
+ series,
48
+ stackingGroups
49
+ } = seriesData;
50
+ const defaultRotationAxisId = rotationAxisIds[0];
51
+ const defaultRadiusAxisId = radiusAxisIds[0];
52
+ const Element = slots?.radialLineHighlight ?? _RadialLineHighlightElement.RadialLineHighlightElement;
53
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
54
+ children: stackingGroups.flatMap(({
55
+ ids: groupIds
56
+ }) => groupIds.flatMap(seriesId => {
57
+ const {
58
+ rotationAxisId = defaultRotationAxisId,
59
+ radiusAxisId = defaultRadiusAxisId,
60
+ stackedData,
61
+ data,
62
+ disableHighlight,
63
+ shape = 'circle',
64
+ hidden
65
+ } = series[seriesId];
66
+ if (hidden || disableHighlight || data[highlightedIndex] == null) {
67
+ return null;
68
+ }
69
+ const radiusScale = radiusAxis[radiusAxisId].scale;
70
+ const rotationPosition = (0, _hooks.getValueToPositionMapper)(rotationAxis[rotationAxisId].scale);
71
+ const rotationData = rotationAxis[rotationAxisId].data;
72
+ if (rotationData === undefined) {
73
+ return null;
74
+ }
75
+ const value = stackedData[highlightedIndex]?.[1] ?? data[highlightedIndex];
76
+ const radius = radiusScale(value);
77
+ const angle = rotationPosition(rotationData[highlightedIndex]);
78
+ const [x, y] = instance.polar2svg(radius, angle);
79
+ if (!instance.isPointInside(x, y)) {
80
+ return null;
81
+ }
82
+ const colorGetter = (0, _getColor.default)(series[seriesId], rotationAxis[rotationAxisId], radiusAxis[radiusAxisId]);
83
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({
84
+ seriesId: seriesId,
85
+ color: colorGetter(highlightedIndex),
86
+ x: x,
87
+ y: y,
88
+ shape: shape
89
+ }, slotProps?.radialLineHighlight), `${seriesId}`);
90
+ }))
91
+ }));
92
+ }
@@ -0,0 +1,86 @@
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 = ["slots", "slotProps"];
6
+ import * as React from 'react';
7
+ import { selectorChartsInteractionRotationAxisIndex, useChartsContext } from '@mui/x-charts/internals';
8
+ import { getValueToPositionMapper, useRadiusAxes, useRotationAxes } from '@mui/x-charts/hooks';
9
+ import { useRadialLineSeriesContext } from "../hooks/useRadialLineSeries.mjs";
10
+ import { RadialLineHighlightElement } from "./RadialLineHighlightElement.mjs";
11
+ import getColor from "./seriesConfig/getColor.mjs";
12
+ import { jsx as _jsx } from "react/jsx-runtime";
13
+ function RadialLineHighlightPlot(props) {
14
+ const {
15
+ slots,
16
+ slotProps
17
+ } = props,
18
+ other = _objectWithoutPropertiesLoose(props, _excluded);
19
+ const seriesData = useRadialLineSeriesContext();
20
+ const {
21
+ radiusAxis,
22
+ radiusAxisIds
23
+ } = useRadiusAxes();
24
+ const {
25
+ rotationAxis,
26
+ rotationAxisIds
27
+ } = useRotationAxes();
28
+ const {
29
+ instance,
30
+ store
31
+ } = useChartsContext();
32
+ const highlightedIndex = store.use(selectorChartsInteractionRotationAxisIndex);
33
+ if (highlightedIndex === null || highlightedIndex === -1) {
34
+ return null;
35
+ }
36
+ if (seriesData === undefined) {
37
+ return null;
38
+ }
39
+ const {
40
+ series,
41
+ stackingGroups
42
+ } = seriesData;
43
+ const defaultRotationAxisId = rotationAxisIds[0];
44
+ const defaultRadiusAxisId = radiusAxisIds[0];
45
+ const Element = slots?.radialLineHighlight ?? RadialLineHighlightElement;
46
+ return /*#__PURE__*/_jsx("g", _extends({}, other, {
47
+ children: stackingGroups.flatMap(({
48
+ ids: groupIds
49
+ }) => groupIds.flatMap(seriesId => {
50
+ const {
51
+ rotationAxisId = defaultRotationAxisId,
52
+ radiusAxisId = defaultRadiusAxisId,
53
+ stackedData,
54
+ data,
55
+ disableHighlight,
56
+ shape = 'circle',
57
+ hidden
58
+ } = series[seriesId];
59
+ if (hidden || disableHighlight || data[highlightedIndex] == null) {
60
+ return null;
61
+ }
62
+ const radiusScale = radiusAxis[radiusAxisId].scale;
63
+ const rotationPosition = getValueToPositionMapper(rotationAxis[rotationAxisId].scale);
64
+ const rotationData = rotationAxis[rotationAxisId].data;
65
+ if (rotationData === undefined) {
66
+ return null;
67
+ }
68
+ const value = stackedData[highlightedIndex]?.[1] ?? data[highlightedIndex];
69
+ const radius = radiusScale(value);
70
+ const angle = rotationPosition(rotationData[highlightedIndex]);
71
+ const [x, y] = instance.polar2svg(radius, angle);
72
+ if (!instance.isPointInside(x, y)) {
73
+ return null;
74
+ }
75
+ const colorGetter = getColor(series[seriesId], rotationAxis[rotationAxisId], radiusAxis[radiusAxisId]);
76
+ return /*#__PURE__*/_jsx(Element, _extends({
77
+ seriesId: seriesId,
78
+ color: colorGetter(highlightedIndex),
79
+ x: x,
80
+ y: y,
81
+ shape: shape
82
+ }, slotProps?.radialLineHighlight), `${seriesId}`);
83
+ }))
84
+ }));
85
+ }
86
+ export { RadialLineHighlightPlot };
@@ -9,6 +9,7 @@ var _styles = require("@mui/material/styles");
9
9
  var _internals = require("@mui/x-charts/internals");
10
10
  var _useRadialLinePlotData = require("./useRadialLinePlotData");
11
11
  var _radialLineClasses = require("./radialLineClasses");
12
+ var _hooks = require("../hooks");
12
13
  var _jsxRuntime = require("react/jsx-runtime");
13
14
  const RadialMarkPlotRoot = (0, _styles.styled)('g', {
14
15
  name: 'MuiRadialMarkPlot',
@@ -19,6 +20,7 @@ function RadialMarkPlot(props) {
19
20
  classes: inClasses
20
21
  } = props;
21
22
  const completedData = (0, _useRadialLinePlotData.useRadialLinePlotData)();
23
+ const getHighlightState = (0, _hooks.useItemHighlightStateGetter)();
22
24
  const classes = (0, _radialLineClasses.useUtilityClasses)({
23
25
  classes: inClasses
24
26
  });
@@ -36,6 +38,13 @@ function RadialMarkPlot(props) {
36
38
  return null;
37
39
  }
38
40
  const path = shape === 'circle' ? null : (0, _d3Shape.symbol)(_d3Shape.symbolsFill[(0, _internals.getSymbol)(shape)])();
41
+ const highlightState = getHighlightState({
42
+ type: 'radialLine',
43
+ seriesId
44
+ });
45
+ const isHighlighted = highlightState === 'highlighted';
46
+ const isFaded = highlightState === 'faded';
47
+ const fadedOpacity = isFaded ? 0.3 : 1;
39
48
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
40
49
  "data-series": seriesId,
41
50
  children: points.map(({
@@ -47,13 +56,19 @@ function RadialMarkPlot(props) {
47
56
  cy: y,
48
57
  r: 4,
49
58
  fill: color,
50
- opacity: hidden ? 0 : 1,
59
+ "data-highlighted": isHighlighted || undefined,
60
+ "data-faded": isFaded || undefined,
61
+ filter: isHighlighted ? 'brightness(120%)' : undefined,
62
+ opacity: hidden ? 0 : fadedOpacity,
51
63
  className: classes.mark
52
64
  }, dataIndex) : /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
53
65
  d: path,
54
66
  transform: `translate(${x}, ${y})`,
55
67
  fill: color,
56
- opacity: hidden ? 0 : 1,
68
+ "data-highlighted": isHighlighted || undefined,
69
+ "data-faded": isFaded || undefined,
70
+ filter: isHighlighted ? 'brightness(120%)' : undefined,
71
+ opacity: hidden ? 0 : fadedOpacity,
57
72
  className: classes.mark
58
73
  }, dataIndex))
59
74
  }, seriesId);
@@ -3,6 +3,7 @@ import { styled } from '@mui/material/styles';
3
3
  import { getSymbol } from '@mui/x-charts/internals';
4
4
  import { useRadialLinePlotData } from "./useRadialLinePlotData.mjs";
5
5
  import { useUtilityClasses } from "./radialLineClasses.mjs";
6
+ import { useItemHighlightStateGetter } from "../hooks/index.mjs";
6
7
  import { jsx as _jsx } from "react/jsx-runtime";
7
8
  const RadialMarkPlotRoot = styled('g', {
8
9
  name: 'MuiRadialMarkPlot',
@@ -13,6 +14,7 @@ export function RadialMarkPlot(props) {
13
14
  classes: inClasses
14
15
  } = props;
15
16
  const completedData = useRadialLinePlotData();
17
+ const getHighlightState = useItemHighlightStateGetter();
16
18
  const classes = useUtilityClasses({
17
19
  classes: inClasses
18
20
  });
@@ -30,6 +32,13 @@ export function RadialMarkPlot(props) {
30
32
  return null;
31
33
  }
32
34
  const path = shape === 'circle' ? null : d3Symbol(d3SymbolsFill[getSymbol(shape)])();
35
+ const highlightState = getHighlightState({
36
+ type: 'radialLine',
37
+ seriesId
38
+ });
39
+ const isHighlighted = highlightState === 'highlighted';
40
+ const isFaded = highlightState === 'faded';
41
+ const fadedOpacity = isFaded ? 0.3 : 1;
33
42
  return /*#__PURE__*/_jsx("g", {
34
43
  "data-series": seriesId,
35
44
  children: points.map(({
@@ -41,13 +50,19 @@ export function RadialMarkPlot(props) {
41
50
  cy: y,
42
51
  r: 4,
43
52
  fill: color,
44
- opacity: hidden ? 0 : 1,
53
+ "data-highlighted": isHighlighted || undefined,
54
+ "data-faded": isFaded || undefined,
55
+ filter: isHighlighted ? 'brightness(120%)' : undefined,
56
+ opacity: hidden ? 0 : fadedOpacity,
45
57
  className: classes.mark
46
58
  }, dataIndex) : /*#__PURE__*/_jsx("path", {
47
59
  d: path,
48
60
  transform: `translate(${x}, ${y})`,
49
61
  fill: color,
50
- opacity: hidden ? 0 : 1,
62
+ "data-highlighted": isHighlighted || undefined,
63
+ "data-faded": isFaded || undefined,
64
+ filter: isHighlighted ? 'brightness(120%)' : undefined,
65
+ opacity: hidden ? 0 : fadedOpacity,
51
66
  className: classes.mark
52
67
  }, dataIndex))
53
68
  }, seriesId);
@@ -1,4 +1,6 @@
1
1
  export * from "./RadialLineChart.mjs";
2
2
  export * from "./RadialAreaPlot.mjs";
3
3
  export * from "./RadialLinePlot.mjs";
4
- export * from "./RadialMarkPlot.mjs";
4
+ export * from "./RadialMarkPlot.mjs";
5
+ export * from "./RadialLineHighlightElement.mjs";
6
+ export * from "./RadialLineHighlightPlot.mjs";
@@ -1,4 +1,6 @@
1
1
  export * from "./RadialLineChart.js";
2
2
  export * from "./RadialAreaPlot.js";
3
3
  export * from "./RadialLinePlot.js";
4
- export * from "./RadialMarkPlot.js";
4
+ export * from "./RadialMarkPlot.js";
5
+ export * from "./RadialLineHighlightElement.js";
6
+ export * from "./RadialLineHighlightPlot.js";
@@ -46,4 +46,26 @@ Object.keys(_RadialMarkPlot).forEach(function (key) {
46
46
  return _RadialMarkPlot[key];
47
47
  }
48
48
  });
49
+ });
50
+ var _RadialLineHighlightElement = require("./RadialLineHighlightElement");
51
+ Object.keys(_RadialLineHighlightElement).forEach(function (key) {
52
+ if (key === "default" || key === "__esModule") return;
53
+ if (key in exports && exports[key] === _RadialLineHighlightElement[key]) return;
54
+ Object.defineProperty(exports, key, {
55
+ enumerable: true,
56
+ get: function () {
57
+ return _RadialLineHighlightElement[key];
58
+ }
59
+ });
60
+ });
61
+ var _RadialLineHighlightPlot = require("./RadialLineHighlightPlot");
62
+ Object.keys(_RadialLineHighlightPlot).forEach(function (key) {
63
+ if (key === "default" || key === "__esModule") return;
64
+ if (key in exports && exports[key] === _RadialLineHighlightPlot[key]) return;
65
+ Object.defineProperty(exports, key, {
66
+ enumerable: true,
67
+ get: function () {
68
+ return _RadialLineHighlightPlot[key];
69
+ }
70
+ });
49
71
  });
@@ -1,4 +1,6 @@
1
1
  export * from "./RadialLineChart.mjs";
2
2
  export * from "./RadialAreaPlot.mjs";
3
3
  export * from "./RadialLinePlot.mjs";
4
- export * from "./RadialMarkPlot.mjs";
4
+ export * from "./RadialMarkPlot.mjs";
5
+ export * from "./RadialLineHighlightElement.mjs";
6
+ export * from "./RadialLineHighlightPlot.mjs";
@@ -5,6 +5,8 @@ export interface RadialLineClasses {
5
5
  line: string;
6
6
  /** Styles applied to the mark element. */
7
7
  mark: string;
8
+ /** Styles applied to the highlight element. */
9
+ highlight: string;
8
10
  /** Styles applied to the AreaPlot root element. */
9
11
  areaPlot: string;
10
12
  /** Styles applied to the LinePlot root element. */
@@ -22,4 +24,4 @@ export declare const radialLineClasses: RadialLineClasses;
22
24
  export interface UseUtilityClassesOptions {
23
25
  classes?: Partial<RadialLineClasses>;
24
26
  }
25
- export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"line" | "area" | "mark" | "areaPlot" | "linePlot" | "markPlot", string>;
27
+ export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"line" | "area" | "mark" | "highlight" | "areaPlot" | "linePlot" | "markPlot", string>;
@@ -5,6 +5,8 @@ export interface RadialLineClasses {
5
5
  line: string;
6
6
  /** Styles applied to the mark element. */
7
7
  mark: string;
8
+ /** Styles applied to the highlight element. */
9
+ highlight: string;
8
10
  /** Styles applied to the AreaPlot root element. */
9
11
  areaPlot: string;
10
12
  /** Styles applied to the LinePlot root element. */
@@ -22,4 +24,4 @@ export declare const radialLineClasses: RadialLineClasses;
22
24
  export interface UseUtilityClassesOptions {
23
25
  classes?: Partial<RadialLineClasses>;
24
26
  }
25
- export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"line" | "area" | "mark" | "areaPlot" | "linePlot" | "markPlot", string>;
27
+ export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"line" | "area" | "mark" | "highlight" | "areaPlot" | "linePlot" | "markPlot", string>;
@@ -12,7 +12,7 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
12
12
  function getLineUtilityClass(slot) {
13
13
  return (0, _generateUtilityClass.default)('MuiRadialLineChart', slot);
14
14
  }
15
- const radialLineClasses = exports.radialLineClasses = (0, _generateUtilityClasses.default)('MuiRadialLineChart', ['area', 'line', 'mark', 'areaPlot', 'linePlot', 'markPlot']);
15
+ const radialLineClasses = exports.radialLineClasses = (0, _generateUtilityClasses.default)('MuiRadialLineChart', ['area', 'line', 'mark', 'highlight', 'areaPlot', 'linePlot', 'markPlot']);
16
16
  const useUtilityClasses = options => {
17
17
  const {
18
18
  classes
@@ -21,6 +21,7 @@ const useUtilityClasses = options => {
21
21
  area: ['area'],
22
22
  line: ['line'],
23
23
  mark: ['mark'],
24
+ highlight: ['highlight'],
24
25
  areaPlot: ['areaPlot'],
25
26
  linePlot: ['linePlot'],
26
27
  markPlot: ['markPlot']
@@ -4,7 +4,7 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
4
4
  export function getLineUtilityClass(slot) {
5
5
  return generateUtilityClass('MuiRadialLineChart', slot);
6
6
  }
7
- export const radialLineClasses = generateUtilityClasses('MuiRadialLineChart', ['area', 'line', 'mark', 'areaPlot', 'linePlot', 'markPlot']);
7
+ export const radialLineClasses = generateUtilityClasses('MuiRadialLineChart', ['area', 'line', 'mark', 'highlight', 'areaPlot', 'linePlot', 'markPlot']);
8
8
  export const useUtilityClasses = options => {
9
9
  const {
10
10
  classes
@@ -13,6 +13,7 @@ export const useUtilityClasses = options => {
13
13
  area: ['area'],
14
14
  line: ['line'],
15
15
  mark: ['mark'],
16
+ highlight: ['highlight'],
16
17
  areaPlot: ['areaPlot'],
17
18
  linePlot: ['linePlot'],
18
19
  markPlot: ['markPlot']
@@ -0,0 +1,6 @@
1
+ import { type ChartState, type UseChartPolarAxisSignature } from '@mui/x-charts/internals';
2
+ import type { SeriesItemIdentifierWithType } from '@mui/x-charts/models';
3
+ export default function getItemAtPosition(state: ChartState<[UseChartPolarAxisSignature]>, point: {
4
+ x: number;
5
+ y: number;
6
+ }): SeriesItemIdentifierWithType<'radialLine'> | undefined;
@@ -0,0 +1,6 @@
1
+ import { type ChartState, type UseChartPolarAxisSignature } from '@mui/x-charts/internals';
2
+ import type { SeriesItemIdentifierWithType } from '@mui/x-charts/models';
3
+ export default function getItemAtPosition(state: ChartState<[UseChartPolarAxisSignature]>, point: {
4
+ x: number;
5
+ y: number;
6
+ }): SeriesItemIdentifierWithType<'radialLine'> | undefined;