@grafana/ui
Version:
Grafana Components Library
76 lines (73 loc) • 2.65 kB
JavaScript
import { jsx } from 'react/jsx-runtime';
import { isFunction } from 'lodash';
import { ThresholdsMode, getFieldConfigWithMinMax, VizOrientation } from '@grafana/data';
import { BarGaugeDisplayMode, TableCellDisplayMode, BarGaugeValueMode } from '@grafana/schema';
import { BarGauge } from '../../BarGauge/BarGauge.mjs';
import { DataLinksContextMenu } from '../../DataLinks/DataLinksContextMenu.mjs';
import { getCellOptions, getAlignmentFactor } from '../utils.mjs';
const defaultScale = {
mode: ThresholdsMode.Absolute,
steps: [
{
color: "blue",
value: -Infinity
},
{
color: "green",
value: 20
}
]
};
const BarGaugeCell = (props) => {
var _a;
const { field, innerWidth, tableStyles, cell, cellProps, row } = props;
const displayValue = field.display(cell.value);
const cellOptions = getCellOptions(field);
let config = getFieldConfigWithMinMax(field, false);
if (!config.thresholds) {
config = {
...config,
thresholds: defaultScale
};
}
let barGaugeMode = BarGaugeDisplayMode.Gradient;
let valueDisplayMode = void 0;
if (cellOptions.type === TableCellDisplayMode.Gauge) {
barGaugeMode = (_a = cellOptions.mode) != null ? _a : BarGaugeDisplayMode.Gradient;
valueDisplayMode = cellOptions.valueDisplayMode !== void 0 ? cellOptions.valueDisplayMode : BarGaugeValueMode.Text;
}
const getLinks = () => {
if (!isFunction(field.getLinks)) {
return [];
}
return field.getLinks({ valueRowIndex: row.index });
};
const hasLinks = Boolean(getLinks().length);
const alignmentFactors = getAlignmentFactor(field, displayValue, cell.row.index);
const renderComponent = (menuProps) => {
const { openMenu, targetClassName } = menuProps;
return /* @__PURE__ */ jsx(
BarGauge,
{
width: innerWidth,
height: tableStyles.cellHeightInner,
field: config,
display: field.display,
text: { valueSize: 14 },
value: displayValue,
orientation: VizOrientation.Horizontal,
theme: tableStyles.theme,
alignmentFactors,
onClick: openMenu,
className: targetClassName,
itemSpacing: 1,
lcdCellWidth: 8,
displayMode: barGaugeMode,
valueDisplayMode
}
);
};
return /* @__PURE__ */ jsx("div", { ...cellProps, className: tableStyles.cellContainer, children: hasLinks ? /* @__PURE__ */ jsx(DataLinksContextMenu, { links: getLinks, style: { display: "flex", width: "100%" }, children: (api) => renderComponent(api) }) : renderComponent({}) });
};
export { BarGaugeCell };
//# sourceMappingURL=BarGaugeCell.mjs.map