@mui/x-charts 8.0.0-alpha.0 → 8.0.0-alpha.2

package/hooks/useAxisEvents.js

@@ -1,12 +1,13 @@
 'use client';
 
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { InteractionContext } from "../context/InteractionProvider.js";
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { isBandScale } from "../internals/isBandScale.js";
 import { getSVGPoint } from "../internals/getSVGPoint.js";
 import { useSvgRef } from "./useSvgRef.js";
 import { useDrawingArea } from "./useDrawingArea.js";
+import { useStore } from "../internals/store/useStore.js";
 function getAsANumber(value) {
   return value instanceof Date ? value.getTime() : value;
 }
@@ -19,9 +20,7 @@ export const useAxisEvents = disableAxisListener => {
     xAxisIds,
     yAxisIds
   } = useCartesianContext();
-  const {
-    dispatch
-  } = React.useContext(InteractionContext);
+  const store = useStore(disableAxisListener);
   const usedXAxis = xAxisIds[0];
   const usedYAxis = yAxisIds[0];
 
@@ -33,7 +32,7 @@ export const useAxisEvents = disableAxisListener => {
   });
   React.useEffect(() => {
     const element = svgRef.current;
-    if (element === null || disableAxisListener) {
+    if (element === null || disableAxisListener || !store) {
       return () => {};
     }
     function getNewAxisState(axisConfig, mouseValue) {
@@ -92,9 +91,15 @@ export const useAxisEvents = disableAxisListener => {
         x: -1,
         y: -1
       };
-      dispatch({
-        type: 'exitChart'
-      });
+      store.update(prev => _extends({}, prev, {
+        interaction: {
+          item: null,
+          axis: {
+            x: null,
+            y: null
+          }
+        }
+      }));
     };
     const handleMove = event => {
       const target = 'targetTouches' in event ? event.targetTouches[0] : event;
@@ -105,9 +110,15 @@ export const useAxisEvents = disableAxisListener => {
         targetElement: event.target
       })) {
         if (mousePosition.current.isInChart) {
-          dispatch({
-            type: 'exitChart'
-          });
+          store.update(prev => _extends({}, prev, {
+            interaction: {
+              item: null,
+              axis: {
+                x: null,
+                y: null
+              }
+            }
+          }));
           mousePosition.current.isInChart = false;
         }
         return;
@@ -115,13 +126,15 @@ export const useAxisEvents = disableAxisListener => {
       mousePosition.current.isInChart = true;
       const newStateX = getNewAxisState(xAxis[usedXAxis], svgPoint.x);
       const newStateY = getNewAxisState(yAxis[usedYAxis], svgPoint.y);
-      dispatch({
-        type: 'updateAxis',
-        data: {
-          x: newStateX,
-          y: newStateY
-        }
-      });
+      store.update(prev => _extends({}, prev, {
+        interaction: _extends({}, prev.interaction, {
+          axis: _extends({}, prev.interaction.axis, prev.interaction.axis.x?.index !== newStateX?.index || prev.interaction.axis.x?.value !== newStateX?.value ? {
+            x: newStateX
+          } : {}, prev.interaction.axis.y?.index !== newStateY?.index || prev.interaction.axis.y?.value !== newStateY?.value ? {
+            y: newStateY
+          } : {})
+        })
+      }));
     };
     const handleDown = event => {
       const target = event.currentTarget;
@@ -144,5 +157,5 @@ export const useAxisEvents = disableAxisListener => {
       element.removeEventListener('pointercancel', handleOut);
       element.removeEventListener('pointerleave', handleOut);
     };
-  }, [svgRef, dispatch, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener, drawingArea]);
+  }, [svgRef, store, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener, drawingArea]);
 };

package/hooks/useChartId.js

@@ -1,10 +1,9 @@
 'use client';
 
-import * as React from 'react';
-import { DrawingContext } from "../context/DrawingProvider.js";
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { selectorChartId } from "../internals/plugins/corePlugins/useChartId/useChartId.selectors.js";
 export function useChartId() {
-  const {
-    chartId
-  } = React.useContext(DrawingContext);
-  return React.useMemo(() => chartId, [chartId]);
+  const store = useStore();
+  return useSelector(store, selectorChartId);
 }

package/hooks/useDrawingArea.d.ts

@@ -1,2 +1,2 @@
-import { DrawingArea } from '../context/DrawingProvider';
-export declare function useDrawingArea(): DrawingArea;
+import { DrawingAreaState } from '../context/DrawingAreaProvider';
+export declare function useDrawingArea(): DrawingAreaState;

package/hooks/useDrawingArea.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { DrawingContext } from "../context/DrawingProvider.js";
+import { DrawingAreaContext } from "../context/DrawingAreaProvider/index.js";
 export function useDrawingArea() {
   const {
     left,
@@ -11,7 +11,7 @@ export function useDrawingArea() {
     bottom,
     right,
     isPointInside
-  } = React.useContext(DrawingContext);
+  } = React.useContext(DrawingAreaContext);
   return React.useMemo(() => ({
     left,
     top,

package/hooks/useInteractionItemProps.js

@@ -1,12 +1,10 @@
 'use client';
 
-import * as React from 'react';
-import { InteractionContext } from "../context/InteractionProvider.js";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { useHighlighted } from "../context/index.js";
+import { useStore } from "../internals/store/useStore.js";
 export const useInteractionItemProps = skip => {
-  const {
-    dispatch: dispatchInteraction
-  } = React.useContext(InteractionContext);
+  const store = useStore();
   const {
     setHighlighted,
     clearHighlighted
@@ -21,20 +19,31 @@ export const useInteractionItemProps = skip => {
       }
     };
     const onPointerEnter = () => {
-      dispatchInteraction({
-        type: 'enterItem',
-        data
-      });
+      store.update(prev => _extends({}, prev, {
+        interaction: _extends({}, prev.interaction, {
+          item: data
+        })
+      }));
       setHighlighted({
         seriesId: data.seriesId,
         dataIndex: data.dataIndex
       });
     };
     const onPointerLeave = event => {
-      event.currentTarget.releasePointerCapture(event.pointerId);
-      dispatchInteraction({
-        type: 'leaveItem',
-        data
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+      store.update(prev => {
+        const prevItem = prev.interaction.item;
+        if (prevItem === null || Object.keys(data).some(key => data[key] !== prevItem[key])) {
+          // The item is already something else, no need to clean it.
+          return prev;
+        }
+        return _extends({}, prev, {
+          interaction: _extends({}, prev.interaction, {
+            item: null
+          })
+        });
       });
       clearHighlighted();
     };

package/hooks/useSvgRef.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare function useSvgRef(): React.MutableRefObject<SVGSVGElement>;
+export declare function useSvgRef(): React.RefObject<SVGSVGElement>;

package/hooks/useSvgRef.js

@@ -1,14 +1,10 @@
 'use client';
 
-import * as React from 'react';
-import { SvgContext } from "../context/DrawingProvider.js";
+import { useChartContext } from "../context/ChartProvider/index.js";
 export function useSvgRef() {
-  const {
-    isInitialized,
-    data
-  } = React.useContext(SvgContext);
-  if (!isInitialized) {
+  const context = useChartContext();
+  if (!context) {
     throw new Error(['MUI X: Could not find the svg ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
   }
-  return data;
+  return context.svgRef;
 }

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.0.0-alpha.0
+ * @mui/x-charts v8.0.0-alpha.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/ChartsAxesGradients/ChartsAxesGradients.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { AxisId } from '../../../models/axis';
 export declare function useChartGradient(): (axisId: AxisId, direction: "x" | "y") => string;
-export declare function ChartsAxesGradients(): React.JSX.Element;
+export declare function ChartsAxesGradients(): React.JSX.Element | null;

package/internals/components/ChartsAxesGradients/ChartsAxesGradients.js

@@ -1,14 +1,11 @@
 import * as React from 'react';
 import { useCartesianContext } from "../../../context/CartesianProvider/index.js";
-import { DrawingContext } from "../../../context/DrawingProvider.js";
-import { useDrawingArea } from "../../../hooks/index.js";
+import { useChartId, useDrawingArea } from "../../../hooks/index.js";
 import ChartsPiecewiseGradient from "./ChartsPiecewiseGradient.js";
 import ChartsContinuousGradient from "./ChartsContinuousGradient.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function useChartGradient() {
-  const {
-    chartId
-  } = React.useContext(DrawingContext);
+  const chartId = useChartId();
   return React.useCallback((axisId, direction) => `${chartId}-gradient-${direction}-${axisId}`, [chartId]);
 }
 export function ChartsAxesGradients() {
@@ -29,8 +26,13 @@ export function ChartsAxesGradients() {
     yAxisIds,
     yAxis
   } = useCartesianContext();
+  const filteredYAxisIds = yAxisIds.filter(axisId => yAxis[axisId].colorMap !== undefined);
+  const filteredXAxisIds = xAxisIds.filter(axisId => xAxis[axisId].colorMap !== undefined);
+  if (filteredYAxisIds.length === 0 && filteredXAxisIds.length === 0) {
+    return null;
+  }
   return /*#__PURE__*/_jsxs("defs", {
-    children: [yAxisIds.filter(axisId => yAxis[axisId].colorMap !== undefined).map(axisId => {
+    children: [filteredYAxisIds.map(axisId => {
       const gradientId = getGradientId(axisId, 'y');
       const {
         colorMap,
@@ -60,7 +62,7 @@ export function ChartsAxesGradients() {
         }, gradientId);
       }
       return null;
-    }), xAxisIds.filter(axisId => xAxis[axisId].colorMap !== undefined).map(axisId => {
+    }), filteredXAxisIds.map(axisId => {
       const gradientId = getGradientId(axisId, 'x');
       const {
         colorMap,

package/internals/computeAxisValue.d.ts

@@ -1,7 +1,7 @@
 import { AxisConfig, ScaleName } from '../models';
 import { ChartsXAxisProps, ChartsAxisProps, ChartsYAxisProps, ChartsRadiusAxisProps, ChartsRotationAxisProps } from '../models/axis';
 import { CartesianChartSeriesType } from '../models/seriesType/config';
-import { DrawingArea } from '../context/DrawingProvider';
+import { DrawingAreaState } from '../context/DrawingAreaProvider';
 import { FormattedSeries } from '../context/SeriesProvider';
 import { ExtremumGetter } from '../context/PluginProvider';
 import { DefaultizedAxisConfig, ZoomData, ZoomOptions, GetZoomAxisFilters } from '../context/CartesianProvider/Cartesian.types';
@@ -10,7 +10,7 @@ type ComputeResult<T extends ChartsAxisProps> = {
     axisIds: string[];
 };
 type ComputeCommonParams = {
-    drawingArea: DrawingArea;
+    drawingArea: DrawingAreaState;
     formattedSeries: FormattedSeries;
     extremumGetters: {
         [K in CartesianChartSeriesType]?: ExtremumGetter<K>;

package/internals/defaultizeColor.d.ts

@@ -2,7 +2,7 @@ import { AllSeriesType } from '../models/seriesType';
 export declare function defaultizeColor(series: AllSeriesType, seriesIndex: number, colors?: string[]): {
     data: {
         color: string;
-        label?: (string | ((location: "tooltip" | "legend" | "arc") => string)) | undefined;
+        label?: string | ((location: "tooltip" | "legend" | "arc") => string) | undefined;
         value: number;
         id?: import("..").PieItemId | undefined;
     }[];

package/internals/index.d.ts

@@ -1,6 +1,4 @@
 export * from './components/ChartsAxesGradients';
-export * from '../ChartContainer/useChartContainerDimensions';
-export * from '../ChartContainer/ResizableContainer';
 export { useSeries } from '../hooks/useSeries';
 export { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 export { useDrawingArea } from '../hooks/useDrawingArea';
@@ -18,8 +16,7 @@ export { unstable_cleanupDOM } from './domUtils';
 export * from './getScale';
 export * from './computeAxisValue';
 export * from '../context/CartesianProvider';
-export * from '../context/DrawingProvider';
-export * from '../context/InteractionProvider';
+export * from '../context/DrawingAreaProvider';
 export * from '../context/SeriesProvider';
 export * from '../context/ZAxisContextProvider';
 export * from '../context/PluginProvider';
@@ -27,6 +24,8 @@ export * from '../context/AnimationProvider';
 export type * from '../context/context.types';
 export { getAxisExtremum } from '../context/CartesianProvider/getAxisExtremum';
 export * from '../context/ChartDataProvider';
+export * from '../context/SizeProvider';
+export * from '../context/ChartProvider';
 export * from '../models/seriesType/config';
 export * from '../models/seriesType/common';
 export * from '../models/z-axis';

package/internals/index.js

@@ -1,7 +1,5 @@
 // Components
 export * from "./components/ChartsAxesGradients/index.js";
-export * from "../ChartContainer/useChartContainerDimensions.js";
-export * from "../ChartContainer/ResizableContainer.js";
 
 // hooks
 export { useSeries } from "../hooks/useSeries.js";
@@ -26,14 +24,15 @@ export * from "./computeAxisValue.js";
 // contexts
 
 export * from "../context/CartesianProvider/index.js";
-export * from "../context/DrawingProvider.js";
-export * from "../context/InteractionProvider.js";
+export * from "../context/DrawingAreaProvider/index.js";
 export * from "../context/SeriesProvider/index.js";
 export * from "../context/ZAxisContextProvider.js";
 export * from "../context/PluginProvider/index.js";
 export * from "../context/AnimationProvider/index.js";
 export { getAxisExtremum } from "../context/CartesianProvider/getAxisExtremum.js";
 export * from "../context/ChartDataProvider/index.js";
+export * from "../context/SizeProvider/index.js";
+export * from "../context/ChartProvider/index.js";
 
 // series configuration
 export * from "../models/seriesType/config.js";

package/internals/plugins/allPlugins.d.ts

@@ -0,0 +1 @@
+export declare const ALL_PLUGINS: readonly [import("./models").ChartPlugin<import("./featurePlugins/useChartInteraction").UseChartInteractionSignature>];

package/internals/plugins/allPlugins.js

@@ -0,0 +1,3 @@
+// This file should be removed after creating all plugins  in favor of a file per chart type.
+import { useChartInteraction } from "./featurePlugins/useChartInteraction/index.js";
+export const ALL_PLUGINS = [useChartInteraction];

package/internals/plugins/corePlugins/corePlugins.d.ts

@@ -0,0 +1,10 @@
+import { ConvertPluginsIntoSignatures } from '../models/helpers';
+import { UseChartIdParameters } from './useChartId';
+/**
+ * Internal plugins that create the tools used by the other plugins.
+ * These plugins are used by the Charts components.
+ */
+export declare const CHART_CORE_PLUGINS: readonly [import("../models").ChartPlugin<import("./useChartId").UseChartIdSignature>];
+export type ChartCorePluginSignatures = ConvertPluginsIntoSignatures<typeof CHART_CORE_PLUGINS>;
+export interface ChartCorePluginParameters extends UseChartIdParameters {
+}

package/internals/plugins/corePlugins/corePlugins.js

@@ -0,0 +1,7 @@
+import { useChartId } from "./useChartId/index.js";
+
+/**
+ * Internal plugins that create the tools used by the other plugins.
+ * These plugins are used by the Charts components.
+ */
+export const CHART_CORE_PLUGINS = [useChartId];

package/internals/plugins/corePlugins/index.d.ts

@@ -0,0 +1,2 @@
+export { CHART_CORE_PLUGINS } from './corePlugins';
+export type { ChartCorePluginSignatures, ChartCorePluginParameters } from './corePlugins';

package/internals/plugins/corePlugins/index.js

@@ -0,0 +1 @@
+export { CHART_CORE_PLUGINS } from "./corePlugins.js";

package/internals/plugins/corePlugins/useChartId/index.d.ts

@@ -0,0 +1,2 @@
+export { useChartId } from './useChartId';
+export type { UseChartIdSignature, UseChartIdParameters, UseChartIdDefaultizedParameters, } from './useChartId.types';

package/internals/plugins/corePlugins/useChartId/index.js

@@ -0,0 +1 @@
+export { useChartId } from "./useChartId.js";

package/internals/plugins/corePlugins/useChartId/useChartId.d.ts

@@ -0,0 +1,3 @@
+import { ChartPlugin } from '../../models';
+import { UseChartIdSignature } from './useChartId.types';
+export declare const useChartId: ChartPlugin<UseChartIdSignature>;

package/internals/plugins/corePlugins/useChartId/useChartId.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { createChartDefaultId } from "./useChartId.utils.js";
+export const useChartId = ({
+  params,
+  store
+}) => {
+  React.useEffect(() => {
+    store.update(prevState => {
+      if (params.id === prevState.id.providedChartId && prevState.id.chartId !== undefined) {
+        return prevState;
+      }
+      return _extends({}, prevState, {
+        id: _extends({}, prevState.id, {
+          chartId: params.id ?? createChartDefaultId()
+        })
+      });
+    });
+  }, [store, params.id]);
+  return {};
+};
+useChartId.params = {
+  id: true
+};
+useChartId.getInitialState = ({
+  id
+}) => ({
+  id: {
+    chartId: createChartDefaultId(),
+    providedChartId: id
+  }
+});

package/internals/plugins/corePlugins/useChartId/useChartId.selectors.d.ts

@@ -0,0 +1,36 @@
+import { ChartRootSelector } from '../../utils/selectors';
+import { UseChartIdSignature } from './useChartId.types';
+/**
+ * Get the id attribute of the chart.
+ * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
+ * @returns {string} The id attribute of the chart.
+ */
+export declare const selectorChartId: ((state: import("./useChartId.types").UseChartIdState & Partial<{}> & {
+    cacheKey: import("../../models").ChartStateCacheKey;
+}) => string) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        chartId: string;
+        providedChartId: string | undefined;
+    }) => string;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        chartId: string;
+        providedChartId: string | undefined;
+    }) => string) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => string;
+    dependencies: [ChartRootSelector<UseChartIdSignature>];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};

package/internals/plugins/corePlugins/useChartId/useChartId.selectors.js

@@ -0,0 +1,9 @@
+import { createSelector } from "../../utils/selectors.js";
+const selectorChartIdState = state => state.id;
+
+/**
+ * Get the id attribute of the chart.
+ * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
+ * @returns {string} The id attribute of the chart.
+ */
+export const selectorChartId = createSelector(selectorChartIdState, idState => idState.chartId);

package/internals/plugins/corePlugins/useChartId/useChartId.types.d.ts

@@ -0,0 +1,20 @@
+import { ChartPluginSignature } from '../../models';
+export interface UseChartIdParameters {
+    /**
+     * This prop is used to help implement the accessibility logic.
+     * If you don't provide this prop. It falls back to a randomly generated id.
+     */
+    id?: string;
+}
+export type UseChartIdDefaultizedParameters = UseChartIdParameters;
+export interface UseChartIdState {
+    id: {
+        chartId: string;
+        providedChartId: string | undefined;
+    };
+}
+export type UseChartIdSignature = ChartPluginSignature<{
+    params: UseChartIdParameters;
+    defaultizedParams: UseChartIdDefaultizedParameters;
+    state: UseChartIdState;
+}>;

package/internals/plugins/corePlugins/useChartId/useChartId.types.js

@@ -0,0 +1 @@
+export {};

package/internals/plugins/corePlugins/useChartId/useChartId.utils.d.ts

@@ -0,0 +1 @@
+export declare const createChartDefaultId: () => string;

package/internals/plugins/corePlugins/useChartId/useChartId.utils.js

@@ -0,0 +1,5 @@
+let globalChartDefaultId = 0;
+export const createChartDefaultId = () => {
+  globalChartDefaultId += 1;
+  return `mui-chart-${globalChartDefaultId}`;
+};

package/internals/plugins/featurePlugins/useChartInteraction/index.d.ts

@@ -0,0 +1,3 @@
+export { useChartInteraction } from './useChartInteraction';
+export * from './useChartInteraction.selectors';
+export type { UseChartInteractionSignature } from './useChartInteraction.types';

package/internals/plugins/featurePlugins/useChartInteraction/index.js

@@ -0,0 +1,2 @@
+export { useChartInteraction } from "./useChartInteraction.js";
+export * from "./useChartInteraction.selectors.js";

package/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.d.ts

@@ -0,0 +1,3 @@
+import { ChartPlugin } from '../../models';
+import { UseChartInteractionSignature } from './useChartInteraction.types';
+export declare const useChartInteraction: ChartPlugin<UseChartInteractionSignature>;

package/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.js

@@ -0,0 +1,73 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import useEventCallback from '@mui/utils/useEventCallback';
+export const useChartInteraction = ({
+  store
+}) => {
+  const cleanInteraction = useEventCallback(() => {
+    store.update(prev => _extends({}, prev, {
+      interaction: _extends({}, prev.interaction, {
+        axis: {
+          x: null,
+          y: null
+        },
+        item: null
+      })
+    }));
+  });
+  const setItemInteraction = useEventCallback(newItem => {
+    store.update(prev => _extends({}, prev, {
+      interaction: _extends({}, prev.interaction, {
+        item: newItem
+      })
+    }));
+  });
+  const setAxisInteraction = useEventCallback(({
+    x: newStateX,
+    y: newStateY
+  }) => {
+    store.update(prev => _extends({}, prev, {
+      interaction: _extends({}, prev.interaction, {
+        axis: _extends({}, prev.interaction.axis, prev.interaction.axis.x?.index !== newStateX?.index || prev.interaction.axis.x?.value !== newStateX?.value ? {
+          x: newStateX
+        } : {}, prev.interaction.axis.y?.index !== newStateY?.index || prev.interaction.axis.y?.value !== newStateY?.value ? {
+          y: newStateY
+        } : {})
+      })
+    }));
+  });
+  const enableVoronoid = useEventCallback(() => {
+    store.update(prev => _extends({}, prev, {
+      interaction: _extends({}, prev.interaction, {
+        isVoronoiEnabled: true
+      })
+    }));
+  });
+  const disableVoronoid = useEventCallback(() => {
+    store.update(prev => _extends({}, prev, {
+      interaction: _extends({}, prev.interaction, {
+        isVoronoiEnabled: false
+      })
+    }));
+  });
+  return {
+    params: {},
+    instance: {
+      cleanInteraction,
+      setItemInteraction,
+      setAxisInteraction,
+      enableVoronoid,
+      disableVoronoid
+    }
+  };
+};
+useChartInteraction.getInitialState = () => ({
+  interaction: {
+    item: null,
+    axis: {
+      x: null,
+      y: null
+    },
+    isVoronoiEnabled: false
+  }
+});
+useChartInteraction.params = {};