@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
99 lines • 6.51 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cloneElement, Fragment } from 'react';
import hoistNonReactStatics from 'hoist-non-react-statics';
import { Helpers } from 'victory-core';
import { VictoryPie } from 'victory-pie';
import { getDonutTheme } from '../ChartUtils/chart-theme-types';
import { ChartContainer } from '../ChartContainer/ChartContainer';
import { ChartLabel } from '../ChartLabel/ChartLabel';
import { ChartPie } from '../ChartPie/ChartPie';
import { ChartDonutStyles } from '../ChartTheme/ChartStyles';
import { ChartCommonStyles } from '../ChartTheme/ChartStyles';
import { getPaddingForSide } from '../ChartUtils/chart-padding';
import { getPieLabelX, getPieLabelY } from '../ChartUtils/chart-label';
import { getComponentTheme } from '../ChartUtils/chart-theme';
export const ChartDonut = (_a) => {
var { allowTooltip = true, ariaDesc, ariaTitle, capHeight = 1.1, containerComponent = _jsx(ChartContainer, {}), innerRadius, legendPosition = ChartCommonStyles.legend.position, legendDirection = 'ltr', name, padAngle, padding, radius, standalone = true, subTitle, subTitleComponent, subTitlePosition = ChartDonutStyles.label.subTitlePosition, themeColor, title, titleComponent = _jsx(ChartLabel, {}),
// destructure last
theme = getDonutTheme(themeColor), height = theme.pie.height, width = theme.pie.width } = _a, rest = __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 = getComponentTheme(themeColor);
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 = radius
? Helpers.evaluateProp(radius, undefined)
: Helpers.getRadius({
height,
width,
padding: defaultPadding
});
const chartInnerRadius = innerRadius ? 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: [ChartDonutStyles.label.title, ChartDonutStyles.label.subTitle],
titles: [title, subTitle]
});
}
return (_jsxs(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 = _jsx(ChartLabel, {}) }) => {
if (!subTitle) {
return null;
}
const subTitleProps = textComponent.props ? textComponent.props : {};
return cloneElement(textComponent, Object.assign(Object.assign(Object.assign(Object.assign({}, (name && { id: `${name}-${textComponent.type.displayName}-subTitle` })), { key: 'pf-chart-donut-subtitle', style: ChartDonutStyles.label.subTitle, text: subTitle, textAnchor: subTitlePosition === 'right' ? 'start' : 'middle', verticalAnchor: 'middle', x: getPieLabelX({
height,
labelPosition: subTitlePosition,
legendPosition,
padding: defaultPadding,
width
}), y: 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 = ChartDonutStyles.label.title, titles = title }) => {
if (!titles) {
return null;
}
const titleProps = titleComponent ? titleComponent.props : {};
return 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: getPieLabelX({
height,
labelPosition: 'center',
legendPosition,
padding: defaultPadding,
width
}), y: getPieLabelY({
dy,
height,
labelPosition: 'center',
padding: defaultPadding,
width
}) }), titleProps), ((componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.label) && componentTheme.label) // override backgroundStyle
));
};
const chart = (_jsx(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 = cloneElement(containerComponent, Object.assign({ desc: ariaDesc, height, title: ariaTitle, width,
theme }, containerComponent.props), [chart, getAllTitles()]);
return standalone ? (_jsx(Fragment, { children: container })) : (_jsxs(Fragment, { children: [chart, getAllTitles()] }));
};
ChartDonut.displayName = 'ChartDonut';
// Note: VictoryPie.role must be hoisted
hoistNonReactStatics(ChartDonut, VictoryPie);
//# sourceMappingURL=ChartDonut.js.map