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

package/legacy/ScatterChart/ScatterChart.js

@@ -8,6 +8,7 @@ import { ChartsTooltip } from '../ChartsTooltip';
 import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { ChartsVoronoiHandler } from '../ChartsVoronoiHandler/ChartsVoronoiHandler';
+import { ChartsGrid } from '../ChartsGrid';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -34,6 +35,7 @@ var ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props, re
     margin = props.margin,
     colors = props.colors,
     sx = props.sx,
+    grid = props.grid,
     topAxis = props.topAxis,
     leftAxis = props.leftAxis,
     rightAxis = props.rightAxis,
@@ -66,6 +68,9 @@ var ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props, re
       bottomAxis: bottomAxis,
       slots: slots,
       slotProps: slotProps
+    }), grid && /*#__PURE__*/_jsx(ChartsGrid, {
+      vertical: grid.vertical,
+      horizontal: grid.horizontal
     }), /*#__PURE__*/_jsx(ScatterPlot, {
       slots: slots,
       slotProps: slotProps,
@@ -86,6 +91,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * The configuration of axes highlight.
+   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
+   * @default { x: 'none', y: 'none' }
+   */
   axisHighlight: PropTypes.shape({
     x: PropTypes.oneOf(['band', 'line', 'none']),
     y: PropTypes.oneOf(['band', 'line', 'none'])
@@ -140,6 +150,13 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @default false
    */
   disableVoronoi: 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
@@ -231,6 +248,9 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
+  /**
+   * The series to display in the scatter chart.
+   */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**
    * The props used for each component slot.
@@ -244,6 +264,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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.
+   * @default { trigger: 'item' }
+   */
   tooltip: PropTypes.shape({
     axisContent: PropTypes.elementType,
     classes: PropTypes.object,

package/legacy/hooks/useTicks.js

@@ -13,7 +13,7 @@ export function getTickNumber(params) {
   var defaultizedTickNumber = tickNumber != null ? tickNumber : Math.floor(Math.abs(range[1] - range[0]) / 50);
   return Math.min(maxTicks, Math.max(minTicks, defaultizedTickNumber));
 }
-function useTicks(options) {
+export function useTicks(options) {
   var scale = options.scale,
     tickNumber = options.tickNumber,
     valueFormatter = options.valueFormatter,
@@ -62,5 +62,4 @@ function useTicks(options) {
       };
     });
   }, [tickNumber, scale, valueFormatter, tickInterval]);
-}
-export default useTicks;
+}

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.0.0-beta.2
+ * @mui/x-charts v7.0.0-beta.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -15,6 +15,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';
@@ -26,6 +27,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/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,22 @@ 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 +287,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 +308,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,

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/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/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';

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';

package/modern/Gauge/Gauge.js

@@ -0,0 +1,149 @@
+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.
+   * @default undefined
+   */
+  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.
+   * @default undefined
+   */
+  width: PropTypes.number
+} : void 0;
+export { Gauge };