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

package/modern/BarChart/BarPlot.js

@@ -1,327 +0,0 @@
-'use client';
-
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { useTransition } from '@react-spring/web';
-import { styled } from '@mui/material/styles';
-import { BarElement, barElementClasses } from "./BarElement.js";
-import getColor from "./seriesConfig/getColor.js";
-import { useChartId, useDrawingArea, useXAxes, useYAxes } from "../hooks/index.js";
-import { BarClipPath } from "./BarClipPath.js";
-import { BarLabelPlot } from "./BarLabel/BarLabelPlot.js";
-import { checkScaleErrors } from "./checkScaleErrors.js";
-import { useBarSeriesContext } from "../hooks/useBarSeries.js";
-import { useSkipAnimation } from "../context/AnimationProvider/index.js";
-import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.js";
-
-/**
- * Solution of the equations
- * W = barWidth * N + offset * (N-1)
- * offset / (offset + barWidth) = r
- * @param bandWidth The width available to place bars.
- * @param numberOfGroups The number of bars to place in that space.
- * @param gapRatio The ratio of the gap between bars over the bar width.
- * @returns The bar width and the offset between bars.
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function getBandSize({
-  bandWidth: W,
-  numberOfGroups: N,
-  gapRatio: r
-}) {
-  if (r === 0) {
-    return {
-      barWidth: W / N,
-      offset: 0
-    };
-  }
-  const barWidth = W / (N + (N - 1) * r);
-  const offset = r * barWidth;
-  return {
-    barWidth,
-    offset
-  };
-}
-const useAggregatedData = () => {
-  const seriesData = useBarSeriesContext() ?? {
-    series: {},
-    stackingGroups: [],
-    seriesOrder: []
-  };
-  const drawingArea = useDrawingArea();
-  const chartId = useChartId();
-  const {
-    series,
-    stackingGroups
-  } = seriesData;
-  const {
-    xAxis,
-    xAxisIds
-  } = useXAxes();
-  const {
-    yAxis,
-    yAxisIds
-  } = useYAxes();
-  const defaultXAxisId = xAxisIds[0];
-  const defaultYAxisId = yAxisIds[0];
-  const masks = {};
-  const data = stackingGroups.flatMap(({
-    ids: groupIds
-  }, groupIndex) => {
-    const xMin = drawingArea.left;
-    const xMax = drawingArea.left + drawingArea.width;
-    const yMin = drawingArea.top;
-    const yMax = drawingArea.top + drawingArea.height;
-    return groupIds.flatMap(seriesId => {
-      const xAxisId = series[seriesId].xAxisId ?? defaultXAxisId;
-      const yAxisId = series[seriesId].yAxisId ?? defaultYAxisId;
-      const xAxisConfig = xAxis[xAxisId];
-      const yAxisConfig = yAxis[yAxisId];
-      const verticalLayout = series[seriesId].layout === 'vertical';
-      checkScaleErrors(verticalLayout, seriesId, series[seriesId], xAxisId, xAxis, yAxisId, yAxis);
-      const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
-      const xScale = xAxisConfig.scale;
-      const yScale = yAxisConfig.scale;
-      const colorGetter = getColor(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
-      const bandWidth = baseScaleConfig.scale.bandwidth();
-      const {
-        barWidth,
-        offset
-      } = getBandSize({
-        bandWidth,
-        numberOfGroups: stackingGroups.length,
-        gapRatio: baseScaleConfig.barGapRatio
-      });
-      const barOffset = groupIndex * (barWidth + offset);
-      const {
-        stackedData,
-        data: currentSeriesData,
-        layout
-      } = series[seriesId];
-      return baseScaleConfig.data.map((baseValue, dataIndex) => {
-        const values = stackedData[dataIndex];
-        const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
-        const minValueCoord = Math.round(Math.min(...valueCoordinates));
-        const maxValueCoord = Math.round(Math.max(...valueCoordinates));
-        const stackId = series[seriesId].stack;
-        const result = {
-          seriesId,
-          dataIndex,
-          layout,
-          x: verticalLayout ? xScale(baseValue) + barOffset : minValueCoord,
-          y: verticalLayout ? minValueCoord : yScale(baseValue) + barOffset,
-          xOrigin: xScale(0),
-          yOrigin: yScale(0),
-          height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,
-          width: verticalLayout ? barWidth : maxValueCoord - minValueCoord,
-          color: colorGetter(dataIndex),
-          value: currentSeriesData[dataIndex],
-          maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
-        };
-        if (result.x > xMax || result.x + result.width < xMin || result.y > yMax || result.y + result.height < yMin) {
-          return null;
-        }
-        if (!masks[result.maskId]) {
-          masks[result.maskId] = {
-            id: result.maskId,
-            width: 0,
-            height: 0,
-            hasNegative: false,
-            hasPositive: false,
-            layout: result.layout,
-            xOrigin: xScale(0),
-            yOrigin: yScale(0),
-            x: 0,
-            y: 0
-          };
-        }
-        const mask = masks[result.maskId];
-        mask.width = result.layout === 'vertical' ? result.width : mask.width + result.width;
-        mask.height = result.layout === 'vertical' ? mask.height + result.height : result.height;
-        mask.x = Math.min(mask.x === 0 ? Infinity : mask.x, result.x);
-        mask.y = Math.min(mask.y === 0 ? Infinity : mask.y, result.y);
-        mask.hasNegative = mask.hasNegative || (result.value ?? 0) < 0;
-        mask.hasPositive = mask.hasPositive || (result.value ?? 0) > 0;
-        return result;
-      }).filter(rectangle => rectangle !== null);
-    });
-  });
-  return {
-    completedData: data,
-    masksData: Object.values(masks)
-  };
-};
-const leaveStyle = ({
-  layout,
-  yOrigin,
-  x,
-  width,
-  y,
-  xOrigin,
-  height
-}) => _extends({}, layout === 'vertical' ? {
-  y: yOrigin,
-  x,
-  height: 0,
-  width
-} : {
-  y,
-  x: xOrigin,
-  height,
-  width: 0
-});
-const enterStyle = ({
-  x,
-  width,
-  y,
-  height
-}) => ({
-  y,
-  x,
-  height,
-  width
-});
-const BarPlotRoot = styled('g', {
-  name: 'MuiBarPlot',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.root
-})({
-  [`& .${barElementClasses.root}`]: {
-    transition: 'opacity 0.2s ease-in, fill 0.2s ease-in'
-  }
-});
-
-/**
- * Demos:
- *
- * - [Bars](https://mui.com/x/react-charts/bars/)
- * - [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
- * - [Stacking](https://mui.com/x/react-charts/stacking/)
- *
- * API:
- *
- * - [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
- */
-function BarPlot(props) {
-  const {
-    completedData,
-    masksData
-  } = useAggregatedData();
-  const {
-      skipAnimation: inSkipAnimation,
-      onItemClick,
-      borderRadius,
-      barLabel
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const isZoomInteracting = useInternalIsZoomInteracting();
-  const skipAnimation = useSkipAnimation(isZoomInteracting || inSkipAnimation);
-  const withoutBorderRadius = !borderRadius || borderRadius <= 0;
-  const transition = useTransition(completedData, {
-    keys: bar => `${bar.seriesId}-${bar.dataIndex}`,
-    from: skipAnimation ? undefined : leaveStyle,
-    leave: leaveStyle,
-    enter: enterStyle,
-    update: enterStyle,
-    immediate: skipAnimation
-  });
-  const maskTransition = useTransition(withoutBorderRadius ? [] : masksData, {
-    keys: v => v.id,
-    from: skipAnimation ? undefined : leaveStyle,
-    leave: leaveStyle,
-    enter: enterStyle,
-    update: enterStyle,
-    immediate: skipAnimation
-  });
-  return /*#__PURE__*/_jsxs(BarPlotRoot, {
-    children: [!withoutBorderRadius && maskTransition((style, {
-      id,
-      hasPositive,
-      hasNegative,
-      layout
-    }) => {
-      return /*#__PURE__*/_jsx(BarClipPath, {
-        maskId: id,
-        borderRadius: borderRadius,
-        hasNegative: hasNegative,
-        hasPositive: hasPositive,
-        layout: layout,
-        style: style
-      });
-    }), transition((style, {
-      seriesId,
-      dataIndex,
-      color,
-      maskId
-    }) => {
-      const barElement = /*#__PURE__*/_jsx(BarElement, _extends({
-        id: seriesId,
-        dataIndex: dataIndex,
-        color: color
-      }, other, {
-        onClick: onItemClick && (event => {
-          onItemClick(event, {
-            type: 'bar',
-            seriesId,
-            dataIndex
-          });
-        }),
-        style: style
-      }));
-      if (withoutBorderRadius) {
-        return barElement;
-      }
-      return /*#__PURE__*/_jsx("g", {
-        clipPath: `url(#${maskId})`,
-        children: barElement
-      });
-    }), barLabel && /*#__PURE__*/_jsx(BarLabelPlot, _extends({
-      bars: completedData,
-      skipAnimation: skipAnimation,
-      barLabel: barLabel
-    }, other))]
-  });
-}
-process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * If provided, the function will be used to format the label of the bar.
-   * It can be set to 'value' to display the current value.
-   * @param {BarItem} item The item to format.
-   * @param {BarLabelContext} context data about the bar.
-   * @returns {string} The formatted label.
-   */
-  barLabel: PropTypes.oneOfType([PropTypes.oneOf(['value']), PropTypes.func]),
-  /**
-   * Defines the border radius of the bar element.
-   */
-  borderRadius: PropTypes.number,
-  /**
-   * Callback fired when a bar item is clicked.
-   * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
-   * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
-   */
-  onItemClick: PropTypes.func,
-  /**
-   * If `true`, animations are skipped.
-   * @default undefined
-   */
-  skipAnimation: PropTypes.bool,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps: PropTypes.object,
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots: PropTypes.object
-} : void 0;
-export { BarPlot };

package/modern/BarChart/checkScaleErrors.d.ts

@@ -1,10 +0,0 @@
-import { AxisDefaultized, AxisId } from "../models/axis.js";
-import { DefaultizedBarSeriesType } from "../models/seriesType/bar.js";
-import { SeriesId } from "../models/seriesType/common.js";
-export declare function checkScaleErrors(verticalLayout: boolean, seriesId: SeriesId, series: DefaultizedBarSeriesType & {
-  stackedData: [number, number][];
-}, xAxisId: AxisId, xAxis: {
-  [axisId: AxisId]: AxisDefaultized;
-}, yAxisId: AxisId, yAxis: {
-  [axisId: AxisId]: AxisDefaultized;
-}): void;

package/modern/BarChart/checkScaleErrors.js

@@ -1,33 +0,0 @@
-import { warnOnce } from '@mui/x-internals/warning';
-import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
-import { isBandScaleConfig, isPointScaleConfig } from "../models/axis.js";
-const getAxisMessage = (axisDirection, axisId) => {
-  const axisName = `${axisDirection}-axis`;
-  const axisIdName = `${axisDirection}Axis`;
-  const axisDefaultKey = axisDirection === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
-  return axisId === axisDefaultKey ? `The first \`${axisIdName}\`` : `The ${axisName} with id "${axisId}"`;
-};
-export function checkScaleErrors(verticalLayout, seriesId, series, xAxisId, xAxis, yAxisId, yAxis) {
-  const xAxisConfig = xAxis[xAxisId];
-  const yAxisConfig = yAxis[yAxisId];
-  const discreteAxisConfig = verticalLayout ? xAxisConfig : yAxisConfig;
-  const continuousAxisConfig = verticalLayout ? yAxisConfig : xAxisConfig;
-  const discreteAxisId = verticalLayout ? xAxisId : yAxisId;
-  const continuousAxisId = verticalLayout ? yAxisId : xAxisId;
-  const discreteAxisDirection = verticalLayout ? 'x' : 'y';
-  const continuousAxisDirection = verticalLayout ? 'y' : 'x';
-  if (!isBandScaleConfig(discreteAxisConfig)) {
-    throw new Error(`MUI X: ${getAxisMessage(discreteAxisDirection, discreteAxisId)} should be of type "band" to display the bar series of id "${seriesId}".`);
-  }
-  if (discreteAxisConfig.data === undefined) {
-    throw new Error(`MUI X: ${getAxisMessage(discreteAxisDirection, discreteAxisId)} should have data property.`);
-  }
-  if (isBandScaleConfig(continuousAxisConfig) || isPointScaleConfig(continuousAxisConfig)) {
-    throw new Error(`MUI X: ${getAxisMessage(continuousAxisDirection, continuousAxisId)} should be a continuous type to display the bar series of id "${seriesId}".`);
-  }
-  if (process.env.NODE_ENV !== 'production') {
-    if (discreteAxisConfig.data.length < series.stackedData.length) {
-      warnOnce([`MUI X: ${getAxisMessage(discreteAxisDirection, discreteAxisId)} has less data (${discreteAxisConfig.data.length} values) than the bar series of id "${seriesId}" (${series.stackedData.length} values).`, 'The axis data should have at least the same length than the series using it.'], 'error');
-    }
-  }
-}

package/modern/BarChart/getRadius.d.ts

@@ -1,20 +0,0 @@
-type GetRadiusData = {
-  hasNegative: boolean;
-  hasPositive: boolean;
-  borderRadius?: number;
-  layout?: 'vertical' | 'horizontal';
-};
-type GetRadiusCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
-/**
- * Returns if the corner should have a radius or not based on the layout and the data.
- * @param {GetRadiusCorner} corner The corner to check.
- * @param {GetRadiusData} cornerData The data for the corner.
- * @returns {number} The radius for the corner.
- */
-export declare const getRadius: (corner: GetRadiusCorner, {
-  hasNegative,
-  hasPositive,
-  borderRadius,
-  layout
-}: GetRadiusData) => number;
-export {};

package/modern/BarChart/getRadius.js

@@ -1,30 +0,0 @@
-/**
- * Returns if the corner should have a radius or not based on the layout and the data.
- * @param {GetRadiusCorner} corner The corner to check.
- * @param {GetRadiusData} cornerData The data for the corner.
- * @returns {number} The radius for the corner.
- */
-export const getRadius = (corner, {
-  hasNegative,
-  hasPositive,
-  borderRadius,
-  layout
-}) => {
-  if (!borderRadius) {
-    return 0;
-  }
-  const isVertical = layout === 'vertical';
-  if (corner === 'top-left' && (isVertical && hasPositive || !isVertical && hasNegative)) {
-    return borderRadius;
-  }
-  if (corner === 'top-right' && (isVertical && hasPositive || !isVertical && hasPositive)) {
-    return borderRadius;
-  }
-  if (corner === 'bottom-right' && (isVertical && hasNegative || !isVertical && hasPositive)) {
-    return borderRadius;
-  }
-  if (corner === 'bottom-left' && (isVertical && hasNegative || !isVertical && hasNegative)) {
-    return borderRadius;
-  }
-  return 0;
-};

package/modern/BarChart/index.d.ts

@@ -1,4 +0,0 @@
-export * from "./BarChart.js";
-export * from "./BarPlot.js";
-export * from "./BarElement.js";
-export * from "./BarLabel/index.js";

package/modern/BarChart/index.js

@@ -1,4 +0,0 @@
-export * from "./BarChart.js";
-export * from "./BarPlot.js";
-export * from "./BarElement.js";
-export * from "./BarLabel/index.js";

package/modern/BarChart/seriesConfig/extremums.d.ts

@@ -1,3 +0,0 @@
-import { CartesianExtremumGetter } from "../../internals/plugins/models/seriesConfig/index.js";
-export declare const getExtremumX: CartesianExtremumGetter<'bar'>;
-export declare const getExtremumY: CartesianExtremumGetter<'bar'>;

package/modern/BarChart/seriesConfig/extremums.js

@@ -1,75 +0,0 @@
-const createResult = (data, direction) => {
-  if (direction === 'x') {
-    return {
-      x: data,
-      y: null
-    };
-  }
-  return {
-    x: null,
-    y: data
-  };
-};
-const getBaseExtremum = params => {
-  const {
-    axis,
-    getFilters,
-    isDefaultAxis
-  } = params;
-  const filter = getFilters?.({
-    currentAxisId: axis.id,
-    isDefaultAxis
-  });
-  const data = filter ? axis.data?.filter((_, i) => filter({
-    x: null,
-    y: null
-  }, i)) : axis.data;
-  const minX = Math.min(...(data ?? []));
-  const maxX = Math.max(...(data ?? []));
-  return [minX, maxX];
-};
-const getValueExtremum = direction => params => {
-  const {
-    series,
-    axis,
-    getFilters,
-    isDefaultAxis
-  } = params;
-  return Object.keys(series).filter(seriesId => {
-    const axisId = direction === 'x' ? series[seriesId].xAxisId : series[seriesId].yAxisId;
-    return axisId === axis.id || isDefaultAxis && axisId === undefined;
-  }).reduce((acc, seriesId) => {
-    const {
-      stackedData
-    } = series[seriesId];
-    const filter = getFilters?.({
-      currentAxisId: axis.id,
-      isDefaultAxis,
-      seriesXAxisId: series[seriesId].xAxisId,
-      seriesYAxisId: series[seriesId].yAxisId
-    });
-    const [seriesMin, seriesMax] = stackedData?.reduce((seriesAcc, values, index) => {
-      if (filter && (!filter(createResult(values[0], direction), index) || !filter(createResult(values[1], direction), index))) {
-        return seriesAcc;
-      }
-      return [Math.min(...values, seriesAcc[0]), Math.max(...values, seriesAcc[1])];
-    }, [Infinity, -Infinity]) ?? [Infinity, -Infinity];
-    return [Math.min(seriesMin, acc[0]), Math.max(seriesMax, acc[1])];
-  }, [Infinity, -Infinity]);
-};
-export const getExtremumX = params => {
-  // Notice that bar should be all horizontal or all vertical.
-  // Don't think it's a problem for now
-  const isHorizontal = Object.keys(params.series).some(seriesId => params.series[seriesId].layout === 'horizontal');
-  if (isHorizontal) {
-    return getValueExtremum('x')(params);
-  }
-  return getBaseExtremum(params);
-};
-export const getExtremumY = params => {
-  const isHorizontal = Object.keys(params.series).some(seriesId => params.series[seriesId].layout === 'horizontal');
-  if (isHorizontal) {
-    return getBaseExtremum(params);
-  }
-  return getValueExtremum('y')(params);
-};

package/modern/BarChart/seriesConfig/getColor.d.ts

@@ -1,3 +0,0 @@
-import { ColorProcessor } from "../../internals/plugins/models/index.js";
-declare const getColor: ColorProcessor<'bar'>;
-export default getColor;

package/modern/BarChart/seriesConfig/getColor.js

@@ -1,28 +0,0 @@
-const getColor = (series, xAxis, yAxis) => {
-  const verticalLayout = series.layout === 'vertical';
-  const bandColorScale = verticalLayout ? xAxis?.colorScale : yAxis?.colorScale;
-  const valueColorScale = verticalLayout ? yAxis?.colorScale : xAxis?.colorScale;
-  const bandValues = verticalLayout ? xAxis?.data : yAxis?.data;
-  if (valueColorScale) {
-    return dataIndex => {
-      const value = series.data[dataIndex];
-      const color = value === null ? series.color : valueColorScale(value);
-      if (color === null) {
-        return series.color;
-      }
-      return color;
-    };
-  }
-  if (bandColorScale && bandValues) {
-    return dataIndex => {
-      const value = bandValues[dataIndex];
-      const color = value === null ? series.color : bandColorScale(value);
-      if (color === null) {
-        return series.color;
-      }
-      return color;
-    };
-  }
-  return () => series.color;
-};
-export default getColor;

package/modern/BarChart/seriesConfig/getSeriesWithDefaultValues.d.ts

@@ -1,3 +0,0 @@
-import type { GetSeriesWithDefaultValues } from '../../internals/plugins/models/seriesConfig';
-declare const getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'bar'>;
-export default getSeriesWithDefaultValues;

package/modern/BarChart/seriesConfig/getSeriesWithDefaultValues.js

@@ -1,8 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
-  return _extends({
-    id: seriesData.id ?? `auto-generated-id-${seriesIndex}`,
-    color: colors[seriesIndex % colors.length]
-  }, seriesData);
-};
-export default getSeriesWithDefaultValues;

package/modern/BarChart/seriesConfig/index.d.ts

@@ -1,2 +0,0 @@
-import { ChartSeriesTypeConfig } from "../../internals/plugins/models/seriesConfig/index.js";
-export declare const seriesConfig: ChartSeriesTypeConfig<'bar'>;

package/modern/BarChart/seriesConfig/index.js

@@ -1,15 +0,0 @@
-import { getExtremumX, getExtremumY } from "./extremums.js";
-import seriesProcessor from "./seriesProcessor.js";
-import legendGetter from "./legend.js";
-import getColor from "./getColor.js";
-import tooltipGetter from "./tooltip.js";
-import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
-export const seriesConfig = {
-  seriesProcessor,
-  colorProcessor: getColor,
-  legendGetter,
-  tooltipGetter,
-  xExtremumGetter: getExtremumX,
-  yExtremumGetter: getExtremumY,
-  getSeriesWithDefaultValues
-};

package/modern/BarChart/seriesConfig/legend.d.ts

@@ -1,3 +0,0 @@
-import { LegendGetter } from "../../internals/plugins/models/index.js";
-declare const legendGetter: LegendGetter<'bar'>;
-export default legendGetter;

package/modern/BarChart/seriesConfig/legend.js

@@ -1,22 +0,0 @@
-import { getLabel } from "../../internals/getLabel.js";
-const legendGetter = params => {
-  const {
-    seriesOrder,
-    series
-  } = params;
-  return seriesOrder.reduce((acc, seriesId) => {
-    const formattedLabel = getLabel(series[seriesId].label, 'legend');
-    if (formattedLabel === undefined) {
-      return acc;
-    }
-    acc.push({
-      markType: series[seriesId].labelMarkType,
-      id: seriesId,
-      seriesId,
-      color: series[seriesId].color,
-      label: formattedLabel
-    });
-    return acc;
-  }, []);
-};
-export default legendGetter;

package/modern/BarChart/seriesConfig/seriesProcessor.d.ts

@@ -1,3 +0,0 @@
-import { SeriesProcessor } from "../../internals/plugins/models/index.js";
-declare const seriesProcessor: SeriesProcessor<'bar'>;
-export default seriesProcessor;