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

package/esm/internals/animation/useAnimate.d.ts

@@ -0,0 +1,19 @@
+/** Animates a ref. The animation can be skipped by setting {@link skip} to true.
+ *
+ * - If {@link skip} is false, a transition will be started.
+ * - If {@link skip} is true and no transition is in progress, no transition will be started and {@link applyProps} will
+ *   never be called.
+ * - If {@link skip} becomes true and a transition is in progress, the transition will immediately end and
+ *   {@link applyProps} be called with the final value.
+ * */
+export declare function useAnimate<Props extends {}, Elem extends Element>(props: Props, {
+  createInterpolator,
+  applyProps,
+  skip,
+  initialProps
+}: {
+  createInterpolator: (lastProps: Props, newProps: Props) => (t: number) => Props;
+  applyProps: (element: Elem, props: Props) => void;
+  skip?: boolean;
+  initialProps?: Props;
+}): (element: Elem | null) => void;

package/esm/internals/animation/useAnimate.js

@@ -0,0 +1,74 @@
+'use client';
+
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION_JS } from "./animation.js";
+import { Transition } from "./Transition.js";
+import { shallowEqual } from "../shallowEqual.js";
+
+/** Animates a ref. The animation can be skipped by setting {@link skip} to true.
+ *
+ * - If {@link skip} is false, a transition will be started.
+ * - If {@link skip} is true and no transition is in progress, no transition will be started and {@link applyProps} will
+ *   never be called.
+ * - If {@link skip} becomes true and a transition is in progress, the transition will immediately end and
+ *   {@link applyProps} be called with the final value.
+ * */
+export function useAnimate(props, {
+  createInterpolator,
+  applyProps,
+  skip,
+  initialProps = props
+}) {
+  const lastInterpolatedPropsRef = React.useRef(initialProps);
+  const transitionRef = React.useRef(null);
+  const elementRef = React.useRef(null);
+  const lastPropsRef = React.useRef(props);
+  useEnhancedEffect(() => {
+    lastPropsRef.current = props;
+  }, [props]);
+  useEnhancedEffect(() => {
+    if (skip) {
+      transitionRef.current?.finish();
+      transitionRef.current = null;
+      elementRef.current = null;
+      lastInterpolatedPropsRef.current = props;
+    }
+  }, [props, skip]);
+  const animate = React.useCallback(element => {
+    const lastInterpolatedProps = lastInterpolatedPropsRef.current;
+    const interpolate = createInterpolator(lastInterpolatedProps, props);
+    transitionRef.current = new Transition(ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION_JS, t => {
+      const interpolatedProps = interpolate(t);
+      lastInterpolatedPropsRef.current = interpolatedProps;
+      applyProps(element, interpolatedProps);
+    });
+  }, [applyProps, createInterpolator, props]);
+  const setRef = React.useCallback(element => {
+    if (element === null) {
+      transitionRef.current?.stop();
+      return;
+    }
+    const lastElement = elementRef.current;
+    if (lastElement === element) {
+      // If it's the same element and same props, resume the transition.
+      if (shallowEqual(lastPropsRef.current, props)) {
+        transitionRef.current?.resume();
+        return;
+      }
+
+      // If props aren't the same, stop the transition and start a new animation.
+      transitionRef.current?.stop();
+    }
+
+    // If it's a different element, stop the transition of the last element and start a new animation.
+    if (lastElement) {
+      transitionRef.current?.stop();
+    }
+    elementRef.current = element;
+    if (transitionRef.current || !skip) {
+      animate(element);
+    }
+  }, [animate, props, skip]);
+  return setRef;
+}

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.d.ts

@@ -6,7 +6,7 @@ import { ChartSeriesConfig } from "../../models/seriesConfig/index.js";
 import { DefaultizedAxisConfig, DefaultizedZoomOptions } from "./useChartCartesianAxis.types.js";
 import { ProcessedSeries } from "../../corePlugins/useChartSeries/useChartSeries.types.js";
 import { GetZoomAxisFilters, ZoomData } from "./zoom.types.js";
-type ComputeResult<T extends ChartsAxisProps> = {
+export type ComputeResult<T extends ChartsAxisProps> = {
   axis: DefaultizedAxisConfig<T>;
   axisIds: string[];
 };

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.js

@@ -6,6 +6,7 @@ import { getTickNumber } from "../../../../hooks/useTicks.js";
 import { getScale } from "../../../getScale.js";
 import { zoomScaleRange } from "./zoom.js";
 import { getAxisExtremum } from "./getAxisExtremum.js";
+import { getAxisTriggerTooltip } from "./getAxisTriggerTooltip.js";
 function getRange(drawingArea, axisDirection,
 // | 'rotation' | 'radius',
 axis) {
@@ -37,6 +38,7 @@ export function computeAxisValue({
       axisIds: []
     };
   }
+  const axisIdsTriggeringTooltip = getAxisTriggerTooltip(axisDirection, seriesConfig, formattedSeries, allAxis[0].id);
   const completeAxis = {};
   allAxis.forEach((eachAxis, axisIndex) => {
     const axis = eachAxis;
@@ -46,6 +48,7 @@ export function computeAxisValue({
     const range = getRange(drawingArea, axisDirection, axis);
     const [minData, maxData] = getAxisExtremum(axis, axisDirection, seriesConfig, axisIndex, formattedSeries, zoom === undefined && !zoomOption ? getFilters : undefined // Do not apply filtering if zoom is already defined.
     );
+    const triggerTooltip = !axis.ignoreTooltip && axisIdsTriggeringTooltip.has(axis.id);
     const data = axis.data ?? [];
     if (isBandScaleConfig(axis)) {
       const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
@@ -57,7 +60,8 @@ export function computeAxisValue({
         offset: 0,
         height: 0,
         categoryGapRatio,
-        barGapRatio
+        barGapRatio,
+        triggerTooltip
       }, axis, {
         data,
         scale: scaleBand(axis.data, zoomedRange).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
@@ -76,7 +80,8 @@ export function computeAxisValue({
       const zoomedRange = zoomScaleRange(scaleRange, zoomRange);
       completeAxis[axis.id] = _extends({
         offset: 0,
-        height: 0
+        height: 0,
+        triggerTooltip
       }, axis, {
         data,
         scale: scalePoint(axis.data, zoomedRange),
@@ -117,7 +122,8 @@ export function computeAxisValue({
     const domain = [axis.min ?? minDomain, axis.max ?? maxDomain];
     completeAxis[axis.id] = _extends({
       offset: 0,
-      height: 0
+      height: 0,
+      triggerTooltip
     }, axis, {
       data,
       scaleType: scaleType,

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisTriggerTooltip.d.ts

@@ -0,0 +1,5 @@
+import { CartesianChartSeriesType } from "../../../../models/seriesType/config.js";
+import { ChartSeriesConfig } from "../../models/seriesConfig/index.js";
+import { ProcessedSeries } from "../../corePlugins/useChartSeries/useChartSeries.types.js";
+import { AxisId } from "../../../../models/axis.js";
+export declare const getAxisTriggerTooltip: <TSeriesType extends CartesianChartSeriesType>(axisDirection: "x" | "y", seriesConfig: ChartSeriesConfig<TSeriesType>, formattedSeries: ProcessedSeries<TSeriesType>, defaultAxisId: AxisId) => Set<AxisId>;

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisTriggerTooltip.js

@@ -0,0 +1,21 @@
+import { isCartesianSeriesType } from "../../../isCartesian.js";
+export const getAxisTriggerTooltip = (axisDirection, seriesConfig, formattedSeries, defaultAxisId) => {
+  const tooltipAxesIds = new Set();
+  const chartTypes = Object.keys(seriesConfig).filter(isCartesianSeriesType);
+  chartTypes.forEach(chartType => {
+    const series = formattedSeries[chartType]?.series ?? {};
+    const tooltipAxes = seriesConfig[chartType].axisTooltipGetter?.(series);
+    if (tooltipAxes === undefined) {
+      return;
+    }
+    tooltipAxes.forEach(({
+      axisId,
+      direction
+    }) => {
+      if (direction === axisDirection) {
+        tooltipAxesIds.add(axisId ?? defaultAxisId);
+      }
+    });
+  });
+  return tooltipAxesIds;
+};

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.d.ts

@@ -184,10 +184,7 @@ export declare const selectorChartZoomOptionsLookup: ((state: import("../../core
  */
 export declare const selectorChartXAxis: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartCartesianAxis.types").UseChartCartesianAxisState> & {
   cacheKey: import("../../models").ChartStateCacheKey;
-} & Partial<{}> & import("./useChartCartesianAxis.types").UseChartCartesianAxisState) => {
-  axis: import("./useChartCartesianAxis.types").DefaultizedAxisConfig<import("../../..").ChartsXAxisProps>;
-  axisIds: string[];
-}) & {
+} & Partial<{}> & import("./useChartCartesianAxis.types").UseChartCartesianAxisState) => import("./computeAxisValue").ComputeResult<import("../../..").ChartsXAxisProps>) & {
   clearCache: () => void;
   resultsCount: () => number;
   resetResultsCount: () => void;
@@ -202,10 +199,7 @@ export declare const selectorChartXAxis: ((state: import("../../corePlugins/useC
   }, resultFuncArgs_2: import("../../..").ProcessedSeries<keyof import("../../..").ChartsSeriesConfig>, resultFuncArgs_3: import("../../models").ChartSeriesConfig<keyof import("../../..").ChartsSeriesConfig>, resultFuncArgs_4: Map<AxisId, ZoomData> | undefined, resultFuncArgs_5: {
     [x: string]: import("./useChartCartesianAxis.types").DefaultizedZoomOptions;
     [x: number]: import("./useChartCartesianAxis.types").DefaultizedZoomOptions;
-  }, resultFuncArgs_6: import("./zoom.types").GetZoomAxisFilters | undefined) => {
-    axis: import("./useChartCartesianAxis.types").DefaultizedAxisConfig<import("../../..").ChartsXAxisProps>;
-    axisIds: string[];
-  };
+  }, resultFuncArgs_6: import("./zoom.types").GetZoomAxisFilters | undefined) => import("./computeAxisValue").ComputeResult<import("../../..").ChartsXAxisProps>;
   memoizedResultFunc: ((resultFuncArgs_0: import("../../..").AxisConfig<keyof import("../../..").AxisScaleConfig, any, import("../../..").ChartsXAxisProps>[] | undefined, resultFuncArgs_1: {
     width: number;
     left: number;
@@ -216,18 +210,12 @@ export declare const selectorChartXAxis: ((state: import("../../corePlugins/useC
   }, resultFuncArgs_2: import("../../..").ProcessedSeries<keyof import("../../..").ChartsSeriesConfig>, resultFuncArgs_3: import("../../models").ChartSeriesConfig<keyof import("../../..").ChartsSeriesConfig>, resultFuncArgs_4: Map<AxisId, ZoomData> | undefined, resultFuncArgs_5: {
     [x: string]: import("./useChartCartesianAxis.types").DefaultizedZoomOptions;
     [x: number]: import("./useChartCartesianAxis.types").DefaultizedZoomOptions;
-  }, resultFuncArgs_6: import("./zoom.types").GetZoomAxisFilters | undefined) => {
-    axis: import("./useChartCartesianAxis.types").DefaultizedAxisConfig<import("../../..").ChartsXAxisProps>;
-    axisIds: string[];
-  }) & {
+  }, resultFuncArgs_6: import("./zoom.types").GetZoomAxisFilters | undefined) => import("./computeAxisValue").ComputeResult<import("../../..").ChartsXAxisProps>) & {
     clearCache: () => void;
     resultsCount: () => number;
     resetResultsCount: () => void;
   };
-  lastResult: () => {
-    axis: import("./useChartCartesianAxis.types").DefaultizedAxisConfig<import("../../..").ChartsXAxisProps>;
-    axisIds: string[];
-  };
+  lastResult: () => import("./computeAxisValue").ComputeResult<import("../../..").ChartsXAxisProps>;
   dependencies: [((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartCartesianAxis.types").UseChartCartesianAxisState> & {
     cacheKey: import("../../models").ChartStateCacheKey;
   }) => import("../../..").AxisConfig<keyof import("../../..").AxisScaleConfig, any, import("../../..").ChartsXAxisProps>[] | undefined) & {
@@ -1645,10 +1633,7 @@ export declare const selectorChartXAxis: ((state: import("../../corePlugins/useC
 };
 export declare const selectorChartYAxis: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartCartesianAxis.types").UseChartCartesianAxisState> & {
   cacheKey: import("../../models").ChartStateCacheKey;
-} & Partial<{}> & import("./useChartCartesianAxis.types").UseChartCartesianAxisState) => {
-  axis: import("./useChartCartesianAxis.types").DefaultizedAxisConfig<import("../../..").ChartsYAxisProps>;
-  axisIds: string[];
-}) & {
+} & Partial<{}> & import("./useChartCartesianAxis.types").UseChartCartesianAxisState) => import("./computeAxisValue").ComputeResult<import("../../..").ChartsYAxisProps>) & {
   clearCache: () => void;
   resultsCount: () => number;
   resetResultsCount: () => void;
@@ -1663,10 +1648,7 @@ export declare const selectorChartYAxis: ((state: import("../../corePlugins/useC
   }, resultFuncArgs_2: import("../../..").ProcessedSeries<keyof import("../../..").ChartsSeriesConfig>, resultFuncArgs_3: import("../../models").ChartSeriesConfig<keyof import("../../..").ChartsSeriesConfig>, resultFuncArgs_4: Map<AxisId, ZoomData> | undefined, resultFuncArgs_5: {
     [x: string]: import("./useChartCartesianAxis.types").DefaultizedZoomOptions;
     [x: number]: import("./useChartCartesianAxis.types").DefaultizedZoomOptions;
-  }, resultFuncArgs_6: import("./zoom.types").GetZoomAxisFilters | undefined) => {
-    axis: import("./useChartCartesianAxis.types").DefaultizedAxisConfig<import("../../..").ChartsYAxisProps>;
-    axisIds: string[];
-  };
+  }, resultFuncArgs_6: import("./zoom.types").GetZoomAxisFilters | undefined) => import("./computeAxisValue").ComputeResult<import("../../..").ChartsYAxisProps>;
   memoizedResultFunc: ((resultFuncArgs_0: import("../../..").AxisConfig<keyof import("../../..").AxisScaleConfig, any, import("../../..").ChartsYAxisProps>[] | undefined, resultFuncArgs_1: {
     width: number;
     left: number;
@@ -1677,18 +1659,12 @@ export declare const selectorChartYAxis: ((state: import("../../corePlugins/useC
   }, resultFuncArgs_2: import("../../..").ProcessedSeries<keyof import("../../..").ChartsSeriesConfig>, resultFuncArgs_3: import("../../models").ChartSeriesConfig<keyof import("../../..").ChartsSeriesConfig>, resultFuncArgs_4: Map<AxisId, ZoomData> | undefined, resultFuncArgs_5: {
     [x: string]: import("./useChartCartesianAxis.types").DefaultizedZoomOptions;
     [x: number]: import("./useChartCartesianAxis.types").DefaultizedZoomOptions;
-  }, resultFuncArgs_6: import("./zoom.types").GetZoomAxisFilters | undefined) => {
-    axis: import("./useChartCartesianAxis.types").DefaultizedAxisConfig<import("../../..").ChartsYAxisProps>;
-    axisIds: string[];
-  }) & {
+  }, resultFuncArgs_6: import("./zoom.types").GetZoomAxisFilters | undefined) => import("./computeAxisValue").ComputeResult<import("../../..").ChartsYAxisProps>) & {
     clearCache: () => void;
     resultsCount: () => number;
     resetResultsCount: () => void;
   };
-  lastResult: () => {
-    axis: import("./useChartCartesianAxis.types").DefaultizedAxisConfig<import("../../..").ChartsYAxisProps>;
-    axisIds: string[];
-  };
+  lastResult: () => import("./computeAxisValue").ComputeResult<import("../../..").ChartsYAxisProps>;
   dependencies: [((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartCartesianAxis.types").UseChartCartesianAxisState> & {
     cacheKey: import("../../models").ChartStateCacheKey;
   }) => import("../../..").AxisConfig<keyof import("../../..").AxisScaleConfig, any, import("../../..").ChartsYAxisProps>[] | undefined) & {