@mui/x-charts 8.5.3 → 8.7.0

package/esm/BarChart/useBarPlotData.js

@@ -0,0 +1,139 @@
+import getColor from "./seriesConfig/getColor.js";
+import { useChartId, useXAxes, useYAxes } from "../hooks/index.js";
+import { checkScaleErrors } from "./checkScaleErrors.js";
+import { useBarSeriesContext } from "../hooks/useBarSeries.js";
+export function useBarPlotData(drawingArea, xAxes, yAxes) {
+  const seriesData = useBarSeriesContext() ?? {
+    series: {},
+    stackingGroups: [],
+    seriesOrder: []
+  };
+  const defaultXAxisId = useXAxes().xAxisIds[0];
+  const defaultYAxisId = useYAxes().yAxisIds[0];
+  const chartId = useChartId();
+  const {
+    series,
+    stackingGroups
+  } = seriesData;
+  const masks = {};
+  const data = stackingGroups.flatMap(({
+    ids: seriesIds
+  }, groupIndex) => {
+    const xMin = drawingArea.left;
+    const xMax = drawingArea.left + drawingArea.width;
+    const yMin = drawingArea.top;
+    const yMax = drawingArea.top + drawingArea.height;
+    return seriesIds.map(seriesId => {
+      const xAxisId = series[seriesId].xAxisId ?? defaultXAxisId;
+      const yAxisId = series[seriesId].yAxisId ?? defaultYAxisId;
+      const xAxisConfig = xAxes[xAxisId];
+      const yAxisConfig = yAxes[yAxisId];
+      const verticalLayout = series[seriesId].layout === 'vertical';
+      checkScaleErrors(verticalLayout, seriesId, series[seriesId], xAxisId, xAxes, yAxisId, yAxes);
+      const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
+      const xScale = xAxisConfig.scale;
+      const yScale = yAxisConfig.scale;
+      const colorGetter = getColor(series[seriesId], xAxes[xAxisId], yAxes[yAxisId]);
+      const bandWidth = baseScaleConfig.scale.bandwidth();
+      const {
+        barWidth,
+        offset
+      } = getBandSize({
+        bandWidth,
+        numberOfGroups: stackingGroups.length,
+        gapRatio: baseScaleConfig.barGapRatio
+      });
+      const barOffset = groupIndex * (barWidth + offset);
+      const {
+        stackedData,
+        data: currentSeriesData,
+        layout
+      } = series[seriesId];
+      const seriesDataPoints = baseScaleConfig.data.map((baseValue, dataIndex) => {
+        if (currentSeriesData[dataIndex] == null) {
+          return null;
+        }
+        const values = stackedData[dataIndex];
+        const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
+        const minValueCoord = Math.round(Math.min(...valueCoordinates));
+        const maxValueCoord = Math.round(Math.max(...valueCoordinates));
+        const stackId = series[seriesId].stack;
+        const result = {
+          seriesId,
+          dataIndex,
+          layout,
+          x: verticalLayout ? xScale(baseValue) + barOffset : minValueCoord,
+          y: verticalLayout ? minValueCoord : yScale(baseValue) + barOffset,
+          xOrigin: xScale(0) ?? 0,
+          yOrigin: yScale(0) ?? 0,
+          height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,
+          width: verticalLayout ? barWidth : maxValueCoord - minValueCoord,
+          color: colorGetter(dataIndex),
+          value: currentSeriesData[dataIndex],
+          maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
+        };
+        if (result.x > xMax || result.x + result.width < xMin || result.y > yMax || result.y + result.height < yMin) {
+          return null;
+        }
+        if (!masks[result.maskId]) {
+          masks[result.maskId] = {
+            id: result.maskId,
+            width: 0,
+            height: 0,
+            hasNegative: false,
+            hasPositive: false,
+            layout: result.layout,
+            xOrigin: xScale(0),
+            yOrigin: yScale(0),
+            x: 0,
+            y: 0
+          };
+        }
+        const mask = masks[result.maskId];
+        mask.width = result.layout === 'vertical' ? result.width : mask.width + result.width;
+        mask.height = result.layout === 'vertical' ? mask.height + result.height : result.height;
+        mask.x = Math.min(mask.x === 0 ? Infinity : mask.x, result.x);
+        mask.y = Math.min(mask.y === 0 ? Infinity : mask.y, result.y);
+        mask.hasNegative = mask.hasNegative || (result.value ?? 0) < 0;
+        mask.hasPositive = mask.hasPositive || (result.value ?? 0) > 0;
+        return result;
+      }).filter(rectangle => rectangle !== null);
+      return {
+        seriesId,
+        data: seriesDataPoints
+      };
+    });
+  });
+  return {
+    completedData: data,
+    masksData: Object.values(masks)
+  };
+}
+
+/**
+ * Solution of the equations
+ * W = barWidth * N + offset * (N-1)
+ * offset / (offset + barWidth) = r
+ * @param bandWidth The width available to place bars.
+ * @param numberOfGroups The number of bars to place in that space.
+ * @param gapRatio The ratio of the gap between bars over the bar width.
+ * @returns The bar width and the offset between bars.
+ */
+function getBandSize({
+  bandWidth: W,
+  numberOfGroups: N,
+  gapRatio: r
+}) {
+  if (r === 0) {
+    return {
+      barWidth: W / N,
+      offset: 0
+    };
+  }
+  const barWidth = W / (N + (N - 1) * r);
+  const offset = r * barWidth;
+  return {
+    barWidth,
+    offset
+  };
+}

package/esm/ChartContainer/ChartContainer.d.ts

@@ -1,30 +1,10 @@
 import * as React from 'react';
-import { PieChartPluginSignatures } from "../PieChart/PieChart.plugins.js";
-import { BarChartPluginsSignatures } from "../BarChart/BarChart.plugins.js";
-import { ScatterChartPluginsSignatures } from "../ScatterChart/ScatterChart.plugins.js";
-import { LineChartPluginsSignatures } from "../LineChart/LineChart.plugins.js";
 import { ChartSeriesType } from "../models/seriesType/config.js";
 import { ChartDataProviderProps } from "../ChartDataProvider/index.js";
 import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
-import { AllPluginSignatures, DefaultPluginSignatures } from "../internals/plugins/allPlugins.js";
+import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 import { ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
-import { ChartPublicAPI } from "../internals/plugins/models/index.js";
 export type ChartContainerProps<SeriesType extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<SeriesType>> = Omit<ChartDataProviderProps<SeriesType, TSignatures>, 'children'> & ChartsSurfaceProps;
-type PluginsPerSeriesType = {
-  line: LineChartPluginsSignatures;
-  scatter: ScatterChartPluginsSignatures;
-  bar: BarChartPluginsSignatures;
-  pie: PieChartPluginSignatures;
-  composition: DefaultPluginSignatures;
-};
-/**
- * The API of the chart `apiRef` object.
- * The chart type can be passed as the first generic parameter to narrow down the API to the specific chart type.
- * @example ChartApi<'bar'>
- * If the chart is being created using composition, the `composition` value can be used.
- * @example ChartApi<'composition'>
- */
-export type ChartApi<TSeries extends keyof PluginsPerSeriesType | undefined = undefined, TSignatures extends readonly ChartAnyPluginSignature[] = (TSeries extends keyof PluginsPerSeriesType ? PluginsPerSeriesType[TSeries] : AllPluginSignatures)> = ChartPublicAPI<TSignatures>;
 /**
  * It sets up the data providers as well as the `<svg>` for the chart.
  *

package/esm/ChartContainer/ChartContainer.js

@@ -6,14 +6,6 @@ import PropTypes from 'prop-types';
 import { ChartDataProvider } from "../ChartDataProvider/index.js";
 import { useChartContainerProps } from "./useChartContainerProps.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
-
-/**
- * The API of the chart `apiRef` object.
- * The chart type can be passed as the first generic parameter to narrow down the API to the specific chart type.
- * @example ChartApi<'bar'>
- * If the chart is being created using composition, the `composition` value can be used.
- * @example ChartApi<'composition'>
- */
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * It sets up the data providers as well as the `<svg>` for the chart.

package/esm/ChartContainer/index.d.ts

@@ -1 +1,8 @@
-export * from "./ChartContainer.js";
+import type { ChartApi as ChartApiOriginal, PluginsPerSeriesType } from "../context/ChartApi.js";
+import type { ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
+import type { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
+export * from "./ChartContainer.js";
+/**
+ * @deprecated Use `ChartApi` from `@mui/x-charts/context` instead.
+ */
+export type ChartApi<TSeries extends keyof PluginsPerSeriesType | undefined = undefined, TSignatures extends readonly ChartAnyPluginSignature[] = (TSeries extends keyof PluginsPerSeriesType ? PluginsPerSeriesType[TSeries] : AllPluginSignatures)> = ChartApiOriginal<TSeries, TSignatures>;

package/esm/ChartContainer/index.js

@@ -1 +1,6 @@
-export * from "./ChartContainer.js";
+export * from "./ChartContainer.js";
+
+/**
+ * @deprecated Use `ChartApi` from `@mui/x-charts/context` instead.
+ */
+export {};

package/esm/ChartsLegend/ChartsLegend.js

@@ -81,6 +81,7 @@ const ChartsLegend = consumeSlots('MuiChartsLegend', 'legend', {
     children: data.items.map((item, i) => {
       return /*#__PURE__*/_jsx("li", {
         className: classes?.item,
+        "data-series": item.id,
         children: /*#__PURE__*/_jsxs(Element, {
           className: classes?.series,
           role: onItemClick ? 'button' : undefined,

package/esm/ChartsReferenceLine/ChartsReferenceLine.d.ts

@@ -7,4 +7,4 @@ declare function ChartsReferenceLine(props: ChartsReferenceLineProps): React.JSX
 declare namespace ChartsReferenceLine {
   var propTypes: any;
 }
-export { ChartsReferenceLine };
+export { ChartsReferenceLine, type ChartsReferenceLineProps };

package/esm/ChartsReferenceLine/ChartsXReferenceLine.d.ts

@@ -10,4 +10,7 @@ export type ChartsXReferenceLineProps<TValue extends string | number | Date = st
 };
 export declare function getXReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>): Record<"root" | "line" | "label", string>;
 declare function ChartsXReferenceLine(props: ChartsXReferenceLineProps): React.JSX.Element | null;
+declare namespace ChartsXReferenceLine {
+  var propTypes: any;
+}
 export { ChartsXReferenceLine };

package/esm/ChartsReferenceLine/ChartsXReferenceLine.js

@@ -2,6 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import { warnOnce } from '@mui/x-internals/warning';
 import { useDrawingArea, useXScale } from "../hooks/index.js";
@@ -99,4 +100,50 @@ function ChartsXReferenceLine(props) {
     }))]
   });
 }
+process.env.NODE_ENV !== "production" ? ChartsXReferenceLine.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The id of the axis used for the reference value.
+   * @default The `id` of the first defined axis.
+   */
+  axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * The label to display along the reference line.
+   */
+  label: PropTypes.string,
+  /**
+   * The alignment if the label is in the chart drawing area.
+   * @default 'middle'
+   */
+  labelAlign: PropTypes.oneOf(['end', 'middle', 'start']),
+  /**
+   * The style applied to the label.
+   */
+  labelStyle: PropTypes.object,
+  /**
+   * The style applied to the line.
+   */
+  lineStyle: PropTypes.object,
+  /**
+   * Additional space around the label in px.
+   * Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes.
+   * @default 5
+   */
+  spacing: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    x: PropTypes.number,
+    y: PropTypes.number
+  })]),
+  /**
+   * The x value associated with the reference line.
+   * If defined the reference line will be vertical.
+   */
+  x: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired
+} : void 0;
 export { ChartsXReferenceLine };

package/esm/ChartsReferenceLine/ChartsYReferenceLine.d.ts

@@ -10,4 +10,7 @@ export type ChartsYReferenceLineProps<TValue extends string | number | Date = st
 };
 export declare function getYReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>): Record<"root" | "line" | "label", string>;
 declare function ChartsYReferenceLine(props: ChartsYReferenceLineProps): React.JSX.Element | null;
+declare namespace ChartsYReferenceLine {
+  var propTypes: any;
+}
 export { ChartsYReferenceLine };

package/esm/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -2,6 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import { warnOnce } from '@mui/x-internals/warning';
 import { useDrawingArea, useYScale } from "../hooks/index.js";
@@ -99,4 +100,50 @@ function ChartsYReferenceLine(props) {
     }))]
   });
 }
+process.env.NODE_ENV !== "production" ? ChartsYReferenceLine.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The id of the axis used for the reference value.
+   * @default The `id` of the first defined axis.
+   */
+  axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * The label to display along the reference line.
+   */
+  label: PropTypes.string,
+  /**
+   * The alignment if the label is in the chart drawing area.
+   * @default 'middle'
+   */
+  labelAlign: PropTypes.oneOf(['end', 'middle', 'start']),
+  /**
+   * The style applied to the label.
+   */
+  labelStyle: PropTypes.object,
+  /**
+   * The style applied to the line.
+   */
+  lineStyle: PropTypes.object,
+  /**
+   * Additional space around the label in px.
+   * Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes.
+   * @default 5
+   */
+  spacing: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    x: PropTypes.number,
+    y: PropTypes.number
+  })]),
+  /**
+   * The y value associated with the reference line.
+   * If defined the reference line will be horizontal.
+   */
+  y: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired
+} : void 0;
 export { ChartsYReferenceLine };

package/esm/ChartsReferenceLine/index.d.ts

@@ -1,2 +1,4 @@
 export * from "./ChartsReferenceLine.js";
-export * from "./chartsReferenceLineClasses.js";
+export * from "./chartsReferenceLineClasses.js";
+export type { ChartsXReferenceLineProps } from "./ChartsXReferenceLine.js";
+export type { ChartsYReferenceLineProps } from "./ChartsYReferenceLine.js";

package/esm/ChartsReferenceLine/index.js

@@ -1,2 +1,3 @@
 export * from "./ChartsReferenceLine.js";
-export * from "./chartsReferenceLineClasses.js";
+export * from "./chartsReferenceLineClasses.js";
+export {};

package/esm/ChartsSurface/ChartsSurface.js

@@ -29,7 +29,8 @@ const ChartsSurfaceStyles = styled('svg', {
   overflow: 'hidden',
   // This prevents default touch actions when using the svg on mobile devices.
   // For example, prevent page scroll & zoom.
-  touchAction: 'none'
+  touchAction: 'pan-y',
+  userSelect: 'none'
 }));
 
 /**

package/esm/ChartsTooltip/ChartsTooltipContainer.js

@@ -10,7 +10,7 @@ import useLazyRef from '@mui/utils/useLazyRef';
 import { styled, useThemeProps } from '@mui/material/styles';
 import Popper from '@mui/material/Popper';
 import NoSsr from '@mui/material/NoSsr';
-import { useSvgRef } from "../hooks/useSvgRef.js";
+import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { useIsFineMainPointer, usePointerType } from "./utils.js";
 import { useUtilityClasses } from "./chartsTooltipClasses.js";
 import { useSelector } from "../internals/store/useSelector.js";
@@ -19,6 +19,7 @@ import { selectorChartsInteractionItemIsDefined } from "../internals/plugins/fea
 import { selectorChartsInteractionAxisTooltip } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { selectorChartsInteractionPolarAxisTooltip } from "../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.js";
 import { useAxisSystem } from "../hooks/useAxisSystem.js";
+import { useSvgRef } from "../hooks/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const noAxis = () => false;
 const ChartsTooltipRoot = styled(Popper, {
@@ -51,8 +52,8 @@ function ChartsTooltipContainer(inProps) {
       children
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const classes = useUtilityClasses(propClasses);
   const svgRef = useSvgRef();
+  const classes = useUtilityClasses(propClasses);
   const pointerType = usePointerType();
   const isFineMainPointer = useIsFineMainPointer();
   const popperRef = React.useRef(null);
@@ -68,19 +69,21 @@ function ChartsTooltipContainer(inProps) {
     if (element === null) {
       return () => {};
     }
+    const update = rafThrottle(() => popperRef.current?.update());
     const handlePointerEvent = event => {
       // eslint-disable-next-line react-compiler/react-compiler
       positionRef.current = {
         x: event.clientX,
         y: event.clientY
       };
-      popperRef.current?.update();
+      update();
     };
     element.addEventListener('pointerdown', handlePointerEvent);
     element.addEventListener('pointermove', handlePointerEvent);
     return () => {
       element.removeEventListener('pointerdown', handlePointerEvent);
       element.removeEventListener('pointermove', handlePointerEvent);
+      update.clear();
     };
   }, [svgRef, positionRef]);
   const anchorEl = React.useMemo(() => ({

package/esm/ChartsTooltip/ChartsTooltipTable.d.ts

@@ -13,6 +13,6 @@ export declare const ChartsTooltipRow: import("@emotion/styled").StyledComponent
 /**
  * @ignore - internal component.
  */
-export declare const ChartsTooltipCell: import("@emotion/styled").StyledComponent<Pick<import("@mui/material/Typography").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "p" | "style" | "typography" | "zIndex" | "classes" | "border" | "boxShadow" | "fontWeight" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "className" | "children" | "sx" | "align" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping">, "p" | "slot" | "style" | "title" | "ref" | "typography" | "zIndex" | "classes" | "border" | "boxShadow" | "fontWeight" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "content" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "translate" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "sx" | "align" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+export declare const ChartsTooltipCell: import("@emotion/styled").StyledComponent<Pick<import("@mui/material/Typography").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "p" | "style" | "typography" | "zIndex" | "classes" | "border" | "boxShadow" | "fontWeight" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "className" | "children" | "sx" | "align" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping">, "p" | "slot" | "style" | "title" | "ref" | "typography" | "zIndex" | "classes" | "border" | "boxShadow" | "fontWeight" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "content" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "translate" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "sx" | "align" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
   component?: React.ElementType;
 }, {}, {}>;

package/esm/ChartsTooltip/utils.js

@@ -2,55 +2,44 @@
 
 import * as React from 'react';
 import useMediaQuery from '@mui/material/useMediaQuery';
+import { useChartContext } from "../context/ChartProvider/index.js";
 import { useSvgRef } from "../hooks/index.js";
 /**
  * @deprecated We recommend using vanilla JS to let popper track mouse position.
  */
 export function useMouseTracker() {
-  const svgRef = useSvgRef();
+  const {
+    instance
+  } = useChartContext();
 
   // Use a ref to avoid rerendering on every mousemove event.
   const [mousePosition, setMousePosition] = React.useState(null);
   React.useEffect(() => {
-    const element = svgRef.current;
-    if (element === null) {
-      return () => {};
-    }
-    const controller = new AbortController();
-    const handleOut = event => {
-      if (event.pointerType !== 'mouse') {
+    const moveEndHandler = instance.addInteractionListener('moveEnd', event => {
+      if (!event.detail.activeGestures.pan) {
         setMousePosition(null);
       }
-    };
-    const handleMove = event => {
+    });
+    const gestureHandler = event => {
       setMousePosition({
-        x: event.clientX,
-        y: event.clientY,
-        height: event.height,
-        pointerType: event.pointerType
+        x: event.detail.centroid.x,
+        y: event.detail.centroid.y,
+        height: event.detail.srcEvent.height,
+        pointerType: event.detail.srcEvent.pointerType
       });
     };
-    element.addEventListener('pointerdown', handleMove, {
-      signal: controller.signal
-    });
-    element.addEventListener('pointermove', handleMove, {
-      signal: controller.signal
-    });
-    element.addEventListener('pointerup', handleOut, {
-      signal: controller.signal
-    });
+    const moveHandler = instance.addInteractionListener('move', gestureHandler);
+    const panHandler = instance.addInteractionListener('pan', gestureHandler);
     return () => {
-      // Calling `.abort()` removes ALL event listeners
-      // For more info, see https://kettanaito.com/blog/dont-sleep-on-abort-controller
-      controller.abort();
+      moveHandler.cleanup();
+      panHandler.cleanup();
+      moveEndHandler.cleanup();
     };
-  }, [svgRef]);
+  }, [instance]);
   return mousePosition;
 }
 export function usePointerType() {
   const svgRef = useSvgRef();
-
-  // Use a ref to avoid rerendering on every mousemove event.
   const [pointerType, setPointerType] = React.useState(null);
   React.useEffect(() => {
     const element = svgRef.current;