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

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
-      })))
-    })
-  });
-}

package/modern/ChartsLegend/legendItemsPlacement.js

@@ -1,72 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["label"];
-export function legendItemPlacements(itemsToDisplay, getItemSpace, labelStyle, direction, availableWidth, availableHeight, itemGap) {
-  // Start at 0, 0. Will be modified later by padding and position.
-  let x = 0;
-  let y = 0;
-
-  // total values used to align legend later.
-  let totalWidthUsed = 0;
-  let totalHeightUsed = 0;
-  let rowIndex = 0;
-  const rowMaxHeight = [0];
-  const seriesWithRawPosition = itemsToDisplay.map(_ref => {
-    let {
-        label
-      } = _ref,
-      other = _objectWithoutPropertiesLoose(_ref, _excluded);
-    const itemSpace = getItemSpace(label, labelStyle);
-    const rep = _extends({}, other, {
-      label,
-      positionX: x,
-      positionY: y,
-      innerHeight: itemSpace.innerHeight,
-      innerWidth: itemSpace.innerWidth,
-      outerHeight: itemSpace.outerHeight,
-      outerWidth: itemSpace.outerWidth,
-      rowIndex
-    });
-    if (direction === 'row') {
-      if (x + itemSpace.innerWidth > availableWidth) {
-        // This legend item would create overflow along the x-axis, so we start a new row.
-        x = 0;
-        y += rowMaxHeight[rowIndex];
-        rowIndex += 1;
-        if (rowMaxHeight.length <= rowIndex) {
-          rowMaxHeight.push(0);
-        }
-        rep.positionX = x;
-        rep.positionY = y;
-        rep.rowIndex = rowIndex;
-      }
-      totalWidthUsed = Math.max(totalWidthUsed, x + itemSpace.outerWidth);
-      totalHeightUsed = Math.max(totalHeightUsed, y + itemSpace.outerHeight);
-      rowMaxHeight[rowIndex] = Math.max(rowMaxHeight[rowIndex], itemSpace.outerHeight);
-      x += itemSpace.outerWidth;
-    }
-    if (direction === 'column') {
-      if (y + itemSpace.innerHeight > availableHeight) {
-        // This legend item would create overflow along the y-axis, so we start a new column.
-        x = totalWidthUsed + itemGap;
-        y = 0;
-        rowIndex = 0;
-        rep.positionX = x;
-        rep.positionY = y;
-        rep.rowIndex = rowIndex;
-      }
-      if (rowMaxHeight.length <= rowIndex) {
-        rowMaxHeight.push(0);
-      }
-      totalWidthUsed = Math.max(totalWidthUsed, x + itemSpace.outerWidth);
-      totalHeightUsed = Math.max(totalHeightUsed, y + itemSpace.outerHeight);
-      rowIndex += 1;
-      y += itemSpace.outerHeight;
-    }
-    return rep;
-  });
-  return [seriesWithRawPosition.map(item => _extends({}, item, {
-    positionY: item.positionY + (direction === 'row' ? rowMaxHeight[item.rowIndex] / 2 // Get the center of the entire row
-    : item.outerHeight / 2) // Get the center of the item
-  })), totalWidthUsed, totalHeightUsed];
-}

package/node/ChartsLegend/ChartsLegendItem.js

@@ -1,72 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ChartsLegendItem = ChartsLegendItem;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _RtlProvider = require("@mui/system/RtlProvider");
-var _ChartsText = require("../ChartsText");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * @ignore - internal component.
- */
-function ChartsLegendItem(props) {
-  const isRTL = (0, _RtlProvider.useRtl)();
-  const {
-    id,
-    positionY,
-    label,
-    positionX,
-    innerHeight,
-    innerWidth,
-    legendWidth,
-    color,
-    gapX,
-    gapY,
-    itemMarkHeight,
-    itemMarkWidth,
-    markGap,
-    labelStyle,
-    classes,
-    onClick
-  } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-    className: (0, _clsx.default)(classes?.series, `${classes?.series}-${id}`),
-    transform: `translate(${gapX + (isRTL ? legendWidth - positionX : positionX)} ${gapY + positionY})`,
-    children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("rect", {
-      className: classes?.mark,
-      x: isRTL ? -itemMarkWidth : 0,
-      y: -itemMarkHeight / 2,
-      width: itemMarkWidth,
-      height: itemMarkHeight,
-      fill: color,
-      style: {
-        pointerEvents: 'none'
-      }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsText.ChartsText, {
-      style: (0, _extends2.default)({
-        pointerEvents: 'none'
-      }, labelStyle),
-      text: label,
-      x: (isRTL ? -1 : 1) * (itemMarkWidth + markGap),
-      y: 0
-    })]
-  });
-}

package/node/ChartsLegend/DefaultChartsLegend.js

@@ -1,118 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DefaultChartsLegend = DefaultChartsLegend;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _LegendPerItem = require("./LegendPerItem");
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["seriesToDisplay", "hidden", "onItemClick"];
-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 = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  if (hidden) {
-    return null;
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LegendPerItem.LegendPerItem, (0, _extends2.default)({}, 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.default.object,
-  /**
-   * The direction of the legend layout.
-   * The default depends on the chart.
-   */
-  direction: _propTypes.default.oneOf(['column', 'row']).isRequired,
-  /**
-   * Set to true to hide the legend.
-   * @default false
-   */
-  hidden: _propTypes.default.bool,
-  /**
-   * Space between two legend items (in px).
-   * @default 10
-   */
-  itemGap: _propTypes.default.number,
-  /**
-   * Height of the item mark (in px).
-   * @default 20
-   */
-  itemMarkHeight: _propTypes.default.number,
-  /**
-   * Width of the item mark (in px).
-   * @default 20
-   */
-  itemMarkWidth: _propTypes.default.number,
-  /**
-   * Style applied to legend labels.
-   * @default theme.typography.subtitle1
-   */
-  labelStyle: _propTypes.default.object,
-  /**
-   * Space between the mark and the label (in px).
-   * @default 5
-   */
-  markGap: _propTypes.default.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.default.func,
-  /**
-   * Legend padding (in px).
-   * Can either be a single number, or an object with top, left, bottom, right properties.
-   * @default 10
-   */
-  padding: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
-    bottom: _propTypes.default.number,
-    left: _propTypes.default.number,
-    right: _propTypes.default.number,
-    top: _propTypes.default.number
-  })]),
-  /**
-   * The position of the legend.
-   */
-  position: _propTypes.default.shape({
-    horizontal: _propTypes.default.oneOf(['left', 'middle', 'right']).isRequired,
-    vertical: _propTypes.default.oneOf(['bottom', 'middle', 'top']).isRequired
-  }).isRequired,
-  series: _propTypes.default.object.isRequired,
-  seriesToDisplay: _propTypes.default.arrayOf(_propTypes.default.shape({
-    color: _propTypes.default.string.isRequired,
-    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    itemId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    label: _propTypes.default.string.isRequired,
-    maxValue: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    minValue: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
-  })).isRequired
-} : void 0;

package/node/ChartsLegend/LegendPerItem.js

@@ -1,137 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ChartsLegendRoot = void 0;
-exports.LegendPerItem = LegendPerItem;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireWildcard(require("react"));
-var React = _react;
-var _NoSsr = _interopRequireDefault(require("@mui/material/NoSsr"));
-var _styles = require("@mui/material/styles");
-var _getWordsByLines = require("../internals/getWordsByLines");
-var _legendItemsPlacement = require("./legendItemsPlacement");
-var _useDrawingArea = require("../hooks/useDrawingArea");
-var _ChartsLegendItem = require("./ChartsLegendItem");
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["rotate", "dominantBaseline"];
-const ChartsLegendRoot = exports.ChartsLegendRoot = (0, _styles.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 (0, _extends2.default)({
-    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
- */
-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 = (0, _styles.useTheme)();
-  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
-  const labelStyle = React.useMemo(() => (0, _extends2.default)({}, 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 = (0, _objectWithoutPropertiesLoose2.default)(inStyle, _excluded);
-    const linesSize = (0, _getWordsByLines.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 (0, _extends2.default)({}, 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(() => (0, _legendItemsPlacement.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__*/(0, _jsxRuntime.jsx)(_NoSsr.default, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsLegendRoot, {
-      className: classes?.root,
-      children: itemsWithPosition.map((item, i) => /*#__PURE__*/(0, _react.createElement)(_ChartsLegendItem.ChartsLegendItem, (0, _extends2.default)({}, 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
-      })))
-    })
-  });
-}

package/node/ChartsLegend/legendItemsPlacement.js

@@ -1,79 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.legendItemPlacements = legendItemPlacements;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-const _excluded = ["label"];
-function legendItemPlacements(itemsToDisplay, getItemSpace, labelStyle, direction, availableWidth, availableHeight, itemGap) {
-  // Start at 0, 0. Will be modified later by padding and position.
-  let x = 0;
-  let y = 0;
-
-  // total values used to align legend later.
-  let totalWidthUsed = 0;
-  let totalHeightUsed = 0;
-  let rowIndex = 0;
-  const rowMaxHeight = [0];
-  const seriesWithRawPosition = itemsToDisplay.map(_ref => {
-    let {
-        label
-      } = _ref,
-      other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
-    const itemSpace = getItemSpace(label, labelStyle);
-    const rep = (0, _extends2.default)({}, other, {
-      label,
-      positionX: x,
-      positionY: y,
-      innerHeight: itemSpace.innerHeight,
-      innerWidth: itemSpace.innerWidth,
-      outerHeight: itemSpace.outerHeight,
-      outerWidth: itemSpace.outerWidth,
-      rowIndex
-    });
-    if (direction === 'row') {
-      if (x + itemSpace.innerWidth > availableWidth) {
-        // This legend item would create overflow along the x-axis, so we start a new row.
-        x = 0;
-        y += rowMaxHeight[rowIndex];
-        rowIndex += 1;
-        if (rowMaxHeight.length <= rowIndex) {
-          rowMaxHeight.push(0);
-        }
-        rep.positionX = x;
-        rep.positionY = y;
-        rep.rowIndex = rowIndex;
-      }
-      totalWidthUsed = Math.max(totalWidthUsed, x + itemSpace.outerWidth);
-      totalHeightUsed = Math.max(totalHeightUsed, y + itemSpace.outerHeight);
-      rowMaxHeight[rowIndex] = Math.max(rowMaxHeight[rowIndex], itemSpace.outerHeight);
-      x += itemSpace.outerWidth;
-    }
-    if (direction === 'column') {
-      if (y + itemSpace.innerHeight > availableHeight) {
-        // This legend item would create overflow along the y-axis, so we start a new column.
-        x = totalWidthUsed + itemGap;
-        y = 0;
-        rowIndex = 0;
-        rep.positionX = x;
-        rep.positionY = y;
-        rep.rowIndex = rowIndex;
-      }
-      if (rowMaxHeight.length <= rowIndex) {
-        rowMaxHeight.push(0);
-      }
-      totalWidthUsed = Math.max(totalWidthUsed, x + itemSpace.outerWidth);
-      totalHeightUsed = Math.max(totalHeightUsed, y + itemSpace.outerHeight);
-      rowIndex += 1;
-      y += itemSpace.outerHeight;
-    }
-    return rep;
-  });
-  return [seriesWithRawPosition.map(item => (0, _extends2.default)({}, item, {
-    positionY: item.positionY + (direction === 'row' ? rowMaxHeight[item.rowIndex] / 2 // Get the center of the entire row
-    : item.outerHeight / 2) // Get the center of the item
-  })), totalWidthUsed, totalHeightUsed];
-}