@mui/x-charts 7.0.0-alpha.9 → 7.0.0-beta.1

package/BarChart/BarChart.d.ts

@@ -8,11 +8,12 @@ import { ChartsTooltipProps, ChartsTooltipSlotProps, ChartsTooltipSlots } from '
 import { ChartsLegendProps, ChartsLegendSlots, ChartsLegendSlotProps } from '../ChartsLegend';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsAxisSlots, ChartsAxisSlotProps } from '../models/axis';
+import { ChartsOnAxisClickHandlerProps } from '../ChartsOnAxisClickHandler';
 export interface BarChartSlots extends ChartsAxisSlots, BarPlotSlots, ChartsLegendSlots, ChartsTooltipSlots {
 }
 export interface BarChartSlotProps extends ChartsAxisSlotProps, BarPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps {
 }
-export interface BarChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Pick<BarPlotProps, 'skipAnimation'> {
+export interface BarChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<BarPlotProps, 'slots' | 'slotProps'>, ChartsOnAxisClickHandlerProps {
     series: MakeOptional<BarSeriesType, 'type'>[];
     tooltip?: ChartsTooltipProps;
     /**

package/BarChart/BarChart.js

@@ -17,6 +17,7 @@ var _ChartsTooltip = require("../ChartsTooltip");
 var _ChartsLegend = require("../ChartsLegend");
 var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
 var _ChartsClipPath = require("../ChartsClipPath");
+var _ChartsOnAxisClickHandler = require("../ChartsOnAxisClickHandler");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -51,6 +52,8 @@ const BarChart = exports.BarChart = /*#__PURE__*/React.forwardRef(function BarCh
     rightAxis,
     bottomAxis,
     skipAnimation,
+    onItemClick,
+    onAxisClick,
     children,
     slots,
     slotProps
@@ -88,13 +91,16 @@ const BarChart = exports.BarChart = /*#__PURE__*/React.forwardRef(function BarCh
     colors: colors,
     dataset: dataset,
     sx: sx,
-    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
+    children: [onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, {
+      onAxisClick: onAxisClick
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
       clipPath: `url(#${clipPathId})`,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarPlot.BarPlot, {
         slots: slots,
         slotProps: slotProps,
-        skipAnimation: skipAnimation
+        skipAnimation: skipAnimation,
+        onItemClick: onItemClick
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, {
       topAxis: topAxis,
@@ -234,6 +240,19 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     right: _propTypes.default.number,
     top: _propTypes.default.number
   }),
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   */
+  onAxisClick: _propTypes.default.func,
+  /**
+   * Callback fired when a bar item is clicked.
+   * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
+   * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
+   */
+  onItemClick: _propTypes.default.func,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -261,27 +280,9 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
-  series: _propTypes.default.arrayOf(_propTypes.default.shape({
-    color: _propTypes.default.string,
-    data: _propTypes.default.arrayOf(_propTypes.default.number),
-    dataKey: _propTypes.default.string,
-    highlightScope: _propTypes.default.shape({
-      faded: _propTypes.default.oneOf(['global', 'none', 'series']),
-      highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
-    }),
-    id: _propTypes.default.string,
-    label: _propTypes.default.string,
-    layout: _propTypes.default.oneOf(['horizontal', 'vertical']),
-    stack: _propTypes.default.string,
-    stackOffset: _propTypes.default.oneOf(['diverging', 'expand', 'none', 'silhouette', 'wiggle']),
-    stackOrder: _propTypes.default.oneOf(['appearance', 'ascending', 'descending', 'insideOut', 'none', 'reverse']),
-    type: _propTypes.default.oneOf(['bar']),
-    valueFormatter: _propTypes.default.func,
-    xAxisKey: _propTypes.default.string,
-    yAxisKey: _propTypes.default.string
-  })).isRequired,
+  series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   /**
-   * If `true`, animations are skiped.
+   * If `true`, animations are skipped.
    * @default false
    */
   skipAnimation: _propTypes.default.bool,

package/BarChart/BarElement.d.ts

@@ -1366,7 +1366,7 @@ export type BarElementProps = Omit<BarElementOwnerState, 'isFaded' | 'isHighligh
      */
     slots?: {
         /**
-         * The component that renders the root.
+         * The component that renders the bar.
          * @default BarElementPath
          */
         bar?: React.ElementType;

package/BarChart/BarElement.js

@@ -21,7 +21,7 @@ var _web = require("@react-spring/web");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _InteractionProvider = require("../context/InteractionProvider");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "slots", "slotProps", "style"];
+const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "slots", "slotProps", "style", "onClick"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function getBarElementUtilityClass(slot) {
@@ -60,7 +60,8 @@ function BarElement(props) {
       highlightScope,
       slots,
       slotProps,
-      style
+      style,
+      onClick
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(highlightScope);
@@ -96,7 +97,9 @@ function BarElement(props) {
       dataIndex
     }), {
       style,
-      className: classes.root
+      className: classes.root,
+      onClick,
+      cursor: onClick ? 'pointer' : 'unset'
     }),
     ownerState
   });

package/BarChart/BarPlot.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { BarElementProps } from './BarElement';
+import { BarItemIdentifier } from '../models';
 export interface BarPlotSlots {
     bar?: React.JSXElementConstructor<BarElementProps>;
 }
@@ -8,10 +9,16 @@ export interface BarPlotSlotProps {
 }
 export interface BarPlotProps extends Pick<BarElementProps, 'slots' | 'slotProps'> {
     /**
-     * If `true`, animations are skiped.
+     * If `true`, animations are skipped.
      * @default false
      */
     skipAnimation?: boolean;
+    /**
+     * Callback fired when a bar item is clicked.
+     * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
+     * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
+     */
+    onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, barItemIdentifier: BarItemIdentifier) => void;
 }
 /**
  * Demos:

package/BarChart/BarPlot.js

@@ -16,7 +16,7 @@ var _BarElement = require("./BarElement");
 var _axis = require("../models/axis");
 var _constants = require("../constants");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["skipAnimation"];
+const _excluded = ["skipAnimation", "onItemClick"];
 /**
  * Solution of the equations
  * W = barWidth * N + offset * (N-1)
@@ -46,7 +46,7 @@ function getBandSize({
     offset
   };
 }
-const useCompletedData = () => {
+const useAggregatedData = () => {
   const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).bar ?? {
     series: {},
     stackingGroups: [],
@@ -174,9 +174,10 @@ const getInStyle = ({
  * - [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
  */
 function BarPlot(props) {
-  const completedData = useCompletedData();
+  const completedData = useAggregatedData();
   const {
-      skipAnimation
+      skipAnimation,
+      onItemClick
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const transition = (0, _web.useTransition)(completedData, {
@@ -199,6 +200,13 @@ function BarPlot(props) {
       highlightScope: highlightScope,
       color: color
     }, other, {
+      onClick: onItemClick && (event => {
+        onItemClick(event, {
+          type: 'bar',
+          seriesId,
+          dataIndex
+        });
+      }),
       style: style
     })))
   });
@@ -209,7 +217,13 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   /**
-   * If `true`, animations are skiped.
+   * Callback fired when a bar item is clicked.
+   * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
+   * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
+   */
+  onItemClick: _propTypes.default.func,
+  /**
+   * If `true`, animations are skipped.
    * @default false
    */
   skipAnimation: _propTypes.default.bool,

package/BarChart/formatter.js

@@ -72,7 +72,7 @@ const formatter = (params, dataset) => {
   return {
     seriesOrder,
     stackingGroups,
-    series: (0, _defaultizeValueFormatter.default)(completedSeries, v => v === null ? '' : v.toLocaleString())
+    series: (0, _defaultizeValueFormatter.default)(completedSeries, v => v == null ? '' : v.toLocaleString())
   };
 };
 var _default = exports.default = formatter;