@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
81 lines • 6.03 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ChartDonutThreshold = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const victory_core_1 = require("victory-core");
const victory_pie_1 = require("victory-pie");
const hoist_non_react_statics_1 = tslib_1.__importDefault(require("hoist-non-react-statics"));
const ChartContainer_1 = require("../ChartContainer/ChartContainer");
const ChartDonut_1 = require("../ChartDonut/ChartDonut");
const ChartStyles_1 = require("../ChartTheme/ChartStyles");
const chart_padding_1 = require("../ChartUtils/chart-padding");
const chart_theme_types_1 = require("../ChartUtils/chart-theme-types");
const ChartDonutThreshold = (_a) => {
var { allowTooltip = true, ariaDesc, ariaTitle, children, colorScale, constrainToVisibleArea = false, containerComponent = (0, jsx_runtime_1.jsx)(ChartContainer_1.ChartContainer, {}), data = [], hasPatterns, invert = false, labels = [], // Don't show any tooltip labels by default, let consumer override if needed
name, padding, radius, standalone = true, subTitlePosition = ChartStyles_1.ChartDonutStyles.label.subTitlePosition, themeColor, x, y,
// destructure last
theme = (0, chart_theme_types_1.getDonutThresholdStaticTheme)(themeColor, invert), height = theme.pie.height, width = theme.pie.width } = _a, rest = tslib_1.__rest(_a, ["allowTooltip", "ariaDesc", "ariaTitle", "children", "colorScale", "constrainToVisibleArea", "containerComponent", "data", "hasPatterns", "invert", "labels", "name", "padding", "radius", "standalone", "subTitlePosition", "themeColor", "x", "y", "theme", "height", "width"]);
const defaultPadding = {
bottom: (0, chart_padding_1.getPaddingForSide)('bottom', padding, theme.pie.padding),
left: (0, chart_padding_1.getPaddingForSide)('left', padding, theme.pie.padding),
right: (0, chart_padding_1.getPaddingForSide)('right', padding, theme.pie.padding),
top: (0, chart_padding_1.getPaddingForSide)('top', padding, theme.pie.padding)
};
const chartRadius = victory_core_1.Helpers.evaluateProp(radius, undefined) ||
victory_core_1.Helpers.getRadius({
height,
width,
padding: defaultPadding
});
// Returns computed data representing pie chart slices
const getComputedData = () => {
// Format and sort data. Sorting ensures thresholds are displayed in the correct order and simplifies calculations.
const datum = victory_core_1.Data.formatData(data, Object.assign({ x, y }, rest), ['x', 'y']).sort((a, b) => a._y - b._y);
// Data must be offset so that the sum of all data point y-values (including the final slice) == 100.
const [prev, computedData] = datum.reduce((acc, dataPoint) => [
dataPoint._y, // Set the previous value to current y value
[
...acc[1],
{
x: dataPoint._x, // Conditionally add x property only if it is in the original data object
y: dataPoint._y - acc[0] // Must be offset by previous value
}
]
], [0, []]);
return [
...computedData,
{
y: prev ? 100 - prev : 0
}
];
};
// Render dynamic utilization donut cart
const computedData = getComputedData();
const renderChildren = () => react_1.Children.toArray(children).map((child, index) => {
if ((0, react_1.isValidElement)(child)) {
const _a = child.props, { data: childData } = _a, childProps = tslib_1.__rest(_a, ["data"]);
const datum = victory_core_1.Data.formatData([childData], childProps, ['x', 'y']); // Format child data independently of this component's props
const dynamicTheme = childProps.theme || (0, chart_theme_types_1.getDonutThresholdDynamicTheme)(childProps.themeColor || themeColor);
return (0, react_1.cloneElement)(child, Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (hasPatterns && { hasPatterns: true })), { // Enable ChartDonutUtilization patterns
constrainToVisibleArea, data: childData, endAngle: 360 * (datum[0]._y ? datum[0]._y / 100 : 0), height }), (name &&
typeof child.name !== undefined && {
name: `${name}-${child.type.displayName}-${index}`
})), { invert, isStatic: false, key: `pf-chart-donut-threshold-child-${index}`, padding: defaultPadding, patternUnshiftIndex: computedData.length, radius: chartRadius - 14, standalone: false, subTitlePosition: childProps.subTitlePosition || subTitlePosition, theme: dynamicTheme, themeColor,
width }), childProps));
}
return child;
});
// Static threshold donut chart
const chart = ((0, jsx_runtime_1.jsx)(ChartDonut_1.ChartDonut, Object.assign({ allowTooltip: allowTooltip, colorScale: colorScale, constrainToVisibleArea: constrainToVisibleArea, data: computedData, height: height, hasPatterns: hasPatterns, labels: labels, name: name, padding: defaultPadding, standalone: false, theme: theme, themeColor: themeColor, width: width }, rest), "pf-chart-donut-threshold"));
// Clone so users can override container props
const container = (0, react_1.cloneElement)(containerComponent, Object.assign({ desc: ariaDesc, height, title: ariaTitle, width,
theme }, containerComponent.props), [chart, renderChildren()]);
return standalone ? ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: container })) : ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [chart, renderChildren()] }));
};
exports.ChartDonutThreshold = ChartDonutThreshold;
exports.ChartDonutThreshold.displayName = 'ChartDonutThreshold';
// Note: VictoryPie.role must be hoisted
(0, hoist_non_react_statics_1.default)(exports.ChartDonutThreshold, victory_pie_1.VictoryPie);
//# sourceMappingURL=ChartDonutThreshold.js.map