@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
74 lines • 4.87 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ChartLegend = exports.ChartLegendRowGutter = exports.ChartLegendPosition = exports.ChartLegendOrientation = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const hoist_non_react_statics_1 = tslib_1.__importDefault(require("hoist-non-react-statics"));
const victory_legend_1 = require("victory-legend");
const ChartContainer_1 = require("../ChartContainer");
const ChartLabel_1 = require("../ChartLabel");
const ChartPoint_1 = require("../ChartPoint");
const ChartUtils_1 = require("../ChartUtils");
var ChartLegendOrientation;
(function (ChartLegendOrientation) {
ChartLegendOrientation["horizontal"] = "horizontal";
ChartLegendOrientation["vertical"] = "vertical";
})(ChartLegendOrientation = exports.ChartLegendOrientation || (exports.ChartLegendOrientation = {}));
var ChartLegendPosition;
(function (ChartLegendPosition) {
ChartLegendPosition["bottom"] = "bottom";
ChartLegendPosition["bottomLeft"] = "bottom-left";
ChartLegendPosition["right"] = "right";
})(ChartLegendPosition = exports.ChartLegendPosition || (exports.ChartLegendPosition = {}));
var ChartLegendRowGutter;
(function (ChartLegendRowGutter) {
ChartLegendRowGutter["bottom"] = "bottom";
ChartLegendRowGutter["top"] = "top";
})(ChartLegendRowGutter = exports.ChartLegendRowGutter || (exports.ChartLegendRowGutter = {}));
const ChartLegend = (_a) => {
var { colorScale, containerComponent = React.createElement(ChartContainer_1.ChartContainer, null), dataComponent = React.createElement(ChartPoint_1.ChartPoint, null), labelComponent = React.createElement(ChartLabel_1.ChartLabel, null), name, patternScale, responsive = true, style, themeColor,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
themeVariant, titleComponent = React.createElement(ChartLabel_1.ChartLabel, null),
// destructure last
theme = (0, ChartUtils_1.getTheme)(themeColor) } = _a, rest = tslib_1.__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(victory_legend_1.VictoryLegend, Object.assign({ colorScale: colorScale, containerComponent: container, dataComponent: dataComponent, labelComponent: getLabelComponent(), name: name, style: getDefaultStyle(), theme: theme, titleComponent: getTitleComponent() }, rest)));
};
exports.ChartLegend = ChartLegend;
exports.ChartLegend.displayName = 'ChartLegend';
// Note: VictoryLegend.role must be hoisted, but getBaseProps causes error with ChartVoronoiContainer
(0, hoist_non_react_statics_1.default)(exports.ChartLegend, victory_legend_1.VictoryLegend, { getBaseProps: true });
exports.ChartLegend.getBaseProps = (props) => {
const theme = (0, ChartUtils_1.getTheme)(null);
return victory_legend_1.VictoryLegend.getBaseProps(Object.assign({ titleComponent: React.createElement(ChartLabel_1.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