@mui/x-charts 9.0.0-alpha.1 → 9.0.0-alpha.3

package/BarChart/AnimatedBarElement.d.mts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { type SeriesId } from "../models/seriesType/common.mjs";
+import { type BarElementOwnerState } from "./barClasses.mjs";
+export interface BarProps extends Omit<React.SVGProps<SVGRectElement>, 'color' | 'ref' | 'x' | 'y' | 'height' | 'width'> {
+  seriesId: SeriesId;
+  dataIndex: number;
+  color: string;
+  ownerState: BarElementOwnerState;
+  /**
+   * The position in the x-axis of the stack this bar belongs to.
+   */
+  xOrigin: number;
+  /**
+   * The position in the y-axis of the stack this bar belongs to.
+   */
+  yOrigin: number;
+  /**
+   * The position of the bar in the x-axis.
+   */
+  x: number;
+  /**
+   * The position of the bar in the y-axis.
+   */
+  y: number;
+  /**
+   * The height of the bar.
+   */
+  height: number;
+  /**
+   * The width of the bar.
+   */
+  width: number;
+  /**
+   * The orientation of the bar.
+   */
+  layout: 'vertical' | 'horizontal';
+  /**
+   * If true, no animations should be applied.
+   */
+  skipAnimation: boolean;
+}
+export declare function AnimatedBarElement(props: BarProps): import("react/jsx-runtime").JSX.Element;

package/BarChart/AnimatedBarElement.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type SeriesId } from "../models/seriesType/common.js";
-import { type BarElementOwnerState } from "./barElementClasses.js";
+import { type BarElementOwnerState } from "./barClasses.js";
 export interface BarProps extends Omit<React.SVGProps<SVGRectElement>, 'color' | 'ref' | 'x' | 'y' | 'height' | 'width'> {
   seriesId: SeriesId;
   dataIndex: number;

package/BarChart/AnimatedBarElement.mjs

@@ -0,0 +1,21 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["ownerState", "skipAnimation", "seriesId", "dataIndex", "xOrigin", "yOrigin"];
+import * as React from 'react';
+import { useAnimateBar } from "../hooks/animation/useAnimateBar.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function AnimatedBarElement(props) {
+  const {
+      ownerState
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const animatedProps = useAnimateBar(props);
+  return /*#__PURE__*/_jsx("rect", _extends({}, other, {
+    filter: ownerState.isHighlighted ? 'brightness(120%)' : undefined,
+    opacity: ownerState.isFaded ? 0.3 : 1,
+    "data-highlighted": ownerState.isHighlighted || undefined,
+    "data-faded": ownerState.isFaded || undefined
+  }, animatedProps));
+}

package/BarChart/BarChart.d.mts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { type MakeOptional } from '@mui/x-internals/types';
+import { type ChartsSlotProps, type ChartsSlots } from "../internals/material/index.mjs";
+import { type ChartsToolbarSlotProps, type ChartsToolbarSlots } from "../Toolbar/index.mjs";
+import { type BarPlotProps, type BarPlotSlotProps, type BarPlotSlots } from "./BarPlot.mjs";
+import { type ChartContainerProps } from "../ChartContainer/index.mjs";
+import { type ChartsAxisProps } from "../ChartsAxis/index.mjs";
+import { type BarSeriesType } from "../models/seriesType/bar.mjs";
+import { type ChartsTooltipSlots, type ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.mjs";
+import { type ChartsLegendSlots, type ChartsLegendSlotProps } from "../ChartsLegend/index.mjs";
+import { type ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.mjs";
+import { type ChartsAxisSlots, type ChartsAxisSlotProps } from "../models/axis.mjs";
+import { type ChartsGridProps } from "../ChartsGrid/index.mjs";
+import { type ChartsOverlayProps, type ChartsOverlaySlotProps, type ChartsOverlaySlots } from "../ChartsOverlay/ChartsOverlay.mjs";
+import type { BarChartPluginSignatures } from "./BarChart.plugins.mjs";
+export interface BarChartSlots extends ChartsAxisSlots, BarPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
+export interface BarChartSlotProps extends ChartsAxisSlotProps, BarPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
+export type BarSeries = MakeOptional<BarSeriesType, 'type'>;
+export interface BarChartProps extends Omit<ChartContainerProps<'bar', BarChartPluginSignatures>, 'series' | 'plugins' | 'zAxis' | 'experimentalFeatures'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<BarPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
+  /**
+   * The series to display in the bar chart.
+   * An array of [[BarSeries]] objects.
+   */
+  series: ReadonlyArray<BarSeries>;
+  /**
+   * Option to display a cartesian grid in the background.
+   */
+  grid?: Pick<ChartsGridProps, 'vertical' | 'horizontal'>;
+  /**
+   * 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/highlighting/ highlighting docs} for more details.
+   *
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /**
+   * If `true`, the legend is not rendered.
+   */
+  hideLegend?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarChartSlotProps;
+  /**
+   * The direction of the bar elements.
+   * @default 'vertical'
+   */
+  layout?: BarSeriesType['layout'];
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+}
+/**
+ * Demos:
+ *
+ * - [Bars](https://mui.com/x/react-charts/bars/)
+ * - [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+ * - [Stacking](https://mui.com/x/react-charts/stacking/)
+ *
+ * API:
+ *
+ * - [BarChart API](https://mui.com/x/api/charts/bar-chart/)
+ */
+declare const BarChart: React.ForwardRefExoticComponent<BarChartProps & React.RefAttributes<HTMLDivElement>>;
+export { BarChart };

package/BarChart/BarChart.js

@@ -135,7 +135,10 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default false
    */
   disableAxisListener: _propTypes.default.bool,
-  enableKeyboardNavigation: _propTypes.default.bool,
+  /**
+   * If `true`, disables keyboard navigation for the chart.
+   */
+  disableKeyboardNavigation: _propTypes.default.bool,
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -167,11 +170,15 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * ]
    * ```
    */
-  hiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
+  hiddenItems: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.string.isRequired,
     type: _propTypes.default.oneOf(['bar'])
-  })),
+  }), _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['bar']).isRequired
+  })]).isRequired),
   /**
    * If `true`, the legend is not rendered.
    */
@@ -188,10 +195,14 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * The highlighted item.
    * Used when the highlight is controlled.
    */
-  highlightedItem: _propTypes.default.shape({
+  highlightedItem: _propTypes.default.oneOfType([_propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['bar']).isRequired
+  }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.string.isRequired
-  }),
+  })]),
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide this prop. It falls back to a randomly generated id.
@@ -218,11 +229,15 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * ]
    * ```
    */
-  initialHiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
+  initialHiddenItems: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.string.isRequired,
     type: _propTypes.default.oneOf(['bar'])
-  })),
+  }), _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['bar']).isRequired
+  })]).isRequired),
   /**
    * The direction of the bar elements.
    * @default 'vertical'
@@ -258,13 +273,13 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   onAxisClick: _propTypes.default.func,
   /**
    * Callback fired when any hidden identifiers change.
-   * @param {VisibilityIdentifier[]} hiddenItems The new list of hidden identifiers.
+   * @param {VisibilityIdentifierWithType[]} hiddenItems The new list of hidden identifiers.
    */
   onHiddenItemsChange: _propTypes.default.func,
   /**
    * The callback fired when the highlighted item changes.
    *
-   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   * @param {HighlightItemIdentifierWithType<SeriesType> | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: _propTypes.default.func,
   /**
@@ -292,7 +307,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   /**
    * The callback fired when the tooltip item changes.
    *
-   * @param {SeriesItemIdentifier<TSeries> | null} tooltipItem  The newly highlighted item.
+   * @param {SeriesItemIdentifier<SeriesType> | null} tooltipItem  The newly highlighted item.
    */
   onTooltipItemChange: _propTypes.default.func,
   /**
@@ -344,11 +359,14 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * The tooltip item.
    * Used when the tooltip is controlled.
    */
-  tooltipItem: _propTypes.default.shape({
+  tooltipItem: _propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
     seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['bar'])
-  }),
+    type: _propTypes.default.oneOf(['bar']).isRequired
+  }), _propTypes.default.shape({
+    dataIndex: _propTypes.default.number.isRequired,
+    seriesId: _propTypes.default.string.isRequired
+  })]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */