@mui/x-charts 8.0.0-alpha.6 → 8.0.0-alpha.8

package/ChartsGrid/ChartsGrid.js

@@ -7,12 +7,12 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import { useThemeProps } from '@mui/material/styles';
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { getChartsGridUtilityClass } from "./chartsGridClasses.js";
 import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { GridRoot } from "./styledComponents.js";
 import { ChartsGridVertical } from "./ChartsVerticalGrid.js";
 import { ChartsGridHorizontal } from "./ChartsHorizontalGrid.js";
+import { useXAxes, useYAxes } from "../hooks/useAxis.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ({
   classes
@@ -46,10 +46,12 @@ function ChartsGrid(inProps) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
     xAxis,
-    xAxisIds,
+    xAxisIds
+  } = useXAxes();
+  const {
     yAxis,
     yAxisIds
-  } = useCartesianContext();
+  } = useYAxes();
   const classes = useUtilityClasses(props);
   const horizontalAxis = yAxis[yAxisIds[0]];
   const verticalAxis = xAxis[xAxisIds[0]];
@@ -57,11 +59,13 @@ function ChartsGrid(inProps) {
     className: classes.root,
     children: [vertical && /*#__PURE__*/_jsx(ChartsGridVertical, {
       axis: verticalAxis,
-      drawingArea: drawingArea,
+      start: drawingArea.top,
+      end: drawingArea.height + drawingArea.top,
       classes: classes
     }), horizontal && /*#__PURE__*/_jsx(ChartsGridHorizontal, {
       axis: horizontalAxis,
-      drawingArea: drawingArea,
+      start: drawingArea.left,
+      end: drawingArea.width + drawingArea.left,
       classes: classes
     })]
   }));

package/ChartsGrid/ChartsHorizontalGrid.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { DrawingAreaState } from '../context/DrawingAreaProvider';
 import { AxisDefaultized, ChartsYAxisProps, ScaleName } from '../models/axis';
 import { ChartsGridClasses } from './chartsGridClasses';
 interface ChartsGridHorizontalProps {
     axis: AxisDefaultized<ScaleName, any, ChartsYAxisProps>;
-    drawingArea: DrawingAreaState;
+    start: number;
+    end: number;
     classes: Partial<ChartsGridClasses>;
 }
 /**

package/ChartsGrid/ChartsHorizontalGrid.js

@@ -8,7 +8,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export function ChartsGridHorizontal(props) {
   const {
     axis,
-    drawingArea,
+    start,
+    end,
     classes
   } = props;
   const {
@@ -28,8 +29,8 @@ export function ChartsGridHorizontal(props) {
     }) => /*#__PURE__*/_jsx(GridLine, {
       y1: offset,
       y2: offset,
-      x1: drawingArea.left,
-      x2: drawingArea.left + drawingArea.width,
+      x1: start,
+      x2: end,
       className: classes.horizontalLine
     }, `horizontal-${value}`))
   });

package/ChartsGrid/ChartsVerticalGrid.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { DrawingAreaState } from '../context/DrawingAreaProvider';
 import { AxisDefaultized, ChartsXAxisProps, ScaleName } from '../models/axis';
 import { ChartsGridClasses } from './chartsGridClasses';
 interface ChartsGridVerticalProps {
     axis: AxisDefaultized<ScaleName, any, ChartsXAxisProps>;
-    drawingArea: DrawingAreaState;
+    start: number;
+    end: number;
     classes: Partial<ChartsGridClasses>;
 }
 /**

package/ChartsGrid/ChartsVerticalGrid.js

@@ -8,7 +8,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export function ChartsGridVertical(props) {
   const {
     axis,
-    drawingArea,
+    start,
+    end,
     classes
   } = props;
   const {
@@ -26,8 +27,8 @@ export function ChartsGridVertical(props) {
       value,
       offset
     }) => /*#__PURE__*/_jsx(GridLine, {
-      y1: drawingArea.top,
-      y2: drawingArea.top + drawingArea.height,
+      y1: start,
+      y2: end,
       x1: offset,
       x2: offset,
       className: classes.verticalLine

package/ChartsLabel/ChartsLabel.d.ts

@@ -11,9 +11,8 @@ export interface ChartsLabelProps {
     sx?: SxProps<Theme>;
 }
 /**
- * @ignore - internal component.
- *
  * Generates the label mark for the tooltip and legend.
+ * @ignore - internal component.
  */
-declare const ChartsLabel: React.ForwardRefExoticComponent<ChartsLabelProps & React.RefAttributes<any>>;
+declare const ChartsLabel: React.ForwardRefExoticComponent<ChartsLabelProps & React.RefAttributes<{}>>;
 export { ChartsLabel };

package/ChartsLabel/ChartsLabel.js

@@ -1,31 +1,17 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["children", "className", "classes"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
 import clsx from 'clsx';
 import { useUtilityClasses } from "./labelClasses.js";
 import { consumeThemeProps } from "../internals/consumeThemeProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const Root = styled('span', {
-  name: 'MuiChartsLabel',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
-})(({
-  theme
-}) => _extends({}, theme.typography.caption, {
-  color: (theme.vars || theme).palette.text.primary,
-  lineHeight: undefined,
-  display: 'flex'
-}));
-
 /**
- * @ignore - internal component.
- *
  * Generates the label mark for the tooltip and legend.
+ * @ignore - internal component.
  */
 const ChartsLabel = consumeThemeProps('MuiChartsLabel', {
   classesResolver: useUtilityClasses
@@ -36,9 +22,8 @@ const ChartsLabel = consumeThemeProps('MuiChartsLabel', {
       classes
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  return /*#__PURE__*/_jsx(Root, _extends({
+  return /*#__PURE__*/_jsx("span", _extends({
     className: clsx(classes?.root, className),
-    ownerState: props,
     ref: ref
   }, other, {
     children: children

package/ChartsLabel/ChartsLabelGradient.d.ts

@@ -4,26 +4,28 @@ import { ChartsLabelGradientClasses } from './labelGradientClasses';
 export interface ChartsLabelGradientProps {
     /**
      * A unique identifier for the gradient.
-     *
      * The `gradientId` will be used as `fill="url(#gradientId)"`.
      */
     gradientId: string;
     /**
      * The direction of the gradient.
-     *
-     * @default 'row'
+     * @default 'horizontal'
      */
-    direction?: 'column' | 'row';
+    direction?: 'vertical' | 'horizontal';
     /**
      * If `true`, the gradient will be reversed.
      */
     reverse?: boolean;
     /**
      * If provided, the gradient will be rotated by 90deg.
-     *
      * Useful for linear gradients that are not in the correct orientation.
      */
     rotate?: boolean;
+    /**
+     * The thickness of the gradient
+     * @default 12
+     */
+    thickness?: number;
     /**
      * Override or extend the styles applied to the component.
      */
@@ -32,9 +34,8 @@ export interface ChartsLabelGradientProps {
     sx?: SxProps<Theme>;
 }
 /**
- * @ignore - internal component.
- *
  * Generates the label Gradient for the tooltip and legend.
+ * @ignore - internal component.
  */
-declare const ChartsLabelGradient: React.ForwardRefExoticComponent<ChartsLabelGradientProps & React.RefAttributes<any>>;
+declare const ChartsLabelGradient: React.ForwardRefExoticComponent<ChartsLabelGradientProps & React.RefAttributes<{}>>;
 export { ChartsLabelGradient };

package/ChartsLabel/ChartsLabelGradient.js

@@ -2,25 +2,21 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["gradientId", "direction", "classes", "className"];
+const _excluded = ["gradientId", "direction", "classes", "className", "rotate", "reverse", "thickness"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import clsx from 'clsx';
+import { useRtl } from '@mui/system/RtlProvider';
 import { useUtilityClasses, labelGradientClasses } from "./labelGradientClasses.js";
 import { consumeThemeProps } from "../internals/consumeThemeProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const getRotation = (direction, reverse, rotate) => {
-  if (!rotate && reverse) {
-    return direction === 'column' ? 90 : 180;
+const getRotation = (direction, reverse, rotate, isRtl) => {
+  const angle = (direction === 'vertical' ? -90 : 0) + (rotate ? 90 : 0) + (reverse ? 180 : 0);
+  if (isRtl && direction !== 'vertical') {
+    return angle + 180;
   }
-  if (rotate && !reverse) {
-    return direction === 'column' ? 0 : 90;
-  }
-  if (rotate && reverse) {
-    return direction === 'column' ? 180 : -90;
-  }
-  return direction === 'column' ? -90 : 0;
+  return angle;
 };
 const Root = styled('div', {
   name: 'MuiChartsLabelGradient',
@@ -29,7 +25,7 @@ const Root = styled('div', {
 })(({
   ownerState
 }) => {
-  const rotation = getRotation(ownerState.direction, ownerState.reverse, ownerState.rotate);
+  const rotation = getRotation(ownerState.direction, ownerState.reverse, ownerState.rotate, ownerState.isRtl);
   return {
     display: 'flex',
     alignItems: 'center',
@@ -38,17 +34,17 @@ const Root = styled('div', {
       borderRadius: 2,
       overflow: 'hidden'
     },
-    [`&.${labelGradientClasses.row}`]: {
+    [`&.${labelGradientClasses.horizontal}`]: {
       width: '100%',
       [`.${labelGradientClasses.mask}`]: {
-        height: 12,
+        height: ownerState.thickness,
         width: '100%'
       }
     },
-    [`&.${labelGradientClasses.column}`]: {
+    [`&.${labelGradientClasses.vertical}`]: {
       height: '100%',
       [`.${labelGradientClasses.mask}`]: {
-        width: 12,
+        width: ownerState.thickness,
         height: '100%',
         '> svg': {
           height: '100%'
@@ -63,13 +59,13 @@ const Root = styled('div', {
 });
 
 /**
- * @ignore - internal component.
- *
  * Generates the label Gradient for the tooltip and legend.
+ * @ignore - internal component.
  */
 const ChartsLabelGradient = consumeThemeProps('MuiChartsLabelGradient', {
   defaultProps: {
-    direction: 'row'
+    direction: 'horizontal',
+    thickness: 12
   },
   classesResolver: useUtilityClasses
 }, function ChartsLabelGradient(props, ref) {
@@ -79,9 +75,12 @@ const ChartsLabelGradient = consumeThemeProps('MuiChartsLabelGradient', {
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const isRtl = useRtl();
   return /*#__PURE__*/_jsx(Root, _extends({
     className: clsx(classes?.root, className),
-    ownerState: props,
+    ownerState: _extends({}, props, {
+      isRtl
+    }),
     "aria-hidden": "true",
     ref: ref
   }, other, {
@@ -90,6 +89,7 @@ const ChartsLabelGradient = consumeThemeProps('MuiChartsLabelGradient', {
       children: /*#__PURE__*/_jsx("svg", {
         viewBox: "0 0 24 24",
         children: /*#__PURE__*/_jsx("rect", {
+          className: classes?.fill,
           width: "24",
           height: "24",
           fill: `url(#${gradientId})`
@@ -109,13 +109,11 @@ process.env.NODE_ENV !== "production" ? ChartsLabelGradient.propTypes = {
   classes: PropTypes.object,
   /**
    * The direction of the gradient.
-   *
-   * @default 'row'
+   * @default 'horizontal'
    */
-  direction: PropTypes.oneOf(['column', 'row']),
+  direction: PropTypes.oneOf(['vertical', 'horizontal']),
   /**
    * A unique identifier for the gradient.
-   *
    * The `gradientId` will be used as `fill="url(#gradientId)"`.
    */
   gradientId: PropTypes.string.isRequired,
@@ -125,9 +123,13 @@ process.env.NODE_ENV !== "production" ? ChartsLabelGradient.propTypes = {
   reverse: PropTypes.bool,
   /**
    * If provided, the gradient will be rotated by 90deg.
-   *
    * Useful for linear gradients that are not in the correct orientation.
    */
-  rotate: PropTypes.bool
+  rotate: PropTypes.bool,
+  /**
+   * The thickness of the gradient
+   * @default 12
+   */
+  thickness: PropTypes.number
 } : void 0;
 export { ChartsLabelGradient };

package/ChartsLabel/ChartsLabelMark.d.ts

@@ -19,9 +19,8 @@ export interface ChartsLabelMarkProps {
     sx?: SxProps<Theme>;
 }
 /**
- * @ignore - internal component.
- *
  * Generates the label mark for the tooltip and legend.
+ * @ignore - internal component.
  */
-declare const ChartsLabelMark: React.ForwardRefExoticComponent<ChartsLabelMarkProps & React.RefAttributes<any>>;
+declare const ChartsLabelMark: React.ForwardRefExoticComponent<ChartsLabelMarkProps & React.RefAttributes<{}>>;
 export { ChartsLabelMark };

package/ChartsLabel/ChartsLabelMark.js

@@ -52,11 +52,13 @@ const Root = styled('div', {
 });
 
 /**
- * @ignore - internal component.
- *
  * Generates the label mark for the tooltip and legend.
+ * @ignore - internal component.
  */
 const ChartsLabelMark = consumeThemeProps('MuiChartsLabelMark', {
+  defaultProps: {
+    type: 'square'
+  },
   classesResolver: useUtilityClasses
 }, function ChartsLabelMark(props, ref) {
   const {
@@ -78,6 +80,7 @@ const ChartsLabelMark = consumeThemeProps('MuiChartsLabelMark', {
         viewBox: "0 0 24 24",
         preserveAspectRatio: type === 'line' ? 'none' : undefined,
         children: /*#__PURE__*/_jsx("rect", {
+          className: classes?.fill,
           width: "24",
           height: "24",
           fill: color

package/ChartsLabel/index.d.ts

@@ -0,0 +1,7 @@
+export type { ChartsLabelMarkProps } from './ChartsLabelMark';
+export { labelClasses } from './labelClasses';
+export type { ChartsLabelClasses } from './labelClasses';
+export { labelMarkClasses } from './labelMarkClasses';
+export type { ChartsLabelMarkClasses } from './labelMarkClasses';
+export { labelGradientClasses } from './labelGradientClasses';
+export type { ChartsLabelGradientClasses } from './labelGradientClasses';

package/ChartsLabel/index.js

@@ -0,0 +1,6 @@
+// export * from './ChartsLabel';
+
+// export * from './ChartsLabelGradient';
+export { labelClasses } from "./labelClasses.js";
+export { labelMarkClasses } from "./labelMarkClasses.js";
+export { labelGradientClasses } from "./labelGradientClasses.js";

package/ChartsLabel/labelClasses.d.ts

@@ -3,7 +3,6 @@ export interface ChartsLabelClasses {
     /** Styles applied to the root element. */
     root: string;
 }
-export type ChartsLabelClassKey = keyof ChartsLabelClasses;
 export declare function getLabelUtilityClass(slot: string): string;
 export declare const labelClasses: ChartsLabelClasses;
 export declare const useUtilityClasses: (props: ChartsLabelProps) => Record<"root", string>;

package/ChartsLabel/labelGradientClasses.d.ts

@@ -5,11 +5,12 @@ export interface ChartsLabelGradientClasses {
     /** Styles applied to the "mask" that gives shape to the gradient. */
     mask: string;
     /** Styles applied when direction is "column". */
-    column: string;
+    vertical: string;
     /** Styles applied when direction is "row". */
-    row: string;
+    horizontal: string;
+    /** Styles applied to the element filled by the gradient */
+    fill: string;
 }
-export type ChartsLabelGradientClassKey = keyof ChartsLabelGradientClasses;
 export declare function getLabelGradientUtilityClass(slot: string): string;
 export declare const labelGradientClasses: ChartsLabelGradientClasses;
-export declare const useUtilityClasses: (props: ChartsLabelGradientProps) => Record<"mask" | "root", string>;
+export declare const useUtilityClasses: (props: ChartsLabelGradientProps) => Record<"root" | "mask" | "fill", string>;

package/ChartsLabel/labelGradientClasses.js

@@ -4,14 +4,15 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getLabelGradientUtilityClass(slot) {
   return generateUtilityClass('MuiChartsLabelGradient', slot);
 }
-export const labelGradientClasses = generateUtilityClasses('MuiChartsLabelGradient', ['root', 'column', 'row', 'mask']);
+export const labelGradientClasses = generateUtilityClasses('MuiChartsLabelGradient', ['root', 'vertical', 'horizontal', 'mask', 'fill']);
 export const useUtilityClasses = props => {
   const {
     direction
   } = props;
   const slots = {
     root: ['root', direction],
-    mask: ['mask']
+    mask: ['mask'],
+    fill: ['fill']
   };
   return composeClasses(slots, getLabelGradientUtilityClass, props.classes);
 };

package/ChartsLabel/labelMarkClasses.d.ts

@@ -10,8 +10,9 @@ export interface ChartsLabelMarkClasses {
     square: string;
     /** Styles applied to the mark type "circle". */
     circle: string;
+    /** Styles applied to the element with fill={color} attribute. */
+    fill: string;
 }
-export type ChartsLabelMarkClassKey = keyof ChartsLabelMarkClasses;
 export declare function getLabelMarkUtilityClass(slot: string): string;
 export declare const labelMarkClasses: ChartsLabelMarkClasses;
-export declare const useUtilityClasses: (props: ChartsLabelMarkProps) => Record<"mask" | "root", string>;
+export declare const useUtilityClasses: (props: ChartsLabelMarkProps) => Record<"root" | "mask" | "fill", string>;

package/ChartsLabel/labelMarkClasses.js

@@ -4,14 +4,15 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getLabelMarkUtilityClass(slot) {
   return generateUtilityClass('MuiChartsLabelMark', slot);
 }
-export const labelMarkClasses = generateUtilityClasses('MuiChartsLabelMark', ['root', 'line', 'square', 'circle', 'mask']);
+export const labelMarkClasses = generateUtilityClasses('MuiChartsLabelMark', ['root', 'line', 'square', 'circle', 'mask', 'fill']);
 export const useUtilityClasses = props => {
   const {
     type
   } = props;
   const slots = {
     root: ['root', type],
-    mask: ['mask']
+    mask: ['mask'],
+    fill: ['fill']
   };
   return composeClasses(slots, getLabelMarkUtilityClass, props.classes);
 };

package/ChartsLabel/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/ChartsLabel/index.js",
+  "types": "./index.d.ts"
+}

package/ChartsLegend/ChartsLegend.d.ts

@@ -1,31 +1,27 @@
 import * as React from 'react';
-import { LegendRendererProps } from './DefaultChartsLegend';
-import { LegendPlacement } from './legend.types';
-export type ChartsLegendPropsBase = Omit<LegendRendererProps, keyof LegendPlacement | 'series' | 'seriesToDisplay' | 'drawingArea'> & LegendPlacement;
-export interface ChartsLegendSlots {
+import { SxProps, Theme } from '@mui/material/styles';
+import type { Direction } from './direction';
+import { SeriesLegendItemContext } from './legendContext.types';
+import { type ChartsLegendClasses } from './chartsLegendClasses';
+export interface ChartsLegendProps {
     /**
-     * Custom rendering of the legend.
-     * @default DefaultChartsLegend
+     * Callback fired when a legend item is clicked.
+     * @param {React.MouseEvent<HTMLButtonElement, MouseEvent>} event The click event.
+     * @param {SeriesLegendItemContext} legendItem The legend item data.
+     * @param {number} index The index of the clicked legend item.
      */
-    legend?: React.JSXElementConstructor<LegendRendererProps>;
-}
-export interface ChartsLegendSlotProps {
-    legend?: Partial<LegendRendererProps>;
-}
-export interface ChartsLegendProps extends ChartsLegendPropsBase {
+    onItemClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, legendItem: SeriesLegendItemContext, index: number) => void;
     /**
-     * Overridable component slots.
-     * @default {}
+     * The direction of the legend layout.
+     * The default depends on the chart.
      */
-    slots?: ChartsLegendSlots;
+    direction?: Direction;
     /**
-     * The props used for each component slot.
-     * @default {}
+     * Override or extend the styles applied to the component.
      */
-    slotProps?: ChartsLegendSlotProps;
-}
-declare function ChartsLegend(inProps: ChartsLegendProps): React.JSX.Element;
-declare namespace ChartsLegend {
-    var propTypes: any;
+    classes?: Partial<ChartsLegendClasses>;
+    className?: string;
+    sx?: SxProps<Theme>;
 }
+declare const ChartsLegend: React.ForwardRefExoticComponent<ChartsLegendProps & import("./chartsLegend.types").ChartsLegendSlotExtension & React.RefAttributes<{}>>;
 export { ChartsLegend };