victory-bar/es/victory-bar.js

Bar Component for Victory

import React from "react";
import { getBaseProps } from "./helper-methods";
import { Bar } from "./bar";
import { Helpers, VictoryLabel, VictoryContainer, VictoryTheme, addEvents, Data, Domain, UserProps, VictoryClipContainer } from "victory-core";
const fallbackProps = {
  width: 450,
  height: 300,
  padding: 50
};
const defaultData = [{
  x: 1,
  y: 1
}, {
  x: 2,
  y: 2
}, {
  x: 3,
  y: 3
}, {
  x: 4,
  y: 4
}];

// eslint-disable-next-line @typescript-eslint/no-empty-object-type

/**
 * Draw SVG bar charts with React. VictoryBar is a composable component, so it doesn"t include axes
 * Check out VictoryChart for complete bar charts and more.
 */
class VictoryBarBase extends React.Component {
  static animationWhitelist = ["data", "domain", "height", "padding", "style", "width"];
  static displayName = "VictoryBar";
  static role = "bar";
  static defaultTransitions = {
    onLoad: {
      duration: 2000,
      before: () => ({
        _y: 0,
        _y1: 0,
        _y0: 0
      }),
      after: datum => ({
        _y: datum._y,
        _y1: datum._y1,
        _y0: datum._y0
      })
    },
    onExit: {
      duration: 500,
      before: () => ({
        _y: 0,
        yOffset: 0
      })
    },
    onEnter: {
      duration: 500,
      before: () => ({
        _y: 0,
        _y1: 0,
        _y0: 0
      }),
      after: datum => ({
        _y: datum._y,
        _y1: datum._y1,
        _y0: datum._y0
      })
    }
  };
  static defaultProps = {
    containerComponent: /*#__PURE__*/React.createElement(VictoryContainer, null),
    data: defaultData,
    dataComponent: /*#__PURE__*/React.createElement(Bar, null),
    groupComponent: /*#__PURE__*/React.createElement("g", {
      role: "presentation"
    }),
    labelComponent: /*#__PURE__*/React.createElement(VictoryLabel, null),
    samples: 50,
    sortOrder: "ascending",
    standalone: true,
    theme: VictoryTheme.grayscale
  };
  static getDomain = Domain.getDomainWithZero;
  static getData = Data.getData;
  static getBaseProps(props) {
    return getBaseProps(props, fallbackProps);
  }
  static expectedComponents = ["dataComponent", "labelComponent", "groupComponent", "containerComponent"];
  // passed to addEvents.renderData to prevent data props with undefined _x or _y from excluding data from render.
  // used when inside of VictoryZoomContainer
  static shouldRenderDatum = () => true;
  // Overridden in native versions
  shouldAnimate() {
    return !!this.props.animate;
  }
  render() {
    const {
      animationWhitelist,
      role
    } = VictoryBar;
    const props = Helpers.modifyProps(this.props, fallbackProps, role);
    if (this.shouldAnimate()) {
      return this.animateComponent(props, animationWhitelist);
    }
    let children;
    // when inside a zoom container (the only place VictoryClipContainer is used), all data
    // should be renderable so bars won't dissappear before they've fully exited the container's bounds
    // see https://github.com/FormidableLabs/victory/pull/2970
    if (props.groupComponent?.type === VictoryClipContainer) {
      children = this.renderData(props, VictoryBarBase.shouldRenderDatum);
    } else {
      children = this.renderData(props);
    }
    const component = props.standalone ? this.renderContainer(props.containerComponent, children) : children;
    return UserProps.withSafeUserProps(component, props);
  }
}
export const VictoryBar = addEvents(VictoryBarBase);