@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
125 lines • 8.59 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Chart = 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 chart_legend_Margin_1 = tslib_1.__importDefault(require('@patternfly/react-tokens/dist/js/chart_legend_Margin'));
const victory_chart_1 = require("victory-chart");
const ChartContainer_1 = require("../ChartContainer/ChartContainer");
const ChartLegend_1 = require("../ChartLegend/ChartLegend");
const ChartStyles_1 = require("../ChartTheme/ChartStyles");
const chart_helpers_1 = require("../ChartUtils/chart-helpers");
const chart_label_1 = require("../ChartUtils/chart-label");
const chart_legend_1 = require("../ChartUtils/chart-legend");
const chart_padding_1 = require("../ChartUtils/chart-padding");
const chart_patterns_1 = require("../ChartUtils/chart-patterns");
const chart_theme_types_1 = require("../ChartUtils/chart-theme-types");
const ChartLabel_1 = require("../ChartLabel/ChartLabel");
const ChartPoint_1 = require("../ChartPoint/ChartPoint");
const ChartThemeColor_1 = require("../ChartTheme/ChartThemeColor");
const Chart = (_a) => {
var { ariaDesc, ariaTitle, children, colorScale, hasPatterns, legendAllowWrap, legendComponent = (0, jsx_runtime_1.jsx)(ChartLegend_1.ChartLegend, {}), legendData, legendPosition = ChartStyles_1.ChartCommonStyles.legend.position, legendDirection = 'ltr', name, padding, patternScale, showAxis = true, themeColor,
// destructure last
theme = (0, chart_theme_types_1.getChartTheme)(themeColor, showAxis), containerComponent = (0, jsx_runtime_1.jsx)(ChartContainer_1.ChartContainer, {}), legendOrientation = theme.legend.orientation, height = theme.chart.height, width = theme.chart.width } = _a, rest = tslib_1.__rest(_a, ["ariaDesc", "ariaTitle", "children", "colorScale", "hasPatterns", "legendAllowWrap", "legendComponent", "legendData", "legendPosition", "legendDirection", "name", "padding", "patternScale", "showAxis", "themeColor", "theme", "containerComponent", "legendOrientation", "height", "width"]);
const defaultPadding = {
bottom: (0, chart_padding_1.getPaddingForSide)('bottom', padding, theme.chart.padding),
left: (0, chart_padding_1.getPaddingForSide)('left', padding, theme.chart.padding),
right: (0, chart_padding_1.getPaddingForSide)('right', padding, theme.chart.padding),
top: (0, chart_padding_1.getPaddingForSide)('top', padding, theme.chart.padding)
};
const { defaultColorScale, defaultPatternScale, isPatternDefs, patternId } = (0, chart_patterns_1.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 = (0, react_1.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 = (0, react_1.cloneElement)(containerComponent, Object.assign(Object.assign(Object.assign(Object.assign({ desc: ariaDesc, title: ariaTitle, theme }, containerComponent.props), { className: (0, chart_helpers_1.getClassName)({ className: containerComponent.props.className }) }), (labelComponent && { labelComponent })), (themeColor === ChartThemeColor_1.ChartThemeColor.skeleton && { labelComponent: (0, jsx_runtime_1.jsx)(ChartLabel_1.ChartLabel, {}) }) // Omit cursor and tooltips
));
let legendXOffset = 0;
if (legendDirection === 'rtl') {
legendXOffset = (0, chart_legend_1.getLegendMaxTextWidth)(legendData, theme);
}
const legend = (0, react_1.cloneElement)(legendComponent, Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ data: legendData }, (name && { name: `${name}-${legendComponent.type.displayName}` })), { orientation: legendOrientation, theme,
themeColor }), (legendDirection === 'rtl' && {
dataComponent: legendComponent.props.dataComponent ? ((0, react_1.cloneElement)(legendComponent.props.dataComponent, { transform: `translate(${legendXOffset})` })) : ((0, jsx_runtime_1.jsx)(ChartPoint_1.ChartPoint, { transform: `translate(${legendXOffset})` }))
})), (legendDirection === 'rtl' && {
labelComponent: legendComponent.props.labelComponent ? ((0, react_1.cloneElement)(legendComponent.props.labelComponent, { direction: 'rtl', dx: legendXOffset - 30 })) : ((0, jsx_runtime_1.jsx)(ChartLabel_1.ChartLabel, { direction: "rtl", dx: legendXOffset - 30 }))
})), 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_1.Children.toArray(children).map((child) => {
if (child.type.role === 'axis' && child.props.label && child.props.fixAxisLabelHeight) {
xAxisLabelHeight = (0, chart_label_1.getLabelTextSize)({ text: child.props.label, theme }).height + 10;
legendTitleHeight = 0;
}
});
if (legendPosition === 'bottom') {
dy += xAxisLabelHeight + legendTitleHeight;
}
else if (legendPosition === 'bottom-left') {
dy += xAxisLabelHeight + legendTitleHeight;
dx = -10;
}
// Adjust legend position when axis is hidden
if (!showAxis) {
dy -= chart_legend_Margin_1.default.value;
}
return (0, chart_legend_1.getComputedLegend)(Object.assign({ allowWrap: legendAllowWrap === true || typeof legendAllowWrap === 'function', chartType: 'chart', colorScale,
dx,
dy,
height, legendComponent: legend, padding: defaultPadding, position: legendPosition, theme,
themeColor,
width }, (defaultPatternScale && { patternScale: defaultPatternScale })));
};
// Render children
const renderChildren = () => react_1.Children.toArray(children).map((child, index) => {
if ((0, react_1.isValidElement)(child)) {
const childProps = tslib_1.__rest(child.props, []);
return (0, react_1.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,
themeColor }), childProps), (child.type.displayName === 'ChartPie' && {
data: (0, chart_patterns_1.mergePatternData)(childProps.data, defaultPatternScale)
}) // Override child props
));
}
return child;
});
// Callback to compliment legendAllowWrap
const computedLegend = getLegend();
(0, react_1.useEffect)(() => {
if ((computedLegend === null || computedLegend === void 0 ? void 0 : computedLegend.props) && typeof legendAllowWrap === 'function') {
const extraHeight = (0, chart_legend_1.getLegendItemsExtraHeight)({
legendData: computedLegend.props.data,
legendOrientation: computedLegend.props.orientation,
legendProps: computedLegend.props,
theme
});
legendAllowWrap(extraHeight);
}
}, [computedLegend, legendAllowWrap, theme, width]);
// Note: containerComponent is required for theme
return ((0, jsx_runtime_1.jsxs)(victory_chart_1.VictoryChart, Object.assign({ colorScale: colorScale, containerComponent: container, height: height, name: name, padding: defaultPadding, theme: theme, width: width }, rest, { children: [renderChildren(), computedLegend, isPatternDefs && (0, chart_patterns_1.getPatternDefs)({ patternId, colorScale: defaultColorScale })] })));
};
exports.Chart = Chart;
exports.Chart.displayName = 'Chart';
(0, hoist_non_react_statics_1.default)(exports.Chart, victory_chart_1.VictoryChart);
//# sourceMappingURL=Chart.js.map