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

package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors.js

@@ -2,40 +2,74 @@ import { createSelector } from "../../utils/selectors.js";
 import { selectorChartsInteractionPointerX, selectorChartsInteractionPointerY } from "../useChartInteraction/useChartInteraction.selectors.js";
 import { getAxisIndex, getAxisValue } from "./getAxisValue.js";
 import { selectorChartXAxis, selectorChartYAxis } from "./useChartCartesianAxisRendering.selectors.js";
-export const selectorChartsInteractionXAxisIndex = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis], (x, xAxes) => {
-  if (x === null || !xAxes.axis[xAxes.axisIds[0]]) {
+const optionalGetAxisId = (_, id) => id;
+const optionalGetAxisIds = (_, ids) => ids;
+
+/**
+ * Get interaction indexes
+ */
+
+function indexGetter(value, axes, ids = axes.axisIds[0]) {
+  return Array.isArray(ids) ? ids.map(id => getAxisIndex(axes.axis[id], value)) : getAxisIndex(axes.axis[ids], value);
+}
+export const selectorChartsInteractionXAxisIndex = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis, optionalGetAxisId], (value, axes, id) => value === null ? null : indexGetter(value, axes, id));
+export const selectorChartsInteractionXAxisIndexes = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis, optionalGetAxisIds], (value, axes, ids) => value === null ? null : indexGetter(value, axes, ids));
+export const selectorChartsInteractionYAxisIndex = createSelector([selectorChartsInteractionPointerY, selectorChartYAxis, optionalGetAxisId], (value, axes, id) => value === null ? null : indexGetter(value, axes, id));
+export const selectorChartsInteractionYAxisIndexes = createSelector([selectorChartsInteractionPointerY, selectorChartYAxis, optionalGetAxisIds], (value, axes, ids) => value === null ? null : indexGetter(value, axes, ids));
+
+/**
+ * Get interaction values
+ */
+
+function valueGetter(value, axes, indexes, ids = axes.axisIds[0]) {
+  return Array.isArray(ids) ? ids.map((id, axisIndex) => getAxisValue(axes.axis[id], value, indexes[axisIndex])) : getAxisValue(axes.axis[ids], value, indexes);
+}
+export const selectorChartsInteractionXAxisValues = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis, selectorChartsInteractionXAxisIndexes, optionalGetAxisIds], (value, axes, indexes, ids) => value === null ? null : valueGetter(value, axes, indexes, ids));
+export const selectorChartsInteractionXAxisValue = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis, selectorChartsInteractionXAxisIndex, optionalGetAxisId], (x, xAxes, xIndex, id) => {
+  if (x === null || xIndex === null || xAxes.axisIds.length === 0) {
     return null;
   }
-  return getAxisIndex(xAxes.axis[xAxes.axisIds[0]], x);
+  return valueGetter(x, xAxes, xIndex, id);
 });
-export const selectorChartsInteractionXAxisValue = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis, selectorChartsInteractionXAxisIndex], (x, xAxes, xIndex) => {
-  if (x === null || xIndex === null || !xAxes.axis[xAxes.axisIds[0]]) {
+export const selectorChartsInteractionYAxisValues = createSelector([selectorChartsInteractionPointerY, selectorChartYAxis, selectorChartsInteractionYAxisIndexes, optionalGetAxisIds], (value, axes, indexes, ids) => value === null ? null : valueGetter(value, axes, indexes, ids));
+export const selectorChartsInteractionYAxisValue = createSelector([selectorChartsInteractionPointerY, selectorChartYAxis, selectorChartsInteractionYAxisIndex, optionalGetAxisId], (y, yAxes, yIndex, id) => {
+  if (y === null || yIndex === null || yAxes.axisIds.length === 0) {
     return null;
   }
-  return getAxisValue(xAxes.axis[xAxes.axisIds[0]], x, xIndex);
+  return valueGetter(y, yAxes, yIndex, id);
 });
-export const selectorChartsInteractionYAxisIndex = createSelector([selectorChartsInteractionPointerY, selectorChartYAxis], (y, yAxes) => {
-  if (y === null || !yAxes.axis[yAxes.axisIds[0]]) {
-    return null;
+
+/**
+ * Get x-axis ids and corresponding data index that should be display in the tooltip.
+ */
+export const selectorChartsInteractionTooltipXAxes = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis], (value, axes) => {
+  if (value === null) {
+    return [];
   }
-  return getAxisIndex(yAxes.axis[yAxes.axisIds[0]], y);
+  return axes.axisIds.filter(id => axes.axis[id].triggerTooltip).map(axisId => ({
+    axisId,
+    dataIndex: getAxisIndex(axes.axis[axisId], value)
+  })).filter(({
+    dataIndex
+  }) => dataIndex >= 0);
 });
-export const selectorChartsInteractionYAxisValue = createSelector([selectorChartsInteractionPointerY, selectorChartYAxis, selectorChartsInteractionYAxisIndex], (y, yAxes, yIndex) => {
-  if (y === null || yIndex === null || !yAxes.axis[yAxes.axisIds[0]]) {
-    return null;
+
+/**
+ * Get y-axis ids and corresponding data index that should be display in the tooltip.
+ */
+export const selectorChartsInteractionTooltipYAxes = createSelector([selectorChartsInteractionPointerY, selectorChartYAxis], (value, axes) => {
+  if (value === null) {
+    return [];
   }
-  return getAxisValue(yAxes.axis[yAxes.axisIds[0]], y, yIndex);
-});
-// TODO: probably remove in favor of the two more specific.
-export const selectorChartsInteractionXAxis = createSelector([selectorChartsInteractionXAxisIndex, selectorChartsInteractionXAxisValue], (index, value) => index === null || value === null ? null : {
-  index,
-  value
-});
-export const selectorChartsInteractionYAxis = createSelector([selectorChartsInteractionYAxisIndex, selectorChartsInteractionYAxisValue], (index, value) => index === null || value === null ? null : {
-  index,
-  value
+  return axes.axisIds.filter(id => axes.axis[id].triggerTooltip).map(axisId => ({
+    axisId,
+    dataIndex: getAxisIndex(axes.axis[axisId], value)
+  })).filter(({
+    dataIndex
+  }) => dataIndex >= 0);
 });
 
-// TODO: probably remove in favor of the two more specific.
-export const selectorChartsInteractionXAxisIsDefined = createSelector([selectorChartsInteractionXAxisIndex], index => index !== null && index >= 0);
-export const selectorChartsInteractionYAxisIsDefined = createSelector([selectorChartsInteractionYAxisIndex], index => index !== null && index >= 0);
+/**
+ * Return `true` if the axis tooltip has something to display.
+ */
+export const selectorChartsInteractionAxisTooltip = createSelector([selectorChartsInteractionTooltipXAxes, selectorChartsInteractionTooltipYAxes], (xTooltip, yTooltip) => xTooltip.length > 0 || yTooltip.length > 0);

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.2",
+  "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.2",
-    "@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";