@grafana/ui
Version:
Grafana Components Library
141 lines (138 loc) • 5.38 kB
JavaScript
import tinycolor from 'tinycolor2';
import { FieldType, formattedValueToString } from '@grafana/data';
import { TableCellDisplayMode, TableCellBackgroundDisplayMode, BarGaugeDisplayMode } from '@grafana/schema';
import { getTextColorForAlphaBackground } from '../../utils/colors.mjs';
;
function getTextAlign(field) {
if (!field) {
return "flex-start";
}
if (field.config.custom) {
const custom = field.config.custom;
switch (custom.align) {
case "right":
return "flex-end";
case "left":
return "flex-start";
case "center":
return "center";
}
}
if (field.type === FieldType.number) {
return "flex-end";
}
return "flex-start";
}
const defaultCellOptions = { type: TableCellDisplayMode.Auto };
function getCellOptions(field) {
var _a, _b, _c;
if ((_a = field.config.custom) == null ? void 0 : _a.displayMode) {
return migrateTableDisplayModeToCellOptions((_b = field.config.custom) == null ? void 0 : _b.displayMode);
}
if (!((_c = field.config.custom) == null ? void 0 : _c.cellOptions)) {
return defaultCellOptions;
}
return field.config.custom.cellOptions;
}
function migrateTableDisplayModeToCellOptions(displayMode) {
switch (displayMode) {
// In the case of the gauge we move to a different option
case "basic":
case "gradient-gauge":
case "lcd-gauge":
let gaugeMode = BarGaugeDisplayMode.Basic;
if (displayMode === "gradient-gauge") {
gaugeMode = BarGaugeDisplayMode.Gradient;
} else if (displayMode === "lcd-gauge") {
gaugeMode = BarGaugeDisplayMode.Lcd;
}
return {
type: TableCellDisplayMode.Gauge,
mode: gaugeMode
};
// Also true in the case of the color background
case "color-background":
case "color-background-solid":
let mode = TableCellBackgroundDisplayMode.Basic;
if (displayMode === "color-background") {
mode = TableCellBackgroundDisplayMode.Gradient;
}
return {
type: TableCellDisplayMode.ColorBackground,
mode
};
default:
return {
// @ts-ignore TS5 / TS6
type: displayMode
};
}
}
function getAlignmentFactor(field, displayValue, rowIndex) {
var _a;
let alignmentFactor = (_a = field.state) == null ? void 0 : _a.alignmentFactors;
if (alignmentFactor) {
if (formattedValueToString(alignmentFactor).length < formattedValueToString(displayValue).length) {
alignmentFactor = { ...displayValue };
field.state.alignmentFactors = alignmentFactor;
}
return alignmentFactor;
} else {
alignmentFactor = { ...displayValue };
const maxIndex = Math.min(field.values.length, rowIndex + 1e3);
for (let i = rowIndex + 1; i < maxIndex; i++) {
const nextDisplayValue = field.display(field.values[i]);
if (formattedValueToString(alignmentFactor).length > formattedValueToString(nextDisplayValue).length) {
alignmentFactor.text = displayValue.text;
}
}
if (field.state) {
field.state.alignmentFactors = alignmentFactor;
} else {
field.state = { alignmentFactors: alignmentFactor };
}
return alignmentFactor;
}
}
function getCellColors(theme, cellOptions, displayValue) {
var _a;
const darkeningFactor = theme.isDark ? 1 : -0.7;
let textColor = void 0;
let bgColor = void 0;
let bgHoverColor = void 0;
if (cellOptions.type === TableCellDisplayMode.ColorText) {
textColor = displayValue.color;
} else if (cellOptions.type === TableCellDisplayMode.ColorBackground) {
const mode = (_a = cellOptions.mode) != null ? _a : TableCellBackgroundDisplayMode.Gradient;
if (mode === TableCellBackgroundDisplayMode.Basic) {
textColor = getTextColorForAlphaBackground(displayValue.color, theme.isDark);
bgColor = tinycolor(displayValue.color).toRgbString();
bgHoverColor = tinycolor(displayValue.color).setAlpha(1).toRgbString();
} else if (mode === TableCellBackgroundDisplayMode.Gradient) {
const hoverColor = tinycolor(displayValue.color).setAlpha(1).toRgbString();
const bgColor2 = tinycolor(displayValue.color).darken(10 * darkeningFactor).spin(5);
textColor = getTextColorForAlphaBackground(displayValue.color, theme.isDark);
bgColor = `linear-gradient(120deg, ${bgColor2.toRgbString()}, ${displayValue.color})`;
bgHoverColor = `linear-gradient(120deg, ${bgColor2.setAlpha(1).toRgbString()}, ${hoverColor})`;
}
}
return { textColor, bgColor, bgHoverColor };
}
const getDataLinksActionsTooltipUtils = (links, actions) => {
const hasMultipleLinksOrActions = links.length > 1 || Boolean(actions == null ? void 0 : actions.length);
const shouldShowLink = links.length === 1 && !Boolean(actions == null ? void 0 : actions.length);
return { shouldShowLink, hasMultipleLinksOrActions };
};
const shouldTriggerTooltip = (event) => {
return event.target === event.currentTarget;
};
const tooltipOnClickHandler = (setTooltipCoords) => {
return (event) => {
if (shouldTriggerTooltip(event)) {
const { clientX, clientY } = event;
setTooltipCoords({ clientX, clientY });
}
};
};
export { getAlignmentFactor, getCellColors, getCellOptions, getDataLinksActionsTooltipUtils, getTextAlign, migrateTableDisplayModeToCellOptions, tooltipOnClickHandler };
//# sourceMappingURL=cellUtils.mjs.map