@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
93 lines • 5.02 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { cloneElement, Fragment } from 'react';
import hoistNonReactStatics from 'hoist-non-react-statics';
import orderBy from 'lodash/orderBy';
import { Data } from 'victory-core';
import { VictoryPie } from 'victory-pie';
import { ChartContainer } from '../ChartContainer/ChartContainer';
import { ChartDonut } from '../ChartDonut/ChartDonut';
import { ChartCommonStyles, ChartDonutUtilizationStyles } from '../ChartTheme/ChartStyles';
import { getDonutUtilizationTheme } from '../ChartUtils/chart-theme-types';
export const ChartDonutUtilization = (_a) => {
var { allowTooltip = true, ariaDesc, ariaTitle, colorScale, containerComponent = _jsx(ChartContainer, {}), data, invert = false, isStatic = true, legendPosition = ChartCommonStyles.legend.position, legendDirection = 'ltr', padding, standalone = true, themeColor, thresholds, x, y,
// destructure last
theme = getDonutUtilizationTheme(themeColor), height = theme.pie.height, width = theme.pie.width } = _a, rest = __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 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 = orderBy(thresholds, 'value', invert ? 'desc' : 'asc');
const numColors = ChartDonutUtilizationStyles.thresholds.colorScale.length;
for (let i = 0; i < sThresholds.length; i++) {
result.push({
color: sThresholds[i].color
? sThresholds[i].color
: 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 = (_jsx(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 = cloneElement(containerComponent, Object.assign({ desc: ariaDesc, height, title: ariaTitle, width,
theme }, containerComponent.props), [chart]);
return standalone ? _jsx(Fragment, { children: container }) : _jsx(Fragment, { children: chart });
};
ChartDonutUtilization.displayName = 'ChartDonutUtilization';
// Note: VictoryPie.role must be hoisted
hoistNonReactStatics(ChartDonutUtilization, VictoryPie);
//# sourceMappingURL=ChartDonutUtilization.js.map