@mui/x-charts 7.22.3 → 8.0.0-alpha.1

package/BarChart/BarElement.js

@@ -8,39 +8,27 @@ import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import useSlotProps from '@mui/utils/useSlotProps';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import { color as d3Color } from '@mui/x-charts-vendor/d3-color';
-import { animated } from '@react-spring/web';
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 import { useItemHighlighted } from "../context/index.js";
+import { AnimatedBarElement } from "./AnimatedBarElement.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getBarElementUtilityClass(slot) {
   return generateUtilityClass('MuiBarElement', slot);
 }
-export const barElementClasses = generateUtilityClasses('MuiBarElement', ['root']);
+export const barElementClasses = generateUtilityClasses('MuiBarElement', ['root', 'highlighted', 'faded']);
 const useUtilityClasses = ownerState => {
   const {
     classes,
-    id
+    id,
+    isHighlighted,
+    isFaded
   } = ownerState;
   const slots = {
-    root: ['root', `series-${id}`]
+    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
   };
   return composeClasses(slots, getBarElementUtilityClass, classes);
 };
-export const BarElementPath = styled(animated.rect, {
-  name: 'MuiBarElement',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.root
-})(({
-  ownerState
-}) => ({
-  stroke: 'none',
-  fill: ownerState.isHighlighted ? d3Color(ownerState.color).brighter(0.5).formatHex() : ownerState.color,
-  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
-  opacity: ownerState.isFaded && 0.3 || 1
-}));
 function BarElement(props) {
   const {
       id,
@@ -70,7 +58,7 @@ function BarElement(props) {
     isHighlighted
   };
   const classes = useUtilityClasses(ownerState);
-  const Bar = slots?.bar ?? BarElementPath;
+  const Bar = slots?.bar ?? AnimatedBarElement;
   const barProps = useSlotProps({
     elementType: Bar,
     externalSlotProps: slotProps?.bar,
@@ -82,7 +70,9 @@ function BarElement(props) {
     }), {
       style,
       onClick,
-      cursor: onClick ? 'pointer' : 'unset'
+      cursor: onClick ? 'pointer' : 'unset',
+      stroke: 'none',
+      fill: color
     }),
     className: classes.root,
     ownerState

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

@@ -6,10 +6,11 @@ const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
+import { styled } from '@mui/material/styles';
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
-import { BarElement } from "./BarElement.js";
+import { BarElement, barElementClasses } 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 +52,7 @@ const useAggregatedData = () => {
     seriesOrder: []
   };
   const axisData = useCartesianContext();
+  const drawingArea = useDrawingArea();
   const chartId = useChartId();
   const {
     series,
@@ -68,9 +70,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 +117,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 +142,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 {
@@ -171,6 +180,15 @@ const enterStyle = ({
   height,
   width
 });
+const BarPlotRoot = styled('g', {
+  name: 'MuiBarPlot',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})({
+  [`& .${barElementClasses.root}`]: {
+    transition: 'opacity 0.2s ease-in, fill 0.2s ease-in'
+  }
+});
 
 /**
  * Demos:
@@ -213,7 +231,7 @@ function BarPlot(props) {
     update: enterStyle,
     immediate: skipAnimation
   });
-  return /*#__PURE__*/_jsxs(React.Fragment, {
+  return /*#__PURE__*/_jsxs(BarPlotRoot, {
     children: [!withoutBorderRadius && maskTransition((style, {
       id,
       hasPositive,

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';
@@ -8,7 +8,6 @@ import { ChartsOverlayProps } from '../ChartsOverlay';
 import { ChartsAxisProps } from '../ChartsAxis';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsLegendProps } from '../ChartsLegend';
-import { ChartsTooltipProps } from '../ChartsTooltip';
 /**
  * A helper function that extracts BarChartProps from the input props
  * and returns an object with props for the children components of BarChart.
@@ -17,7 +16,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;
@@ -29,6 +28,5 @@ export declare const useBarChartProps: (props: BarChartProps) => {
     chartsAxisProps: ChartsAxisProps;
     axisHighlightProps: ChartsAxisHighlightProps;
     legendProps: ChartsLegendProps;
-    tooltipProps: ChartsTooltipProps<"bar">;
     children: import("react").ReactNode;
 };

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", "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";
 /**
@@ -23,10 +23,8 @@ export const useBarChartProps = props => {
       colors,
       dataset,
       sx,
-      tooltip,
       onAxisClick,
       axisHighlight,
-      legend,
       grid,
       topAxis,
       leftAxis,
@@ -75,7 +73,7 @@ export const useBarChartProps = props => {
     sx,
     highlightedItem,
     onHighlightChange,
-    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
+    disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
     className,
     skipAnimation
   });
@@ -117,14 +115,10 @@ export const useBarChartProps = props => {
   } : {
     x: 'band'
   }, axisHighlight);
-  const legendProps = _extends({}, legend, {
+  const legendProps = {
     slots,
     slotProps
-  });
-  const tooltipProps = _extends({}, tooltip, {
-    slots,
-    slotProps
-  });
+  };
   return {
     chartContainerProps,
     barPlotProps,
@@ -136,7 +130,6 @@ export const useBarChartProps = props => {
     chartsAxisProps,
     axisHighlightProps,
     legendProps,
-    tooltipProps,
     children
   };
 };