@mui/x-charts/esm/internals/plugins/featurePlugins/useChartVisibilityManager/useChartVisibilityManager.js

The community edition of MUI X Charts components.

'use client';

import _extends from "@babel/runtime/helpers/esm/extends";
import useEventCallback from '@mui/utils/useEventCallback';
import { useEffectAfterFirstRender } from '@mui/x-internals/useEffectAfterFirstRender';
import { EMPTY_VISIBILITY_MAP } from "./useChartVisibilityManager.selectors.js";
import { visibilityParamToMap } from "./visibilityParamToMap.js";
export const useChartVisibilityManager = ({
  store,
  params,
  seriesConfig,
  instance
}) => {
  // Manage controlled state
  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', _extends({}, store.state.visibilityManager, {
      visibilityMap: visibilityParamToMap(params.hiddenItems, seriesConfig)
    }));
  }, [store, params.hiddenItems, seriesConfig]);
  const hideItem = useEventCallback(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', _extends({}, store.state.visibilityManager, {
      visibilityMap: newVisibilityMap
    }));
    params.onHiddenItemsChange?.(Array.from(newVisibilityMap.values()));
  });
  const showItem = useEventCallback(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', _extends({}, store.state.visibilityManager, {
      visibilityMap: newVisibilityMap
    }));
    params.onHiddenItemsChange?.(Array.from(newVisibilityMap.values()));
  });
  const toggleItem = useEventCallback(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
    }
  };
};
useChartVisibilityManager.getInitialState = (params, _, seriesConfig) => {
  const initialItems = params.hiddenItems ?? params.initialHiddenItems;
  return {
    visibilityManager: {
      visibilityMap: initialItems ? visibilityParamToMap(initialItems, seriesConfig) : EMPTY_VISIBILITY_MAP,
      isControlled: params.hiddenItems !== undefined
    }
  };
};
useChartVisibilityManager.params = {
  onHiddenItemsChange: true,
  hiddenItems: true,
  initialHiddenItems: true
};