@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
77 lines • 5.48 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Children, cloneElement, Fragment, isValidElement } from 'react';
import { Data, Helpers } from 'victory-core';
import { VictoryPie } from 'victory-pie';
import hoistNonReactStatics from 'hoist-non-react-statics';
import { ChartContainer } from '../ChartContainer/ChartContainer';
import { ChartDonut } from '../ChartDonut/ChartDonut';
import { ChartDonutStyles } from '../ChartTheme/ChartStyles';
import { getPaddingForSide } from '../ChartUtils/chart-padding';
import { getDonutThresholdDynamicTheme, getDonutThresholdStaticTheme } from '../ChartUtils/chart-theme-types';
export const ChartDonutThreshold = (_a) => {
var { allowTooltip = true, ariaDesc, ariaTitle, children, colorScale, constrainToVisibleArea = false, containerComponent = _jsx(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 = ChartDonutStyles.label.subTitlePosition, themeColor, x, y,
// destructure last
theme = getDonutThresholdStaticTheme(themeColor, invert), height = theme.pie.height, width = theme.pie.width } = _a, rest = __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: getPaddingForSide('bottom', padding, theme.pie.padding),
left: getPaddingForSide('left', padding, theme.pie.padding),
right: getPaddingForSide('right', padding, theme.pie.padding),
top: getPaddingForSide('top', padding, theme.pie.padding)
};
const chartRadius = Helpers.evaluateProp(radius, undefined) ||
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 = 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 = () => Children.toArray(children).map((child, index) => {
if (isValidElement(child)) {
const _a = child.props, { data: childData } = _a, childProps = __rest(_a, ["data"]);
const datum = Data.formatData([childData], childProps, ['x', 'y']); // Format child data independently of this component's props
const dynamicTheme = childProps.theme || getDonutThresholdDynamicTheme(childProps.themeColor || themeColor);
return 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 = (_jsx(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 = cloneElement(containerComponent, Object.assign({ desc: ariaDesc, height, title: ariaTitle, width,
theme }, containerComponent.props), [chart, renderChildren()]);
return standalone ? (_jsx(Fragment, { children: container })) : (_jsxs(Fragment, { children: [chart, renderChildren()] }));
};
ChartDonutThreshold.displayName = 'ChartDonutThreshold';
// Note: VictoryPie.role must be hoisted
hoistNonReactStatics(ChartDonutThreshold, VictoryPie);
//# sourceMappingURL=ChartDonutThreshold.js.map