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

package/modern/ChartsTooltip/index.d.ts

@@ -1,11 +0,0 @@
-export * from "./ChartsTooltip.js";
-export * from "./ChartsTooltipContainer.js";
-export type { ChartsTooltipClasses, ChartsTooltipClassKey } from './chartsTooltipClasses';
-export { getChartsTooltipUtilityClass, chartsTooltipClasses } from "./chartsTooltipClasses.js";
-export * from "./ChartsAxisTooltipContent.js";
-export * from "./ChartsItemTooltipContent.js";
-export * from "./ChartsTooltipTable.js";
-export * from "./useItemTooltip.js";
-export * from "./useAxisTooltip.js";
-export { useMouseTracker } from "./utils.js";
-export * from "./ChartTooltip.types.js";

package/modern/ChartsTooltip/index.js

@@ -1,10 +0,0 @@
-export * from "./ChartsTooltip.js";
-export * from "./ChartsTooltipContainer.js";
-export { getChartsTooltipUtilityClass, chartsTooltipClasses } from "./chartsTooltipClasses.js";
-export * from "./ChartsAxisTooltipContent.js";
-export * from "./ChartsItemTooltipContent.js";
-export * from "./ChartsTooltipTable.js";
-export * from "./useItemTooltip.js";
-export * from "./useAxisTooltip.js";
-export { useMouseTracker } from "./utils.js";
-export * from "./ChartTooltip.types.js";

package/modern/ChartsTooltip/useAxisTooltip.d.ts

@@ -1,20 +0,0 @@
-import { SeriesId } from "../models/seriesType/common.js";
-import { CartesianChartSeriesType, ChartsSeriesConfig } from "../models/seriesType/config.js";
-import { ChartsLabelMarkProps } from "../ChartsLabel/index.js";
-export interface UseAxisTooltipReturnValue<SeriesT extends CartesianChartSeriesType = CartesianChartSeriesType, AxisValueT extends string | number | Date = string | number | Date> {
-  axisDirection: 'x' | 'y';
-  dataIndex: number;
-  seriesItems: SeriesItem<SeriesT>[];
-  axisValue: AxisValueT;
-  axisFormattedValue: string;
-}
-interface SeriesItem<T extends CartesianChartSeriesType> {
-  seriesId: SeriesId;
-  color: string;
-  value: ChartsSeriesConfig[T]['valueType'];
-  formattedValue: string;
-  formattedLabel: string | null;
-  markType: ChartsLabelMarkProps['type'];
-}
-export declare function useAxisTooltip(): UseAxisTooltipReturnValue | null;
-export {};

package/modern/ChartsTooltip/useAxisTooltip.js

@@ -1,88 +0,0 @@
-'use client';
-
-import { useSeries } from "../hooks/useSeries.js";
-import { useColorProcessor } from "../internals/plugins/corePlugins/useChartSeries/useColorProcessor.js";
-import { useStore } from "../internals/store/useStore.js";
-import { useSelector } from "../internals/store/useSelector.js";
-import { getLabel } from "../internals/getLabel.js";
-import { isCartesianSeriesType } from "../internals/isCartesian.js";
-import { utcFormatter } from "./utils.js";
-import { useXAxes, useXAxis, useYAxes, useYAxis } from "../hooks/useAxis.js";
-import { useZAxes } from "../hooks/useZAxis.js";
-import { selectorChartsInteractionXAxis, selectorChartsInteractionYAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
-export function useAxisTooltip() {
-  const defaultXAxis = useXAxis();
-  const defaultYAxis = useYAxis();
-  const xAxisHasData = defaultXAxis.data !== undefined && defaultXAxis.data.length !== 0;
-  const store = useStore();
-  const axisData = useSelector(store, xAxisHasData ? selectorChartsInteractionXAxis : selectorChartsInteractionYAxis);
-  const series = useSeries();
-  const {
-    xAxis
-  } = useXAxes();
-  const {
-    yAxis
-  } = useYAxes();
-  const {
-    zAxis,
-    zAxisIds
-  } = useZAxes();
-  const colorProcessors = useColorProcessor();
-  if (axisData === null) {
-    return null;
-  }
-  const {
-    index: dataIndex,
-    value: axisValue
-  } = axisData;
-  const USED_AXIS_ID = xAxisHasData ? defaultXAxis.id : defaultYAxis.id;
-  const usedAxis = xAxisHasData ? defaultXAxis : defaultYAxis;
-  const relevantSeries = Object.keys(series).filter(isCartesianSeriesType).flatMap(seriesType => {
-    const seriesOfType = series[seriesType];
-    if (!seriesOfType) {
-      return [];
-    }
-    return seriesOfType.seriesOrder.map(seriesId => {
-      const seriesToAdd = seriesOfType.series[seriesId];
-      const providedXAxisId = seriesToAdd.xAxisId;
-      const providedYAxisId = seriesToAdd.yAxisId;
-      const axisKey = xAxisHasData ? providedXAxisId : providedYAxisId;
-
-      // Test if the series uses the default axis
-      if (axisKey === undefined || axisKey === USED_AXIS_ID) {
-        const xAxisId = providedXAxisId ?? defaultXAxis.id;
-        const yAxisId = providedYAxisId ?? defaultYAxis.id;
-        const zAxisId = 'zAxisId' in seriesToAdd ? seriesToAdd.zAxisId : zAxisIds[0];
-        const color = colorProcessors[seriesType]?.(seriesToAdd, xAxis[xAxisId], yAxis[yAxisId], zAxisId ? zAxis[zAxisId] : undefined)(dataIndex) ?? '';
-        const value = seriesToAdd.data[dataIndex] ?? null;
-        const formattedValue = seriesToAdd.valueFormatter(value, {
-          dataIndex
-        });
-        const formattedLabel = getLabel(seriesToAdd.label, 'tooltip') ?? null;
-        return {
-          seriesId,
-          color,
-          value,
-          formattedValue,
-          formattedLabel,
-          markType: seriesToAdd.labelMarkType
-        };
-      }
-      return undefined;
-    });
-  }).filter(function truthy(item) {
-    return Boolean(item);
-  });
-  const axisFormatter = usedAxis.valueFormatter ?? (v => usedAxis.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString());
-  const axisFormattedValue = axisFormatter(axisValue, {
-    location: 'tooltip',
-    scale: usedAxis.scale
-  });
-  return {
-    axisDirection: xAxisHasData ? 'x' : 'y',
-    dataIndex,
-    seriesItems: relevantSeries,
-    axisValue,
-    axisFormattedValue
-  };
-}

package/modern/ChartsTooltip/useItemTooltip.d.ts

@@ -1,12 +0,0 @@
-import { ChartItemIdentifier, ChartSeriesType, ChartsSeriesConfig } from "../models/seriesType/config.js";
-import { ChartsLabelMarkProps } from "../ChartsLabel/index.js";
-export interface ItemTooltip<T extends ChartSeriesType> {
-  identifier: ChartItemIdentifier<T>;
-  color: string;
-  label: string | undefined;
-  value: ChartsSeriesConfig[T]['valueType'];
-  formattedValue: string | null;
-  markType: ChartsLabelMarkProps['type'];
-}
-export type UseItemTooltipReturnValue<T extends ChartSeriesType> = ItemTooltip<T>;
-export declare function useItemTooltip<T extends ChartSeriesType>(): UseItemTooltipReturnValue<T> | null;

package/modern/ChartsTooltip/useItemTooltip.js

@@ -1,40 +0,0 @@
-'use client';
-
-import { useSeries } from "../hooks/useSeries.js";
-import { selectorChartsInteractionItem } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
-import { useSelector } from "../internals/store/useSelector.js";
-import { useStore } from "../internals/store/useStore.js";
-import { useXAxes, useYAxes } from "../hooks/useAxis.js";
-import { useZAxes } from "../hooks/useZAxis.js";
-import { selectorChartSeriesConfig } from "../internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.js";
-export function useItemTooltip() {
-  const store = useStore();
-  const identifier = useSelector(store, selectorChartsInteractionItem);
-  const seriesConfig = useSelector(store, selectorChartSeriesConfig);
-  const series = useSeries();
-  const {
-    xAxis,
-    xAxisIds
-  } = useXAxes();
-  const {
-    yAxis,
-    yAxisIds
-  } = useYAxes();
-  const {
-    zAxis,
-    zAxisIds
-  } = useZAxes();
-  const xAxisId = series.xAxisId ?? xAxisIds[0];
-  const yAxisId = series.yAxisId ?? yAxisIds[0];
-  const zAxisId = series.zAxisId ?? zAxisIds[0];
-  if (!identifier || identifier.dataIndex === undefined) {
-    return null;
-  }
-  const itemSeries = series[identifier.type].series[identifier.seriesId];
-  const getColor = seriesConfig[itemSeries.type].colorProcessor?.(itemSeries, xAxisId && xAxis[xAxisId], yAxisId && yAxis[yAxisId], zAxisId && zAxis[zAxisId]) ?? (() => '');
-  return seriesConfig[itemSeries.type].tooltipGetter({
-    series: itemSeries,
-    getColor,
-    identifier
-  });
-}

package/modern/ChartsTooltip/utils.d.ts

@@ -1,16 +0,0 @@
-type MousePosition = {
-  x: number;
-  y: number;
-  pointerType: 'mouse' | 'touch' | 'pen';
-  height: number;
-};
-export type UseMouseTrackerReturnValue = null | MousePosition;
-/**
- * @deprecated We recommend using vanilla JS to let popper track mouse position.
- */
-export declare function useMouseTracker(): UseMouseTrackerReturnValue;
-type PointerType = Pick<MousePosition, 'height' | 'pointerType'>;
-export declare function usePointerType(): null | PointerType;
-export type TriggerOptions = 'item' | 'axis' | 'none';
-export declare function utcFormatter(v: string | number | Date): string;
-export {};

package/modern/ChartsTooltip/utils.js

@@ -1,84 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { useSvgRef } from "../hooks/index.js";
-/**
- * @deprecated We recommend using vanilla JS to let popper track mouse position.
- */
-export function useMouseTracker() {
-  const svgRef = useSvgRef();
-
-  // Use a ref to avoid rerendering on every mousemove event.
-  const [mousePosition, setMousePosition] = React.useState(null);
-  React.useEffect(() => {
-    const element = svgRef.current;
-    if (element === null) {
-      return () => {};
-    }
-    const controller = new AbortController();
-    const handleOut = event => {
-      if (event.pointerType !== 'mouse') {
-        setMousePosition(null);
-      }
-    };
-    const handleMove = event => {
-      setMousePosition({
-        x: event.clientX,
-        y: event.clientY,
-        height: event.height,
-        pointerType: event.pointerType
-      });
-    };
-    element.addEventListener('pointerdown', handleMove, {
-      signal: controller.signal
-    });
-    element.addEventListener('pointermove', handleMove, {
-      signal: controller.signal
-    });
-    element.addEventListener('pointerup', handleOut, {
-      signal: controller.signal
-    });
-    return () => {
-      // Calling `.abort()` removes ALL event listeners
-      // For more info, see https://kettanaito.com/blog/dont-sleep-on-abort-controller
-      controller.abort();
-    };
-  }, [svgRef]);
-  return mousePosition;
-}
-export function usePointerType() {
-  const svgRef = useSvgRef();
-
-  // Use a ref to avoid rerendering on every mousemove event.
-  const [pointerType, setPointerType] = React.useState(null);
-  React.useEffect(() => {
-    const element = svgRef.current;
-    if (element === null) {
-      return () => {};
-    }
-    const handleOut = event => {
-      if (event.pointerType !== 'mouse') {
-        setPointerType(null);
-      }
-    };
-    const handleEnter = event => {
-      setPointerType({
-        height: event.height,
-        pointerType: event.pointerType
-      });
-    };
-    element.addEventListener('pointerenter', handleEnter);
-    element.addEventListener('pointerup', handleOut);
-    return () => {
-      element.removeEventListener('pointerenter', handleEnter);
-      element.removeEventListener('pointerup', handleOut);
-    };
-  }, [svgRef]);
-  return pointerType;
-}
-export function utcFormatter(v) {
-  if (v instanceof Date) {
-    return v.toUTCString();
-  }
-  return v.toLocaleString();
-}

package/modern/ChartsXAxis/ChartsXAxis.d.ts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { ChartsXAxisProps } from "../models/axis.js";
-/**
- * Demos:
- *
- * - [Axis](https://mui.com/x/react-charts/axis/)
- *
- * API:
- *
- * - [ChartsXAxis API](https://mui.com/x/api/charts/charts-x-axis/)
- */
-declare function ChartsXAxis(inProps: ChartsXAxisProps): React.JSX.Element | null;
-declare namespace ChartsXAxis {
-  var propTypes: any;
-}
-export { ChartsXAxis };