@patternfly/react-charts/dist/js/victory/components/ChartBullet/ChartBullet.js

This library provides a set of React chart components for use with the PatternFly reference implementation.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ChartBullet = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const hoist_non_react_statics_1 = tslib_1.__importDefault(require("hoist-non-react-statics"));
const victory_chart_1 = require("victory-chart");
const chart_bullet_size_1 = require("./utils/chart-bullet-size");
const ChartAxis_1 = require("../ChartAxis/ChartAxis");
const ChartBulletTitle_1 = require("./ChartBulletTitle");
const ChartContainer_1 = require("../ChartContainer/ChartContainer");
const ChartLegend_1 = require("../ChartLegend/ChartLegend");
const ChartTooltip_1 = require("../ChartTooltip/ChartTooltip");
const ChartStyles_1 = require("../ChartTheme/ChartStyles");
const chart_legend_1 = require("../ChartUtils/chart-legend");
const ChartBulletComparativeErrorMeasure_1 = require("./ChartBulletComparativeErrorMeasure");
const ChartBulletComparativeMeasure_1 = require("./ChartBulletComparativeMeasure");
const ChartBulletComparativeWarningMeasure_1 = require("./ChartBulletComparativeWarningMeasure");
const ChartBulletGroupTitle_1 = require("./ChartBulletGroupTitle");
const ChartBulletPrimaryDotMeasure_1 = require("./ChartBulletPrimaryDotMeasure");
const ChartBulletPrimarySegmentedMeasure_1 = require("./ChartBulletPrimarySegmentedMeasure");
const ChartBulletQualitativeRange_1 = require("./ChartBulletQualitativeRange");
const chart_bullet_domain_1 = require("./utils/chart-bullet-domain");
const chart_bullet_theme_1 = require("./utils/chart-bullet-theme");
const chart_padding_1 = require("../ChartUtils/chart-padding");
const ChartPoint_1 = require("../ChartPoint/ChartPoint");
const ChartLabel_1 = require("../ChartLabel/ChartLabel");
const ChartBullet = ({ allowTooltip = true, ariaDesc, ariaTitle, axisComponent = (0, jsx_runtime_1.jsx)(ChartAxis_1.ChartAxis, {}), comparativeErrorMeasureComponent = (0, jsx_runtime_1.jsx)(ChartBulletComparativeErrorMeasure_1.ChartBulletComparativeErrorMeasure, {}), comparativeErrorMeasureData, comparativeErrorMeasureDataY, comparativeErrorMeasureLegendData, comparativeWarningMeasureComponent = (0, jsx_runtime_1.jsx)(ChartBulletComparativeWarningMeasure_1.ChartBulletComparativeWarningMeasure, {}), comparativeWarningMeasureData, comparativeWarningMeasureDataY, comparativeWarningMeasureLegendData, comparativeZeroMeasureComponent = (0, jsx_runtime_1.jsx)(ChartBulletComparativeMeasure_1.ChartBulletComparativeMeasure, {}), constrainToVisibleArea = false, groupTitleComponent = (0, jsx_runtime_1.jsx)(ChartBulletGroupTitle_1.ChartBulletGroupTitle, {}), groupSubTitle, groupTitle, horizontal = true, invert = false, labels, legendAllowWrap = false, legendComponent = (0, jsx_runtime_1.jsx)(ChartLegend_1.ChartLegend, {}), legendItemsPerRow, legendPosition = 'bottom', legendDirection = 'ltr', maxDomain, minDomain, name, padding, primaryDotMeasureComponent = (0, jsx_runtime_1.jsx)(ChartBulletPrimaryDotMeasure_1.ChartBulletPrimaryDotMeasure, {}), primaryDotMeasureData, primaryDotMeasureDataY, primaryDotMeasureLegendData, primarySegmentedMeasureComponent = (0, jsx_runtime_1.jsx)(ChartBulletPrimarySegmentedMeasure_1.ChartBulletPrimarySegmentedMeasure, {}), primarySegmentedMeasureData, primarySegmentedMeasureDataY, primarySegmentedMeasureLegendData, qualitativeRangeComponent = (0, jsx_runtime_1.jsx)(ChartBulletQualitativeRange_1.ChartBulletQualitativeRange, {}), qualitativeRangeData, qualitativeRangeDataY, qualitativeRangeDataY0, qualitativeRangeLegendData, standalone = true, subTitle, themeColor, title, titleComponent = (0, jsx_runtime_1.jsx)(ChartBulletTitle_1.ChartBulletTitle, {}), titlePosition, 
// destructure last
theme = (0, chart_bullet_theme_1.getBulletThemeWithLegendColorScale)({
    comparativeErrorMeasureData,
    comparativeErrorMeasureLegendData,
    comparativeWarningMeasureData,
    comparativeWarningMeasureLegendData,
    invert,
    primaryDotMeasureData,
    primaryDotMeasureLegendData,
    primarySegmentedMeasureData,
    primarySegmentedMeasureLegendData,
    qualitativeRangeData,
    qualitativeRangeLegendData,
    themeColor
}), domain = (0, chart_bullet_domain_1.getBulletDomain)({
    comparativeErrorMeasureComponent,
    comparativeErrorMeasureData,
    comparativeWarningMeasureComponent,
    comparativeWarningMeasureData,
    maxDomain,
    minDomain,
    primaryDotMeasureComponent,
    primaryDotMeasureData,
    primarySegmentedMeasureComponent,
    primarySegmentedMeasureData,
    qualitativeRangeComponent,
    qualitativeRangeData
}), legendOrientation = theme.legend.orientation, height = horizontal ? theme.chart.height : theme.chart.width, width = horizontal ? theme.chart.width : theme.chart.height, bulletSize = theme.chart.height }) => {
    // Note that we're using a fixed bullet height width to align components.
    const chartSize = {
        height: horizontal ? bulletSize : height,
        width: horizontal ? width : bulletSize
    };
    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)
    };
    // Bullet group title
    const bulletGroupTitle = (0, react_1.cloneElement)(groupTitleComponent, Object.assign(Object.assign(Object.assign({ height }, (name && { name: `${name}-${groupTitleComponent.type.displayName}` })), { standalone: false, subTitle: groupSubTitle, title: groupTitle, themeColor,
        width }), groupTitleComponent.props));
    // Bullet title
    const bulletTitle = (0, react_1.cloneElement)(titleComponent, Object.assign(Object.assign(Object.assign({ height,
        horizontal,
        legendPosition }, (name && { name: `${name}-${titleComponent.type.displayName}` })), { padding, standalone: false, subTitle,
        theme,
        themeColor,
        title,
        titlePosition,
        width }), titleComponent.props));
    // Comparative error measure
    const comparativeErrorMeasure = (0, react_1.cloneElement)(comparativeErrorMeasureComponent, Object.assign({ allowTooltip, barWidth: (0, chart_bullet_size_1.getComparativeMeasureErrorWidth)({
            height: chartSize.height,
            horizontal,
            themeColor,
            width: chartSize.width
        }), constrainToVisibleArea, data: comparativeErrorMeasureData, domain, height: chartSize.height, horizontal, labelComponent: allowTooltip ? (0, jsx_runtime_1.jsx)(ChartTooltip_1.ChartTooltip, { height: height, theme: theme, width: width }) : undefined, labels,
        padding, standalone: false, themeColor, width: chartSize.width, y: comparativeErrorMeasureDataY }, comparativeErrorMeasureComponent.props));
    // Comparative warning measure
    const comparativeWarningMeasure = (0, react_1.cloneElement)(comparativeWarningMeasureComponent, Object.assign({ allowTooltip, barWidth: (0, chart_bullet_size_1.getComparativeMeasureWarningWidth)({
            height: chartSize.height,
            horizontal,
            themeColor,
            width: chartSize.width
        }), constrainToVisibleArea, data: comparativeWarningMeasureData, domain, height: chartSize.height, horizontal, labelComponent: allowTooltip ? (0, jsx_runtime_1.jsx)(ChartTooltip_1.ChartTooltip, { height: height, theme: theme, width: width }) : undefined, labels,
        padding, standalone: false, themeColor, width: chartSize.width, y: comparativeWarningMeasureDataY }, comparativeWarningMeasureComponent.props));
    // Comparative zero measure
    const comparativeZeroMeasure = (0, react_1.cloneElement)(comparativeZeroMeasureComponent, Object.assign({ barWidth: (0, chart_bullet_size_1.getComparativeMeasureWidth)({ height: chartSize.height, horizontal, themeColor, width: chartSize.width }), data: [{ y: 0 }], domain, height: chartSize.height, horizontal,
        padding, standalone: false, themeColor, width: chartSize.width }, comparativeZeroMeasureComponent.props));
    let legendXOffset = 0;
    if (legendDirection === 'rtl') {
        legendXOffset = (0, chart_legend_1.getLegendMaxTextWidth)([
            ...(primaryDotMeasureLegendData ? primaryDotMeasureLegendData : []),
            ...(primarySegmentedMeasureLegendData ? primarySegmentedMeasureLegendData : []),
            ...(comparativeWarningMeasureLegendData ? comparativeWarningMeasureLegendData : []),
            ...(comparativeErrorMeasureLegendData ? comparativeErrorMeasureLegendData : []),
            ...(qualitativeRangeLegendData ? qualitativeRangeLegendData : [])
        ], theme);
    }
    // Legend
    const legend = (0, react_1.cloneElement)(legendComponent, Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ data: [
            ...(primaryDotMeasureLegendData ? primaryDotMeasureLegendData : []),
            ...(primarySegmentedMeasureLegendData ? primarySegmentedMeasureLegendData : []),
            ...(comparativeWarningMeasureLegendData ? comparativeWarningMeasureLegendData : []),
            ...(comparativeErrorMeasureLegendData ? comparativeErrorMeasureLegendData : []),
            ...(qualitativeRangeLegendData ? qualitativeRangeLegendData : [])
        ] }, (name && { name: `${name}-${legendComponent.type.displayName}` })), { itemsPerRow: legendItemsPerRow, orientation: legendOrientation, position: legendPosition, theme,
        themeColor }), (legendDirection === 'rtl' && {
        dataComponent: legendComponent.props.dataComponent ? ((0, react_1.cloneElement)(legendComponent.props.dataComponent, { transform: `translate(${legendXOffset})` })) : ((0, jsx_runtime_1.jsx)(ChartPoint_1.ChartPoint, { transform: `translate(${legendXOffset})` }))
    })), (legendDirection === 'rtl' && {
        labelComponent: legendComponent.props.labelComponent ? ((0, react_1.cloneElement)(legendComponent.props.labelComponent, {
            direction: 'rtl',
            dx: legendXOffset - 30
        })) : ((0, jsx_runtime_1.jsx)(ChartLabel_1.ChartLabel, { direction: "rtl", dx: legendXOffset - 30 }))
    })), legendComponent.props));
    // Primary dot measure
    const primaryDotMeasure = (0, react_1.cloneElement)(primaryDotMeasureComponent, Object.assign({ allowTooltip,
        constrainToVisibleArea, data: primaryDotMeasureData, domain, height: chartSize.height, horizontal,
        invert, labelComponent: allowTooltip ? (0, jsx_runtime_1.jsx)(ChartTooltip_1.ChartTooltip, { height: height, theme: theme, width: width }) : undefined, labels,
        padding, size: (0, chart_bullet_size_1.getPrimaryDotMeasureSize)({ height: chartSize.height, horizontal, themeColor, width: chartSize.width }), standalone: false, themeColor, width: chartSize.width, y: primaryDotMeasureDataY }, primaryDotMeasureComponent.props));
    // Primary segmented measure
    const primarySegmentedMeasure = (0, react_1.cloneElement)(primarySegmentedMeasureComponent, Object.assign({ allowTooltip,
        constrainToVisibleArea, barWidth: (0, chart_bullet_size_1.getPrimarySegmentedMeasureWidth)({
            height: chartSize.height,
            horizontal,
            themeColor,
            width: chartSize.width
        }), data: primarySegmentedMeasureData, domain, height: chartSize.height, horizontal,
        invert, labelComponent: allowTooltip ? (0, jsx_runtime_1.jsx)(ChartTooltip_1.ChartTooltip, { height: height, theme: theme, width: width }) : undefined, labels,
        padding, standalone: false, themeColor, width: chartSize.width, y: primarySegmentedMeasureDataY }, primarySegmentedMeasureComponent.props));
    // Qualitative range
    const qualitativeRange = (0, react_1.cloneElement)(qualitativeRangeComponent, Object.assign({ allowTooltip,
        constrainToVisibleArea, barWidth: (0, chart_bullet_size_1.getQualitativeRangeBarWidth)({ height: chartSize.height, horizontal, themeColor, width: chartSize.width }), data: qualitativeRangeData, domain, height: chartSize.height, horizontal,
        invert, labelComponent: allowTooltip ? (0, jsx_runtime_1.jsx)(ChartTooltip_1.ChartTooltip, { height: height, theme: theme, width: width }) : undefined, labels,
        padding, standalone: false, themeColor, width: chartSize.width, y: qualitativeRangeDataY, y0: qualitativeRangeDataY0 }, qualitativeRangeComponent.props));
    // Returns tick values -- Victory doesn't include min/max domain
    const getTickValues = (minVal, maxVal) => {
        const tickValues = [minVal, maxVal];
        let range = 0;
        if (minVal < 0 && maxVal < 0) {
            range = Math.abs(minVal - maxVal);
        }
        else if (minVal < 0) {
            range = Math.abs(minVal) + maxVal;
        }
        else {
            range = maxVal - minVal;
        }
        const tickInterval = range / (ChartStyles_1.ChartBulletStyles.axisTickCount - 1);
        for (let i = minVal; i < maxVal;) {
            i += tickInterval;
            tickValues.push(Math.ceil(i));
        }
        return tickValues;
    };
    // Returns a computed legend
    const getLegend = () => {
        if (!legend.props.data) {
            return null;
        }
        let dx = 0;
        let dy = 0;
        // Adjust for padding
        if (legendPosition === 'bottom') {
            if (horizontal) {
                dy = defaultPadding.top * 0.5 + (defaultPadding.bottom * 0.5 - defaultPadding.bottom) - 25;
            }
            else if (title) {
                dy = -defaultPadding.bottom + 60;
            }
            else {
                dy = -defaultPadding.bottom;
            }
        }
        else if (legendPosition === 'bottom-left') {
            if (horizontal) {
                dy = defaultPadding.top * 0.5 + (defaultPadding.bottom * 0.5 - defaultPadding.bottom) - 25;
            }
            else if (title) {
                dy = -defaultPadding.bottom + 60;
            }
            else {
                dy = -defaultPadding.bottom;
            }
            dx = -10;
        }
        return (0, chart_legend_1.getComputedLegend)({
            allowWrap: legendAllowWrap === true || typeof legendAllowWrap === 'function',
            chartType: 'bullet',
            dx,
            dy,
            height: chartSize.height,
            legendComponent: legend,
            padding: defaultPadding,
            position: legendPosition,
            theme,
            width: chartSize.width
        });
    };
    // Returns comparative zero measure
    const getComparativeZeroMeasure = () => {
        const _domain = domain;
        let low = 0;
        if (Array.isArray(_domain)) {
            low = _domain[0];
        }
        else if (_domain.y && Array.isArray(_domain.y)) {
            low = _domain.y[0];
        }
        let high = 0;
        if (Array.isArray(_domain)) {
            high = _domain[_domain.length - 1];
        }
        else if (_domain.y && Array.isArray(_domain.y)) {
            high = _domain.y[_domain.y.length - 1];
        }
        if (low < 0 && high > 0) {
            return comparativeZeroMeasure;
        }
        return null;
    };
    // Axis component for custom tick values
    const axis = (0, react_1.cloneElement)(axisComponent, Object.assign(Object.assign(Object.assign({ dependentAxis: horizontal ? false : true, domain: !horizontal
            ? domain
            : {
                x: domain.y,
                y: domain.x
            }, height: chartSize.height }, (name && { name: `${name}-${axisComponent.type.displayName}` })), { 
        // Adjust for padding
        offsetX: !horizontal ? defaultPadding.left * 0.5 + (defaultPadding.right * 0.5 - (defaultPadding.right - 55)) : 0, offsetY: horizontal ? 80 - defaultPadding.top * 0.5 + (defaultPadding.bottom * 0.5 - 25) : 0, padding, standalone: false, themeColor, tickCount: ChartStyles_1.ChartBulletStyles.axisTickCount, tickValues: getTickValues(domain.y[0], domain.y[1]), width: chartSize.width }), axisComponent.props));
    const computedLegend = getLegend();
    const bulletChart = ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [axis, bulletGroupTitle, bulletTitle, qualitativeRange, primarySegmentedMeasure, primaryDotMeasure, comparativeErrorMeasure, comparativeWarningMeasure, getComparativeZeroMeasure(), computedLegend] }));
    // Callback to compliment legendAllowWrap
    (0, react_1.useEffect)(() => {
        if (typeof legendAllowWrap === 'function') {
            const extraHeight = (0, chart_legend_1.getLegendItemsExtraHeight)({
                legendData: computedLegend.props.data,
                legendOrientation: computedLegend.props.orientation,
                legendProps: computedLegend.props,
                theme
            });
            legendAllowWrap(extraHeight);
        }
    }, [computedLegend, legendAllowWrap, theme, width]);
    return standalone ? ((0, jsx_runtime_1.jsx)(ChartContainer_1.ChartContainer, { desc: ariaDesc, height: height, title: ariaTitle, theme: theme, width: width, children: bulletChart })) : ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: bulletChart }));
};
exports.ChartBullet = ChartBullet;
exports.ChartBullet.displayName = 'ChartBullet';
(0, hoist_non_react_statics_1.default)(exports.ChartBullet, victory_chart_1.VictoryChart);
//# sourceMappingURL=ChartBullet.js.map