@mui/x-charts 8.0.0-beta.1 → 8.0.0-beta.2

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 (132) hide show
  1. package/BarChart/useBarChartProps.d.ts +2 -1
  2. package/BarChart/useBarChartProps.js +20 -13
  3. package/CHANGELOG.md +94 -0
  4. package/ChartsAxisHighlight/ChartsXAxisHighlight.js +8 -8
  5. package/ChartsAxisHighlight/ChartsYAxisHighlight.js +8 -8
  6. package/ChartsOverlay/ChartsLoadingOverlay.js +1 -1
  7. package/ChartsOverlay/ChartsNoDataOverlay.js +1 -1
  8. package/ChartsTooltip/ChartsTooltipContainer.js +2 -1
  9. package/ChartsTooltip/useAxisTooltip.js +2 -2
  10. package/LineChart/CircleMarkElement.js +2 -2
  11. package/LineChart/LineHighlightPlot.js +2 -2
  12. package/LineChart/MarkElement.js +2 -2
  13. package/LineChart/useLineChartProps.d.ts +2 -1
  14. package/LineChart/useLineChartProps.js +7 -4
  15. package/RadarChart/RadarAxisHighlight/useRadarAxisHighlight.js +9 -5
  16. package/RadarChart/RadarGrid/RadarGrid.d.ts +1 -1
  17. package/RadarChart/RadarGrid/RadarGrid.js +5 -1
  18. package/RadarChart/RadarGrid/useRadarGridData.d.ts +1 -1
  19. package/RadarChart/RadarGrid/useRadarGridData.js +3 -0
  20. package/RadarChart/RadarSeriesPlot/useRadarSeriesData.js +2 -2
  21. package/ScatterChart/useScatterChartProps.d.ts +2 -1
  22. package/ScatterChart/useScatterChartProps.js +6 -3
  23. package/esm/BarChart/useBarChartProps.d.ts +2 -1
  24. package/esm/BarChart/useBarChartProps.js +19 -13
  25. package/esm/ChartsAxisHighlight/ChartsXAxisHighlight.js +8 -8
  26. package/esm/ChartsAxisHighlight/ChartsYAxisHighlight.js +8 -8
  27. package/esm/ChartsOverlay/ChartsLoadingOverlay.js +1 -1
  28. package/esm/ChartsOverlay/ChartsNoDataOverlay.js +1 -1
  29. package/esm/ChartsTooltip/ChartsTooltipContainer.js +2 -1
  30. package/esm/ChartsTooltip/useAxisTooltip.js +1 -1
  31. package/esm/LineChart/CircleMarkElement.js +1 -1
  32. package/esm/LineChart/LineHighlightPlot.js +1 -1
  33. package/esm/LineChart/MarkElement.js +1 -1
  34. package/esm/LineChart/useLineChartProps.d.ts +2 -1
  35. package/esm/LineChart/useLineChartProps.js +6 -4
  36. package/esm/RadarChart/RadarAxisHighlight/useRadarAxisHighlight.js +9 -5
  37. package/esm/RadarChart/RadarGrid/RadarGrid.d.ts +1 -1
  38. package/esm/RadarChart/RadarGrid/RadarGrid.js +5 -1
  39. package/esm/RadarChart/RadarGrid/useRadarGridData.d.ts +1 -1
  40. package/esm/RadarChart/RadarGrid/useRadarGridData.js +3 -0
  41. package/esm/RadarChart/RadarSeriesPlot/useRadarSeriesData.js +2 -2
  42. package/esm/ScatterChart/useScatterChartProps.d.ts +2 -1
  43. package/esm/ScatterChart/useScatterChartProps.js +5 -3
  44. package/esm/hooks/useAxis.d.ts +5 -5
  45. package/esm/hooks/useScale.d.ts +2 -2
  46. package/esm/hooks/useScale.js +2 -2
  47. package/esm/index.js +1 -1
  48. package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.d.ts +8 -6
  49. package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.js +28 -22
  50. package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/index.d.ts +1 -0
  51. package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/index.js +1 -0
  52. package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.js +9 -42
  53. package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors.d.ts +1 -0
  54. package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors.js +41 -0
  55. package/esm/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.js +7 -20
  56. package/esm/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.d.ts +36 -242
  57. package/esm/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.js +4 -10
  58. package/esm/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types.d.ts +9 -15
  59. package/esm/internals/plugins/featurePlugins/useChartPolarAxis/coordinateTransformation.d.ts +12 -0
  60. package/esm/internals/plugins/featurePlugins/useChartPolarAxis/coordinateTransformation.js +8 -0
  61. package/esm/internals/plugins/featurePlugins/useChartPolarAxis/getAxisValue.d.ts +6 -4
  62. package/esm/internals/plugins/featurePlugins/useChartPolarAxis/getAxisValue.js +18 -13
  63. package/esm/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.js +16 -32
  64. package/esm/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.d.ts +3669 -0
  65. package/esm/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.js +22 -0
  66. package/hooks/useAxis.d.ts +5 -5
  67. package/hooks/useScale.d.ts +2 -2
  68. package/hooks/useScale.js +2 -2
  69. package/index.js +1 -1
  70. package/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.d.ts +8 -6
  71. package/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.js +29 -22
  72. package/internals/plugins/featurePlugins/useChartCartesianAxis/index.d.ts +1 -0
  73. package/internals/plugins/featurePlugins/useChartCartesianAxis/index.js +12 -0
  74. package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.js +7 -40
  75. package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors.d.ts +1 -0
  76. package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors.js +47 -0
  77. package/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.js +7 -20
  78. package/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.d.ts +36 -242
  79. package/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.js +5 -11
  80. package/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types.d.ts +9 -15
  81. package/internals/plugins/featurePlugins/useChartPolarAxis/coordinateTransformation.d.ts +12 -0
  82. package/internals/plugins/featurePlugins/useChartPolarAxis/coordinateTransformation.js +17 -0
  83. package/internals/plugins/featurePlugins/useChartPolarAxis/getAxisValue.d.ts +6 -4
  84. package/internals/plugins/featurePlugins/useChartPolarAxis/getAxisValue.js +19 -13
  85. package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.js +16 -32
  86. package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.d.ts +3669 -0
  87. package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.js +28 -0
  88. package/modern/BarChart/useBarChartProps.d.ts +2 -1
  89. package/modern/BarChart/useBarChartProps.js +19 -13
  90. package/modern/ChartsAxisHighlight/ChartsXAxisHighlight.js +8 -8
  91. package/modern/ChartsAxisHighlight/ChartsYAxisHighlight.js +8 -8
  92. package/modern/ChartsOverlay/ChartsLoadingOverlay.js +1 -1
  93. package/modern/ChartsOverlay/ChartsNoDataOverlay.js +1 -1
  94. package/modern/ChartsTooltip/ChartsTooltipContainer.js +2 -1
  95. package/modern/ChartsTooltip/useAxisTooltip.js +1 -1
  96. package/modern/LineChart/CircleMarkElement.js +1 -1
  97. package/modern/LineChart/LineHighlightPlot.js +1 -1
  98. package/modern/LineChart/MarkElement.js +1 -1
  99. package/modern/LineChart/useLineChartProps.d.ts +2 -1
  100. package/modern/LineChart/useLineChartProps.js +6 -4
  101. package/modern/RadarChart/RadarAxisHighlight/useRadarAxisHighlight.js +9 -5
  102. package/modern/RadarChart/RadarGrid/RadarGrid.d.ts +1 -1
  103. package/modern/RadarChart/RadarGrid/RadarGrid.js +5 -1
  104. package/modern/RadarChart/RadarGrid/useRadarGridData.d.ts +1 -1
  105. package/modern/RadarChart/RadarGrid/useRadarGridData.js +3 -0
  106. package/modern/RadarChart/RadarSeriesPlot/useRadarSeriesData.js +2 -2
  107. package/modern/ScatterChart/useScatterChartProps.d.ts +2 -1
  108. package/modern/ScatterChart/useScatterChartProps.js +5 -3
  109. package/modern/hooks/useAxis.d.ts +5 -5
  110. package/modern/hooks/useScale.d.ts +2 -2
  111. package/modern/hooks/useScale.js +2 -2
  112. package/modern/index.js +1 -1
  113. package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.d.ts +8 -6
  114. package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.js +28 -22
  115. package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/index.d.ts +1 -0
  116. package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/index.js +1 -0
  117. package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.js +9 -42
  118. package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors.d.ts +1 -0
  119. package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors.js +41 -0
  120. package/modern/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.js +7 -20
  121. package/modern/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.d.ts +36 -242
  122. package/modern/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.js +4 -10
  123. package/modern/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types.d.ts +9 -15
  124. package/modern/internals/plugins/featurePlugins/useChartPolarAxis/coordinateTransformation.d.ts +12 -0
  125. package/modern/internals/plugins/featurePlugins/useChartPolarAxis/coordinateTransformation.js +8 -0
  126. package/modern/internals/plugins/featurePlugins/useChartPolarAxis/getAxisValue.d.ts +6 -4
  127. package/modern/internals/plugins/featurePlugins/useChartPolarAxis/getAxisValue.js +18 -13
  128. package/modern/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.js +16 -32
  129. package/modern/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.d.ts +3669 -0
  130. package/modern/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.js +22 -0
  131. package/package.json +2 -2
  132. package/tsconfig.build.tsbuildinfo +1 -1
@@ -0,0 +1,41 @@
1
+ import { createSelector } from "../../utils/selectors.js";
2
+ import { selectorChartsInteractionPointerX, selectorChartsInteractionPointerY } from "../useChartInteraction/useChartInteraction.selectors.js";
3
+ import { getAxisIndex, getAxisValue } from "./getAxisValue.js";
4
+ import { selectorChartXAxis, selectorChartYAxis } from "./useChartCartesianAxisRendering.selectors.js";
5
+ export const selectorChartsInteractionXAxisIndex = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis], (x, xAxes) => {
6
+ if (x === null || !xAxes.axis[xAxes.axisIds[0]]) {
7
+ return null;
8
+ }
9
+ return getAxisIndex(xAxes.axis[xAxes.axisIds[0]], x);
10
+ });
11
+ export const selectorChartsInteractionXAxisValue = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis, selectorChartsInteractionXAxisIndex], (x, xAxes, xIndex) => {
12
+ if (x === null || xIndex === null || !xAxes.axis[xAxes.axisIds[0]]) {
13
+ return null;
14
+ }
15
+ return getAxisValue(xAxes.axis[xAxes.axisIds[0]], x, xIndex);
16
+ });
17
+ export const selectorChartsInteractionYAxisIndex = createSelector([selectorChartsInteractionPointerY, selectorChartYAxis], (y, yAxes) => {
18
+ if (y === null || !yAxes.axis[yAxes.axisIds[0]]) {
19
+ return null;
20
+ }
21
+ return getAxisIndex(yAxes.axis[yAxes.axisIds[0]], y);
22
+ });
23
+ export const selectorChartsInteractionYAxisValue = createSelector([selectorChartsInteractionPointerY, selectorChartYAxis, selectorChartsInteractionYAxisIndex], (y, yAxes, yIndex) => {
24
+ if (y === null || yIndex === null || !yAxes.axis[yAxes.axisIds[0]]) {
25
+ return null;
26
+ }
27
+ return getAxisValue(yAxes.axis[yAxes.axisIds[0]], y, yIndex);
28
+ });
29
+ // TODO: probably remove in favor of the two more specific.
30
+ export const selectorChartsInteractionXAxis = createSelector([selectorChartsInteractionXAxisIndex, selectorChartsInteractionXAxisValue], (index, value) => index === null || value === null ? null : {
31
+ index,
32
+ value
33
+ });
34
+ export const selectorChartsInteractionYAxis = createSelector([selectorChartsInteractionYAxisIndex, selectorChartsInteractionYAxisValue], (index, value) => index === null || value === null ? null : {
35
+ index,
36
+ value
37
+ });
38
+
39
+ // TODO: probably remove in favor of the two more specific.
40
+ export const selectorChartsInteractionXAxisIsDefined = createSelector([selectorChartsInteractionXAxisIndex], index => index !== null && index >= 0);
41
+ export const selectorChartsInteractionYAxisIsDefined = createSelector([selectorChartsInteractionYAxisIndex], index => index !== null && index >= 0);
@@ -6,13 +6,10 @@ export const useChartInteraction = ({
6
6
  const cleanInteraction = useEventCallback(() => {
7
7
  store.update(prev => {
8
8
  return _extends({}, prev, {
9
- interaction: _extends({}, prev.interaction, {
10
- axis: {
11
- x: null,
12
- y: null
13
- },
9
+ interaction: {
10
+ pointer: null,
14
11
  item: null
15
- })
12
+ }
16
13
  });
17
14
  });
18
15
  });
@@ -45,17 +42,10 @@ export const useChartInteraction = ({
45
42
  })
46
43
  }));
47
44
  });
48
- const setAxisInteraction = useEventCallback(({
49
- x: newStateX,
50
- y: newStateY
51
- }) => {
45
+ const setPointerCoordinate = useEventCallback(coordinate => {
52
46
  store.update(prev => _extends({}, prev, {
53
47
  interaction: _extends({}, prev.interaction, {
54
- axis: _extends({}, prev.interaction.axis, prev.interaction.axis.x?.index !== newStateX?.index || prev.interaction.axis.x?.value !== newStateX?.value ? {
55
- x: newStateX
56
- } : {}, prev.interaction.axis.y?.index !== newStateY?.index || prev.interaction.axis.y?.value !== newStateY?.value ? {
57
- y: newStateY
58
- } : {})
48
+ pointer: coordinate
59
49
  })
60
50
  }));
61
51
  });
@@ -64,17 +54,14 @@ export const useChartInteraction = ({
64
54
  cleanInteraction,
65
55
  setItemInteraction,
66
56
  removeItemInteraction,
67
- setAxisInteraction
57
+ setPointerCoordinate
68
58
  }
69
59
  };
70
60
  };
71
61
  useChartInteraction.getInitialState = () => ({
72
62
  interaction: {
73
63
  item: null,
74
- axis: {
75
- x: null,
76
- y: null
77
- }
64
+ pointer: null
78
65
  }
79
66
  });
80
67
  useChartInteraction.params = {};
@@ -1,5 +1,5 @@
1
1
  import { ChartOptionalRootSelector } from "../../utils/selectors.js";
2
- import { AxisInteractionData, UseChartInteractionSignature } from "./useChartInteraction.types.js";
2
+ import { UseChartInteractionSignature } from "./useChartInteraction.types.js";
3
3
  export declare const selectorChartsInteractionIsInitialized: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartInteraction.types").UseChartInteractionState> & {
4
4
  cacheKey: import("../../models").ChartStateCacheKey;
5
5
  }) => boolean) & {
@@ -9,11 +9,11 @@ export declare const selectorChartsInteractionIsInitialized: ((state: import("..
9
9
  } & {
10
10
  resultFunc: (resultFuncArgs_0: {
11
11
  item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
12
- axis: AxisInteractionData;
12
+ pointer: import("./useChartInteraction.types").Coordinate | null;
13
13
  } | undefined) => boolean;
14
14
  memoizedResultFunc: ((resultFuncArgs_0: {
15
15
  item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
16
- axis: AxisInteractionData;
16
+ pointer: import("./useChartInteraction.types").Coordinate | null;
17
17
  } | undefined) => boolean) & {
18
18
  clearCache: () => void;
19
19
  resultsCount: () => number;
@@ -38,11 +38,11 @@ export declare const selectorChartsInteractionItem: ((state: import("../../coreP
38
38
  } & {
39
39
  resultFunc: (resultFuncArgs_0: {
40
40
  item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
41
- axis: AxisInteractionData;
41
+ pointer: import("./useChartInteraction.types").Coordinate | null;
42
42
  } | undefined) => import("../../../..").ScatterItemIdentifier | import("../../../..").LineItemIdentifier | import("../../../..").BarItemIdentifier | import("../../../..").PieItemIdentifier | import("../../../..").RadarItemIdentifier | null;
43
43
  memoizedResultFunc: ((resultFuncArgs_0: {
44
44
  item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
45
- axis: AxisInteractionData;
45
+ pointer: import("./useChartInteraction.types").Coordinate | null;
46
46
  } | undefined) => import("../../../..").ScatterItemIdentifier | import("../../../..").LineItemIdentifier | import("../../../..").BarItemIdentifier | import("../../../..").PieItemIdentifier | import("../../../..").RadarItemIdentifier | null) & {
47
47
  clearCache: () => void;
48
48
  resultsCount: () => number;
@@ -58,26 +58,26 @@ export declare const selectorChartsInteractionItem: ((state: import("../../coreP
58
58
  memoize: typeof import("reselect").weakMapMemoize;
59
59
  argsMemoize: typeof import("reselect").weakMapMemoize;
60
60
  };
61
- export declare const selectorChartsInteractionAxis: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartInteraction.types").UseChartInteractionState> & {
61
+ export declare const selectorChartsInteractionPointer: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartInteraction.types").UseChartInteractionState> & {
62
62
  cacheKey: import("../../models").ChartStateCacheKey;
63
- }) => AxisInteractionData) & {
63
+ }) => import("./useChartInteraction.types").Coordinate | null) & {
64
64
  clearCache: () => void;
65
65
  resultsCount: () => number;
66
66
  resetResultsCount: () => void;
67
67
  } & {
68
68
  resultFunc: (resultFuncArgs_0: {
69
69
  item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
70
- axis: AxisInteractionData;
71
- } | undefined) => AxisInteractionData;
70
+ pointer: import("./useChartInteraction.types").Coordinate | null;
71
+ } | undefined) => import("./useChartInteraction.types").Coordinate | null;
72
72
  memoizedResultFunc: ((resultFuncArgs_0: {
73
73
  item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
74
- axis: AxisInteractionData;
75
- } | undefined) => AxisInteractionData) & {
74
+ pointer: import("./useChartInteraction.types").Coordinate | null;
75
+ } | undefined) => import("./useChartInteraction.types").Coordinate | null) & {
76
76
  clearCache: () => void;
77
77
  resultsCount: () => number;
78
78
  resetResultsCount: () => void;
79
79
  };
80
- lastResult: () => AxisInteractionData;
80
+ lastResult: () => import("./useChartInteraction.types").Coordinate | null;
81
81
  dependencies: [ChartOptionalRootSelector<UseChartInteractionSignature>];
82
82
  recomputations: () => number;
83
83
  resetRecomputations: () => void;
@@ -87,52 +87,40 @@ export declare const selectorChartsInteractionAxis: ((state: import("../../coreP
87
87
  memoize: typeof import("reselect").weakMapMemoize;
88
88
  argsMemoize: typeof import("reselect").weakMapMemoize;
89
89
  };
90
- export declare const selectorChartsInteractionXAxis: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartInteraction.types").UseChartInteractionState> & {
90
+ export declare const selectorChartsInteractionPointerX: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartInteraction.types").UseChartInteractionState> & {
91
91
  cacheKey: import("../../models").ChartStateCacheKey;
92
- }) => {
93
- value: number | Date | string;
94
- index: number;
95
- } | null) & {
92
+ }) => number | null) & {
96
93
  clearCache: () => void;
97
94
  resultsCount: () => number;
98
95
  resetResultsCount: () => void;
99
96
  } & {
100
- resultFunc: (resultFuncArgs_0: AxisInteractionData) => {
101
- value: number | Date | string;
102
- index: number;
103
- } | null;
104
- memoizedResultFunc: ((resultFuncArgs_0: AxisInteractionData) => {
105
- value: number | Date | string;
106
- index: number;
107
- } | null) & {
97
+ resultFunc: (resultFuncArgs_0: import("./useChartInteraction.types").Coordinate | null) => number | null;
98
+ memoizedResultFunc: ((resultFuncArgs_0: import("./useChartInteraction.types").Coordinate | null) => number | null) & {
108
99
  clearCache: () => void;
109
100
  resultsCount: () => number;
110
101
  resetResultsCount: () => void;
111
102
  };
112
- lastResult: () => {
113
- value: number | Date | string;
114
- index: number;
115
- } | null;
103
+ lastResult: () => number | null;
116
104
  dependencies: [((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartInteraction.types").UseChartInteractionState> & {
117
105
  cacheKey: import("../../models").ChartStateCacheKey;
118
- }) => AxisInteractionData) & {
106
+ }) => import("./useChartInteraction.types").Coordinate | null) & {
119
107
  clearCache: () => void;
120
108
  resultsCount: () => number;
121
109
  resetResultsCount: () => void;
122
110
  } & {
123
111
  resultFunc: (resultFuncArgs_0: {
124
112
  item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
125
- axis: AxisInteractionData;
126
- } | undefined) => AxisInteractionData;
113
+ pointer: import("./useChartInteraction.types").Coordinate | null;
114
+ } | undefined) => import("./useChartInteraction.types").Coordinate | null;
127
115
  memoizedResultFunc: ((resultFuncArgs_0: {
128
116
  item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
129
- axis: AxisInteractionData;
130
- } | undefined) => AxisInteractionData) & {
117
+ pointer: import("./useChartInteraction.types").Coordinate | null;
118
+ } | undefined) => import("./useChartInteraction.types").Coordinate | null) & {
131
119
  clearCache: () => void;
132
120
  resultsCount: () => number;
133
121
  resetResultsCount: () => void;
134
122
  };
135
- lastResult: () => AxisInteractionData;
123
+ lastResult: () => import("./useChartInteraction.types").Coordinate | null;
136
124
  dependencies: [ChartOptionalRootSelector<UseChartInteractionSignature>];
137
125
  recomputations: () => number;
138
126
  resetRecomputations: () => void;
@@ -150,52 +138,40 @@ export declare const selectorChartsInteractionXAxis: ((state: import("../../core
150
138
  memoize: typeof import("reselect").weakMapMemoize;
151
139
  argsMemoize: typeof import("reselect").weakMapMemoize;
152
140
  };
153
- export declare const selectorChartsInteractionYAxis: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartInteraction.types").UseChartInteractionState> & {
141
+ export declare const selectorChartsInteractionPointerY: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartInteraction.types").UseChartInteractionState> & {
154
142
  cacheKey: import("../../models").ChartStateCacheKey;
155
- }) => {
156
- value: number | Date | string;
157
- index: number;
158
- } | null) & {
143
+ }) => number | null) & {
159
144
  clearCache: () => void;
160
145
  resultsCount: () => number;
161
146
  resetResultsCount: () => void;
162
147
  } & {
163
- resultFunc: (resultFuncArgs_0: AxisInteractionData) => {
164
- value: number | Date | string;
165
- index: number;
166
- } | null;
167
- memoizedResultFunc: ((resultFuncArgs_0: AxisInteractionData) => {
168
- value: number | Date | string;
169
- index: number;
170
- } | null) & {
148
+ resultFunc: (resultFuncArgs_0: import("./useChartInteraction.types").Coordinate | null) => number | null;
149
+ memoizedResultFunc: ((resultFuncArgs_0: import("./useChartInteraction.types").Coordinate | null) => number | null) & {
171
150
  clearCache: () => void;
172
151
  resultsCount: () => number;
173
152
  resetResultsCount: () => void;
174
153
  };
175
- lastResult: () => {
176
- value: number | Date | string;
177
- index: number;
178
- } | null;
154
+ lastResult: () => number | null;
179
155
  dependencies: [((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartInteraction.types").UseChartInteractionState> & {
180
156
  cacheKey: import("../../models").ChartStateCacheKey;
181
- }) => AxisInteractionData) & {
157
+ }) => import("./useChartInteraction.types").Coordinate | null) & {
182
158
  clearCache: () => void;
183
159
  resultsCount: () => number;
184
160
  resetResultsCount: () => void;
185
161
  } & {
186
162
  resultFunc: (resultFuncArgs_0: {
187
163
  item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
188
- axis: AxisInteractionData;
189
- } | undefined) => AxisInteractionData;
164
+ pointer: import("./useChartInteraction.types").Coordinate | null;
165
+ } | undefined) => import("./useChartInteraction.types").Coordinate | null;
190
166
  memoizedResultFunc: ((resultFuncArgs_0: {
191
167
  item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
192
- axis: AxisInteractionData;
193
- } | undefined) => AxisInteractionData) & {
168
+ pointer: import("./useChartInteraction.types").Coordinate | null;
169
+ } | undefined) => import("./useChartInteraction.types").Coordinate | null) & {
194
170
  clearCache: () => void;
195
171
  resultsCount: () => number;
196
172
  resetResultsCount: () => void;
197
173
  };
198
- lastResult: () => AxisInteractionData;
174
+ lastResult: () => import("./useChartInteraction.types").Coordinate | null;
199
175
  dependencies: [ChartOptionalRootSelector<UseChartInteractionSignature>];
200
176
  recomputations: () => number;
201
177
  resetRecomputations: () => void;
@@ -236,11 +212,11 @@ export declare const selectorChartsInteractionItemIsDefined: ((state: import("..
236
212
  } & {
237
213
  resultFunc: (resultFuncArgs_0: {
238
214
  item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
239
- axis: AxisInteractionData;
215
+ pointer: import("./useChartInteraction.types").Coordinate | null;
240
216
  } | undefined) => import("../../../..").ScatterItemIdentifier | import("../../../..").LineItemIdentifier | import("../../../..").BarItemIdentifier | import("../../../..").PieItemIdentifier | import("../../../..").RadarItemIdentifier | null;
241
217
  memoizedResultFunc: ((resultFuncArgs_0: {
242
218
  item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
243
- axis: AxisInteractionData;
219
+ pointer: import("./useChartInteraction.types").Coordinate | null;
244
220
  } | undefined) => import("../../../..").ScatterItemIdentifier | import("../../../..").LineItemIdentifier | import("../../../..").BarItemIdentifier | import("../../../..").PieItemIdentifier | import("../../../..").RadarItemIdentifier | null) & {
245
221
  clearCache: () => void;
246
222
  resultsCount: () => number;
@@ -263,186 +239,4 @@ export declare const selectorChartsInteractionItemIsDefined: ((state: import("..
263
239
  } & {
264
240
  memoize: typeof import("reselect").weakMapMemoize;
265
241
  argsMemoize: typeof import("reselect").weakMapMemoize;
266
- };
267
- export declare const selectorChartsInteractionXAxisIsDefined: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartInteraction.types").UseChartInteractionState> & {
268
- cacheKey: import("../../models").ChartStateCacheKey;
269
- }) => boolean) & {
270
- clearCache: () => void;
271
- resultsCount: () => number;
272
- resetResultsCount: () => void;
273
- } & {
274
- resultFunc: (resultFuncArgs_0: {
275
- value: number | Date | string;
276
- index: number;
277
- } | null) => boolean;
278
- memoizedResultFunc: ((resultFuncArgs_0: {
279
- value: number | Date | string;
280
- index: number;
281
- } | null) => boolean) & {
282
- clearCache: () => void;
283
- resultsCount: () => number;
284
- resetResultsCount: () => void;
285
- };
286
- lastResult: () => boolean;
287
- dependencies: [((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartInteraction.types").UseChartInteractionState> & {
288
- cacheKey: import("../../models").ChartStateCacheKey;
289
- }) => {
290
- value: number | Date | string;
291
- index: number;
292
- } | null) & {
293
- clearCache: () => void;
294
- resultsCount: () => number;
295
- resetResultsCount: () => void;
296
- } & {
297
- resultFunc: (resultFuncArgs_0: AxisInteractionData) => {
298
- value: number | Date | string;
299
- index: number;
300
- } | null;
301
- memoizedResultFunc: ((resultFuncArgs_0: AxisInteractionData) => {
302
- value: number | Date | string;
303
- index: number;
304
- } | null) & {
305
- clearCache: () => void;
306
- resultsCount: () => number;
307
- resetResultsCount: () => void;
308
- };
309
- lastResult: () => {
310
- value: number | Date | string;
311
- index: number;
312
- } | null;
313
- dependencies: [((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartInteraction.types").UseChartInteractionState> & {
314
- cacheKey: import("../../models").ChartStateCacheKey;
315
- }) => AxisInteractionData) & {
316
- clearCache: () => void;
317
- resultsCount: () => number;
318
- resetResultsCount: () => void;
319
- } & {
320
- resultFunc: (resultFuncArgs_0: {
321
- item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
322
- axis: AxisInteractionData;
323
- } | undefined) => AxisInteractionData;
324
- memoizedResultFunc: ((resultFuncArgs_0: {
325
- item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
326
- axis: AxisInteractionData;
327
- } | undefined) => AxisInteractionData) & {
328
- clearCache: () => void;
329
- resultsCount: () => number;
330
- resetResultsCount: () => void;
331
- };
332
- lastResult: () => AxisInteractionData;
333
- dependencies: [ChartOptionalRootSelector<UseChartInteractionSignature>];
334
- recomputations: () => number;
335
- resetRecomputations: () => void;
336
- dependencyRecomputations: () => number;
337
- resetDependencyRecomputations: () => void;
338
- } & {
339
- memoize: typeof import("reselect").weakMapMemoize;
340
- argsMemoize: typeof import("reselect").weakMapMemoize;
341
- }];
342
- recomputations: () => number;
343
- resetRecomputations: () => void;
344
- dependencyRecomputations: () => number;
345
- resetDependencyRecomputations: () => void;
346
- } & {
347
- memoize: typeof import("reselect").weakMapMemoize;
348
- argsMemoize: typeof import("reselect").weakMapMemoize;
349
- }];
350
- recomputations: () => number;
351
- resetRecomputations: () => void;
352
- dependencyRecomputations: () => number;
353
- resetDependencyRecomputations: () => void;
354
- } & {
355
- memoize: typeof import("reselect").weakMapMemoize;
356
- argsMemoize: typeof import("reselect").weakMapMemoize;
357
- };
358
- export declare const selectorChartsInteractionYAxisIsDefined: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartInteraction.types").UseChartInteractionState> & {
359
- cacheKey: import("../../models").ChartStateCacheKey;
360
- }) => boolean) & {
361
- clearCache: () => void;
362
- resultsCount: () => number;
363
- resetResultsCount: () => void;
364
- } & {
365
- resultFunc: (resultFuncArgs_0: {
366
- value: number | Date | string;
367
- index: number;
368
- } | null) => boolean;
369
- memoizedResultFunc: ((resultFuncArgs_0: {
370
- value: number | Date | string;
371
- index: number;
372
- } | null) => boolean) & {
373
- clearCache: () => void;
374
- resultsCount: () => number;
375
- resetResultsCount: () => void;
376
- };
377
- lastResult: () => boolean;
378
- dependencies: [((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartInteraction.types").UseChartInteractionState> & {
379
- cacheKey: import("../../models").ChartStateCacheKey;
380
- }) => {
381
- value: number | Date | string;
382
- index: number;
383
- } | null) & {
384
- clearCache: () => void;
385
- resultsCount: () => number;
386
- resetResultsCount: () => void;
387
- } & {
388
- resultFunc: (resultFuncArgs_0: AxisInteractionData) => {
389
- value: number | Date | string;
390
- index: number;
391
- } | null;
392
- memoizedResultFunc: ((resultFuncArgs_0: AxisInteractionData) => {
393
- value: number | Date | string;
394
- index: number;
395
- } | null) & {
396
- clearCache: () => void;
397
- resultsCount: () => number;
398
- resetResultsCount: () => void;
399
- };
400
- lastResult: () => {
401
- value: number | Date | string;
402
- index: number;
403
- } | null;
404
- dependencies: [((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartInteraction.types").UseChartInteractionState> & {
405
- cacheKey: import("../../models").ChartStateCacheKey;
406
- }) => AxisInteractionData) & {
407
- clearCache: () => void;
408
- resultsCount: () => number;
409
- resetResultsCount: () => void;
410
- } & {
411
- resultFunc: (resultFuncArgs_0: {
412
- item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
413
- axis: AxisInteractionData;
414
- } | undefined) => AxisInteractionData;
415
- memoizedResultFunc: ((resultFuncArgs_0: {
416
- item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
417
- axis: AxisInteractionData;
418
- } | undefined) => AxisInteractionData) & {
419
- clearCache: () => void;
420
- resultsCount: () => number;
421
- resetResultsCount: () => void;
422
- };
423
- lastResult: () => AxisInteractionData;
424
- dependencies: [ChartOptionalRootSelector<UseChartInteractionSignature>];
425
- recomputations: () => number;
426
- resetRecomputations: () => void;
427
- dependencyRecomputations: () => number;
428
- resetDependencyRecomputations: () => void;
429
- } & {
430
- memoize: typeof import("reselect").weakMapMemoize;
431
- argsMemoize: typeof import("reselect").weakMapMemoize;
432
- }];
433
- recomputations: () => number;
434
- resetRecomputations: () => void;
435
- dependencyRecomputations: () => number;
436
- resetDependencyRecomputations: () => void;
437
- } & {
438
- memoize: typeof import("reselect").weakMapMemoize;
439
- argsMemoize: typeof import("reselect").weakMapMemoize;
440
- }];
441
- recomputations: () => number;
442
- resetRecomputations: () => void;
443
- dependencyRecomputations: () => number;
444
- resetDependencyRecomputations: () => void;
445
- } & {
446
- memoize: typeof import("reselect").weakMapMemoize;
447
- argsMemoize: typeof import("reselect").weakMapMemoize;
448
242
  };
@@ -1,14 +1,8 @@
1
1
  import { createSelector } from "../../utils/selectors.js";
2
- const EMPTY_AXIS_INTERACTION = {
3
- x: null,
4
- y: null
5
- };
6
2
  const selectInteraction = state => state.interaction;
7
3
  export const selectorChartsInteractionIsInitialized = createSelector(selectInteraction, interaction => interaction !== undefined);
8
4
  export const selectorChartsInteractionItem = createSelector(selectInteraction, interaction => interaction?.item ?? null);
9
- export const selectorChartsInteractionAxis = createSelector(selectInteraction, interaction => interaction?.axis ?? EMPTY_AXIS_INTERACTION);
10
- export const selectorChartsInteractionXAxis = createSelector(selectorChartsInteractionAxis, axis => axis.x);
11
- export const selectorChartsInteractionYAxis = createSelector(selectorChartsInteractionAxis, axis => axis.y);
12
- export const selectorChartsInteractionItemIsDefined = createSelector(selectorChartsInteractionItem, item => item !== null);
13
- export const selectorChartsInteractionXAxisIsDefined = createSelector(selectorChartsInteractionXAxis, x => x !== null);
14
- export const selectorChartsInteractionYAxisIsDefined = createSelector(selectorChartsInteractionYAxis, y => y !== null);
5
+ export const selectorChartsInteractionPointer = createSelector(selectInteraction, interaction => interaction?.pointer ?? null);
6
+ export const selectorChartsInteractionPointerX = createSelector(selectorChartsInteractionPointer, pointer => pointer && pointer.x);
7
+ export const selectorChartsInteractionPointerY = createSelector(selectorChartsInteractionPointer, pointer => pointer && pointer.y);
8
+ export const selectorChartsInteractionItemIsDefined = createSelector(selectorChartsInteractionItem, item => item !== null);
@@ -1,5 +1,9 @@
1
1
  import { ChartPluginSignature } from "../../models/index.js";
2
2
  import { ChartItemIdentifier, ChartSeriesType } from "../../../../models/seriesType/config.js";
3
+ export type Coordinate = {
4
+ x: number;
5
+ y: number;
6
+ };
3
7
  export interface UseChartInteractionInstance {
4
8
  /**
5
9
  * Remove all interaction.
@@ -16,21 +20,11 @@ export interface UseChartInteractionInstance {
16
20
  */
17
21
  removeItemInteraction: (itemToRemove?: ChartItemIdentifier<ChartSeriesType>) => void;
18
22
  /**
19
- * Set the new axis the user is interacting with.
20
- * @param {Partial<AxisInteractionData>} newAxis The new axis identifier.
23
+ * Set the new pointer coordinate.
24
+ * @param {Coordinate | null} newCoordinate The new pointer coordinate.
21
25
  */
22
- setAxisInteraction: (newAxis: Partial<AxisInteractionData>) => void;
26
+ setPointerCoordinate: (newCoordinate: Coordinate | null) => void;
23
27
  }
24
- export type AxisInteractionData = {
25
- x: null | {
26
- value: number | Date | string;
27
- index: number;
28
- };
29
- y: null | {
30
- value: number | Date | string;
31
- index: number;
32
- };
33
- };
34
28
  export interface UseChartInteractionState {
35
29
  interaction: {
36
30
  /**
@@ -38,9 +32,9 @@ export interface UseChartInteractionState {
38
32
  */
39
33
  item: null | ChartItemIdentifier<ChartSeriesType>;
40
34
  /**
41
- * The x- and y-axes currently interacting.
35
+ * The x/y SVG coordinate of the "main" pointer
42
36
  */
43
- axis: AxisInteractionData;
37
+ pointer: Coordinate | null;
44
38
  };
45
39
  }
46
40
  export type UseChartInteractionSignature = ChartPluginSignature<{
@@ -0,0 +1,12 @@
1
+ export declare const generateSvg2rotation: (center: {
2
+ cx: number;
3
+ cy: number;
4
+ }) => (x: number, y: number) => number;
5
+ export declare const generateSvg2polar: (center: {
6
+ cx: number;
7
+ cy: number;
8
+ }) => (x: number, y: number) => [number, number];
9
+ export declare const generatePolar2svg: (center: {
10
+ cx: number;
11
+ cy: number;
12
+ }) => (radius: number, rotation: number) => [number, number];
@@ -0,0 +1,8 @@
1
+ export const generateSvg2rotation = center => (x, y) => Math.atan2(x - center.cx, center.cy - y);
2
+ export const generateSvg2polar = center => (x, y) => {
3
+ const angle = Math.atan2(x - center.cx, center.cy - y);
4
+ return [Math.sqrt((x - center.cx) ** 2 + (center.cy - y) ** 2), angle];
5
+ };
6
+ export const generatePolar2svg = center => (radius, rotation) => {
7
+ return [center.cx + radius * Math.sin(rotation), center.cy - radius * Math.cos(rotation)];
8
+ };
@@ -1,9 +1,11 @@
1
1
  import { PolarAxisDefaultized } from "../../../../models/axis.js";
2
+ /**
3
+ * For a pointer coordinate, this function returns the value and dataIndex associated.
4
+ * Returns `-1` if the coordinate does not match a value.
5
+ */
6
+ export declare function getAxisIndex(axisConfig: PolarAxisDefaultized, pointerValue: number): number;
2
7
  /**
3
8
  * For a pointer coordinate, this function returns the value and dataIndex associated.
4
9
  * Returns `null` if the coordinate is outside of values.
5
10
  */
6
- export declare function getAxisValue(axisConfig: PolarAxisDefaultized, pointerValue: number): {
7
- index: number;
8
- value: any;
9
- } | null;
11
+ export declare function getAxisValue(axisConfig: PolarAxisDefaultized, pointerValue: number): number | null;