@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
58 lines • 4.45 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ChartBulletGroupTitle = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const victory_core_1 = require("victory-core");
const ChartContainer_1 = require("../ChartContainer/ChartContainer");
const ChartLabel_1 = require("../ChartLabel/ChartLabel");
const ChartStyles_1 = require("../ChartTheme/ChartStyles");
const chart_label_1 = require("../ChartUtils/chart-label");
const chart_padding_1 = require("../ChartUtils/chart-padding");
const chart_theme_types_1 = require("../ChartUtils/chart-theme-types");
const chart_theme_1 = require("../ChartUtils/chart-theme");
const ChartBulletGroupTitle = ({ ariaDesc, ariaTitle, capHeight = 1.1, dividerComponent = (0, jsx_runtime_1.jsx)(victory_core_1.Line, {}), name, padding, standalone = true, subTitle, themeColor, title, titleComponent = (0, jsx_runtime_1.jsx)(ChartLabel_1.ChartLabel, {}),
// destructure last
theme = (0, chart_theme_types_1.getBulletGroupTitleTheme)(themeColor), height = theme.chart.height, width = theme.chart.width }) => {
const defaultPadding = {
bottom: (0, chart_padding_1.getPaddingForSide)('bottom', padding, theme.chart.padding),
left: (0, chart_padding_1.getPaddingForSide)('left', padding, theme.chart.padding),
right: (0, chart_padding_1.getPaddingForSide)('right', padding, theme.chart.padding),
top: (0, chart_padding_1.getPaddingForSide)('top', padding, theme.chart.padding)
};
const labelPadding = {
bottom: (0, chart_padding_1.getPaddingForSide)('bottom', padding, Number(theme.legend.style.labels.padding)),
left: (0, chart_padding_1.getPaddingForSide)('left', padding, Number(theme.legend.style.labels.padding)),
right: (0, chart_padding_1.getPaddingForSide)('right', padding, Number(theme.legend.style.labels.padding)),
top: (0, chart_padding_1.getPaddingForSide)('top', padding, Number(theme.legend.style.labels.padding))
};
// Horizontal divider to render under the group title
const getDivider = () => {
const titleSize = (0, chart_label_1.getLabelTextSize)({ text: title, theme });
const subTitleSize = (0, chart_label_1.getLabelTextSize)({ text: subTitle, theme });
const dy = title && subTitle
? titleSize.height + subTitleSize.height + labelPadding.top + labelPadding.bottom
: titleSize.height + labelPadding.top + labelPadding.bottom;
return (0, react_1.cloneElement)(dividerComponent, Object.assign({ x1: defaultPadding.left, x2: width - defaultPadding.right, y1: defaultPadding.top + dy, y2: defaultPadding.top + dy, style: theme.line.style.data }, dividerComponent.props));
};
// Returns title
const getTitle = () => {
const componentTheme = (0, chart_theme_1.getComponentTheme)(themeColor);
const titleProps = titleComponent ? titleComponent.props : {};
const showBoth = title && subTitle;
return (0, react_1.cloneElement)(titleComponent, Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (showBoth && { capHeight })), (name && { id: () => `${name}-${titleComponent.type.displayName}` })), { style: [ChartStyles_1.ChartBulletStyles.label.groupTitle, ChartStyles_1.ChartBulletStyles.label.subTitle], text: showBoth ? [title, subTitle] : title, textAnchor: 'middle', verticalAnchor: 'middle', x: (0, chart_label_1.getBulletLabelX)({
chartWidth: width,
labelPosition: 'top'
}), y: (0, chart_label_1.getBulletLabelY)({
chartHeight: height,
dy: defaultPadding.top,
labelPosition: 'top'
}) }), titleProps), ((componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.label) && componentTheme.label) // override backgroundStyle
));
};
const groupTitle = Boolean(title) && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [getTitle(), getDivider()] }));
return standalone ? ((0, jsx_runtime_1.jsx)(ChartContainer_1.ChartContainer, { desc: ariaDesc, height: height, title: ariaTitle, width: width, children: groupTitle })) : ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: groupTitle }));
};
exports.ChartBulletGroupTitle = ChartBulletGroupTitle;
exports.ChartBulletGroupTitle.displayName = 'ChartBulletGroupTitle';
//# sourceMappingURL=ChartBulletGroupTitle.js.map