@mui/x-charts 8.27.0 → 9.0.0-alpha.1

package/esm/ChartsTooltip/useAxisTooltip.d.ts

@@ -1,42 +0,0 @@
-import { type SeriesId } from "../models/seriesType/common.js";
-import { type CartesianChartSeriesType, type ChartsSeriesConfig, type PolarChartSeriesType } from "../models/seriesType/config.js";
-import { type ComputedAxis, type PolarAxisDefaultized, type AxisId } from "../models/axis.js";
-import { type ChartsLabelMarkProps } from "../ChartsLabel/index.js";
-export interface UseAxisTooltipReturnValue<SeriesT extends CartesianChartSeriesType | PolarChartSeriesType = CartesianChartSeriesType | PolarChartSeriesType, AxisValueT extends string | number | Date = string | number | Date> {
-  axisDirection: SeriesT extends CartesianChartSeriesType ? 'x' | 'y' : 'rotation' | 'radius';
-  mainAxis: SeriesT extends CartesianChartSeriesType ? ComputedAxis : PolarAxisDefaultized;
-  axisId: AxisId;
-  axisValue: AxisValueT;
-  axisFormattedValue: string;
-  dataIndex: number;
-  seriesItems: SeriesItem<SeriesT>[];
-}
-export interface UseAxisTooltipParams {
-  /**
-   * If `true`, the hook returns an array with an object per active axis.
-   */
-  multipleAxes?: boolean;
-  /**
-   * The axis directions to consider.
-   * If not defined, all directions are considered
-   */
-  directions?: ('x' | 'y' | 'rotation')[];
-}
-interface SeriesItem<T extends CartesianChartSeriesType | PolarChartSeriesType> {
-  seriesId: SeriesId;
-  color: string;
-  value: ChartsSeriesConfig[T]['valueType'];
-  formattedValue: string;
-  formattedLabel: string | null;
-  markType: ChartsLabelMarkProps['type'];
-}
-/**
- * @deprecated Use `useAxesTooltip` instead.
- */
-export declare function useAxisTooltip(params: UseAxisTooltipParams & {
-  multipleAxes: true;
-}): UseAxisTooltipReturnValue[] | null;
-export declare function useAxisTooltip(params?: UseAxisTooltipParams & {
-  multipleAxes?: false;
-}): UseAxisTooltipReturnValue | null;
-export {};

package/esm/ChartsTooltip/useAxisTooltip.js

@@ -1,176 +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 { getLabel } from "../internals/getLabel.js";
-import { isCartesianSeriesType } from "../internals/isCartesian.js";
-import { utcFormatter } from "./utils.js";
-import { useRotationAxes, useRotationAxis, useXAxes, useXAxis, useYAxes, useYAxis } from "../hooks/useAxis.js";
-import { useZAxes } from "../hooks/useZAxis.js";
-import { selectorChartsInteractionTooltipXAxes, selectorChartsInteractionTooltipYAxes } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
-import { selectorChartsInteractionTooltipRotationAxes } from "../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.js";
-import { isPolarSeriesType } from "../internals/isPolar.js";
-function defaultAxisTooltipConfig(axis, dataIndex, axisDirection) {
-  const axisValue = axis.data?.[dataIndex] ?? null;
-  const axisFormatter = axis.valueFormatter ?? (v => axis.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString());
-  const axisFormattedValue = axisFormatter(axisValue, {
-    location: 'tooltip',
-    scale: axis.scale
-  });
-  return {
-    axisDirection,
-    axisId: axis.id,
-    mainAxis: axis,
-    dataIndex,
-    axisValue,
-    axisFormattedValue,
-    seriesItems: []
-  };
-}
-
-/**
- * @deprecated Use `useAxesTooltip` instead.
- */
-
-export function useAxisTooltip(params = {}) {
-  const {
-    multipleAxes,
-    directions
-  } = params;
-  const defaultXAxis = useXAxis();
-  const defaultYAxis = useYAxis();
-  const defaultRotationAxis = useRotationAxis();
-  const store = useStore();
-  const tooltipXAxes = store.use(selectorChartsInteractionTooltipXAxes);
-  const tooltipYAxes = store.use(selectorChartsInteractionTooltipYAxes);
-  const tooltipRotationAxes = store.use(selectorChartsInteractionTooltipRotationAxes);
-  const series = useSeries();
-  const {
-    xAxis
-  } = useXAxes();
-  const {
-    yAxis
-  } = useYAxes();
-  const {
-    zAxis,
-    zAxisIds
-  } = useZAxes();
-  const {
-    rotationAxis
-  } = useRotationAxes();
-  const colorProcessors = useColorProcessor();
-  if (tooltipXAxes.length === 0 && tooltipYAxes.length === 0 && tooltipRotationAxes.length === 0) {
-    return null;
-  }
-  const tooltipAxes = [];
-  if (directions === undefined || directions.includes('x')) {
-    tooltipXAxes.forEach(({
-      axisId,
-      dataIndex
-    }) => {
-      if (!multipleAxes && tooltipAxes.length > 1) {
-        return;
-      }
-      tooltipAxes.push(defaultAxisTooltipConfig(xAxis[axisId], dataIndex, 'x'));
-    });
-  }
-  if (directions === undefined || directions.includes('y')) {
-    tooltipYAxes.forEach(({
-      axisId,
-      dataIndex
-    }) => {
-      if (!multipleAxes && tooltipAxes.length > 1) {
-        return;
-      }
-      tooltipAxes.push(defaultAxisTooltipConfig(yAxis[axisId], dataIndex, 'y'));
-    });
-  }
-  if (directions === undefined || directions.includes('rotation')) {
-    tooltipRotationAxes.forEach(({
-      axisId,
-      dataIndex
-    }) => {
-      if (!multipleAxes && tooltipAxes.length > 1) {
-        return;
-      }
-      tooltipAxes.push(defaultAxisTooltipConfig(rotationAxis[axisId], dataIndex, 'rotation'));
-    });
-  }
-  Object.keys(series).filter(isCartesianSeriesType).forEach(seriesType => {
-    const seriesOfType = series[seriesType];
-    if (!seriesOfType) {
-      return [];
-    }
-    return seriesOfType.seriesOrder.forEach(seriesId => {
-      const seriesToAdd = seriesOfType.series[seriesId];
-      const providedXAxisId = seriesToAdd.xAxisId ?? defaultXAxis.id;
-      const providedYAxisId = seriesToAdd.yAxisId ?? defaultYAxis.id;
-      const tooltipItemIndex = tooltipAxes.findIndex(({
-        axisDirection,
-        axisId
-      }) => axisDirection === 'x' && axisId === providedXAxisId || axisDirection === 'y' && axisId === providedYAxisId);
-      // Test if the series uses the default axis
-      if (tooltipItemIndex >= 0) {
-        const zAxisId = 'zAxisId' in seriesToAdd ? seriesToAdd.zAxisId : zAxisIds[0];
-        const {
-          dataIndex
-        } = tooltipAxes[tooltipItemIndex];
-        const color = colorProcessors[seriesType]?.(seriesToAdd, xAxis[providedXAxisId], yAxis[providedYAxisId], zAxisId ? zAxis[zAxisId] : undefined)(dataIndex) ?? '';
-        const value = seriesToAdd.data[dataIndex] ?? null;
-        const formattedValue = seriesToAdd.valueFormatter(value, {
-          dataIndex
-        });
-        const formattedLabel = getLabel(seriesToAdd.label, 'tooltip') ?? null;
-        tooltipAxes[tooltipItemIndex].seriesItems.push({
-          seriesId,
-          color,
-          value,
-          formattedValue,
-          formattedLabel,
-          markType: seriesToAdd.labelMarkType
-        });
-      }
-    });
-  });
-  Object.keys(series).filter(isPolarSeriesType).forEach(seriesType => {
-    const seriesOfType = series[seriesType];
-    if (!seriesOfType) {
-      return [];
-    }
-    return seriesOfType.seriesOrder.forEach(seriesId => {
-      const seriesToAdd = seriesOfType.series[seriesId];
-      const providedRotationAxisId =
-      // @ts-expect-error Should be fixed when we introduce a polar series with a rotationAxisId
-      seriesToAdd.rotationAxisId ?? defaultRotationAxis?.id;
-      const tooltipItemIndex = tooltipAxes.findIndex(({
-        axisDirection,
-        axisId
-      }) => axisDirection === 'rotation' && axisId === providedRotationAxisId);
-      // Test if the series uses the default axis
-      if (tooltipItemIndex >= 0) {
-        const {
-          dataIndex
-        } = tooltipAxes[tooltipItemIndex];
-        const color = colorProcessors[seriesType]?.(seriesToAdd)(dataIndex) ?? '';
-        const value = seriesToAdd.data[dataIndex] ?? null;
-        const formattedValue = seriesToAdd.valueFormatter(value, {
-          dataIndex
-        });
-        const formattedLabel = getLabel(seriesToAdd.label, 'tooltip') ?? null;
-        tooltipAxes[tooltipItemIndex].seriesItems.push({
-          seriesId,
-          color,
-          value,
-          formattedValue,
-          formattedLabel,
-          markType: seriesToAdd.labelMarkType
-        });
-      }
-    });
-  });
-  if (!multipleAxes) {
-    return tooltipAxes.length === 0 ? tooltipAxes[0] : null;
-  }
-  return tooltipAxes;
-}

package/esm/internals/getBarDimensions.js

@@ -1,55 +0,0 @@
-import { findMinMax } from "./findMinMax.js";
-import { getBandSize } from "./getBandSize.js";
-function shouldInvertStartCoordinate(verticalLayout, baseValue, reverse) {
-  const isVerticalAndPositive = verticalLayout && baseValue > 0;
-  const isHorizontalAndNegative = !verticalLayout && baseValue < 0;
-  const invertStartCoordinate = isVerticalAndPositive || isHorizontalAndNegative;
-  return reverse ? !invertStartCoordinate : invertStartCoordinate;
-}
-export function getBarDimensions(params) {
-  const {
-    verticalLayout,
-    xAxisConfig,
-    yAxisConfig,
-    series,
-    dataIndex,
-    numberOfGroups,
-    groupIndex
-  } = params;
-  const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
-  const reverse = (verticalLayout ? yAxisConfig.reverse : xAxisConfig.reverse) ?? false;
-  const {
-    barWidth,
-    offset
-  } = getBandSize(baseScaleConfig.scale.bandwidth(), numberOfGroups, baseScaleConfig.barGapRatio);
-  const barOffset = groupIndex * (barWidth + offset);
-  const xScale = xAxisConfig.scale;
-  const yScale = yAxisConfig.scale;
-  const baseValue = baseScaleConfig.data[dataIndex];
-  const seriesValue = series.data[dataIndex];
-  if (seriesValue == null) {
-    return null;
-  }
-  const values = series.visibleStackedData[dataIndex];
-  const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
-  const [minValueCoord, maxValueCoord] = findMinMax(valueCoordinates).map(v => Math.round(v));
-  let barSize = 0;
-  if (seriesValue !== 0) {
-    if (!series.hidden) {
-      barSize = Math.max(series.minBarSize, maxValueCoord - minValueCoord);
-    }
-  }
-  const shouldInvert = shouldInvertStartCoordinate(verticalLayout, seriesValue, reverse);
-  let startCoordinate = 0;
-  if (shouldInvert) {
-    startCoordinate = maxValueCoord - barSize;
-  } else {
-    startCoordinate = minValueCoord;
-  }
-  return {
-    x: verticalLayout ? xScale(baseValue) + barOffset : startCoordinate,
-    y: verticalLayout ? startCoordinate : yScale(baseValue) + barOffset,
-    height: verticalLayout ? barSize : barWidth,
-    width: verticalLayout ? barWidth : barSize
-  };
-}

package/esm/internals/getSVGPoint.d.ts

@@ -1,6 +0,0 @@
-/**
- * Transform mouse event position to coordinates inside the SVG.
- * @param svg The SVG element
- * @param event The mouseEvent to transform
- */
-export declare function getSVGPoint(svg: SVGSVGElement, event: Pick<MouseEvent, 'clientX' | 'clientY'>): DOMPoint;

package/esm/internals/getSVGPoint.js

@@ -1,11 +0,0 @@
-/**
- * Transform mouse event position to coordinates inside the SVG.
- * @param svg The SVG element
- * @param event The mouseEvent to transform
- */
-export function getSVGPoint(svg, event) {
-  const pt = svg.createSVGPoint();
-  pt.x = event.clientX;
-  pt.y = event.clientY;
-  return pt.matrixTransform(svg.getScreenCTM().inverse());
-}

package/esm/internals/plugins/featurePlugins/useChartVisibilityManager/isIdentifierVisible.d.ts

@@ -1,4 +0,0 @@
-import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
-import type { ChartSeriesConfig } from "../../models/index.js";
-import type { VisibilityIdentifier, VisibilityMap } from "./useChartVisibilityManager.types.js";
-export declare const isIdentifierVisible: (visibilityMap: VisibilityMap, identifier: VisibilityIdentifier, seriesConfig: ChartSeriesConfig<ChartSeriesType>) => boolean;

package/esm/internals/plugins/featurePlugins/useChartVisibilityManager/isIdentifierVisible.js

@@ -1,5 +0,0 @@
-import { serializeIdentifier } from "../../corePlugins/useChartSeries/serializeIdentifier.js";
-export const isIdentifierVisible = (visibilityMap, identifier, seriesConfig) => {
-  const uniqueId = serializeIdentifier(seriesConfig, identifier);
-  return !visibilityMap.has(uniqueId);
-};

package/esm/internals/plugins/models/seriesConfig/getItemAtPosition.types.d.ts

@@ -1,8 +0,0 @@
-import type { SeriesItemIdentifier } from "../../../../models/seriesType/index.js";
-import type { ChartState } from "../chart.js";
-import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
-import type { ChartSeriesTypeRequiredPlugins } from "./seriesConfig.types.js";
-export type GetItemAtPosition<TSeriesType extends ChartSeriesType> = (state: ChartState<ChartSeriesTypeRequiredPlugins<TSeriesType>>, point: {
-  x: number;
-  y: number;
-}) => SeriesItemIdentifier<TSeriesType> | undefined;

package/esm/internals/plugins/models/seriesConfig/getSeriesWithDefaultValues.types.d.ts

@@ -1,3 +0,0 @@
-import type { ChartSeries, ChartSeriesType } from "../../../../models/seriesType/config.js";
-import type { AllSeriesType } from "../../../../models/seriesType/index.js";
-export type GetSeriesWithDefaultValues<T extends ChartSeriesType> = (series: AllSeriesType<T>, seriesIndex: number, colors: readonly string[]) => ChartSeries<T>;

package/esm/internals/plugins/models/seriesConfig/identifierSerializer.types.d.ts

@@ -1,2 +0,0 @@
-import type { ChartSeriesType, ChartsSeriesConfig } from "../../../../models/seriesType/config.js";
-export type IdentifierSerializer<TSeriesType extends ChartSeriesType> = (identifier: ChartsSeriesConfig[TSeriesType]['itemIdentifier']) => string;

package/esm/internals/plugins/models/seriesConfig/legendGetter.types.d.ts

@@ -1,4 +0,0 @@
-import type { LegendItemParams } from "../../../../ChartsLegend/index.js";
-import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
-import type { SeriesProcessorResult } from "./seriesProcessor.types.js";
-export type LegendGetter<T extends ChartSeriesType> = (series: SeriesProcessorResult<T>) => LegendItemParams[];

package/internals/getBarDimensions.js

@@ -1,61 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getBarDimensions = getBarDimensions;
-var _findMinMax = require("./findMinMax");
-var _getBandSize = require("./getBandSize");
-function shouldInvertStartCoordinate(verticalLayout, baseValue, reverse) {
-  const isVerticalAndPositive = verticalLayout && baseValue > 0;
-  const isHorizontalAndNegative = !verticalLayout && baseValue < 0;
-  const invertStartCoordinate = isVerticalAndPositive || isHorizontalAndNegative;
-  return reverse ? !invertStartCoordinate : invertStartCoordinate;
-}
-function getBarDimensions(params) {
-  const {
-    verticalLayout,
-    xAxisConfig,
-    yAxisConfig,
-    series,
-    dataIndex,
-    numberOfGroups,
-    groupIndex
-  } = params;
-  const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
-  const reverse = (verticalLayout ? yAxisConfig.reverse : xAxisConfig.reverse) ?? false;
-  const {
-    barWidth,
-    offset
-  } = (0, _getBandSize.getBandSize)(baseScaleConfig.scale.bandwidth(), numberOfGroups, baseScaleConfig.barGapRatio);
-  const barOffset = groupIndex * (barWidth + offset);
-  const xScale = xAxisConfig.scale;
-  const yScale = yAxisConfig.scale;
-  const baseValue = baseScaleConfig.data[dataIndex];
-  const seriesValue = series.data[dataIndex];
-  if (seriesValue == null) {
-    return null;
-  }
-  const values = series.visibleStackedData[dataIndex];
-  const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
-  const [minValueCoord, maxValueCoord] = (0, _findMinMax.findMinMax)(valueCoordinates).map(v => Math.round(v));
-  let barSize = 0;
-  if (seriesValue !== 0) {
-    if (!series.hidden) {
-      barSize = Math.max(series.minBarSize, maxValueCoord - minValueCoord);
-    }
-  }
-  const shouldInvert = shouldInvertStartCoordinate(verticalLayout, seriesValue, reverse);
-  let startCoordinate = 0;
-  if (shouldInvert) {
-    startCoordinate = maxValueCoord - barSize;
-  } else {
-    startCoordinate = minValueCoord;
-  }
-  return {
-    x: verticalLayout ? xScale(baseValue) + barOffset : startCoordinate,
-    y: verticalLayout ? startCoordinate : yScale(baseValue) + barOffset,
-    height: verticalLayout ? barSize : barWidth,
-    width: verticalLayout ? barWidth : barSize
-  };
-}

package/internals/getSVGPoint.d.ts

@@ -1,6 +0,0 @@
-/**
- * Transform mouse event position to coordinates inside the SVG.
- * @param svg The SVG element
- * @param event The mouseEvent to transform
- */
-export declare function getSVGPoint(svg: SVGSVGElement, event: Pick<MouseEvent, 'clientX' | 'clientY'>): DOMPoint;

package/internals/getSVGPoint.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getSVGPoint = getSVGPoint;
-/**
- * Transform mouse event position to coordinates inside the SVG.
- * @param svg The SVG element
- * @param event The mouseEvent to transform
- */
-function getSVGPoint(svg, event) {
-  const pt = svg.createSVGPoint();
-  pt.x = event.clientX;
-  pt.y = event.clientY;
-  return pt.matrixTransform(svg.getScreenCTM().inverse());
-}

package/internals/plugins/featurePlugins/useChartVisibilityManager/isIdentifierVisible.d.ts

@@ -1,4 +0,0 @@
-import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
-import type { ChartSeriesConfig } from "../../models/index.js";
-import type { VisibilityIdentifier, VisibilityMap } from "./useChartVisibilityManager.types.js";
-export declare const isIdentifierVisible: (visibilityMap: VisibilityMap, identifier: VisibilityIdentifier, seriesConfig: ChartSeriesConfig<ChartSeriesType>) => boolean;

package/internals/plugins/featurePlugins/useChartVisibilityManager/isIdentifierVisible.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isIdentifierVisible = void 0;
-var _serializeIdentifier = require("../../corePlugins/useChartSeries/serializeIdentifier");
-const isIdentifierVisible = (visibilityMap, identifier, seriesConfig) => {
-  const uniqueId = (0, _serializeIdentifier.serializeIdentifier)(seriesConfig, identifier);
-  return !visibilityMap.has(uniqueId);
-};
-exports.isIdentifierVisible = isIdentifierVisible;

package/internals/plugins/models/seriesConfig/getItemAtPosition.types.d.ts

@@ -1,8 +0,0 @@
-import type { SeriesItemIdentifier } from "../../../../models/seriesType/index.js";
-import type { ChartState } from "../chart.js";
-import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
-import type { ChartSeriesTypeRequiredPlugins } from "./seriesConfig.types.js";
-export type GetItemAtPosition<TSeriesType extends ChartSeriesType> = (state: ChartState<ChartSeriesTypeRequiredPlugins<TSeriesType>>, point: {
-  x: number;
-  y: number;
-}) => SeriesItemIdentifier<TSeriesType> | undefined;

package/internals/plugins/models/seriesConfig/getSeriesWithDefaultValues.types.d.ts

@@ -1,3 +0,0 @@
-import type { ChartSeries, ChartSeriesType } from "../../../../models/seriesType/config.js";
-import type { AllSeriesType } from "../../../../models/seriesType/index.js";
-export type GetSeriesWithDefaultValues<T extends ChartSeriesType> = (series: AllSeriesType<T>, seriesIndex: number, colors: readonly string[]) => ChartSeries<T>;

package/internals/plugins/models/seriesConfig/identifierSerializer.types.d.ts

@@ -1,2 +0,0 @@
-import type { ChartSeriesType, ChartsSeriesConfig } from "../../../../models/seriesType/config.js";
-export type IdentifierSerializer<TSeriesType extends ChartSeriesType> = (identifier: ChartsSeriesConfig[TSeriesType]['itemIdentifier']) => string;

package/internals/plugins/models/seriesConfig/legendGetter.types.d.ts

@@ -1,4 +0,0 @@
-import type { LegendItemParams } from "../../../../ChartsLegend/index.js";
-import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
-import type { SeriesProcessorResult } from "./seriesProcessor.types.js";
-export type LegendGetter<T extends ChartSeriesType> = (series: SeriesProcessorResult<T>) => LegendItemParams[];