@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
125 lines • 7.54 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ChartDonutUtilization = exports.ChartDonutUtilizationSubTitlePosition = exports.ChartDonutUtilizationSortOrder = exports.ChartDonutUtilizationLegendPosition = exports.ChartDonutUtilizationLegendOrientation = exports.ChartDonutUtilizationLabelPosition = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(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");
const ChartDonut_1 = require("../ChartDonut");
const ChartTheme_1 = require("../ChartTheme");
const ChartUtils_1 = require("../ChartUtils");
var ChartDonutUtilizationLabelPosition;
(function (ChartDonutUtilizationLabelPosition) {
ChartDonutUtilizationLabelPosition["centroid"] = "centroid";
ChartDonutUtilizationLabelPosition["endAngle"] = "endAngle";
ChartDonutUtilizationLabelPosition["startAngle"] = "startAngle";
})(ChartDonutUtilizationLabelPosition = exports.ChartDonutUtilizationLabelPosition || (exports.ChartDonutUtilizationLabelPosition = {}));
var ChartDonutUtilizationLegendOrientation;
(function (ChartDonutUtilizationLegendOrientation) {
ChartDonutUtilizationLegendOrientation["horizontal"] = "horizontal";
ChartDonutUtilizationLegendOrientation["vertical"] = "vertical";
})(ChartDonutUtilizationLegendOrientation = exports.ChartDonutUtilizationLegendOrientation || (exports.ChartDonutUtilizationLegendOrientation = {}));
var ChartDonutUtilizationLegendPosition;
(function (ChartDonutUtilizationLegendPosition) {
ChartDonutUtilizationLegendPosition["bottom"] = "bottom";
ChartDonutUtilizationLegendPosition["right"] = "right";
})(ChartDonutUtilizationLegendPosition = exports.ChartDonutUtilizationLegendPosition || (exports.ChartDonutUtilizationLegendPosition = {}));
var ChartDonutUtilizationSortOrder;
(function (ChartDonutUtilizationSortOrder) {
ChartDonutUtilizationSortOrder["ascending"] = "ascending";
ChartDonutUtilizationSortOrder["descending"] = "descending";
})(ChartDonutUtilizationSortOrder = exports.ChartDonutUtilizationSortOrder || (exports.ChartDonutUtilizationSortOrder = {}));
var ChartDonutUtilizationSubTitlePosition;
(function (ChartDonutUtilizationSubTitlePosition) {
ChartDonutUtilizationSubTitlePosition["bottom"] = "bottom";
ChartDonutUtilizationSubTitlePosition["center"] = "center";
ChartDonutUtilizationSubTitlePosition["right"] = "right";
})(ChartDonutUtilizationSubTitlePosition = exports.ChartDonutUtilizationSubTitlePosition || (exports.ChartDonutUtilizationSubTitlePosition = {}));
const ChartDonutUtilization = (_a) => {
var { allowTooltip = true, ariaDesc, ariaTitle, colorScale, containerComponent = React.createElement(ChartContainer_1.ChartContainer, null), data, invert = false, isStatic = true, legendPosition = ChartTheme_1.ChartCommonStyles.legend.position, padding, standalone = true, themeColor,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
themeVariant, thresholds, x, y,
// destructure last
theme = (0, ChartUtils_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", "padding", "standalone", "themeColor", "themeVariant", "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 = ChartTheme_1.ChartDonutUtilizationStyles.thresholds.colorScale.length;
for (let i = 0; i < sThresholds.length; i++) {
result.push({
color: sThresholds[i].color
? sThresholds[i].color
: ChartTheme_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 = (React.createElement(ChartDonut_1.ChartDonut, Object.assign({ allowTooltip: allowTooltip, colorScale: colorScale, data: getComputedData(), height: height, key: "pf-chart-donut-utilization", legendPosition: legendPosition, padding: padding, standalone: false, theme: getThresholdTheme(), width: width }, rest)));
// Clone so users can override container props
const container = React.cloneElement(containerComponent, Object.assign({ desc: ariaDesc, height, title: ariaTitle, width,
theme }, containerComponent.props), [chart]);
return standalone ? React.createElement(React.Fragment, null, container) : React.createElement(React.Fragment, null, 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