@mui/x-charts 8.23.0 → 8.24.0

package/internals/plugins/featurePlugins/useChartVisibilityManager/useChartVisibilityManager.js

@@ -0,0 +1,85 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartVisibilityManager = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _useEffectAfterFirstRender = require("@mui/x-internals/useEffectAfterFirstRender");
+var _useChartVisibilityManager = require("./useChartVisibilityManager.selectors");
+var _visibilityParamToMap = require("./visibilityParamToMap");
+const useChartVisibilityManager = ({
+  store,
+  params,
+  seriesConfig,
+  instance
+}) => {
+  // Manage controlled state
+  (0, _useEffectAfterFirstRender.useEffectAfterFirstRender)(() => {
+    if (params.hiddenItems === undefined) {
+      return;
+    }
+    if (process.env.NODE_ENV !== 'production' && !store.state.visibilityManager.isControlled) {
+      console.error([`MUI X Charts: A chart component is changing the \`hiddenItems\` from uncontrolled to controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', 'Decide between using a controlled or uncontrolled for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
+    }
+    store.set('visibilityManager', (0, _extends2.default)({}, store.state.visibilityManager, {
+      visibilityMap: (0, _visibilityParamToMap.visibilityParamToMap)(params.hiddenItems, seriesConfig)
+    }));
+  }, [store, params.hiddenItems, seriesConfig]);
+  const hideItem = (0, _useEventCallback.default)(identifier => {
+    const visibilityMap = store.state.visibilityManager.visibilityMap;
+    const id = instance.serializeIdentifier(identifier);
+    if (visibilityMap.has(id)) {
+      return;
+    }
+    const newVisibilityMap = new Map(visibilityMap);
+    newVisibilityMap.set(id, identifier);
+    store.set('visibilityManager', (0, _extends2.default)({}, store.state.visibilityManager, {
+      visibilityMap: newVisibilityMap
+    }));
+    params.onHiddenItemsChange?.(Array.from(newVisibilityMap.values()));
+  });
+  const showItem = (0, _useEventCallback.default)(identifier => {
+    const visibilityMap = store.state.visibilityManager.visibilityMap;
+    const id = instance.serializeIdentifier(identifier);
+    if (!visibilityMap.has(id)) {
+      return;
+    }
+    const newVisibilityMap = new Map(visibilityMap);
+    newVisibilityMap.delete(id);
+    store.set('visibilityManager', (0, _extends2.default)({}, store.state.visibilityManager, {
+      visibilityMap: newVisibilityMap
+    }));
+    params.onHiddenItemsChange?.(Array.from(newVisibilityMap.values()));
+  });
+  const toggleItem = (0, _useEventCallback.default)(identifier => {
+    const visibilityMap = store.state.visibilityManager.visibilityMap;
+    const id = instance.serializeIdentifier(identifier);
+    if (visibilityMap.has(id)) {
+      showItem(identifier);
+    } else {
+      hideItem(identifier);
+    }
+  });
+  return {
+    instance: {
+      hideItem,
+      showItem,
+      toggleItemVisibility: toggleItem
+    }
+  };
+};
+exports.useChartVisibilityManager = useChartVisibilityManager;
+useChartVisibilityManager.getInitialState = (params, _, seriesConfig) => ({
+  visibilityManager: {
+    visibilityMap: params.hiddenItems ? (0, _visibilityParamToMap.visibilityParamToMap)(params.hiddenItems, seriesConfig) : _useChartVisibilityManager.EMPTY_VISIBILITY_MAP,
+    isControlled: params.hiddenItems !== undefined
+  }
+});
+useChartVisibilityManager.params = {
+  onHiddenItemsChange: true,
+  hiddenItems: true
+};

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

@@ -0,0 +1,16 @@
+import type { VisibilityIdentifier } from "./useChartVisibilityManager.types.js";
+import type { ChartSeriesConfig } from "../../models/index.js";
+import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
+export declare const EMPTY_VISIBILITY_MAP: Map<any, any>;
+/**
+ * Selector to get the hidden identifiers from the visibility manager.
+ */
+export declare const selectorVisibilityMap: (args_0: 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 & Partial<import("./useChartVisibilityManager.types.js").UseChartVisibilityManagerState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}) => Map<any, any>;
+/**
+ * Selector that returns a function which returns whether an item is visible.
+ */
+export declare const selectorIsItemVisibleGetter: (args_0: 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 & Partial<import("./useChartVisibilityManager.types.js").UseChartVisibilityManagerState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}) => (seriesConfig: ChartSeriesConfig<ChartSeriesType>, identifier: VisibilityIdentifier) => boolean;

package/internals/plugins/featurePlugins/useChartVisibilityManager/useChartVisibilityManager.selectors.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorVisibilityMap = exports.selectorIsItemVisibleGetter = exports.EMPTY_VISIBILITY_MAP = void 0;
+var _store = require("@mui/x-internals/store");
+var _isIdentifierVisible = require("./isIdentifierVisible");
+/**
+ * Selector to get the visibility manager state.
+ */
+const selectVisibilityManager = state => state.visibilityManager;
+const EMPTY_VISIBILITY_MAP = exports.EMPTY_VISIBILITY_MAP = new Map();
+
+/**
+ * Selector to get the hidden identifiers from the visibility manager.
+ */
+const selectorVisibilityMap = exports.selectorVisibilityMap = (0, _store.createSelector)(selectVisibilityManager, visibilityManager => visibilityManager?.visibilityMap ?? EMPTY_VISIBILITY_MAP);
+
+/**
+ * Selector that returns a function which returns whether an item is visible.
+ */
+const selectorIsItemVisibleGetter = exports.selectorIsItemVisibleGetter = (0, _store.createSelectorMemoized)(selectorVisibilityMap, visibilityMap => {
+  return (seriesConfig, identifier) => (0, _isIdentifierVisible.isIdentifierVisible)(visibilityMap, identifier, seriesConfig);
+});

package/internals/plugins/featurePlugins/useChartVisibilityManager/useChartVisibilityManager.types.d.ts

@@ -0,0 +1,90 @@
+import { type ChartPluginSignature } from "../../models/index.js";
+import { type UseChartSeriesSignature } from "../../corePlugins/useChartSeries/index.js";
+import { type SeriesItemIdentifier } from "../../../../models/index.js";
+import { type ChartSeriesType } from "../../../../models/seriesType/config.js";
+export type VisibilityIdentifier<T extends ChartSeriesType = ChartSeriesType> = Partial<SeriesItemIdentifier<T>> & (SeriesItemIdentifier<T> extends {
+  subType?: infer U;
+} ? {
+  type: T;
+  subType: U;
+} : {
+  type: T;
+});
+export type VisibilityMap = Map<string, VisibilityIdentifier>;
+export type IsItemVisibleFunction = {
+  /**
+   * Function to check if an item is visible based on its identifier.
+   *
+   * @param {VisibilityIdentifier} identifier The identifier of the item to check.
+   * @returns {boolean} Whether the item is visible.
+   */
+  (identifier: VisibilityIdentifier): boolean;
+};
+export interface UseChartVisibilityManagerInstance<T extends ChartSeriesType> {
+  /**
+   * Hide an item by its identifier.
+   *
+   * @param {VisibilityIdentifier} identifier The identifier of the item to hide.
+   */
+  hideItem(identifier: VisibilityIdentifier<T>): void;
+  /**
+   * Show an item by its identifier.
+   *
+   * @param {VisibilityIdentifier} identifier The identifier of the item to show.
+   */
+  showItem(identifier: VisibilityIdentifier<T>): void;
+  /**
+   * Toggle the visibility of an item by its identifier.
+   *
+   * @param {VisibilityIdentifier} identifier The identifier of the item to toggle.
+   */
+  toggleItemVisibility(identifier: VisibilityIdentifier<T>): void;
+}
+export interface UseChartVisibilityManagerParameters<T extends ChartSeriesType> {
+  /**
+   * Callback fired when any hidden identifiers change.
+   * @param {VisibilityIdentifier[]} hiddenItems The new list of hidden identifiers.
+   */
+  onHiddenItemsChange?: (hiddenItems: VisibilityIdentifier<T>[]) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   *
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: VisibilityIdentifier<T>[];
+}
+export type UseChartVisibilityManagerDefaultizedParameters<T extends ChartSeriesType> = UseChartVisibilityManagerParameters<T>;
+export interface UseChartVisibilityManagerState {
+  visibilityManager: {
+    /**
+     * Map of hidden identifiers by their serialized form.
+     */
+    visibilityMap: VisibilityMap;
+    /**
+     * Internal information to know if the user controls the state or not.
+     */
+    isControlled: boolean;
+  };
+}
+export type UseChartVisibilityManagerSignature<T extends ChartSeriesType = ChartSeriesType> = ChartPluginSignature<{
+  instance: UseChartVisibilityManagerInstance<T>;
+  state: UseChartVisibilityManagerState;
+  params: UseChartVisibilityManagerParameters<T>;
+  defaultizedParams: UseChartVisibilityManagerDefaultizedParameters<T>;
+  dependencies: [UseChartSeriesSignature];
+}>;

package/internals/plugins/featurePlugins/useChartVisibilityManager/useChartVisibilityManager.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/internals/plugins/featurePlugins/useChartVisibilityManager/visibilityParamToMap.d.ts

@@ -0,0 +1,4 @@
+import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
+import type { ChartSeriesConfig } from "../../models/index.js";
+import type { VisibilityIdentifier, VisibilityMap } from "./useChartVisibilityManager.types.js";
+export declare const visibilityParamToMap: (hiddenItems: VisibilityIdentifier[] | undefined, seriesConfig: ChartSeriesConfig<ChartSeriesType>) => VisibilityMap;

package/internals/plugins/featurePlugins/useChartVisibilityManager/visibilityParamToMap.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.visibilityParamToMap = void 0;
+var _serializeIdentifier = require("../../corePlugins/useChartSeries/serializeIdentifier");
+const visibilityParamToMap = (hiddenItems, seriesConfig) => {
+  const visibilityMap = new Map();
+  if (hiddenItems) {
+    hiddenItems.forEach(identifier => {
+      const uniqueId = (0, _serializeIdentifier.serializeIdentifier)(seriesConfig, identifier);
+      visibilityMap.set(uniqueId, identifier);
+    });
+  }
+  return visibilityMap;
+};
+exports.visibilityParamToMap = visibilityParamToMap;

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

@@ -0,0 +1,2 @@
+import type { ChartSeriesType, ChartsSeriesConfig } from "../../../../models/seriesType/config.js";
+export type IdentifierSerializer<TSeriesType extends ChartSeriesType> = (identifier: ChartsSeriesConfig[TSeriesType]['itemIdentifier']) => string;

package/internals/plugins/models/seriesConfig/identifierSerializer.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/internals/plugins/models/seriesConfig/index.d.ts

@@ -7,4 +7,5 @@ export * from "./seriesLayout.types.js";
 export * from "./tooltipGetter.types.js";
 export * from "./tooltipItemPositionGetter.types.js";
 export * from "./legendGetter.types.js";
-export * from "./getSeriesWithDefaultValues.types.js";
+export * from "./getSeriesWithDefaultValues.types.js";
+export * from "./identifierSerializer.types.js";

package/internals/plugins/models/seriesConfig/index.js

@@ -112,4 +112,15 @@ Object.keys(_getSeriesWithDefaultValues).forEach(function (key) {
       return _getSeriesWithDefaultValues[key];
     }
   });
+});
+var _identifierSerializer = require("./identifierSerializer.types");
+Object.keys(_identifierSerializer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _identifierSerializer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _identifierSerializer[key];
+    }
+  });
 });

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

@@ -9,6 +9,7 @@ import { type GetSeriesWithDefaultValues } from "./getSeriesWithDefaultValues.ty
 import { type TooltipItemPositionGetter } from "./tooltipItemPositionGetter.types.js";
 import { type SeriesLayoutGetter } from "./seriesLayout.types.js";
 import { type KeyboardFocusHandler } from "../../featurePlugins/useChartKeyboardNavigation/keyboardFocusHandler.types.js";
+import { type IdentifierSerializer } from "./identifierSerializer.types.js";
 export type ChartSeriesTypeConfig<TSeriesType extends ChartSeriesType> = {
   seriesProcessor: SeriesProcessor<TSeriesType>;
   /**
@@ -21,6 +22,12 @@ export type ChartSeriesTypeConfig<TSeriesType extends ChartSeriesType> = {
   tooltipItemPositionGetter?: TooltipItemPositionGetter<TSeriesType>;
   getSeriesWithDefaultValues: GetSeriesWithDefaultValues<TSeriesType>;
   keyboardFocusHandler?: KeyboardFocusHandler<TSeriesType>;
+  /**
+   * A function to serialize the series item identifier into a unique string.
+   * @param {ChartsSeriesConfig[TSeriesType]['itemIdentifier']} identifier The series item identifier.
+   * @returns {string} A unique string representation of the identifier.
+   */
+  identifierSerializer: IdentifierSerializer<TSeriesType>;
 } & (TSeriesType extends CartesianChartSeriesType ? {
   xExtremumGetter: CartesianExtremumGetter<TSeriesType>;
   yExtremumGetter: CartesianExtremumGetter<TSeriesType>;

package/models/axis.d.ts

@@ -1,12 +1,13 @@
 import type { ScaleBand, ScaleLinear, ScaleLogarithmic, ScaleOrdinal, ScalePoint, ScalePower, ScaleSequential, ScaleThreshold, ScaleTime, ScaleSymLog, NumberValue } from '@mui/x-charts-vendor/d3-scale';
 import { type SxProps } from '@mui/system/styleFunctionSx';
-import { type MakeOptional, type MakeRequired } from '@mui/x-internals/types';
+import { type HasProperty, type MakeOptional, type MakeRequired } from '@mui/x-internals/types';
 import type { DefaultizedZoomOptions } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { type ChartsAxisClasses } from "../ChartsAxis/axisClasses.js";
 import type { TickParams } from "../hooks/useTicks.js";
 import type { ChartsTextProps } from "../ChartsText/index.js";
 import type { ContinuousColorConfig, OrdinalColorConfig, PiecewiseColorConfig } from "./colorMapping.js";
 import type { OrdinalTimeTicks } from "./timeTicks.js";
+import { type ChartsTypeFeatureFlags } from "./featureFlags.js";
 export type AxisId = string | number;
 export type D3Scale<Domain extends {
   toString(): string;
@@ -133,7 +134,7 @@ type AxisSideConfig<AxisProps extends ChartsAxisProps> = AxisProps extends Chart
   position?: 'top' | 'bottom' | 'none';
   /**
    * The height of the axis.
-   * @default 30
+   * @default 45 if an axis label is provided, 25 otherwise.
    */
   height?: number;
 } : AxisProps extends ChartsYAxisProps ? {
@@ -149,7 +150,7 @@ type AxisSideConfig<AxisProps extends ChartsAxisProps> = AxisProps extends Chart
   position?: 'left' | 'right' | 'none';
   /**
    * The width of the axis.
-   * @default 30
+   * @default 65 if an axis label is provided, 45 otherwise.
    */
   width?: number;
 } : {
@@ -521,7 +522,7 @@ export interface ChartsAxisData {
   /**
    * The mapping of series ids to their value for this particular axis index.
    */
-  seriesValues: Record<string, number | null | undefined>;
+  seriesValues: Record<string, HasProperty<ChartsTypeFeatureFlags, 'seriesValueOverride'> extends true ? ChartsTypeFeatureFlags['seriesValuesOverride'] : number | null | undefined>;
 }
 export type CartesianDirection = 'x' | 'y';
 export type PolarDirection = 'rotation' | 'radius';

package/models/featureFlags.d.ts

@@ -0,0 +1 @@
+export interface ChartsTypeFeatureFlags {}

package/models/featureFlags.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/models/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./seriesType/index.js";
 export * from "./stacking.js";
 export * from "./slots/index.js";
+export * from "./featureFlags.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";

package/models/index.js

@@ -35,4 +35,15 @@ Object.keys(_slots).forEach(function (key) {
       return _slots[key];
     }
   });
+});
+var _featureFlags = require("./featureFlags");
+Object.keys(_featureFlags).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _featureFlags[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _featureFlags[key];
+    }
+  });
 });

package/moduleAugmentation/barChartBatchRendererOnItemClick.d.ts

@@ -0,0 +1,13 @@
+import type * as React from 'react';
+import type { BarItemIdentifier } from "../models/index.js";
+declare module '@mui/x-charts/BarChart' {
+  interface BarPlotProps {
+    /**
+     * Callback fired when a bar item is clicked.
+     * @param {MouseEvent | React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
+     *        It is a native MouseEvent for `svg-batch` renderer and a React MouseEvent for `svg-single` renderer.
+     * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
+     */
+    onItemClick?(event: MouseEvent | React.MouseEvent<SVGElement, MouseEvent>, barItemIdentifier: BarItemIdentifier): void;
+  }
+}

package/moduleAugmentation/barChartBatchRendererOnItemClick.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "8.23.0",
+  "version": "8.24.0",
   "author": "MUI Team",
   "description": "The community edition of MUI X Charts components.",
   "license": "MIT",
@@ -35,8 +35,8 @@
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.6.0",
     "@mui/x-charts-vendor": "8.23.0",
-    "@mui/x-internals": "8.23.0",
-    "@mui/x-internal-gestures": "0.4.0"
+    "@mui/x-internal-gestures": "0.4.0",
+    "@mui/x-internals": "8.24.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
@@ -82,6 +82,16 @@
         "default": "./esm/*/index.js"
       }
     },
+    "./moduleAugmentation/*": {
+      "require": {
+        "types": "./moduleAugmentation/*.d.ts",
+        "default": "./moduleAugmentation/*.js"
+      },
+      "default": {
+        "types": "./esm/moduleAugmentation/*.d.ts",
+        "default": "./esm/moduleAugmentation/*.js"
+      }
+    },
     "./esm": null
   }
 }