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

package/node/ChartsLegend/PiecewiseColorLegend.js

@@ -6,42 +6,132 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PiecewiseColorLegend = PiecewiseColorLegend;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+exports.PiecewiseColorLegend = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _ChartsLabel = require("../ChartsLabel/ChartsLabel");
+var _ChartsLabelMark = require("../ChartsLabel/ChartsLabelMark");
+var _consumeThemeProps = require("../internals/consumeThemeProps");
+var _piecewiseColorLegendClasses = require("./piecewiseColorLegendClasses");
 var _useAxis = require("./useAxis");
-var _LegendPerItem = require("./LegendPerItem");
-var _notNull = require("../internals/notNull");
+var _piecewiseColorDefaultLabelFormatter = require("./piecewiseColorDefaultLabelFormatter");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["axisDirection", "axisId", "hideFirst", "hideLast", "labelFormatter", "onItemClick"];
-function defaultLabelFormatter(params) {
-  if (params.min === null) {
-    return `<${params.formattedMax}`;
-  }
-  if (params.max === null) {
-    return `>${params.formattedMin}`;
-  }
-  return `${params.formattedMin}-${params.formattedMax}`;
-}
-const piecewiseColorContextBuilder = context => ({
-  type: 'piecewiseColor',
-  color: context.color,
-  label: context.label,
-  maxValue: context.maxValue,
-  minValue: context.minValue
+const _excluded = ["direction", "classes", "className", "markType", "labelPosition", "axisDirection", "axisId", "labelFormatter", "onItemClick"];
+const RootElement = (0, _styles.styled)('ul', {
+  name: 'MuiPiecewiseColorLegend',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme,
+  ownerState
+}) => {
+  return (0, _extends2.default)({}, theme.typography.caption, {
+    color: (theme.vars || theme).palette.text.primary,
+    lineHeight: '100%',
+    display: 'flex',
+    flexDirection: ownerState.direction === 'vertical' ? 'column' : 'row',
+    flexShrink: 0,
+    gap: theme.spacing(0.5),
+    listStyleType: 'none',
+    paddingInlineStart: 0,
+    marginBlock: theme.spacing(1),
+    marginInline: theme.spacing(1),
+    width: 'max-content',
+    [`button.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.item}`]: {
+      // Reset button styles
+      background: 'none',
+      border: 'none',
+      padding: 0,
+      cursor: ownerState.onItemClick ? 'pointer' : 'unset',
+      fontFamily: 'inherit',
+      fontWeight: 'inherit',
+      fontSize: 'inherit',
+      letterSpacing: 'inherit',
+      color: 'inherit'
+    },
+    [`.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.item}`]: {
+      display: 'flex',
+      gap: theme.spacing(0.5)
+    },
+    [`li :not(.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.minLabel}, .${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.maxLabel}) .${_piecewiseColorLegendClasses.piecewiseColorLegendClasses?.mark}`]: {
+      alignSelf: 'center'
+    },
+    [`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.start}`]: {
+      alignItems: 'end'
+    },
+    [`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.end}`]: {
+      alignItems: 'start'
+    },
+    [`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.horizontal}`]: {
+      alignItems: 'center',
+      [`.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.item}`]: {
+        flexDirection: 'column'
+      },
+      [`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.start}`]: {
+        alignItems: 'end'
+      },
+      [`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.end}`]: {
+        alignItems: 'start'
+      },
+      [`.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.minLabel}`]: {
+        alignItems: 'end'
+      },
+      [`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.extremes}`]: {
+        [`.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.minLabel}, .${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.maxLabel}`]: {
+          alignItems: 'center',
+          display: 'flex',
+          flexDirection: 'row'
+        }
+      }
+    },
+    [`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.vertical}`]: {
+      [`.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.item}`]: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      [`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.start}`]: {
+        alignItems: 'end'
+      },
+      [`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.end}`]: {
+        alignItems: 'start'
+      },
+      [`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.extremes}`]: {
+        alignItems: 'center',
+        [`.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.minLabel}, .${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.maxLabel}`]: {
+          alignItems: 'center',
+          display: 'flex',
+          flexDirection: 'column'
+        }
+      }
+    }
+  });
 });
-function PiecewiseColorLegend(props) {
+const PiecewiseColorLegend = exports.PiecewiseColorLegend = (0, _consumeThemeProps.consumeThemeProps)('MuiPiecewiseColorLegend', {
+  defaultProps: {
+    direction: 'horizontal',
+    labelPosition: 'extremes',
+    labelFormatter: _piecewiseColorDefaultLabelFormatter.piecewiseColorDefaultLabelFormatter
+  },
+  classesResolver: _piecewiseColorLegendClasses.useUtilityClasses
+}, function PiecewiseColorLegend(props, ref) {
   const {
+      direction,
+      classes,
+      className,
+      markType,
+      labelPosition,
       axisDirection,
       axisId,
-      hideFirst,
-      hideLast,
-      labelFormatter = defaultLabelFormatter,
+      labelFormatter,
       onItemClick
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const isVertical = direction === 'vertical';
+  const isReverse = isVertical;
   const axisItem = (0, _useAxis.useAxis)({
     axisDirection,
     axisId
@@ -54,42 +144,83 @@ function PiecewiseColorLegend(props) {
     location: 'legend'
   }) ?? v.toLocaleString();
   const formattedLabels = colorMap.thresholds.map(valueFormatter);
-  const itemsToDisplay = colorMap.colors.map((color, index) => {
-    const isFirst = index === 0;
-    const isLast = index === colorMap.colors.length - 1;
-    if (hideFirst && isFirst || hideLast && isLast) {
-      return null;
-    }
-    const data = (0, _extends2.default)({}, isFirst ? {
-      min: null,
-      formattedMin: null
-    } : {
-      min: colorMap.thresholds[index - 1],
-      formattedMin: formattedLabels[index - 1]
-    }, isLast ? {
-      max: null,
-      formattedMax: null
-    } : {
-      max: colorMap.thresholds[index],
-      formattedMax: formattedLabels[index]
-    });
-    const label = labelFormatter(data);
-    if (label === null) {
-      return null;
-    }
-    return {
-      id: label,
+  const startClass = isReverse ? classes?.maxLabel : classes?.minLabel;
+  const endClass = isReverse ? classes?.minLabel : classes?.maxLabel;
+  const colors = colorMap.colors.map((color, colorIndex) => ({
+    color,
+    colorIndex
+  }));
+  const orderedColors = isReverse ? colors.reverse() : colors;
+  const isStart = labelPosition === 'start';
+  const isEnd = labelPosition === 'end';
+  const isExtremes = labelPosition === 'extremes';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RootElement, (0, _extends2.default)({
+    className: (0, _clsx.default)(classes?.root, className),
+    ref: ref
+  }, other, {
+    ownerState: props,
+    children: orderedColors.map(({
       color,
-      label,
-      minValue: data.min,
-      maxValue: data.max
-    };
-  }).filter(_notNull.notNull);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LegendPerItem.LegendPerItem, (0, _extends2.default)({}, other, {
-    itemsToDisplay: itemsToDisplay,
-    onItemClick: onItemClick ? (event, i) => onItemClick(event, piecewiseColorContextBuilder(itemsToDisplay[i]), i) : undefined
+      colorIndex
+    }, index) => {
+      const isFirst = index === 0;
+      const isLast = index === colorMap.colors.length - 1;
+      const isFirstColor = colorIndex === 0;
+      const isLastColor = colorIndex === colorMap.colors.length - 1;
+      const data = (0, _extends2.default)({
+        index: colorIndex,
+        length: formattedLabels.length
+      }, isFirstColor ? {
+        min: null,
+        formattedMin: null
+      } : {
+        min: colorMap.thresholds[colorIndex - 1],
+        formattedMin: formattedLabels[colorIndex - 1]
+      }, isLastColor ? {
+        max: null,
+        formattedMax: null
+      } : {
+        max: colorMap.thresholds[colorIndex],
+        formattedMax: formattedLabels[colorIndex]
+      });
+      const label = labelFormatter?.(data);
+      if (label === null || label === undefined) {
+        return null;
+      }
+      const isTextBefore = isStart || isExtremes && isFirst;
+      const isTextAfter = isEnd || isExtremes && isLast;
+      const clickObject = {
+        type: 'piecewiseColor',
+        color,
+        label,
+        minValue: data.min,
+        maxValue: data.max
+      };
+      const Element = onItemClick ? 'button' : 'div';
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Element, {
+          role: onItemClick ? 'button' : undefined,
+          type: onItemClick ? 'button' : undefined,
+          onClick:
+          // @ts-ignore onClick is only attached to a button
+          onItemClick ? event => onItemClick(event, clickObject, index) : undefined,
+          className: (0, _clsx.default)(classes?.item, index === 0 && `${startClass}`, index === orderedColors.length - 1 && `${endClass}`),
+          children: [isTextBefore && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabel.ChartsLabel, {
+            className: classes?.label,
+            children: label
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelMark.ChartsLabelMark, {
+            className: classes?.mark,
+            type: markType,
+            color: color
+          }), isTextAfter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabel.ChartsLabel, {
+            className: classes?.label,
+            children: label
+          })]
+        })
+      }, colorIndex);
+    })
   }));
-}
+});
 process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -109,75 +240,34 @@ process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: _propTypes.default.object,
+  className: _propTypes.default.string,
   /**
    * The direction of the legend layout.
-   * The default depends on the chart.
-   */
-  direction: _propTypes.default.oneOf(['column', 'row']).isRequired,
-  /**
-   * Hide the first item of the legend, corresponding to the [-infinity, min] piece.
-   * @default false
+   * @default 'horizontal'
    */
-  hideFirst: _propTypes.default.bool,
-  /**
-   * Hide the last item of the legend, corresponding to the [max, +infinity] piece.
-   * @default false
-   */
-  hideLast: _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,
+  direction: _propTypes.default.oneOf(['horizontal', 'vertical']),
   /**
    * Format the legend labels.
    * @param {PiecewiseLabelFormatterParams} params The bound of the piece to format.
-   * @returns {string|null} The displayed label, or `null` to skip the item.
+   * @returns {string|null} The displayed label, `''` to skip the label but show the color mark, or `null` to skip it entirely.
    */
   labelFormatter: _propTypes.default.func,
   /**
-   * Style applied to legend labels.
-   * @default theme.typography.subtitle1
+   * Where to position the labels relative to the gradient.
+   * @default 'extremes'
    */
-  labelStyle: _propTypes.default.object,
+  labelPosition: _propTypes.default.oneOf(['start', 'end', 'extremes']),
   /**
-   * Space between the mark and the label (in px).
-   * @default 5
+   * The type of the mark.
+   * @default 'square'
    */
-  markGap: _propTypes.default.number,
+  markType: _propTypes.default.oneOf(['square', 'circle', 'line']),
   /**
    * Callback fired when a legend item is clicked.
-   * @param {React.MouseEvent<SVGRectElement, MouseEvent>} event The click event.
+   * @param {React.MouseEvent<HTMLButtonElement, MouseEvent>} event The click event.
    * @param {PiecewiseColorLegendItemContext} 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
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;

package/node/ChartsLegend/chartsLegendClasses.js

@@ -4,11 +4,25 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getLegendUtilityClass = getLegendUtilityClass;
-exports.legendClasses = void 0;
+exports.useUtilityClasses = exports.legendClasses = void 0;
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 function getLegendUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiChartsLegend', slot);
 }
-const legendClasses = exports.legendClasses = (0, _generateUtilityClasses.default)('MuiChartsLegend', ['root', 'series', 'itemBackground', 'mark', 'label', 'column', 'row']);
+const useUtilityClasses = props => {
+  const {
+    classes,
+    direction
+  } = props;
+  const slots = {
+    root: ['root', direction],
+    mark: ['mark'],
+    label: ['label'],
+    series: ['series']
+  };
+  return (0, _composeClasses.default)(slots, getLegendUtilityClass, classes);
+};
+exports.useUtilityClasses = useUtilityClasses;
+const legendClasses = exports.legendClasses = (0, _generateUtilityClasses.default)('MuiChartsLegend', ['root', 'series', 'mark', 'label', 'vertical', 'horizontal']);

package/node/ChartsLegend/colorLegend.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/ChartsLegend/continuousColorLegendClasses.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useUtilityClasses = exports.continuousColorLegendClasses = void 0;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+function getLegendUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiContinuousColorLegend', slot);
+}
+const useUtilityClasses = props => {
+  const {
+    classes,
+    direction,
+    labelPosition
+  } = props;
+  const slots = {
+    root: ['root', direction, labelPosition],
+    minLabel: ['minLabel'],
+    maxLabel: ['maxLabel'],
+    gradient: ['gradient'],
+    mark: ['mark'],
+    label: ['label']
+  };
+  return (0, _composeClasses.default)(slots, getLegendUtilityClass, classes);
+};
+exports.useUtilityClasses = useUtilityClasses;
+const continuousColorLegendClasses = exports.continuousColorLegendClasses = (0, _generateUtilityClasses.default)('MuiContinuousColorLegend', ['root', 'minLabel', 'maxLabel', 'gradient', 'vertical', 'horizontal', 'start', 'end', 'extremes', 'label']);

package/node/ChartsLegend/direction.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/ChartsLegend/index.js

@@ -3,9 +3,40 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  legendClasses: true,
+  continuousColorLegendClasses: true,
+  piecewiseColorLegendClasses: true,
+  piecewiseColorDefaultLabelFormatter: true
+};
+Object.defineProperty(exports, "continuousColorLegendClasses", {
+  enumerable: true,
+  get: function () {
+    return _continuousColorLegendClasses.continuousColorLegendClasses;
+  }
+});
+Object.defineProperty(exports, "legendClasses", {
+  enumerable: true,
+  get: function () {
+    return _chartsLegendClasses.legendClasses;
+  }
+});
+Object.defineProperty(exports, "piecewiseColorDefaultLabelFormatter", {
+  enumerable: true,
+  get: function () {
+    return _piecewiseColorDefaultLabelFormatter.piecewiseColorDefaultLabelFormatter;
+  }
+});
+Object.defineProperty(exports, "piecewiseColorLegendClasses", {
+  enumerable: true,
+  get: function () {
+    return _piecewiseColorLegendClasses.piecewiseColorLegendClasses;
+  }
+});
 var _ChartsLegend = require("./ChartsLegend");
 Object.keys(_ChartsLegend).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsLegend[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -14,20 +45,47 @@ Object.keys(_ChartsLegend).forEach(function (key) {
     }
   });
 });
-var _DefaultChartsLegend = require("./DefaultChartsLegend");
-Object.keys(_DefaultChartsLegend).forEach(function (key) {
+var _chartsLegend = require("./chartsLegend.types");
+Object.keys(_chartsLegend).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _chartsLegend[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _chartsLegend[key];
+    }
+  });
+});
+var _direction = require("./direction");
+Object.keys(_direction).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _direction[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _direction[key];
+    }
+  });
+});
+var _legendContext = require("./legendContext.types");
+Object.keys(_legendContext).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _DefaultChartsLegend[key]) return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _legendContext[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _DefaultChartsLegend[key];
+      return _legendContext[key];
     }
   });
 });
+var _chartsLegendClasses = require("./chartsLegendClasses");
 var _ContinuousColorLegend = require("./ContinuousColorLegend");
 Object.keys(_ContinuousColorLegend).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ContinuousColorLegend[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -36,36 +94,42 @@ Object.keys(_ContinuousColorLegend).forEach(function (key) {
     }
   });
 });
-var _PiecewiseColorLegend = require("./PiecewiseColorLegend");
-Object.keys(_PiecewiseColorLegend).forEach(function (key) {
+var _colorLegend = require("./colorLegend.types");
+Object.keys(_colorLegend).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _PiecewiseColorLegend[key]) return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _colorLegend[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _PiecewiseColorLegend[key];
+      return _colorLegend[key];
     }
   });
 });
-var _chartsLegendClasses = require("./chartsLegendClasses");
-Object.keys(_chartsLegendClasses).forEach(function (key) {
+var _continuousColorLegendClasses = require("./continuousColorLegendClasses");
+var _PiecewiseColorLegend = require("./PiecewiseColorLegend");
+Object.keys(_PiecewiseColorLegend).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _chartsLegendClasses[key]) return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _PiecewiseColorLegend[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _chartsLegendClasses[key];
+      return _PiecewiseColorLegend[key];
     }
   });
 });
-var _utils = require("./utils");
-Object.keys(_utils).forEach(function (key) {
+var _piecewiseColorLegendClasses = require("./piecewiseColorLegendClasses");
+var _piecewiseColorDefaultLabelFormatter = require("./piecewiseColorDefaultLabelFormatter");
+var _legend = require("./legend.types");
+Object.keys(_legend).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _utils[key]) return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _legend[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _utils[key];
+      return _legend[key];
     }
   });
 });

package/node/ChartsLegend/legendContext.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/ChartsLegend/onClickContextBuilder.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.seriesContextBuilder = void 0;
+const seriesContextBuilder = context => ({
+  type: 'series',
+  color: context.color,
+  label: context.label,
+  seriesId: context.seriesId,
+  itemId: context.itemId
+});
+exports.seriesContextBuilder = seriesContextBuilder;

package/node/ChartsLegend/piecewiseColorDefaultLabelFormatter.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.piecewiseColorDefaultLabelFormatter = piecewiseColorDefaultLabelFormatter;
+function piecewiseColorDefaultLabelFormatter(params) {
+  if (params.min === null) {
+    return `<${params.formattedMax}`;
+  }
+  if (params.max === null) {
+    return `>${params.formattedMin}`;
+  }
+  return `${params.formattedMin}-${params.formattedMax}`;
+}

package/node/ChartsLegend/piecewiseColorLegend.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/ChartsLegend/piecewiseColorLegendClasses.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useUtilityClasses = exports.piecewiseColorLegendClasses = void 0;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+function getLegendUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiPiecewiseColorLegendClasses', slot);
+}
+const useUtilityClasses = props => {
+  const {
+    classes,
+    direction,
+    labelPosition
+  } = props;
+  const slots = {
+    root: ['root', direction, labelPosition],
+    minLabel: ['minLabel'],
+    maxLabel: ['maxLabel'],
+    item: ['item'],
+    mark: ['mark'],
+    label: ['label']
+  };
+  return (0, _composeClasses.default)(slots, getLegendUtilityClass, classes);
+};
+exports.useUtilityClasses = useUtilityClasses;
+const piecewiseColorLegendClasses = exports.piecewiseColorLegendClasses = (0, _generateUtilityClasses.default)('MuiPiecewiseColorLegendClasses', ['root', 'minLabel', 'maxLabel', 'item', 'vertical', 'horizontal', 'start', 'end', 'extremes', 'mark', 'label']);