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

package/context/ChartDataProvider/useChartDataProviderProps.js

@@ -1,66 +0,0 @@
-'use client';
-
-import { useDefaultizeAxis } from "./useDefaultizeAxis.js";
-export const useChartDataProviderProps = props => {
-  const {
-    width,
-    height,
-    series,
-    margin,
-    xAxis,
-    yAxis,
-    zAxis,
-    colors,
-    dataset,
-    highlightedItem,
-    onHighlightChange,
-    plugins,
-    children,
-    skipAnimation
-  } = props;
-  const [defaultizedXAxis, defaultizedYAxis] = useDefaultizeAxis(xAxis, yAxis, dataset);
-  const drawingAreaProviderProps = {
-    margin
-  };
-  const animationProviderProps = {
-    skipAnimation
-  };
-  const pluginProviderProps = {
-    plugins
-  };
-  const seriesProviderProps = {
-    series,
-    colors,
-    dataset
-  };
-  const cartesianProviderProps = {
-    xAxis: defaultizedXAxis,
-    yAxis: defaultizedYAxis,
-    dataset
-  };
-  const zAxisContextProps = {
-    zAxis,
-    dataset
-  };
-  const highlightedProviderProps = {
-    highlightedItem,
-    onHighlightChange
-  };
-  const sizeProviderProps = {
-    width,
-    height
-  };
-  return {
-    children,
-    drawingAreaProviderProps,
-    seriesProviderProps,
-    cartesianProviderProps,
-    zAxisContextProps,
-    highlightedProviderProps,
-    pluginProviderProps,
-    animationProviderProps,
-    xAxis: defaultizedXAxis,
-    yAxis: defaultizedYAxis,
-    sizeProviderProps
-  };
-};

package/context/ChartDataProvider/useDefaultizeAxis.d.ts

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

package/context/DrawingAreaProvider/DrawingArea.types.d.ts

@@ -1,51 +0,0 @@
-import * as React from 'react';
-import { LayoutConfig } from '../../models';
-export interface DrawingAreaProviderProps extends Pick<LayoutConfig, 'margin'> {
-    children: React.ReactNode;
-}
-/**
- * Defines the area in which it is possible to draw the charts.
- */
-export type DrawingAreaState = {
-    /**
-     * The gap between the left border of the SVG and the drawing area.
-     */
-    left: number;
-    /**
-     * The gap between the top border of the SVG and the drawing area.
-     */
-    top: number;
-    /**
-     * The gap between the bottom border of the SVG and the drawing area.
-     */
-    bottom: number;
-    /**
-     * The gap between the right border of the SVG and the drawing area.
-     */
-    right: number;
-    /**
-     * The width of the drawing area.
-     */
-    width: number;
-    /**
-     * The height of the drawing area.
-     */
-    height: number;
-    /**
-     * Checks if a point is inside the drawing area.
-     * @param {Object} point The point to check.
-     * @param {number} point.x The x coordinate of the point.
-     * @param {number} point.y The y coordinate of the point.
-     * @param {Object} options The options of the check.
-     * @param {Element} [options.targetElement] The element to check if it is allowed to overflow the drawing area.
-     * @param {'x' | 'y'} [options.direction] The direction to check.
-     * @returns {boolean} `true` if the point is inside the drawing area, `false` otherwise.
-     */
-    isPointInside: (point: {
-        x: number;
-        y: number;
-    }, options?: {
-        targetElement?: Element;
-        direction?: 'x' | 'y';
-    }) => boolean;
-};

package/context/DrawingAreaProvider/DrawingAreaContext.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { DrawingAreaState } from './DrawingArea.types';
-export declare const DrawingAreaContext: React.Context<DrawingAreaState & {
-    /**
-     * A random id used to distinguish each chart on the same page.
-     */
-    chartId: string;
-}>;

package/context/DrawingAreaProvider/DrawingAreaContext.js

@@ -1,16 +0,0 @@
-'use client';
-
-import * as React from 'react';
-export const DrawingAreaContext = /*#__PURE__*/React.createContext({
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0,
-  height: 300,
-  width: 400,
-  chartId: '',
-  isPointInside: () => false
-});
-if (process.env.NODE_ENV !== 'production') {
-  DrawingAreaContext.displayName = 'DrawingContext';
-}

package/context/DrawingAreaProvider/DrawingAreaProvider.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-import { DrawingAreaProviderProps } from './DrawingArea.types';
-export declare function DrawingAreaProvider(props: DrawingAreaProviderProps): React.JSX.Element;

package/context/DrawingAreaProvider/DrawingAreaProvider.js

@@ -1,48 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import useId from '@mui/utils/useId';
-import useChartDimensions from "../../hooks/useChartDimensions.js";
-import { DrawingAreaContext } from "./DrawingAreaContext.js";
-import { useSize } from "../SizeProvider/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export function DrawingAreaProvider(props) {
-  const {
-    margin,
-    children
-  } = props;
-  const {
-    width,
-    height
-  } = useSize();
-  const drawingArea = useChartDimensions(width, height, margin);
-  const chartId = useId();
-  const isPointInside = React.useCallback(({
-    x,
-    y
-  }, options) => {
-    // For element allowed to overflow, wrapping them in <g data-drawing-container /> make them fully part of the drawing area.
-    if (options?.targetElement && options?.targetElement.closest('[data-drawing-container]')) {
-      return true;
-    }
-    const isInsideX = x >= drawingArea.left - 1 && x <= drawingArea.left + drawingArea.width;
-    const isInsideY = y >= drawingArea.top - 1 && y <= drawingArea.top + drawingArea.height;
-    if (options?.direction === 'x') {
-      return isInsideX;
-    }
-    if (options?.direction === 'y') {
-      return isInsideY;
-    }
-    return isInsideX && isInsideY;
-  }, [drawingArea]);
-  const value = React.useMemo(() => _extends({
-    chartId: chartId ?? ''
-  }, drawingArea, {
-    isPointInside
-  }), [chartId, drawingArea, isPointInside]);
-  return /*#__PURE__*/_jsx(DrawingAreaContext.Provider, {
-    value: value,
-    children: children
-  });
-}

package/context/DrawingAreaProvider/index.d.ts

@@ -1,3 +0,0 @@
-export * from './DrawingArea.types';
-export * from './DrawingAreaProvider';
-export * from './DrawingAreaContext';

package/context/DrawingAreaProvider/index.js

@@ -1,3 +0,0 @@
-export * from "./DrawingArea.types.js";
-export * from "./DrawingAreaProvider.js";
-export * from "./DrawingAreaContext.js";

package/context/HighlightedProvider/HighlightedContext.d.ts

@@ -1,58 +0,0 @@
-import * as React from 'react';
-import { SeriesId } from '../../models/seriesType/common';
-import { Initializable } from '../context.types';
-/**
- * The data of the highlighted item.
- * To highlight an item, you need to provide the series id and the item id.
- * If targeting the whole series, you can omit the item id.
- * To clear the highlight, set the value to an empty object.
- *
- * @example
- * // Highlight the item with the series id 'london' and the item id 0.
- * { seriesId: 'london', dataIndex: 0 }
- *
- * // Highlight the whole series with the series id 'london'.
- * { seriesId: 'london' }
- *
- * // Clear the highlight.
- * {}
- */
-export type HighlightItemData = {
-    /**
-     * The series id of the highlighted item.
-     */
-    seriesId?: SeriesId;
-    /**
-     * The index of the item in series data.
-     */
-    dataIndex?: number;
-};
-export type HighlightOptions = 'none' | 'item' | 'series';
-export type FadeOptions = 'none' | 'series' | 'global';
-export type HighlightScope = {
-    /**
-     * The scope of highlighted elements.
-     * - 'none': no highlight.
-     * - 'item': only highlight the item.
-     * - 'series': highlight all elements of the same series.
-     * @default 'none'
-     */
-    highlight?: HighlightOptions;
-    /**
-     * The scope of faded elements.
-     * - 'none': no fading.
-     * - 'series': only fade element of the same series.
-     * - 'global': fade all elements that are not highlighted.
-     * @default 'none'
-     */
-    fade?: FadeOptions;
-};
-export type HighlightedState = {
-    highlightScope?: Partial<HighlightScope>;
-    highlightedItem: HighlightItemData | null;
-    setHighlighted: (item: HighlightItemData) => void;
-    clearHighlighted: () => void;
-    isHighlighted: (input: HighlightItemData) => boolean;
-    isFaded: (input: HighlightItemData) => boolean;
-};
-export declare const HighlightedContext: React.Context<Initializable<HighlightedState>>;

package/context/HighlightedProvider/HighlightedContext.js

@@ -1,32 +0,0 @@
-import * as React from 'react';
-
-/**
- * The data of the highlighted item.
- * To highlight an item, you need to provide the series id and the item id.
- * If targeting the whole series, you can omit the item id.
- * To clear the highlight, set the value to an empty object.
- *
- * @example
- * // Highlight the item with the series id 'london' and the item id 0.
- * { seriesId: 'london', dataIndex: 0 }
- *
- * // Highlight the whole series with the series id 'london'.
- * { seriesId: 'london' }
- *
- * // Clear the highlight.
- * {}
- */
-
-export const HighlightedContext = /*#__PURE__*/React.createContext({
-  isInitialized: false,
-  data: {
-    highlightedItem: null,
-    setHighlighted: () => {},
-    clearHighlighted: () => {},
-    isHighlighted: () => false,
-    isFaded: () => false
-  }
-});
-if (process.env.NODE_ENV !== 'production') {
-  HighlightedContext.displayName = 'HighlightedContext';
-}

package/context/HighlightedProvider/HighlightedProvider.d.ts

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { HighlightItemData } from './HighlightedContext';
-export type HighlightedProviderProps = {
-    children: React.ReactNode;
-    /**
-     * The item currently highlighted. Turns highlighting into a controlled prop.
-     */
-    highlightedItem?: HighlightItemData | null;
-    /**
-     * The callback fired when the highlighted item changes.
-     *
-     * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
-     */
-    onHighlightChange?: (highlightedItem: HighlightItemData | null) => void;
-};
-declare function HighlightedProvider({ children, highlightedItem: highlightedItemProps, onHighlightChange, }: HighlightedProviderProps): React.JSX.Element;
-declare namespace HighlightedProvider {
-    var propTypes: any;
-}
-export { HighlightedProvider };

package/context/HighlightedProvider/HighlightedProvider.js

@@ -1,79 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import useControlled from '@mui/utils/useControlled';
-import { HighlightedContext } from "./HighlightedContext.js";
-import { createIsFaded } from "./createIsFaded.js";
-import { createIsHighlighted } from "./createIsHighlighted.js";
-import { useSeries } from "../../hooks/useSeries.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-function HighlightedProvider({
-  children,
-  highlightedItem: highlightedItemProps,
-  onHighlightChange
-}) {
-  const [highlightedItem, setHighlightedItem] = useControlled({
-    controlled: highlightedItemProps,
-    default: null,
-    name: 'HighlightedProvider',
-    state: 'highlightedItem'
-  });
-  const series = useSeries();
-  const seriesById = React.useMemo(() => {
-    const map = new Map();
-    Object.keys(series).forEach(seriesType => {
-      const seriesData = series[seriesType];
-      Object.keys(seriesData?.series ?? {}).forEach(seriesId => {
-        const seriesItem = seriesData?.series[seriesId];
-        map.set(seriesId, seriesItem?.highlightScope);
-      });
-    });
-    return map;
-  }, [series]);
-  const highlightScope = highlightedItem && highlightedItem.seriesId ? seriesById.get(highlightedItem.seriesId) ?? undefined : undefined;
-  const providerValue = React.useMemo(() => {
-    return {
-      isInitialized: true,
-      data: {
-        highlightScope,
-        highlightedItem,
-        setHighlighted: itemData => {
-          setHighlightedItem(itemData);
-          onHighlightChange?.(itemData);
-        },
-        clearHighlighted: () => {
-          setHighlightedItem(null);
-          onHighlightChange?.(null);
-        },
-        isHighlighted: createIsHighlighted(highlightScope, highlightedItem),
-        isFaded: createIsFaded(highlightScope, highlightedItem)
-      }
-    };
-  }, [highlightedItem, highlightScope, setHighlightedItem, onHighlightChange]);
-  return /*#__PURE__*/_jsx(HighlightedContext.Provider, {
-    value: providerValue,
-    children: children
-  });
-}
-process.env.NODE_ENV !== "production" ? HighlightedProvider.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,
-  /**
-   * The item currently highlighted. Turns highlighting into a controlled prop.
-   */
-  highlightedItem: PropTypes.shape({
-    dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-  }),
-  /**
-   * The callback fired when the highlighted item changes.
-   *
-   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
-   */
-  onHighlightChange: PropTypes.func
-} : void 0;
-export { HighlightedProvider };

package/context/HighlightedProvider/createIsFaded.d.ts

@@ -1,2 +0,0 @@
-import { HighlightItemData, HighlightScope } from './HighlightedContext';
-export declare const createIsFaded: (highlightScope: HighlightScope | null | undefined, highlightedItem: HighlightItemData | null) => (input: HighlightItemData) => boolean;

package/context/HighlightedProvider/createIsFaded.js

@@ -1,12 +0,0 @@
-export const createIsFaded = (highlightScope, highlightedItem) => input => {
-  if (!highlightScope) {
-    return false;
-  }
-  if (highlightScope.fade === 'series') {
-    return input.seriesId === highlightedItem?.seriesId && input.dataIndex !== highlightedItem?.dataIndex;
-  }
-  if (highlightScope.fade === 'global') {
-    return input.seriesId !== highlightedItem?.seriesId || input.dataIndex !== highlightedItem?.dataIndex;
-  }
-  return false;
-};

package/context/HighlightedProvider/createIsHighlighted.d.ts

@@ -1,2 +0,0 @@
-import { HighlightItemData, HighlightScope } from './HighlightedContext';
-export declare const createIsHighlighted: (highlightScope: HighlightScope | null | undefined, highlightedItem: HighlightItemData | null) => (input: HighlightItemData) => boolean;

package/context/HighlightedProvider/createIsHighlighted.js

@@ -1,12 +0,0 @@
-export const createIsHighlighted = (highlightScope, highlightedItem) => input => {
-  if (!highlightScope) {
-    return false;
-  }
-  if (highlightScope.highlight === 'series') {
-    return input.seriesId === highlightedItem?.seriesId;
-  }
-  if (highlightScope.highlight === 'item') {
-    return input.dataIndex === highlightedItem?.dataIndex && input.seriesId === highlightedItem?.seriesId;
-  }
-  return false;
-};

package/context/HighlightedProvider/index.d.ts

@@ -1,4 +0,0 @@
-export * from './HighlightedProvider';
-export * from './HighlightedContext';
-export * from './useHighlighted';
-export * from './useItemHighlighted';

package/context/HighlightedProvider/index.js

@@ -1,4 +0,0 @@
-export * from "./HighlightedProvider.js";
-export * from "./HighlightedContext.js";
-export * from "./useHighlighted.js";
-export * from "./useItemHighlighted.js";

package/context/HighlightedProvider/useHighlighted.d.ts

@@ -1,9 +0,0 @@
-import { HighlightedState } from './HighlightedContext';
-/**
- * A hook to get the highlighted state of the chart.
- *
- * Please consider using the `useItemHighlighted` hook if you need to check the state of a specific item.
- *
- * @returns {HighlightedState} the state of the chart
- */
-export declare function useHighlighted(): HighlightedState;

package/context/HighlightedProvider/useHighlighted.js

@@ -1,22 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { HighlightedContext } from "./HighlightedContext.js";
-
-/**
- * A hook to get the highlighted state of the chart.
- *
- * Please consider using the `useItemHighlighted` hook if you need to check the state of a specific item.
- *
- * @returns {HighlightedState} the state of the chart
- */
-export function useHighlighted() {
-  const {
-    isInitialized,
-    data
-  } = React.useContext(HighlightedContext);
-  if (!isInitialized) {
-    throw new Error(['MUI X: Could not find the highlighted ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
-  }
-  return data;
-}

package/context/HighlightedProvider/useItemHighlighted.d.ts

@@ -1,21 +0,0 @@
-import { HighlightItemData } from './HighlightedContext';
-export type ItemHighlightedState = {
-    /**
-     * Whether the item is highlighted.
-     */
-    isHighlighted: boolean;
-    /**
-     * Whether the item is faded.
-     */
-    isFaded: boolean;
-};
-/**
- * A hook to check the highlighted state of the item.
- * This function already calculates that an item is not faded if it is highlighted.
- *
- * If you need fine control over the state, use the `useHighlighted` hook instead.
- *
- * @param {HighlightItemData} item is the item to check
- * @returns {ItemHighlightedState} the state of the item
- */
-export declare function useItemHighlighted(item: HighlightItemData | null): ItemHighlightedState;

package/context/HighlightedProvider/useItemHighlighted.js

@@ -1,27 +0,0 @@
-'use client';
-
-import { useHighlighted } from "./useHighlighted.js";
-/**
- * A hook to check the highlighted state of the item.
- * This function already calculates that an item is not faded if it is highlighted.
- *
- * If you need fine control over the state, use the `useHighlighted` hook instead.
- *
- * @param {HighlightItemData} item is the item to check
- * @returns {ItemHighlightedState} the state of the item
- */
-export function useItemHighlighted(item) {
-  const highlighted = useHighlighted();
-  if (!item) {
-    return {
-      isHighlighted: false,
-      isFaded: false
-    };
-  }
-  const isHighlighted = highlighted.isHighlighted(item);
-  const isFaded = !isHighlighted && highlighted.isFaded(item);
-  return {
-    isHighlighted,
-    isFaded
-  };
-}

package/context/InteractionProvider.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { ChartStore } from '../internals/plugins/utils/ChartStore';
-export declare const ChartsContext: React.Context<{
-    store: ChartStore;
-} | null>;
-declare function InteractionProvider(props: React.PropsWithChildren): React.JSX.Element;
-export { InteractionProvider };

package/context/InteractionProvider.js

@@ -1,22 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { useCharts } from "../internals/useCharts.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const ChartsContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== 'production') {
-  ChartsContext.displayName = 'ChartsContext';
-}
-function InteractionProvider(props) {
-  const {
-    children
-  } = props;
-  const {
-    contextValue
-  } = useCharts();
-  return /*#__PURE__*/_jsx(ChartsContext.Provider, {
-    value: contextValue,
-    children: children
-  });
-}
-export { InteractionProvider };