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

package/ChartsLabel/ChartsLabel.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import { ChartsLabelClasses } from './labelClasses';
+export interface ChartsLabelProps {
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<ChartsLabelClasses>;
+    children?: React.ReactNode;
+    className?: string;
+    sx?: SxProps<Theme>;
+}
+/**
+ * Generates the label mark for the tooltip and legend.
+ * @ignore - internal component.
+ */
+declare const ChartsLabel: React.ForwardRefExoticComponent<ChartsLabelProps & React.RefAttributes<{}>>;
+export { ChartsLabel };

package/ChartsLabel/ChartsLabel.js

@@ -0,0 +1,43 @@
+'use client';
+
+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 clsx from 'clsx';
+import { useUtilityClasses } from "./labelClasses.js";
+import { consumeThemeProps } from "../internals/consumeThemeProps.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Generates the label mark for the tooltip and legend.
+ * @ignore - internal component.
+ */
+const ChartsLabel = consumeThemeProps('MuiChartsLabel', {
+  classesResolver: useUtilityClasses
+}, function ChartsLabel(props, ref) {
+  const {
+      children,
+      className,
+      classes
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  return /*#__PURE__*/_jsx("span", _extends({
+    className: clsx(classes?.root, className),
+    ref: ref
+  }, other, {
+    children: children
+  }));
+});
+process.env.NODE_ENV !== "production" ? ChartsLabel.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object
+} : void 0;
+export { ChartsLabel };

package/ChartsLabel/ChartsLabelGradient.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+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 'horizontal'
+     */
+    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.
+     */
+    classes?: Partial<ChartsLabelGradientClasses>;
+    className?: string;
+    sx?: SxProps<Theme>;
+}
+/**
+ * Generates the label Gradient for the tooltip and legend.
+ * @ignore - internal component.
+ */
+declare const ChartsLabelGradient: React.ForwardRefExoticComponent<ChartsLabelGradientProps & React.RefAttributes<{}>>;
+export { ChartsLabelGradient };

package/ChartsLabel/ChartsLabelGradient.js

@@ -0,0 +1,135 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+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, isRtl) => {
+  const angle = (direction === 'vertical' ? -90 : 0) + (rotate ? 90 : 0) + (reverse ? 180 : 0);
+  if (isRtl && direction !== 'vertical') {
+    return angle + 180;
+  }
+  return angle;
+};
+const Root = styled('div', {
+  name: 'MuiChartsLabelGradient',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  ownerState
+}) => {
+  const rotation = getRotation(ownerState.direction, ownerState.reverse, ownerState.rotate, ownerState.isRtl);
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    [`.${labelGradientClasses.mask}`]: {
+      borderRadius: 2,
+      overflow: 'hidden'
+    },
+    [`&.${labelGradientClasses.horizontal}`]: {
+      width: '100%',
+      [`.${labelGradientClasses.mask}`]: {
+        height: ownerState.thickness,
+        width: '100%'
+      }
+    },
+    [`&.${labelGradientClasses.vertical}`]: {
+      height: '100%',
+      [`.${labelGradientClasses.mask}`]: {
+        width: ownerState.thickness,
+        height: '100%',
+        '> svg': {
+          height: '100%'
+        }
+      }
+    },
+    svg: {
+      transform: `rotate(${rotation}deg)`,
+      display: 'block'
+    }
+  };
+});
+
+/**
+ * Generates the label Gradient for the tooltip and legend.
+ * @ignore - internal component.
+ */
+const ChartsLabelGradient = consumeThemeProps('MuiChartsLabelGradient', {
+  defaultProps: {
+    direction: 'horizontal',
+    thickness: 12
+  },
+  classesResolver: useUtilityClasses
+}, function ChartsLabelGradient(props, ref) {
+  const {
+      gradientId,
+      classes,
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const isRtl = useRtl();
+  return /*#__PURE__*/_jsx(Root, _extends({
+    className: clsx(classes?.root, className),
+    ownerState: _extends({}, props, {
+      isRtl
+    }),
+    "aria-hidden": "true",
+    ref: ref
+  }, other, {
+    children: /*#__PURE__*/_jsx("div", {
+      className: classes?.mask,
+      children: /*#__PURE__*/_jsx("svg", {
+        viewBox: "0 0 24 24",
+        children: /*#__PURE__*/_jsx("rect", {
+          className: classes?.fill,
+          width: "24",
+          height: "24",
+          fill: `url(#${gradientId})`
+        })
+      })
+    })
+  }));
+});
+process.env.NODE_ENV !== "production" ? ChartsLabelGradient.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * The direction of the gradient.
+   * @default 'horizontal'
+   */
+  direction: PropTypes.oneOf(['vertical', 'horizontal']),
+  /**
+   * A unique identifier for the gradient.
+   * The `gradientId` will be used as `fill="url(#gradientId)"`.
+   */
+  gradientId: PropTypes.string.isRequired,
+  /**
+   * If `true`, the gradient will be reversed.
+   */
+  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,
+  /**
+   * The thickness of the gradient
+   * @default 12
+   */
+  thickness: PropTypes.number
+} : void 0;
+export { ChartsLabelGradient };

package/ChartsLabel/ChartsLabelMark.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import { ChartsLabelMarkClasses } from './labelMarkClasses';
+export interface ChartsLabelMarkProps {
+    /**
+     * The type of the mark.
+     * @default 'square'
+     */
+    type?: 'square' | 'circle' | 'line';
+    /**
+     * The color of the mark.
+     */
+    color?: string;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<ChartsLabelMarkClasses>;
+    className?: string;
+    sx?: SxProps<Theme>;
+}
+/**
+ * Generates the label mark for the tooltip and legend.
+ * @ignore - internal component.
+ */
+declare const ChartsLabelMark: React.ForwardRefExoticComponent<ChartsLabelMarkProps & React.RefAttributes<{}>>;
+export { ChartsLabelMark };

package/ChartsLabel/ChartsLabelMark.js

@@ -0,0 +1,111 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["type", "color", "className", "classes"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import clsx from 'clsx';
+import { labelMarkClasses, useUtilityClasses } from "./labelMarkClasses.js";
+import { consumeThemeProps } from "../internals/consumeThemeProps.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Root = styled('div', {
+  name: 'MuiChartsLabelMark',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(() => {
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    [`&.${labelMarkClasses.line}`]: {
+      width: 16,
+      display: 'flex',
+      alignItems: 'center',
+      [`.${labelMarkClasses.mask}`]: {
+        height: 4,
+        width: '100%',
+        borderRadius: 1,
+        overflow: 'hidden'
+      }
+    },
+    [`&.${labelMarkClasses.square}`]: {
+      height: 13,
+      width: 13,
+      borderRadius: 2,
+      overflow: 'hidden'
+    },
+    [`&.${labelMarkClasses.circle}`]: {
+      height: 15,
+      width: 15,
+      borderRadius: '50%',
+      overflow: 'hidden'
+    },
+    svg: {
+      display: 'block',
+      height: '100%',
+      width: '100%'
+    }
+  };
+});
+
+/**
+ * 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 {
+      type,
+      color,
+      className,
+      classes
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  return /*#__PURE__*/_jsx(Root, _extends({
+    className: clsx(classes?.root, className),
+    ownerState: props,
+    "aria-hidden": "true",
+    ref: ref
+  }, other, {
+    children: /*#__PURE__*/_jsx("div", {
+      className: classes?.mask,
+      children: /*#__PURE__*/_jsx("svg", {
+        viewBox: "0 0 24 24",
+        preserveAspectRatio: type === 'line' ? 'none' : undefined,
+        children: /*#__PURE__*/_jsx("rect", {
+          className: classes?.fill,
+          width: "24",
+          height: "24",
+          fill: color
+        })
+      })
+    })
+  }));
+});
+process.env.NODE_ENV !== "production" ? ChartsLabelMark.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * The color of the mark.
+   */
+  color: PropTypes.string,
+  /**
+   * The type of the mark.
+   * @default 'square'
+   */
+  type: PropTypes.oneOf(['circle', 'line', 'square'])
+} : void 0;
+export { ChartsLabelMark };

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

@@ -0,0 +1,8 @@
+import type { ChartsLabelProps } from './ChartsLabel';
+export interface ChartsLabelClasses {
+    /** Styles applied to the root element. */
+    root: string;
+}
+export declare function getLabelUtilityClass(slot: string): string;
+export declare const labelClasses: ChartsLabelClasses;
+export declare const useUtilityClasses: (props: ChartsLabelProps) => Record<"root", string>;

package/ChartsLabel/labelClasses.js

@@ -0,0 +1,13 @@
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getLabelUtilityClass(slot) {
+  return generateUtilityClass('MuiChartsLabel', slot);
+}
+export const labelClasses = generateUtilityClasses('MuiChartsLabel', ['root']);
+export const useUtilityClasses = props => {
+  const slots = {
+    root: ['root']
+  };
+  return composeClasses(slots, getLabelUtilityClass, props.classes);
+};

package/ChartsLabel/labelGradientClasses.d.ts

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

package/ChartsLabel/labelGradientClasses.js

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

package/ChartsLabel/labelMarkClasses.d.ts

@@ -0,0 +1,18 @@
+import type { ChartsLabelMarkProps } from './ChartsLabelMark';
+export interface ChartsLabelMarkClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the "mask" that gives shape to the marks. */
+    mask: string;
+    /** Styles applied to the mark type "line". */
+    line: string;
+    /** Styles applied to the mark type "square". */
+    square: string;
+    /** Styles applied to the mark type "circle". */
+    circle: string;
+    /** Styles applied to the element with fill={color} attribute. */
+    fill: string;
+}
+export declare function getLabelMarkUtilityClass(slot: string): string;
+export declare const labelMarkClasses: ChartsLabelMarkClasses;
+export declare const useUtilityClasses: (props: ChartsLabelMarkProps) => Record<"fill" | "mask" | "root", string>;

package/ChartsLabel/labelMarkClasses.js

@@ -0,0 +1,18 @@
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getLabelMarkUtilityClass(slot) {
+  return generateUtilityClass('MuiChartsLabelMark', slot);
+}
+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'],
+    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 };