@patternfly/react-charts/dist/js/echarts/components/utils/tooltip.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.getSankeyTooltip = exports.getLegendTooltip = void 0;
const tslib_1 = require("tslib");
const defaultsDeep_1 = tslib_1.__importDefault(require("lodash/defaultsDeep"));
const symbol_1 = require("./symbol");
/**
 * Returns a custom legend tooltip for Line charts
 *
 * @param series
 * @param option
 * @param echart
 * @private Not intended as public API and subject to change
 */
const getLegendTooltip = (series, option, echart) => {
    const tooltip = option === null || option === void 0 ? void 0 : option.tooltip;
    const valueFormatter = (tooltip === null || tooltip === void 0 ? void 0 : tooltip.valueFormatter) ? tooltip.valueFormatter : (value) => value;
    const defaults = {
        confine: true,
        formatter: (params) => {
            let result = '';
            params === null || params === void 0 ? void 0 : params.map((param, index) => {
                if (index === 0) {
                    result += `<p style="text-align:left; padding-bottom: 5px;">${param.name}</p>`;
                }
                const symbol = (0, symbol_1.getSymbol)(series, param.seriesIndex, echart);
                const marker = (0, symbol_1.getMarker)(series[param.seriesIndex], symbol, param.color);
                const formattedValue = valueFormatter(param.value, param.dataIndex);
                const seriesName = `<span style="margin-left: 10px;">${param.seriesName}</span>`;
                const value = `<strong style="float:right; margin-left: 20px;">${formattedValue}</strong>`;
                result += `<p style="text-align:left;">${marker}${seriesName}${value}</p>`;
            });
            return result;
        },
        trigger: 'axis'
    };
    return (0, defaultsDeep_1.default)(tooltip, defaults);
};
exports.getLegendTooltip = getLegendTooltip;
/**
 * Returns source and target colors from given series
 *
 * @param series
 * @param formatterParams
 * @private Not intended as public API and subject to change
 */
const getItemColor = (series, formatterParams) => {
    var _a, _b;
    const serie = series[formatterParams.seriesIndex];
    const sourceData = serie === null || serie === void 0 ? void 0 : serie.data.find((datum) => { var _a; return datum.name === ((_a = formatterParams.data) === null || _a === void 0 ? void 0 : _a.source); });
    const targetData = serie === null || serie === void 0 ? void 0 : serie.data.find((datum) => { var _a; return datum.name === ((_a = formatterParams.data) === null || _a === void 0 ? void 0 : _a.target); });
    const sourceColor = (_a = sourceData === null || sourceData === void 0 ? void 0 : sourceData.itemStyle) === null || _a === void 0 ? void 0 : _a.color;
    const targetColor = (_b = targetData === null || targetData === void 0 ? void 0 : targetData.itemStyle) === null || _b === void 0 ? void 0 : _b.color;
    return { sourceColor, targetColor };
};
/**
 * Returns a custom legend tooltip for Sankey chart
 *
 * @param series
 * @param option
 * @private Not intended as public API and subject to change
 */
const getSankeyTooltip = (series, option) => {
    const symbolSize = '10px';
    const tooltip = option === null || option === void 0 ? void 0 : option.tooltip;
    const sourceLabel = (tooltip === null || tooltip === void 0 ? void 0 : tooltip.sourceLabel) ? tooltip.sourceLabel : '';
    const destinationLabel = (tooltip === null || tooltip === void 0 ? void 0 : tooltip.destinationLabel) ? tooltip.destinationLabel : '';
    const valueFormatter = (tooltip === null || tooltip === void 0 ? void 0 : tooltip.valueFormatter) ? tooltip.valueFormatter : (value) => value;
    const defaults = {
        confine: true,
        formatter: (params) => {
            var _a, _b;
            let result;
            if (((_a = params === null || params === void 0 ? void 0 : params.data) === null || _a === void 0 ? void 0 : _a.source) && ((_b = params === null || params === void 0 ? void 0 : params.data) === null || _b === void 0 ? void 0 : _b.target)) {
                const { sourceColor, targetColor } = getItemColor(series, params);
                result = `
            <p>${sourceLabel}</p>
            <div style="display: inline-block; background-color: ${sourceColor}; height: ${symbolSize}; width: ${symbolSize};"></div>
            ${params.data.source}
            <p style="padding-top: 10px;">${destinationLabel}</p>
            <p style="text-align:left;">
              <div style="display: inline-block; background-color: ${targetColor}; height: ${symbolSize}; width: ${symbolSize};"></div>
              ${params.data.target}
              <strong style="float:right;">
                ${valueFormatter(params.value, params.dataIndex)}
              </strong>
            </p>
          `;
            }
            else {
                result = `
          <div style="display: inline-block; background-color: ${params.color}; height: ${symbolSize}; width: ${symbolSize};"></div>
          ${params.name} ${valueFormatter(params.value, params.dataIndex)}
        `;
            }
            return result.replace(/\s\s+/g, ' ');
        },
        trigger: 'item',
        triggerOn: 'mousemove'
    };
    return (0, defaultsDeep_1.default)(tooltip, defaults);
};
exports.getSankeyTooltip = getSankeyTooltip;
//# sourceMappingURL=tooltip.js.map