@grafana/ui
Version:
Grafana Components Library
185 lines (180 loc) • 7.7 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var data = require('@grafana/data');
var schema = require('@grafana/schema');
var types = require('./types.cjs');
;
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 types.VizTooltipColorIndicator.series:
return styles.series;
case types.VizTooltipColorIndicator.value:
return styles.value;
case types.VizTooltipColorIndicator.hexagon:
return styles.hexagon;
case types.VizTooltipColorIndicator.pie_1_4:
return styles.pie_1_4;
case types.VizTooltipColorIndicator.pie_2_4:
return styles.pie_2_4;
case types.VizTooltipColorIndicator.pie_3_4:
return styles.pie_3_4;
case types.VizTooltipColorIndicator.marker_sm:
return styles.marker_sm;
case types.VizTooltipColorIndicator.marker_md:
return styles.marker_md;
case types.VizTooltipColorIndicator.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 isFrameValuedField = (field) => field.type === data.FieldType.frame || field.type === data.FieldType.nestedFrames;
const stringifyValue = (value) => {
try {
return JSON.stringify(value);
} catch (error) {
console.warn("Cannot render tooltip value", { error, value });
return String(value);
}
};
const getTooltipDisplayValue = (value, field) => {
if (Array.isArray(value)) {
if (value.length === 0) {
return { text: "", numeric: NaN };
}
return { text: stringifyValue(value), numeric: NaN };
}
if (value && typeof value === "object") {
return { text: stringifyValue(value), numeric: NaN };
}
const display = field.display(value);
return { text: data.formattedValueToString(display), numeric: display.numeric, color: display.color };
};
const getFieldDisplayItems = (fields, xField, dataIdxs, seriesIdx, mode, sortOrder, fieldFilter = (field) => true, hideZeros = false, extraFields) => {
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 === data.FieldType.time || isFrameValuedField(field) || !fieldFilter(field) || ((_b = (_a = field.config.custom) == null ? void 0 : _a.hideFrom) == null ? void 0 : _b.tooltip)) {
continue;
}
if (mode === schema.TooltipDisplayMode.Single && seriesIdx !== i) {
continue;
}
let dataIdx = dataIdxs[i];
if (dataIdx == null) {
continue;
}
if (!(field.type === data.FieldType.number || field.type === data.FieldType.boolean || field.type === data.FieldType.enum)) {
allNumeric = false;
}
const v = fields[i].values[dataIdx];
if (v == null && field.config.noValue == null || hideZeros && v === 0) {
continue;
}
const display = getTooltipDisplayValue(v, field);
const numeric = !Number.isNaN(display.numeric) ? display.numeric : sortOrder === schema.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: display.text,
color: (_e = display.color) != null ? _e : data.FALLBACK_COLOR,
colorIndicator,
colorPlacement,
isActive: mode === schema.TooltipDisplayMode.Multi && seriesIdx === i,
numeric,
lineStyle: (_f = field.config.custom) == null ? void 0 : _f.lineStyle
});
}
extraFields == null ? void 0 : extraFields.forEach((field) => {
var _a2, _b2, _c2, _d2, _e2;
if (!((_b2 = (_a2 = field.config.custom) == null ? void 0 : _a2.hideFrom) == null ? void 0 : _b2.tooltip) && !isFrameValuedField(field)) {
const { colorIndicator, colorPlacement } = getIndicatorAndPlacement(field);
const rawValue = field.values[dataIdxs[0]];
const display = getTooltipDisplayValue(rawValue, field);
rows.push({
label: (_d2 = (_c2 = field.state) == null ? void 0 : _c2.displayName) != null ? _d2 : field.name,
value: display.text,
color: data.FALLBACK_COLOR,
colorIndicator,
colorPlacement,
lineStyle: (_e2 = field.config.custom) == null ? void 0 : _e2.lineStyle,
isHiddenFromViz: true
});
}
});
if (sortOrder !== schema.SortOrder.None && rows.length > 1) {
const cmp = allNumeric ? numberCmp : stringCmp;
const mult = sortOrder === schema.SortOrder.Descending ? -1 : 1;
rows.sort((a, b) => mult * cmp(a, b));
}
return rows;
};
const getFieldDisplayLinks = (field, rowIdx) => {
var _a, _b;
const links = [];
if (((_b = (_a = field.config.links) == null ? void 0 : _a.length) != null ? _b : 0) > 0 && field.getLinks != null) {
const v = field.values[rowIdx];
const disp = field.display ? field.display(v) : { text: `${v}`, numeric: +v };
const linkLookup = /* @__PURE__ */ new Set();
field.getLinks({ calculatedValue: disp, valueRowIndex: rowIdx }).forEach((link) => {
const key = `${link.title}/${link.href}`;
if (!linkLookup.has(key)) {
links.push(link);
linkLookup.add(key);
}
});
}
return links;
};
const getIndicatorAndPlacement = (field) => {
const colorMode = data.getFieldColorModeForField(field);
let colorIndicator = types.VizTooltipColorIndicator.series;
let colorPlacement = types.VizTooltipColorPlacement.first;
if (colorMode.isByValue) {
colorIndicator = types.VizTooltipColorIndicator.value;
colorPlacement = types.VizTooltipColorPlacement.trailing;
}
return { colorIndicator, colorPlacement };
};
const isTooltipScrollable = ({ mode, maxHeight }) => {
return mode === schema.TooltipDisplayMode.Multi && maxHeight != null;
};
exports.calculateTooltipPosition = calculateTooltipPosition;
exports.getColorIndicatorClass = getColorIndicatorClass;
exports.getFieldDisplayItems = getFieldDisplayItems;
exports.getFieldDisplayLinks = getFieldDisplayLinks;
exports.getTooltipDisplayValue = getTooltipDisplayValue;
exports.isTooltipScrollable = isTooltipScrollable;
//# sourceMappingURL=utils.cjs.map