@mui/x-charts 7.0.0-beta.1 → 7.0.0-beta.3

package/ChartsLegend/index.d.ts

@@ -1,3 +1,4 @@
 export * from './ChartsLegend';
+export * from './DefaultChartsLegend';
 export * from './chartsLegendClasses';
 export * from './utils';

package/ChartsLegend/index.js

@@ -14,6 +14,17 @@ Object.keys(_ChartsLegend).forEach(function (key) {
     }
   });
 });
+var _DefaultChartsLegend = require("./DefaultChartsLegend");
+Object.keys(_DefaultChartsLegend).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DefaultChartsLegend[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DefaultChartsLegend[key];
+    }
+  });
+});
 var _chartsLegendClasses = require("./chartsLegendClasses");
 Object.keys(_chartsLegendClasses).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/ChartsReferenceLine/ChartsReferenceLine.js

@@ -19,7 +19,7 @@ function ChartsReferenceLine(props) {
     y
   } = props;
   if (x !== undefined && y !== undefined) {
-    throw new Error('MUI X Charts: The ChartsReferenceLine can not have both `x` and `y` props set.');
+    throw new Error('MUI X Charts: The ChartsReferenceLine cannot have both `x` and `y` props set.');
   }
   if (x === undefined && y === undefined) {
     throw new Error('MUI X Charts: The ChartsReferenceLine should have a value in `x` or `y` prop.');
@@ -38,7 +38,7 @@ process.env.NODE_ENV !== "production" ? ChartsReferenceLine.propTypes = {
    * The id of the axis used for the reference value.
    * @default The `id` of the first defined axis.
    */
-  axisId: _propTypes.default.string,
+  axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   /**
    * Override or extend the styles applied to the component.
    */

package/ChartsReferenceLine/common.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { ChartsReferenceLineClasses } from './chartsReferenceLineClasses';
 import { ChartsTextStyle } from '../ChartsText';
+import { AxisId } from '../models/axis';
 export type CommonChartsReferenceLineProps = {
     /**
      * The alignment if the label is in the chart drawing area.
@@ -24,7 +25,7 @@ export type CommonChartsReferenceLineProps = {
      * The id of the axis used for the reference value.
      * @default The `id` of the first defined axis.
      */
-    axisId?: string;
+    axisId?: AxisId;
     /**
      * The style applied to the label.
      */

package/ChartsSurface.js

@@ -12,7 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _useAxisEvents = require("./hooks/useAxisEvents");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className"];
+const _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className", "title", "desc"];
 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); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const ChartChartsSurfaceStyles = (0, _styles.styled)('svg', {
@@ -25,7 +25,9 @@ const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(func
       width,
       height,
       viewBox,
-      disableAxisListener = false
+      disableAxisListener = false,
+      title,
+      desc
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const svgView = (0, _extends2.default)({
@@ -42,9 +44,9 @@ const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(func
     ref: ref
   }, other, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
-      children: props.title
+      children: title
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("desc", {
-      children: props.desc
+      children: desc
     }), children]
   }));
 });

package/ChartsTooltip/ChartsItemTooltipContent.js

@@ -48,7 +48,7 @@ process.env.NODE_ENV !== "production" ? ChartsItemTooltipContent.propTypes = {
     classes: _propTypes.default.object,
     itemData: _propTypes.default.shape({
       dataIndex: _propTypes.default.number,
-      seriesId: _propTypes.default.string.isRequired,
+      seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
       type: _propTypes.default.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired
     }),
     series: _propTypes.default.object,
@@ -56,7 +56,7 @@ process.env.NODE_ENV !== "production" ? ChartsItemTooltipContent.propTypes = {
   }),
   itemData: _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string.isRequired,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     type: _propTypes.default.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired
   }).isRequired,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])

package/ChartsTooltip/DefaultChartsAxisTooltipContent.js

@@ -26,7 +26,7 @@ function DefaultChartsAxisTooltipContent(props) {
   if (dataIndex == null) {
     return null;
   }
-  const axisFormatter = axis.valueFormatter ?? (v => v.toLocaleString());
+  const axisFormatter = axis.valueFormatter ?? (v => axis.scaleType === 'utc' ? (0, _utils.utcFormatter)(v) : v.toLocaleString());
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipPaper, {
     sx: sx,
     className: classes.root,

package/ChartsTooltip/DefaultChartsItemTooltipContent.js

@@ -76,7 +76,7 @@ process.env.NODE_ENV !== "production" ? DefaultChartsItemTooltipContent.propType
    */
   itemData: _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string.isRequired,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     type: _propTypes.default.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired
   }).isRequired,
   /**

package/ChartsTooltip/utils.d.ts

@@ -24,3 +24,4 @@ export type TriggerOptions = 'item' | 'axis' | 'none';
 export declare function getTooltipHasData(trigger: TriggerOptions, displayedData: null | AxisInteractionData | ItemInteractionData<ChartSeriesType>): boolean;
 export declare function isCartesianSeriesType(seriesType: string): seriesType is CartesianChartSeriesType;
 export declare function isCartesianSeries(series: ChartSeriesDefaultized<ChartSeriesType>): series is ChartSeriesDefaultized<CartesianChartSeriesType>;
+export declare function utcFormatter(v: string | number | Date): string;

package/ChartsTooltip/utils.js

@@ -8,6 +8,7 @@ exports.getTooltipHasData = getTooltipHasData;
 exports.isCartesianSeries = isCartesianSeries;
 exports.isCartesianSeriesType = isCartesianSeriesType;
 exports.useMouseTracker = useMouseTracker;
+exports.utcFormatter = utcFormatter;
 var React = _interopRequireWildcard(require("react"));
 var _DrawingProvider = require("../context/DrawingProvider");
 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); }
@@ -96,4 +97,10 @@ function isCartesianSeriesType(seriesType) {
 }
 function isCartesianSeries(series) {
   return isCartesianSeriesType(series.type);
+}
+function utcFormatter(v) {
+  if (v instanceof Date) {
+    return v.toUTCString();
+  }
+  return v.toLocaleString();
 }

package/ChartsXAxis/ChartsXAxis.js

@@ -14,7 +14,7 @@ var _utils2 = require("@mui/utils");
 var _styles = require("@mui/material/styles");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _DrawingProvider = require("../context/DrawingProvider");
-var _useTicks = _interopRequireDefault(require("../hooks/useTicks"));
+var _useTicks = require("../hooks/useTicks");
 var _axisClasses = require("../ChartsAxis/axisClasses");
 var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
 var _ChartsText = require("../ChartsText");
@@ -22,7 +22,7 @@ var _geometry = require("../internals/geometry");
 var _useMounted = require("../hooks/useMounted");
 var _getWordsByLines = require("../internals/getWordsByLines");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["scale", "tickNumber"];
+const _excluded = ["scale", "tickNumber", "reverse"];
 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); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
@@ -43,6 +43,7 @@ const useUtilityClasses = ownerState => {
 function addLabelDimension(xTicks, {
   tickLabelStyle: style,
   tickLabelInterval,
+  reverse,
   isMounted
 }) {
   const withDimension = xTicks.map(tick => {
@@ -69,8 +70,9 @@ function addLabelDimension(xTicks, {
   }
 
   // Filter label to avoid overlap
-  let textStart = 0;
-  let textEnd = 0;
+  let currentTextLimit = 0;
+  let previouseTextLimit = 0;
+  const direction = reverse ? -1 : 1;
   return withDimension.map((item, labelIndex) => {
     const {
       width,
@@ -82,15 +84,15 @@ function addLabelDimension(xTicks, {
     const textPosition = offset + labelOffset;
     const gapRatio = 1.2; // Ratio applied to the minimal distance to add some margin.
 
-    textStart = textPosition - gapRatio * distance / 2;
-    if (labelIndex > 0 && textStart < textEnd) {
+    currentTextLimit = textPosition - direction * (gapRatio * distance) / 2;
+    if (labelIndex > 0 && direction * currentTextLimit < direction * previouseTextLimit) {
       // Except for the first label, we skip all label that overlap with the last accepted.
-      // Notice that the early return prevents `textEnd` from being updated.
+      // Notice that the early return prevents `previouseTextLimit` from being updated.
       return (0, _extends2.default)({}, item, {
         skipLabel: true
       });
     }
-    textEnd = textPosition + gapRatio * distance / 2;
+    previouseTextLimit = textPosition + direction * (gapRatio * distance) / 2;
     return item;
   });
 }
@@ -124,7 +126,8 @@ function ChartsXAxis(inProps) {
       xAxis: {
         [_ref]: {
           scale: xScale,
-          tickNumber
+          tickNumber,
+          reverse
         }
       }
     } = _React$useContext,
@@ -177,7 +180,7 @@ function ChartsXAxis(inProps) {
     className: classes.tickLabel,
     ownerState: {}
   });
-  const xTicks = (0, _useTicks.default)({
+  const xTicks = (0, _useTicks.useTicks)({
     scale: xScale,
     tickNumber,
     valueFormatter,
@@ -186,6 +189,7 @@ function ChartsXAxis(inProps) {
   const xTicksWithDimension = addLabelDimension(xTicks, {
     tickLabelStyle: axisTickLabelProps.style,
     tickLabelInterval,
+    reverse,
     isMounted
   });
   const labelRefPoint = {
@@ -249,7 +253,7 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    * The id of the axis to render.
    * If undefined, it will be the first defined axis.
    */
-  axisId: _propTypes.default.string,
+  axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   /**
    * Override or extend the styles applied to the component.
    */

package/ChartsYAxis/ChartsYAxis.js

@@ -14,7 +14,7 @@ var _utils2 = require("@mui/utils");
 var _styles = require("@mui/material/styles");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _DrawingProvider = require("../context/DrawingProvider");
-var _useTicks = _interopRequireDefault(require("../hooks/useTicks"));
+var _useTicks = require("../hooks/useTicks");
 var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
 var _ChartsText = require("../ChartsText");
 var _axisClasses = require("../ChartsAxis/axisClasses");
@@ -100,7 +100,7 @@ function ChartsYAxis(inProps) {
     height
   } = React.useContext(_DrawingProvider.DrawingContext);
   const tickSize = disableTicks ? 4 : tickSizeProp;
-  const yTicks = (0, _useTicks.default)({
+  const yTicks = (0, _useTicks.useTicks)({
     scale: yScale,
     tickNumber,
     valueFormatter
@@ -183,7 +183,7 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    * The id of the axis to render.
    * If undefined, it will be the first defined axis.
    */
-  axisId: _propTypes.default.string,
+  axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   /**
    * Override or extend the styles applied to the component.
    */

package/Gauge/Gauge.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { GaugeContainerProps } from './GaugeContainer';
+import { GaugeClasses } from './gaugeClasses';
+import { GaugeValueTextProps } from './GaugeValueText';
+export interface GaugeProps extends GaugeContainerProps, Pick<GaugeValueTextProps, 'text'> {
+    classes?: Partial<GaugeClasses>;
+    children?: React.ReactNode;
+}
+declare function Gauge(props: GaugeProps): React.JSX.Element;
+declare namespace Gauge {
+    var propTypes: any;
+}
+export { Gauge };

package/Gauge/Gauge.js

@@ -0,0 +1,156 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Gauge = Gauge;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _GaugeContainer = require("./GaugeContainer");
+var _GaugeValueArc = require("./GaugeValueArc");
+var _GaugeReferenceArc = require("./GaugeReferenceArc");
+var _gaugeClasses = require("./gaugeClasses");
+var _GaugeValueText = require("./GaugeValueText");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["text", "children", "classes"];
+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); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useUtilityClasses = props => {
+  const {
+    classes
+  } = props;
+  const slots = {
+    root: ['root'],
+    valueArc: ['valueArc'],
+    referenceArc: ['referenceArc'],
+    valueText: ['valueText']
+  };
+  return (0, _composeClasses.default)(slots, _gaugeClasses.getGaugeUtilityClass, classes);
+};
+function Gauge(props) {
+  const {
+      text,
+      children
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const classes = useUtilityClasses(props);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GaugeContainer.GaugeContainer, (0, _extends2.default)({}, other, {
+    className: classes.root,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeReferenceArc.GaugeReferenceArc, {
+      className: classes.referenceArc
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeValueArc.GaugeValueArc, {
+      className: classes.valueArc
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeValueText.GaugeValueText, {
+      className: classes.valueText,
+      text: text
+    }), children]
+  }));
+}
+process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  children: _propTypes.default.node,
+  classes: _propTypes.default.object,
+  className: _propTypes.default.string,
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * Set it to '50%' to get rounded arc.
+   * @default 0
+   */
+  cornerRadius: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  /**
+   * The x coordinate of the arc center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the width the drawing area.
+   */
+  cx: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  /**
+   * The y coordinate of the arc center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the height the drawing area.
+   */
+  cy: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  desc: _propTypes.default.string,
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener: _propTypes.default.bool,
+  /**
+   * The end angle (deg).
+   * @default 360
+   */
+  endAngle: _propTypes.default.number,
+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   * @default undefined
+   */
+  height: _propTypes.default.number,
+  /**
+   * The radius between circle center and the begining of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '80%'
+   */
+  innerRadius: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   * @default object Depends on the charts type.
+   */
+  margin: _propTypes.default.shape({
+    bottom: _propTypes.default.number,
+    left: _propTypes.default.number,
+    right: _propTypes.default.number,
+    top: _propTypes.default.number
+  }),
+  /**
+   * The radius between circle center and the end of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '100%'
+   */
+  outerRadius: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  /**
+   * The start angle (deg).
+   * @default 0
+   */
+  startAngle: _propTypes.default.number,
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  text: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+  title: _propTypes.default.string,
+  /**
+   * The value of the gauge.
+   * Set to `null` to not display a value.
+   */
+  value: _propTypes.default.number,
+  /**
+   * The maximal value of the gauge.
+   * @default 100
+   */
+  valueMax: _propTypes.default.number,
+  /**
+   * The minimal value of the gauge.
+   * @default 0
+   */
+  valueMin: _propTypes.default.number,
+  viewBox: _propTypes.default.shape({
+    height: _propTypes.default.number,
+    width: _propTypes.default.number,
+    x: _propTypes.default.number,
+    y: _propTypes.default.number
+  }),
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   * @default undefined
+   */
+  width: _propTypes.default.number
+} : void 0;

package/Gauge/GaugeContainer.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { ChartsSurfaceProps } from '../ChartsSurface';
+import { DrawingProviderProps } from '../context/DrawingProvider';
+import { GaugeProviderProps } from './GaugeProvider';
+export interface GaugeContainerProps extends Omit<ChartsSurfaceProps, 'width' | 'height' | 'children'>, Omit<DrawingProviderProps, 'svgRef' | 'width' | 'height' | 'children'>, Omit<GaugeProviderProps, 'children'> {
+    /**
+     * The width of the chart in px. If not defined, it takes the width of the parent element.
+     * @default undefined
+     */
+    width?: number;
+    /**
+     * The height of the chart in px. If not defined, it takes the height of the parent element.
+     * @default undefined
+     */
+    height?: number;
+    children?: React.ReactNode;
+}
+declare const GaugeContainer: React.ForwardRefExoticComponent<GaugeContainerProps & React.RefAttributes<unknown>>;
+export { GaugeContainer };