@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
70 lines • 4.26 kB
JavaScript
import { __rest } from "tslib";
import * as React from 'react';
import hoistNonReactStatics from 'hoist-non-react-statics';
import { VictoryLegend } from 'victory-legend';
import { ChartContainer } from '../ChartContainer';
import { ChartLabel } from '../ChartLabel';
import { ChartPoint } from '../ChartPoint';
import { getTheme } from '../ChartUtils';
export var ChartLegendOrientation;
(function (ChartLegendOrientation) {
ChartLegendOrientation["horizontal"] = "horizontal";
ChartLegendOrientation["vertical"] = "vertical";
})(ChartLegendOrientation || (ChartLegendOrientation = {}));
export var ChartLegendPosition;
(function (ChartLegendPosition) {
ChartLegendPosition["bottom"] = "bottom";
ChartLegendPosition["bottomLeft"] = "bottom-left";
ChartLegendPosition["right"] = "right";
})(ChartLegendPosition || (ChartLegendPosition = {}));
export var ChartLegendRowGutter;
(function (ChartLegendRowGutter) {
ChartLegendRowGutter["bottom"] = "bottom";
ChartLegendRowGutter["top"] = "top";
})(ChartLegendRowGutter || (ChartLegendRowGutter = {}));
export const ChartLegend = (_a) => {
var { colorScale, containerComponent = React.createElement(ChartContainer, null), dataComponent = React.createElement(ChartPoint, null), labelComponent = React.createElement(ChartLabel, null), name, patternScale, responsive = true, style, themeColor,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
themeVariant, titleComponent = React.createElement(ChartLabel, null),
// destructure last
theme = getTheme(themeColor) } = _a, rest = __rest(_a, ["colorScale", "containerComponent", "dataComponent", "labelComponent", "name", "patternScale", "responsive", "style", "themeColor", "themeVariant", "titleComponent", "theme"]);
// Merge pattern IDs with `style.data.fill` property
const getDefaultStyle = () => {
if (!patternScale) {
return style;
}
// Note: ChartLegendTooltipContent overrides patterns via `data.symbol.fill` property
const _style = style ? Object.assign({}, style) : {};
_style.data = Object.assign({ fill: ({ index }) => {
const themeColor = theme && theme.legend && theme.legend.colorScale
? theme.legend.colorScale[index % theme.legend.colorScale.length]
: undefined;
const color = colorScale ? colorScale[index % colorScale.length] : themeColor; // Sync color scale
const pattern = patternScale[index % patternScale.length];
return pattern ? pattern : color;
} }, _style.data);
return _style;
};
// Clone so users can override container props
const container = React.cloneElement(containerComponent, Object.assign({ responsive,
theme }, containerComponent.props));
const getLabelComponent = () => React.cloneElement(labelComponent, Object.assign(Object.assign({}, (name && { id: (props) => `${name}-${labelComponent.type.displayName}-${props.index}` })), labelComponent.props));
const getTitleComponent = () => React.cloneElement(titleComponent, Object.assign(Object.assign({}, (name && { id: () => `${name}-${titleComponent.type.displayName}` })), titleComponent.props));
// Note: containerComponent is required for theme
return (React.createElement(VictoryLegend, Object.assign({ colorScale: colorScale, containerComponent: container, dataComponent: dataComponent, labelComponent: getLabelComponent(), name: name, style: getDefaultStyle(), theme: theme, titleComponent: getTitleComponent() }, rest)));
};
ChartLegend.displayName = 'ChartLegend';
// Note: VictoryLegend.role must be hoisted, but getBaseProps causes error with ChartVoronoiContainer
hoistNonReactStatics(ChartLegend, VictoryLegend, { getBaseProps: true });
ChartLegend.getBaseProps = (props) => {
const theme = getTheme(null);
return VictoryLegend.getBaseProps(Object.assign({ titleComponent: React.createElement(ChartLabel, null) }, props), {
height: theme.chart.height,
orientation: theme.legend.orientation,
titleOrientation: theme.legend.titleOrientation,
x: 0,
y: 0,
width: theme.chart.width
});
};
//# sourceMappingURL=ChartLegend.js.map