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

package/BarChart/BarPlot.js

@@ -6,16 +6,16 @@ const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
-import { BarElement } from "./BarElement.js";
+import { styled } from '@mui/material/styles';
+import { BarElement, barElementClasses } from "./BarElement.js";
 import getColor from "./getColor.js";
-import { useChartId, useDrawingArea } from "../hooks/index.js";
+import { useChartId, useDrawingArea, useXAxes, useYAxes } from "../hooks/index.js";
 import { BarClipPath } from "./BarClipPath.js";
 import { BarLabelPlot } from "./BarLabel/BarLabelPlot.js";
 import { checkScaleErrors } from "./checkScaleErrors.js";
 import { useBarSeries } from "../hooks/useSeries.js";
 import { useSkipAnimation } from "../context/AnimationProvider/index.js";
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Solution of the equations
  * W = barWidth * N + offset * (N-1)
@@ -25,7 +25,6 @@ import { useSkipAnimation } from "../context/AnimationProvider/index.js";
  * @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, jsxs as _jsxs } from "react/jsx-runtime";
 function getBandSize({
   bandWidth: W,
   numberOfGroups: N,
@@ -50,7 +49,6 @@ const useAggregatedData = () => {
     stackingGroups: [],
     seriesOrder: []
   };
-  const axisData = useCartesianContext();
   const drawingArea = useDrawingArea();
   const chartId = useChartId();
   const {
@@ -59,10 +57,12 @@ const useAggregatedData = () => {
   } = seriesData;
   const {
     xAxis,
+    xAxisIds
+  } = useXAxes();
+  const {
     yAxis,
-    xAxisIds,
     yAxisIds
-  } = axisData;
+  } = useYAxes();
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   const masks = {};
@@ -179,6 +179,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:
@@ -207,7 +216,7 @@ function BarPlot(props) {
   const withoutBorderRadius = !borderRadius || borderRadius <= 0;
   const transition = useTransition(completedData, {
     keys: bar => `${bar.seriesId}-${bar.dataIndex}`,
-    from: leaveStyle,
+    from: skipAnimation ? undefined : leaveStyle,
     leave: leaveStyle,
     enter: enterStyle,
     update: enterStyle,
@@ -215,13 +224,13 @@ function BarPlot(props) {
   });
   const maskTransition = useTransition(withoutBorderRadius ? [] : masksData, {
     keys: v => v.id,
-    from: leaveStyle,
+    from: skipAnimation ? undefined : leaveStyle,
     leave: leaveStyle,
     enter: enterStyle,
     update: enterStyle,
     immediate: skipAnimation
   });
-  return /*#__PURE__*/_jsxs(React.Fragment, {
+  return /*#__PURE__*/_jsxs(BarPlotRoot, {
     children: [!withoutBorderRadius && maskTransition((style, {
       id,
       hasPositive,

package/BarChart/extremums.d.ts

@@ -1,3 +1,3 @@
-import { ExtremumGetter } from '../context/PluginProvider/ExtremumGetter.types';
-export declare const getExtremumX: ExtremumGetter<'bar'>;
-export declare const getExtremumY: ExtremumGetter<'bar'>;
+import { CartesianExtremumGetter } from '../internals/plugins/models/seriesConfig/extremumGetter.types';
+export declare const getExtremumX: CartesianExtremumGetter<'bar'>;
+export declare const getExtremumY: CartesianExtremumGetter<'bar'>;

package/BarChart/formatter.d.ts

@@ -1,3 +1,3 @@
-import { SeriesFormatter } from '../context/PluginProvider/SeriesFormatter.types';
-declare const formatter: SeriesFormatter<'bar'>;
+import { SeriesProcessor } from '../internals/plugins/models';
+declare const formatter: SeriesProcessor<'bar'>;
 export default formatter;

package/BarChart/formatter.js

@@ -45,7 +45,8 @@ const formatter = (params, dataset) => {
     ids.forEach((id, index) => {
       const dataKey = series[id].dataKey;
       completedSeries[id] = _extends({
-        layout: 'vertical'
+        layout: 'vertical',
+        labelMarkType: 'square'
       }, series[id], {
         data: dataKey ? dataset.map(data => {
           const value = data[dataKey];

package/BarChart/getColor.d.ts

@@ -1,3 +1,3 @@
-import { ColorProcessor } from '../context/PluginProvider/ColorProcessor.types';
+import { ColorProcessor } from '../internals/plugins/models';
 declare const getColor: ColorProcessor<'bar'>;
 export default getColor;

package/BarChart/legend.d.ts

@@ -1,3 +1,3 @@
-import { LegendGetter } from '../context/PluginProvider';
+import { LegendGetter } from '../internals/plugins/models';
 declare const legendGetter: LegendGetter<'bar'>;
 export default legendGetter;

package/BarChart/legend.js

@@ -10,6 +10,7 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      markType: series[seriesId].labelMarkType,
       id: seriesId,
       seriesId,
       color: series[seriesId].color,

package/BarChart/plugin.d.ts

@@ -1,2 +1,2 @@
-import type { ChartsPlugin } from '../context/PluginProvider';
-export declare const plugin: ChartsPlugin<'bar'>;
+import { ChartSeriesTypeConfig } from '../internals/plugins/models/seriesConfig';
+export declare const plugin: ChartSeriesTypeConfig<'bar'>;

package/BarChart/plugin.js

@@ -1,10 +1,13 @@
 import { getExtremumX, getExtremumY } from "./extremums.js";
 import formatter from "./formatter.js";
+import legendGetter from "./legend.js";
 import getColor from "./getColor.js";
+import tooltipGetter from "./tooltip.js";
 export const plugin = {
-  seriesType: 'bar',
-  seriesFormatter: formatter,
+  seriesProcessor: formatter,
   colorProcessor: getColor,
+  legendGetter,
+  tooltipGetter,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY
 };

package/BarChart/tooltip.d.ts

@@ -0,0 +1,3 @@
+import type { TooltipGetter } from '../internals/plugins/models';
+declare const tooltipGetter: TooltipGetter<'bar'>;
+export default tooltipGetter;

package/BarChart/tooltip.js

@@ -0,0 +1,25 @@
+import { getLabel } from "../internals/getLabel.js";
+const tooltipGetter = params => {
+  const {
+    series,
+    getColor,
+    identifier
+  } = params;
+  if (!identifier || identifier.dataIndex === undefined) {
+    return null;
+  }
+  const label = getLabel(series.label, 'tooltip');
+  const value = series.data[identifier.dataIndex];
+  const formattedValue = series.valueFormatter(value, {
+    dataIndex: identifier.dataIndex
+  });
+  return {
+    identifier,
+    color: getColor(identifier.dataIndex),
+    label,
+    value,
+    formattedValue,
+    markType: series.labelMarkType
+  };
+};
+export default tooltipGetter;

package/BarChart/useBarChartProps.d.ts

@@ -7,8 +7,8 @@ import { ChartsClipPathProps } from '../ChartsClipPath';
 import { ChartsOverlayProps } from '../ChartsOverlay';
 import { ChartsAxisProps } from '../ChartsAxis';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
-import { ChartsLegendProps } from '../ChartsLegend';
-import { ChartsTooltipProps } from '../ChartsTooltip';
+import { ChartsLegendSlotExtension } from '../ChartsLegend';
+import type { ChartsWrapperProps } from '../internals/components/ChartsWrapper';
 /**
  * A helper function that extracts BarChartProps from the input props
  * and returns an object with props for the children components of BarChart.
@@ -17,7 +17,8 @@ import { ChartsTooltipProps } from '../ChartsTooltip';
  * @returns An object with props for the children components of BarChart
  */
 export declare const useBarChartProps: (props: BarChartProps) => {
-    chartContainerProps: ChartContainerProps;
+    chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
+    chartContainerProps: Omit<ChartContainerProps<"bar">, "plugins">;
     barPlotProps: BarPlotProps;
     axisClickHandlerProps: ChartsOnAxisClickHandlerProps;
     gridProps: ChartsGridProps;
@@ -28,7 +29,6 @@ export declare const useBarChartProps: (props: BarChartProps) => {
     overlayProps: ChartsOverlayProps;
     chartsAxisProps: ChartsAxisProps;
     axisHighlightProps: ChartsAxisHighlightProps;
-    legendProps: ChartsLegendProps;
-    tooltipProps: ChartsTooltipProps<"bar">;
+    legendProps: ChartsLegendSlotExtension;
     children: import("react").ReactNode;
 };

package/BarChart/useBarChartProps.js

@@ -2,9 +2,11 @@
 
 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", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend"];
+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";
+import { calculateMargins } from "../internals/calculateMargins.js";
+
 /**
  * A helper function that extracts BarChartProps from the input props
  * and returns an object with props for the children components of BarChart.
@@ -23,7 +25,6 @@ export const useBarChartProps = props => {
       colors,
       dataset,
       sx,
-      tooltip,
       onAxisClick,
       axisHighlight,
       grid,
@@ -42,7 +43,8 @@ export const useBarChartProps = props => {
       onHighlightChange,
       borderRadius,
       barLabel,
-      className
+      className,
+      hideLegend
     } = props,
     rest = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
@@ -62,7 +64,12 @@ export const useBarChartProps = props => {
     })),
     width,
     height,
-    margin,
+    margin: calculateMargins({
+      margin,
+      hideLegend,
+      slotProps,
+      series
+    }),
     colors,
     dataset,
     xAxis: xAxis ?? (hasHorizontalSeries ? undefined : [_extends({
@@ -71,10 +78,9 @@ export const useBarChartProps = props => {
     yAxis: yAxis ?? (hasHorizontalSeries ? [_extends({
       id: DEFAULT_Y_AXIS_KEY
     }, defaultAxisConfig)] : undefined),
-    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
   });
@@ -120,11 +126,13 @@ export const useBarChartProps = props => {
     slots,
     slotProps
   };
-  const tooltipProps = _extends({}, tooltip, {
-    slots,
-    slotProps
-  });
+  const chartsWrapperProps = {
+    sx,
+    legendPosition: props.slotProps?.legend?.position,
+    legendDirection: props.slotProps?.legend?.direction
+  };
   return {
+    chartsWrapperProps,
     chartContainerProps,
     barPlotProps,
     axisClickHandlerProps,
@@ -135,7 +143,6 @@ export const useBarChartProps = props => {
     chartsAxisProps,
     axisHighlightProps,
     legendProps,
-    tooltipProps,
     children
   };
 };