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

package/modern/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.js

@@ -0,0 +1,22 @@
+import { createSelector } from "../../utils/selectors.js";
+import { selectorChartsInteractionPointerX, selectorChartsInteractionPointerY } from "../useChartInteraction/useChartInteraction.selectors.js";
+import { generateSvg2rotation } from "./coordinateTransformation.js";
+import { getAxisIndex } from "./getAxisValue.js";
+import { selectorChartPolarCenter, selectorChartRotationAxis } from "./useChartPolarAxis.selectors.js";
+export const selectorChartsInteractionRotationAxisIndex = createSelector([selectorChartsInteractionPointerX, selectorChartsInteractionPointerY, selectorChartPolarCenter, selectorChartRotationAxis], (x, y, center, rotationAxis) => {
+  if (x === null || y === null || !rotationAxis.axis[rotationAxis.axisIds[0]]) {
+    return null;
+  }
+  const rotation = generateSvg2rotation(center)(x, y);
+  return getAxisIndex(rotationAxis.axis[rotationAxis.axisIds[0]], rotation);
+});
+export const selectorChartsInteractionRotationAxisValue = createSelector([selectorChartsInteractionPointerX, selectorChartsInteractionPointerY, selectorChartRotationAxis, selectorChartsInteractionRotationAxisIndex], (x, y, rotationAxis, rotationIndex) => {
+  if (x === null || y === null || rotationIndex === null || rotationIndex === -1) {
+    return null;
+  }
+  const data = rotationAxis.axis[rotationAxis.axisIds[0]]?.data;
+  if (!data) {
+    return null;
+  }
+  return data[rotationIndex];
+});

package/modern/internals/plugins/models/seriesConfig/seriesConfig.types.d.ts

@@ -3,7 +3,7 @@ import type { CartesianChartSeriesType, ChartSeriesType, PolarChartSeriesType }
 import type { ColorProcessor } from './colorProcessor.types';
 import type { CartesianExtremumGetter } from './cartesianExtremumGetter.types';
 import type { LegendGetter } from './legendGetter.types';
-import type { TooltipGetter } from './tooltipGetter.types';
+import type { AxisTooltipGetter, TooltipGetter } from './tooltipGetter.types';
 import { PolarExtremumGetter } from "./polarExtremumGetter.types.js";
 import { GetSeriesWithDefaultValues } from "./getSeriesWithDefaultValues.types.js";
 export type ChartSeriesTypeConfig<TSeriesType extends ChartSeriesType> = {
@@ -15,8 +15,10 @@ export type ChartSeriesTypeConfig<TSeriesType extends ChartSeriesType> = {
 } & (TSeriesType extends CartesianChartSeriesType ? {
   xExtremumGetter: CartesianExtremumGetter<TSeriesType>;
   yExtremumGetter: CartesianExtremumGetter<TSeriesType>;
+  axisTooltipGetter?: AxisTooltipGetter<TSeriesType, 'x' | 'y'>;
 } : {}) & (TSeriesType extends PolarChartSeriesType ? {
   rotationExtremumGetter: PolarExtremumGetter<TSeriesType>;
   radiusExtremumGetter: PolarExtremumGetter<TSeriesType>;
+  axisTooltipGetter?: AxisTooltipGetter<TSeriesType, 'rotation' | 'radius'>;
 } : {});
 export type ChartSeriesConfig<TSeriesType extends ChartSeriesType> = { [Key in TSeriesType]: ChartSeriesTypeConfig<Key> };

package/modern/internals/plugins/models/seriesConfig/tooltipGetter.types.d.ts

@@ -1,7 +1,13 @@
 import type { ItemTooltip } from '../../../../ChartsTooltip';
 import type { ChartItemIdentifier, ChartSeriesDefaultized, ChartSeriesType } from '../../../../models/seriesType/config';
-export type TooltipGetter<T extends ChartSeriesType> = (params: {
-  series: ChartSeriesDefaultized<T>;
+import { SeriesId } from "../../../../models/seriesType/common.js";
+import { AxisId } from "../../../../models/axis.js";
+export type TooltipGetter<TSeriesType extends ChartSeriesType> = (params: {
+  series: ChartSeriesDefaultized<TSeriesType>;
   getColor: (dataIndex: number) => string;
-  identifier: ChartItemIdentifier<T> | null;
-}) => ItemTooltip<T> | null;
+  identifier: ChartItemIdentifier<TSeriesType> | null;
+}) => ItemTooltip<TSeriesType> | null;
+export type AxisTooltipGetter<TSeriesType extends ChartSeriesType, Directions extends 'x' | 'y' | 'rotation' | 'radius' = 'x' | 'y'> = (series: Record<SeriesId, ChartSeriesDefaultized<TSeriesType>>) => {
+  direction: Directions;
+  axisId: AxisId | undefined;
+}[];

package/modern/internals/shallowEqual.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Performs equality by iterating through keys on an object and returning false
+ * when any key has values which are not strictly equal between the arguments.
+ * Returns true when the values of all keys are strictly equal.
+ *
+ * Source: https://github.com/facebook/react/blob/c2a196174763e0b4f16ed1c512ed4442b062395e/packages/shared/shallowEqual.js#L18
+ */
+export declare function shallowEqual(objA: unknown, objB: unknown): boolean;

package/modern/internals/shallowEqual.js

@@ -0,0 +1,31 @@
+/**
+ * Performs equality by iterating through keys on an object and returning false
+ * when any key has values which are not strictly equal between the arguments.
+ * Returns true when the values of all keys are strictly equal.
+ *
+ * Source: https://github.com/facebook/react/blob/c2a196174763e0b4f16ed1c512ed4442b062395e/packages/shared/shallowEqual.js#L18
+ */
+export function shallowEqual(objA, objB) {
+  if (Object.is(objA, objB)) {
+    return true;
+  }
+  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+    return false;
+  }
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+
+  // Test for A's keys different from B.
+  for (let i = 0; i < keysA.length; i += 1) {
+    const currentKey = keysA[i];
+    if (!Object.prototype.hasOwnProperty.call(objB, currentKey) ||
+    // @ts-ignore
+    !Object.is(objA[currentKey], objB[currentKey])) {
+      return false;
+    }
+  }
+  return true;
+}

package/modern/models/axis.d.ts

@@ -335,6 +335,10 @@ type CommonAxisConfig<S extends ScaleName = ScaleName, V = any> = {
     min: number;
     max: number;
   });
+  /**
+   * If `true`, the axis will be ignored by the tooltip with `trigger='axis'`.
+   */
+  ignoreTooltip?: boolean;
 };
 export type PolarAxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsAxisProps = ChartsRotationAxisProps | ChartsRadiusAxisProps> = {
   /**
@@ -361,6 +365,10 @@ export type AxisDefaultized<S extends ScaleName = ScaleName, V = any, AxisProps
    * An indication of the expected number of ticks.
    */
   tickNumber: number;
+  /**
+   * Indicate if the axis should be consider by a tooltip with `trigger='axis'`.
+   */
+  triggerTooltip?: boolean;
 } & (AxisProps extends ChartsXAxisProps ? MakeRequired<AxisSideConfig<AxisProps>, 'height'> : AxisProps extends ChartsYAxisProps ? MakeRequired<AxisSideConfig<AxisProps>, 'width'> : AxisSideConfig<AxisProps>);
 export declare function isBandScaleConfig(scaleConfig: AxisConfig<ScaleName>): scaleConfig is AxisConfig<'band'> & {
   scaleType: 'band';

package/modern/themeAugmentation/overrides.d.ts

@@ -1,5 +1,5 @@
 import { BarLabelClassKey } from "../BarChart/index.js";
-import { BarElementClassKey } from "../BarChart/BarElement.js";
+import { BarElementClassKey } from "../BarChart/barElementClasses.js";
 import { ChartsAxisHighlightClassKey } from "../ChartsAxisHighlight/index.js";
 import { ChartsGridClassKey } from "../ChartsGrid/index.js";
 import { ChartsTooltipClassKey } from "../ChartsTooltip/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "8.0.0-beta.1",
+  "version": "8.0.0-beta.3",
   "description": "The community edition of the Charts components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -29,23 +29,22 @@
     "directory": "packages/x-charts"
   },
   "dependencies": {
-    "@babel/runtime": "^7.26.10",
-    "@mui/utils": "^7.0.0 || ^7.0.0-beta",
-    "@react-spring/rafz": "^9.7.5",
-    "@react-spring/web": "^9.7.5",
+    "@babel/runtime": "^7.27.0",
+    "@mui/utils": "^7.0.0",
+    "bezier-easing": "^2.1.0",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-is": "^18.3.1 || ^19.0.0",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.4.0",
-    "@mui/x-internals": "8.0.0-beta.0",
-    "@mui/x-charts-vendor": "8.0.0-beta.1"
+    "@mui/x-charts-vendor": "8.0.0-beta.3",
+    "@mui/x-internals": "8.0.0-beta.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0 || ^7.0.0-beta",
-    "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0 || ^7.0.0-beta",
+    "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
+    "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },

package/themeAugmentation/overrides.d.ts

@@ -1,5 +1,5 @@
 import { BarLabelClassKey } from "../BarChart/index.js";
-import { BarElementClassKey } from "../BarChart/BarElement.js";
+import { BarElementClassKey } from "../BarChart/barElementClasses.js";
 import { ChartsAxisHighlightClassKey } from "../ChartsAxisHighlight/index.js";
 import { ChartsGridClassKey } from "../ChartsGrid/index.js";
 import { ChartsTooltipClassKey } from "../ChartsTooltip/index.js";