@mui/x-charts 7.10.0 → 7.11.1

package/ChartContainer/useChartContainerProps.d.ts

@@ -0,0 +1,86 @@
+import type { DrawingProviderProps } from '../context/DrawingProvider';
+import type { ColorProviderProps } from '../context/ColorProvider';
+import type { CartesianContextProviderProps } from '../context/CartesianProvider';
+import type { SeriesContextProviderProps } from '../context/SeriesContextProvider';
+import type { ZAxisContextProviderProps } from '../context/ZAxisContextProvider';
+import type { ChartContainerProps } from './ChartContainer';
+import { HighlightedProviderProps } from '../context';
+import { ChartsSurfaceProps } from '../ChartsSurface';
+export declare const useChartContainerProps: (props: ChartContainerProps, ref: React.ForwardedRef<unknown>) => {
+    children: import("react").ReactNode;
+    drawingProviderProps: Omit<DrawingProviderProps, "children">;
+    colorProviderProps: Omit<ColorProviderProps, "children">;
+    seriesContextProps: Omit<SeriesContextProviderProps, "children">;
+    cartesianContextProps: Omit<CartesianContextProviderProps, "children">;
+    zAxisContextProps: Omit<ZAxisContextProviderProps, "children">;
+    highlightedProviderProps: Omit<HighlightedProviderProps, "children">;
+    chartsSurfaceProps: ChartsSurfaceProps & {
+        ref: any;
+    };
+    xAxis: {
+        reverse?: boolean;
+        fill?: string;
+        stroke?: string;
+        data?: any[] | undefined;
+        label?: string;
+        max?: number | Date;
+        min?: number | Date;
+        classes?: Partial<import("..").ChartsAxisClasses>;
+        slots?: Partial<import("../internals").ChartsAxisSlots>;
+        slotProps?: Partial<import("../internals").ChartsAxisSlotProps>;
+        dataKey?: string;
+        valueFormatter?: ((value: any, context: import("../internals").AxisValueFormatterContext) => string) | undefined;
+        colorMap?: import("../models/colorMapping").ContinuousColorConfig<number | Date> | import("../models/colorMapping").PiecewiseColorConfig<number | Date> | import("../models/colorMapping").OrdinalColorConfig<string | number | Date> | undefined;
+        tickMaxStep?: number;
+        tickMinStep?: number;
+        tickNumber?: number;
+        tickPlacement?: "start" | "end" | "middle" | "extremities";
+        tickLabelPlacement?: "middle" | "tick";
+        scaleType?: "linear" | "time" | "log" | "band" | "point" | "pow" | "sqrt" | "utc" | undefined;
+        axisId?: import("../internals").AxisId;
+        disableLine?: boolean;
+        disableTicks?: boolean;
+        tickFontSize?: number;
+        tickLabelStyle?: import("..").ChartsTextProps["style"];
+        labelStyle?: import("..").ChartsTextProps["style"];
+        tickLabelInterval?: "auto" | ((value: any, index: number) => boolean);
+        labelFontSize?: number;
+        tickSize?: number;
+        tickInterval?: "auto" | ((value: any, index: number) => boolean) | any[];
+        hideTooltip?: boolean;
+        id: import("../internals").AxisId;
+    }[];
+    yAxis: {
+        reverse?: boolean;
+        fill?: string;
+        stroke?: string;
+        data?: any[] | undefined;
+        label?: string;
+        max?: number | Date;
+        min?: number | Date;
+        classes?: Partial<import("..").ChartsAxisClasses>;
+        slots?: Partial<import("../internals").ChartsAxisSlots>;
+        slotProps?: Partial<import("../internals").ChartsAxisSlotProps>;
+        dataKey?: string;
+        valueFormatter?: ((value: any, context: import("../internals").AxisValueFormatterContext) => string) | undefined;
+        colorMap?: import("../models/colorMapping").ContinuousColorConfig<number | Date> | import("../models/colorMapping").PiecewiseColorConfig<number | Date> | import("../models/colorMapping").OrdinalColorConfig<string | number | Date> | undefined;
+        tickMaxStep?: number;
+        tickMinStep?: number;
+        tickNumber?: number;
+        tickPlacement?: "start" | "end" | "middle" | "extremities";
+        tickLabelPlacement?: "middle" | "tick";
+        scaleType?: "linear" | "time" | "log" | "band" | "point" | "pow" | "sqrt" | "utc" | undefined;
+        axisId?: import("../internals").AxisId;
+        disableLine?: boolean;
+        disableTicks?: boolean;
+        tickFontSize?: number;
+        tickLabelStyle?: import("..").ChartsTextProps["style"];
+        labelStyle?: import("..").ChartsTextProps["style"];
+        tickLabelInterval?: "auto" | ((value: any, index: number) => boolean);
+        labelFontSize?: number;
+        tickSize?: number;
+        tickInterval?: "auto" | ((value: any, index: number) => boolean) | any[];
+        hideTooltip?: boolean;
+        id: import("../internals").AxisId;
+    }[];
+};

package/ChartContainer/useChartContainerProps.js

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartContainerProps = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _useChartContainerHooks = require("./useChartContainerHooks");
+var _useDefaultizeAxis = require("./useDefaultizeAxis");
+const _excluded = ["width", "height", "series", "margin", "xAxis", "yAxis", "zAxis", "colors", "dataset", "sx", "title", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "children"];
+const useChartContainerProps = (props, ref) => {
+  const {
+      width,
+      height,
+      series,
+      margin,
+      xAxis,
+      yAxis,
+      zAxis,
+      colors,
+      dataset,
+      sx,
+      title,
+      desc,
+      disableAxisListener,
+      highlightedItem,
+      onHighlightChange,
+      plugins,
+      children
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    svgRef,
+    chartSurfaceRef,
+    xExtremumGetters,
+    yExtremumGetters,
+    seriesFormatters,
+    colorProcessors
+  } = (0, _useChartContainerHooks.useChartContainerHooks)(ref, plugins);
+  const [defaultizedXAxis, defaultizedYAxis] = (0, _useDefaultizeAxis.useDefaultizeAxis)(xAxis, yAxis);
+  const drawingProviderProps = {
+    width,
+    height,
+    margin,
+    svgRef
+  };
+  const colorProviderProps = {
+    colorProcessors
+  };
+  const seriesContextProps = {
+    series,
+    colors,
+    dataset,
+    seriesFormatters
+  };
+  const cartesianContextProps = {
+    xAxis: defaultizedXAxis,
+    yAxis: defaultizedYAxis,
+    dataset,
+    xExtremumGetters,
+    yExtremumGetters
+  };
+  const zAxisContextProps = {
+    zAxis,
+    dataset
+  };
+  const highlightedProviderProps = {
+    highlightedItem,
+    onHighlightChange
+  };
+  const chartsSurfaceProps = (0, _extends2.default)({}, other, {
+    width,
+    height,
+    ref: chartSurfaceRef,
+    sx,
+    title,
+    desc,
+    disableAxisListener
+  });
+  return {
+    children,
+    drawingProviderProps,
+    colorProviderProps,
+    seriesContextProps,
+    cartesianContextProps,
+    zAxisContextProps,
+    highlightedProviderProps,
+    chartsSurfaceProps,
+    xAxis: defaultizedXAxis,
+    yAxis: defaultizedYAxis
+  };
+};
+exports.useChartContainerProps = useChartContainerProps;

package/ChartContainer/useDefaultizeAxis.d.ts

@@ -0,0 +1,36 @@
+import { MakeOptional } from '../models/helpers';
+import { AxisConfig, ScaleName } from '../models';
+import { ChartsAxisProps } from '../models/axis';
+export declare const useDefaultizeAxis: (inXAxis: MakeOptional<AxisConfig<ScaleName, any, ChartsAxisProps>, "id">[] | undefined, inYAxis: MakeOptional<AxisConfig<ScaleName, any, ChartsAxisProps>, "id">[] | undefined) => {
+    reverse?: boolean;
+    fill?: string;
+    stroke?: string;
+    data?: any[] | undefined;
+    label?: string;
+    max?: number | Date;
+    min?: number | Date;
+    classes?: Partial<import("..").ChartsAxisClasses>;
+    slots?: Partial<import("../models/axis").ChartsAxisSlots>;
+    slotProps?: Partial<import("../models/axis").ChartsAxisSlotProps>;
+    dataKey?: string;
+    valueFormatter?: ((value: any, context: import("../models/axis").AxisValueFormatterContext) => string) | undefined;
+    colorMap?: import("../models/colorMapping").ContinuousColorConfig<number | Date> | import("../models/colorMapping").PiecewiseColorConfig<number | Date> | import("../models/colorMapping").OrdinalColorConfig<string | number | Date> | undefined;
+    tickMaxStep?: number;
+    tickMinStep?: number;
+    tickNumber?: number;
+    tickPlacement?: "start" | "end" | "middle" | "extremities";
+    tickLabelPlacement?: "middle" | "tick";
+    scaleType?: "linear" | "time" | "log" | "band" | "point" | "pow" | "sqrt" | "utc" | undefined;
+    axisId?: import("../models/axis").AxisId;
+    disableLine?: boolean;
+    disableTicks?: boolean;
+    tickFontSize?: number;
+    tickLabelStyle?: import("..").ChartsTextProps["style"];
+    labelStyle?: import("..").ChartsTextProps["style"];
+    tickLabelInterval?: "auto" | ((value: any, index: number) => boolean);
+    labelFontSize?: number;
+    tickSize?: number;
+    tickInterval?: "auto" | ((value: any, index: number) => boolean) | any[];
+    hideTooltip?: boolean;
+    id: import("../models/axis").AxisId;
+}[][];

package/ChartContainer/useDefaultizeAxis.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDefaultizeAxis = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _constants = require("../constants");
+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 && {}.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; }
+const defaultizeAxis = (inAxis, axisName) => {
+  const DEFAULT_AXIS_KEY = axisName === 'x' ? _constants.DEFAULT_X_AXIS_KEY : _constants.DEFAULT_Y_AXIS_KEY;
+  return [...(inAxis?.map((axis, index) => (0, _extends2.default)({
+    id: `defaultized-${axisName}-axis-${index}`
+  }, axis)) ?? []), ...(inAxis === undefined || inAxis.findIndex(({
+    id
+  }) => id === DEFAULT_AXIS_KEY) === -1 ? [{
+    id: DEFAULT_AXIS_KEY,
+    scaleType: 'linear'
+  }] : [])];
+};
+const useDefaultizeAxis = (inXAxis, inYAxis) => {
+  const xAxis = React.useMemo(() => defaultizeAxis(inXAxis, 'x'), [inXAxis]);
+  const yAxis = React.useMemo(() => defaultizeAxis(inYAxis, 'y'), [inYAxis]);
+  return [xAxis, yAxis];
+};
+exports.useDefaultizeAxis = useDefaultizeAxis;

package/ChartsAxis/ChartsAxis.js

@@ -66,16 +66,16 @@ function ChartsAxis(props) {
   const topId = getAxisId(topAxis, xAxisIds[0]);
   const rightId = getAxisId(rightAxis, yAxisIds[0]);
   if (topId !== null && !xAxis[topId]) {
-    throw Error([`MUI X Charts: id used for top axis "${topId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
+    throw Error([`MUI X: id used for top axis "${topId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
   }
   if (leftId !== null && !yAxis[leftId]) {
-    throw Error([`MUI X Charts: id used for left axis "${leftId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
+    throw Error([`MUI X: id used for left axis "${leftId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
   }
   if (rightId !== null && !yAxis[rightId]) {
-    throw Error([`MUI X Charts: id used for right axis "${rightId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
+    throw Error([`MUI X: id used for right axis "${rightId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
   }
   if (bottomId !== null && !xAxis[bottomId]) {
-    throw Error([`MUI X Charts: id used for bottom axis "${bottomId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
+    throw Error([`MUI X: id used for bottom axis "${bottomId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
   }
   const topAxisProps = mergeProps(topAxis, slots, slotProps);
   const bottomAxisProps = mergeProps(bottomAxis, slots, slotProps);

package/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -85,7 +85,7 @@ function ChartsAxisHighlight(props) {
     const isXError = isBandScaleX && xScale(axisX.value) === undefined;
     const isYError = isBandScaleY && yScale(axisY.value) === undefined;
     if (isXError || isYError) {
-      console.error([`MUI X Charts: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
+      console.error([`MUI X: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
     }
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {

package/ChartsLegend/ChartsLegend.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { AnchorPosition, Direction } from './utils';
 import { ChartsLegendClasses } from './chartsLegendClasses';
 import { LegendRendererProps } from './DefaultChartsLegend';
+import { LegendPlacement } from './legend.types';
 export interface ChartsLegendSlots {
     /**
      * Custom rendering of the legend.
@@ -12,11 +12,7 @@ export interface ChartsLegendSlots {
 export interface ChartsLegendSlotProps {
     legend?: Partial<LegendRendererProps>;
 }
-export type ChartsLegendProps = {
-    /**
-     * The position of the legend.
-     */
-    position?: AnchorPosition;
+export interface ChartsLegendProps extends LegendPlacement {
     /**
      * Override or extend the styles applied to the component.
      */
@@ -26,11 +22,6 @@ export type ChartsLegendProps = {
      * @default false
      */
     hidden?: boolean;
-    /**
-     * The direction of the legend layout.
-     * The default depends on the chart.
-     */
-    direction?: Direction;
     /**
      * Overridable component slots.
      * @default {}
@@ -41,7 +32,7 @@ export type ChartsLegendProps = {
      * @default {}
      */
     slotProps?: ChartsLegendSlotProps;
-};
+}
 declare function ChartsLegend(inProps: ChartsLegendProps): React.JSX.Element;
 declare namespace ChartsLegend {
     var propTypes: any;

package/ChartsLegend/ContinuousColorLegend.d.ts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { ContinuousScaleName } from '../models/axis';
+import { ChartsTextProps } from '../ChartsText';
+import { ColorLegendSelector, LegendPlacement } from './legend.types';
+type LabelFormatter = (params: {
+    value: number | Date;
+    formattedValue: string;
+}) => string;
+export interface ContinuousColorLegendProps extends LegendPlacement, ColorLegendSelector {
+    /**
+     * The label to display at the minimum side of the gradient.
+     * Can either be a string, or a function.
+     * @default ({ formattedValue }) => formattedValue
+     */
+    minLabel?: string | LabelFormatter;
+    /**
+     * The label to display at the maximum side of the gradient.
+     * Can either be a string, or a function.
+     * If not defined, the formatted maximal value is display.
+     * @default ({ formattedValue }) => formattedValue
+     */
+    maxLabel?: string | LabelFormatter;
+    /**
+     * A unique identifier for the gradient.
+     * @default auto-generated id
+     */
+    id?: string;
+    /**
+     * The scale used to display gradient colors.
+     * @default 'linear'
+     */
+    scaleType?: ContinuousScaleName;
+    /**
+     * The length of the gradient bar.
+     * Can be a number (in px) or a string with a percentage such as '50%'.
+     * The '100%' is the length of the svg.
+     * @default '50%'
+     */
+    length?: number | string;
+    /**
+     * The thickness of the gradient bar.
+     * @default 5
+     */
+    thickness?: number;
+    /**
+     * The alignment of the texts with the gradient bar.
+     * @default 'middle'
+     */
+    align?: 'start' | 'middle' | 'end';
+    /**
+     * The space between the gradient bar and the labels.
+     * @default 4
+     */
+    spacing?: number;
+    /**
+     * The style applied to labels.
+     * @default theme.typography.subtitle1
+     */
+    labelStyle?: ChartsTextProps['style'];
+}
+declare function ContinuousColorLegend(props: ContinuousColorLegendProps): React.JSX.Element | null;
+declare namespace ContinuousColorLegend {
+    var propTypes: any;
+}
+export { ContinuousColorLegend };