@mui/x-charts 7.0.0-beta.2 → 7.0.0-beta.4

package/ChartsGrid/ChartsGrid.js

@@ -0,0 +1,128 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsGrid = ChartsGrid;
+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 _styles = require("@mui/material/styles");
+var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _useTicks = require("../hooks/useTicks");
+var _chartsGridClasses = require("./chartsGridClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["vertical", "horizontal"];
+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 GridRoot = (0, _styles.styled)('g', {
+  name: 'MuiChartsGrid',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme
+}) => ({
+  [`& .${_chartsGridClasses.chartsGridClasses.line}`]: {
+    stroke: (theme.vars || theme).palette.divider,
+    shapeRendering: 'crispEdges',
+    strokeWidth: 1
+  }
+}));
+const useUtilityClasses = ({
+  classes
+}) => {
+  const slots = {
+    root: ['root'],
+    verticalLine: ['line', 'verticalLine'],
+    horizontalLine: ['line', 'horizontalLine']
+  };
+  return (0, _composeClasses.default)(slots, _chartsGridClasses.getChartsGridUtilityClass, classes);
+};
+/**
+ * Demos:
+ *
+ * - [Axis](https://mui.com/x/react-charts/axis/)
+ *
+ * API:
+ *
+ * - [ChartsGrid API](https://mui.com/x/api/charts/charts-axis/)
+ */
+function ChartsGrid(props) {
+  const {
+      vertical,
+      horizontal
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    xAxis,
+    xAxisIds,
+    yAxis,
+    yAxisIds
+  } = React.useContext(_CartesianContextProvider.CartesianContext);
+  const classes = useUtilityClasses(props);
+  const horizontalAxisId = yAxisIds[0];
+  const verticalAxisId = xAxisIds[0];
+  const {
+    scale: xScale,
+    tickNumber: xTickNumber,
+    tickInterval: xTickInterval
+  } = xAxis[verticalAxisId];
+  const {
+    scale: yScale,
+    tickNumber: yTickNumber,
+    tickInterval: yTickInterval
+  } = yAxis[horizontalAxisId];
+  const xTicks = (0, _useTicks.useTicks)({
+    scale: xScale,
+    tickNumber: xTickNumber,
+    tickInterval: xTickInterval
+  });
+  const yTicks = (0, _useTicks.useTicks)({
+    scale: yScale,
+    tickNumber: yTickNumber,
+    tickInterval: yTickInterval
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridRoot, (0, _extends2.default)({}, other, {
+    className: classes.root,
+    children: [vertical && xTicks.map(({
+      formattedValue,
+      offset
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
+      y1: yScale.range()[0],
+      y2: yScale.range()[1],
+      x1: offset,
+      x2: offset,
+      className: classes.verticalLine
+    }, formattedValue)), horizontal && yTicks.map(({
+      formattedValue,
+      offset
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
+      y1: offset,
+      y2: offset,
+      x1: xScale.range()[0],
+      x2: xScale.range()[1],
+      className: classes.horizontalLine
+    }, formattedValue))]
+  }));
+}
+process.env.NODE_ENV !== "production" ? ChartsGrid.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: _propTypes.default.object,
+  /**
+   * Displays horizontal grid.
+   */
+  horizontal: _propTypes.default.bool,
+  /**
+   * Displays vertical grid.
+   */
+  vertical: _propTypes.default.bool
+} : void 0;

package/ChartsGrid/chartsGridClasses.d.ts

@@ -0,0 +1,13 @@
+export interface ChartsGridClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to every line element. */
+    line: string;
+    /** Styles applied to x-axes. */
+    horizontalLine: string;
+    /** Styles applied to y-axes. */
+    verticalLine: string;
+}
+export type ChartsGridClassKey = keyof ChartsGridClasses;
+export declare function getChartsGridUtilityClass(slot: string): string;
+export declare const chartsGridClasses: ChartsGridClasses;

package/ChartsGrid/chartsGridClasses.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.chartsGridClasses = void 0;
+exports.getChartsGridUtilityClass = getChartsGridUtilityClass;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getChartsGridUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiChartsGrid', slot);
+}
+const chartsGridClasses = exports.chartsGridClasses = (0, _generateUtilityClasses.default)('MuiChartsGrid', ['root', 'line', 'horizontalLine', 'verticalLine']);

package/ChartsGrid/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ChartsGrid';
+export * from './chartsGridClasses';

package/ChartsGrid/index.js

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

package/ChartsGrid/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/ChartsGrid/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -18,7 +18,7 @@ function ChartsOnAxisClickHandler(props) {
   const {
     onAxisClick
   } = props;
-  const svgRef = React.useContext(_DrawingProvider.SVGContext);
+  const svgRef = React.useContext(_DrawingProvider.SvgContext);
   const series = React.useContext(_SeriesContextProvider.SeriesContext);
   const {
     axis

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/utils.js

@@ -57,7 +57,7 @@ function generateVirtualElement(mousePosition) {
   };
 }
 function useMouseTracker() {
-  const svgRef = React.useContext(_DrawingProvider.SVGContext);
+  const svgRef = React.useContext(_DrawingProvider.SvgContext);
 
   // Use a ref to avoid rerendering on every mousemove event.
   const [mousePosition, setMousePosition] = React.useState(null);

package/ChartsVoronoiHandler/ChartsVoronoiHandler.d.ts

@@ -4,7 +4,6 @@ export type ChartsVoronoiHandlerProps = {
     /**
      * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
      * If `undefined`, the radius is assumed to be infinite.
-     * @default undefined
      */
     voronoiMaxRadius?: number | undefined;
     /**

package/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -23,7 +23,7 @@ function ChartsVoronoiHandler(props) {
     voronoiMaxRadius,
     onItemClick
   } = props;
-  const svgRef = React.useContext(_DrawingProvider.SVGContext);
+  const svgRef = React.useContext(_DrawingProvider.SvgContext);
   const {
     width,
     height,
@@ -216,7 +216,6 @@ process.env.NODE_ENV !== "production" ? ChartsVoronoiHandler.propTypes = {
   /**
    * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
    * If `undefined`, the radius is assumed to be infinite.
-   * @default undefined
    */
   voronoiMaxRadius: _propTypes.default.number
 } : void 0;

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");
@@ -180,7 +180,7 @@ function ChartsXAxis(inProps) {
     className: classes.tickLabel,
     ownerState: {}
   });
-  const xTicks = (0, _useTicks.default)({
+  const xTicks = (0, _useTicks.useTicks)({
     scale: xScale,
     tickNumber,
     valueFormatter,
@@ -338,7 +338,7 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    */
   tickMaxStep: _propTypes.default.number,
   /**
-   * Maximal step between two ticks.
+   * Minimal step between two ticks.
    * When using time data, the value is assumed to be in ms.
    * Not supported by categorical axis (band, points).
    */

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
@@ -268,7 +268,7 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    */
   tickMaxStep: _propTypes.default.number,
   /**
-   * Maximal step between two ticks.
+   * Minimal step between two ticks.
    * When using time data, the value is assumed to be in ms.
    * Not supported by categorical axis (band, points).
    */

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,154 @@
+"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.
+   */
+  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.
+   */
+  width: _propTypes.default.number
+} : void 0;

package/Gauge/GaugeContainer.d.ts

@@ -0,0 +1,17 @@
+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.
+     */
+    width?: number;
+    /**
+     * The height of the chart in px. If not defined, it takes the height of the parent element.
+     */
+    height?: number;
+    children?: React.ReactNode;
+}
+declare const GaugeContainer: React.ForwardRefExoticComponent<GaugeContainerProps & React.RefAttributes<unknown>>;
+export { GaugeContainer };