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

package/hooks/useTicks.d.ts

@@ -7,7 +7,7 @@ export interface TickParams {
      */
     tickMaxStep?: 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).
      */
@@ -39,8 +39,7 @@ export type TickItemType = {
     offset: number;
     labelOffset: number;
 };
-declare function useTicks(options: {
+export declare function useTicks(options: {
     scale: D3Scale;
     valueFormatter?: (value: any) => string;
 } & Pick<TickParams, 'tickNumber' | 'tickInterval'>): TickItemType[];
-export default useTicks;

package/hooks/useTicks.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
 exports.getTickNumber = getTickNumber;
+exports.useTicks = useTicks;
 var React = _interopRequireWildcard(require("react"));
 var _isBandScale = require("../internals/isBandScale");
 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); }
@@ -64,5 +64,4 @@ function useTicks(options) {
       labelOffset: 0
     }));
   }, [tickNumber, scale, valueFormatter, tickInterval]);
-}
-var _default = exports.default = useTicks;
+}

package/index.d.ts

@@ -8,6 +8,7 @@ export * from './ChartsReferenceLine';
 export * from './ChartsAxis';
 export * from './ChartsXAxis';
 export * from './ChartsYAxis';
+export * from './ChartsGrid';
 export * from './ChartsText';
 export * from './ChartsTooltip';
 export * from './ChartsLegend';
@@ -19,6 +20,7 @@ export * from './LineChart';
 export * from './PieChart';
 export * from './ScatterChart';
 export * from './SparkLineChart';
+export * from './Gauge';
 export * from './ChartContainer';
 export * from './ChartsSurface';
 export * from './ResponsiveChartContainer';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.0.0-beta.2
+ * @mui/x-charts v7.0.0-beta.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -120,6 +120,17 @@ Object.keys(_ChartsYAxis).forEach(function (key) {
     }
   });
 });
+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 _ChartsText = require("./ChartsText");
 Object.keys(_ChartsText).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -241,6 +252,17 @@ Object.keys(_SparkLineChart).forEach(function (key) {
     }
   });
 });
+var _Gauge = require("./Gauge");
+Object.keys(_Gauge).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Gauge[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Gauge[key];
+    }
+  });
+});
 var _ChartContainer = require("./ChartContainer");
 Object.keys(_ChartContainer).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/modern/BarChart/BarChart.js

@@ -10,6 +10,7 @@ import { ChartsTooltip } from '../ChartsTooltip';
 import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { ChartsClipPath } from '../ChartsClipPath';
+import { ChartsGrid } from '../ChartsGrid';
 import { ChartsOnAxisClickHandler } from '../ChartsOnAxisClickHandler';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -39,6 +40,7 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     tooltip,
     axisHighlight,
     legend,
+    grid,
     topAxis,
     leftAxis,
     rightAxis,
@@ -86,6 +88,9 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
     children: [onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, {
       onAxisClick: onAxisClick
+    }), grid && /*#__PURE__*/_jsx(ChartsGrid, {
+      vertical: grid.vertical,
+      horizontal: grid.horizontal
     }), /*#__PURE__*/_jsx("g", {
       clipPath: `url(#${clipPathId})`,
       children: /*#__PURE__*/_jsx(BarPlot, {
@@ -118,11 +123,10 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   /**
-   * Object `{ x, y }` that defines how the charts highlight the mouse position along the x- and y-axes.
-   * The two properties accept the following values:
-   * - 'none': display nothing.
-   * - 'line': display a line at the current mouse position.
-   * - 'band': display a band at the current mouse position. Only available with band scale.
+   * The configuration of axes highlight.
+   * Default is set to 'band' in the bar direction.
+   * Depends on `layout` prop.
+   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
    */
   axisHighlight: PropTypes.shape({
     x: PropTypes.oneOf(['band', 'line', 'none']),
@@ -173,11 +177,21 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default false
    */
   disableAxisListener: PropTypes.bool,
+  /**
+   * Option to display a cartesian grid in the background.
+   */
+  grid: PropTypes.shape({
+    horizontal: PropTypes.bool,
+    vertical: PropTypes.bool
+  }),
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
-   * @default undefined
    */
   height: PropTypes.number,
+  /**
+   * The direction of the bar elements.
+   * @default 'vertical'
+   */
   layout: PropTypes.oneOf(['horizontal', 'vertical']),
   /**
    * Indicate which axis to display the left of the charts.
@@ -272,6 +286,9 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
+  /**
+   * The series to display in the bar chart.
+   */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**
    * If `true`, animations are skipped.
@@ -290,6 +307,10 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
+  /**
+   * The configuration of the tooltip.
+   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
+   */
   tooltip: PropTypes.shape({
     axisContent: PropTypes.elementType,
     classes: PropTypes.object,
@@ -333,7 +354,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
-   * @default undefined
    */
   width: PropTypes.number,
   /**

package/modern/ChartsGrid/ChartsGrid.js

@@ -0,0 +1,121 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["vertical", "horizontal"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import composeClasses from '@mui/utils/composeClasses';
+import { styled } from '@mui/material/styles';
+import { CartesianContext } from '../context/CartesianContextProvider';
+import { useTicks } from '../hooks/useTicks';
+import { getChartsGridUtilityClass, chartsGridClasses } from './chartsGridClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const GridRoot = styled('g', {
+  name: 'MuiChartsGrid',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme
+}) => ({
+  [`& .${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 composeClasses(slots, 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 = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    xAxis,
+    xAxisIds,
+    yAxis,
+    yAxisIds
+  } = React.useContext(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 = useTicks({
+    scale: xScale,
+    tickNumber: xTickNumber,
+    tickInterval: xTickInterval
+  });
+  const yTicks = useTicks({
+    scale: yScale,
+    tickNumber: yTickNumber,
+    tickInterval: yTickInterval
+  });
+  return /*#__PURE__*/_jsxs(GridRoot, _extends({}, other, {
+    className: classes.root,
+    children: [vertical && xTicks.map(({
+      formattedValue,
+      offset
+    }) => /*#__PURE__*/_jsx("line", {
+      y1: yScale.range()[0],
+      y2: yScale.range()[1],
+      x1: offset,
+      x2: offset,
+      className: classes.verticalLine
+    }, formattedValue)), horizontal && yTicks.map(({
+      formattedValue,
+      offset
+    }) => /*#__PURE__*/_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.object,
+  /**
+   * Displays horizontal grid.
+   */
+  horizontal: PropTypes.bool,
+  /**
+   * Displays vertical grid.
+   */
+  vertical: PropTypes.bool
+} : void 0;
+export { ChartsGrid };

package/modern/ChartsGrid/chartsGridClasses.js

@@ -0,0 +1,6 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getChartsGridUtilityClass(slot) {
+  return generateUtilityClass('MuiChartsGrid', slot);
+}
+export const chartsGridClasses = generateUtilityClasses('MuiChartsGrid', ['root', 'line', 'horizontalLine', 'verticalLine']);

package/modern/ChartsGrid/index.js

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

package/modern/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { SVGContext } from '../context/DrawingProvider';
+import { SvgContext } from '../context/DrawingProvider';
 import { InteractionContext } from '../context/InteractionProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { SeriesContext } from '../context/SeriesContextProvider';
@@ -9,7 +9,7 @@ function ChartsOnAxisClickHandler(props) {
   const {
     onAxisClick
   } = props;
-  const svgRef = React.useContext(SVGContext);
+  const svgRef = React.useContext(SvgContext);
   const series = React.useContext(SeriesContext);
   const {
     axis

package/modern/ChartsSurface.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className"];
+const _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className", "title", "desc"];
 import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import * as React from 'react';
@@ -17,7 +17,9 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(props
       width,
       height,
       viewBox,
-      disableAxisListener = false
+      disableAxisListener = false,
+      title,
+      desc
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const svgView = _extends({
@@ -34,9 +36,9 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(props
     ref: ref
   }, other, {
     children: [/*#__PURE__*/_jsx("title", {
-      children: props.title
+      children: title
     }), /*#__PURE__*/_jsx("desc", {
-      children: props.desc
+      children: desc
     }), children]
   }));
 });

package/modern/ChartsTooltip/utils.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SVGContext } from '../context/DrawingProvider';
+import { SvgContext } from '../context/DrawingProvider';
 export function generateVirtualElement(mousePosition) {
   if (mousePosition === null) {
     return {
@@ -44,7 +44,7 @@ export function generateVirtualElement(mousePosition) {
   };
 }
 export function useMouseTracker() {
-  const svgRef = React.useContext(SVGContext);
+  const svgRef = React.useContext(SvgContext);
 
   // Use a ref to avoid rerendering on every mousemove event.
   const [mousePosition, setMousePosition] = React.useState(null);

package/modern/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -4,7 +4,7 @@ import { Delaunay } from 'd3-delaunay';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { InteractionContext } from '../context/InteractionProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
-import { SVGContext, DrawingContext } from '../context/DrawingProvider';
+import { SvgContext, DrawingContext } from '../context/DrawingProvider';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { getSVGPoint } from '../internals/utils';
@@ -14,7 +14,7 @@ function ChartsVoronoiHandler(props) {
     voronoiMaxRadius,
     onItemClick
   } = props;
-  const svgRef = React.useContext(SVGContext);
+  const svgRef = React.useContext(SvgContext);
   const {
     width,
     height,
@@ -207,7 +207,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.number
 } : void 0;

package/modern/ChartsXAxis/ChartsXAxis.js

@@ -8,7 +8,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useThemeProps, useTheme } from '@mui/material/styles';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { DrawingContext } from '../context/DrawingProvider';
-import useTicks from '../hooks/useTicks';
+import { useTicks } from '../hooks/useTicks';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
 import { AxisRoot } from '../internals/components/AxisSharedComponents';
 import { ChartsText } from '../ChartsText';
@@ -330,7 +330,7 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    */
   tickMaxStep: PropTypes.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/modern/ChartsYAxis/ChartsYAxis.js

@@ -8,7 +8,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useThemeProps, useTheme } from '@mui/material/styles';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { DrawingContext } from '../context/DrawingProvider';
-import useTicks from '../hooks/useTicks';
+import { useTicks } from '../hooks/useTicks';
 import { AxisRoot } from '../internals/components/AxisSharedComponents';
 import { ChartsText } from '../ChartsText';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
@@ -260,7 +260,7 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    */
   tickMaxStep: PropTypes.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/modern/Gauge/Gauge.js

@@ -0,0 +1,147 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["text", "children", "classes"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import composeClasses from '@mui/utils/composeClasses';
+import { GaugeContainer } from './GaugeContainer';
+import { GaugeValueArc } from './GaugeValueArc';
+import { GaugeReferenceArc } from './GaugeReferenceArc';
+import { getGaugeUtilityClass } from './gaugeClasses';
+import { GaugeValueText } from './GaugeValueText';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = props => {
+  const {
+    classes
+  } = props;
+  const slots = {
+    root: ['root'],
+    valueArc: ['valueArc'],
+    referenceArc: ['referenceArc'],
+    valueText: ['valueText']
+  };
+  return composeClasses(slots, getGaugeUtilityClass, classes);
+};
+function Gauge(props) {
+  const {
+      text,
+      children
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const classes = useUtilityClasses(props);
+  return /*#__PURE__*/_jsxs(GaugeContainer, _extends({}, other, {
+    className: classes.root,
+    children: [/*#__PURE__*/_jsx(GaugeReferenceArc, {
+      className: classes.referenceArc
+    }), /*#__PURE__*/_jsx(GaugeValueArc, {
+      className: classes.valueArc
+    }), /*#__PURE__*/_jsx(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.node,
+  classes: PropTypes.object,
+  className: PropTypes.string,
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * Set it to '50%' to get rounded arc.
+   * @default 0
+   */
+  cornerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.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.oneOfType([PropTypes.number, PropTypes.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.oneOfType([PropTypes.number, PropTypes.string]),
+  desc: PropTypes.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.bool,
+  /**
+   * The end angle (deg).
+   * @default 360
+   */
+  endAngle: PropTypes.number,
+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   */
+  height: PropTypes.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.oneOfType([PropTypes.number, PropTypes.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.shape({
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.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.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The start angle (deg).
+   * @default 0
+   */
+  startAngle: PropTypes.number,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  text: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  title: PropTypes.string,
+  /**
+   * The value of the gauge.
+   * Set to `null` to not display a value.
+   */
+  value: PropTypes.number,
+  /**
+   * The maximal value of the gauge.
+   * @default 100
+   */
+  valueMax: PropTypes.number,
+  /**
+   * The minimal value of the gauge.
+   * @default 0
+   */
+  valueMin: PropTypes.number,
+  viewBox: PropTypes.shape({
+    height: PropTypes.number,
+    width: PropTypes.number,
+    x: PropTypes.number,
+    y: PropTypes.number
+  }),
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   */
+  width: PropTypes.number
+} : void 0;
+export { Gauge };