victory-chart/lib/victory-chart.js

Chart Component for Victory

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.VictoryChart = void 0;
var _react = _interopRequireDefault(require("react"));
var _defaults = _interopRequireDefault(require("lodash/defaults"));
var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
var _victoryCore = require("victory-core");
var _victorySharedEvents = require("victory-shared-events");
var _victoryAxis = require("victory-axis");
var _victoryPolarAxis = require("victory-polar-axis");
var _helperMethods = require("./helper-methods");
var _reactFastCompare = _interopRequireDefault(require("react-fast-compare"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const fallbackProps = {
  width: 450,
  height: 300,
  padding: 50
};
const defaultProps = {
  backgroundComponent: /*#__PURE__*/_react.default.createElement(_victoryCore.Background, null),
  containerComponent: /*#__PURE__*/_react.default.createElement(_victoryCore.VictoryContainer, null),
  defaultAxes: {
    independent: /*#__PURE__*/_react.default.createElement(_victoryAxis.VictoryAxis, null),
    dependent: /*#__PURE__*/_react.default.createElement(_victoryAxis.VictoryAxis, {
      dependentAxis: true
    })
  },
  defaultPolarAxes: {
    independent: /*#__PURE__*/_react.default.createElement(_victoryPolarAxis.VictoryPolarAxis, null),
    dependent: /*#__PURE__*/_react.default.createElement(_victoryPolarAxis.VictoryPolarAxis, {
      dependentAxis: true
    })
  },
  groupComponent: /*#__PURE__*/_react.default.createElement("g", null),
  standalone: true,
  theme: _victoryCore.VictoryTheme.grayscale
};
const VictoryChartImpl = initialProps => {
  const propsWithDefaults = _react.default.useMemo(() => (0, _defaults.default)({}, initialProps, defaultProps), [initialProps]);
  const role = "chart";
  const {
    getAnimationProps,
    setAnimationState,
    getProps
  } = _victoryCore.Hooks.useAnimationState();
  const props = getProps(propsWithDefaults);
  const modifiedProps = _victoryCore.Helpers.modifyProps(props, fallbackProps, role);
  const {
    desc,
    eventKey,
    containerComponent,
    standalone,
    groupComponent,
    externalEventMutations,
    width,
    height,
    theme,
    polar,
    name,
    title
  } = modifiedProps;
  const axes = props.polar ? modifiedProps.defaultPolarAxes : modifiedProps.defaultAxes;
  const childComponents = _react.default.useMemo(() => (0, _helperMethods.getChildComponents)(modifiedProps, axes), [modifiedProps, axes]);
  const calculatedProps = _react.default.useMemo(() => (0, _helperMethods.getCalculatedProps)(modifiedProps, childComponents), [modifiedProps, childComponents]);
  const {
    domain,
    scale,
    style,
    origin,
    horizontal
  } = calculatedProps;
  const newChildren = _react.default.useMemo(() => {
    const children = (0, _helperMethods.getChildren)(props, childComponents, calculatedProps);
    const mappedChildren = children.map((child, index) => {
      const childProps = Object.assign({
        animate: getAnimationProps(props, child, index)
      }, child.props);
      return /*#__PURE__*/_react.default.cloneElement(child, childProps);
    });
    if (props.style && props.style.background) {
      const backgroundComponent = (0, _helperMethods.getBackgroundWithProps)(props, calculatedProps);
      mappedChildren.unshift(backgroundComponent);
    }
    return mappedChildren;
  }, [getAnimationProps, childComponents, props, calculatedProps]);
  const containerProps = _react.default.useMemo(() => {
    if (standalone) {
      return {
        desc,
        domain,
        width,
        height,
        horizontal,
        name,
        origin: polar ? origin : undefined,
        polar,
        theme,
        title,
        scale,
        standalone,
        style: style.parent
      };
    }
    return {};
  }, [desc, domain, height, horizontal, name, origin, polar, scale, standalone, style, title, theme, width]);
  const container = _react.default.useMemo(() => {
    if (standalone) {
      const defaultContainerProps = (0, _defaults.default)({}, containerComponent.props, containerProps, _victoryCore.UserProps.getSafeUserProps(propsWithDefaults));
      return /*#__PURE__*/_react.default.cloneElement(containerComponent, defaultContainerProps);
    }
    return groupComponent;
  }, [groupComponent, standalone, containerComponent, containerProps, propsWithDefaults]);
  const events = _react.default.useMemo(() => {
    return _victoryCore.Wrapper.getAllEvents(props);
  }, [props]);
  const previousProps = _victoryCore.Hooks.usePreviousProps(propsWithDefaults);
  _react.default.useEffect(() => {
    // This is called before dismount to keep state in sync
    return () => {
      if (propsWithDefaults.animate) {
        setAnimationState(previousProps, propsWithDefaults);
      }
    };
  }, [setAnimationState, previousProps, propsWithDefaults]);
  if (!(0, _isEmpty.default)(events)) {
    return /*#__PURE__*/_react.default.createElement(_victorySharedEvents.VictorySharedEvents, {
      container: container,
      eventKey: eventKey,
      events: events,
      externalEventMutations: externalEventMutations
    }, newChildren);
  }
  return /*#__PURE__*/_react.default.cloneElement(container, container.props, newChildren);
};
const VictoryChart = exports.VictoryChart = /*#__PURE__*/_react.default.memo(VictoryChartImpl, _reactFastCompare.default);
VictoryChart.displayName = "VictoryChart";
// @ts-expect-error FIXME: Does this "expectedComponents" do anything?
VictoryChart.expectedComponents = ["groupComponent", "containerComponent"];