@devexpress/dx-react-chart-material-ui/dist/dx-react-chart-material-ui.cjs.cjs

Material-UI templates for DevExtreme React Chart component

/**
 * Bundle of @devexpress/dx-react-chart-material-ui
 * Generated: 2025-05-05
 * Version: 4.0.11
 * License: https://js.devexpress.com/Licensing
 */

'use strict';

if (typeof process === "undefined") { var process = { env: {} }; }

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var PropTypes = _interopDefault(require('prop-types'));
var dxReactCore = require('@devexpress/dx-react-core');
var dxReactChart = require('@devexpress/dx-react-chart');
var material = require('@mui/material');
var classNames = _interopDefault(require('clsx'));
var dxChartCore = require('@devexpress/dx-chart-core');

function ownKeys(object, enumerableOnly) {
  var keys = Object.keys(object);

  if (Object.getOwnPropertySymbols) {
    var symbols = Object.getOwnPropertySymbols(object);

    if (enumerableOnly) {
      symbols = symbols.filter(function (sym) {
        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
      });
    }

    keys.push.apply(keys, symbols);
  }

  return keys;
}

function _objectSpread2(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};

    if (i % 2) {
      ownKeys(Object(source), true).forEach(function (key) {
        _defineProperty(target, key, source[key]);
      });
    } else if (Object.getOwnPropertyDescriptors) {
      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
    } else {
      ownKeys(Object(source)).forEach(function (key) {
        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
      });
    }
  }

  return target;
}

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends.apply(this, arguments);
}

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

function _objectWithoutProperties(source, excluded) {
  if (source == null) return {};

  var target = _objectWithoutPropertiesLoose(source, excluded);

  var key, i;

  if (Object.getOwnPropertySymbols) {
    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);

    for (i = 0; i < sourceSymbolKeys.length; i++) {
      key = sourceSymbolKeys[i];
      if (excluded.indexOf(key) >= 0) continue;
      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
      target[key] = source[key];
    }
  }

  return target;
}

function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}

function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}

function _iterableToArrayLimit(arr, i) {
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];

  if (_i == null) return;
  var _arr = [];
  var _n = true;
  var _d = false;

  var _s, _e;

  try {
    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
      _arr.push(_s.value);

      if (i && _arr.length === i) break;
    }
  } catch (err) {
    _d = true;
    _e = err;
  } finally {
    try {
      if (!_n && _i["return"] != null) _i["return"]();
    } finally {
      if (_d) throw _e;
    }
  }

  return _arr;
}

function _unsupportedIterableToArray(o, minLen) {
  if (!o) return;
  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === "Object" && o.constructor) n = o.constructor.name;
  if (n === "Map" || n === "Set") return Array.from(o);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}

function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length) len = arr.length;

  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];

  return arr2;
}

function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

var _excluded = ["className"];
var getBorderColor = function getBorderColor(theme) {
  return theme.palette.mode === 'light' ? material.lighten(material.alpha(theme.palette.divider, 1), 0.88) : material.darken(material.alpha(theme.palette.divider, 1), 0.68);
};
var PREFIX = 'Target';
var classes = {
  root: "".concat(PREFIX, "-root")
};
var withClassName = function withClassName() {
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
    args[_key] = arguments[_key];
  }

  var setClassName = function setClassName(_ref) {
    var className = _ref.className,
        restProps = _objectWithoutProperties(_ref, _excluded);

    return _objectSpread2({
      className: classNames(classes.root, className)
    }, restProps);
  }; // TODO: First candidate to `compose` util?


  return function (Target) {
    return material.styled(dxReactChart.withPatchedProps(setClassName)(Target)).apply(void 0, args);
  };
};

var styles = function styles(_ref) {
  var theme = _ref.theme;
  var _theme$typography = theme.typography,
      fontFamily = _theme$typography.fontFamily,
      fontSize = _theme$typography.fontSize,
      fontWeightLight = _theme$typography.fontWeightLight;
  return _defineProperty({}, "&.".concat(classes.root), {
    fontFamily: fontFamily,
    fontSize: fontSize,
    fontWeight: fontWeightLight,
    display: 'flex',
    flexDirection: 'column',
    padding: '10px',
    boxSizing: 'border-box'
  });
};

var Root = withClassName(styles)(dxReactChart.Chart.Root);

var styles$1 = function styles(_ref) {
  var theme = _ref.theme;
  var fontFamily = theme.typography.fontFamily;
  return _defineProperty({}, "&.".concat(classes.root), {
    fill: theme.palette.text.secondary,
    fontFamily: fontFamily,
    fontSize: 12,
    fontWeight: 400
  });
};

var Label = withClassName(styles$1)(dxReactChart.Chart.Label);

var _excluded$1 = ["children"];
var palette = ['#42A5F5', '#FF7043', '#9CCC65', '#FFCA28', '#26A69A', '#EC407A'];

var ChartWithPalette = function ChartWithPalette(_ref) {
  var children = _ref.children,
      props = _objectWithoutProperties(_ref, _excluded$1);

  return /*#__PURE__*/React.createElement(dxReactChart.Chart, props, /*#__PURE__*/React.createElement(dxReactChart.Palette, {
    scheme: palette
  }), children);
};

ChartWithPalette.components = dxReactChart.Chart.components;
process.env.NODE_ENV !== "production" ? ChartWithPalette.propTypes = {
  children: PropTypes.node.isRequired
} : void 0;
var Chart = dxReactCore.withComponents({
  Root: Root
})(ChartWithPalette);
Chart.Label = Label;

var styles$2 = function styles() {
  return _defineProperty({}, "&.".concat(classes.root), {
    paddingTop: 16,
    paddingBottom: 16
  });
};

var Root$1 = withClassName(styles$2, {
  name: 'LegendRoot'
})(material.List);

var _excluded$2 = ["text"];

var styles$3 = function styles() {
  return _defineProperty({}, "&.".concat(classes.root), {
    fontSize: 14,
    paddingLeft: 8,
    paddingRight: 8
  });
};

var Label$1 = withClassName(styles$3, {
  name: 'LegendLabel'
})(function (_ref2) {
  var text = _ref2.text,
      restProps = _objectWithoutProperties(_ref2, _excluded$2);

  return /*#__PURE__*/React.createElement(material.ListItemText, restProps, text);
});

var styles$4 = function styles(_ref) {
  var theme = _ref.theme;
  return _defineProperty({}, "&.".concat(classes.root), {
    alignItems: 'center',
    paddingTop: theme.spacing(0.5),
    paddingBottom: theme.spacing(0.5)
  });
};

var Item = withClassName(styles$4, {
  name: 'LegendItem'
})(material.ListItem);

var Legend = dxReactCore.withComponents({
  Root: Root$1,
  Item: Item,
  Label: Label$1
})(dxReactChart.Legend);

var _excluded$3 = ["text"];

var styles$5 = function styles() {
  return _defineProperty({}, "&.".concat(classes.root), {
    textAlign: 'center',
    width: '100%',
    marginBottom: '20px'
  });
};

var Text = withClassName(styles$5, {
  name: 'Title'
})(function (_ref2) {
  var text = _ref2.text,
      restProps = _objectWithoutProperties(_ref2, _excluded$3);

  return /*#__PURE__*/React.createElement(material.Typography, _extends({
    component: "h3",
    variant: "h5"
  }, restProps), text);
});

var Title = dxReactCore.withComponents({
  Text: Text
})(dxReactChart.Title);

var _excluded$4 = ["className"];
var PREFIX$1 = 'Point';
var classes$1 = {
  point: "".concat(PREFIX$1, "-point")
};

var setClassName = function setClassName(props) {
  if (props.state) {
    var className = props.className,
        rest = _objectWithoutProperties(props, _excluded$4);

    return _objectSpread2({
      className: classNames(classes$1.point, className)
    }, rest);
  }

  return props;
};

var Point = material.styled(dxReactChart.withPatchedProps(setClassName)(dxReactChart.ScatterSeries.Point))(function (_ref) {
  var theme = _ref.theme;
  return _defineProperty({}, "&.".concat(classes$1.point), {
    fill: theme.palette.background.paper
  });
});

var ScatterSeries = dxReactCore.withComponents({
  Point: Point
})(dxReactChart.ScatterSeries);

var styles$6 = function styles() {
  return _defineProperty({}, "&.".concat(classes.root), {
    shapeRendering: 'crispEdges'
  });
};

var Root$2 = withClassName(styles$6)(dxReactChart.Axis.Root);

var styles$7 = function styles(_ref) {
  var theme = _ref.theme;
  return _defineProperty({}, "&.".concat(classes.root), {
    stroke: getBorderColor(theme),
    shapeRendering: 'crispEdges'
  });
};

var Tick = withClassName(styles$7)(dxReactChart.Axis.Tick);

var styles$8 = function styles(_ref) {
  var theme = _ref.theme;
  var fontFamily = theme.typography.fontFamily;
  return _defineProperty({}, "&.".concat(classes.root), {
    fill: theme.palette.text.secondary,
    fontFamily: fontFamily,
    fontSize: 12,
    fontWeight: 400,
    backgroundColor: theme.palette.background.paper
  });
};

var Label$2 = withClassName(styles$8)(dxReactChart.Axis.Label);

var styles$9 = function styles(_ref) {
  var theme = _ref.theme;
  return _defineProperty({}, "&.".concat(classes.root), {
    stroke: getBorderColor(theme),
    shapeRendering: 'crispEdges'
  });
};

var Line = withClassName(styles$9)(dxReactChart.Axis.Line);

var styles$a = function styles(_ref) {
  var theme = _ref.theme;
  return _defineProperty({}, "&.".concat(classes.root), {
    stroke: getBorderColor(theme),
    shapeRendering: 'crispEdges'
  });
};

var Grid = withClassName(styles$a)(dxReactChart.Axis.Grid);

var ValueAxis = dxReactCore.withComponents({
  Root: Root$2,
  Tick: Tick,
  Label: Label$2,
  Line: Line,
  Grid: Grid
})(dxReactChart.ValueAxis);

var ArgumentAxis = dxReactCore.withComponents({
  Root: Root$2,
  Tick: Tick,
  Label: Label$2,
  Line: Line,
  Grid: Grid
})(dxReactChart.ArgumentAxis);

var _excluded$5 = ["className", "children", "target", "rotated", "arrowComponent"];
var PREFIX$2 = 'Overlay';
var classes$2 = {
  popper: "".concat(PREFIX$2, "-popper")
};
var StyledPopper = material.styled(material.Popper)(function () {
  return _defineProperty({}, "&.".concat(classes$2.popper), {
    zIndex: 1
  });
});

var popperModifiers = function popperModifiers(arrowRef) {
  return [{
    name: 'flip',
    enabled: false
  }, {
    name: 'arrow',
    enabled: true,
    options: {
      element: arrowRef
    }
  }, {
    name: 'offset',
    options: {
      offset: [0, 9]
    }
  }, {
    name: 'preventOverflow',
    options: {
      altAxis: true
    }
  }];
};

var Overlay = function Overlay(_ref2) {
  var className = _ref2.className,
      children = _ref2.children,
      target = _ref2.target,
      rotated = _ref2.rotated,
      ArrowComponent = _ref2.arrowComponent,
      restProps = _objectWithoutProperties(_ref2, _excluded$5);

  var _React$useState = React.useState(null),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      arrowRef = _React$useState2[0],
      setArrowRef = _React$useState2[1];

  var placement = rotated ? dxChartCore.RIGHT : dxChartCore.TOP;
  return /*#__PURE__*/React.createElement(StyledPopper, _extends({
    open: true,
    anchorEl: target,
    placement: placement,
    className: classNames(classes$2.popper, className),
    modifiers: popperModifiers(arrowRef)
  }, restProps), children, /*#__PURE__*/React.createElement(ArrowComponent, {
    placement: placement,
    ref: setArrowRef
  }));
};
process.env.NODE_ENV !== "production" ? Overlay.propTypes = {
  className: PropTypes.string,
  children: PropTypes.node.isRequired,
  target: PropTypes.any.isRequired,
  rotated: PropTypes.bool.isRequired,
  arrowComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired
} : void 0;
Overlay.defaultProps = {
  className: undefined
};

var _excluded$6 = ["text", "targetItem"];

var styles$b = function styles(_ref) {
  var theme = _ref.theme;
  return _defineProperty({}, "&.".concat(classes.root), {
    fontSize: 14,
    padding: theme.spacing(0.5)
  });
};

var Content = withClassName(styles$b, {
  name: 'TooltipContent'
})(function (_ref3) {
  var text = _ref3.text,
      targetItem = _ref3.targetItem,
      restProps = _objectWithoutProperties(_ref3, _excluded$6);

  return /*#__PURE__*/React.createElement(material.Typography, restProps, text);
});

var _excluded$7 = ["className", "placement"];
var PREFIX$3 = 'Arrow';
var classes$3 = {
  'arrow-top': "".concat(PREFIX$3, "-arrow-top"),
  'arrow-right': "".concat(PREFIX$3, "-arrow-right")
};
var Root$3 = material.styled('div')(function (_ref) {
  var _ref2;

  var theme = _ref.theme;
  var arrowSize = theme.spacing(1.2);
  var arrowWidth = theme.spacing(2.4);
  return _ref2 = {}, _defineProperty(_ref2, "&.".concat(classes$3['arrow-top']), {
    width: arrowWidth,
    height: arrowSize,
    position: 'absolute',
    top: '100%',
    overflow: 'hidden',
    '&::after': {
      content: '""',
      position: 'absolute',
      width: arrowSize,
      height: arrowSize,
      background: theme.palette.background.paper,
      transform: 'translateX(-50%) translateY(-50%) rotate(45deg)',
      left: '50%',
      boxShadow: theme.shadows[2]
    }
  }), _defineProperty(_ref2, "&.".concat(classes$3['arrow-right']), {
    width: arrowSize,
    height: arrowWidth,
    position: 'absolute',
    top: '25%',
    transform: 'translateX(-100%)',
    overflow: 'hidden',
    '&::after': {
      content: '""',
      position: 'absolute',
      width: arrowSize,
      height: arrowSize,
      background: theme.palette.background.paper,
      transform: 'translateX(-50%) translateY(-50%) rotate(45deg)',
      top: '50%',
      left: '100%',
      boxShadow: theme.shadows[2]
    }
  }), _ref2;
});
var Arrow = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
  var className = _ref3.className,
      placement = _ref3.placement,
      restProps = _objectWithoutProperties(_ref3, _excluded$7);

  return /*#__PURE__*/React.createElement(Root$3, _extends({
    className: classNames(classes$3["arrow-".concat(placement)], className),
    ref: ref
  }, restProps));
});
Arrow.propTypes = {
  placement: PropTypes.string.isRequired,
  className: PropTypes.string
};
Arrow.defaultProps = {
  className: undefined
};

var styles$c = function styles(_ref) {
  var theme = _ref.theme;
  return _defineProperty({}, "&.".concat(classes.root), {
    padding: theme.spacing(0.5, 1)
  });
};

var Sheet = withClassName(styles$c)(function (props) {
  return /*#__PURE__*/React.createElement(material.Paper, props);
});

var Tooltip = dxReactCore.withComponents({
  Overlay: Overlay,
  Content: Content,
  Sheet: Sheet,
  Arrow: Arrow
})(dxReactChart.Tooltip);

var styles$d = function styles(_ref) {
  var theme = _ref.theme;
  return _defineProperty({}, "&.".concat(classes.root), {
    fill: theme.palette.primary.main,
    opacity: 0.2
  });
};

var DragBox = withClassName(styles$d)(dxReactChart.ZoomAndPan.DragBox);

var ZoomAndPan = dxReactCore.withComponents({
  DragBox: DragBox
})(dxReactChart.ZoomAndPan);

Object.defineProperty(exports, 'AreaSeries', {
  enumerable: true,
  get: function () {
    return dxReactChart.AreaSeries;
  }
});
Object.defineProperty(exports, 'BarSeries', {
  enumerable: true,
  get: function () {
    return dxReactChart.BarSeries;
  }
});
Object.defineProperty(exports, 'LineSeries', {
  enumerable: true,
  get: function () {
    return dxReactChart.LineSeries;
  }
});
Object.defineProperty(exports, 'PieSeries', {
  enumerable: true,
  get: function () {
    return dxReactChart.PieSeries;
  }
});
Object.defineProperty(exports, 'SplineSeries', {
  enumerable: true,
  get: function () {
    return dxReactChart.SplineSeries;
  }
});
exports.ArgumentAxis = ArgumentAxis;
exports.Chart = Chart;
exports.Legend = Legend;
exports.ScatterSeries = ScatterSeries;
exports.Title = Title;
exports.Tooltip = Tooltip;
exports.ValueAxis = ValueAxis;
exports.ZoomAndPan = ZoomAndPan;
//# sourceMappingURL=dx-react-chart-material-ui.cjs.cjs.map