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

package/modern/PieChart/PiePlot.d.ts

@@ -1,32 +0,0 @@
-import * as React from 'react';
-import { PieArcPlotProps, PieArcPlotSlotProps, PieArcPlotSlots } from "./PieArcPlot.js";
-import { PieArcLabelPlotSlots, PieArcLabelPlotSlotProps } from "./PieArcLabelPlot.js";
-export interface PiePlotSlots extends PieArcPlotSlots, PieArcLabelPlotSlots {}
-export interface PiePlotSlotProps extends PieArcPlotSlotProps, PieArcLabelPlotSlotProps {}
-export interface PiePlotProps extends Pick<PieArcPlotProps, 'skipAnimation' | 'onItemClick'> {
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots?: PiePlotSlots;
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps?: PiePlotSlotProps;
-}
-/**
- * Demos:
- *
- * - [Pie](https://mui.com/x/react-charts/pie/)
- * - [Pie demonstration](https://mui.com/x/react-charts/pie-demo/)
- *
- * API:
- *
- * - [PiePlot API](https://mui.com/x/api/charts/pie-plot/)
- */
-declare function PiePlot(props: PiePlotProps): React.JSX.Element | null;
-declare namespace PiePlot {
-  var propTypes: any;
-}
-export { PiePlot };

package/modern/PieChart/PiePlot.js

@@ -1,163 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { PieArcPlot } from "./PieArcPlot.js";
-import { PieArcLabelPlot } from "./PieArcLabelPlot.js";
-import { getPercentageValue } from "../internals/getPercentageValue.js";
-import { getPieCoordinates } from "./getPieCoordinates.js";
-import { usePieSeriesContext } from "../hooks/usePieSeries.js";
-import { useSkipAnimation } from "../context/AnimationProvider/index.js";
-import { useDrawingArea } from "../hooks/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Demos:
- *
- * - [Pie](https://mui.com/x/react-charts/pie/)
- * - [Pie demonstration](https://mui.com/x/react-charts/pie-demo/)
- *
- * API:
- *
- * - [PiePlot API](https://mui.com/x/api/charts/pie-plot/)
- */
-function PiePlot(props) {
-  const {
-    skipAnimation: inSkipAnimation,
-    slots,
-    slotProps,
-    onItemClick
-  } = props;
-  const seriesData = usePieSeriesContext();
-  const {
-    left,
-    top,
-    width,
-    height
-  } = useDrawingArea();
-  const skipAnimation = useSkipAnimation(inSkipAnimation);
-  if (seriesData === undefined) {
-    return null;
-  }
-  const {
-    series,
-    seriesOrder
-  } = seriesData;
-  return /*#__PURE__*/_jsxs("g", {
-    children: [seriesOrder.map(seriesId => {
-      const {
-        innerRadius: innerRadiusParam,
-        outerRadius: outerRadiusParam,
-        cornerRadius,
-        paddingAngle,
-        data,
-        cx: cxParam,
-        cy: cyParam,
-        highlighted,
-        faded
-      } = series[seriesId];
-      const {
-        cx,
-        cy,
-        availableRadius
-      } = getPieCoordinates({
-        cx: cxParam,
-        cy: cyParam
-      }, {
-        width,
-        height
-      });
-      const outerRadius = getPercentageValue(outerRadiusParam ?? availableRadius, availableRadius);
-      const innerRadius = getPercentageValue(innerRadiusParam ?? 0, availableRadius);
-      return /*#__PURE__*/_jsx("g", {
-        transform: `translate(${left + cx}, ${top + cy})`,
-        children: /*#__PURE__*/_jsx(PieArcPlot, {
-          innerRadius: innerRadius,
-          outerRadius: outerRadius,
-          cornerRadius: cornerRadius,
-          paddingAngle: paddingAngle,
-          id: seriesId,
-          data: data,
-          skipAnimation: skipAnimation,
-          highlighted: highlighted,
-          faded: faded,
-          onItemClick: onItemClick,
-          slots: slots,
-          slotProps: slotProps
-        })
-      }, seriesId);
-    }), seriesOrder.map(seriesId => {
-      const {
-        innerRadius: innerRadiusParam,
-        outerRadius: outerRadiusParam,
-        arcLabelRadius: arcLabelRadiusParam,
-        cornerRadius,
-        paddingAngle,
-        arcLabel,
-        arcLabelMinAngle,
-        data,
-        cx: cxParam,
-        cy: cyParam
-      } = series[seriesId];
-      const {
-        cx,
-        cy,
-        availableRadius
-      } = getPieCoordinates({
-        cx: cxParam,
-        cy: cyParam
-      }, {
-        width,
-        height
-      });
-      const outerRadius = getPercentageValue(outerRadiusParam ?? availableRadius, availableRadius);
-      const innerRadius = getPercentageValue(innerRadiusParam ?? 0, availableRadius);
-      const arcLabelRadius = arcLabelRadiusParam === undefined ? (outerRadius + innerRadius) / 2 : getPercentageValue(arcLabelRadiusParam, availableRadius);
-      return /*#__PURE__*/_jsx("g", {
-        transform: `translate(${left + cx}, ${top + cy})`,
-        children: /*#__PURE__*/_jsx(PieArcLabelPlot, {
-          innerRadius: innerRadius,
-          outerRadius: outerRadius ?? availableRadius,
-          arcLabelRadius: arcLabelRadius,
-          cornerRadius: cornerRadius,
-          paddingAngle: paddingAngle,
-          id: seriesId,
-          data: data,
-          skipAnimation: skipAnimation,
-          arcLabel: arcLabel,
-          arcLabelMinAngle: arcLabelMinAngle,
-          slots: slots,
-          slotProps: slotProps
-        })
-      }, seriesId);
-    })]
-  });
-}
-process.env.NODE_ENV !== "production" ? PiePlot.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * Callback fired when a pie item is clicked.
-   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
-   * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier.
-   * @param {DefaultizedPieValueType} item The pie item.
-   */
-  onItemClick: PropTypes.func,
-  /**
-   * If `true`, animations are skipped.
-   * @default false
-   */
-  skipAnimation: PropTypes.bool,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps: PropTypes.object,
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots: PropTypes.object
-} : void 0;
-export { PiePlot };

package/modern/PieChart/dataTransform/transition.d.ts

@@ -1,4 +0,0 @@
-import { UseTransitionProps } from '@react-spring/web';
-import { ValueWithHighlight } from "./useTransformData.js";
-export declare const getDefaultTransitionConfig: (skipAnimation?: boolean) => UseTransitionProps<ValueWithHighlight>;
-export declare const getDefaultLabelTransitionConfig: (skipAnimation?: boolean) => UseTransitionProps<ValueWithHighlight>;

package/modern/PieChart/dataTransform/transition.js

@@ -1,137 +0,0 @@
-export const getDefaultTransitionConfig = skipAnimation => ({
-  keys: item => item.id ?? item.dataIndex,
-  from: skipAnimation ? undefined : ({
-    innerRadius,
-    outerRadius,
-    cornerRadius,
-    startAngle,
-    endAngle,
-    paddingAngle,
-    color,
-    isFaded
-  }) => ({
-    innerRadius,
-    outerRadius: (innerRadius + outerRadius) / 2,
-    cornerRadius,
-    startAngle: (startAngle + endAngle) / 2,
-    endAngle: (startAngle + endAngle) / 2,
-    paddingAngle,
-    fill: color,
-    opacity: isFaded ? 0.3 : 1
-  }),
-  leave: ({
-    innerRadius,
-    startAngle,
-    endAngle
-  }) => ({
-    innerRadius,
-    outerRadius: innerRadius,
-    startAngle: (startAngle + endAngle) / 2,
-    endAngle: (startAngle + endAngle) / 2
-  }),
-  enter: ({
-    innerRadius,
-    outerRadius,
-    startAngle,
-    endAngle
-  }) => ({
-    innerRadius,
-    outerRadius,
-    startAngle,
-    endAngle
-  }),
-  update: ({
-    innerRadius,
-    outerRadius,
-    cornerRadius,
-    startAngle,
-    endAngle,
-    paddingAngle,
-    color,
-    isFaded
-  }) => ({
-    innerRadius,
-    outerRadius,
-    cornerRadius,
-    startAngle,
-    endAngle,
-    paddingAngle,
-    fill: color,
-    opacity: isFaded ? 0.3 : 1
-  }),
-  config: {
-    tension: 120,
-    friction: 14,
-    clamp: true
-  }
-});
-export const getDefaultLabelTransitionConfig = skipAnimation => ({
-  keys: item => item.id ?? item.dataIndex,
-  from: skipAnimation ? undefined : ({
-    innerRadius,
-    outerRadius,
-    arcLabelRadius,
-    cornerRadius,
-    startAngle,
-    endAngle,
-    paddingAngle
-  }) => ({
-    innerRadius,
-    outerRadius: (innerRadius + outerRadius) / 2,
-    cornerRadius,
-    arcLabelRadius,
-    startAngle: (startAngle + endAngle) / 2,
-    endAngle: (startAngle + endAngle) / 2,
-    paddingAngle,
-    opacity: 0
-  }),
-  leave: ({
-    innerRadius,
-    startAngle,
-    endAngle
-  }) => ({
-    innerRadius,
-    outerRadius: innerRadius,
-    arcLabelRadius: innerRadius,
-    startAngle: (startAngle + endAngle) / 2,
-    endAngle: (startAngle + endAngle) / 2,
-    opacity: 0
-  }),
-  enter: ({
-    innerRadius,
-    outerRadius,
-    startAngle,
-    endAngle,
-    arcLabelRadius
-  }) => ({
-    innerRadius,
-    outerRadius,
-    startAngle,
-    endAngle,
-    arcLabelRadius,
-    opacity: 1
-  }),
-  update: ({
-    innerRadius,
-    outerRadius,
-    cornerRadius,
-    startAngle,
-    endAngle,
-    paddingAngle,
-    arcLabelRadius
-  }) => ({
-    innerRadius,
-    outerRadius,
-    cornerRadius,
-    startAngle,
-    endAngle,
-    paddingAngle,
-    arcLabelRadius,
-    opacity: 1
-  }),
-  config: {
-    tension: 120,
-    friction: 14,
-    clamp: true
-  }
-});

package/modern/PieChart/dataTransform/useTransformData.d.ts

@@ -1,16 +0,0 @@
-import { ComputedPieRadius, DefaultizedPieSeriesType, DefaultizedPieValueType } from "../../models/seriesType/pie.js";
-export interface AnimatedObject {
-  innerRadius: number;
-  outerRadius: number;
-  arcLabelRadius: number;
-  cornerRadius: number;
-  startAngle: number;
-  endAngle: number;
-  paddingAngle: number;
-}
-export interface ValueWithHighlight extends DefaultizedPieValueType, AnimatedObject {
-  dataIndex: number;
-  isFaded: boolean;
-  isHighlighted: boolean;
-}
-export declare function useTransformData(series: Pick<DefaultizedPieSeriesType, 'cornerRadius' | 'paddingAngle' | 'id' | 'highlighted' | 'faded' | 'data'> & ComputedPieRadius): ValueWithHighlight[];

package/modern/PieChart/dataTransform/useTransformData.js

@@ -1,50 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { useItemHighlightedGetter } from "../../hooks/useItemHighlightedGetter.js";
-import { deg2rad } from "../../internals/angleConversion.js";
-export function useTransformData(series) {
-  const {
-    id: seriesId,
-    data,
-    faded,
-    highlighted,
-    paddingAngle: basePaddingAngle = 0,
-    innerRadius: baseInnerRadius = 0,
-    arcLabelRadius: baseArcLabelRadius,
-    outerRadius: baseOuterRadius,
-    cornerRadius: baseCornerRadius = 0
-  } = series;
-  const {
-    isFaded: isItemFaded,
-    isHighlighted: isItemHighlighted
-  } = useItemHighlightedGetter();
-  const dataWithHighlight = React.useMemo(() => data.map((item, itemIndex) => {
-    const currentItem = {
-      seriesId,
-      dataIndex: itemIndex
-    };
-    const isHighlighted = isItemHighlighted(currentItem);
-    const isFaded = !isHighlighted && isItemFaded(currentItem);
-    const attributesOverride = _extends({
-      additionalRadius: 0
-    }, isFaded && faded || isHighlighted && highlighted || {});
-    const paddingAngle = Math.max(0, deg2rad(attributesOverride.paddingAngle ?? basePaddingAngle));
-    const innerRadius = Math.max(0, attributesOverride.innerRadius ?? baseInnerRadius);
-    const outerRadius = Math.max(0, attributesOverride.outerRadius ?? baseOuterRadius + attributesOverride.additionalRadius);
-    const cornerRadius = attributesOverride.cornerRadius ?? baseCornerRadius;
-    const arcLabelRadius = attributesOverride.arcLabelRadius ?? baseArcLabelRadius ?? (innerRadius + outerRadius) / 2;
-    return _extends({}, item, attributesOverride, {
-      dataIndex: itemIndex,
-      isFaded,
-      isHighlighted,
-      paddingAngle,
-      innerRadius,
-      outerRadius,
-      cornerRadius,
-      arcLabelRadius
-    });
-  }), [baseCornerRadius, baseInnerRadius, baseOuterRadius, basePaddingAngle, baseArcLabelRadius, data, faded, highlighted, isItemFaded, isItemHighlighted, seriesId]);
-  return dataWithHighlight;
-}

package/modern/PieChart/getPieCoordinates.d.ts

@@ -1,7 +0,0 @@
-import { ChartDrawingArea } from "../hooks/index.js";
-import { DefaultizedPieSeriesType } from "../models/seriesType/pie.js";
-export declare function getPieCoordinates(series: Pick<DefaultizedPieSeriesType, 'cx' | 'cy'>, drawing: Pick<ChartDrawingArea, 'width' | 'height'>): {
-  cx: number;
-  cy: number;
-  availableRadius: number;
-};

package/modern/PieChart/getPieCoordinates.js

@@ -1,19 +0,0 @@
-import { getPercentageValue } from "../internals/getPercentageValue.js";
-export function getPieCoordinates(series, drawing) {
-  const {
-    height,
-    width
-  } = drawing;
-  const {
-    cx: cxParam,
-    cy: cyParam
-  } = series;
-  const availableRadius = Math.min(width, height) / 2;
-  const cx = getPercentageValue(cxParam ?? '50%', width);
-  const cy = getPercentageValue(cyParam ?? '50%', height);
-  return {
-    cx,
-    cy,
-    availableRadius
-  };
-}

package/modern/PieChart/index.d.ts

@@ -1,7 +0,0 @@
-export * from "./PieChart.js";
-export * from "./PiePlot.js";
-export * from "./PieArcPlot.js";
-export * from "./PieArcLabelPlot.js";
-export * from "./PieArc.js";
-export * from "./PieArcLabel.js";
-export * from "./getPieCoordinates.js";

package/modern/PieChart/index.js

@@ -1,7 +0,0 @@
-export * from "./PieChart.js";
-export * from "./PiePlot.js";
-export * from "./PieArcPlot.js";
-export * from "./PieArcLabelPlot.js";
-export * from "./PieArc.js";
-export * from "./PieArcLabel.js";
-export * from "./getPieCoordinates.js";

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

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

package/modern/PieChart/seriesConfig/getColor.js

@@ -1,6 +0,0 @@
-const getColor = series => {
-  return dataIndex => {
-    return series.data[dataIndex].color;
-  };
-};
-export default getColor;

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

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

package/modern/PieChart/seriesConfig/getSeriesWithDefaultValues.js

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

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

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

package/modern/PieChart/seriesConfig/index.js

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

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

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

package/modern/PieChart/seriesConfig/legend.js

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

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

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

package/modern/PieChart/seriesConfig/seriesProcessor.js

@@ -1,49 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { pie as d3Pie } from '@mui/x-charts-vendor/d3-shape';
-import { getLabel } from "../../internals/getLabel.js";
-const getSortingComparator = (comparator = 'none') => {
-  if (typeof comparator === 'function') {
-    return comparator;
-  }
-  switch (comparator) {
-    case 'none':
-      return null;
-    case 'desc':
-      return (a, b) => b - a;
-    case 'asc':
-      return (a, b) => a - b;
-    default:
-      return null;
-  }
-};
-const seriesProcessor = params => {
-  const {
-    seriesOrder,
-    series
-  } = params;
-  const defaultizedSeries = {};
-  seriesOrder.forEach(seriesId => {
-    const arcs = d3Pie().startAngle(2 * Math.PI * (series[seriesId].startAngle ?? 0) / 360).endAngle(2 * Math.PI * (series[seriesId].endAngle ?? 360) / 360).padAngle(2 * Math.PI * (series[seriesId].paddingAngle ?? 0) / 360).sortValues(getSortingComparator(series[seriesId].sortingValues ?? 'none'))(series[seriesId].data.map(piePoint => piePoint.value));
-    defaultizedSeries[seriesId] = _extends({
-      labelMarkType: 'circle',
-      valueFormatter: item => item.value.toLocaleString()
-    }, series[seriesId], {
-      data: series[seriesId].data.map((item, index) => _extends({}, item, {
-        id: item.id ?? `auto-generated-pie-id-${seriesId}-${index}`
-      }, arcs[index])).map((item, index) => _extends({
-        labelMarkType: 'circle'
-      }, item, {
-        formattedValue: series[seriesId].valueFormatter?.(_extends({}, item, {
-          label: getLabel(item.label, 'arc')
-        }), {
-          dataIndex: index
-        }) ?? item.value.toLocaleString()
-      }))
-    });
-  });
-  return {
-    seriesOrder,
-    series: defaultizedSeries
-  };
-};
-export default seriesProcessor;

package/modern/PieChart/seriesConfig/tooltip.d.ts

@@ -1,3 +0,0 @@
-import type { TooltipGetter } from '../../internals/plugins/models';
-declare const tooltipGetter: TooltipGetter<'pie'>;
-export default tooltipGetter;

package/modern/PieChart/seriesConfig/tooltip.js

@@ -1,29 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { getLabel } from "../../internals/getLabel.js";
-const tooltipGetter = params => {
-  const {
-    series,
-    getColor,
-    identifier
-  } = params;
-  if (!identifier || identifier.dataIndex === undefined) {
-    return null;
-  }
-  const point = series.data[identifier.dataIndex];
-  const label = getLabel(point.label, 'tooltip');
-  const value = _extends({}, point, {
-    label
-  });
-  const formattedValue = series.valueFormatter(value, {
-    dataIndex: identifier.dataIndex
-  });
-  return {
-    identifier,
-    color: getColor(identifier.dataIndex),
-    label,
-    value,
-    formattedValue,
-    markType: point.labelMarkType ?? series.labelMarkType
-  };
-};
-export default tooltipGetter;

package/modern/RadarChart/RadarAxisHighlight/RadarAxisHighlight.d.ts

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { RadarAxisHighlightClasses } from "./radarAxisHighlightClasses.js";
-export interface RadarAxisHighlightProps {
-  /**
-   * Switch between different axis highlight visualization.
-   * - points: display points on each highlighted value. Recommended for radar with multiple series.
-   * - slice: display a slice around the highlighted value. Recommended for radar with a single series.
-   * The default value is computed depending on the number of series provided.
-   */
-  axisHighlightShape: 'points' | 'slice';
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<RadarAxisHighlightClasses>;
-}
-declare function RadarAxisHighlight(props: RadarAxisHighlightProps): React.JSX.Element;
-declare namespace RadarAxisHighlight {
-  var propTypes: any;
-}
-export { RadarAxisHighlight };