@mui/x-charts 8.0.0-alpha.1 → 8.0.0-alpha.11

package/node/internals/components/ChartsAxesGradients/ChartsContinuousGradientObjectBound.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ChartsContinuousGradientObjectBound;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
+var _jsxRuntime = require("react/jsx-runtime");
+const PX_PRECISION = 10;
+const getDirection = isReversed => {
+  if (isReversed) {
+    return {
+      x1: '1',
+      x2: '0',
+      y1: '0',
+      y2: '0'
+    };
+  }
+  return {
+    x1: '0',
+    x2: '1',
+    y1: '0',
+    y2: '0'
+  };
+};
+
+/**
+ * Generates gradients to be used in tooltips and legends.
+ */
+function ChartsContinuousGradientObjectBound(props) {
+  const {
+    isReversed,
+    gradientId,
+    colorScale,
+    colorMap
+  } = props;
+  const extremumValues = [colorMap.min ?? 0, colorMap.max ?? 100];
+  const interpolator = typeof extremumValues[0] === 'number' ? (0, _d3Interpolate.interpolateNumber)(extremumValues[0], extremumValues[1]) : (0, _d3Interpolate.interpolateDate)(extremumValues[0], extremumValues[1]);
+  const numberOfPoints = PX_PRECISION;
+  const keyPrefix = `${extremumValues[0]}-${extremumValues[1]}-`;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("linearGradient", (0, _extends2.default)({
+    id: gradientId
+  }, getDirection(isReversed), {
+    gradientUnits: 'objectBoundingBox' // Use the SVG coordinate instead of the component ones.
+    ,
+    children: Array.from({
+      length: numberOfPoints + 1
+    }, (_, index) => {
+      const offset = index / numberOfPoints;
+      const value = interpolator(offset);
+      if (value === undefined) {
+        return null;
+      }
+      const color = colorScale(value);
+      if (color === null) {
+        return null;
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
+        offset: offset,
+        stopColor: color,
+        stopOpacity: 1
+      }, keyPrefix + index);
+    })
+  }));
+}

package/node/internals/components/ChartsAxesGradients/ChartsPiecewiseGradient.js

@@ -16,6 +16,9 @@ function ChartsPiecewiseGradient(props) {
     scale,
     colorMap
   } = props;
+  if (size <= 0) {
+    return null;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("linearGradient", {
     id: gradientId,
     x1: "0",
@@ -31,6 +34,9 @@ function ChartsPiecewiseGradient(props) {
         return null;
       }
       const offset = isReversed ? 1 - x / size : x / size;
+      if (Number.isNaN(offset)) {
+        return null;
+      }
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
           offset: offset,

package/node/internals/components/ChartsWrapper/ChartsWrapper.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsWrapper = ChartsWrapper;
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _jsxRuntime = require("react/jsx-runtime");
+const getDirection = (direction, position) => {
+  if (direction === 'vertical') {
+    if (position?.horizontal === 'start') {
+      return 'row';
+    }
+    return 'row-reverse';
+  }
+  if (position?.vertical === 'bottom') {
+    return 'column-reverse';
+  }
+  return 'column';
+};
+const getAlign = (direction, position) => {
+  if (direction === 'vertical') {
+    if (position?.vertical === 'top') {
+      return 'flex-start';
+    }
+    if (position?.vertical === 'bottom') {
+      return 'flex-end';
+    }
+  }
+  if (direction === 'horizontal') {
+    if (position?.horizontal === 'start') {
+      return 'flex-start';
+    }
+    if (position?.horizontal === 'end') {
+      return 'flex-end';
+    }
+  }
+  return 'center';
+};
+const Root = (0, _styles.styled)('div', {
+  name: 'MuiChartsWrapper',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  ownerState
+}) => ({
+  display: 'flex',
+  flexDirection: getDirection(ownerState.legendDirection, ownerState.legendPosition),
+  flex: 1,
+  justifyContent: 'center',
+  alignItems: getAlign(ownerState.legendDirection, ownerState.legendPosition)
+}));
+
+/**
+ * @ignore - internal component.
+ *
+ * Wrapper for the charts components.
+ * Its main purpose is to position the HTML legend in the correct place.
+ */
+function ChartsWrapper(props) {
+  const {
+    children,
+    sx
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+    ownerState: props,
+    sx: sx,
+    children: children
+  });
+}

package/node/internals/components/ChartsWrapper/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChartsWrapper = require("./ChartsWrapper");
+Object.keys(_ChartsWrapper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsWrapper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsWrapper[key];
+    }
+  });
+});

package/node/internals/consumeSlots.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.consumeSlots = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _styles = require("@mui/material/styles");
+var _resolveProps = _interopRequireDefault(require("@mui/utils/resolveProps"));
+var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var React = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["slots", "slotProps"],
+  _excluded2 = ["ownerState"];
+/**
+ * A higher order component that consumes a slot from the props and renders the component provided in the slot.
+ *
+ * This HOC will wrap a single component, and will render the component provided in the slot, if it exists.
+ *
+ * If you need to render multiple components, you can manually consume the slots from the props and render them in your component instead of using this HOC.
+ *
+ * In the example below, `MyComponent` will render the component provided in `mySlot` slot, if it exists. Otherwise, it will render the `DefaultComponent`.
+ *
+ * @example
+ *
+ * ```tsx
+ * type MyComponentProps = {
+ *   direction: 'row' | 'column';
+ *   slots?: {
+ *     mySlot?: React.JSXElementConstructor<{ direction: 'row' | 'column' }>;
+ *   }
+ * };
+ *
+ * const MyComponent = consumeSlots(
+ *   'MuiMyComponent',
+ *   'mySlot',
+ *   function DefaultComponent(props: MyComponentProps) {
+ *     return (
+ *       <div className={props.classes.root}>
+ *         {props.direction}
+ *       </div>
+ *     );
+ *   }
+ * );
+ * ```
+ *
+ * @param {string} name The mui component name.
+ * @param {string} slotPropName The name of the prop to retrieve the slot from.
+ * @param {object} options Options for the HOC.
+ * @param {boolean} options.propagateSlots Whether to propagate the slots to the component, this is always false if the slot is provided.
+ * @param {Record<string, any>} options.defaultProps A set of defaults for the component, will be deep merged with the props.
+ * @param {Array<keyof Props>} options.omitProps An array of props to omit from the component.
+ * @param {Function} options.classesResolver A function that returns the classes for the component. It receives the props, after theme props and defaults have been applied. And the theme object as the second argument.
+ * @param InComponent The component to render if the slot is not provided.
+ */
+const consumeSlots = (name, slotPropName, options, InComponent) => {
+  function ConsumeSlotsInternal(props, ref) {
+    const themedProps = (0, _styles.useThemeProps)({
+      props,
+      // eslint-disable-next-line material-ui/mui-name-matches-component-name
+      name
+    });
+    const defaultProps = typeof options.defaultProps === 'function' ? options.defaultProps(themedProps) : options.defaultProps ?? {};
+    const defaultizedProps = (0, _resolveProps.default)(defaultProps, themedProps);
+    const _ref = defaultizedProps,
+      {
+        slots,
+        slotProps
+      } = _ref,
+      other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+    const theme = (0, _styles.useTheme)();
+    const classes = options.classesResolver?.(defaultizedProps, theme);
+
+    // Can be a function component or a forward ref component.
+    const Component = slots?.[slotPropName] ?? InComponent;
+    const propagateSlots = options.propagateSlots && !slots?.[slotPropName];
+    const _useSlotProps = (0, _useSlotProps2.default)({
+        elementType: Component,
+        externalSlotProps: slotProps?.[slotPropName],
+        additionalProps: (0, _extends2.default)({}, other, {
+          classes
+        }, propagateSlots && {
+          slots,
+          slotProps
+        }),
+        ownerState: {}
+      }),
+      originalOutProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded2);
+    const outProps = (0, _extends2.default)({}, originalOutProps);
+    for (const prop of options.omitProps ?? []) {
+      delete outProps[prop];
+    }
+
+    // Component can be wrapped in React.forwardRef or just a function that accepts (props, ref).
+    // If it is a plain function which accepts two arguments, we need to wrap it in React.forwardRef.
+    const OutComponent = Component.length >= 2 ? /*#__PURE__*/React.forwardRef(Component) : Component;
+    if (process.env.NODE_ENV !== 'production') {
+      OutComponent.displayName = `${name}.slots.${slotPropName}`;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(OutComponent, (0, _extends2.default)({}, outProps, {
+      ref: ref
+    }));
+  }
+  return /*#__PURE__*/React.forwardRef(ConsumeSlotsInternal);
+};
+exports.consumeSlots = consumeSlots;

package/node/internals/consumeThemeProps.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.consumeThemeProps = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _styles = require("@mui/material/styles");
+var _resolveProps = _interopRequireDefault(require("@mui/utils/resolveProps"));
+var React = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * A higher order component that consumes and merges the theme `defaultProps` and handles the `classes` and renders the component.
+ *
+ * This HOC will wrap a single component.
+ * If you need to render multiple components, you can manually consume the theme and render them in your component instead of using this HOC.
+ *
+ * In the example below, `MyComponent` will render the `DefaultComponent` with the `direction` prop set to `'row'` and the className set to `'my-custom-root'`.
+ *
+ * @example
+ * ```tsx
+ * createTheme({
+ *   components: {
+ *     MuiMyComponent: {
+ *       defaultProps: {
+ *         direction: 'row',
+ *       },
+ *     },
+ *   },
+ * })
+ *
+ * type MyComponentProps = {
+ *   direction: 'row' | 'column';
+ *   classes?: Record<'root', string>;
+ * };
+ *
+ * const MyComponent = consumeThemeProps(
+ *   'MuiMyComponent',
+ *   function DefaultComponent(props: MyComponentProps) {
+ *     return (
+ *       <div className={props.classes.root}>
+ *         {props.direction}
+ *       </div>
+ *     );
+ *   }
+ * );
+ *
+ * render(<MyComponent classes={{ root: 'my-custom-root' }} />);
+ * ```
+ *
+ * @param {string} name The mui component name.
+ * @param {object} options Options for the HOC.
+ * @param {Record<string, any>} options.defaultProps A set of defaults for the component, will be deep merged with the props.
+ * @param {Function} options.classesResolver A function that returns the classes for the component. It receives the props, after theme props and defaults have been applied. And the theme object as the second argument.
+ * @param InComponent The component to render if the slot is not provided.
+ */
+const consumeThemeProps = (name, options, InComponent) => /*#__PURE__*/React.forwardRef(function ConsumeThemeInternal(props, ref) {
+  const themedProps = (0, _styles.useThemeProps)({
+    props,
+    // eslint-disable-next-line material-ui/mui-name-matches-component-name
+    name
+  });
+  const defaultProps = typeof options.defaultProps === 'function' ? options.defaultProps(themedProps) : options.defaultProps ?? {};
+  const outProps = (0, _resolveProps.default)(defaultProps, themedProps);
+  const theme = (0, _styles.useTheme)();
+  const classes = options.classesResolver?.(outProps, theme);
+  const OutComponent = /*#__PURE__*/React.forwardRef(InComponent);
+  if (process.env.NODE_ENV !== 'production') {
+    OutComponent.displayName = `consumeThemeProps(${name})`;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(OutComponent, (0, _extends2.default)({}, outProps, {
+    classes: classes,
+    ref: ref
+  }));
+});
+exports.consumeThemeProps = consumeThemeProps;

package/node/internals/defaultizeColor.js

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.defaultizeColor = defaultizeColor;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-const DEFAULT_COLORS = ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'];
-function defaultizeColor(series, seriesIndex, colors = DEFAULT_COLORS) {
+function defaultizeColor(series, seriesIndex, colors) {
   if (series.type === 'pie') {
     return (0, _extends2.default)({}, series, {
       data: series.data.map((d, index) => (0, _extends2.default)({

package/node/internals/getCurve.js

@@ -3,42 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = getCurveFactory;
+exports.getCurveFactory = getCurveFactory;
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 function getCurveFactory(curveType) {
   switch (curveType) {
     case 'catmullRom':
-      {
-        return _d3Shape.curveCatmullRom.alpha(0.5);
-      }
+      return _d3Shape.curveCatmullRom.alpha(0.5);
     case 'linear':
-      {
-        return _d3Shape.curveLinear;
-      }
+      return _d3Shape.curveLinear;
     case 'monotoneX':
-      {
-        return _d3Shape.curveMonotoneX;
-      }
+      return _d3Shape.curveMonotoneX;
     case 'monotoneY':
-      {
-        return _d3Shape.curveMonotoneY;
-      }
+      return _d3Shape.curveMonotoneY;
     case 'natural':
-      {
-        return _d3Shape.curveNatural;
-      }
+      return _d3Shape.curveNatural;
     case 'step':
-      {
-        return _d3Shape.curveStep;
-      }
+      return _d3Shape.curveStep;
     case 'stepBefore':
-      {
-        return _d3Shape.curveStepBefore;
-      }
+      return _d3Shape.curveStepBefore;
     case 'stepAfter':
-      {
-        return _d3Shape.curveStepAfter;
-      }
+      return _d3Shape.curveStepAfter;
+    case 'bumpY':
+      return _d3Shape.curveBumpY;
+    case 'bumpX':
+      return _d3Shape.curveBumpX;
     default:
       return _d3Shape.curveMonotoneX;
   }