@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
103 lines • 7.29 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ChartDonut = 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 victory_core_1 = require("victory-core");
const victory_pie_1 = require("victory-pie");
const chart_theme_types_1 = require("../ChartUtils/chart-theme-types");
const ChartContainer_1 = require("../ChartContainer/ChartContainer");
const ChartLabel_1 = require("../ChartLabel/ChartLabel");
const ChartPie_1 = require("../ChartPie/ChartPie");
const ChartStyles_1 = require("../ChartTheme/ChartStyles");
const ChartStyles_2 = require("../ChartTheme/ChartStyles");
const chart_padding_1 = require("../ChartUtils/chart-padding");
const chart_label_1 = require("../ChartUtils/chart-label");
const chart_theme_1 = require("../ChartUtils/chart-theme");
const ChartDonut = (_a) => {
var { allowTooltip = true, ariaDesc, ariaTitle, capHeight = 1.1, containerComponent = (0, jsx_runtime_1.jsx)(ChartContainer_1.ChartContainer, {}), innerRadius, legendPosition = ChartStyles_2.ChartCommonStyles.legend.position, legendDirection = 'ltr', name, padAngle, padding, radius, standalone = true, subTitle, subTitleComponent, subTitlePosition = ChartStyles_1.ChartDonutStyles.label.subTitlePosition, themeColor, title, titleComponent = (0, jsx_runtime_1.jsx)(ChartLabel_1.ChartLabel, {}),
// destructure last
theme = (0, chart_theme_types_1.getDonutTheme)(themeColor), height = theme.pie.height, width = theme.pie.width } = _a, rest = tslib_1.__rest(_a, ["allowTooltip", "ariaDesc", "ariaTitle", "capHeight", "containerComponent", "innerRadius", "legendPosition", "legendDirection", "name", "padAngle", "padding", "radius", "standalone", "subTitle", "subTitleComponent", "subTitlePosition", "themeColor", "title", "titleComponent", "theme", "height", "width"]);
const componentTheme = (0, chart_theme_1.getComponentTheme)(themeColor);
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 = radius
? victory_core_1.Helpers.evaluateProp(radius, undefined)
: victory_core_1.Helpers.getRadius({
height,
width,
padding: defaultPadding
});
const chartInnerRadius = innerRadius ? victory_core_1.Helpers.evaluateProp(innerRadius, undefined) : chartRadius - 9; // Todo: Add pf-core variable
const centerSubTitle = subTitle && subTitlePosition === 'center';
// Returns title and subtitle
const getAllTitles = () => {
if (!subTitleComponent && centerSubTitle) {
return getTitle({
styles: [ChartStyles_1.ChartDonutStyles.label.title, ChartStyles_1.ChartDonutStyles.label.subTitle],
titles: [title, subTitle]
});
}
return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [getTitle({ titles: title, dy: centerSubTitle ? -8 : 0 }), getSubTitle({ textComponent: subTitleComponent, dy: centerSubTitle ? 15 : 0 })] }, "pf-chart-donut-titles"));
};
// This function will be evaluated for each slice with the props that correspond to that slice.
const getPadAngle = ({ datum }) => (datum._y > 0 ? theme.pie.padAngle : 0);
// Returns subtitle
const getSubTitle = ({ dy = 0, textComponent = (0, jsx_runtime_1.jsx)(ChartLabel_1.ChartLabel, {}) }) => {
if (!subTitle) {
return null;
}
const subTitleProps = textComponent.props ? textComponent.props : {};
return (0, react_1.cloneElement)(textComponent, Object.assign(Object.assign(Object.assign(Object.assign({}, (name && { id: `${name}-${textComponent.type.displayName}-subTitle` })), { key: 'pf-chart-donut-subtitle', style: ChartStyles_1.ChartDonutStyles.label.subTitle, text: subTitle, textAnchor: subTitlePosition === 'right' ? 'start' : 'middle', verticalAnchor: 'middle', x: (0, chart_label_1.getPieLabelX)({
height,
labelPosition: subTitlePosition,
legendPosition,
padding: defaultPadding,
width
}), y: (0, chart_label_1.getPieLabelY)({
dy,
height,
labelPosition: subTitlePosition,
padding: defaultPadding,
width
}) }), subTitleProps), ((componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.label) && componentTheme.label) // override backgroundStyle
));
};
// Returns title
const getTitle = ({ dy = 0, styles = ChartStyles_1.ChartDonutStyles.label.title, titles = title }) => {
if (!titles) {
return null;
}
const titleProps = titleComponent ? titleComponent.props : {};
return (0, react_1.cloneElement)(titleComponent, Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (Array.isArray(titles) && { capHeight })), (name && { id: `${name}-${titleComponent.type.displayName}-title` })), { key: 'pf-chart-donut-title', style: styles, text: titles, textAnchor: 'middle', verticalAnchor: 'middle', x: (0, chart_label_1.getPieLabelX)({
height,
labelPosition: 'center',
legendPosition,
padding: defaultPadding,
width
}), y: (0, chart_label_1.getPieLabelY)({
dy,
height,
labelPosition: 'center',
padding: defaultPadding,
width
}) }), titleProps), ((componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.label) && componentTheme.label) // override backgroundStyle
));
};
const chart = ((0, jsx_runtime_1.jsx)(ChartPie_1.ChartPie, Object.assign({ allowTooltip: allowTooltip, height: height, innerRadius: chartInnerRadius > 0 ? chartInnerRadius : 0, legendPosition: legendPosition, legendDirection: legendDirection, name: name, padAngle: padAngle !== undefined ? padAngle : getPadAngle, padding: padding, radius: chartRadius > 0 ? chartRadius : 0, standalone: false, theme: theme, themeColor: themeColor, width: width }, rest), "pf-chart-donut-pie"));
// 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, getAllTitles()]);
return standalone ? ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: container })) : ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [chart, getAllTitles()] }));
};
exports.ChartDonut = ChartDonut;
exports.ChartDonut.displayName = 'ChartDonut';
// Note: VictoryPie.role must be hoisted
(0, hoist_non_react_statics_1.default)(exports.ChartDonut, victory_pie_1.VictoryPie);
//# sourceMappingURL=ChartDonut.js.map