@grafana/ui
Version:
Grafana Components Library
134 lines (131 loc) • 4.69 kB
JavaScript
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import { css } from '@emotion/css';
import { getMinMaxAndDelta, isDataFrameWithValue, FieldType, isDataFrame } from '@grafana/data';
import { TableCellDisplayMode, GraphDrawStyle, LineInterpolation, GraphGradientMode, BarAlignment, VisibilityMode } from '@grafana/schema';
import { useStyles2 } from '../../../../themes/ThemeContext.mjs';
import 'micro-memoize';
import '@emotion/react';
import 'tinycolor2';
import '../../../../utils/skeleton.mjs';
import '../../../../utils/dom.mjs';
import 'react';
import '../../../../utils/colors.mjs';
import 'slate';
import { measureText } from '../../../../utils/measureText.mjs';
import 'lodash';
import '../../../../utils/logger.mjs';
import { FormattedValueDisplay } from '../../../FormattedValueDisplay/FormattedValueDisplay.mjs';
import { Sparkline } from '../../../Sparkline/Sparkline.mjs';
import { 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, _c, _d;
const { field, value, theme, timeRange, rowIdx, justifyContent, width } = props;
const styles = useStyles2(getStyles, justifyContent);
const sparkline = getSparkline(value);
if (!sparkline) {
return /* @__PURE__ */ jsx(Fragment, { children: field.config.noValue || "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 = (_b = (_a = field.config.custom) == null ? void 0 : _a.cellOptions) == null ? void 0 : _b.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(`${(_c = alignmentFactor.prefix) != null ? _c : ""}${alignmentFactor.text}${(_d = alignmentFactor.suffix) != null ? _d : ""}`, 16).width + theme.spacing.gridSize;
valueElement = /* @__PURE__ */ jsx(
FormattedValueDisplay,
{
style: {
width: `${valueWidth - theme.spacing.gridSize}px`,
textAlign: "right",
marginRight: theme.spacing(1)
},
className: styles.valueContainer,
value: displayValue
}
);
}
return /* @__PURE__ */ jsxs("div", { className: styles.cellContainer, children: [
valueElement,
/* @__PURE__ */ jsx(Sparkline, { width: width - valueWidth, height: 25, sparkline, config, theme })
] });
};
function getSparkline(value) {
if (Array.isArray(value)) {
return {
y: {
name: "test",
type: FieldType.number,
values: value,
config: {}
}
};
}
if (isDataFrame(value)) {
const timeField = value.fields.find((x) => x.type === FieldType.time);
const numberField = value.fields.find((x) => x.type === FieldType.number);
if (timeField && numberField) {
return { x: timeField, y: numberField };
}
}
return;
}
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 = (theme, justifyContent) => ({
cellContainer: css({
display: "flex",
width: "100%",
alignItems: "center",
justifyContent
}),
valueContainer: css({
div: { width: "inherit" }
})
});
export { SparklineCell, defaultSparklineCellConfig };
//# sourceMappingURL=SparklineCell.mjs.map