victory-legend
Version:
Legend Component for Victory
94 lines (92 loc) • 3.61 kB
JavaScript
import React from "react";
import { getBaseProps, getDimensions } from "./helper-methods";
import { addEvents, Helpers, VictoryLabel, VictoryContainer, VictoryTheme, Point, Border } from "victory-core";
const fallbackProps = {
orientation: "vertical",
titleOrientation: "top",
width: 450,
height: 300,
x: 0,
y: 0
};
const defaultLegendData = [{
name: "Series 1"
}, {
name: "Series 2"
}];
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
class VictoryLegendBase extends React.Component {
static displayName = "VictoryLegend";
static role = "legend";
static defaultProps = {
borderComponent: /*#__PURE__*/React.createElement(Border, null),
data: defaultLegendData,
containerComponent: /*#__PURE__*/React.createElement(VictoryContainer, null),
dataComponent: /*#__PURE__*/React.createElement(Point, null),
groupComponent: /*#__PURE__*/React.createElement("g", null),
labelComponent: /*#__PURE__*/React.createElement(VictoryLabel, null),
standalone: true,
theme: VictoryTheme.grayscale,
titleComponent: /*#__PURE__*/React.createElement(VictoryLabel, null)
};
static getBaseProps(props) {
return getBaseProps(props, fallbackProps);
}
static getDimensions(props) {
return getDimensions(props, fallbackProps);
}
static expectedComponents = ["borderComponent", "containerComponent", "dataComponent", "groupComponent", "labelComponent", "titleComponent"];
renderChildren(props) {
const {
dataComponent,
labelComponent,
title
} = props;
const children = [];
if (props.borderComponent) {
const borderProps = this.getComponentProps(props.borderComponent, "border", "all");
const borderComponent = /*#__PURE__*/React.cloneElement(props.borderComponent, borderProps);
children.push(borderComponent);
}
if (dataComponent) {
const dataComponents = this.dataKeys.map((_dataKey, index) => {
if (_dataKey === "all") {
return undefined;
}
const dataProps = this.getComponentProps(dataComponent, "data", index);
return /*#__PURE__*/React.cloneElement(dataComponent, dataProps);
}).filter(comp => comp !== undefined);
children.push(...dataComponents);
}
if (title && props.titleComponent) {
const titleProps = this.getComponentProps(title, "title", "all");
const titleComponent = /*#__PURE__*/React.cloneElement(props.titleComponent, titleProps);
children.push(titleComponent);
}
if (labelComponent) {
const labelComponents = this.dataKeys.map((_dataKey, index) => {
if (_dataKey === "all") {
return undefined;
}
const labelProps = this.getComponentProps(labelComponent, "labels", index);
if (labelProps.text !== undefined && labelProps.text !== null) {
return /*#__PURE__*/React.cloneElement(labelComponent, labelProps);
}
return undefined;
}).filter(comp => comp !== undefined);
children.push(...labelComponents);
}
return children;
}
render() {
// @ts-expect-error Property 'role' does not exist on type 'Function'.
// Ref: https://github.com/microsoft/TypeScript/issues/32452
const {
role
} = this.constructor;
const props = Helpers.modifyProps(this.props, fallbackProps, role);
const children = this.renderChildren(props);
return props.standalone ? this.renderContainer(props.containerComponent, children) : /*#__PURE__*/React.cloneElement(props.groupComponent, {}, children);
}
}
export const VictoryLegend = addEvents(VictoryLegendBase);