@mui/x-charts-pro 8.5.2 → 8.6.0

package/esm/FunnelChart/labelUtils.d.ts

@@ -1,5 +1,5 @@
-import { FunnelDataPoints, FunnelLabelOptions } from "./funnel.types.js";
-import { PositionGetter } from "./positionGetter.js";
+import { FunnelLabelOptions } from "./funnel.types.js";
+import { Point } from "./curves/index.js";
 /**
  * It tries to keep the label inside the bounds of the section based on the position.
  *
@@ -24,19 +24,11 @@ export declare const alignLabel: ({
 export declare const positionLabel: ({
   position,
   offset,
-  xPosition,
-  yPosition,
   isHorizontal,
-  values,
-  dataIndex,
-  baseScaleData
+  values
 }: Omit<FunnelLabelOptions, "textAnchor" | "dominantBaseline"> & {
-  xPosition: PositionGetter;
-  yPosition: PositionGetter;
   isHorizontal: boolean;
-  values: readonly FunnelDataPoints[];
-  dataIndex: number;
-  baseScaleData: readonly number[];
+  values: readonly Point[];
 }) => {
   x: number;
   y: number;

package/esm/FunnelChart/labelUtils.js

@@ -39,17 +39,21 @@ export const alignLabel = ({
 export const positionLabel = ({
   position,
   offset,
-  xPosition,
-  yPosition,
   isHorizontal,
-  values,
-  dataIndex,
-  baseScaleData
+  values
 }) => {
   const vertical = position?.vertical ?? 'middle';
   const horizontal = position?.horizontal ?? 'center';
   let x = 0;
   let y = 0;
+
+  // The min/max values are due to the sections possibly being sloped.
+  // Importance of values differs from the horizontal and vertical sections.
+  // Example (vertical):
+  // MaxL         MaxT         MaxR
+  //  \                          /
+  //   \                        /
+  //    MinL      MaxB      MinR
   let minTop = 0;
   let maxTop = 0;
   let minBottom = 0;
@@ -58,56 +62,51 @@ export const positionLabel = ({
   let maxLeft = 0;
   let minRight = 0;
   let maxRight = 0;
-  let center = 0;
-  let leftCenter = 0;
-  let rightCenter = 0;
   let middle = 0;
-  let topMiddle = 0;
-  let bottomMiddle = 0;
+  let center = 0;
   const mv = typeof offset === 'number' ? offset : offset?.y ?? 0;
   const mh = typeof offset === 'number' ? offset : offset?.x ?? 0;
-  const stackOffset = values[0].stackOffset;
+
+  // Min ... Max
+  const Ys = values.map(v => v.y).toSorted((a, b) => a - b);
+  const Xs = values.map(v => v.x).toSorted((a, b) => a - b);
+
+  // Visualization of the points in a hierarchical order:
+  //              MaxT
+  //              MinT
+  // MaxL MinL  Cent/Mid  MinR MaxR
+  //              MinB
+  //              MaxB
   if (isHorizontal) {
-    maxTop = yPosition(values[0].y, baseScaleData[dataIndex], stackOffset) - mv;
-    minTop = yPosition(values[1].y, baseScaleData[dataIndex], stackOffset) - mv;
-    minBottom = yPosition(values[2].y, baseScaleData[dataIndex], stackOffset) + mv;
-    maxBottom = yPosition(values[3].y, baseScaleData[dataIndex], stackOffset) + mv;
-    minRight = 0;
-    maxRight = xPosition(Math.min(...values.map(v => v.x)), dataIndex, baseScaleData[dataIndex], stackOffset, true) + mh;
-    minLeft = 0;
-    maxLeft = xPosition(Math.max(...values.map(v => v.x)), dataIndex, baseScaleData[dataIndex], stackOffset) + mh;
-    center = maxRight - (maxRight - maxLeft) / 2;
-    leftCenter = 0;
-    rightCenter = 0;
-    middle = yPosition(0, dataIndex, baseScaleData[dataIndex], stackOffset) - mv;
-    topMiddle = yPosition(values[0].y - (values[0].y - values[1].y) / 2, dataIndex, baseScaleData[dataIndex], stackOffset) - mv;
-    bottomMiddle = yPosition(values[3].y - (values[3].y - values[2].y) / 2, dataIndex, baseScaleData[dataIndex], stackOffset) + mv;
+    maxTop = Ys.at(0) - mv;
+    minTop = Ys.at(1) - mv;
+    minBottom = Ys.at(2) + mv;
+    maxBottom = (Ys.at(3) ?? Ys.at(2)) + mv;
+    maxRight = (Xs.at(3) ?? Xs.at(2)) + mh;
+    // We don't need (minRight/minLeft) for horizontal
+    maxLeft = Xs.at(0) + mh;
+    center = (maxRight + maxLeft) / 2;
+    middle = (maxBottom + maxTop) / 2;
   } else {
-    minTop = 0;
-    maxTop = yPosition(Math.max(...values.map(v => v.y)), dataIndex, baseScaleData[dataIndex], stackOffset) - mv;
-    minBottom = 0;
-    maxBottom = yPosition(Math.min(...values.map(v => v.y)), dataIndex, baseScaleData[dataIndex], stackOffset, true) - mv;
-    maxRight = xPosition(values[0].x, dataIndex, baseScaleData[dataIndex], stackOffset) + mh;
-    minRight = xPosition(values[1].x, dataIndex, baseScaleData[dataIndex], stackOffset) + mh;
-    minLeft = xPosition(values[2].x, dataIndex, baseScaleData[dataIndex], stackOffset) - mh;
-    maxLeft = xPosition(values[3].x, dataIndex, baseScaleData[dataIndex], stackOffset) - mh;
-    center = xPosition(0, dataIndex, baseScaleData[dataIndex], stackOffset) - mh;
-    rightCenter = xPosition(values[0].x - (values[0].x - values[1].x) / 2, dataIndex, baseScaleData[dataIndex], stackOffset) + mh;
-    leftCenter = xPosition(values[3].x - (values[3].x - values[2].x) / 2, dataIndex, baseScaleData[dataIndex], stackOffset) - mh;
-    middle = yPosition(values[0].y - (values[0].y - values[1].y) / 2, dataIndex, baseScaleData[dataIndex], stackOffset);
-    middle = maxTop - (maxTop - maxBottom) / 2;
-    topMiddle = 0;
-    bottomMiddle = 0;
+    maxTop = Ys.at(0) - mv;
+    // We don't need (minTop/minBottom) for vertical
+    maxBottom = (Ys.at(3) ?? Ys.at(2)) - mv;
+    maxRight = (Xs.at(3) ?? Xs.at(2)) + mh;
+    minRight = Xs.at(2) + mh;
+    minLeft = Xs.at(1) - mh;
+    maxLeft = Xs.at(0) - mh;
+    center = (maxRight + maxLeft) / 2;
+    middle = (maxBottom + maxTop) / 2;
   }
   if (isHorizontal) {
     if (horizontal === 'center') {
       x = center;
       if (vertical === 'top') {
-        y = topMiddle;
+        y = (maxTop + minTop) / 2;
       } else if (vertical === 'middle') {
         y = middle;
       } else if (vertical === 'bottom') {
-        y = bottomMiddle;
+        y = (maxBottom + minBottom) / 2;
       }
     } else if (horizontal === 'start') {
       x = maxLeft;
@@ -133,11 +132,11 @@ export const positionLabel = ({
     if (vertical === 'middle') {
       y = middle;
       if (horizontal === 'start') {
-        x = leftCenter;
+        x = (maxLeft + minLeft) / 2;
       } else if (horizontal === 'center') {
         x = center;
       } else if (horizontal === 'end') {
-        x = rightCenter;
+        x = (maxRight + minRight) / 2;
       }
     } else if (vertical === 'top') {
       y = maxTop;

package/esm/index.d.ts

@@ -37,4 +37,5 @@ export * from "./PieChartPro/index.js";
 export * from "./FunnelChart/index.js";
 export * from "./RadarChartPro/index.js";
 export * from "./ChartZoomSlider/index.js";
-export * from "./ChartsToolbarPro/index.js";
+export * from "./ChartsToolbarPro/index.js";
+export type { ChartImageExportOptions, ChartPrintExportOptions } from "./internals/plugins/useChartProExport/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.5.2
+ * @mui/x-charts-pro v8.6.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/esm/internals/material/components/BaseMenuItem.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ChartBaseMenuItemProps } from "../../slots/chartBaseSlotProps.js";
+export declare function BaseMenuItem(props: ChartBaseMenuItemProps): React.JSX.Element;

package/esm/internals/material/components/BaseMenuItem.js

@@ -0,0 +1,27 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["inert", "iconStart", "iconEnd", "children"];
+import * as React from 'react';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function BaseMenuItem(props) {
+  const {
+      inert,
+      iconStart,
+      iconEnd,
+      children
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  return /*#__PURE__*/_jsxs(MenuItem, _extends({}, other, {
+    disableRipple: inert ? true : other.disableRipple,
+    children: [iconStart && /*#__PURE__*/_jsx(ListItemIcon, {
+      children: iconStart
+    }, "1"), /*#__PURE__*/_jsx(ListItemText, {
+      children: children
+    }, "2"), iconEnd && /*#__PURE__*/_jsx(ListItemIcon, {
+      children: iconEnd
+    }, "3")]
+  }));
+}

package/esm/internals/material/components/BasePopper.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ChartBasePopperProps } from "../../slots/chartBaseSlotProps.js";
+export declare function BasePopper(props: ChartBasePopperProps): React.JSX.Element;

package/esm/internals/material/components/BasePopper.js

@@ -0,0 +1,122 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["ref", "open", "children", "className", "clickAwayTouchEvent", "clickAwayMouseEvent", "flip", "focusTrap", "onExited", "onClickAway", "onDidShow", "onDidHide", "id", "target", "transition", "placement"];
+import * as React from 'react';
+import Popper from '@mui/material/Popper';
+import MUIFocusTrap from '@mui/material/Unstable_TrapFocus';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import Grow from '@mui/material/Grow';
+import Paper from '@mui/material/Paper';
+import { jsx as _jsx } from "react/jsx-runtime";
+function clickAwayWrapper(props, content) {
+  if (props.onClickAway === undefined) {
+    return content;
+  }
+  return /*#__PURE__*/_jsx(ClickAwayListener, {
+    onClickAway: props.onClickAway,
+    touchEvent: props.clickAwayTouchEvent,
+    mouseEvent: props.clickAwayMouseEvent,
+    children: content
+  });
+}
+function focusTrapWrapper(props, content) {
+  if (props.focusTrap === undefined) {
+    return content;
+  }
+  return /*#__PURE__*/_jsx(MUIFocusTrap, {
+    open: true,
+    disableEnforceFocus: true,
+    disableAutoFocus: true,
+    children: /*#__PURE__*/_jsx("div", {
+      tabIndex: -1,
+      children: content
+    })
+  });
+}
+function wrappers(props, content) {
+  return focusTrapWrapper(props, clickAwayWrapper(props, content));
+}
+const transformOrigin = {
+  'bottom-start': 'top left',
+  'bottom-end': 'top right'
+};
+export function BasePopper(props) {
+  const {
+      open,
+      children,
+      className,
+      flip,
+      onExited,
+      onDidShow,
+      onDidHide,
+      id,
+      target,
+      transition,
+      placement
+    } = props,
+    rest = _objectWithoutPropertiesLoose(props, _excluded);
+  const modifiers = React.useMemo(() => {
+    const result = [{
+      name: 'preventOverflow',
+      options: {
+        padding: 8
+      }
+    }];
+    if (flip) {
+      result.push({
+        name: 'flip',
+        enabled: true,
+        options: {
+          rootBoundary: 'document'
+        }
+      });
+    }
+    if (onDidShow || onDidHide) {
+      result.push({
+        name: 'isPlaced',
+        enabled: true,
+        phase: 'main',
+        fn: () => {
+          onDidShow?.();
+        },
+        effect: () => () => {
+          onDidHide?.();
+        }
+      });
+    }
+    return result;
+  }, [flip, onDidShow, onDidHide]);
+  let content;
+  if (!transition) {
+    content = wrappers(props, children);
+  } else {
+    const handleExited = popperOnExited => node => {
+      if (popperOnExited) {
+        popperOnExited();
+      }
+      if (onExited) {
+        onExited(node);
+      }
+    };
+    content = p => wrappers(props, /*#__PURE__*/_jsx(Grow, _extends({}, p.TransitionProps, {
+      style: {
+        transformOrigin: transformOrigin[p.placement]
+      },
+      onExited: handleExited(p.TransitionProps?.onExited),
+      children: /*#__PURE__*/_jsx(Paper, {
+        children: children
+      })
+    })));
+  }
+  return /*#__PURE__*/_jsx(Popper, _extends({
+    id: id,
+    className: className,
+    open: open,
+    anchorEl: target,
+    transition: transition,
+    placement: placement,
+    modifiers: modifiers
+  }, rest, {
+    children: content
+  }));
+}

package/esm/internals/material/icons.d.ts

@@ -1,3 +1,4 @@
 import * as React from 'react';
 export declare const ChartsZoomInIcon: (props: import("@mui/x-charts").ChartBaseIconProps) => React.ReactNode;
-export declare const ChartsZoomOutIcon: (props: import("@mui/x-charts").ChartBaseIconProps) => React.ReactNode;
+export declare const ChartsZoomOutIcon: (props: import("@mui/x-charts").ChartBaseIconProps) => React.ReactNode;
+export declare const ChartsExportIcon: (props: import("@mui/x-charts").ChartBaseIconProps) => React.ReactNode;

package/esm/internals/material/icons.js

@@ -10,4 +10,7 @@ export const ChartsZoomInIcon = createSvgIcon(/*#__PURE__*/_jsxs(React.Fragment,
 }), 'ZoomIn');
 export const ChartsZoomOutIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14M7 9h5v1H7z"
-}), 'ZoomOut');
+}), 'ZoomOut');
+export const ChartsExportIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
+  d: "M19 9h-4V3H9v6H5l7 7zM5 18v2h14v-2z"
+}), 'Export');

package/esm/internals/material/index.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { ChartsBaseSlotsPro } from "../slots/chartsBaseSlots.js";
 import { ChartsIconSlotsPro } from "../slots/chartsIconSlots.js";
 export type ChartsSlotsPro = ChartsBaseSlotsPro & ChartsIconSlotsPro;

package/esm/internals/material/index.js

@@ -1,12 +1,21 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import Tooltip from '@mui/material/Tooltip';
+import MenuList from '@mui/material/MenuList';
+import Divider from '@mui/material/Divider';
 import { defaultSlotsMaterial as communityDefaultSlotsMaterial } from '@mui/x-charts/internals';
-import { ChartsZoomInIcon, ChartsZoomOutIcon } from "./icons.js";
+import { BaseMenuItem } from "./components/BaseMenuItem.js";
+import { BasePopper } from "./components/BasePopper.js";
+import { ChartsExportIcon, ChartsZoomInIcon, ChartsZoomOutIcon } from "./icons.js";
 const baseSlots = {
-  baseTooltip: Tooltip
+  baseTooltip: Tooltip,
+  basePopper: BasePopper,
+  baseMenuList: MenuList,
+  baseMenuItem: BaseMenuItem,
+  baseDivider: Divider
 };
 const iconSlots = {
   zoomInIcon: ChartsZoomInIcon,
-  zoomOutIcon: ChartsZoomOutIcon
+  zoomOutIcon: ChartsZoomOutIcon,
+  exportIcon: ChartsExportIcon
 };
 export const defaultSlotsMaterial = _extends({}, communityDefaultSlotsMaterial, baseSlots, iconSlots);

package/esm/internals/plugins/useChartProExport/print.js

@@ -15,7 +15,6 @@ export function printChart(element, {
     const rootCandidate = element.getRootNode();
     const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
     await Promise.all(loadStyleSheets(printDoc, root));
-    printWindow.contentWindow.print();
     const mediaQueryList = printWindow.contentWindow.matchMedia('print');
     mediaQueryList.addEventListener('change', mql => {
       const isAfterPrint = mql.matches === false;
@@ -23,6 +22,7 @@ export function printChart(element, {
         doc.body.removeChild(printWindow);
       }
     });
+    printWindow.contentWindow.print();
   };
   doc.body.appendChild(printWindow);
 }

package/esm/internals/plugins/useChartProExport/useChartProExport.types.d.ts

@@ -7,29 +7,30 @@ export interface UseChartProExportState {
 /**
  * The options to apply on the Print export.
  * @demos
- *   - [Print export](/x/react-charts/export/#print-export-as-pdf)
+ *   - [Print export](https://mui.com/x/react-charts/export/#print-export-as-pdf)
  */
 export interface ChartPrintExportOptions {
   /**
-   * The value to be used as the print window title.
-   * @default The title of the page.
+   * The name of the file without the extension.
+   * @default The title of the document the chart belongs to
    */
   fileName?: string;
 }
 /**
  * The options to apply on the image export.
  * @demos
- *   - [Image export](/x/react-charts/export/#export-as-image)
+ *   - [Image export](https://mui.com/x/react-charts/export/#export-as-image)
  */
 export interface ChartImageExportOptions {
   /**
-   * The value to be used as the print window title.
-   * @default The title of the page.
+   * The name of the file without the extension.
+   * @default The title of the document the chart belongs to
    */
   fileName?: string;
   /**
    * The format of the image to be exported.
    * Browsers are required to support 'image/png'. Some browsers also support 'image/jpeg' and 'image/webp'.
+   * If the provided `type` is not supported by the browser, it will default to 'image/png'.
    * @default 'image/png'
    */
   type?: 'image/png' | string;