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

package/legacy/BarChart/BarChart.js

@@ -11,6 +11,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 @@ var BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     tooltip = props.tooltip,
     axisHighlight = props.axisHighlight,
     legend = props.legend,
+    grid = props.grid,
     topAxis = props.topAxis,
     leftAxis = props.leftAxis,
     rightAxis = props.rightAxis,
@@ -94,6 +96,9 @@ var BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     disableAxisListener: (tooltip == null ? void 0 : tooltip.trigger) !== 'axis' && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : 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(#".concat(clipPathId, ")"),
       children: /*#__PURE__*/_jsx(BarPlot, {
@@ -126,11 +131,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']),
@@ -142,7 +146,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default xAxisIds[0] The id of the first provided axis
    */
   bottomAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -181,11 +185,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.
@@ -193,7 +208,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default yAxisIds[0] The id of the first provided axis
    */
   leftAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -259,7 +274,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default null
    */
   rightAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -280,6 +295,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.
@@ -298,6 +316,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,
@@ -312,7 +334,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default null
    */
   topAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -349,7 +371,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
    */
   xAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     data: PropTypes.array,
     dataKey: PropTypes.string,
@@ -357,13 +379,14 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
-    id: PropTypes.string,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
@@ -383,7 +406,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
    */
   yAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     data: PropTypes.array,
     dataKey: PropTypes.string,
@@ -391,13 +414,14 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
-    id: PropTypes.string,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,

package/legacy/BarChart/BarElement.js

@@ -104,6 +104,7 @@ process.env.NODE_ENV !== "production" ? BarElement.propTypes = {
     faded: PropTypes.oneOf(['global', 'none', 'series']),
     highlighted: PropTypes.oneOf(['item', 'none', 'series'])
   }),
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   /**
    * The props used for each component slot.
    * @default {}

package/legacy/BarChart/BarPlot.js

@@ -10,7 +10,7 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { BarElement } from './BarElement';
 import { isBandScaleConfig } from '../models/axis';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
-
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Solution of the equations
  * W = barWidth * N + offset * (N-1)
@@ -20,7 +20,6 @@ import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
  * @param gapRatio The ratio of the gap between bars over the bar width.
  * @returns The bar width and the offset between bars.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 function getBandSize(_ref) {
   var W = _ref.bandWidth,
     N = _ref.numberOfGroups,
@@ -97,20 +96,21 @@ var useAggregatedData = function useAggregatedData() {
         color = _series$seriesId.color;
       return stackedData.map(function (values, dataIndex) {
         var _xAxis$xAxisKey$data, _yAxis$yAxisKey$data;
-        var bottom = Math.min.apply(Math, _toConsumableArray(values));
-        var top = Math.max.apply(Math, _toConsumableArray(values));
+        var valueCoordinates = values.map(function (v) {
+          return verticalLayout ? yScale(v) : xScale(v);
+        });
+        var minValueCoord = Math.min.apply(Math, _toConsumableArray(valueCoordinates));
+        var maxValueCoord = Math.max.apply(Math, _toConsumableArray(valueCoordinates));
         return {
-          bottom: bottom,
-          top: top,
           seriesId: seriesId,
           dataIndex: dataIndex,
           layout: series[seriesId].layout,
-          x: verticalLayout ? xScale((_xAxis$xAxisKey$data = xAxis[xAxisKey].data) == null ? void 0 : _xAxis$xAxisKey$data[dataIndex]) + barOffset : xScale(bottom),
-          y: verticalLayout ? yScale(top) : yScale((_yAxis$yAxisKey$data = yAxis[yAxisKey].data) == null ? void 0 : _yAxis$yAxisKey$data[dataIndex]) + barOffset,
+          x: verticalLayout ? xScale((_xAxis$xAxisKey$data = xAxis[xAxisKey].data) == null ? void 0 : _xAxis$xAxisKey$data[dataIndex]) + barOffset : minValueCoord,
+          y: verticalLayout ? minValueCoord : yScale((_yAxis$yAxisKey$data = yAxis[yAxisKey].data) == null ? void 0 : _yAxis$yAxisKey$data[dataIndex]) + barOffset,
           xOrigin: xScale(0),
           yOrigin: yScale(0),
-          height: verticalLayout ? Math.abs(yScale(bottom) - yScale(top)) : barWidth,
-          width: verticalLayout ? barWidth : Math.abs(xScale(bottom) - xScale(top)),
+          height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,
+          width: verticalLayout ? barWidth : maxValueCoord - minValueCoord,
           color: color,
           highlightScope: series[seriesId].highlightScope
         };

package/legacy/ChartContainer/ChartContainer.js

@@ -120,7 +120,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
    */
   xAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     data: PropTypes.array,
     dataKey: PropTypes.string,
@@ -128,13 +128,14 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
-    id: PropTypes.string,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
@@ -154,7 +155,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
    */
   yAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     data: PropTypes.array,
     dataKey: PropTypes.string,
@@ -162,13 +163,14 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
-    id: PropTypes.string,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,

package/legacy/ChartsAxis/ChartsAxis.js

@@ -99,7 +99,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
    * @default xAxisIds[0] The id of the first provided axis
    */
   bottomAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -126,7 +126,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
    * @default yAxisIds[0] The id of the first provided axis
    */
   leftAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -153,7 +153,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
    * @default null
    */
   rightAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -190,7 +190,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
    * @default null
    */
   topAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,

package/legacy/ChartsGrid/ChartsGrid.js

@@ -0,0 +1,119 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _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";
+var GridRoot = styled('g', {
+  name: 'MuiChartsGrid',
+  slot: 'Root',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.root;
+  }
+})(function (_ref) {
+  var theme = _ref.theme;
+  return _defineProperty({}, "& .".concat(chartsGridClasses.line), {
+    stroke: (theme.vars || theme).palette.divider,
+    shapeRendering: 'crispEdges',
+    strokeWidth: 1
+  });
+});
+var useUtilityClasses = function useUtilityClasses(_ref3) {
+  var classes = _ref3.classes;
+  var 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) {
+  var vertical = props.vertical,
+    horizontal = props.horizontal,
+    other = _objectWithoutProperties(props, _excluded);
+  var _React$useContext = React.useContext(CartesianContext),
+    xAxis = _React$useContext.xAxis,
+    xAxisIds = _React$useContext.xAxisIds,
+    yAxis = _React$useContext.yAxis,
+    yAxisIds = _React$useContext.yAxisIds;
+  var classes = useUtilityClasses(props);
+  var horizontalAxisId = yAxisIds[0];
+  var verticalAxisId = xAxisIds[0];
+  var _xAxis$verticalAxisId = xAxis[verticalAxisId],
+    xScale = _xAxis$verticalAxisId.scale,
+    xTickNumber = _xAxis$verticalAxisId.tickNumber,
+    xTickInterval = _xAxis$verticalAxisId.tickInterval;
+  var _yAxis$horizontalAxis = yAxis[horizontalAxisId],
+    yScale = _yAxis$horizontalAxis.scale,
+    yTickNumber = _yAxis$horizontalAxis.tickNumber,
+    yTickInterval = _yAxis$horizontalAxis.tickInterval;
+  var xTicks = useTicks({
+    scale: xScale,
+    tickNumber: xTickNumber,
+    tickInterval: xTickInterval
+  });
+  var yTicks = useTicks({
+    scale: yScale,
+    tickNumber: yTickNumber,
+    tickInterval: yTickInterval
+  });
+  return /*#__PURE__*/_jsxs(GridRoot, _extends({}, other, {
+    className: classes.root,
+    children: [vertical && xTicks.map(function (_ref4) {
+      var formattedValue = _ref4.formattedValue,
+        offset = _ref4.offset;
+      return /*#__PURE__*/_jsx("line", {
+        y1: yScale.range()[0],
+        y2: yScale.range()[1],
+        x1: offset,
+        x2: offset,
+        className: classes.verticalLine
+      }, formattedValue);
+    }), horizontal && yTicks.map(function (_ref5) {
+      var formattedValue = _ref5.formattedValue,
+        offset = _ref5.offset;
+      return /*#__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/legacy/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 var chartsGridClasses = generateUtilityClasses('MuiChartsGrid', ['root', 'line', 'horizontalLine', 'verticalLine']);

package/legacy/ChartsGrid/index.js

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