@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
56 lines • 3.82 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { cloneElement } from 'react';
import hoistNonReactStatics from 'hoist-non-react-statics';
import { VictoryLegend } from 'victory-legend';
import { ChartContainer } from '../ChartContainer/ChartContainer';
import { ChartLabel } from '../ChartLabel/ChartLabel';
import { ChartPoint } from '../ChartPoint/ChartPoint';
import { getComponentTheme, getTheme } from '../ChartUtils/chart-theme';
export const ChartLegend = (_a) => {
var { colorScale, containerComponent = _jsx(ChartContainer, {}), dataComponent = _jsx(ChartPoint, {}), labelComponent = _jsx(ChartLabel, {}), name, patternScale, responsive = true, style, themeColor, titleComponent = _jsx(ChartLabel, {}),
// destructure last
theme = getTheme(themeColor) } = _a, rest = __rest(_a, ["colorScale", "containerComponent", "dataComponent", "labelComponent", "name", "patternScale", "responsive", "style", "themeColor", "titleComponent", "theme"]);
const componentTheme = 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 = cloneElement(containerComponent, Object.assign({ responsive,
theme }, containerComponent.props));
const getLabelComponent = () => 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 = () => 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 (_jsx(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: _jsx(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