@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
78 lines • 4.53 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { cloneElement, Fragment } from 'react';
import { ChartContainer } from '../ChartContainer/ChartContainer';
import { ChartLabel } from '../ChartLabel/ChartLabel';
import { ChartCommonStyles, ChartBulletStyles } from '../ChartTheme/ChartStyles';
import { getBulletLabelX, getBulletLabelY } from '../ChartUtils/chart-label';
import { getPaddingForSide } from '../ChartUtils/chart-padding';
import { getBulletTheme } from '../ChartUtils/chart-theme-types';
import { getComponentTheme } from '../ChartUtils/chart-theme';
export const ChartBulletTitle = ({ ariaDesc, ariaTitle, capHeight = 1.1, horizontal = true, legendPosition = 'bottom', name, padding, standalone = true, subTitle, themeColor, title, titleComponent = _jsx(ChartLabel, {}), titlePosition,
// destructure last
theme = 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: 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)
};
// Returns title
const getTitle = () => {
const componentTheme = 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 = 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 -
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 cloneElement(titleComponent, Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (showBoth && { capHeight })), (name && { id: () => `${name}-${titleComponent.type.displayName}` })), { style: [ChartBulletStyles.label.title, ChartBulletStyles.label.subTitle], text: showBoth ? [title, subTitle] : title, textAnchor, verticalAnchor: labelPosition === 'top-left' ? 'end' : 'middle',
// Adjust for padding
x: horizontal
? getBulletLabelX({
chartWidth: chartSize.width,
dx: labelPosition === 'top-left'
? defaultPadding.left
: defaultPadding.left - ChartCommonStyles.label.margin * 1.75,
labelPosition: 'left', // skip 'bottom'
legendPosition,
svgWidth: width
})
: defaultPadding.left * 0.5 +
(defaultPadding.right * 0.5 - (defaultPadding.right - 50)) +
ChartBulletStyles.qualitativeRangeWidth / 2, y: getBulletLabelY({
chartHeight: chartSize.height,
dy,
labelPosition
}) }), titleComponent.props), ((componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.label) && componentTheme.label) // override backgroundStyle
));
};
return standalone ? (_jsx(ChartContainer, { desc: ariaDesc, height: height, title: ariaTitle, width: width, children: getTitle() })) : (_jsx(Fragment, { children: getTitle() }));
};
ChartBulletTitle.displayName = 'ChartBulletTitle';
//# sourceMappingURL=ChartBulletTitle.js.map