@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
60 lines • 4.37 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ChartLegend = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = 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/ChartContainer");
const ChartLabel_1 = require("../ChartLabel/ChartLabel");
const ChartPoint_1 = require("../ChartPoint/ChartPoint");
const chart_theme_1 = require("../ChartUtils/chart-theme");
const ChartLegend = (_a) => {
var { colorScale, containerComponent = (0, jsx_runtime_1.jsx)(ChartContainer_1.ChartContainer, {}), dataComponent = (0, jsx_runtime_1.jsx)(ChartPoint_1.ChartPoint, {}), labelComponent = (0, jsx_runtime_1.jsx)(ChartLabel_1.ChartLabel, {}), name, patternScale, responsive = true, style, themeColor, titleComponent = (0, jsx_runtime_1.jsx)(ChartLabel_1.ChartLabel, {}),
// destructure last
theme = (0, chart_theme_1.getTheme)(themeColor) } = _a, rest = tslib_1.__rest(_a, ["colorScale", "containerComponent", "dataComponent", "labelComponent", "name", "patternScale", "responsive", "style", "themeColor", "titleComponent", "theme"]);
const componentTheme = (0, chart_theme_1.getComponentTheme)(themeColor);
// 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 = (0, react_1.cloneElement)(containerComponent, Object.assign({ responsive,
theme }, containerComponent.props));
const getLabelComponent = () => (0, react_1.cloneElement)(labelComponent, Object.assign(Object.assign(Object.assign({}, (name && { id: (props) => `${name}-${labelComponent.type.displayName}-${props.index}` })), labelComponent.props), ((componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.label) && componentTheme.label) // override backgroundStyle
));
const getTitleComponent = () => (0, react_1.cloneElement)(titleComponent, Object.assign(Object.assign(Object.assign({}, (name && { id: () => `${name}-${titleComponent.type.displayName}` })), titleComponent.props), ((componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.label) && componentTheme.label) // override backgroundStyle
));
// Note: containerComponent is required for theme
return ((0, jsx_runtime_1.jsx)(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, chart_theme_1.getTheme)(null);
return victory_legend_1.VictoryLegend.getBaseProps(Object.assign({ titleComponent: (0, jsx_runtime_1.jsx)(ChartLabel_1.ChartLabel, {}) }, 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