@grafana/ui
Version:
Grafana Components Library
133 lines (130 loc) • 5.56 kB
JavaScript
import { FieldType, FALLBACK_COLOR, formattedValueToString, getFieldColorModeForField } from '@grafana/data';
import { TooltipDisplayMode, SortOrder } from '@grafana/schema';
import { ColorIndicator, ColorPlacement } from './types.mjs';
;
const calculateTooltipPosition = (xPos = 0, yPos = 0, tooltipWidth = 0, tooltipHeight = 0, xOffset = 0, yOffset = 0, windowWidth = 0, windowHeight = 0) => {
let x = xPos;
let y = yPos;
const overflowRight = Math.max(xPos + xOffset + tooltipWidth - (windowWidth - xOffset), 0);
const overflowLeft = Math.abs(Math.min(xPos - xOffset - tooltipWidth - xOffset, 0));
const wouldOverflowRight = overflowRight > 0;
const wouldOverflowLeft = overflowLeft > 0;
const overflowBelow = Math.max(yPos + yOffset + tooltipHeight - (windowHeight - yOffset), 0);
const overflowAbove = Math.abs(Math.min(yPos - yOffset - tooltipHeight - yOffset, 0));
const wouldOverflowBelow = overflowBelow > 0;
const wouldOverflowAbove = overflowAbove > 0;
if (wouldOverflowRight && wouldOverflowLeft) {
x = overflowRight > overflowLeft ? xOffset : windowWidth - xOffset - tooltipWidth;
} else if (wouldOverflowRight) {
x = xPos - xOffset - tooltipWidth;
} else {
x = xPos + xOffset;
}
if (wouldOverflowBelow && wouldOverflowAbove) {
y = overflowBelow > overflowAbove ? yOffset : windowHeight - yOffset - tooltipHeight;
} else if (wouldOverflowBelow) {
y = yPos - yOffset - tooltipHeight;
} else {
y = yPos + yOffset;
}
return { x, y };
};
const getColorIndicatorClass = (colorIndicator, styles) => {
switch (colorIndicator) {
case ColorIndicator.series:
return styles.series;
case ColorIndicator.value:
return styles.value;
case ColorIndicator.hexagon:
return styles.hexagon;
case ColorIndicator.pie_1_4:
return styles.pie_1_4;
case ColorIndicator.pie_2_4:
return styles.pie_2_4;
case ColorIndicator.pie_3_4:
return styles.pie_3_4;
case ColorIndicator.marker_sm:
return styles.marker_sm;
case ColorIndicator.marker_md:
return styles.marker_md;
case ColorIndicator.marker_lg:
return styles.marker_lg;
default:
return styles.value;
}
};
const numberCmp = (a, b) => a.numeric - b.numeric;
const collator = new Intl.Collator(void 0, { numeric: true, sensitivity: "base" });
const stringCmp = (a, b) => collator.compare(`${a.value}`, `${b.value}`);
const getContentItems = (fields, xField, dataIdxs, seriesIdx, mode, sortOrder, fieldFilter = (field) => true, hideZeros = false, _restFields) => {
var _a, _b, _c, _d, _e, _f;
let rows = [];
let allNumeric = true;
for (let i = 0; i < fields.length; i++) {
const field = fields[i];
if (field === xField || field.type === FieldType.time || !fieldFilter(field) || ((_b = (_a = field.config.custom) == null ? void 0 : _a.hideFrom) == null ? void 0 : _b.tooltip)) {
continue;
}
if (mode === TooltipDisplayMode.Single && seriesIdx !== i) {
continue;
}
let dataIdx = dataIdxs[i];
if (dataIdx == null) {
continue;
}
if (!(field.type === FieldType.number || field.type === FieldType.boolean || field.type === FieldType.enum)) {
allNumeric = false;
}
const v = fields[i].values[dataIdx];
if (v == null && field.config.noValue == null || hideZeros && v === 0) {
continue;
}
const display = field.display(v);
const numeric = !Number.isNaN(display.numeric) ? display.numeric : sortOrder === SortOrder.Descending ? Number.MIN_SAFE_INTEGER : Number.MAX_SAFE_INTEGER;
const { colorIndicator, colorPlacement } = getIndicatorAndPlacement(field);
rows.push({
label: (_d = (_c = field.state) == null ? void 0 : _c.displayName) != null ? _d : field.name,
value: formattedValueToString(display),
color: (_e = display.color) != null ? _e : FALLBACK_COLOR,
colorIndicator,
colorPlacement,
isActive: mode === TooltipDisplayMode.Multi && seriesIdx === i,
numeric,
lineStyle: (_f = field.config.custom) == null ? void 0 : _f.lineStyle
});
}
_restFields == null ? void 0 : _restFields.forEach((field) => {
var _a2, _b2, _c2, _d2, _e2;
if (!((_b2 = (_a2 = field.config.custom) == null ? void 0 : _a2.hideFrom) == null ? void 0 : _b2.tooltip)) {
const { colorIndicator, colorPlacement } = getIndicatorAndPlacement(field);
const display = field.display(field.values[dataIdxs[0]]);
rows.push({
label: (_d2 = (_c2 = field.state) == null ? void 0 : _c2.displayName) != null ? _d2 : field.name,
value: formattedValueToString(display),
color: FALLBACK_COLOR,
colorIndicator,
colorPlacement,
lineStyle: (_e2 = field.config.custom) == null ? void 0 : _e2.lineStyle,
isHiddenFromViz: true
});
}
});
if (sortOrder !== SortOrder.None && rows.length > 1) {
const cmp = allNumeric ? numberCmp : stringCmp;
const mult = sortOrder === SortOrder.Descending ? -1 : 1;
rows.sort((a, b) => mult * cmp(a, b));
}
return rows;
};
const getIndicatorAndPlacement = (field) => {
const colorMode = getFieldColorModeForField(field);
let colorIndicator = ColorIndicator.series;
let colorPlacement = ColorPlacement.first;
if (colorMode.isByValue) {
colorIndicator = ColorIndicator.value;
colorPlacement = ColorPlacement.trailing;
}
return { colorIndicator, colorPlacement };
};
export { calculateTooltipPosition, getColorIndicatorClass, getContentItems };
//# sourceMappingURL=utils.mjs.map