@mui/x-charts 7.22.2 → 8.0.0-alpha.0

package/BarChart/BarChart.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
+import { MakeOptional } from '@mui/x-internals/types';
 import { BarPlotProps, BarPlotSlotProps, BarPlotSlots } from './BarPlot';
-import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
+import { ChartContainerProps } from '../ChartContainer';
 import { ChartsAxisProps } from '../ChartsAxis';
 import { BarSeriesType } from '../models/seriesType/bar';
-import { MakeOptional } from '../models/helpers';
 import { ChartsTooltipProps, ChartsTooltipSlotProps, ChartsTooltipSlots } from '../ChartsTooltip';
-import { ChartsLegendProps, ChartsLegendSlots, ChartsLegendSlotProps } from '../ChartsLegend';
+import { ChartsLegendSlots, ChartsLegendSlotProps } from '../ChartsLegend';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsAxisSlots, ChartsAxisSlotProps } from '../models/axis';
 import { ChartsGridProps } from '../ChartsGrid';
@@ -15,7 +15,7 @@ export interface BarChartSlots extends ChartsAxisSlots, BarPlotSlots, ChartsLege
 }
 export interface BarChartSlotProps extends ChartsAxisSlotProps, BarPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps<'bar'>, ChartsOverlaySlotProps {
 }
-export interface BarChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<BarPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, ChartsOnAxisClickHandlerProps {
+export interface BarChartProps extends Omit<ChartContainerProps, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<BarPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, ChartsOnAxisClickHandlerProps {
     /**
      * The series to display in the bar chart.
      * An array of [[BarSeriesType]] objects.
@@ -39,9 +39,9 @@ export interface BarChartProps extends Omit<ResponsiveChartContainerProps, 'seri
      */
     axisHighlight?: ChartsAxisHighlightProps;
     /**
-     * @deprecated Consider using `slotProps.legend` instead.
+     * If `true`, the legend is not rendered.
      */
-    legend?: ChartsLegendProps;
+    hideLegend?: boolean;
     /**
      * Overridable component slots.
      * @default {}
@@ -69,5 +69,5 @@ export interface BarChartProps extends Omit<ResponsiveChartContainerProps, 'seri
  *
  * - [BarChart API](https://mui.com/x/api/charts/bar-chart/)
  */
-declare const BarChart: React.ForwardRefExoticComponent<BarChartProps & React.RefAttributes<unknown>>;
+declare const BarChart: React.ForwardRefExoticComponent<BarChartProps & React.RefAttributes<SVGSVGElement>>;
 export { BarChart };

package/BarChart/BarChart.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
 import { BarPlot } from "./BarPlot.js";
-import { ResponsiveChartContainer } from "../ResponsiveChartContainer/index.js";
+import { ChartContainer } from "../ChartContainer/index.js";
 import { ChartsAxis } from "../ChartsAxis/index.js";
 import { ChartsTooltip } from "../ChartsTooltip/index.js";
 import { ChartsLegend } from "../ChartsLegend/index.js";
@@ -46,12 +46,12 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(inProps, ref) {
     tooltipProps,
     children
   } = useBarChartProps(props);
-  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, _extends({
+  return /*#__PURE__*/_jsxs(ChartContainer, _extends({
     ref: ref
   }, chartContainerProps, {
     children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
       children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
-    })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+    })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
   }));
 });
 process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
@@ -116,6 +116,10 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: PropTypes.number,
+  /**
+   * If `true`, the legend is not rendered.
+   */
+  hideLegend: PropTypes.bool,
   /**
    * The item currently highlighted. Turns highlighting into a controlled prop.
    */
@@ -134,32 +138,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default yAxisIds[0] The id of the first provided axis
    */
   leftAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  /**
-   * @deprecated Consider using `slotProps.legend` instead.
-   */
-  legend: PropTypes.shape({
-    classes: PropTypes.object,
-    direction: PropTypes.oneOf(['column', 'row']),
-    hidden: PropTypes.bool,
-    itemGap: PropTypes.number,
-    itemMarkHeight: PropTypes.number,
-    itemMarkWidth: PropTypes.number,
-    labelStyle: PropTypes.object,
-    markGap: PropTypes.number,
-    onItemClick: PropTypes.func,
-    padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
-      bottom: PropTypes.number,
-      left: PropTypes.number,
-      right: PropTypes.number,
-      top: PropTypes.number
-    })]),
-    position: PropTypes.shape({
-      horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
-      vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
-    }),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object
-  }),
   /**
    * If `true`, a loading overlay is displayed.
    * @default false

package/BarChart/BarElement.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AnimatedProps } from '@react-spring/web';
-import { SlotComponentPropsFromProps } from '../internals/SlotComponentPropsFromProps';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { SeriesId } from '../models/seriesType/common';
 export interface BarElementClasses {
     /** Styles applied to the root element. */

package/BarChart/BarLabel/BarLabelItem.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SlotComponentPropsFromProps } from '../../internals/SlotComponentPropsFromProps';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { BarLabelOwnerState, BarItem, BarLabelContext } from './BarLabel.types';
 import { BarLabelProps } from './BarLabel';
 export interface BarLabelSlots {

package/BarChart/BarPlot.js

@@ -9,7 +9,7 @@ import { useTransition } from '@react-spring/web';
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { BarElement } from "./BarElement.js";
 import getColor from "./getColor.js";
-import { useChartId } from "../hooks/index.js";
+import { useChartId, useDrawingArea } from "../hooks/index.js";
 import { BarClipPath } from "./BarClipPath.js";
 import { BarLabelPlot } from "./BarLabel/BarLabelPlot.js";
 import { checkScaleErrors } from "./checkScaleErrors.js";
@@ -51,6 +51,7 @@ const useAggregatedData = () => {
     seriesOrder: []
   };
   const axisData = useCartesianContext();
+  const drawingArea = useDrawingArea();
   const chartId = useChartId();
   const {
     series,
@@ -68,9 +69,13 @@ const useAggregatedData = () => {
   const data = stackingGroups.flatMap(({
     ids: groupIds
   }, groupIndex) => {
+    const xMin = drawingArea.left;
+    const xMax = drawingArea.left + drawingArea.width;
+    const yMin = drawingArea.top;
+    const yMax = drawingArea.top + drawingArea.height;
     return groupIds.flatMap(seriesId => {
-      const xAxisId = series[seriesId].xAxisId ?? series[seriesId].xAxisKey ?? defaultXAxisId;
-      const yAxisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey ?? defaultYAxisId;
+      const xAxisId = series[seriesId].xAxisId ?? defaultXAxisId;
+      const yAxisId = series[seriesId].yAxisId ?? defaultYAxisId;
       const xAxisConfig = xAxis[xAxisId];
       const yAxisConfig = yAxis[yAxisId];
       const verticalLayout = series[seriesId].layout === 'vertical';
@@ -111,6 +116,9 @@ const useAggregatedData = () => {
           value: series[seriesId].data[dataIndex],
           maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
         };
+        if (result.x > xMax || result.x + result.width < xMin || result.y > yMax || result.y + result.height < yMin) {
+          return null;
+        }
         if (!masks[result.maskId]) {
           masks[result.maskId] = {
             id: result.maskId,
@@ -133,7 +141,7 @@ const useAggregatedData = () => {
         mask.hasNegative = mask.hasNegative || (result.value ?? 0) < 0;
         mask.hasPositive = mask.hasPositive || (result.value ?? 0) > 0;
         return result;
-      });
+      }).filter(rectangle => rectangle !== null);
     });
   });
   return {

package/BarChart/extremums.js

@@ -36,7 +36,7 @@ const getValueExtremum = direction => params => {
     isDefaultAxis
   } = params;
   return Object.keys(series).filter(seriesId => {
-    const yAxisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey;
+    const yAxisId = series[seriesId].yAxisId;
     return yAxisId === axis.id || isDefaultAxis && yAxisId === undefined;
   }).reduce((acc, seriesId) => {
     const {
@@ -45,8 +45,8 @@ const getValueExtremum = direction => params => {
     const filter = getFilters?.({
       currentAxisId: axis.id,
       isDefaultAxis,
-      seriesXAxisId: series[seriesId].xAxisId ?? series[seriesId].xAxisKey,
-      seriesYAxisId: series[seriesId].yAxisId ?? series[seriesId].yAxisKey
+      seriesXAxisId: series[seriesId].xAxisId,
+      seriesYAxisId: series[seriesId].yAxisId
     });
     const [seriesMin, seriesMax] = stackedData?.reduce((seriesAcc, values, index) => {
       if (filter && (!filter(createResult(values[0], direction), index) || !filter(createResult(values[1], direction), index))) {

package/BarChart/useBarChartProps.d.ts

@@ -1,5 +1,5 @@
 import type { BarChartProps } from './BarChart';
-import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
+import { ChartContainerProps } from '../ChartContainer';
 import { BarPlotProps } from './BarPlot';
 import { ChartsOnAxisClickHandlerProps } from '../ChartsOnAxisClickHandler';
 import { ChartsGridProps } from '../ChartsGrid';
@@ -17,7 +17,7 @@ import { ChartsTooltipProps } from '../ChartsTooltip';
  * @returns An object with props for the children components of BarChart
  */
 export declare const useBarChartProps: (props: BarChartProps) => {
-    chartContainerProps: ResponsiveChartContainerProps;
+    chartContainerProps: ChartContainerProps;
     barPlotProps: BarPlotProps;
     axisClickHandlerProps: ChartsOnAxisClickHandlerProps;
     gridProps: ChartsGridProps;

package/BarChart/useBarChartProps.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "tooltip", "onAxisClick", "axisHighlight", "legend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "tooltip", "onAxisClick", "axisHighlight", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend"];
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
 /**
@@ -26,7 +26,6 @@ export const useBarChartProps = props => {
       tooltip,
       onAxisClick,
       axisHighlight,
-      legend,
       grid,
       topAxis,
       leftAxis,
@@ -117,10 +116,10 @@ export const useBarChartProps = props => {
   } : {
     x: 'band'
   }, axisHighlight);
-  const legendProps = _extends({}, legend, {
+  const legendProps = {
     slots,
     slotProps
-  });
+  };
   const tooltipProps = _extends({}, tooltip, {
     slots,
     slotProps