@mui/x-charts 8.0.0-beta.3 → 8.0.0

package/modern/hooks/useAxis.js

@@ -1,119 +0,0 @@
-'use client';
-
-import { selectorChartXAxis, selectorChartYAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.js";
-import { selectorChartRadiusAxis, selectorChartRotationAxis } from "../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
-import { useSelector } from "../internals/store/useSelector.js";
-import { useStore } from "../internals/store/useStore.js";
-/**
- * Get all the x-axes.
- *
- * - `xAxis` is an object with the shape `{ [axisId]: axis }`.
- * - `xAxisIds` is an array of axis IDs.
- *
- * If access to a specific X axis is needed, use the `useXAxis` hook instead.
- *
- * @returns `{ xAxis, xAxisIds }` - The x-axes and their IDs.
- */
-export function useXAxes() {
-  const store = useStore();
-  const {
-    axis: xAxis,
-    axisIds: xAxisIds
-  } = useSelector(store, selectorChartXAxis);
-  return {
-    xAxis,
-    xAxisIds
-  };
-}
-
-/**
- * Get all the y-axes.
- *
- * - `yAxis` is an object with the shape `{ [axisId]: axis }`.
- * - `yAxisIds` is an array of axis IDs.
- *
- * If access to a specific Y axis is needed, use the `useYAxis` hook instead.
- *
- * @returns `{ yAxis, yAxisIds }` - The y-axes and their IDs.
- */
-export function useYAxes() {
-  const store = useStore();
-  const {
-    axis: yAxis,
-    axisIds: yAxisIds
-  } = useSelector(store, selectorChartYAxis);
-  return {
-    yAxis,
-    yAxisIds
-  };
-}
-
-/**
- * Get the X axis.
- * @param {AxisId | undefined} axisId - If provided returns the x axis with axisId, else returns the values for the default x axis.
- * @returns The X axis.
- */
-export function useXAxis(axisId) {
-  const store = useStore();
-  const {
-    axis: xAxis,
-    axisIds: xAxisIds
-  } = useSelector(store, selectorChartXAxis);
-  const id = axisId ?? xAxisIds[0];
-  return xAxis[id];
-}
-
-/**
- * Get the Y axis.
- * @param {AxisId | undefined} axisId - If provided returns the y axis with axisId, else returns the values for the default y axis.
- * @returns The Y axis.
- */
-export function useYAxis(axisId) {
-  const store = useStore();
-  const {
-    axis: yAxis,
-    axisIds: yAxisIds
-  } = useSelector(store, selectorChartYAxis);
-  const id = axisId ?? yAxisIds[0];
-  return yAxis[id];
-}
-export function useRotationAxes() {
-  const store = useStore();
-  const {
-    axis: rotationAxis,
-    axisIds: rotationAxisIds
-  } = useSelector(store, selectorChartRotationAxis);
-  return {
-    rotationAxis,
-    rotationAxisIds
-  };
-}
-export function useRadiusAxes() {
-  const store = useStore();
-  const {
-    axis: radiusAxis,
-    axisIds: radiusAxisIds
-  } = useSelector(store, selectorChartRadiusAxis);
-  return {
-    radiusAxis,
-    radiusAxisIds
-  };
-}
-export function useRotationAxis(identifier) {
-  const store = useStore();
-  const {
-    axis: rotationAxis,
-    axisIds: rotationAxisIds
-  } = useSelector(store, selectorChartRotationAxis);
-  const id = typeof identifier === 'string' ? identifier : rotationAxisIds[identifier ?? 0];
-  return rotationAxis[id];
-}
-export function useRadiusAxis(identifier) {
-  const store = useStore();
-  const {
-    axis: radiusAxis,
-    axisIds: radiusAxisIds
-  } = useSelector(store, selectorChartRadiusAxis);
-  const id = typeof identifier === 'string' ? identifier : radiusAxisIds[identifier ?? 0];
-  return radiusAxis[id];
-}

package/modern/hooks/useBarSeries.d.ts

@@ -1,36 +0,0 @@
-import { ProcessedSeries } from "../internals/plugins/corePlugins/useChartSeries/useChartSeries.types.js";
-import { SeriesId } from "../models/seriesType/common.js";
-import { ChartSeriesDefaultized } from "../models/seriesType/config.js";
-export type UseBarSeriesReturnValue = ChartSeriesDefaultized<'bar'>;
-export type UseBarSeriesContextReturnValue = ProcessedSeries['bar'];
-/**
- * Get access to the internal state of bar series.
- *
- * @param {SeriesId} seriesId The id of the series to get.
- * @returns {UseBarSeriesReturnValue} the bar series
- */
-export declare function useBarSeries(seriesId: SeriesId): UseBarSeriesReturnValue | undefined;
-/**
- * Get access to the internal state of bar series.
- *
- * When called without arguments, it returns all bar series.
- *
- * @returns {UseBarSeriesReturnValue[]} the bar series
- */
-export declare function useBarSeries(): UseBarSeriesReturnValue[];
-/**
- * Get access to the internal state of bar series.
- *
- * @param {SeriesId[]} seriesIds The ids of the series to get. Order is preserved.
- * @returns {UseBarSeriesReturnValue[]} the bar series
- */
-export declare function useBarSeries(seriesIds: SeriesId[]): UseBarSeriesReturnValue[];
-/**
- * Get access to the internal state of bar series.
- * The returned object contains:
- * - series: a mapping from ids to series attributes.
- * - seriesOrder: the array of series ids.
- * - stackingGroups: the array of stacking groups. Each group contains the series ids stacked and the strategy to use.
- * @returns the bar series
- */
-export declare function useBarSeriesContext(): UseBarSeriesContextReturnValue;

package/modern/hooks/useBarSeries.js

@@ -1,43 +0,0 @@
-'use client';
-
-import { createSeriesSelectorsOfType, createAllSeriesSelectorOfType } from "../internals/createSeriesSelectorOfType.js";
-const useSelectorSeries = createSeriesSelectorsOfType('bar');
-const useSelectorSeriesContext = createAllSeriesSelectorOfType('bar');
-
-/**
- * Get access to the internal state of bar series.
- *
- * @param {SeriesId} seriesId The id of the series to get.
- * @returns {UseBarSeriesReturnValue} the bar series
- */
-
-/**
- * Get access to the internal state of bar series.
- *
- * When called without arguments, it returns all bar series.
- *
- * @returns {UseBarSeriesReturnValue[]} the bar series
- */
-
-/**
- * Get access to the internal state of bar series.
- *
- * @param {SeriesId[]} seriesIds The ids of the series to get. Order is preserved.
- * @returns {UseBarSeriesReturnValue[]} the bar series
- */
-
-export function useBarSeries(seriesIds) {
-  return useSelectorSeries(seriesIds);
-}
-
-/**
- * Get access to the internal state of bar series.
- * The returned object contains:
- * - series: a mapping from ids to series attributes.
- * - seriesOrder: the array of series ids.
- * - stackingGroups: the array of stacking groups. Each group contains the series ids stacked and the strategy to use.
- * @returns the bar series
- */
-export function useBarSeriesContext() {
-  return useSelectorSeriesContext();
-}

package/modern/hooks/useChartGradientId.d.ts

@@ -1,31 +0,0 @@
-import { AxisId } from "../models/axis.js";
-/**
- * Returns a function that generates a gradient id for the given axis id.
- */
-export declare function useChartGradientIdBuilder(): (axisId: AxisId) => string;
-/**
- * Returns a function that generates a gradient id for the given axis id.
- */
-export declare function useChartGradientIdObjectBoundBuilder(): (axisId: AxisId) => string;
-/**
- * Returns a gradient id for the given axis id.
- *
- * Can be useful when reusing the same gradient on custom components.
- *
- * For a gradient that respects the coordinates of the object on which it is applied, use `useChartGradientIdObjectBound` instead.
- *
- * @param axisId the axis id
- * @returns the gradient id
- */
-export declare function useChartGradientId(axisId: AxisId): string;
-/**
- * Returns a gradient id for the given axis id.
- *
- * Can be useful when reusing the same gradient on custom components.
- *
- * This gradient differs from `useChartGradientId` in that it respects the coordinates of the object on which it is applied.
- *
- * @param axisId the axis id
- * @returns the gradient id
- */
-export declare function useChartGradientIdObjectBound(axisId: AxisId): string;

package/modern/hooks/useChartGradientId.js

@@ -1,47 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { useChartId } from "./useChartId.js";
-/**
- * Returns a function that generates a gradient id for the given axis id.
- */
-export function useChartGradientIdBuilder() {
-  const chartId = useChartId();
-  return React.useCallback(axisId => `${chartId}-gradient-${axisId}`, [chartId]);
-}
-
-/**
- * Returns a function that generates a gradient id for the given axis id.
- */
-export function useChartGradientIdObjectBoundBuilder() {
-  const chartId = useChartId();
-  return React.useCallback(axisId => `${chartId}-gradient-${axisId}-object-bound`, [chartId]);
-}
-
-/**
- * Returns a gradient id for the given axis id.
- *
- * Can be useful when reusing the same gradient on custom components.
- *
- * For a gradient that respects the coordinates of the object on which it is applied, use `useChartGradientIdObjectBound` instead.
- *
- * @param axisId the axis id
- * @returns the gradient id
- */
-export function useChartGradientId(axisId) {
-  return useChartGradientIdBuilder()(axisId);
-}
-
-/**
- * Returns a gradient id for the given axis id.
- *
- * Can be useful when reusing the same gradient on custom components.
- *
- * This gradient differs from `useChartGradientId` in that it respects the coordinates of the object on which it is applied.
- *
- * @param axisId the axis id
- * @returns the gradient id
- */
-export function useChartGradientIdObjectBound(axisId) {
-  return useChartGradientIdObjectBoundBuilder()(axisId);
-}

package/modern/hooks/useChartId.d.ts

@@ -1,5 +0,0 @@
-/**
- * Get the unique identifier of the chart.
- * @returns chartId if it exists.
- */
-export declare function useChartId(): string | undefined;

package/modern/hooks/useChartId.js

@@ -1,14 +0,0 @@
-'use client';
-
-import { useStore } from "../internals/store/useStore.js";
-import { useSelector } from "../internals/store/useSelector.js";
-import { selectorChartId } from "../internals/plugins/corePlugins/useChartId/useChartId.selectors.js";
-
-/**
- * Get the unique identifier of the chart.
- * @returns chartId if it exists.
- */
-export function useChartId() {
-  const store = useStore();
-  return useSelector(store, selectorChartId);
-}

package/modern/hooks/useColorScale.d.ts

@@ -1,22 +0,0 @@
-import { AxisId, AxisScaleComputedConfig, ScaleName } from "../models/axis.js";
-/**
- * Get the X axis color scale.
- *
- * @param {AxisId | undefined} axisId - If provided returns color scale for axisId, else returns the values for the default axis.
- * @returns {AxisScaleComputedConfig[S]['colorScale'] | undefined} The color scale for the specified X axis, or undefined if not found.
- */
-export declare function useXColorScale<S extends ScaleName>(axisId?: AxisId): AxisScaleComputedConfig[S]['colorScale'] | undefined;
-/**
- * Get the Y axis color scale.
- *
- * @param {AxisId | undefined} axisId - If provided returns color scale for axisId, else returns the values for the default axis.
- * @returns {AxisScaleComputedConfig[S]['colorScale'] | undefined} The color scale for the specified Y axis, or undefined if not found.
- */
-export declare function useYColorScale<S extends ScaleName>(axisId?: AxisId): AxisScaleComputedConfig[S]['colorScale'] | undefined;
-/**
- * Get the Z axis color scale.
- *
- * @param {AxisId | undefined} axisId - If provided returns color scale for axisId, else returns the values for the default axis.
- * @returns {AxisScaleComputedConfig[S]['colorScale'] | undefined} The color scale for the specified Z axis, or undefined if not found.
- */
-export declare function useZColorScale<S extends ScaleName>(axisId?: AxisId): AxisScaleComputedConfig[S]['colorScale'] | undefined;

package/modern/hooks/useColorScale.js

@@ -1,37 +0,0 @@
-'use client';
-
-import { useXAxis, useYAxis } from "./useAxis.js";
-import { useZAxis } from "./useZAxis.js";
-
-/**
- * Get the X axis color scale.
- *
- * @param {AxisId | undefined} axisId - If provided returns color scale for axisId, else returns the values for the default axis.
- * @returns {AxisScaleComputedConfig[S]['colorScale'] | undefined} The color scale for the specified X axis, or undefined if not found.
- */
-export function useXColorScale(axisId) {
-  const axis = useXAxis(axisId);
-  return axis.colorScale;
-}
-
-/**
- * Get the Y axis color scale.
- *
- * @param {AxisId | undefined} axisId - If provided returns color scale for axisId, else returns the values for the default axis.
- * @returns {AxisScaleComputedConfig[S]['colorScale'] | undefined} The color scale for the specified Y axis, or undefined if not found.
- */
-export function useYColorScale(axisId) {
-  const axis = useYAxis(axisId);
-  return axis.colorScale;
-}
-
-/**
- * Get the Z axis color scale.
- *
- * @param {AxisId | undefined} axisId - If provided returns color scale for axisId, else returns the values for the default axis.
- * @returns {AxisScaleComputedConfig[S]['colorScale'] | undefined} The color scale for the specified Z axis, or undefined if not found.
- */
-export function useZColorScale(axisId) {
-  const axis = useZAxis(axisId);
-  return axis.colorScale;
-}

package/modern/hooks/useDrawingArea.d.ts

@@ -1,16 +0,0 @@
-export type ChartDrawingArea = {
-  top: number;
-  left: number;
-  right: number;
-  bottom: number;
-  width: number;
-  height: number;
-};
-/**
- * Get the drawing area dimensions and coordinates. The drawing area is the area where the chart is rendered.
- *
- * It includes the left, top, width, height, bottom, and right dimensions.
- *
- * @returns The drawing area dimensions.
- */
-export declare function useDrawingArea(): ChartDrawingArea;

package/modern/hooks/useDrawingArea.js

@@ -1,16 +0,0 @@
-'use client';
-
-import { useStore } from "../internals/store/useStore.js";
-import { useSelector } from "../internals/store/useSelector.js";
-import { selectorChartDrawingArea } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.js";
-/**
- * Get the drawing area dimensions and coordinates. The drawing area is the area where the chart is rendered.
- *
- * It includes the left, top, width, height, bottom, and right dimensions.
- *
- * @returns The drawing area dimensions.
- */
-export function useDrawingArea() {
-  const store = useStore();
-  return useSelector(store, selectorChartDrawingArea);
-}

package/modern/hooks/useInteractionItemProps.d.ts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { SeriesItemIdentifier } from "../models/index.js";
-export declare const useInteractionItemProps: (data: SeriesItemIdentifier, skip?: boolean) => {
-  onPointerEnter?: () => void;
-  onPointerLeave?: () => void;
-  onPointerDown?: (event: React.PointerEvent) => void;
-};
-export declare const useInteractionAllItemProps: (data: SeriesItemIdentifier[], skip?: boolean) => ({
-  onPointerEnter?: undefined;
-  onPointerLeave?: undefined;
-  onPointerDown?: undefined;
-} | {
-  onPointerEnter: () => void;
-  onPointerLeave: () => void;
-  onPointerDown: (event: React.PointerEvent) => void;
-})[];

package/modern/hooks/useInteractionItemProps.js

@@ -1,87 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { useChartContext } from "../context/ChartProvider/index.js";
-const onPointerDown = event => {
-  if ('hasPointerCapture' in event.currentTarget && event.currentTarget.hasPointerCapture(event.pointerId)) {
-    event.currentTarget.releasePointerCapture(event.pointerId);
-  }
-};
-export const useInteractionItemProps = (data, skip) => {
-  const {
-    instance
-  } = useChartContext();
-  const interactionActive = React.useRef(false);
-  const onPointerEnter = React.useCallback(() => {
-    interactionActive.current = true;
-    instance.setItemInteraction({
-      type: data.type,
-      seriesId: data.seriesId,
-      dataIndex: data.dataIndex
-    });
-    instance.setHighlight({
-      seriesId: data.seriesId,
-      dataIndex: data.dataIndex
-    });
-  }, [instance, data.type, data.seriesId, data.dataIndex]);
-  const onPointerLeave = React.useCallback(() => {
-    interactionActive.current = false;
-    instance.removeItemInteraction({
-      type: data.type,
-      seriesId: data.seriesId,
-      dataIndex: data.dataIndex
-    });
-    instance.clearHighlight();
-  }, [instance, data.type, data.seriesId, data.dataIndex]);
-  React.useEffect(() => {
-    return () => {
-      /* Clean up state if this item is unmounted while active. */
-      if (interactionActive.current) {
-        onPointerLeave();
-      }
-    };
-  }, [onPointerLeave]);
-  if (skip) {
-    return {};
-  }
-  return {
-    onPointerEnter,
-    onPointerLeave,
-    onPointerDown
-  };
-};
-export const useInteractionAllItemProps = (data, skip) => {
-  const {
-    instance
-  } = useChartContext();
-  const results = React.useMemo(() => {
-    return data.map(item => {
-      if (skip) {
-        return {};
-      }
-      const onPointerEnter = () => {
-        if (!item) {
-          return;
-        }
-        instance.setItemInteraction(item);
-        instance.setHighlight({
-          seriesId: item.seriesId,
-          dataIndex: item.dataIndex
-        });
-      };
-      const onPointerLeave = () => {
-        if (!item) {
-          return;
-        }
-        instance.removeItemInteraction(item);
-        instance.clearHighlight();
-      };
-      return {
-        onPointerEnter,
-        onPointerLeave,
-        onPointerDown
-      };
-    });
-  }, [data, instance, skip]);
-  return results;
-};

package/modern/hooks/useIsHydrated.d.ts

@@ -1,4 +0,0 @@
-/** Returns true after hydration is done on the client.
- *
- * Basically a implementation of Option 2 of this gist: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85#option-2-lazily-show-component-with-uselayouteffect. */
-export declare function useIsHydrated(): boolean;

package/modern/hooks/useIsHydrated.js

@@ -1,14 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-/** Returns true after hydration is done on the client.
- *
- * Basically a implementation of Option 2 of this gist: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85#option-2-lazily-show-component-with-uselayouteffect. */
-export function useIsHydrated() {
-  const [isHydrated, setIsHydrated] = React.useState(false);
-  React.useEffect(() => {
-    setIsHydrated(true);
-  }, []);
-  return isHydrated;
-}

package/modern/hooks/useItemHighlighted.d.ts

@@ -1,23 +0,0 @@
-import { HighlightItemData } from "../internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.types.js";
-type UseItemHighlightedReturnType = {
-  /**
-   * Whether the item is highlighted.
-   */
-  isHighlighted: boolean;
-  /**
-   * Whether the item is faded.
-   */
-  isFaded: boolean;
-};
-type UseItemHighlightedParams = HighlightItemData | null;
-/**
- * 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 `useItemHighlightedGetter` hook instead.
- *
- * @param {HighlightItemData | null} item is the item to check
- * @returns {UseItemHighlightedReturnType} the state of the item
- */
-export declare function useItemHighlighted(item: UseItemHighlightedParams): UseItemHighlightedReturnType;
-export {};

package/modern/hooks/useItemHighlighted.js

@@ -1,23 +0,0 @@
-'use client';
-
-import { useStore } from "../internals/store/useStore.js";
-import { useSelector } from "../internals/store/useSelector.js";
-import { selectorChartsIsFaded, selectorChartsIsHighlighted } from "../internals/plugins/featurePlugins/useChartHighlight/index.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 `useItemHighlightedGetter` hook instead.
- *
- * @param {HighlightItemData | null} item is the item to check
- * @returns {UseItemHighlightedReturnType} the state of the item
- */
-export function useItemHighlighted(item) {
-  const store = useStore();
-  const isHighlighted = useSelector(store, selectorChartsIsHighlighted, item);
-  const isFaded = useSelector(store, selectorChartsIsFaded, item);
-  return {
-    isHighlighted,
-    isFaded: !isHighlighted && isFaded
-  };
-}

package/modern/hooks/useItemHighlightedGetter.d.ts

@@ -1,12 +0,0 @@
-/**
- * A hook to check the highlighted state of multiple items.
- * If you're interested by a single one, consider using `useItemHighlighted`.
- *
- * Warning: highlighted and faded can both be true at the same time.
- * We recommend to first test if item is highlighted: `const faded = !highlighted && isFaded(item)`
- * @returns {{ isHighlighted, isFaded }} callbacks to get the state of the item.
- */
-export declare function useItemHighlightedGetter(): {
-  isHighlighted: (item: import("..").HighlightItemData | null) => boolean;
-  isFaded: (item: import("..").HighlightItemData | null) => boolean;
-};

package/modern/hooks/useItemHighlightedGetter.js

@@ -1,23 +0,0 @@
-'use client';
-
-import { useSelector } from "../internals/store/useSelector.js";
-import { useStore } from "../internals/store/useStore.js";
-import { selectorChartsIsFadedCallback, selectorChartsIsHighlightedCallback } from "../internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.selectors.js";
-
-/**
- * A hook to check the highlighted state of multiple items.
- * If you're interested by a single one, consider using `useItemHighlighted`.
- *
- * Warning: highlighted and faded can both be true at the same time.
- * We recommend to first test if item is highlighted: `const faded = !highlighted && isFaded(item)`
- * @returns {{ isHighlighted, isFaded }} callbacks to get the state of the item.
- */
-export function useItemHighlightedGetter() {
-  const store = useStore();
-  const isHighlighted = useSelector(store, selectorChartsIsHighlightedCallback);
-  const isFaded = useSelector(store, selectorChartsIsFadedCallback);
-  return {
-    isHighlighted,
-    isFaded
-  };
-}

package/modern/hooks/useLegend.d.ts

@@ -1,13 +0,0 @@
-import type { LegendItemParams } from '../ChartsLegend';
-/**
- * Get the legend items to display.
- *
- * This hook is used by the `ChartsLegend` component. And will return the legend items formatted for display.
- *
- * An alternative is to use the `useSeries` hook and format the legend items yourself.
- *
- * @returns legend data
- */
-export declare function useLegend(): {
-  items: LegendItemParams[];
-};

package/modern/hooks/useLegend.js

@@ -1,30 +0,0 @@
-'use client';
-
-import { selectorChartSeriesConfig } from "../internals/plugins/corePlugins/useChartSeries/index.js";
-import { useSeries } from "./useSeries.js";
-import { useStore } from "../internals/store/useStore.js";
-import { useSelector } from "../internals/store/useSelector.js";
-function getSeriesToDisplay(series, seriesConfig) {
-  return Object.keys(series).flatMap(seriesType => {
-    const getter = seriesConfig[seriesType].legendGetter;
-    return getter === undefined ? [] : getter(series[seriesType]);
-  });
-}
-
-/**
- * Get the legend items to display.
- *
- * This hook is used by the `ChartsLegend` component. And will return the legend items formatted for display.
- *
- * An alternative is to use the `useSeries` hook and format the legend items yourself.
- *
- * @returns legend data
- */
-export function useLegend() {
-  const series = useSeries();
-  const store = useStore();
-  const seriesConfig = useSelector(store, selectorChartSeriesConfig);
-  return {
-    items: getSeriesToDisplay(series, seriesConfig)
-  };
-}