@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
54 lines • 3.84 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cloneElement, Fragment } from 'react';
import { Line } from 'victory-core';
import { ChartContainer } from '../ChartContainer/ChartContainer';
import { ChartLabel } from '../ChartLabel/ChartLabel';
import { ChartBulletStyles } from '../ChartTheme/ChartStyles';
import { getLabelTextSize, getBulletLabelX, getBulletLabelY } from '../ChartUtils/chart-label';
import { getPaddingForSide } from '../ChartUtils/chart-padding';
import { getBulletGroupTitleTheme } from '../ChartUtils/chart-theme-types';
import { getComponentTheme } from '../ChartUtils/chart-theme';
export const ChartBulletGroupTitle = ({ ariaDesc, ariaTitle, capHeight = 1.1, dividerComponent = _jsx(Line, {}), name, padding, standalone = true, subTitle, themeColor, title, titleComponent = _jsx(ChartLabel, {}),
// destructure last
theme = getBulletGroupTitleTheme(themeColor), height = theme.chart.height, width = theme.chart.width }) => {
const defaultPadding = {
bottom: getPaddingForSide('bottom', padding, theme.chart.padding),
left: getPaddingForSide('left', padding, theme.chart.padding),
right: getPaddingForSide('right', padding, theme.chart.padding),
top: getPaddingForSide('top', padding, theme.chart.padding)
};
const labelPadding = {
bottom: getPaddingForSide('bottom', padding, Number(theme.legend.style.labels.padding)),
left: getPaddingForSide('left', padding, Number(theme.legend.style.labels.padding)),
right: getPaddingForSide('right', padding, Number(theme.legend.style.labels.padding)),
top: getPaddingForSide('top', padding, Number(theme.legend.style.labels.padding))
};
// Horizontal divider to render under the group title
const getDivider = () => {
const titleSize = getLabelTextSize({ text: title, theme });
const subTitleSize = getLabelTextSize({ text: subTitle, theme });
const dy = title && subTitle
? titleSize.height + subTitleSize.height + labelPadding.top + labelPadding.bottom
: titleSize.height + labelPadding.top + labelPadding.bottom;
return 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 = getComponentTheme(themeColor);
const titleProps = titleComponent ? titleComponent.props : {};
const showBoth = title && subTitle;
return cloneElement(titleComponent, Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (showBoth && { capHeight })), (name && { id: () => `${name}-${titleComponent.type.displayName}` })), { style: [ChartBulletStyles.label.groupTitle, ChartBulletStyles.label.subTitle], text: showBoth ? [title, subTitle] : title, textAnchor: 'middle', verticalAnchor: 'middle', x: getBulletLabelX({
chartWidth: width,
labelPosition: 'top'
}), y: 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) && (_jsxs(Fragment, { children: [getTitle(), getDivider()] }));
return standalone ? (_jsx(ChartContainer, { desc: ariaDesc, height: height, title: ariaTitle, width: width, children: groupTitle })) : (_jsx(Fragment, { children: groupTitle }));
};
ChartBulletGroupTitle.displayName = 'ChartBulletGroupTitle';
//# sourceMappingURL=ChartBulletGroupTitle.js.map