@mui/x-charts 8.0.0-alpha.6 → 8.0.0-alpha.8

package/context/SizeProvider/SizeProvider.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { SizeProviderProps } from './Size.types';
-/**
- * The size provider.
- *
- * This differs from the DrawingProvider in that it provides the full size of the container.
- *
- * This provider is also responsible for resolving the size of the container before rendering and if the parent size changes.
- */
-declare function SizeProvider(props: SizeProviderProps): React.JSX.Element;
-export { SizeProvider };

package/context/SizeProvider/SizeProvider.js

@@ -1,26 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { SizeContext } from "./SizeContext.js";
-import { useChartContainerDimensions } from "./useChartContainerDimensions.js";
-
-/**
- * The size provider.
- *
- * This differs from the DrawingProvider in that it provides the full size of the container.
- *
- * This provider is also responsible for resolving the size of the container before rendering and if the parent size changes.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-function SizeProvider(props) {
-  const dimensions = useChartContainerDimensions(props.width, props.height);
-  const value = React.useMemo(() => ({
-    isInitialized: true,
-    data: dimensions
-  }), [dimensions]);
-  return /*#__PURE__*/_jsx(SizeContext.Provider, {
-    value: value,
-    children: props.children
-  });
-}
-export { SizeProvider };

package/context/SizeProvider/index.d.ts

@@ -1,4 +0,0 @@
-export * from './SizeProvider';
-export * from './SizeContext';
-export * from './useSize';
-export * from './Size.types';

package/context/SizeProvider/index.js

@@ -1,4 +0,0 @@
-export * from "./SizeProvider.js";
-export * from "./SizeContext.js";
-export * from "./useSize.js";
-export * from "./Size.types.js";

package/context/SizeProvider/useChartContainerDimensions.d.ts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-export declare const useChartContainerDimensions: (inWidth?: number, inHeight?: number) => {
-    svgRef: React.RefObject<SVGSVGElement>;
-    width: number;
-    height: number;
-    hasIntrinsicSize: boolean;
-    inWidth: number | undefined;
-    inHeight: number | undefined;
-};

package/context/SizeProvider/useChartContainerDimensions.js

@@ -1,108 +0,0 @@
-'use client';
-
-/* eslint-disable react-compiler/react-compiler */
-import * as React from 'react';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import ownerWindow from '@mui/utils/ownerWindow';
-const MAX_COMPUTE_RUN = 10;
-export const useChartContainerDimensions = (inWidth, inHeight) => {
-  const hasInSize = inWidth !== undefined && inHeight !== undefined;
-  const stateRef = React.useRef({
-    displayError: false,
-    initialCompute: true,
-    computeRun: 0
-  });
-  const rootRef = React.useRef(null);
-  const [width, setWidth] = React.useState(0);
-  const [height, setHeight] = React.useState(0);
-
-  // Adaptation of the `computeSizeAndPublishResizeEvent` from the grid.
-  const computeSize = React.useCallback(() => {
-    const mainEl = rootRef?.current;
-    if (!mainEl) {
-      if (process.env.NODE_ENV !== 'production') {
-        // This is mostly for internal use.
-        throw new Error([`MUI X: ChartContainer does not have a valid reference to the <svg /> element.`, 'This may be caused by a ref forwarding issue.', 'Make sure that the ref from SizedProvider is forwarded correctly.'].join('\n'));
-      }
-      return {};
-    }
-    const win = ownerWindow(mainEl);
-    const computedStyle = win.getComputedStyle(mainEl);
-    const newHeight = Math.floor(parseFloat(computedStyle.height)) || 0;
-    const newWidth = Math.floor(parseFloat(computedStyle.width)) || 0;
-    setWidth(newWidth);
-    setHeight(newHeight);
-    return {
-      width: newWidth,
-      height: newHeight
-    };
-  }, []);
-  React.useEffect(() => {
-    // Ensure the error detection occurs after the first rendering.
-    stateRef.current.displayError = true;
-  }, []);
-
-  // This effect is used to compute the size of the container on the initial render.
-  // It is not bound to the raf loop to avoid an unwanted "resize" event.
-  // https://github.com/mui/mui-x/issues/13477#issuecomment-2336634785
-  useEnhancedEffect(() => {
-    // computeRun is used to avoid infinite loops.
-    if (hasInSize || !stateRef.current.initialCompute || stateRef.current.computeRun > MAX_COMPUTE_RUN) {
-      return;
-    }
-    const computedSize = computeSize();
-    if (computedSize.width !== width || computedSize.height !== height) {
-      stateRef.current.computeRun += 1;
-    } else if (stateRef.current.initialCompute) {
-      stateRef.current.initialCompute = false;
-    }
-  }, [width, height, computeSize, hasInSize]);
-  useEnhancedEffect(() => {
-    if (hasInSize) {
-      return () => {};
-    }
-    computeSize();
-    const elementToObserve = rootRef.current;
-    if (typeof ResizeObserver === 'undefined') {
-      return () => {};
-    }
-    let animationFrame;
-    const observer = new ResizeObserver(() => {
-      // See https://github.com/mui/mui-x/issues/8733
-      animationFrame = requestAnimationFrame(() => {
-        computeSize();
-      });
-    });
-    if (elementToObserve) {
-      observer.observe(elementToObserve);
-    }
-    return () => {
-      if (animationFrame) {
-        cancelAnimationFrame(animationFrame);
-      }
-      if (elementToObserve) {
-        observer.unobserve(elementToObserve);
-      }
-    };
-  }, [computeSize, hasInSize]);
-  if (process.env.NODE_ENV !== 'production') {
-    if (stateRef.current.displayError && inWidth === undefined && width === 0) {
-      console.error(`MUI X: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
-      stateRef.current.displayError = false;
-    }
-    if (stateRef.current.displayError && inHeight === undefined && height === 0) {
-      console.error(`MUI X: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
-      stateRef.current.displayError = false;
-    }
-  }
-  const finalWidth = inWidth ?? width;
-  const finalHeight = inHeight ?? height;
-  return {
-    svgRef: rootRef,
-    width: finalWidth,
-    height: finalHeight,
-    hasIntrinsicSize: finalWidth > 0 && finalHeight > 0,
-    inWidth,
-    inHeight
-  };
-};

package/context/SizeProvider/useSize.d.ts

@@ -1,5 +0,0 @@
-import { SizeContextState } from './Size.types';
-/**
- * Returns the size of the chart. And the ref of the container element that the chart is rendered in.
- */
-export declare const useSize: () => SizeContextState;

package/context/SizeProvider/useSize.js

@@ -1,13 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { SizeContext } from "./SizeContext.js";
-/**
- * Returns the size of the chart. And the ref of the container element that the chart is rendered in.
- */
-export const useSize = () => {
-  const {
-    data
-  } = React.useContext(SizeContext);
-  return data;
-};

package/context/ZAxisContextProvider.d.ts

@@ -1,33 +0,0 @@
-import * as React from 'react';
-import { MakeOptional } from '@mui/x-internals/types';
-import { DatasetType } from '../models/seriesType/config';
-import { ZAxisConfig, ZAxisDefaultized } from '../models/z-axis';
-export type ZAxisContextProviderProps = {
-    /**
-     * The configuration of the z-axes.
-     */
-    zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
-    /**
-     * An array of objects that can be used to populate series and axes data using their `dataKey` property.
-     */
-    dataset?: DatasetType;
-    children: React.ReactNode;
-};
-type DefaultizedZAxisConfig = {
-    [axisId: string]: ZAxisDefaultized;
-};
-export declare const ZAxisContext: React.Context<{
-    /**
-     * Mapping from z-axis key to scaling configuration.
-     */
-    zAxis: DefaultizedZAxisConfig;
-    /**
-     * The z-axes IDs sorted by order they got provided.
-     */
-    zAxisIds: string[];
-}>;
-declare function ZAxisContextProvider(props: ZAxisContextProviderProps): React.JSX.Element;
-declare namespace ZAxisContextProvider {
-    var propTypes: any;
-}
-export { ZAxisContextProvider };

package/context/ZAxisContextProvider.js

@@ -1,96 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { getColorScale, getOrdinalColorScale } from "../internals/colorScale.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const ZAxisContext = /*#__PURE__*/React.createContext({
-  zAxis: {},
-  zAxisIds: []
-});
-if (process.env.NODE_ENV !== 'production') {
-  ZAxisContext.displayName = 'ZAxisContext';
-}
-function ZAxisContextProvider(props) {
-  const {
-    zAxis: inZAxis,
-    dataset,
-    children
-  } = props;
-  const zAxis = React.useMemo(() => inZAxis?.map(axisConfig => {
-    const dataKey = axisConfig.dataKey;
-    if (dataKey === undefined || axisConfig.data !== undefined) {
-      return axisConfig;
-    }
-    if (dataset === undefined) {
-      throw new Error('MUI X: z-axis uses `dataKey` but no `dataset` is provided.');
-    }
-    return _extends({}, axisConfig, {
-      data: dataset.map(d => d[dataKey])
-    });
-  }), [inZAxis, dataset]);
-  const value = React.useMemo(() => {
-    const allZAxis = zAxis?.map((axis, index) => _extends({
-      id: `defaultized-z-axis-${index}`
-    }, axis)) ?? [];
-    const completedZAxis = {};
-    allZAxis.forEach(axis => {
-      completedZAxis[axis.id] = _extends({}, axis, {
-        colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' && axis.data ? getOrdinalColorScale(_extends({
-          values: axis.data
-        }, axis.colorMap)) : getColorScale(axis.colorMap.type === 'continuous' ? _extends({
-          min: axis.min,
-          max: axis.max
-        }, axis.colorMap) : axis.colorMap))
-      });
-    });
-    return {
-      zAxis: completedZAxis,
-      zAxisIds: allZAxis.map(({
-        id
-      }) => id)
-    };
-  }, [zAxis]);
-  return /*#__PURE__*/_jsx(ZAxisContext.Provider, {
-    value: value,
-    children: children
-  });
-}
-process.env.NODE_ENV !== "production" ? ZAxisContextProvider.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  children: PropTypes.node,
-  /**
-   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
-   */
-  dataset: PropTypes.arrayOf(PropTypes.object),
-  /**
-   * The configuration of the z-axes.
-   */
-  zAxis: PropTypes.arrayOf(PropTypes.shape({
-    colorMap: PropTypes.oneOfType([PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
-    }), PropTypes.shape({
-      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
-      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      type: PropTypes.oneOf(['continuous']).isRequired
-    }), PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
-      type: PropTypes.oneOf(['piecewise']).isRequired
-    })]),
-    data: PropTypes.array,
-    dataKey: PropTypes.string,
-    id: PropTypes.string,
-    max: PropTypes.number,
-    min: PropTypes.number
-  }))
-} : void 0;
-export { ZAxisContextProvider };

package/internals/computeAxisValue.d.ts

@@ -1,38 +0,0 @@
-import { AxisConfig, ScaleName } from '../models';
-import { ChartsXAxisProps, ChartsAxisProps, ChartsYAxisProps, ChartsRadiusAxisProps, ChartsRotationAxisProps } from '../models/axis';
-import { CartesianChartSeriesType } from '../models/seriesType/config';
-import { DrawingAreaState } from '../context/DrawingAreaProvider';
-import { FormattedSeries } from '../context/SeriesProvider';
-import { ExtremumGetter } from '../context/PluginProvider';
-import { DefaultizedAxisConfig, ZoomData, ZoomOptions, GetZoomAxisFilters } from '../context/CartesianProvider/Cartesian.types';
-type ComputeResult<T extends ChartsAxisProps> = {
-    axis: DefaultizedAxisConfig<T>;
-    axisIds: string[];
-};
-type ComputeCommonParams = {
-    drawingArea: DrawingAreaState;
-    formattedSeries: FormattedSeries;
-    extremumGetters: {
-        [K in CartesianChartSeriesType]?: ExtremumGetter<K>;
-    };
-    zoomData?: ZoomData[];
-    zoomOptions?: ZoomOptions;
-    getFilters?: GetZoomAxisFilters;
-};
-export declare function computeAxisValue(options: ComputeCommonParams & {
-    axis: AxisConfig<ScaleName, any, ChartsYAxisProps>[];
-    axisDirection: 'y';
-}): ComputeResult<ChartsYAxisProps>;
-export declare function computeAxisValue(options: ComputeCommonParams & {
-    axis: AxisConfig<ScaleName, any, ChartsXAxisProps>[];
-    axisDirection: 'x';
-}): ComputeResult<ChartsAxisProps>;
-export declare function computeAxisValue(options: ComputeCommonParams & {
-    axis: AxisConfig<ScaleName, any, ChartsRadiusAxisProps>[];
-    axisDirection: 'radius';
-}): ComputeResult<ChartsRadiusAxisProps>;
-export declare function computeAxisValue(options: ComputeCommonParams & {
-    axis: AxisConfig<ScaleName, any, ChartsRotationAxisProps>[];
-    axisDirection: 'rotation';
-}): ComputeResult<ChartsRotationAxisProps>;
-export {};

package/modern/ChartsLegend/ChartsLegendItem.js

@@ -1,65 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import clsx from 'clsx';
-import { useRtl } from '@mui/system/RtlProvider';
-import { ChartsText } from "../ChartsText/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @ignore - internal component.
- */
-function ChartsLegendItem(props) {
-  const isRTL = useRtl();
-  const {
-    id,
-    positionY,
-    label,
-    positionX,
-    innerHeight,
-    innerWidth,
-    legendWidth,
-    color,
-    gapX,
-    gapY,
-    itemMarkHeight,
-    itemMarkWidth,
-    markGap,
-    labelStyle,
-    classes,
-    onClick
-  } = props;
-  return /*#__PURE__*/_jsxs("g", {
-    className: clsx(classes?.series, `${classes?.series}-${id}`),
-    transform: `translate(${gapX + (isRTL ? legendWidth - positionX : positionX)} ${gapY + positionY})`,
-    children: [/*#__PURE__*/_jsx("rect", {
-      x: isRTL ? -(innerWidth + 2) : -2,
-      y: -itemMarkHeight / 2 - 2,
-      width: innerWidth + 4,
-      height: innerHeight + 4,
-      fill: "transparent",
-      className: classes?.itemBackground,
-      onClick: onClick,
-      style: {
-        pointerEvents: onClick ? 'all' : 'none',
-        cursor: onClick ? 'pointer' : 'unset'
-      }
-    }), /*#__PURE__*/_jsx("rect", {
-      className: classes?.mark,
-      x: isRTL ? -itemMarkWidth : 0,
-      y: -itemMarkHeight / 2,
-      width: itemMarkWidth,
-      height: itemMarkHeight,
-      fill: color,
-      style: {
-        pointerEvents: 'none'
-      }
-    }), /*#__PURE__*/_jsx(ChartsText, {
-      style: _extends({
-        pointerEvents: 'none'
-      }, labelStyle),
-      text: label,
-      x: (isRTL ? -1 : 1) * (itemMarkWidth + markGap),
-      y: 0
-    })]
-  });
-}
-export { ChartsLegendItem };

package/modern/ChartsLegend/DefaultChartsLegend.js

@@ -1,112 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["seriesToDisplay", "hidden", "onItemClick"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { LegendPerItem } from "./LegendPerItem.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const seriesContextBuilder = context => ({
-  type: 'series',
-  color: context.color,
-  label: context.label,
-  seriesId: context.seriesId,
-  itemId: context.itemId
-});
-function DefaultChartsLegend(props) {
-  const {
-      seriesToDisplay,
-      hidden,
-      onItemClick
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  if (hidden) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx(LegendPerItem, _extends({}, other, {
-    itemsToDisplay: seriesToDisplay,
-    onItemClick: onItemClick ? (event, i) => onItemClick(event, seriesContextBuilder(seriesToDisplay[i]), i) : undefined
-  }));
-}
-process.env.NODE_ENV !== "production" ? DefaultChartsLegend.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * The direction of the legend layout.
-   * The default depends on the chart.
-   */
-  direction: PropTypes.oneOf(['column', 'row']).isRequired,
-  /**
-   * Set to true to hide the legend.
-   * @default false
-   */
-  hidden: PropTypes.bool,
-  /**
-   * Space between two legend items (in px).
-   * @default 10
-   */
-  itemGap: PropTypes.number,
-  /**
-   * Height of the item mark (in px).
-   * @default 20
-   */
-  itemMarkHeight: PropTypes.number,
-  /**
-   * Width of the item mark (in px).
-   * @default 20
-   */
-  itemMarkWidth: PropTypes.number,
-  /**
-   * Style applied to legend labels.
-   * @default theme.typography.subtitle1
-   */
-  labelStyle: PropTypes.object,
-  /**
-   * Space between the mark and the label (in px).
-   * @default 5
-   */
-  markGap: PropTypes.number,
-  /**
-   * Callback fired when a legend item is clicked.
-   * @param {React.MouseEvent<SVGRectElement, MouseEvent>} event The click event.
-   * @param {SeriesLegendItemContext} legendItem The legend item data.
-   * @param {number} index The index of the clicked legend item.
-   */
-  onItemClick: PropTypes.func,
-  /**
-   * Legend padding (in px).
-   * Can either be a single number, or an object with top, left, bottom, right properties.
-   * @default 10
-   */
-  padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
-    bottom: PropTypes.number,
-    left: PropTypes.number,
-    right: PropTypes.number,
-    top: PropTypes.number
-  })]),
-  /**
-   * The position of the legend.
-   */
-  position: PropTypes.shape({
-    horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
-    vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
-  }).isRequired,
-  series: PropTypes.object.isRequired,
-  seriesToDisplay: PropTypes.arrayOf(PropTypes.shape({
-    color: PropTypes.string.isRequired,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    itemId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    label: PropTypes.string.isRequired,
-    maxValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    minValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-  })).isRequired
-} : void 0;
-export { DefaultChartsLegend };

package/modern/ChartsLegend/LegendPerItem.js

@@ -1,129 +0,0 @@
-'use client';
-
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["rotate", "dominantBaseline"];
-import * as React from 'react';
-import NoSsr from '@mui/material/NoSsr';
-import { useTheme, styled } from '@mui/material/styles';
-import { getWordsByLines } from "../internals/getWordsByLines.js";
-import { legendItemPlacements } from "./legendItemsPlacement.js";
-import { useDrawingArea } from "../hooks/useDrawingArea.js";
-import { ChartsLegendItem } from "./ChartsLegendItem.js";
-import { createElement as _createElement } from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const ChartsLegendRoot = styled('g', {
-  name: 'MuiChartsLegend',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
-})({});
-/**
- * Transforms number or partial padding object to a defaultized padding object.
- */
-const getStandardizedPadding = padding => {
-  if (typeof padding === 'number') {
-    return {
-      left: padding,
-      right: padding,
-      top: padding,
-      bottom: padding
-    };
-  }
-  return _extends({
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0
-  }, padding);
-};
-
-/**
- * Internal component to display an array of items as a legend.
- * Used for series legend, and threshold color legend.
- * @ignore - Do not document
- */
-export function LegendPerItem(props) {
-  const {
-    position,
-    direction,
-    itemsToDisplay,
-    classes,
-    itemMarkWidth = 20,
-    itemMarkHeight = 20,
-    markGap = 5,
-    itemGap = 10,
-    padding: paddingProps = 10,
-    labelStyle: inLabelStyle,
-    onItemClick
-  } = props;
-  const theme = useTheme();
-  const drawingArea = useDrawingArea();
-  const labelStyle = React.useMemo(() => _extends({}, theme.typography.subtitle1, {
-    color: 'inherit',
-    dominantBaseline: 'central',
-    textAnchor: 'start',
-    fill: (theme.vars || theme).palette.text.primary,
-    lineHeight: 1
-  }, inLabelStyle),
-  // To say to TS that the dominantBaseline and textAnchor are correct
-  [inLabelStyle, theme]);
-  const padding = React.useMemo(() => getStandardizedPadding(paddingProps), [paddingProps]);
-  const getItemSpace = React.useCallback((label, inStyle = {}) => {
-    const style = _objectWithoutPropertiesLoose(inStyle, _excluded);
-    const linesSize = getWordsByLines({
-      style,
-      needsComputation: true,
-      text: label
-    });
-    const innerSize = {
-      innerWidth: itemMarkWidth + markGap + Math.max(...linesSize.map(size => size.width)),
-      innerHeight: Math.max(itemMarkHeight, linesSize.length * linesSize[0].height)
-    };
-    return _extends({}, innerSize, {
-      outerWidth: innerSize.innerWidth + itemGap,
-      outerHeight: innerSize.innerHeight + itemGap
-    });
-  }, [itemGap, itemMarkHeight, itemMarkWidth, markGap]);
-  const totalWidth = drawingArea.left + drawingArea.width + drawingArea.right;
-  const totalHeight = drawingArea.top + drawingArea.height + drawingArea.bottom;
-  const availableWidth = totalWidth - padding.left - padding.right;
-  const availableHeight = totalHeight - padding.top - padding.bottom;
-  const [itemsWithPosition, legendWidth, legendHeight] = React.useMemo(() => legendItemPlacements(itemsToDisplay, getItemSpace, labelStyle, direction, availableWidth, availableHeight, itemGap), [itemsToDisplay, getItemSpace, labelStyle, direction, availableWidth, availableHeight, itemGap]);
-  const gapX = React.useMemo(() => {
-    switch (position.horizontal) {
-      case 'left':
-        return padding.left;
-      case 'right':
-        return totalWidth - padding.right - legendWidth;
-      default:
-        return (totalWidth - legendWidth) / 2;
-    }
-  }, [position.horizontal, padding.left, padding.right, totalWidth, legendWidth]);
-  const gapY = React.useMemo(() => {
-    switch (position.vertical) {
-      case 'top':
-        return padding.top;
-      case 'bottom':
-        return totalHeight - padding.bottom - legendHeight;
-      default:
-        return (totalHeight - legendHeight) / 2;
-    }
-  }, [position.vertical, padding.top, padding.bottom, totalHeight, legendHeight]);
-  return /*#__PURE__*/_jsx(NoSsr, {
-    children: /*#__PURE__*/_jsx(ChartsLegendRoot, {
-      className: classes?.root,
-      children: itemsWithPosition.map((item, i) => /*#__PURE__*/_createElement(ChartsLegendItem, _extends({}, item, {
-        key: item.id,
-        gapX: gapX,
-        gapY: gapY,
-        legendWidth: legendWidth,
-        itemMarkHeight: itemMarkHeight,
-        itemMarkWidth: itemMarkWidth,
-        markGap: markGap,
-        labelStyle: labelStyle,
-        classes: classes,
-        onClick: onItemClick ? event => onItemClick(event, i) : undefined
-      })))
-    })
-  });
-}