@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
98 lines • 5.04 kB
JavaScript
import defaultsDeep from 'lodash/defaultsDeep';
import { getMarker, getSymbol } from './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
*/
export 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 = getSymbol(series, param.seriesIndex, echart);
const marker = 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 defaultsDeep(tooltip, defaults);
};
/**
* 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
*/
export 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 defaultsDeep(tooltip, defaults);
};
//# sourceMappingURL=tooltip.js.map