@devexpress/dx-react-chart-bootstrap4/dist/dx-react-chart-bootstrap4.umd.cjs

Bootstrap 4 templates for DevExtreme React Chart component

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

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@devexpress/dx-react-core'), require('@devexpress/dx-react-chart'), require('clsx'), require('@devexpress/dx-chart-core'), require('react-dom'), require('react-popper')) :
  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@devexpress/dx-react-core', '@devexpress/dx-react-chart', 'clsx', '@devexpress/dx-chart-core', 'react-dom', 'react-popper'], factory) :
  (global = global || self, factory((global.DevExpress = global.DevExpress || {}, global.DevExpress.DXReactChartBootstrap4 = {}), global.React, global.PropTypes, global.dxReactCore, global.dxReactChart, global.classNames, global.dxChartCore, global.ReactDOM, global.reactPopper));
}(this, (function (exports, React, PropTypes, dxReactCore, dxReactChart, classNames, dxChartCore, ReactDOM, reactPopper) { 'use strict';

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

  PropTypes = PropTypes && Object.prototype.hasOwnProperty.call(PropTypes, 'default') ? PropTypes['default'] : PropTypes;
  classNames = classNames && Object.prototype.hasOwnProperty.call(classNames, 'default') ? classNames['default'] : classNames;

  const withClassName = (...args) => {
    const setClassName = ({
      className,
      ...restProps
    }) => ({
      className: classNames(...args, className),
      ...restProps
    });

    return dxReactChart.withPatchedProps(setClassName);
  };

  const Root = withClassName('dx-c-bs4-container')(dxReactChart.Chart.Root);

  const Label = withClassName('dx-c-bs4-fill-current-color', 'dx-c-bs4-label', 'text-muted')(dxReactChart.Chart.Label);

  const palette = ['#0070ff', '#d72e3d', '#249d3d', '#ffb90c', '#1698af', '#616a72'];

  const ChartWithPalette = ({
    children,
    ...props
  }) => /*#__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;
  const Chart = dxReactCore.withComponents({
    Root
  })(ChartWithPalette);
  Chart.Label = Label;

  const Root$1 = withClassName('list-group', 'py-3')(props => /*#__PURE__*/React.createElement("ul", props));

  const Label$1 = withClassName('text-body', 'pl-2', 'pr-2')(({
    text,
    ...restProps
  }) => /*#__PURE__*/React.createElement("span", restProps, text));

  const Item = withClassName('d-flex', 'list-group-item', 'border-0', 'py-1', 'px-4', 'align-items-center')(props => /*#__PURE__*/React.createElement("li", props));

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

  const Text = withClassName('w-100', 'text-center', 'mb-3')(({
    text,
    ...restProps
  }) => /*#__PURE__*/React.createElement("h3", restProps, text));

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

  const setClassName = ({
    classes,
    ...restProps
  }) => {
    if (restProps.state) {
      const {
        className,
        ...rest
      } = restProps;
      return {
        className: classNames('dx-c-bs4-fill-background-color', className),
        ...rest
      };
    }

    return restProps;
  };

  const Point = dxReactChart.withPatchedProps(setClassName)(dxReactChart.ScatterSeries.Point);

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

  const Root$2 = withClassName('dx-c-bs4-crisp-edges')(dxReactChart.Axis.Root);

  const Tick = withClassName('dx-c-bs4-stroke-current-color', 'dx-c-bs4-crisp-edges', 'dx-c-bs4-axis-opacity')(dxReactChart.Axis.Tick);

  const Label$2 = withClassName('dx-c-bs4-fill-current-color', 'dx-c-bs4-label', 'text-muted')(dxReactChart.Axis.Label);

  const Line = withClassName('dx-c-bs4-stroke-current-color', 'dx-c-bs4-axis-opacity')(dxReactChart.Axis.Line);

  const Grid = withClassName('dx-c-bs4-stroke-current-color', 'dx-c-bs4-crisp-edges', 'dx-c-bs4-axis-opacity')(dxReactChart.Axis.Grid);

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

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

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

  const DefaultArrowComponent = /*#__PURE__*/React.forwardRef(({
    placement,
    ...restProps
  }, ref) => /*#__PURE__*/React.createElement("div", _extends({
    className: "arrow",
    ref: ref
  }, restProps)));
  DefaultArrowComponent.propTypes = {
    placement: PropTypes.string.isRequired
  };
  class Popover extends React.PureComponent {
    constructor(props) {
      super(props); // These two fields should be created only if `isOpen && toggle` condition is true
      // and destroyed when condition turns false.
      // But it would require usage of `this.state` and other code complications.
      // So let's not change it for now. Maybe a better solution would be found.

      this.contentRef = /*#__PURE__*/React.createRef();
      this.handleClick = this.handleClick.bind(this);
    }

    componentDidMount() {
      const {
        isOpen,
        toggle
      } = this.props;

      if (isOpen && toggle) {
        this.attachDocumentEvents();
      }
    }

    componentDidUpdate() {
      const {
        isOpen,
        toggle
      } = this.props;

      if (isOpen && toggle) {
        this.attachDocumentEvents();
      } else {
        this.detachDocumentEvents();
      }
    }

    componentWillUnmount() {
      this.detachDocumentEvents();
    }

    handleClick(e) {
      const {
        target: eventTarget
      } = e;
      const {
        current: contentNode
      } = this.contentRef;
      const {
        toggle,
        target
      } = this.props;

      if (contentNode && !contentNode.contains(eventTarget) && !target.contains(eventTarget)) {
        toggle();
      }
    }

    attachDocumentEvents() {
      if (!this.listenersAttached) {
        this.toggleDocumentEvents('addEventListener');
        this.listenersAttached = true;
      }
    }

    detachDocumentEvents() {
      if (this.listenersAttached) {
        this.toggleDocumentEvents('removeEventListener');
        this.listenersAttached = false;
      }
    }

    toggleDocumentEvents(method) {
      ['click', 'touchstart'].forEach(eventType => {
        document[method](eventType, this.handleClick, true);
      });
    }

    renderPopper() {
      const {
        children,
        target,
        renderInBody,
        arrowComponent: ArrowComponent,
        modifiers = [],
        ...restProps
      } = this.props;
      const popperModifiers = [{
        name: 'offset',
        options: {
          offset: [0, 8]
        }
      }, ...modifiers];
      return /*#__PURE__*/React.createElement(reactPopper.Popper, _extends({
        referenceElement: target,
        modifiers: popperModifiers
      }, restProps), ({
        ref,
        style,
        arrowProps,
        placement
      }) => /*#__PURE__*/React.createElement("div", {
        className: `popover show bs-popover-${placement}`,
        ref: ref,
        style: style
      }, /*#__PURE__*/React.createElement("div", {
        className: "popover-inner",
        ref: this.contentRef
      }, children), /*#__PURE__*/React.createElement(ArrowComponent, _extends({}, arrowProps, {
        placement: restProps.placement
      }))));
    }

    render() {
      const {
        isOpen,
        renderInBody
      } = this.props;
      if (!isOpen) return null;
      return renderInBody ? /*#__PURE__*/ReactDOM.createPortal(this.renderPopper(), document.body) : this.renderPopper();
    }

  }
  process.env.NODE_ENV !== "production" ? Popover.propTypes = {
    renderInBody: PropTypes.bool,
    placement: PropTypes.string,
    isOpen: PropTypes.bool,
    children: PropTypes.node.isRequired,
    target: PropTypes.oneOfType([PropTypes.instanceOf(typeof Element !== 'undefined' ? Element : Object), PropTypes.object]),
    toggle: PropTypes.func,
    arrowComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
  } : void 0;
  Popover.defaultProps = {
    target: null,
    renderInBody: true,
    isOpen: false,
    placement: 'auto',
    toggle: undefined,
    arrowComponent: DefaultArrowComponent
  };

  const popperModifiers = [{
    name: 'flip',
    enabled: false
  }, {
    name: 'preventOverflow',
    options: {
      altAxis: true
    }
  }];
  class Overlay extends React.PureComponent {
    render() {
      const {
        children,
        target,
        rotated,
        ...restProps
      } = this.props;
      return /*#__PURE__*/React.createElement(Popover, _extends({
        placement: rotated ? dxChartCore.RIGHT : dxChartCore.TOP,
        isOpen: true,
        target: target,
        modifiers: popperModifiers
      }, restProps), children);
    }

  }
  process.env.NODE_ENV !== "production" ? Overlay.propTypes = {
    children: PropTypes.node.isRequired,
    target: PropTypes.any.isRequired,
    rotated: PropTypes.bool.isRequired,
    arrowComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired
  } : void 0;

  const Content = ({
    text,
    targetItem,
    ...restProps
  }) => /*#__PURE__*/React.createElement("span", restProps, text);
  process.env.NODE_ENV !== "production" ? Content.propTypes = {
    text: PropTypes.string.isRequired,
    targetItem: PropTypes.shape({
      series: PropTypes.string.isRequired,
      point: PropTypes.number.isRequired
    })
  } : void 0;
  Content.defaultProps = {
    targetItem: undefined
  };

  const Arrow = /*#__PURE__*/React.forwardRef(({
    className,
    placement,
    ...restProps
  }, ref) => /*#__PURE__*/React.createElement("div", _extends({
    className: classNames('arrow', className),
    ref: ref
  }, restProps)));
  Arrow.propTypes = {
    placement: PropTypes.string.isRequired,
    className: PropTypes.string
  };
  Arrow.defaultProps = {
    className: undefined
  };

  const Sheet = ({
    className,
    ...restProps
  }) => /*#__PURE__*/React.createElement("div", _extends({
    className: classNames('popover-body', className)
  }, restProps));
  process.env.NODE_ENV !== "production" ? Sheet.propTypes = {
    className: PropTypes.string
  } : void 0;
  Sheet.defaultProps = {
    className: undefined
  };

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

  const DragBox = withClassName('bg-secondary', 'dx-c-bs4-rect-opacity')(dxReactChart.ZoomAndPan.DragBox);

  const ZoomAndPan = dxReactCore.withComponents({
    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;

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

})));
//# sourceMappingURL=dx-react-chart-bootstrap4.umd.cjs.map