@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
55 lines • 3.05 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { cloneElement, Fragment } from 'react';
import hoistNonReactStatics from 'hoist-non-react-statics';
import { VictoryBar } from 'victory-bar';
import { getQualitativeRangeData } from './utils/chart-bullet-data';
import { ChartBar } from '../ChartBar/ChartBar';
import { ChartContainer } from '../ChartContainer/ChartContainer';
import { ChartBulletStyles } from '../ChartTheme/ChartStyles';
import { ChartTooltip } from '../ChartTooltip/ChartTooltip';
import { getBulletQualitativeRangeTheme } from '../ChartUtils/chart-theme-types';
export const ChartBulletQualitativeRange = ({ allowTooltip = true, ariaDesc, ariaTitle, barWidth = ChartBulletStyles.qualitativeRangeWidth, constrainToVisibleArea = false, data, domain, horizontal = true, invert = false, labels, measureComponent = _jsx(ChartBar, {}), padding, standalone = true, themeColor, y, y0,
// destructure last
theme = getBulletQualitativeRangeTheme(themeColor), height = theme.group.height, width = theme.group.width, labelComponent = _jsx(ChartTooltip, {}) }) => {
const computedData = getQualitativeRangeData({
data,
invert,
theme,
y,
y0
});
// Label component
//
// The x and y calculations below ensure that the tooltip appears above the bar, instead of vertically centered.
// Having the tooltip vertically centered is visually confusing with comparative measures.
//
// Note: SVG height and width are provided by ChartBullet as a workaround to support constrainToVisibleArea
const tooltip = cloneElement(labelComponent, Object.assign({ constrainToVisibleArea, dx: () => {
if (horizontal) {
return 0;
}
const result = typeof barWidth === 'function' ? barWidth(data) : barWidth;
return result / 2;
}, dy: () => {
if (!horizontal) {
return 0;
}
const result = typeof barWidth === 'function' ? barWidth(data) : barWidth;
return -(result / 2);
}, orientation: 'top' }, labelComponent.props));
const measure = computedData.map((dataPoint, index) => cloneElement(measureComponent, Object.assign({ barWidth, data: [Object.assign({}, dataPoint)], domain,
height,
horizontal, key: `pf-chart-bullet-qualitative-range-${index}`, labelComponent: allowTooltip ? tooltip : undefined, labels,
padding, standalone: false, style: {
data: {
fill: dataPoint._color
}
}, theme,
themeColor,
width }, measureComponent.props)));
return standalone ? (_jsx(ChartContainer, { desc: ariaDesc, height: height, title: ariaTitle, width: width, children: measure })) : (_jsx(Fragment, { children: measure }));
};
ChartBulletQualitativeRange.displayName = 'ChartBulletQualitativeRange';
// Note: VictoryBar.role must be hoisted
hoistNonReactStatics(ChartBulletQualitativeRange, VictoryBar);
//# sourceMappingURL=ChartBulletQualitativeRange.js.map