@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
82 lines • 5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ChartBulletTitle = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
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 ChartBulletTitle = ({ ariaDesc, ariaTitle, capHeight = 1.1, horizontal = true, legendPosition = 'bottom', name, padding, standalone = true, subTitle, themeColor, title, titleComponent = (0, jsx_runtime_1.jsx)(ChartLabel_1.ChartLabel, {}), titlePosition,
// destructure last
theme = (0, chart_theme_types_1.getBulletTheme)(themeColor), height = horizontal ? theme.chart.height : theme.chart.width, width = horizontal ? theme.chart.width : theme.chart.height }) => {
const chartSize = {
height: horizontal ? theme.chart.height : height,
width: horizontal ? width : theme.chart.height
};
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)
};
// Returns title
const getTitle = () => {
const componentTheme = (0, chart_theme_1.getComponentTheme)(themeColor);
const showBoth = title && subTitle;
let labelPosition = horizontal ? 'left' : 'bottom';
if (titlePosition && titlePosition.includes('left') && horizontal) {
labelPosition = titlePosition;
}
let textAnchor = 'middle';
if (labelPosition === 'top-left') {
textAnchor = 'start';
}
else if (horizontal) {
textAnchor = 'end';
}
// Adjust for padding
let dy = ChartStyles_1.ChartCommonStyles.legend.margin * 2 - defaultPadding.bottom;
if (labelPosition === 'top-left') {
const offsetLabelPosition = showBoth ? 0 : 1;
dy =
defaultPadding.top * 0.5 +
(defaultPadding.bottom * 0.5 - defaultPadding.bottom) +
58 -
ChartStyles_1.ChartCommonStyles.legend.margin +
offsetLabelPosition;
}
else if (horizontal) {
dy = defaultPadding.top * 0.5 + (defaultPadding.bottom * 0.5 - defaultPadding.bottom);
}
// The x and y calculations below are used to adjust the position of the title, based on padding and scale.
// This ensures that when padding is adjusted, the title moves along with the chart's position.
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.title, ChartStyles_1.ChartBulletStyles.label.subTitle], text: showBoth ? [title, subTitle] : title, textAnchor, verticalAnchor: labelPosition === 'top-left' ? 'end' : 'middle',
// Adjust for padding
x: horizontal
? (0, chart_label_1.getBulletLabelX)({
chartWidth: chartSize.width,
dx: labelPosition === 'top-left'
? defaultPadding.left
: defaultPadding.left - ChartStyles_1.ChartCommonStyles.label.margin * 1.75,
labelPosition: 'left', // skip 'bottom'
legendPosition,
svgWidth: width
})
: defaultPadding.left * 0.5 +
(defaultPadding.right * 0.5 - (defaultPadding.right - 50)) +
ChartStyles_1.ChartBulletStyles.qualitativeRangeWidth / 2, y: (0, chart_label_1.getBulletLabelY)({
chartHeight: chartSize.height,
dy,
labelPosition
}) }), titleComponent.props), ((componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.label) && componentTheme.label) // override backgroundStyle
));
};
return standalone ? ((0, jsx_runtime_1.jsx)(ChartContainer_1.ChartContainer, { desc: ariaDesc, height: height, title: ariaTitle, width: width, children: getTitle() })) : ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: getTitle() }));
};
exports.ChartBulletTitle = ChartBulletTitle;
exports.ChartBulletTitle.displayName = 'ChartBulletTitle';
//# sourceMappingURL=ChartBulletTitle.js.map