@mui/x-charts 7.7.1 → 7.9.0

package/ChartsTooltip/ChartsTooltipTable.d.ts

@@ -1,8 +1,22 @@
-/// <reference types="react" />
+/**
+ * @ignore - internal component.
+ */
 export declare const ChartsTooltipPaper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
+/**
+ * @ignore - internal component.
+ */
 export declare const ChartsTooltipTable: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, keyof import("react").ClassAttributes<HTMLTableElement> | keyof import("react").TableHTMLAttributes<HTMLTableElement>>, {}>;
+/**
+ * @ignore - internal component.
+ */
 export declare const ChartsTooltipRow: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, keyof import("react").ClassAttributes<HTMLTableRowElement> | keyof import("react").HTMLAttributes<HTMLTableRowElement>>, {}>;
+/**
+ * @ignore - internal component.
+ */
 export declare const ChartsTooltipCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, keyof import("react").ClassAttributes<HTMLTableDataCellElement> | keyof import("react").TdHTMLAttributes<HTMLTableDataCellElement>>, {}>;
+/**
+ * @ignore - internal component.
+ */
 export declare const ChartsTooltipMark: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     color: string;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/ChartsTooltip/ChartsTooltipTable.js

@@ -7,6 +7,9 @@ exports.ChartsTooltipTable = exports.ChartsTooltipRow = exports.ChartsTooltipPap
 var _styles = require("@mui/material/styles");
 var _system = require("@mui/system");
 var _chartsTooltipClasses = require("./chartsTooltipClasses");
+/**
+ * @ignore - internal component.
+ */
 const ChartsTooltipPaper = exports.ChartsTooltipPaper = (0, _styles.styled)('div', {
   name: 'MuiChartsTooltip',
   slot: 'Container'
@@ -19,6 +22,10 @@ const ChartsTooltipPaper = exports.ChartsTooltipPaper = (0, _styles.styled)('div
   transition: theme.transitions.create('box-shadow'),
   borderRadius: theme.shape.borderRadius
 }));
+
+/**
+ * @ignore - internal component.
+ */
 const ChartsTooltipTable = exports.ChartsTooltipTable = (0, _styles.styled)('table', {
   name: 'MuiChartsTooltip',
   slot: 'Table'
@@ -30,6 +37,10 @@ const ChartsTooltipTable = exports.ChartsTooltipTable = (0, _styles.styled)('tab
     borderBottom: `solid ${(theme.vars || theme).palette.divider} 1px`
   }
 }));
+
+/**
+ * @ignore - internal component.
+ */
 const ChartsTooltipRow = exports.ChartsTooltipRow = (0, _styles.styled)('tr', {
   name: 'MuiChartsTooltip',
   slot: 'Row'
@@ -43,6 +54,10 @@ const ChartsTooltipRow = exports.ChartsTooltipRow = (0, _styles.styled)('tr', {
     paddingBottom: theme.spacing(1)
   }
 }));
+
+/**
+ * @ignore - internal component.
+ */
 const ChartsTooltipCell = exports.ChartsTooltipCell = (0, _styles.styled)('td', {
   name: 'MuiChartsTooltip',
   slot: 'Cell'
@@ -65,6 +80,10 @@ const ChartsTooltipCell = exports.ChartsTooltipCell = (0, _styles.styled)('td',
     paddingRight: theme.spacing(2)
   }
 }));
+
+/**
+ * @ignore - internal component.
+ */
 const ChartsTooltipMark = exports.ChartsTooltipMark = (0, _styles.styled)('div', {
   name: 'MuiChartsTooltip',
   slot: 'Mark',

package/ChartsTooltip/index.d.ts

@@ -4,3 +4,4 @@ export * from './ChartsAxisTooltipContent';
 export * from './ChartsItemTooltipContent';
 export * from './DefaultChartsAxisTooltipContent';
 export * from './DefaultChartsItemTooltipContent';
+export * from './ChartsTooltipTable';

package/ChartsTooltip/index.js

@@ -68,4 +68,15 @@ Object.keys(_DefaultChartsItemTooltipContent).forEach(function (key) {
       return _DefaultChartsItemTooltipContent[key];
     }
   });
+});
+var _ChartsTooltipTable = require("./ChartsTooltipTable");
+Object.keys(_ChartsTooltipTable).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsTooltipTable[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsTooltipTable[key];
+    }
+  });
 });

package/ChartsTooltip/utils.d.ts

@@ -1,9 +1,12 @@
 import { AxisInteractionData, ItemInteractionData } from '../context/InteractionProvider';
 import { ChartSeriesType } from '../models/seriesType/config';
-export declare function generateVirtualElement(mousePosition: {
+type MousePosition = {
     x: number;
     y: number;
-} | null): {
+    pointerType: 'mouse' | 'touch' | 'pen';
+    height: number;
+};
+export declare function generateVirtualElement(mousePosition: MousePosition | null): {
     getBoundingClientRect: () => {
         width: number;
         height: number;
@@ -16,10 +19,8 @@ export declare function generateVirtualElement(mousePosition: {
         toJSON: () => string;
     };
 };
-export declare function useMouseTracker(): {
-    x: number;
-    y: number;
-} | null;
+export declare function useMouseTracker(): MousePosition | null;
 export type TriggerOptions = 'item' | 'axis' | 'none';
 export declare function getTooltipHasData(trigger: TriggerOptions, displayedData: null | AxisInteractionData | ItemInteractionData<ChartSeriesType>): boolean;
 export declare function utcFormatter(v: string | number | Date): string;
+export {};

package/ChartsTooltip/utils.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -7,6 +8,7 @@ exports.generateVirtualElement = generateVirtualElement;
 exports.getTooltipHasData = getTooltipHasData;
 exports.useMouseTracker = useMouseTracker;
 exports.utcFormatter = utcFormatter;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _hooks = require("../hooks");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -31,26 +33,19 @@ function generateVirtualElement(mousePosition) {
     x,
     y
   } = mousePosition;
+  const boundingBox = {
+    width: 0,
+    height: 0,
+    x,
+    y,
+    top: y,
+    right: x,
+    bottom: y,
+    left: x
+  };
   return {
-    getBoundingClientRect: () => ({
-      width: 0,
-      height: 0,
-      x,
-      y,
-      top: y,
-      right: x,
-      bottom: y,
-      left: x,
-      toJSON: () => JSON.stringify({
-        width: 0,
-        height: 0,
-        x,
-        y,
-        top: y,
-        right: x,
-        bottom: y,
-        left: x
-      })
+    getBoundingClientRect: () => (0, _extends2.default)({}, boundingBox, {
+      toJSON: () => JSON.stringify(boundingBox)
     })
   };
 }
@@ -68,21 +63,20 @@ function useMouseTracker() {
       setMousePosition(null);
     };
     const handleMove = event => {
-      const target = 'targetTouches' in event ? event.targetTouches[0] : event;
       setMousePosition({
-        x: target.clientX,
-        y: target.clientY
+        x: event.clientX,
+        y: event.clientY,
+        height: event.height,
+        pointerType: event.pointerType
       });
     };
-    element.addEventListener('mouseout', handleOut);
-    element.addEventListener('mousemove', handleMove);
-    element.addEventListener('touchend', handleOut);
-    element.addEventListener('touchmove', handleMove);
+    element.addEventListener('pointerdown', handleMove);
+    element.addEventListener('pointermove', handleMove);
+    element.addEventListener('pointerup', handleOut);
     return () => {
-      element.removeEventListener('mouseout', handleOut);
-      element.removeEventListener('mousemove', handleMove);
-      element.addEventListener('touchend', handleOut);
-      element.addEventListener('touchmove', handleMove);
+      element.removeEventListener('pointerdown', handleMove);
+      element.removeEventListener('pointermove', handleMove);
+      element.removeEventListener('pointerup', handleOut);
     };
   }, [svgRef]);
   return mousePosition;

package/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -12,7 +12,7 @@ var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedE
 var _InteractionProvider = require("../context/InteractionProvider");
 var _CartesianProvider = require("../context/CartesianProvider");
 var _useScale = require("../hooks/useScale");
-var _utils = require("../internals/utils");
+var _getSVGPoint = require("../internals/getSVGPoint");
 var _hooks = require("../hooks");
 var _context = require("../context");
 var _useSeries = require("../hooks/useSeries");
@@ -105,7 +105,7 @@ function ChartsVoronoiHandler(props) {
     // TODO: A perf optimisation of voronoi could be to use the last point as the initial point for the next search.
     function getClosestPoint(event) {
       // Get mouse coordinate in global SVG space
-      const svgPoint = (0, _utils.getSVGPoint)(svgRef.current, event);
+      const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, event);
       const outsideX = svgPoint.x < left || svgPoint.x > left + width;
       const outsideY = svgPoint.y < top || svgPoint.y > top + height;
       if (outsideX || outsideY) {
@@ -200,12 +200,12 @@ function ChartsVoronoiHandler(props) {
         dataIndex
       });
     };
-    element.addEventListener('mouseout', handleMouseOut);
-    element.addEventListener('mousemove', handleMouseMove);
+    element.addEventListener('pointerout', handleMouseOut);
+    element.addEventListener('pointermove', handleMouseMove);
     element.addEventListener('click', handleMouseClick);
     return () => {
-      element.removeEventListener('mouseout', handleMouseOut);
-      element.removeEventListener('mousemove', handleMouseMove);
+      element.removeEventListener('pointerout', handleMouseOut);
+      element.removeEventListener('pointermove', handleMouseMove);
       element.removeEventListener('click', handleMouseClick);
     };
   }, [svgRef, dispatch, left, width, top, height, yAxis, xAxis, voronoiMaxRadius, onItemClick, setHighlighted, clearHighlighted]);

package/ChartsXAxis/ChartsXAxis.js

@@ -218,10 +218,10 @@ function ChartsXAxis(inProps) {
     transform: `translate(0, ${position === 'bottom' ? top + height : top})`,
     className: classes.root,
     children: [!disableLine && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _extends2.default)({
-      x1: xScale.range()[0],
-      x2: xScale.range()[1],
+      x1: left,
+      x2: left + width,
       className: classes.line
-    }, slotProps?.axisLine)), xTicksWithDimension.map(({
+    }, slotProps?.axisLine)), xTicksWithDimension.filter(tick => tick.offset >= left - 1 && tick.offset <= left + width + 1).map(({
       formattedValue,
       offset,
       labelOffset,
@@ -229,13 +229,15 @@ function ChartsXAxis(inProps) {
     }, index) => {
       const xTickLabel = labelOffset ?? 0;
       const yTickLabel = positionSign * (tickSize + 3);
+      const showTick = offset >= left - 1 && offset <= left + width + 1;
+      const showTickLabel = offset + xTickLabel >= left - 1 && offset + xTickLabel <= left + width + 1;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
         transform: `translate(${offset}, 0)`,
         className: classes.tickContainer,
-        children: [!disableTicks && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tick, (0, _extends2.default)({
+        children: [!disableTicks && showTick && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tick, (0, _extends2.default)({
           y2: positionSign * tickSize,
           className: classes.tick
-        }, slotProps?.axisTick)), formattedValue !== undefined && !skipLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(TickLabel, (0, _extends2.default)({
+        }, slotProps?.axisTick)), formattedValue !== undefined && !skipLabel && showTickLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(TickLabel, (0, _extends2.default)({
           x: xTickLabel,
           y: yTickLabel
         }, axisTickLabelProps, {

package/ChartsYAxis/ChartsYAxis.js

@@ -90,6 +90,7 @@ function ChartsYAxis(inProps) {
     tickLabelInterval
   } = defaultizedProps;
   const theme = (0, _styles.useTheme)();
+  const isRTL = theme.direction === 'rtl';
   const classes = useUtilityClasses((0, _extends2.default)({}, defaultizedProps, {
     theme
   }));
@@ -117,13 +118,14 @@ function ChartsYAxis(inProps) {
   const Tick = slots?.axisTick ?? 'line';
   const TickLabel = slots?.axisTickLabel ?? _ChartsText.ChartsText;
   const Label = slots?.axisLabel ?? _ChartsText.ChartsText;
+  const revertAnchor = !isRTL && position === 'right' || isRTL && position !== 'right';
   const axisTickLabelProps = (0, _utils.useSlotProps)({
     elementType: TickLabel,
     externalSlotProps: slotProps?.axisTickLabel,
     additionalProps: {
       style: (0, _extends2.default)({
         fontSize: tickFontSize,
-        textAnchor: position === 'right' ? 'start' : 'end',
+        textAnchor: revertAnchor ? 'start' : 'end',
         dominantBaseline: 'central'
       }, tickLabelStyle)
     },

package/Gauge/GaugeProvider.d.ts

@@ -112,6 +112,6 @@ export declare function useGaugeState(): Required<GaugeConfig> & ProcessedCircul
     /**
      * The angle (rad) associated to the current value.
      */
-    valueAngle: number | null;
+    valueAngle: null | number;
 };
 export {};