@mui/x-charts 8.4.0 → 8.5.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 (148) hide show
  1. package/BarChart/BarChart.d.ts +9 -2
  2. package/BarChart/BarChart.js +8 -1
  3. package/BarChart/useBarChartProps.js +1 -1
  4. package/CHANGELOG.md +103 -0
  5. package/ChartContainer/ChartContainer.d.ts +21 -2
  6. package/ChartContainer/ChartContainer.js +16 -0
  7. package/ChartContainer/useChartContainerProps.js +7 -3
  8. package/ChartDataProvider/ChartDataProvider.d.ts +11 -1
  9. package/ChartDataProvider/ChartDataProvider.js +19 -2
  10. package/ChartDataProvider/useChartDataProviderProps.d.ts +2 -0
  11. package/ChartDataProvider/useChartDataProviderProps.js +7 -3
  12. package/LineChart/LineChart.d.ts +9 -2
  13. package/LineChart/LineChart.js +8 -1
  14. package/LineChart/useLineChartProps.js +1 -1
  15. package/PieChart/PieChart.d.ts +10 -3
  16. package/PieChart/PieChart.js +11 -3
  17. package/RadarChart/RadarChart.d.ts +21 -3
  18. package/RadarChart/RadarChart.js +17 -2
  19. package/RadarChart/RadarChart.plugins.d.ts +5 -0
  20. package/RadarChart/RadarChart.plugins.js +10 -0
  21. package/RadarChart/RadarDataProvider/RadarDataProvider.d.ts +6 -11
  22. package/RadarChart/RadarDataProvider/RadarDataProvider.js +6 -116
  23. package/RadarChart/index.d.ts +2 -0
  24. package/RadarChart/index.js +15 -1
  25. package/RadarChart/useRadarChartProps.d.ts +2 -1
  26. package/RadarChart/useRadarChartProps.js +3 -1
  27. package/ScatterChart/ScatterChart.d.ts +9 -2
  28. package/ScatterChart/ScatterChart.js +8 -1
  29. package/ScatterChart/useScatterChartProps.js +4 -2
  30. package/SparkLineChart/SparkLineChart.d.ts +1 -1
  31. package/Toolbar/Toolbar.d.ts +9 -3
  32. package/Toolbar/Toolbar.js +23 -7
  33. package/Toolbar/Toolbar.types.d.ts +15 -0
  34. package/Toolbar/Toolbar.types.js +5 -0
  35. package/Toolbar/ToolbarButton.d.ts +8 -2
  36. package/Toolbar/ToolbarButton.js +24 -6
  37. package/Toolbar/chartToolbarClasses.d.ts +6 -0
  38. package/Toolbar/chartToolbarClasses.js +9 -0
  39. package/Toolbar/index.d.ts +3 -1
  40. package/Toolbar/index.js +22 -0
  41. package/Toolbar/internals/ChartsToolbar.d.ts +6 -0
  42. package/Toolbar/internals/ChartsToolbar.js +14 -0
  43. package/context/ChartsSlotsContext.d.ts +20 -0
  44. package/context/ChartsSlotsContext.js +44 -0
  45. package/context/index.d.ts +2 -1
  46. package/context/index.js +11 -0
  47. package/context/useChartApiContext.d.ts +10 -0
  48. package/context/useChartApiContext.js +27 -0
  49. package/esm/BarChart/BarChart.d.ts +9 -2
  50. package/esm/BarChart/BarChart.js +8 -1
  51. package/esm/BarChart/useBarChartProps.js +1 -1
  52. package/esm/ChartContainer/ChartContainer.d.ts +21 -2
  53. package/esm/ChartContainer/ChartContainer.js +16 -0
  54. package/esm/ChartContainer/useChartContainerProps.js +7 -3
  55. package/esm/ChartDataProvider/ChartDataProvider.d.ts +11 -1
  56. package/esm/ChartDataProvider/ChartDataProvider.js +19 -2
  57. package/esm/ChartDataProvider/useChartDataProviderProps.d.ts +2 -0
  58. package/esm/ChartDataProvider/useChartDataProviderProps.js +7 -3
  59. package/esm/LineChart/LineChart.d.ts +9 -2
  60. package/esm/LineChart/LineChart.js +8 -1
  61. package/esm/LineChart/useLineChartProps.js +1 -1
  62. package/esm/PieChart/PieChart.d.ts +10 -3
  63. package/esm/PieChart/PieChart.js +11 -3
  64. package/esm/RadarChart/RadarChart.d.ts +21 -3
  65. package/esm/RadarChart/RadarChart.js +17 -2
  66. package/esm/RadarChart/RadarChart.plugins.d.ts +5 -0
  67. package/esm/RadarChart/RadarChart.plugins.js +4 -0
  68. package/esm/RadarChart/RadarDataProvider/RadarDataProvider.d.ts +6 -11
  69. package/esm/RadarChart/RadarDataProvider/RadarDataProvider.js +5 -115
  70. package/esm/RadarChart/index.d.ts +2 -0
  71. package/esm/RadarChart/index.js +2 -0
  72. package/esm/RadarChart/useRadarChartProps.d.ts +2 -1
  73. package/esm/RadarChart/useRadarChartProps.js +3 -1
  74. package/esm/ScatterChart/ScatterChart.d.ts +9 -2
  75. package/esm/ScatterChart/ScatterChart.js +8 -1
  76. package/esm/ScatterChart/useScatterChartProps.js +4 -2
  77. package/esm/SparkLineChart/SparkLineChart.d.ts +1 -1
  78. package/esm/Toolbar/Toolbar.d.ts +9 -3
  79. package/esm/Toolbar/Toolbar.js +22 -7
  80. package/esm/Toolbar/Toolbar.types.d.ts +15 -0
  81. package/esm/Toolbar/Toolbar.types.js +1 -0
  82. package/esm/Toolbar/ToolbarButton.d.ts +8 -2
  83. package/esm/Toolbar/ToolbarButton.js +23 -5
  84. package/esm/Toolbar/chartToolbarClasses.d.ts +6 -0
  85. package/esm/Toolbar/chartToolbarClasses.js +2 -0
  86. package/esm/Toolbar/index.d.ts +3 -1
  87. package/esm/Toolbar/index.js +3 -1
  88. package/esm/Toolbar/internals/ChartsToolbar.d.ts +6 -0
  89. package/esm/Toolbar/internals/ChartsToolbar.js +8 -0
  90. package/esm/context/ChartsSlotsContext.d.ts +20 -0
  91. package/esm/context/ChartsSlotsContext.js +35 -0
  92. package/esm/context/index.d.ts +2 -1
  93. package/esm/context/index.js +1 -0
  94. package/esm/context/useChartApiContext.d.ts +10 -0
  95. package/esm/context/useChartApiContext.js +21 -0
  96. package/esm/hooks/index.d.ts +1 -0
  97. package/esm/hooks/index.js +1 -0
  98. package/esm/index.js +1 -1
  99. package/esm/internals/constants.d.ts +3 -1
  100. package/esm/internals/constants.js +2 -1
  101. package/esm/internals/dateHelpers.d.ts +15 -0
  102. package/esm/internals/dateHelpers.js +20 -0
  103. package/esm/internals/domUtils.d.ts +1 -2
  104. package/esm/internals/domUtils.js +8 -19
  105. package/esm/internals/index.d.ts +4 -1
  106. package/esm/internals/index.js +4 -1
  107. package/esm/internals/material/index.d.ts +2 -0
  108. package/esm/internals/plugins/allPlugins.d.ts +1 -0
  109. package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.js +2 -8
  110. package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.d.ts +14 -0
  111. package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.js +4 -3
  112. package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types.d.ts +5 -2
  113. package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.d.ts +83 -0
  114. package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.js +8 -1
  115. package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/zoom.types.d.ts +9 -0
  116. package/esm/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.js +5 -0
  117. package/esm/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.js +11 -5
  118. package/esm/internals/plugins/featurePlugins/useChartPolarAxis/computeAxisValue.js +2 -8
  119. package/esm/models/index.d.ts +2 -2
  120. package/esm/models/index.js +1 -0
  121. package/esm/models/slots/chartsBaseSlotProps.d.ts +1 -0
  122. package/hooks/index.d.ts +1 -0
  123. package/hooks/index.js +12 -0
  124. package/index.js +1 -1
  125. package/internals/constants.d.ts +3 -1
  126. package/internals/constants.js +3 -2
  127. package/internals/dateHelpers.d.ts +15 -0
  128. package/internals/dateHelpers.js +28 -0
  129. package/internals/domUtils.d.ts +1 -2
  130. package/internals/domUtils.js +8 -20
  131. package/internals/index.d.ts +4 -1
  132. package/internals/index.js +44 -8
  133. package/internals/material/index.d.ts +2 -0
  134. package/internals/plugins/allPlugins.d.ts +1 -0
  135. package/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.js +5 -11
  136. package/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.d.ts +14 -0
  137. package/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.js +4 -3
  138. package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types.d.ts +5 -2
  139. package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.d.ts +83 -0
  140. package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.js +9 -2
  141. package/internals/plugins/featurePlugins/useChartCartesianAxis/zoom.types.d.ts +9 -0
  142. package/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.js +5 -0
  143. package/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.js +11 -5
  144. package/internals/plugins/featurePlugins/useChartPolarAxis/computeAxisValue.js +5 -11
  145. package/models/index.d.ts +2 -2
  146. package/models/index.js +11 -0
  147. package/models/slots/chartsBaseSlotProps.d.ts +1 -0
  148. package/package.json +2 -2
@@ -0,0 +1,20 @@
1
+ import * as React from 'react';
2
+ import { ChartsSlotProps, ChartsSlots } from "../internals/material/index.js";
3
+ type SlotProps<T extends Record<keyof T, React.ComponentType<any>>> = { [key in keyof T]: React.ComponentProps<T[key]> };
4
+ export interface ChartsSlotsContextValue<T extends ChartsSlots & Record<keyof T, React.ComponentType<any>> = ChartsSlots> {
5
+ slots: T;
6
+ slotProps: Partial<SlotProps<T>>;
7
+ }
8
+ export declare const ChartsSlotsContext: React.Context<ChartsSlotsContextValue<ChartsSlots> | null>;
9
+ /**
10
+ * Get the slots and slotProps from the nearest `ChartDataProvider` or `ChartDataProviderPro`.
11
+ * @returns {ChartsSlotsContextValue} The slots and slotProps from the context.
12
+ */
13
+ export declare function useChartsSlots<T extends ChartsSlots & Record<keyof T, React.ComponentType<any>> = ChartsSlots>(): ChartsSlotsContextValue<T>;
14
+ interface ChartsSlotsProviderProps {
15
+ slots?: Partial<ChartsSlots>;
16
+ slotProps?: Partial<ChartsSlotProps>;
17
+ defaultSlots: ChartsSlots;
18
+ }
19
+ export declare function ChartsSlotsProvider(props: React.PropsWithChildren<ChartsSlotsProviderProps>): React.JSX.Element;
20
+ export {};
@@ -0,0 +1,35 @@
1
+ 'use client';
2
+
3
+ import _extends from "@babel/runtime/helpers/esm/extends";
4
+ import * as React from 'react';
5
+ import { jsx as _jsx } from "react/jsx-runtime";
6
+ export const ChartsSlotsContext = /*#__PURE__*/React.createContext(null);
7
+
8
+ /**
9
+ * Get the slots and slotProps from the nearest `ChartDataProvider` or `ChartDataProviderPro`.
10
+ * @returns {ChartsSlotsContextValue} The slots and slotProps from the context.
11
+ */
12
+ if (process.env.NODE_ENV !== "production") ChartsSlotsContext.displayName = "ChartsSlotsContext";
13
+ export function useChartsSlots() {
14
+ const context = React.useContext(ChartsSlotsContext);
15
+ if (context == null) {
16
+ throw new Error(['MUI X Charts: Could not find the Charts Slots context.', 'It looks like you rendered your component outside of a ChartDataProvider.', 'This can also happen if you are bundling multiple versions of the library.'].join('\n'));
17
+ }
18
+ return context;
19
+ }
20
+ export function ChartsSlotsProvider(props) {
21
+ const {
22
+ slots,
23
+ slotProps = {},
24
+ defaultSlots,
25
+ children
26
+ } = props;
27
+ const value = React.useMemo(() => ({
28
+ slots: _extends({}, defaultSlots, slots),
29
+ slotProps
30
+ }), [defaultSlots, slots, slotProps]);
31
+ return /*#__PURE__*/_jsx(ChartsSlotsContext.Provider, {
32
+ value: value,
33
+ children: children
34
+ });
35
+ }
@@ -1 +1,2 @@
1
- export type { HighlightScope, FadeOptions, HighlightItemData, HighlightOptions } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
1
+ export type { HighlightScope, FadeOptions, HighlightItemData, HighlightOptions } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
2
+ export * from "./useChartApiContext.js";
@@ -1 +1,2 @@
1
+ export * from "./useChartApiContext.js";
1
2
  export {};
@@ -0,0 +1,10 @@
1
+ import * as React from 'react';
2
+ import { ChartApi } from "../ChartContainer/index.js";
3
+ /**
4
+ * The `useChartApiContext` hook provides access to the chart API.
5
+ * This is only available when the chart is rendered within a chart or a `ChartDataProvider` component.
6
+ * If you want to access the chart API outside those components, you should use the `apiRef` prop instead.
7
+ * @example
8
+ * const apiRef = useChartApiContext<ChartApi<'bar'>>();
9
+ */
10
+ export declare function useChartApiContext<Api extends ChartApi>(): React.RefObject<Api>;
@@ -0,0 +1,21 @@
1
+ 'use client';
2
+
3
+ import * as React from 'react';
4
+ import { useChartContext } from "./ChartProvider/index.js";
5
+ /**
6
+ * The `useChartApiContext` hook provides access to the chart API.
7
+ * This is only available when the chart is rendered within a chart or a `ChartDataProvider` component.
8
+ * If you want to access the chart API outside those components, you should use the `apiRef` prop instead.
9
+ * @example
10
+ * const apiRef = useChartApiContext<ChartApi<'bar'>>();
11
+ */
12
+ export function useChartApiContext() {
13
+ const {
14
+ publicAPI
15
+ } = useChartContext();
16
+ const apiRef = React.useRef(publicAPI);
17
+ React.useEffect(() => {
18
+ apiRef.current = publicAPI;
19
+ }, [publicAPI]);
20
+ return apiRef;
21
+ }
@@ -10,6 +10,7 @@ export * from "./useScatterSeries.js";
10
10
  export * from "./usePieSeries.js";
11
11
  export * from "./useBarSeries.js";
12
12
  export * from "./useLineSeries.js";
13
+ export * from "./useRadarSeries.js";
13
14
  export * from "./useItemHighlighted.js";
14
15
  export * from "./useItemHighlightedGetter.js";
15
16
  export * from "./useLegend.js";
@@ -10,6 +10,7 @@ export * from "./useScatterSeries.js";
10
10
  export * from "./usePieSeries.js";
11
11
  export * from "./useBarSeries.js";
12
12
  export * from "./useLineSeries.js";
13
+ export * from "./useRadarSeries.js";
13
14
  export * from "./useItemHighlighted.js";
14
15
  export * from "./useItemHighlightedGetter.js";
15
16
  export * from "./useLegend.js";
package/esm/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-charts v8.4.0
2
+ * @mui/x-charts v8.5.0
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -1,4 +1,6 @@
1
+ import type { ZoomSliderShowTooltip } from "./plugins/featurePlugins/useChartCartesianAxis/zoom.types.js";
1
2
  /** Margin in the opposite direction of the axis, i.e., horizontal if the axis is vertical and vice versa. */
2
3
  export declare const ZOOM_SLIDER_MARGIN = 4;
3
4
  /** Size reserved for the zoom slider. The actual size of the slider might be smaller. */
4
- export declare const DEFAULT_ZOOM_SLIDER_SIZE: number;
5
+ export declare const DEFAULT_ZOOM_SLIDER_SIZE: number;
6
+ export declare const DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP: ZoomSliderShowTooltip;
@@ -2,4 +2,5 @@
2
2
  export const ZOOM_SLIDER_MARGIN = 4;
3
3
 
4
4
  /** Size reserved for the zoom slider. The actual size of the slider might be smaller. */
5
- export const DEFAULT_ZOOM_SLIDER_SIZE = 20 + 2 * ZOOM_SLIDER_MARGIN;
5
+ export const DEFAULT_ZOOM_SLIDER_SIZE = 20 + 2 * ZOOM_SLIDER_MARGIN;
6
+ export const DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP = 'hover';
@@ -0,0 +1,15 @@
1
+ import { AxisConfig } from "../models/index.js";
2
+ import { ChartsAxisProps } from "../models/axis.js";
3
+ /**
4
+ * Checks if the provided data array contains Date objects.
5
+ * @param data The data array to check.
6
+ * @returns A type predicate indicating if the data is an array of Date objects.
7
+ */
8
+ export declare const isDateData: (data?: readonly any[]) => data is Date[];
9
+ /**
10
+ * Creates a formatter function for date values.
11
+ * @param axis The axis configuration.
12
+ * @param range The range for the time scale.
13
+ * @returns A formatter function for date values.
14
+ */
15
+ export declare function createDateFormatter(axis: AxisConfig<'band' | 'point', any, ChartsAxisProps>, range: number[]): AxisConfig<'band' | 'point', any, ChartsAxisProps>['valueFormatter'];
@@ -0,0 +1,20 @@
1
+ import { scaleTime } from '@mui/x-charts-vendor/d3-scale';
2
+ /**
3
+ * Checks if the provided data array contains Date objects.
4
+ * @param data The data array to check.
5
+ * @returns A type predicate indicating if the data is an array of Date objects.
6
+ */
7
+ export const isDateData = data => data?.[0] instanceof Date;
8
+
9
+ /**
10
+ * Creates a formatter function for date values.
11
+ * @param axis The axis configuration.
12
+ * @param range The range for the time scale.
13
+ * @returns A formatter function for date values.
14
+ */
15
+ export function createDateFormatter(axis, range) {
16
+ const timeScale = scaleTime(axis.data, range);
17
+ return (v, {
18
+ location
19
+ }) => location === 'tick' ? timeScale.tickFormat(axis.tickNumber)(v) : `${v.toLocaleString()}`;
20
+ }
@@ -14,5 +14,4 @@ export declare const getStyleString: (style: React.CSSProperties) => string;
14
14
  export declare const getStringSize: (text: string | number, style?: React.CSSProperties) => {
15
15
  width: number;
16
16
  height: number;
17
- };
18
- export declare function unstable_cleanupDOM(): void;
17
+ };
@@ -5,10 +5,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
5
5
  function isSsr() {
6
6
  return typeof window === 'undefined';
7
7
  }
8
- const stringCache = {
9
- widthCache: {},
10
- cacheCount: 0
11
- };
8
+ const stringCache = new Map();
12
9
  const MAX_CACHE_NUM = 2000;
13
10
  const SPAN_STYLE = {
14
11
  position: 'absolute',
@@ -75,8 +72,9 @@ export const getStringSize = (text, style = {}) => {
75
72
  const str = `${text}`;
76
73
  const styleString = getStyleString(style);
77
74
  const cacheKey = `${str}-${styleString}`;
78
- if (stringCache.widthCache[cacheKey]) {
79
- return stringCache.widthCache[cacheKey];
75
+ const size = stringCache.get(cacheKey);
76
+ if (size) {
77
+ return size;
80
78
  }
81
79
  try {
82
80
  let measurementSpan = document.getElementById(MEASUREMENT_SPAN_ID);
@@ -99,12 +97,9 @@ export const getStringSize = (text, style = {}) => {
99
97
  width: rect.width,
100
98
  height: rect.height
101
99
  };
102
- stringCache.widthCache[cacheKey] = result;
103
- if (stringCache.cacheCount + 1 > MAX_CACHE_NUM) {
104
- stringCache.cacheCount = 0;
105
- stringCache.widthCache = {};
106
- } else {
107
- stringCache.cacheCount += 1;
100
+ stringCache.set(cacheKey, result);
101
+ if (stringCache.size + 1 > MAX_CACHE_NUM) {
102
+ stringCache.clear();
108
103
  }
109
104
  if (process.env.NODE_ENV === 'test') {
110
105
  // In test environment, we clean the measurement span immediately
@@ -125,10 +120,4 @@ export const getStringSize = (text, style = {}) => {
125
120
  height: 0
126
121
  };
127
122
  }
128
- };
129
-
130
- // eslint-disable-next-line @typescript-eslint/naming-convention
131
- export function unstable_cleanupDOM() {
132
- // const measurementSpan = document.getElementById(MEASUREMENT_SPAN_ID);
133
- // measurementSpan?.remove();
134
- }
123
+ };
@@ -7,6 +7,7 @@ export { useDrawingArea } from "../hooks/useDrawingArea.js";
7
7
  export { useScatterChartProps } from "../ScatterChart/useScatterChartProps.js";
8
8
  export { useLineChartProps } from "../LineChart/useLineChartProps.js";
9
9
  export { useBarChartProps } from "../BarChart/useBarChartProps.js";
10
+ export { useRadarChartProps } from "../RadarChart/useRadarChartProps.js";
10
11
  export * from "../ChartContainer/useChartContainerProps.js";
11
12
  export * from "../ChartDataProvider/useChartDataProviderProps.js";
12
13
  export * from "./createSeriesSelectorOfType.js";
@@ -26,20 +27,22 @@ export * from "./store/useSelector.js";
26
27
  export * from "../BarChart/BarChart.plugins.js";
27
28
  export * from "../LineChart/LineChart.plugins.js";
28
29
  export * from "../ScatterChart/ScatterChart.plugins.js";
30
+ export * from "../RadarChart/RadarChart.plugins.js";
29
31
  export * from "./defaultizeValueFormatter.js";
30
32
  export * from "./configInit.js";
31
33
  export * from "./getLabel.js";
32
34
  export * from "./getSVGPoint.js";
33
35
  export * from "./isDefined.js";
34
- export { unstable_cleanupDOM } from "./domUtils.js";
35
36
  export * from "./getScale.js";
36
37
  export * from "./stackSeries.js";
37
38
  export * from "./getCurve.js";
38
39
  export * from "./consumeSlots.js";
39
40
  export * from "./consumeThemeProps.js";
40
41
  export * from "./defaultizeMargin.js";
42
+ export * from "./dateHelpers.js";
41
43
  export { getAxisExtremum } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum.js";
42
44
  export * from "../context/ChartProvider/index.js";
45
+ export * from "../context/ChartsSlotsContext.js";
43
46
  export * from "../models/seriesType/config.js";
44
47
  export * from "../models/seriesType/common.js";
45
48
  export * from "../models/z-axis.js";
@@ -10,6 +10,7 @@ export { useDrawingArea } from "../hooks/useDrawingArea.js";
10
10
  export { useScatterChartProps } from "../ScatterChart/useScatterChartProps.js";
11
11
  export { useLineChartProps } from "../LineChart/useLineChartProps.js";
12
12
  export { useBarChartProps } from "../BarChart/useBarChartProps.js";
13
+ export { useRadarChartProps } from "../RadarChart/useRadarChartProps.js";
13
14
  export * from "../ChartContainer/useChartContainerProps.js";
14
15
  export * from "../ChartDataProvider/useChartDataProviderProps.js";
15
16
  export * from "./createSeriesSelectorOfType.js";
@@ -34,6 +35,7 @@ export * from "./store/useSelector.js";
34
35
  export * from "../BarChart/BarChart.plugins.js";
35
36
  export * from "../LineChart/LineChart.plugins.js";
36
37
  export * from "../ScatterChart/ScatterChart.plugins.js";
38
+ export * from "../RadarChart/RadarChart.plugins.js";
37
39
 
38
40
  // utils
39
41
  export * from "./defaultizeValueFormatter.js";
@@ -41,17 +43,18 @@ export * from "./configInit.js";
41
43
  export * from "./getLabel.js";
42
44
  export * from "./getSVGPoint.js";
43
45
  export * from "./isDefined.js";
44
- export { unstable_cleanupDOM } from "./domUtils.js";
45
46
  export * from "./getScale.js";
46
47
  export * from "./stackSeries.js";
47
48
  export * from "./getCurve.js";
48
49
  export * from "./consumeSlots.js";
49
50
  export * from "./consumeThemeProps.js";
50
51
  export * from "./defaultizeMargin.js";
52
+ export * from "./dateHelpers.js";
51
53
 
52
54
  // contexts
53
55
  export { getAxisExtremum } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum.js";
54
56
  export * from "../context/ChartProvider/index.js";
57
+ export * from "../context/ChartsSlotsContext.js";
55
58
 
56
59
  // series configuration
57
60
  export * from "../models/seriesType/config.js";
@@ -1,4 +1,6 @@
1
+ import type * as React from 'react';
1
2
  import { ChartsBaseSlots } from "../../models/slots/chartsBaseSlots.js";
2
3
  import { ChartsIconSlots } from "../../models/slots/chartsIconSlots.js";
3
4
  export type ChartsSlots = ChartsBaseSlots & ChartsIconSlots;
5
+ export type ChartsSlotProps = { [key in keyof ChartsSlots]: React.ComponentProps<ChartsSlots[key]> };
4
6
  export declare const defaultSlotsMaterial: ChartsSlots;
@@ -6,4 +6,5 @@ import { UseChartPolarAxisSignature } from "./featurePlugins/useChartPolarAxis/i
6
6
  import { UseChartVoronoiSignature } from "./featurePlugins/useChartVoronoi/index.js";
7
7
  import { UseChartZAxisSignature } from "./featurePlugins/useChartZAxis/index.js";
8
8
  export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVoronoiSignature];
9
+ export type DefaultPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVoronoiSignature];
9
10
  export declare const DEFAULT_PLUGINS: readonly [import("./models/index.js").ChartPlugin<UseChartZAxisSignature>, import("./models/index.js").ChartPlugin<UseChartCartesianAxisSignature<any>>, import("./models/index.js").ChartPlugin<UseChartInteractionSignature>, import("./models/index.js").ChartPlugin<UseChartHighlightSignature>, import("./models/index.js").ChartPlugin<UseChartVoronoiSignature>];
@@ -1,9 +1,10 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
- import { scaleBand, scalePoint, scaleTime } from '@mui/x-charts-vendor/d3-scale';
2
+ import { scaleBand, scalePoint } from '@mui/x-charts-vendor/d3-scale';
3
3
  import { isBandScaleConfig, isPointScaleConfig } from "../../../../models/axis.js";
4
4
  import { getColorScale, getOrdinalColorScale } from "../../../colorScale.js";
5
5
  import { getTickNumber, scaleTickNumberByRange } from "../../../ticks.js";
6
6
  import { getScale } from "../../../getScale.js";
7
+ import { isDateData, createDateFormatter } from "../../../dateHelpers.js";
7
8
  import { zoomScaleRange } from "./zoom.js";
8
9
  import { getAxisExtremum } from "./getAxisExtremum.js";
9
10
  import { getAxisTriggerTooltip } from "./getAxisTriggerTooltip.js";
@@ -13,13 +14,6 @@ axis) {
13
14
  const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
14
15
  return axis.reverse ? [range[1], range[0]] : range;
15
16
  }
16
- const isDateData = data => data?.[0] instanceof Date;
17
- function createDateFormatter(axis, range) {
18
- const timeScale = scaleTime(axis.data, range);
19
- return (v, {
20
- location
21
- }) => location === 'tick' ? timeScale.tickFormat(axis.tickNumber)(v) : `${v.toLocaleString()}`;
22
- }
23
17
  const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
24
18
  const DEFAULT_BAR_GAP_RATIO = 0.1;
25
19
  export function computeAxisValue({
@@ -1,4 +1,18 @@
1
1
  import { AxisId } from "../../../../models/axis.js";
2
2
  import { DefaultizedZoomOptions } from "./useChartCartesianAxis.types.js";
3
3
  import { ZoomOptions } from "./zoom.types.js";
4
+ export declare const defaultZoomOptions: {
5
+ minStart: number;
6
+ maxEnd: number;
7
+ step: number;
8
+ minSpan: number;
9
+ maxSpan: number;
10
+ panning: true;
11
+ filterMode: "keep";
12
+ slider: {
13
+ enabled: false;
14
+ size: number;
15
+ showTooltip: import("./zoom.types.js").ZoomSliderShowTooltip;
16
+ };
17
+ };
4
18
  export declare const defaultizeZoom: (zoom: boolean | ZoomOptions | undefined, axisId: AxisId, axisDirection: "x" | "y") => DefaultizedZoomOptions | undefined;
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
- import { DEFAULT_ZOOM_SLIDER_SIZE } from "../../../constants.js";
3
- const defaultZoomOptions = {
2
+ import { DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP, DEFAULT_ZOOM_SLIDER_SIZE } from "../../../constants.js";
3
+ export const defaultZoomOptions = {
4
4
  minStart: 0,
5
5
  maxEnd: 100,
6
6
  step: 5,
@@ -10,7 +10,8 @@ const defaultZoomOptions = {
10
10
  filterMode: 'keep',
11
11
  slider: {
12
12
  enabled: false,
13
- size: DEFAULT_ZOOM_SLIDER_SIZE
13
+ size: DEFAULT_ZOOM_SLIDER_SIZE,
14
+ showTooltip: DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP
14
15
  }
15
16
  };
16
17
  export const defaultizeZoom = (zoom, axisId, axisDirection) => {
@@ -2,7 +2,7 @@ import type { ChartPluginSignature } from "../../models/index.js";
2
2
  import type { ChartSeriesType, DatasetType } from "../../../../models/seriesType/config.js";
3
3
  import type { ComputedAxis, ScaleName, AxisId, ChartsAxisData, YAxis, XAxis, DefaultedXAxis, DefaultedYAxis } from "../../../../models/axis.js";
4
4
  import type { UseChartSeriesSignature } from "../../corePlugins/useChartSeries/index.js";
5
- import type { ZoomData, ZoomOptions } from "./zoom.types.js";
5
+ import type { ZoomData, ZoomOptions, ZoomSliderShowTooltip } from "./zoom.types.js";
6
6
  import type { UseChartInteractionSignature } from "../useChartInteraction/index.js";
7
7
  import type { ChartsAxisProps } from "../../../../ChartsAxis/index.js";
8
8
  /**
@@ -47,10 +47,13 @@ export type UseChartCartesianAxisDefaultizedParameters<S extends ScaleName = Sca
47
47
  defaultizedXAxis: DefaultedXAxis<S>[];
48
48
  defaultizedYAxis: DefaultedYAxis<S>[];
49
49
  };
50
+ export interface DefaultedZoomSliderOptions extends Omit<NonNullable<Required<ZoomOptions['slider']>>, 'showTooltip'> {
51
+ showTooltip: ZoomSliderShowTooltip;
52
+ }
50
53
  export interface DefaultizedZoomOptions extends Required<Omit<ZoomOptions, 'slider'>> {
51
54
  axisId: AxisId;
52
55
  axisDirection: 'x' | 'y';
53
- slider: NonNullable<Required<ZoomOptions['slider']>>;
56
+ slider: DefaultedZoomSliderOptions;
54
57
  }
55
58
  export interface UseChartCartesianAxisState {
56
59
  /**
@@ -3238,4 +3238,87 @@ export declare const selectorChartYAxis: ((state: import("../../corePlugins/useC
3238
3238
  } & {
3239
3239
  memoize: typeof import("reselect").weakMapMemoize;
3240
3240
  argsMemoize: typeof import("reselect").weakMapMemoize;
3241
+ };
3242
+ export declare const selectorChartRawAxis: ((state: any, axisId: AxisId) => import("../../../index.js").DefaultedXAxis | import("../../../index.js").DefaultedYAxis | undefined) & {
3243
+ clearCache: () => void;
3244
+ resultsCount: () => number;
3245
+ resetResultsCount: () => void;
3246
+ } & {
3247
+ resultFunc: (resultFuncArgs_0: import("../../../index.js").DefaultedXAxis[] | undefined, resultFuncArgs_1: import("../../../index.js").DefaultedYAxis[] | undefined, resultFuncArgs_2: AxisId) => import("../../../index.js").DefaultedXAxis | import("../../../index.js").DefaultedYAxis | undefined;
3248
+ memoizedResultFunc: ((resultFuncArgs_0: import("../../../index.js").DefaultedXAxis[] | undefined, resultFuncArgs_1: import("../../../index.js").DefaultedYAxis[] | undefined, resultFuncArgs_2: AxisId) => import("../../../index.js").DefaultedXAxis | import("../../../index.js").DefaultedYAxis | undefined) & {
3249
+ clearCache: () => void;
3250
+ resultsCount: () => number;
3251
+ resetResultsCount: () => void;
3252
+ };
3253
+ lastResult: () => import("../../../index.js").DefaultedXAxis | import("../../../index.js").DefaultedYAxis | undefined;
3254
+ dependencies: [((state: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
3255
+ cacheKey: import("../../models/index.js").ChartStateCacheKey;
3256
+ }) => import("../../../index.js").DefaultedXAxis[] | undefined) & {
3257
+ clearCache: () => void;
3258
+ resultsCount: () => number;
3259
+ resetResultsCount: () => void;
3260
+ } & {
3261
+ resultFunc: (resultFuncArgs_0: {
3262
+ x: import("../../../index.js").DefaultedXAxis[];
3263
+ y: import("../../../index.js").DefaultedYAxis[];
3264
+ } | undefined) => import("../../../index.js").DefaultedXAxis[] | undefined;
3265
+ memoizedResultFunc: ((resultFuncArgs_0: {
3266
+ x: import("../../../index.js").DefaultedXAxis[];
3267
+ y: import("../../../index.js").DefaultedYAxis[];
3268
+ } | undefined) => import("../../../index.js").DefaultedXAxis[] | undefined) & {
3269
+ clearCache: () => void;
3270
+ resultsCount: () => number;
3271
+ resetResultsCount: () => void;
3272
+ };
3273
+ lastResult: () => import("../../../index.js").DefaultedXAxis[] | undefined;
3274
+ dependencies: [(state: ChartState<[], [UseChartCartesianAxisSignature]>) => {
3275
+ x: import("../../../index.js").DefaultedXAxis[];
3276
+ y: import("../../../index.js").DefaultedYAxis[];
3277
+ } | undefined];
3278
+ recomputations: () => number;
3279
+ resetRecomputations: () => void;
3280
+ dependencyRecomputations: () => number;
3281
+ resetDependencyRecomputations: () => void;
3282
+ } & {
3283
+ memoize: typeof import("reselect").weakMapMemoize;
3284
+ argsMemoize: typeof import("reselect").weakMapMemoize;
3285
+ }, ((state: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
3286
+ cacheKey: import("../../models/index.js").ChartStateCacheKey;
3287
+ }) => import("../../../index.js").DefaultedYAxis[] | undefined) & {
3288
+ clearCache: () => void;
3289
+ resultsCount: () => number;
3290
+ resetResultsCount: () => void;
3291
+ } & {
3292
+ resultFunc: (resultFuncArgs_0: {
3293
+ x: import("../../../index.js").DefaultedXAxis[];
3294
+ y: import("../../../index.js").DefaultedYAxis[];
3295
+ } | undefined) => import("../../../index.js").DefaultedYAxis[] | undefined;
3296
+ memoizedResultFunc: ((resultFuncArgs_0: {
3297
+ x: import("../../../index.js").DefaultedXAxis[];
3298
+ y: import("../../../index.js").DefaultedYAxis[];
3299
+ } | undefined) => import("../../../index.js").DefaultedYAxis[] | undefined) & {
3300
+ clearCache: () => void;
3301
+ resultsCount: () => number;
3302
+ resetResultsCount: () => void;
3303
+ };
3304
+ lastResult: () => import("../../../index.js").DefaultedYAxis[] | undefined;
3305
+ dependencies: [(state: ChartState<[], [UseChartCartesianAxisSignature]>) => {
3306
+ x: import("../../../index.js").DefaultedXAxis[];
3307
+ y: import("../../../index.js").DefaultedYAxis[];
3308
+ } | undefined];
3309
+ recomputations: () => number;
3310
+ resetRecomputations: () => void;
3311
+ dependencyRecomputations: () => number;
3312
+ resetDependencyRecomputations: () => void;
3313
+ } & {
3314
+ memoize: typeof import("reselect").weakMapMemoize;
3315
+ argsMemoize: typeof import("reselect").weakMapMemoize;
3316
+ }, (state: any, axisId: AxisId) => AxisId];
3317
+ recomputations: () => number;
3318
+ resetRecomputations: () => void;
3319
+ dependencyRecomputations: () => number;
3320
+ resetDependencyRecomputations: () => void;
3321
+ } & {
3322
+ memoize: typeof import("reselect").weakMapMemoize;
3323
+ argsMemoize: typeof import("reselect").weakMapMemoize;
3241
3324
  };
@@ -87,4 +87,11 @@ export const selectorChartYAxis = createSelector([selectorChartRawYAxis, selecto
87
87
  zoomMap,
88
88
  zoomOptions,
89
89
  getFilters
90
- }));
90
+ }));
91
+ export const selectorChartRawAxis = createSelector([selectorChartRawXAxis, selectorChartRawYAxis, (state, axisId) => axisId], (xAxes, yAxes, axisId) => {
92
+ const axis = xAxes?.find(a => a.id === axisId) ?? yAxes?.find(a => a.id === axisId) ?? null;
93
+ if (!axis) {
94
+ return undefined;
95
+ }
96
+ return axis;
97
+ });
@@ -15,6 +15,7 @@ export type ZoomData = {
15
15
  end: number;
16
16
  };
17
17
  export type ZoomFilterMode = 'keep' | 'discard';
18
+ export type ZoomSliderShowTooltip = 'always' | 'hover' | 'never';
18
19
  export interface ZoomOptions {
19
20
  /**
20
21
  * The starting percentage of the zoom range. In the range of 0 to 100.
@@ -85,6 +86,14 @@ export interface ZoomSliderOptions {
85
86
  * @default 28
86
87
  */
87
88
  size?: number;
89
+ /**
90
+ * Defines when the tooltip with the zoom values should be shown.
91
+ * - 'always': The tooltip is always shown.
92
+ * - 'hover': The tooltip is shown when hovering over the track or thumb.
93
+ * - 'never': The tooltip is never shown.
94
+ * @default 'hover'
95
+ */
96
+ showTooltip?: ZoomSliderShowTooltip;
88
97
  }
89
98
  export type ZoomAxisFilters = Record<AxisId, ExtremumFilter>;
90
99
  export type GetZoomAxisFilters = (params: {
@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import { useAssertModelConsistency } from '@mui/x-internals/useAssertModelConsistency';
3
3
  import useEventCallback from '@mui/utils/useEventCallback';
4
4
  import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
5
+ import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
5
6
  export const useChartHighlight = ({
6
7
  store,
7
8
  params
@@ -29,6 +30,10 @@ export const useChartHighlight = ({
29
30
  }));
30
31
  });
31
32
  const setHighlight = useEventCallback(newItem => {
33
+ const prevItem = store.getSnapshot().highlight.item;
34
+ if (fastObjectShallowCompare(prevItem, newItem)) {
35
+ return;
36
+ }
32
37
  params.onHighlightChange?.(newItem);
33
38
  store.update(prev => _extends({}, prev, {
34
39
  highlight: {
@@ -1,5 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import useEventCallback from '@mui/utils/useEventCallback';
3
+ import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
3
4
  export const useChartInteraction = ({
4
5
  store
5
6
  }) => {
@@ -36,11 +37,16 @@ export const useChartInteraction = ({
36
37
  });
37
38
  });
38
39
  const setItemInteraction = useEventCallback(newItem => {
39
- store.update(prev => _extends({}, prev, {
40
- interaction: _extends({}, prev.interaction, {
41
- item: newItem
42
- })
43
- }));
40
+ store.update(prev => {
41
+ if (fastObjectShallowCompare(prev.interaction.item, newItem)) {
42
+ return prev;
43
+ }
44
+ return _extends({}, prev, {
45
+ interaction: _extends({}, prev.interaction, {
46
+ item: newItem
47
+ })
48
+ });
49
+ });
44
50
  });
45
51
  const setPointerCoordinate = useEventCallback(coordinate => {
46
52
  store.update(prev => _extends({}, prev, {
@@ -1,9 +1,10 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
- import { scaleBand, scalePoint, scaleTime } from '@mui/x-charts-vendor/d3-scale';
2
+ import { scaleBand, scalePoint } from '@mui/x-charts-vendor/d3-scale';
3
3
  import { isBandScaleConfig, isPointScaleConfig } from "../../../../models/axis.js";
4
4
  import { getColorScale, getOrdinalColorScale } from "../../../colorScale.js";
5
5
  import { getTickNumber, scaleTickNumberByRange } from "../../../ticks.js";
6
6
  import { getScale } from "../../../getScale.js";
7
+ import { isDateData, createDateFormatter } from "../../../dateHelpers.js";
7
8
  import { getAxisExtremum } from "./getAxisExtremum.js";
8
9
  import { deg2rad } from "../../../angleConversion.js";
9
10
  import { getAxisTriggerTooltip } from "./getAxisTriggerTooltip.js";
@@ -22,13 +23,6 @@ function getRange(drawingArea, axisDirection, axis) {
22
23
  }
23
24
  return [0, Math.min(drawingArea.height, drawingArea.width) / 2];
24
25
  }
25
- const isDateData = data => data?.[0] instanceof Date;
26
- function createDateFormatter(axis, range) {
27
- const timeScale = scaleTime(axis.data, range);
28
- return (v, {
29
- location
30
- }) => location === 'tick' ? timeScale.tickFormat(axis.tickNumber)(v) : `${v.toLocaleString()}`;
31
- }
32
26
  const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
33
27
  const DEFAULT_BAR_GAP_RATIO = 0.1;
34
28
  export function computeAxisValue({
@@ -1,7 +1,7 @@
1
1
  export * from "./seriesType/index.js";
2
2
  export * from "./stacking.js";
3
+ export * from "./slots/index.js";
3
4
  export type { AxisConfig, ChartsYAxisProps, ChartsXAxisProps, ScaleName, ContinuousScaleName, ChartsAxisData, XAxis, YAxis, RadiusAxis, RotationAxis } from "./axis.js";
4
5
  export type { PropsFromSlot } from '@mui/x-internals/slots';
5
6
  export type { Position } from "./position.js";
6
- export type { CurveType } from "./curve.js";
7
- export type { ChartBaseCommonProps, ChartBaseIconProps, ChartsIconSlots, ChartsBaseSlots } from "./slots/index.js";
7
+ export type { CurveType } from "./curve.js";
@@ -1,5 +1,6 @@
1
1
  export * from "./seriesType/index.js";
2
2
  export * from "./stacking.js";
3
+ export * from "./slots/index.js";
3
4
 
4
5
  // Utils shared across the X packages
5
6
  export {};