@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
97 lines • 5.51 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ChartDonutUtilization = 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 orderBy_1 = tslib_1.__importDefault(require("lodash/orderBy"));
const victory_core_1 = require("victory-core");
const victory_pie_1 = require("victory-pie");
const ChartContainer_1 = require("../ChartContainer/ChartContainer");
const ChartDonut_1 = require("../ChartDonut/ChartDonut");
const ChartStyles_1 = require("../ChartTheme/ChartStyles");
const chart_theme_types_1 = require("../ChartUtils/chart-theme-types");
const ChartDonutUtilization = (_a) => {
var { allowTooltip = true, ariaDesc, ariaTitle, colorScale, containerComponent = (0, jsx_runtime_1.jsx)(ChartContainer_1.ChartContainer, {}), data, invert = false, isStatic = true, legendPosition = ChartStyles_1.ChartCommonStyles.legend.position, legendDirection = 'ltr', padding, standalone = true, themeColor, thresholds, x, y,
// destructure last
theme = (0, chart_theme_types_1.getDonutUtilizationTheme)(themeColor), height = theme.pie.height, width = theme.pie.width } = _a, rest = tslib_1.__rest(_a, ["allowTooltip", "ariaDesc", "ariaTitle", "colorScale", "containerComponent", "data", "invert", "isStatic", "legendPosition", "legendDirection", "padding", "standalone", "themeColor", "thresholds", "x", "y", "theme", "height", "width"]);
// Returns computed data representing pie chart slices
const getComputedData = () => {
const datum = getData();
const computedData = [{ x: datum[0]._x, y: datum[0]._y || 0 }];
if (isStatic) {
computedData.push({ y: datum[0]._x ? Math.abs(100 - datum[0]._y) : 100 });
}
return computedData;
};
const getData = () => {
const datum = [Object.assign({}, data)];
return victory_core_1.Data.formatData(datum, Object.assign({ x, y }, rest), ['x', 'y']).sort((a, b) => a._y - b._y);
};
// Returns thresholds with default color scale
const getDonutThresholds = () => {
const result = [];
if (thresholds) {
// Ensure thresholds are in sorted order
const sThresholds = (0, orderBy_1.default)(thresholds, 'value', invert ? 'desc' : 'asc');
const numColors = ChartStyles_1.ChartDonutUtilizationStyles.thresholds.colorScale.length;
for (let i = 0; i < sThresholds.length; i++) {
result.push({
color: sThresholds[i].color
? sThresholds[i].color
: ChartStyles_1.ChartDonutUtilizationStyles.thresholds.colorScale[i % numColors],
value: sThresholds[i].value
});
}
}
return result;
};
// Returns theme based on threshold and current value
const getThresholdTheme = () => {
const newTheme = Object.assign({}, theme);
const datum = getData();
if (datum) {
const donutThresholds = getDonutThresholds();
const mergeThemeProps = (i) => {
// Merge just the first color of dynamic (blue, green, etc.) with static (gray) for expected colorScale
if (newTheme.pie.colorScale instanceof Array) {
newTheme.pie.colorScale[0] = donutThresholds[i].color;
}
else {
newTheme.pie.colorScale = donutThresholds[i].color;
}
if (newTheme.legend.colorScale instanceof Array) {
newTheme.legend.colorScale[0] = donutThresholds[i].color;
}
else {
newTheme.legend.colorScale = donutThresholds[i].color;
}
};
for (let i = 0; i < donutThresholds.length; i++) {
if (invert) {
if (datum[0]._y <= donutThresholds[i].value) {
mergeThemeProps(i);
}
}
else {
if (datum[0]._y >= donutThresholds[i].value) {
mergeThemeProps(i);
}
}
}
}
return newTheme;
};
// Dynamic donut chart
const chart = ((0, jsx_runtime_1.jsx)(ChartDonut_1.ChartDonut, Object.assign({ allowTooltip: allowTooltip, colorScale: colorScale, data: getComputedData(), height: height, legendPosition: legendPosition, legendDirection: legendDirection, padding: padding, standalone: false, theme: getThresholdTheme(), themeColor: themeColor, width: width }, rest), "pf-chart-donut-utilization"));
// 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]);
return standalone ? (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: container }) : (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: chart });
};
exports.ChartDonutUtilization = ChartDonutUtilization;
exports.ChartDonutUtilization.displayName = 'ChartDonutUtilization';
// Note: VictoryPie.role must be hoisted
(0, hoist_non_react_statics_1.default)(exports.ChartDonutUtilization, victory_pie_1.VictoryPie);
//# sourceMappingURL=ChartDonutUtilization.js.map