@mui/x-charts 8.6.0 → 8.8.0

package/internals/plugins/featurePlugins/useChartVoronoi/useChartVoronoi.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
@@ -138,12 +139,28 @@ const useChartVoronoi = ({
         dataIndex
       };
     }
-    const handleMouseLeave = () => {
-      instance.cleanInteraction?.();
-      instance.clearHighlight?.();
-    };
-    const handleMouseMove = event => {
-      const closestPoint = getClosestPoint(event);
+
+    // Clean the interaction when the mouse leaves the chart.
+    const moveEndHandler = instance.addInteractionListener('moveEnd', event => {
+      if (!event.detail.activeGestures.pan) {
+        instance.cleanInteraction?.();
+        instance.clearHighlight?.();
+      }
+    });
+    const panEndHandler = instance.addInteractionListener('panEnd', event => {
+      if (!event.detail.activeGestures.move) {
+        instance.cleanInteraction?.();
+        instance.clearHighlight?.();
+      }
+    });
+    const pressEndHandler = instance.addInteractionListener('quickPressEnd', event => {
+      if (!event.detail.activeGestures.move && !event.detail.activeGestures.pan) {
+        instance.cleanInteraction?.();
+        instance.clearHighlight?.();
+      }
+    });
+    const gestureHandler = event => {
+      const closestPoint = getClosestPoint(event.detail.srcEvent);
       if (closestPoint === 'outside-chart') {
         instance.cleanInteraction?.();
         instance.clearHighlight?.();
@@ -168,32 +185,31 @@ const useChartVoronoi = ({
         dataIndex
       });
     };
-    const handleMouseClick = event => {
-      if (!onItemClick) {
-        return;
-      }
-      const closestPoint = getClosestPoint(event);
-      if (typeof closestPoint === 'string') {
-        // No point fond for any reason
-        return;
+    const tapHandler = instance.addInteractionListener('tap', event => {
+      const closestPoint = getClosestPoint(event.detail.srcEvent);
+      if (typeof closestPoint !== 'string' && onItemClick) {
+        const {
+          seriesId,
+          dataIndex
+        } = closestPoint;
+        onItemClick(event.detail.srcEvent, {
+          type: 'scatter',
+          seriesId,
+          dataIndex
+        });
       }
-      const {
-        seriesId,
-        dataIndex
-      } = closestPoint;
-      onItemClick(event, {
-        type: 'scatter',
-        seriesId,
-        dataIndex
-      });
-    };
-    element.addEventListener('pointerleave', handleMouseLeave);
-    element.addEventListener('pointermove', handleMouseMove);
-    element.addEventListener('click', handleMouseClick);
+    });
+    const moveHandler = instance.addInteractionListener('move', gestureHandler);
+    const panHandler = instance.addInteractionListener('pan', gestureHandler);
+    const pressHandler = instance.addInteractionListener('quickPress', gestureHandler);
     return () => {
-      element.removeEventListener('pointerleave', handleMouseLeave);
-      element.removeEventListener('pointermove', handleMouseMove);
-      element.removeEventListener('click', handleMouseClick);
+      tapHandler.cleanup();
+      moveHandler.cleanup();
+      moveEndHandler.cleanup();
+      panHandler.cleanup();
+      panEndHandler.cleanup();
+      pressHandler.cleanup();
+      pressEndHandler.cleanup();
     };
   }, [svgRef, yAxis, xAxis, voronoiMaxRadius, onItemClick, disableVoronoi, drawingArea, instance]);
 

package/internals/plugins/featurePlugins/useChartVoronoi/useChartVoronoi.selectors.d.ts

@@ -1,4 +1,4 @@
-export declare const selectorChartsVoronoiIsVoronoiEnabled: import("reselect").Selector<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 & import("./useChartVoronoi.types.js").UseChartVoronoiState & Partial<{}> & {
+export declare const selectorChartsVoronoiIsVoronoiEnabled: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & 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 & import("../../../index.js").UseChartInteractionListenerState & import("./useChartVoronoi.types.js").UseChartVoronoiState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;

package/internals/plugins/featurePlugins/useChartZAxis/useChartZAxis.selectors.d.ts

@@ -1,4 +1,4 @@
-export declare const selectorChartZAxis: import("reselect").Selector<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 & import("./useChartZAxis.types.js").UseChartZAxisState & Partial<{}> & {
+export declare const selectorChartZAxis: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & 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 & import("../../../index.js").UseChartInteractionListenerState & import("./useChartZAxis.types.js").UseChartZAxisState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;

package/internals/plugins/utils/useLazySelectorEffect.d.ts

@@ -0,0 +1,7 @@
+import type { ChartStore } from "./ChartStore.js";
+import { ChartAnyPluginSignature, ChartState } from "../models/index.js";
+export declare function useLazySelectorEffect<TSignatures extends readonly ChartAnyPluginSignature[], Value>(store: ChartStore<TSignatures>, selector: (state: ChartState<TSignatures>) => Value, effect: (previous: Value, next: Value) => void,
+/**
+ * If true, the selector will be ignored.
+ */
+skip?: boolean): void;

package/internals/plugins/utils/useLazySelectorEffect.js

@@ -0,0 +1,77 @@
+"use strict";
+'use client';
+
+/* eslint-disable react-compiler/react-compiler */
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLazySelectorEffect = useLazySelectorEffect;
+var React = _interopRequireWildcard(require("react"));
+var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
+const noop = () => {};
+function useLazySelectorEffect(store, selector, effect,
+/**
+ * If true, the selector will be ignored.
+ */
+skip) {
+  const instance = (0, _useLazyRef.default)(initialize, {
+    store,
+    selector,
+    skip
+  }).current;
+  instance.effect = effect;
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  React.useEffect(instance.onMount(skip), [skip]);
+}
+
+// `useLazyRef` typings are incorrect, `params` should not be optional
+function initialize(params) {
+  const {
+    store,
+    selector,
+    skip: initialSkip
+  } = params;
+  let isRunning = false;
+  let previousState;
+
+  // We want a single subscription done right away and cleared on unmount only,
+  // but React triggers `useOnMount` multiple times in dev, so we need to manage
+  // the subscription anyway.
+  const subscribe = () => {
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    instance.dispose ?? (instance.dispose = store.subscribe(state => {
+      const nextState = selector(state);
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      instance.effect(previousState, nextState);
+      previousState = nextState;
+    }));
+  };
+  const instance = {
+    effect: noop,
+    dispose: null,
+    onMount: skip => () => {
+      if (skip) {
+        return undefined;
+      }
+      if (!isRunning) {
+        // Initialize values
+        isRunning = true;
+        previousState = selector(store.value);
+      }
+      subscribe();
+      return () => {
+        instance.dispose?.();
+        instance.dispose = null;
+      };
+    }
+  };
+  if (!initialSkip) {
+    // Initialize values
+    isRunning = true;
+    previousState = selector(store.value);
+    subscribe();
+  }
+  return instance;
+}

package/internals/store/useCharts.d.ts

@@ -16,7 +16,7 @@ import { ChartSeriesConfig } from "../plugins/models/seriesConfig/index.js";
  */
 export declare function useCharts<TSeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]>(inPlugins: ConvertSignaturesIntoPlugins<TSignatures>, props: Partial<UseChartBaseProps<TSignatures>>, seriesConfig: ChartSeriesConfig<TSeriesType>): {
   contextValue: {
-    store: ChartStore<readonly [import("../index.js").UseChartIdSignature, import("../index.js").UseChartDimensionsSignature, import("../index.js").UseChartSeriesSignature, import("../plugins/corePlugins/useChartAnimation/index.js").UseChartAnimationSignature, ...TSignatures]> & UseChartInteractionState;
+    store: ChartStore<readonly [import("../index.js").UseChartIdSignature, import("../plugins/corePlugins/useChartExperimentalFeature/index.js").UseChartExperimentalFeaturesSignature, import("../index.js").UseChartDimensionsSignature, import("../index.js").UseChartSeriesSignature, import("../plugins/corePlugins/useChartAnimation/index.js").UseChartAnimationSignature, import("../index.js").UseChartInteractionListenerSignature, ...TSignatures]> & UseChartInteractionState;
     publicAPI: ChartPublicAPI<TSignatures>;
     instance: ChartInstance<TSignatures>;
     svgRef: React.RefObject<SVGSVGElement | null>;

package/locales/elGR.d.ts

@@ -0,0 +1,19 @@
+import { ChartsLocaleText } from "./utils/chartsLocaleTextApi.js";
+export declare const elGRLocaleText: Partial<ChartsLocaleText>;
+export declare const elGR: {
+  components: {
+    MuiChartsLocalizationProvider: {
+      defaultProps: {
+        localeText: {
+          loading?: string | undefined;
+          noData?: string | undefined;
+          zoomIn?: string | undefined;
+          zoomOut?: string | undefined;
+          toolbarExport?: string | undefined;
+          toolbarExportPrint?: string | undefined;
+          toolbarExportImage?: ((mimeType: import("./utils/imageMimeTypes.js").ChartImageExportMimeType | (string & {})) => string) | undefined;
+        };
+      };
+    };
+  };
+};

package/locales/elGR.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.elGRLocaleText = exports.elGR = void 0;
+var _imageMimeTypes = require("./utils/imageMimeTypes");
+var _getChartsLocalization = require("./utils/getChartsLocalization");
+const elGRLocaleText = exports.elGRLocaleText = {
+  // Overlay
+  loading: 'Φόρτωση δεδομένων…',
+  noData: 'Δεν υπάρχουν δεδομένα για εμφάνιση',
+  // Toolbar
+  zoomIn: 'Μεγέθυνση',
+  zoomOut: 'Σμίκρυνση',
+  toolbarExport: 'Εξαγωγή',
+  // Toolbar Export Menu
+  toolbarExportPrint: 'Εκτύπωση',
+  toolbarExportImage: mimeType => `Εξαγωγή ως ${_imageMimeTypes.imageMimeTypes[mimeType] ?? mimeType}`
+};
+const elGR = exports.elGR = (0, _getChartsLocalization.getChartsLocalization)(elGRLocaleText);

package/locales/index.d.ts

@@ -1,4 +1,5 @@
 export type { ChartsLocaleText } from "./utils/chartsLocaleTextApi.js";
+export * from "./elGR.js";
 export * from "./enUS.js";
 export * from "./frFR.js";
 export * from "./ptBR.js";

package/locales/index.js

@@ -3,6 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _elGR = require("./elGR");
+Object.keys(_elGR).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _elGR[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _elGR[key];
+    }
+  });
+});
 var _enUS = require("./enUS");
 Object.keys(_enUS).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/models/axis.d.ts

@@ -408,6 +408,21 @@ export interface ChartsAxisData {
    */
   seriesValues: Record<string, number | null | undefined>;
 }
+export type CartesianDirection = 'x' | 'y';
+export type PolarDirection = 'rotation' | 'radius';
+/**
+ * Identifies a data point within an axis.
+ */
+export interface AxisItemIdentifier {
+  /**
+   * The axis id.
+   */
+  axisId: AxisId;
+  /**
+   * The data index.
+   */
+  dataIndex: number;
+}
 export type XAxis<S extends ScaleName = ScaleName, V = any> = S extends ScaleName ? MakeOptional<AxisConfig<S, V, ChartsXAxisProps>, 'id'> : never;
 export type YAxis<S extends ScaleName = ScaleName, V = any> = S extends ScaleName ? MakeOptional<AxisConfig<S, V, ChartsYAxisProps>, 'id'> : never;
 export type RotationAxis<S extends ScaleName = ScaleName, V = any> = S extends ScaleName ? AxisConfig<S, V, ChartsRotationAxisProps> : never;

package/models/axis.js

@@ -29,6 +29,10 @@ function isPointScaleConfig(scaleConfig) {
  * The data format returned by onAxisClick.
  */
 
+/**
+ * Identifies a data point within an axis.
+ */
+
 /**
  * The axis configuration with missing values filled with default values.
  */

package/models/index.d.ts

@@ -1,7 +1,7 @@
 export * from "./seriesType/index.js";
 export * from "./stacking.js";
 export * from "./slots/index.js";
-export type { AxisConfig, ChartsYAxisProps, ChartsXAxisProps, ScaleName, ContinuousScaleName, ChartsAxisData, XAxis, YAxis, RadiusAxis, RotationAxis, AxisValueFormatterContext } from "./axis.js";
+export type { AxisConfig, ChartsYAxisProps, ChartsXAxisProps, ScaleName, ContinuousScaleName, ChartsAxisData, XAxis, YAxis, RadiusAxis, RotationAxis, AxisItemIdentifier, AxisValueFormatterContext } from "./axis.js";
 export type { PropsFromSlot } from '@mui/x-internals/slots';
 export type { Position } from "./position.js";
 export type { CurveType } from "./curve.js";

package/models/seriesType/scatter.d.ts

@@ -1,4 +1,4 @@
-import { DefaultizedProps } from '@mui/x-internals/types';
+import { DefaultizedProps, MakeRequired } from '@mui/x-internals/types';
 import { CartesianSeriesType, CommonDefaultizedProps, CommonSeriesType, SeriesId } from "./common.js";
 export type ScatterValueType = {
   x: number;
@@ -50,6 +50,13 @@ export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType | n
      */
     id?: string;
   };
+  preview?: {
+    /**
+     * The size of the preview marker.
+     * @default 1
+     */
+    markerSize?: number;
+  };
 }
 /**
  * An object that allows to identify a single scatter item.
@@ -60,4 +67,6 @@ export type ScatterItemIdentifier = {
   seriesId: SeriesId;
   dataIndex: number;
 };
-export interface DefaultizedScatterSeriesType extends DefaultizedProps<ScatterSeriesType, CommonDefaultizedProps | 'color' | 'markerSize'> {}
+export interface DefaultizedScatterSeriesType extends DefaultizedProps<ScatterSeriesType, CommonDefaultizedProps | 'color' | 'markerSize'> {
+  preview: MakeRequired<NonNullable<ScatterSeriesType['preview']>, 'markerSize'>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "8.6.0",
+  "version": "8.8.0",
   "author": "MUI Team",
   "description": "The community edition of MUI X Charts components.",
   "main": "./index.js",
@@ -30,14 +30,15 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@mui/utils": "^7.1.1",
+    "@mui/utils": "^7.2.0",
     "bezier-easing": "^2.1.0",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.5.0",
     "@mui/x-charts-vendor": "8.5.3",
-    "@mui/x-internals": "8.6.0"
+    "@mui/x-internals": "8.8.0",
+    "@mui/x-internal-gestures": "0.2.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/themeAugmentation/components.d.ts

@@ -33,6 +33,9 @@ export interface ChartsComponents<Theme = unknown> {
     defaultProps?: ComponentsProps['MuiChartsSurface'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiChartsSurface'];
   };
+  MuiChartDataProvider?: {
+    defaultProps?: ComponentsProps['MuiChartDataProvider'];
+  };
   MuiBarChart?: {
     defaultProps?: ComponentsProps['MuiBarChart'];
   };

package/themeAugmentation/props.d.ts

@@ -9,6 +9,7 @@ import { ScatterChartProps } from "../ScatterChart/ScatterChart.js";
 import { PieChartProps } from "../PieChart/PieChart.js";
 import { ChartsXAxisProps, ChartsYAxisProps } from "../models/axis.js";
 import { ChartsLocalizationProviderProps } from "../ChartsLocalizationProvider/index.js";
+import { ChartDataProviderProps } from "../ChartDataProvider/index.js";
 export interface ChartsComponentsPropsList {
   MuiChartsXAxis: ChartsXAxisProps;
   MuiChartsYAxis: ChartsYAxisProps;
@@ -17,6 +18,7 @@ export interface ChartsComponentsPropsList {
   MuiChartsLocalizationProvider: ChartsLocalizationProviderProps;
   MuiChartsTooltip: ChartsTooltipProps;
   MuiChartsSurface: ChartsSurfaceProps;
+  MuiChartDataProvider: ChartDataProviderProps;
   MuiBarChart: BarChartProps;
   MuiBarLabel: BarLabelProps;
   MuiLineChart: LineChartProps;