@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
94 lines • 5.9 kB
JavaScript
import { __rest } from "tslib";
import * as React from 'react';
import hoistNonReactStatics from 'hoist-non-react-statics';
/* eslint-disable camelcase */
import chart_legend_Margin from '@patternfly/react-tokens/dist/esm/chart_legend_Margin';
import { VictoryChart } from 'victory-chart';
import { ChartContainer } from '../ChartContainer';
import { ChartLegend, ChartLegendPosition } from '../ChartLegend';
import { ChartCommonStyles } from '../ChartTheme';
import { getChartTheme, getClassName, getComputedLegend, getLabelTextSize, getPaddingForSide, getPatternDefs, getDefaultData, useDefaultPatternProps } from '../ChartUtils';
export const Chart = (_a) => {
var { ariaDesc, ariaTitle, children, colorScale, hasPatterns, legendAllowWrap = false, legendComponent = React.createElement(ChartLegend, null), legendData, legendPosition = ChartCommonStyles.legend.position, name, padding, patternScale, showAxis = true, themeColor,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
themeVariant,
// destructure last
theme = getChartTheme(themeColor, showAxis), containerComponent = React.createElement(ChartContainer, null), legendOrientation = theme.legend.orientation, height = theme.chart.height, width = theme.chart.width } = _a, rest = __rest(_a, ["ariaDesc", "ariaTitle", "children", "colorScale", "hasPatterns", "legendAllowWrap", "legendComponent", "legendData", "legendPosition", "name", "padding", "patternScale", "showAxis", "themeColor", "themeVariant", "theme", "containerComponent", "legendOrientation", "height", "width"]);
const defaultPadding = {
bottom: getPaddingForSide('bottom', padding, theme.chart.padding),
left: getPaddingForSide('left', padding, theme.chart.padding),
right: getPaddingForSide('right', padding, theme.chart.padding),
top: getPaddingForSide('top', padding, theme.chart.padding)
};
const { defaultColorScale, defaultPatternScale, isPatternDefs, patternId } = useDefaultPatternProps({
colorScale,
patternScale,
hasPatterns,
themeColorScale: theme.chart.colorScale
});
// Add pattern props for legend tooltip
let labelComponent;
if (containerComponent.props.labelComponent &&
containerComponent.props.labelComponent.type.displayName === 'ChartLegendTooltip') {
labelComponent = React.cloneElement(containerComponent.props.labelComponent, Object.assign(Object.assign({ theme }, (defaultPatternScale && { patternScale: defaultPatternScale })), containerComponent.props.labelComponent.props));
}
// Clone so users can override container props
const container = React.cloneElement(containerComponent, Object.assign(Object.assign(Object.assign({ desc: ariaDesc, title: ariaTitle, theme }, containerComponent.props), { className: getClassName({ className: containerComponent.props.className }) }), (labelComponent && { labelComponent }) // Override label component props
));
const legend = React.cloneElement(legendComponent, Object.assign(Object.assign(Object.assign({ data: legendData }, (name && { name: `${name}-${legendComponent.type.displayName}` })), { orientation: legendOrientation, theme }), legendComponent.props));
// Returns a computed legend
const getLegend = () => {
if (!legend.props.data) {
return null;
}
let dx = 0;
let dy = 0;
let xAxisLabelHeight = 0;
let legendTitleHeight = legend.props.title ? 10 : 0;
// Adjust for axis label
React.Children.toArray(children).map((child) => {
if (child.type.role === 'axis' && child.props.label && !child.props.dependentAxis) {
xAxisLabelHeight = getLabelTextSize({ text: child.props.label, theme }).height + 10;
legendTitleHeight = 0;
}
});
if (legendPosition === ChartLegendPosition.bottom) {
dy += xAxisLabelHeight + legendTitleHeight;
}
else if (legendPosition === ChartLegendPosition.bottomLeft) {
dy += xAxisLabelHeight + legendTitleHeight;
dx = -10;
}
// Adjust legend position when axis is hidden
if (!showAxis) {
dy -= chart_legend_Margin.value;
}
return getComputedLegend(Object.assign({ allowWrap: legendAllowWrap, chartType: 'chart', colorScale,
dx,
dy,
height, legendComponent: legend, padding: defaultPadding, position: legendPosition, theme,
width }, (defaultPatternScale && { patternScale: defaultPatternScale })));
};
// Render children
const renderChildren = () => React.Children.toArray(children).map((child, index) => {
if (React.isValidElement(child)) {
const childProps = __rest(child.props, []);
return React.cloneElement(child, Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ colorScale }, (defaultPatternScale && { patternScale: defaultPatternScale })), (name &&
typeof child.name !== undefined && {
name: `${name}-${child.type.displayName}-${index}`
})), { theme }), childProps), (child.type.displayName === 'ChartPie' && {
data: getDefaultData(childProps.data, defaultPatternScale)
}) // Override child props
));
}
return child;
});
// Note: containerComponent is required for theme
return (React.createElement(VictoryChart, Object.assign({ colorScale: colorScale, containerComponent: container, height: height, name: name, padding: defaultPadding, theme: theme, width: width }, rest),
renderChildren(),
getLegend(),
isPatternDefs && getPatternDefs({ patternId, colorScale: defaultColorScale })));
};
Chart.displayName = 'Chart';
hoistNonReactStatics(Chart, VictoryChart);
//# sourceMappingURL=Chart.js.map