victory-area
Version:
Area Component for Victory
74 lines (71 loc) • 2.55 kB
JavaScript
import React from "react";
import { getBaseProps } from "./helper-methods";
import { Area } from "./area";
import { Helpers, VictoryLabel, VictoryContainer, DefaultTransitions, VictoryClipContainer, addEvents, VictoryTheme, Data, Domain, UserProps } from "victory-core";
const fallbackProps = {
width: 450,
height: 300,
padding: 50,
interpolation: "linear"
};
const options = {
components: [{
name: "parent",
index: "parent"
}, {
name: "data",
index: "all"
}, {
name: "labels"
}]
};
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
/**
* Draw area charts with React. VictoryArea is a composable component, so it doesn't include axes.
* Add VictoryArea as a child of VictoryChart for a complete chart.
*/
class VictoryAreaBase extends React.Component {
static animationWhitelist = ["data", "domain", "height", "padding", "style", "width"];
static defaultProps = {
containerComponent: /*#__PURE__*/React.createElement(VictoryContainer, null),
dataComponent: /*#__PURE__*/React.createElement(Area, null),
groupComponent: /*#__PURE__*/React.createElement(VictoryClipContainer, null),
labelComponent: /*#__PURE__*/React.createElement(VictoryLabel, {
renderInPortal: true
}),
samples: 50,
sortKey: "x",
sortOrder: "ascending",
standalone: true,
theme: VictoryTheme.grayscale
};
static displayName = "VictoryArea";
static role = "area";
static continuous = true;
static defaultTransitions = DefaultTransitions.continuousTransitions();
static defaultPolarTransitions = DefaultTransitions.continuousPolarTransitions();
static getDomain = Domain.getDomainWithZero;
static getData = Data.getData;
static getBaseProps(props) {
return getBaseProps(props, fallbackProps);
}
static expectedComponents = ["dataComponent", "labelComponent", "groupComponent", "containerComponent"];
// Overridden in native versions
shouldAnimate() {
return !!this.props.animate;
}
render() {
const {
animationWhitelist,
role
} = VictoryAreaBase;
const props = Helpers.modifyProps(this.props, fallbackProps, role);
if (this.shouldAnimate()) {
return this.animateComponent(props, animationWhitelist);
}
const children = this.renderContinuousData(props);
const component = props.standalone ? this.renderContainer(props.containerComponent, children) : children;
return UserProps.withSafeUserProps(component, props);
}
}
export const VictoryArea = addEvents(VictoryAreaBase, options);