@devexpress/dx-react-chart-bootstrap4/dist/dx-react-chart-bootstrap4.es.js

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
 */

import { createElement, forwardRef, PureComponent, createRef } from 'react';
import PropTypes from 'prop-types';
import { withComponents } from '@devexpress/dx-react-core';
import { withPatchedProps, Chart as Chart$1, Palette, Legend as Legend$1, Title as Title$1, ScatterSeries as ScatterSeries$1, Axis, ValueAxis as ValueAxis$1, ArgumentAxis as ArgumentAxis$1, Tooltip as Tooltip$1, ZoomAndPan as ZoomAndPan$1 } from '@devexpress/dx-react-chart';
export { AreaSeries, BarSeries, LineSeries, PieSeries, SplineSeries } from '@devexpress/dx-react-chart';
import classNames from 'clsx';
import { RIGHT, TOP } from '@devexpress/dx-chart-core';
import { createPortal } from 'react-dom';
import { Popper } from 'react-popper';

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

  return withPatchedProps(setClassName);
};

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

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

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

const ChartWithPalette = ({
  children,
  ...props
}) => /*#__PURE__*/createElement(Chart$1, props, /*#__PURE__*/createElement(Palette, {
  scheme: palette
}), children);

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

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

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

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

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

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

const Title = withComponents({
  Text
})(Title$1);

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 = withPatchedProps(setClassName)(ScatterSeries$1.Point);

const ScatterSeries = withComponents({
  Point
})(ScatterSeries$1);

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

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

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

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

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

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

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

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__*/forwardRef(({
  placement,
  ...restProps
}, ref) => /*#__PURE__*/createElement("div", _extends({
  className: "arrow",
  ref: ref
}, restProps)));
DefaultArrowComponent.propTypes = {
  placement: PropTypes.string.isRequired
};
class Popover extends 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__*/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__*/createElement(Popper, _extends({
      referenceElement: target,
      modifiers: popperModifiers
    }, restProps), ({
      ref,
      style,
      arrowProps,
      placement
    }) => /*#__PURE__*/createElement("div", {
      className: `popover show bs-popover-${placement}`,
      ref: ref,
      style: style
    }, /*#__PURE__*/createElement("div", {
      className: "popover-inner",
      ref: this.contentRef
    }, children), /*#__PURE__*/createElement(ArrowComponent, _extends({}, arrowProps, {
      placement: restProps.placement
    }))));
  }

  render() {
    const {
      isOpen,
      renderInBody
    } = this.props;
    if (!isOpen) return null;
    return renderInBody ? /*#__PURE__*/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 PureComponent {
  render() {
    const {
      children,
      target,
      rotated,
      ...restProps
    } = this.props;
    return /*#__PURE__*/createElement(Popover, _extends({
      placement: rotated ? RIGHT : 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__*/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__*/forwardRef(({
  className,
  placement,
  ...restProps
}, ref) => /*#__PURE__*/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__*/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 = withComponents({
  Overlay,
  Content,
  Arrow,
  Sheet
})(Tooltip$1);

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

const ZoomAndPan = withComponents({
  DragBox
})(ZoomAndPan$1);

export { ArgumentAxis, Chart, Legend, ScatterSeries, Title, Tooltip, ValueAxis, ZoomAndPan };
//# sourceMappingURL=dx-react-chart-bootstrap4.es.js.map