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

package/hooks/animation/useAnimateBarLabel.mjs

@@ -0,0 +1,102 @@
+import { interpolateNumber } from '@mui/x-charts-vendor/d3-interpolate';
+import { useAnimate } from "./useAnimate.mjs";
+function barLabelPropsInterpolator(from, to) {
+  const interpolateX = interpolateNumber(from.x, to.x);
+  const interpolateY = interpolateNumber(from.y, to.y);
+  const interpolateWidth = interpolateNumber(from.width, to.width);
+  const interpolateHeight = interpolateNumber(from.height, to.height);
+  return t => ({
+    x: interpolateX(t),
+    y: interpolateY(t),
+    width: interpolateWidth(t),
+    height: interpolateHeight(t)
+  });
+}
+
+/**
+ * Animates a bar label from the start of the axis (x-axis for vertical layout, y-axis for horizontal layout) to the
+ * center of the bar it belongs to.
+ * The label is horizontally centered within the bar when the layout is vertical, and vertically centered for laid out
+ * horizontally.
+ *
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+ */
+export function useAnimateBarLabel(props) {
+  const {
+    initialX,
+    currentX,
+    initialY,
+    currentY
+  } = props.placement === 'outside' ? getOutsidePlacement(props) : getCenterPlacement(props);
+  const initialProps = {
+    x: initialX,
+    y: initialY,
+    width: props.width,
+    height: props.height
+  };
+  const currentProps = {
+    x: currentX,
+    y: currentY,
+    width: props.width,
+    height: props.height
+  };
+  return useAnimate(currentProps, {
+    createInterpolator: barLabelPropsInterpolator,
+    transformProps: p => p,
+    applyProps(element, animatedProps) {
+      element.setAttribute('x', animatedProps.x.toString());
+      element.setAttribute('y', animatedProps.y.toString());
+      element.setAttribute('width', animatedProps.width.toString());
+      element.setAttribute('height', animatedProps.height.toString());
+    },
+    initialProps,
+    skip: props.skipAnimation,
+    ref: props.ref
+  });
+}
+const LABEL_OFFSET = 4;
+function getCenterPlacement(props) {
+  return {
+    initialX: props.layout === 'vertical' ? props.x + props.width / 2 : props.xOrigin,
+    initialY: props.layout === 'vertical' ? props.yOrigin : props.y + props.height / 2,
+    currentX: props.x + props.width / 2,
+    currentY: props.y + props.height / 2
+  };
+}
+function getOutsidePlacement(props) {
+  let initialY = 0;
+  let currentY = 0;
+  let initialX = 0;
+  let currentX = 0;
+  if (props.layout === 'vertical') {
+    const shouldPlaceAbove = props.y < props.yOrigin;
+    if (shouldPlaceAbove) {
+      initialY = props.yOrigin - LABEL_OFFSET;
+      currentY = props.y - LABEL_OFFSET;
+    } else {
+      initialY = props.yOrigin + LABEL_OFFSET;
+      currentY = props.y + props.height + LABEL_OFFSET;
+    }
+    return {
+      initialX: props.x + props.width / 2,
+      currentX: props.x + props.width / 2,
+      initialY,
+      currentY
+    };
+  }
+  const shouldPlaceToTheLeft = props.x < props.xOrigin;
+  if (shouldPlaceToTheLeft) {
+    initialX = props.xOrigin;
+    currentX = props.x - LABEL_OFFSET;
+  } else {
+    initialX = props.xOrigin;
+    currentX = props.x + props.width + LABEL_OFFSET;
+  }
+  return {
+    initialX,
+    currentX,
+    initialY: props.y + props.height / 2,
+    currentY: props.y + props.height / 2
+  };
+}

package/hooks/animation/useAnimateGaugeValueArc.mjs

@@ -0,0 +1,54 @@
+import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
+import { interpolateNumber } from '@mui/x-charts-vendor/d3-interpolate';
+import { useAnimate } from "./useAnimate.mjs";
+function gaugeValueArcPropsInterpolator(from, to) {
+  const interpolateStartAngle = interpolateNumber(from.startAngle, to.startAngle);
+  const interpolateEndAngle = interpolateNumber(from.endAngle, to.endAngle);
+  const interpolateInnerRadius = interpolateNumber(from.innerRadius, to.innerRadius);
+  const interpolateOuterRadius = interpolateNumber(from.outerRadius, to.outerRadius);
+  const interpolateCornerRadius = interpolateNumber(from.cornerRadius, to.cornerRadius);
+  return t => {
+    return {
+      startAngle: interpolateStartAngle(t),
+      endAngle: interpolateEndAngle(t),
+      innerRadius: interpolateInnerRadius(t),
+      outerRadius: interpolateOuterRadius(t),
+      cornerRadius: interpolateCornerRadius(t)
+    };
+  };
+}
+
+/** Animates a arc of a gauge chart by increasing the `endAngle` from the start angle to the end angle.
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called. */
+export function useAnimateGaugeValueArc(props) {
+  return useAnimate({
+    startAngle: props.startAngle,
+    endAngle: props.endAngle,
+    innerRadius: props.innerRadius,
+    outerRadius: props.outerRadius,
+    cornerRadius: props.cornerRadius
+  }, {
+    createInterpolator: gaugeValueArcPropsInterpolator,
+    transformProps: p => ({
+      d: d3Arc().cornerRadius(p.cornerRadius)({
+        innerRadius: p.innerRadius,
+        outerRadius: p.outerRadius,
+        startAngle: p.startAngle,
+        endAngle: p.endAngle
+      })
+    }),
+    applyProps(element, p) {
+      element.setAttribute('d', p.d);
+    },
+    initialProps: {
+      startAngle: props.startAngle,
+      endAngle: props.startAngle,
+      innerRadius: props.innerRadius,
+      outerRadius: props.outerRadius,
+      cornerRadius: props.cornerRadius
+    },
+    skip: props.skipAnimation,
+    ref: props.ref
+  });
+}

package/hooks/animation/useAnimateLine.d.mts

@@ -0,0 +1,14 @@
+import type * as React from 'react';
+import type { AnimatedLineProps } from "../../LineChart/index.mjs";
+type UseAnimateLineParams = Pick<AnimatedLineProps, 'd' | 'skipAnimation'> & {
+  ref?: React.Ref<SVGPathElement>;
+};
+type UseAnimatedReturnValue = {
+  ref: React.Ref<SVGPathElement>;
+  d: string;
+};
+/** Animates a line of a line chart using a `path` element.
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called. */
+export declare function useAnimateLine(props: UseAnimateLineParams): UseAnimatedReturnValue;
+export {};

package/hooks/animation/useAnimateLine.mjs

@@ -0,0 +1,23 @@
+import { interpolateString } from '@mui/x-charts-vendor/d3-interpolate';
+import { useAnimate } from "./useAnimate.mjs";
+/** Animates a line of a line chart using a `path` element.
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called. */
+export function useAnimateLine(props) {
+  return useAnimate({
+    d: props.d
+  }, {
+    createInterpolator: (lastProps, newProps) => {
+      const interpolate = interpolateString(lastProps.d, newProps.d);
+      return t => ({
+        d: interpolate(t)
+      });
+    },
+    applyProps: (element, {
+      d
+    }) => element.setAttribute('d', d),
+    skip: props.skipAnimation,
+    transformProps: p => p,
+    ref: props.ref
+  });
+}

package/hooks/animation/useAnimatePieArc.d.mts

@@ -0,0 +1,15 @@
+import type * as React from 'react';
+import type { PieArcProps } from "../../PieChart/index.mjs";
+type UseAnimatePieArcParams = Pick<PieArcProps, 'startAngle' | 'endAngle' | 'cornerRadius' | 'paddingAngle' | 'innerRadius' | 'outerRadius' | 'skipAnimation'> & {
+  ref?: React.Ref<SVGPathElement>;
+};
+type UseAnimatePieArcReturnValue = {
+  ref: React.Ref<SVGPathElement>;
+  d: string;
+  visibility: 'hidden' | 'visible';
+};
+/** Animates a slice of a pie chart by increasing the start and end angles from the middle angle to their final values.
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called. */
+export declare function useAnimatePieArc(props: UseAnimatePieArcParams): UseAnimatePieArcReturnValue;
+export {};

package/hooks/animation/useAnimatePieArc.mjs

@@ -0,0 +1,62 @@
+import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
+import { interpolateNumber } from '@mui/x-charts-vendor/d3-interpolate';
+import { useAnimate } from "./useAnimate.mjs";
+function pieArcPropsInterpolator(from, to) {
+  const interpolateStartAngle = interpolateNumber(from.startAngle, to.startAngle);
+  const interpolateEndAngle = interpolateNumber(from.endAngle, to.endAngle);
+  const interpolateInnerRadius = interpolateNumber(from.innerRadius, to.innerRadius);
+  const interpolateOuterRadius = interpolateNumber(from.outerRadius, to.outerRadius);
+  const interpolatePaddingAngle = interpolateNumber(from.paddingAngle, to.paddingAngle);
+  const interpolateCornerRadius = interpolateNumber(from.cornerRadius, to.cornerRadius);
+  return t => {
+    return {
+      startAngle: interpolateStartAngle(t),
+      endAngle: interpolateEndAngle(t),
+      innerRadius: interpolateInnerRadius(t),
+      outerRadius: interpolateOuterRadius(t),
+      paddingAngle: interpolatePaddingAngle(t),
+      cornerRadius: interpolateCornerRadius(t)
+    };
+  };
+}
+
+/** Animates a slice of a pie chart by increasing the start and end angles from the middle angle to their final values.
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called. */
+export function useAnimatePieArc(props) {
+  const initialProps = {
+    startAngle: (props.startAngle + props.endAngle) / 2,
+    endAngle: (props.startAngle + props.endAngle) / 2,
+    innerRadius: props.innerRadius,
+    outerRadius: props.outerRadius,
+    paddingAngle: props.paddingAngle,
+    cornerRadius: props.cornerRadius
+  };
+  return useAnimate({
+    startAngle: props.startAngle,
+    endAngle: props.endAngle,
+    innerRadius: props.innerRadius,
+    outerRadius: props.outerRadius,
+    paddingAngle: props.paddingAngle,
+    cornerRadius: props.cornerRadius
+  }, {
+    createInterpolator: pieArcPropsInterpolator,
+    transformProps: p => ({
+      d: d3Arc().cornerRadius(p.cornerRadius)({
+        padAngle: p.paddingAngle,
+        innerRadius: p.innerRadius,
+        outerRadius: p.outerRadius,
+        startAngle: p.startAngle,
+        endAngle: p.endAngle
+      }),
+      visibility: p.startAngle === p.endAngle ? 'hidden' : 'visible'
+    }),
+    applyProps(element, p) {
+      element.setAttribute('d', p.d);
+      element.setAttribute('visibility', p.visibility);
+    },
+    initialProps,
+    skip: props.skipAnimation,
+    ref: props.ref
+  });
+}

package/hooks/animation/useAnimatePieArcLabel.d.mts

@@ -0,0 +1,24 @@
+import type * as React from 'react';
+import type { PieArcLabelProps } from "../../PieChart/index.mjs";
+type UseAnimatePieArcLabelParams = Pick<PieArcLabelProps, 'startAngle' | 'endAngle' | 'cornerRadius' | 'paddingAngle' | 'skipAnimation'> & {
+  ref?: React.Ref<SVGTextElement>;
+  arcLabelRadius?: number;
+  /**
+   * @deprecated Use `arcLabelRadius` instead. This prop will be removed in the next major version.
+   */
+  innerRadius: PieArcLabelProps['innerRadius'];
+  /**
+   * @deprecated Use `arcLabelRadius` instead. This prop will be removed in the next major version.
+   */
+  outerRadius: PieArcLabelProps['outerRadius'];
+};
+type UseAnimatePieArcLabelReturn = {
+  ref: React.Ref<SVGTextElement>;
+  x: number;
+  y: number;
+};
+/** Animates the label of pie slice from its middle point to the centroid of the slice.
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called. */
+export declare function useAnimatePieArcLabel(props: UseAnimatePieArcLabelParams): UseAnimatePieArcLabelReturn;
+export {};

package/hooks/animation/useAnimatePieArcLabel.mjs

@@ -0,0 +1,68 @@
+import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
+import { interpolateNumber } from '@mui/x-charts-vendor/d3-interpolate';
+import { useAnimate } from "./useAnimate.mjs";
+function pieArcLabelPropsInterpolator(from, to) {
+  const interpolateStartAngle = interpolateNumber(from.startAngle, to.startAngle);
+  const interpolateEndAngle = interpolateNumber(from.endAngle, to.endAngle);
+  const interpolateInnerRadius = interpolateNumber(from.innerRadius, to.innerRadius);
+  const interpolateOuterRadius = interpolateNumber(from.outerRadius, to.outerRadius);
+  const interpolatePaddingAngle = interpolateNumber(from.paddingAngle, to.paddingAngle);
+  const interpolateCornerRadius = interpolateNumber(from.cornerRadius, to.cornerRadius);
+  return t => {
+    return {
+      startAngle: interpolateStartAngle(t),
+      endAngle: interpolateEndAngle(t),
+      innerRadius: interpolateInnerRadius(t),
+      outerRadius: interpolateOuterRadius(t),
+      paddingAngle: interpolatePaddingAngle(t),
+      cornerRadius: interpolateCornerRadius(t)
+    };
+  };
+}
+
+/** Animates the label of pie slice from its middle point to the centroid of the slice.
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called. */
+export function useAnimatePieArcLabel(props) {
+  const initialProps = {
+    startAngle: (props.startAngle + props.endAngle) / 2,
+    endAngle: (props.startAngle + props.endAngle) / 2,
+    innerRadius: props.arcLabelRadius ?? props.innerRadius,
+    outerRadius: props.arcLabelRadius ?? props.outerRadius,
+    paddingAngle: props.paddingAngle,
+    cornerRadius: props.cornerRadius
+  };
+  return useAnimate({
+    startAngle: props.startAngle,
+    endAngle: props.endAngle,
+    innerRadius: props.arcLabelRadius ?? props.innerRadius,
+    outerRadius: props.arcLabelRadius ?? props.outerRadius,
+    paddingAngle: props.paddingAngle,
+    cornerRadius: props.cornerRadius
+  }, {
+    createInterpolator: pieArcLabelPropsInterpolator,
+    transformProps: animatedProps => {
+      const [x, y] = d3Arc().cornerRadius(animatedProps.cornerRadius).centroid({
+        padAngle: animatedProps.paddingAngle,
+        startAngle: animatedProps.startAngle,
+        endAngle: animatedProps.endAngle,
+        innerRadius: animatedProps.innerRadius,
+        outerRadius: animatedProps.outerRadius
+      });
+      return {
+        x,
+        y
+      };
+    },
+    applyProps(element, {
+      x,
+      y
+    }) {
+      element.setAttribute('x', x.toString());
+      element.setAttribute('y', y.toString());
+    },
+    initialProps,
+    skip: props.skipAnimation,
+    ref: props.ref
+  });
+}

package/hooks/getValueToPositionMapper.d.mts

@@ -0,0 +1,12 @@
+import type { D3Scale } from "../models/axis.mjs";
+/**
+ * For a given scale return a function that map value to their position.
+ * Useful when dealing with specific scale such as band.
+ * @param {D3Scale} scale The scale to use
+ * @returns {(value: any) => number} A function that map value to their position
+ */
+export declare function getValueToPositionMapper<Domain extends {
+  toString(): string;
+} = {
+  toString(): string;
+}, Range = number>(scale: D3Scale<Domain, Range>): (value: any) => number;

package/hooks/getValueToPositionMapper.d.ts

@@ -0,0 +1,12 @@
+import type { D3Scale } from "../models/axis.js";
+/**
+ * For a given scale return a function that map value to their position.
+ * Useful when dealing with specific scale such as band.
+ * @param {D3Scale} scale The scale to use
+ * @returns {(value: any) => number} A function that map value to their position
+ */
+export declare function getValueToPositionMapper<Domain extends {
+  toString(): string;
+} = {
+  toString(): string;
+}, Range = number>(scale: D3Scale<Domain, Range>): (value: any) => number;

package/hooks/getValueToPositionMapper.js

@@ -0,0 +1,26 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getValueToPositionMapper = getValueToPositionMapper;
+var _scaleGuards = require("../internals/scaleGuards");
+/**
+ * For a given scale return a function that map value to their position.
+ * Useful when dealing with specific scale such as band.
+ * @param {D3Scale} scale The scale to use
+ * @returns {(value: any) => number} A function that map value to their position
+ */
+function getValueToPositionMapper(scale) {
+  if ((0, _scaleGuards.isOrdinalScale)(scale)) {
+    return value => (scale(value) ?? 0) + scale.bandwidth() / 2;
+  }
+  const domain = scale.domain();
+
+  // Fixes https://github.com/mui/mui-x/issues/18999#issuecomment-3173787401
+  if (domain[0] === domain[1]) {
+    return value => value === domain[0] ? scale(value) : NaN;
+  }
+  return value => scale(value);
+}

package/hooks/getValueToPositionMapper.mjs

@@ -0,0 +1,21 @@
+'use client';
+
+import { isOrdinalScale } from "../internals/scaleGuards.mjs";
+/**
+ * For a given scale return a function that map value to their position.
+ * Useful when dealing with specific scale such as band.
+ * @param {D3Scale} scale The scale to use
+ * @returns {(value: any) => number} A function that map value to their position
+ */
+export function getValueToPositionMapper(scale) {
+  if (isOrdinalScale(scale)) {
+    return value => (scale(value) ?? 0) + scale.bandwidth() / 2;
+  }
+  const domain = scale.domain();
+
+  // Fixes https://github.com/mui/mui-x/issues/18999#issuecomment-3173787401
+  if (domain[0] === domain[1]) {
+    return value => value === domain[0] ? scale(value) : NaN;
+  }
+  return value => scale(value);
+}

package/hooks/index.d.mts

@@ -0,0 +1,27 @@
+export * from "./useDrawingArea.mjs";
+export * from "./useChartId.mjs";
+export * from "./useScale.mjs";
+export * from "./useAxis.mjs";
+export * from "./useZAxis.mjs";
+export * from "./useColorScale.mjs";
+export * from "./useChartsLayerContainerRef.mjs";
+export * from "./useSeries.mjs";
+export * from "./useDataset.mjs";
+export * from "./useScatterSeries.mjs";
+export { type UsePieSeriesReturnValue, type UsePieSeriesContextReturnValue, usePieSeries, usePieSeriesContext } from "./usePieSeries.mjs";
+export * from "./useBarSeries.mjs";
+export * from "./useLineSeries.mjs";
+export * from "./useRadarSeries.mjs";
+export * from "./useItemHighlighted.mjs";
+export * from "./useItemHighlightedGetter.mjs";
+export * from "./useLegend.mjs";
+export { useChartGradientId, useChartGradientIdObjectBound } from "./useChartGradientId.mjs";
+export * from "./animation/index.mjs";
+export * from "./useChartRootRef.mjs";
+export * from "./useChartsLocalization.mjs";
+export * from "./useBrush.mjs";
+export * from "./useFocusedItem.mjs";
+export { useXAxisCoordinates, useYAxisCoordinates, type AxisCoordinates } from "./useAxisCoordinates.mjs";
+export * from "./useAxisTicks.mjs";
+export { type TickItem } from "./useTicks.mjs";
+export * from "./getValueToPositionMapper.mjs";

package/hooks/index.d.ts

@@ -4,7 +4,7 @@ export * from "./useScale.js";
 export * from "./useAxis.js";
 export * from "./useZAxis.js";
 export * from "./useColorScale.js";
-export * from "./useSvgRef.js";
+export * from "./useChartsLayerContainerRef.js";
 export * from "./useSeries.js";
 export * from "./useDataset.js";
 export * from "./useScatterSeries.js";
@@ -23,4 +23,5 @@ export * from "./useBrush.js";
 export * from "./useFocusedItem.js";
 export { useXAxisCoordinates, useYAxisCoordinates, type AxisCoordinates } from "./useAxisCoordinates.js";
 export * from "./useAxisTicks.js";
-export { type TickItem } from "./useTicks.js";
+export { type TickItem } from "./useTicks.js";
+export * from "./getValueToPositionMapper.js";

package/hooks/index.js

@@ -119,15 +119,15 @@ Object.keys(_useColorScale).forEach(function (key) {
     }
   });
 });
-var _useSvgRef = require("./useSvgRef");
-Object.keys(_useSvgRef).forEach(function (key) {
+var _useChartsLayerContainerRef = require("./useChartsLayerContainerRef");
+Object.keys(_useChartsLayerContainerRef).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _useSvgRef[key]) return;
+  if (key in exports && exports[key] === _useChartsLayerContainerRef[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _useSvgRef[key];
+      return _useChartsLayerContainerRef[key];
     }
   });
 });
@@ -313,4 +313,16 @@ Object.keys(_useAxisTicks).forEach(function (key) {
       return _useAxisTicks[key];
     }
   });
+});
+var _getValueToPositionMapper = require("./getValueToPositionMapper");
+Object.keys(_getValueToPositionMapper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _getValueToPositionMapper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _getValueToPositionMapper[key];
+    }
+  });
 });

package/hooks/index.mjs

@@ -0,0 +1,26 @@
+export * from "./useDrawingArea.mjs";
+export * from "./useChartId.mjs";
+export * from "./useScale.mjs";
+export * from "./useAxis.mjs";
+export * from "./useZAxis.mjs";
+export * from "./useColorScale.mjs";
+export * from "./useChartsLayerContainerRef.mjs";
+export * from "./useSeries.mjs";
+export * from "./useDataset.mjs";
+export * from "./useScatterSeries.mjs";
+export { usePieSeries, usePieSeriesContext } from "./usePieSeries.mjs";
+export * from "./useBarSeries.mjs";
+export * from "./useLineSeries.mjs";
+export * from "./useRadarSeries.mjs";
+export * from "./useItemHighlighted.mjs";
+export * from "./useItemHighlightedGetter.mjs";
+export * from "./useLegend.mjs";
+export { useChartGradientId, useChartGradientIdObjectBound } from "./useChartGradientId.mjs";
+export * from "./animation/index.mjs";
+export * from "./useChartRootRef.mjs";
+export * from "./useChartsLocalization.mjs";
+export * from "./useBrush.mjs";
+export * from "./useFocusedItem.mjs";
+export { useXAxisCoordinates, useYAxisCoordinates } from "./useAxisCoordinates.mjs";
+export * from "./useAxisTicks.mjs";
+export * from "./getValueToPositionMapper.mjs";