@grafana/ui
Version:
Grafana Components Library
98 lines (95 loc) • 3.89 kB
JavaScript
import { jsx, jsxs } from 'react/jsx-runtime';
import { css } from '@emotion/css';
import memoize from 'micro-memoize';
import { getMinMaxAndDelta, isDataFrameWithValue } from '@grafana/data';
import { t } from '@grafana/i18n';
import { VisibilityMode, BarAlignment, GraphGradientMode, LineInterpolation, GraphDrawStyle, TableCellDisplayMode } from '@grafana/schema';
import { measureText } from '../../../../utils/measureText.mjs';
import { FormattedValueDisplay } from '../../../FormattedValueDisplay/FormattedValueDisplay.mjs';
import { Sparkline } from '../../../Sparkline/Sparkline.mjs';
import { MaybeWrapWithLink } from '../components/MaybeWrapWithLink.mjs';
import { isTableCellStylesKeyEqual } from '../styles.mjs';
import { prepareSparklineValue, getAlignmentFactor, getCellOptions } from '../utils.mjs';
;
const defaultSparklineCellConfig = {
type: TableCellDisplayMode.Sparkline,
drawStyle: GraphDrawStyle.Line,
lineInterpolation: LineInterpolation.Smooth,
lineWidth: 1,
fillOpacity: 17,
gradientMode: GraphGradientMode.Hue,
pointSize: 2,
barAlignment: BarAlignment.Center,
showPoints: VisibilityMode.Never,
hideValue: false
};
const SparklineCell = (props) => {
var _a, _b;
const { field, value, theme, timeRange, rowIdx, width } = props;
const sparkline = prepareSparklineValue(value, field);
if (!sparkline) {
return /* @__PURE__ */ jsx(MaybeWrapWithLink, { field, rowIdx, children: field.config.noValue || t("grafana-ui.table.sparkline.no-data", "no data") });
}
if (sparkline.x && !sparkline.x.config.interval && sparkline.x.values.length > 1) {
sparkline.x.config.interval = sparkline.x.values[1] - sparkline.x.values[0];
}
sparkline.y.values = sparkline.y.values.map((v) => {
if (!Number.isFinite(v)) {
return null;
} else {
return v;
}
});
const range = getMinMaxAndDelta(sparkline.y);
sparkline.y.config.min = range.min;
sparkline.y.config.max = range.max;
sparkline.y.state = { range };
sparkline.timeRange = timeRange;
const cellOptions = getTableSparklineCellOptions(field);
const config = {
color: field.config.color,
custom: {
...defaultSparklineCellConfig,
...cellOptions
}
};
const hideValue = cellOptions.hideValue;
let valueWidth = 0;
let valueElement = null;
if (!hideValue) {
const newValue = isDataFrameWithValue(value) ? value.value : null;
const displayValue = field.display(newValue);
const alignmentFactor = getAlignmentFactor(field, displayValue, rowIdx);
valueWidth = measureText(`${(_a = alignmentFactor.prefix) != null ? _a : ""}${alignmentFactor.text}${(_b = alignmentFactor.suffix) != null ? _b : ""}`, 16).width + theme.spacing.gridSize;
valueElement = /* @__PURE__ */ jsx(FormattedValueDisplay, { style: { width: valueWidth }, value: displayValue });
}
return /* @__PURE__ */ jsxs(MaybeWrapWithLink, { field, rowIdx, children: [
valueElement,
/* @__PURE__ */ jsx(Sparkline, { width: width - valueWidth, height: 25, sparkline, config, theme })
] });
};
function getTableSparklineCellOptions(field) {
let options = getCellOptions(field);
if (options.type === TableCellDisplayMode.Auto) {
options = { ...options, type: TableCellDisplayMode.Sparkline };
}
if (options.type === TableCellDisplayMode.Sparkline) {
return options;
}
throw new Error(`Expected options type ${TableCellDisplayMode.Sparkline} but got ${options.type}`);
}
const getStyles = memoize(
(theme, { textAlign }) => css({
"&, & > a": {
width: "100%",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
gap: theme.spacing(1),
...textAlign === "right" && { flexDirection: "row-reverse" }
}
}),
{ isMatchingKey: isTableCellStylesKeyEqual }
);
export { SparklineCell, getStyles };
//# sourceMappingURL=SparklineCell.mjs.map