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

package/modern/RadarChart/RadarAxisHighlight/RadarAxisHighlight.js

@@ -1,42 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import composeClasses from '@mui/utils/composeClasses';
-import { RadarAxisSliceHighlight } from "./RadarAxisSliceHighlight.js";
-import { RadarAxisPointsHighlight } from "./RadarAxisPointsHighlight.js";
-import { getRadarAxisHighlightUtilityClass } from "./radarAxisHighlightClasses.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = classes => {
-  const slots = {
-    root: ['root'],
-    line: ['line'],
-    slice: ['slice'],
-    dot: ['dot']
-  };
-  return composeClasses(slots, getRadarAxisHighlightUtilityClass, classes);
-};
-function RadarAxisHighlight(props) {
-  const classes = useUtilityClasses(props.classes);
-  return props.axisHighlightShape === 'slice' ? /*#__PURE__*/_jsx(RadarAxisSliceHighlight, {
-    classes: classes
-  }) : /*#__PURE__*/_jsx(RadarAxisPointsHighlight, {
-    classes: classes
-  });
-}
-process.env.NODE_ENV !== "production" ? RadarAxisHighlight.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * 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: PropTypes.oneOf(['points', 'slice']).isRequired,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object
-} : void 0;
-export { RadarAxisHighlight };

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

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { RadarAxisHighlightClasses } from "./radarAxisHighlightClasses.js";
-interface RadarAxisPointsHighlightProps {
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<RadarAxisHighlightClasses>;
-}
-/**
- * @ignore - internal component.
- */
-export declare function RadarAxisPointsHighlight(props: RadarAxisPointsHighlightProps): React.JSX.Element | null;
-export {};

package/modern/RadarChart/RadarAxisHighlight/RadarAxisPointsHighlight.js

@@ -1,47 +0,0 @@
-import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
-import { useRadarAxisHighlight } from "./useRadarAxisHighlight.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @ignore - internal component.
- */
-export function RadarAxisPointsHighlight(props) {
-  const {
-    classes
-  } = props;
-  const theme = useTheme();
-  const data = useRadarAxisHighlight();
-  if (data === null) {
-    return null;
-  }
-  const {
-    center,
-    series,
-    points,
-    radius,
-    highlightedAngle,
-    instance
-  } = data;
-  const [x, y] = instance.polar2svg(radius, highlightedAngle);
-  return /*#__PURE__*/_jsxs("g", {
-    className: classes?.root,
-    children: [/*#__PURE__*/_jsx("path", {
-      d: `M ${center.cx} ${center.cy} L ${x} ${y}`,
-      stroke: (theme.vars || theme).palette.text.primary,
-      strokeWidth: 3,
-      className: classes?.line,
-      pointerEvents: "none"
-    }), points.map(({
-      highlighted
-    }, seriesIndex) => {
-      return /*#__PURE__*/_jsx("circle", {
-        fill: series[seriesIndex].color,
-        cx: highlighted.x,
-        cy: highlighted.y,
-        r: 8,
-        className: classes?.dot,
-        pointerEvents: "none"
-      }, series[seriesIndex].id);
-    })]
-  });
-}

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

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { RadarAxisHighlightClasses } from "./radarAxisHighlightClasses.js";
-interface RadarAxisSliceHighlightProps {
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<RadarAxisHighlightClasses>;
-}
-/**
- * @ignore - internal component.
- */
-export declare function RadarAxisSliceHighlight(props: RadarAxisSliceHighlightProps): React.JSX.Element | null;
-export {};

package/modern/RadarChart/RadarAxisHighlight/RadarAxisSliceHighlight.js

@@ -1,50 +0,0 @@
-import * as React from 'react';
-import { useRadarAxisHighlight } from "./useRadarAxisHighlight.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const params = {
-  includesNeighbors: true
-};
-/**
- * @ignore - internal component.
- */
-export function RadarAxisSliceHighlight(props) {
-  const {
-    classes
-  } = props;
-  const data = useRadarAxisHighlight(params);
-  if (data === null) {
-    return null;
-  }
-  const {
-    center,
-    series,
-    points
-  } = data;
-  return /*#__PURE__*/_jsx("g", {
-    className: classes?.root,
-    children: series.map(({
-      id,
-      color
-    }, seriesIndex) => {
-      const {
-        highlighted,
-        next = highlighted,
-        previous = highlighted
-      } = points[seriesIndex];
-      const ratioPrev = previous.r / (previous.r + highlighted.r);
-      const ratioNext = next.r / (next.r + highlighted.r);
-      return /*#__PURE__*/_jsx("path", {
-        className: classes?.slice,
-        fill: color,
-        d: `M
- ${center.cx} ${center.cy}
- L ${previous.x * (1 - ratioPrev) + highlighted.x * ratioPrev} ${previous.y * (1 - ratioPrev) + highlighted.y * ratioPrev}
- L ${highlighted.x} ${highlighted.y}
- L ${next.x * (1 - ratioNext) + highlighted.x * ratioNext} ${next.y * (1 - ratioNext) + highlighted.y * ratioNext}
- Z
- `,
-        pointerEvents: "none"
-      }, id);
-    })
-  });
-}

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

@@ -1 +0,0 @@
-export * from "./RadarAxisHighlight.js";

package/modern/RadarChart/RadarAxisHighlight/index.js

@@ -1 +0,0 @@
-export * from "./RadarAxisHighlight.js";

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

@@ -1,13 +0,0 @@
-export interface RadarAxisHighlightClasses {
-  /** Styles applied to the root element. */
-  root: string;
-  /** Styles applied to the highlighted axis line element. */
-  line: string;
-  /** Styles applied to every highlight slice. */
-  slice: string;
-  /** Styles applied to every highlight dot. */
-  dot: string;
-}
-export type RadarAxisHighlightClassKey = keyof RadarAxisHighlightClasses;
-export declare function getRadarAxisHighlightUtilityClass(slot: string): string;
-export declare const chartsAxisHighlightClasses: RadarAxisHighlightClasses;

package/modern/RadarChart/RadarAxisHighlight/radarAxisHighlightClasses.js

@@ -1,6 +0,0 @@
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-export function getRadarAxisHighlightUtilityClass(slot) {
-  return generateUtilityClass('MuiRadarAxisHighlight', slot);
-}
-export const chartsAxisHighlightClasses = generateUtilityClasses('MuiRadarAxisHighlight', ['root', 'line', 'slice', 'dot']);

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

@@ -1,62 +0,0 @@
-import { UseChartPolarAxisSignature } from "../../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
-import { AxisId } from "../../models/axis.js";
-import { DefaultizedRadarSeriesType } from "../../models/seriesType/radar.js";
-import { ChartInstance } from "../../internals/plugins/models/index.js";
-interface UseRadarAxisHighlightParams {
-  /**
-   * If true, coordinates of the previous/next point will be added.
-   */
-  includesNeighbors?: boolean;
-}
-interface UseRadarAxisHighlightReturnValue {
-  /**
-   * The radar center.
-   */
-  center: {
-    cx: number;
-    cy: number;
-  };
-  /**
-   * The radar radius.
-   */
-  radius: number;
-  /**
-   * The index of the highlighted axis.
-   */
-  highlightedIndex: number;
-  /**
-   * The id of the highlighted axis.
-   */
-  highlightedMetric: AxisId;
-  /**
-   * The angle (in radians) of the  highlighted axis.
-   */
-  highlightedAngle: number;
-  /**
-   * The radar series.
-   */
-  series: DefaultizedRadarSeriesType[];
-  /**
-   * The { x, y, value } values for the highlighted points in the same order as the `series` array.
-   * If `includesNeighbors` is set to `true` it also contains the information for `previous` and `next` data point.
-   */
-  points: Points[];
-  /**
-   * Charts instances giving access to `polar2svg` and `svg2polar` helpers.
-   */
-  instance: ChartInstance<[UseChartPolarAxisSignature], []>;
-}
-interface Point {
-  x: number;
-  y: number;
-  r: number;
-  angle: number;
-  value: number;
-}
-interface Points {
-  highlighted: Point;
-  previous?: Point;
-  next?: Point;
-}
-export declare function useRadarAxisHighlight(params?: UseRadarAxisHighlightParams): UseRadarAxisHighlightReturnValue | null;
-export {};

package/modern/RadarChart/RadarAxisHighlight/useRadarAxisHighlight.js

@@ -1,96 +0,0 @@
-import { useRadiusAxes } from "../../hooks/useAxis.js";
-import { useRadarSeries } from "../../hooks/useRadarSeries.js";
-import { useRotationScale } from "../../hooks/useScale.js";
-import { useSelector } from "../../internals/store/useSelector.js";
-import { useStore } from "../../internals/store/useStore.js";
-import { useChartContext } from "../../context/ChartProvider/useChartContext.js";
-import { selectorChartPolarCenter } from "../../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
-import { selectorChartsInteractionRotationAxisIndex, selectorChartsInteractionRotationAxisValue } from "../../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.js";
-export function useRadarAxisHighlight(params) {
-  const {
-    includesNeighbors = false
-  } = params ?? {};
-  const radarSeries = useRadarSeries();
-  const rotationScale = useRotationScale();
-  const {
-    radiusAxis,
-    radiusAxisIds
-  } = useRadiusAxes();
-  const {
-    instance
-  } = useChartContext();
-  const store = useStore();
-  const rotationAxisIndex = useSelector(store, selectorChartsInteractionRotationAxisIndex);
-  const rotationAxisValue = useSelector(store, selectorChartsInteractionRotationAxisValue);
-  const center = useSelector(store, selectorChartPolarCenter);
-  const highlightedIndex = rotationAxisIndex;
-  if (!rotationScale) {
-    return null;
-  }
-  if (highlightedIndex === null || highlightedIndex === -1) {
-    return null;
-  }
-  if (radarSeries === undefined || radarSeries.length === 0) {
-    return null;
-  }
-  const metric = radiusAxisIds[highlightedIndex];
-  const radiusScale = radiusAxis[metric].scale;
-  const angle = rotationScale(rotationAxisValue);
-  const radius = radiusScale.range()[1];
-  return {
-    center,
-    radius,
-    instance,
-    highlightedIndex,
-    highlightedMetric: metric,
-    highlightedAngle: angle,
-    series: radarSeries,
-    points: radarSeries.map(series => {
-      const value = series.data[highlightedIndex];
-      const r = radiusScale(value);
-      const [x, y] = instance.polar2svg(r, angle);
-      const retrunedValue = {
-        highlighted: {
-          x,
-          y,
-          r,
-          angle,
-          value
-        }
-      };
-      if (!includesNeighbors) {
-        return retrunedValue;
-      }
-      const dataLength = series.data.length;
-      const prevIndex = (dataLength + highlightedIndex - 1) % dataLength;
-      const nextIndex = (highlightedIndex + 1) % dataLength;
-      const prevValue = series.data[prevIndex];
-      const nextValue = series.data[nextIndex];
-      if (prevValue != null) {
-        const prevR = radiusAxis[radiusAxisIds[prevIndex]].scale(prevValue);
-        const prevAngle = rotationScale(rotationScale.domain()[prevIndex]);
-        const [px, py] = instance.polar2svg(prevR, prevAngle);
-        retrunedValue.previous = {
-          x: px,
-          y: py,
-          r: prevR,
-          angle: prevAngle,
-          value: prevValue
-        };
-      }
-      if (nextValue != null) {
-        const nextR = radiusAxis[radiusAxisIds[nextIndex]].scale(nextValue);
-        const nextAngle = rotationScale(rotationScale.domain()[nextIndex]);
-        const [nx, ny] = instance.polar2svg(nextR, nextAngle);
-        retrunedValue.next = {
-          x: nx,
-          y: ny,
-          r: nextR,
-          angle: nextAngle,
-          value: nextValue
-        };
-      }
-      return retrunedValue;
-    })
-  };
-}

package/modern/RadarChart/RadarChart.d.ts

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { ChartsOverlayProps } from "../ChartsOverlay/ChartsOverlay.js";
-import { RadarGridProps } from "./RadarGrid/index.js";
-import { RadarDataProviderProps } from "./RadarDataProvider/RadarDataProvider.js";
-import { RadarAxisHighlightProps } from "./RadarAxisHighlight/index.js";
-export interface RadarChartSlots {}
-export interface RadarChartSlotProps {}
-export interface RadarChartProps extends RadarDataProviderProps, RadarGridProps, Partial<RadarAxisHighlightProps>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
-  /**
-   * If `true`, the legend is not rendered.
-   */
-  hideLegend?: boolean;
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots?: RadarChartSlots;
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps?: RadarChartSlotProps;
-}
-declare const RadarChart: React.ForwardRefExoticComponent<RadarChartProps & React.RefAttributes<SVGSVGElement>>;
-export { RadarChart };

package/modern/RadarChart/RadarChart.js

@@ -1,177 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { useThemeProps } from '@mui/material/styles';
-import { ChartsLegend } from "../ChartsLegend/index.js";
-import { ChartsOverlay } from "../ChartsOverlay/ChartsOverlay.js";
-import { useRadarChartProps } from "./useRadarChartProps.js";
-import { ChartsSurface } from "../ChartsSurface/index.js";
-import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
-import { RadarGrid } from "./RadarGrid/index.js";
-import { RadarDataProvider } from "./RadarDataProvider/RadarDataProvider.js";
-import { RadarSeriesPlot } from "./RadarSeriesPlot/index.js";
-import { RadarAxisHighlight } from "./RadarAxisHighlight/index.js";
-import { RadarMetricLabels } from "./RadarMetricLabels/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const RadarChart = /*#__PURE__*/React.forwardRef(function RadarChart(inProps, ref) {
-  const props = useThemeProps({
-    props: inProps,
-    name: 'MuiRadarChart'
-  });
-  const {
-    chartsWrapperProps,
-    chartsSurfaceProps,
-    radarDataProviderProps,
-    radarGrid,
-    radarAxisHighlight,
-    overlayProps,
-    legendProps,
-    highlight,
-    children
-  } = useRadarChartProps(props);
-  return /*#__PURE__*/_jsx(RadarDataProvider, _extends({}, radarDataProviderProps, {
-    children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
-      children: [!props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
-        ref: ref,
-        children: [/*#__PURE__*/_jsx(RadarGrid, _extends({}, radarGrid)), /*#__PURE__*/_jsx(RadarMetricLabels, {}), /*#__PURE__*/_jsx(RadarSeriesPlot, {}), highlight === 'axis' && /*#__PURE__*/_jsx(RadarAxisHighlight, _extends({}, radarAxisHighlight)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), children]
-      }))]
-    }))
-  }));
-});
-process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  apiRef: PropTypes.shape({
-    current: PropTypes.object
-  }),
-  /**
-   * 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: PropTypes.oneOf(['points', 'slice']),
-  children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  className: PropTypes.string,
-  /**
-   * Color palette used to colorize multiple series.
-   * @default rainbowSurgePalette
-   */
-  colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
-  desc: PropTypes.string,
-  /**
-   * If `true`, the charts will not listen to the mouse move event.
-   * It might break interactive features, but will improve performance.
-   * @default false
-   */
-  disableAxisListener: PropTypes.bool,
-  /**
-   * The number of divisions in the radar grid.
-   * @default 5
-   */
-  divisions: PropTypes.number,
-  /**
-   * The height of the chart in px. If not defined, it takes the height of the parent element.
-   */
-  height: PropTypes.number,
-  /**
-   * If `true`, the legend is not rendered.
-   */
-  hideLegend: PropTypes.bool,
-  /**
-   * Indicates if the chart should highlight items per axis or per series.
-   * @default 'axis'
-   */
-  highlight: PropTypes.oneOf(['axis', 'none', 'series']),
-  /**
-   * The highlighted item.
-   * Used when the highlight is controlled.
-   */
-  highlightedItem: PropTypes.shape({
-    dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
-  }),
-  /**
-   * This prop is used to help implement the accessibility logic.
-   * If you don't provide this prop. It falls back to a randomly generated id.
-   */
-  id: PropTypes.string,
-  /**
-   * If `true`, a loading overlay is displayed.
-   * @default false
-   */
-  loading: PropTypes.bool,
-  /**
-   * The margin between the SVG and the drawing area.
-   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
-   *
-   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
-   */
-  margin: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
-    bottom: PropTypes.number,
-    left: PropTypes.number,
-    right: PropTypes.number,
-    top: PropTypes.number
-  })]),
-  /**
-   * The callback fired when the highlighted item changes.
-   *
-   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
-   */
-  onHighlightChange: PropTypes.func,
-  /**
-   * The configuration of the radar scales.
-   */
-  radar: PropTypes.shape({
-    labelFormatter: PropTypes.func,
-    labelGap: PropTypes.number,
-    max: PropTypes.number,
-    metrics: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.shape({
-      max: PropTypes.number,
-      min: PropTypes.number,
-      name: PropTypes.string.isRequired
-    }))]).isRequired,
-    startAngle: PropTypes.number
-  }).isRequired,
-  /**
-   * The series to display in the bar chart.
-   * An array of [[RadarSeriesType]] objects.
-   */
-  series: PropTypes.arrayOf(PropTypes.object).isRequired,
-  /**
-   * The grid shape.
-   * @default 'sharp'
-   */
-  shape: PropTypes.oneOf(['circular', 'sharp']),
-  /**
-   * If `true`, animations are skipped.
-   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
-   */
-  skipAnimation: PropTypes.bool,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps: PropTypes.object,
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots: PropTypes.object,
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  theme: PropTypes.oneOf(['dark', 'light']),
-  title: PropTypes.string,
-  /**
-   * The width of the chart in px. If not defined, it takes the width of the parent element.
-   */
-  width: PropTypes.number
-} : void 0;
-export { RadarChart };

package/modern/RadarChart/RadarDataProvider/RadarDataProvider.d.ts

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { MakeOptional } from '@mui/x-internals/types';
-import { ChartContainerProps } from "../../ChartContainer/index.js";
-import { RadarSeriesType } from "../../models/seriesType/radar.js";
-import { UseChartPolarAxisSignature } from "../../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
-import { UseChartHighlightSignature } from "../../internals/plugins/featurePlugins/useChartHighlight/index.js";
-import { UseChartInteractionSignature } from "../../internals/plugins/featurePlugins/useChartInteraction/index.js";
-import { RadarConfig } from "./radar.types.js";
-type RadarPluginSignatures = [UseChartPolarAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature];
-export interface RadarDataProviderProps extends Omit<ChartContainerProps<'radar', RadarPluginSignatures>, 'series' | 'plugins' | 'rotationAxis' | 'radiusAxis' | 'dataset'> {
-  /**
-   * The series to display in the bar chart.
-   * An array of [[RadarSeriesType]] objects.
-   */
-  series: MakeOptional<RadarSeriesType, 'type'>[];
-  /**
-   * The configuration of the radar scales.
-   */
-  radar: RadarConfig;
-  /**
-   * Indicates if the chart should highlight items per axis or per series.
-   * @default 'axis'
-   */
-  highlight?: 'axis' | 'series' | 'none';
-}
-declare function RadarDataProvider(props: RadarDataProviderProps): React.JSX.Element;
-declare namespace RadarDataProvider {
-  var propTypes: any;
-}
-export { RadarDataProvider };