mirror of https://github.com/grafana/grafana
Table: Introduce sparkline cell type (#63182)
Domas
2 years ago
committed by
GitHub
parent
c955c20670
commit
548a5054ad
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,114 @@ |
||||
import { isArray } from 'lodash'; |
||||
import React, { FC } from 'react'; |
||||
|
||||
import { |
||||
ArrayVector, |
||||
FieldType, |
||||
FieldConfig, |
||||
getMinMaxAndDelta, |
||||
FieldSparkline, |
||||
isDataFrame, |
||||
Field, |
||||
} from '@grafana/data'; |
||||
import { |
||||
BarAlignment, |
||||
GraphDrawStyle, |
||||
GraphFieldConfig, |
||||
GraphGradientMode, |
||||
LineInterpolation, |
||||
TableSparklineCellOptions, |
||||
TableCellDisplayMode, |
||||
VisibilityMode, |
||||
} from '@grafana/schema'; |
||||
|
||||
import { Sparkline } from '../Sparkline/Sparkline'; |
||||
|
||||
import { TableCellProps } from './types'; |
||||
import { getCellOptions } from './utils'; |
||||
|
||||
export const defaultSparklineCellConfig: GraphFieldConfig = { |
||||
drawStyle: GraphDrawStyle.Line, |
||||
lineInterpolation: LineInterpolation.Smooth, |
||||
lineWidth: 1, |
||||
fillOpacity: 17, |
||||
gradientMode: GraphGradientMode.Hue, |
||||
pointSize: 2, |
||||
barAlignment: BarAlignment.Center, |
||||
showPoints: VisibilityMode.Never, |
||||
}; |
||||
|
||||
export const SparklineCell: FC<TableCellProps> = (props) => { |
||||
const { field, innerWidth, tableStyles, cell, cellProps } = props; |
||||
|
||||
const sparkline = getSparkline(cell.value); |
||||
|
||||
if (!sparkline) { |
||||
return ( |
||||
<div {...cellProps} className={tableStyles.cellContainer}> |
||||
no data |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
const range = getMinMaxAndDelta(sparkline.y); |
||||
sparkline.y.config.min = range.min; |
||||
sparkline.y.config.max = range.max; |
||||
sparkline.y.state = { range }; |
||||
|
||||
const cellOptions = getTableSparklineCellOptions(field); |
||||
|
||||
const config: FieldConfig<GraphFieldConfig> = { |
||||
color: field.config.color, |
||||
custom: { |
||||
...defaultSparklineCellConfig, |
||||
...cellOptions, |
||||
}, |
||||
}; |
||||
|
||||
return ( |
||||
<div {...cellProps} className={tableStyles.cellContainer}> |
||||
<Sparkline |
||||
width={innerWidth} |
||||
height={tableStyles.cellHeightInner} |
||||
sparkline={sparkline} |
||||
config={config} |
||||
theme={tableStyles.theme} |
||||
/> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
function getSparkline(value: unknown): FieldSparkline | undefined { |
||||
if (isArray(value)) { |
||||
return { |
||||
y: { |
||||
name: 'test', |
||||
type: FieldType.number, |
||||
values: new ArrayVector(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: Field): TableSparklineCellOptions { |
||||
let options = getCellOptions(field); |
||||
if (options.type === TableCellDisplayMode.Auto) { |
||||
options = { ...options, type: TableCellDisplayMode.Sparkline }; |
||||
} |
||||
if (options.type === TableCellDisplayMode.Sparkline) { |
||||
return options; |
||||
} |
||||
throw new Error(`Excpected options type ${TableCellDisplayMode.Sparkline} but got ${options.type}`); |
||||
} |
||||
@ -0,0 +1,25 @@ |
||||
import React from 'react'; |
||||
|
||||
import { PluginState, TransformerRegistryItem, TransformerUIProps } from '@grafana/data'; |
||||
|
||||
import { timeSeriesTableTransformer, TimeSeriesTableTransformerOptions } from './timeSeriesTableTransformer'; |
||||
|
||||
export interface Props extends TransformerUIProps<{}> {} |
||||
|
||||
export function TimeSeriesTableTransformEditor({ input, options, onChange }: Props) { |
||||
if (input.length === 0) { |
||||
return null; |
||||
} |
||||
|
||||
return <div></div>; |
||||
} |
||||
|
||||
export const timeSeriesTableTransformRegistryItem: TransformerRegistryItem<TimeSeriesTableTransformerOptions> = { |
||||
id: timeSeriesTableTransformer.id, |
||||
editor: TimeSeriesTableTransformEditor, |
||||
transformation: timeSeriesTableTransformer, |
||||
name: timeSeriesTableTransformer.name, |
||||
description: timeSeriesTableTransformer.description, |
||||
state: PluginState.beta, |
||||
help: ``, |
||||
}; |
||||
@ -0,0 +1,104 @@ |
||||
import { toDataFrame, FieldType, Labels, DataFrame, Field } from '@grafana/data'; |
||||
|
||||
import { timeSeriesToTableTransform } from './timeSeriesTableTransformer'; |
||||
|
||||
describe('timeSeriesTableTransformer', () => { |
||||
it('Will transform a single query', () => { |
||||
const series = [ |
||||
getTimeSeries('A', { instance: 'A', pod: 'B' }), |
||||
getTimeSeries('A', { instance: 'A', pod: 'C' }), |
||||
getTimeSeries('A', { instance: 'A', pod: 'D' }), |
||||
]; |
||||
|
||||
const results = timeSeriesToTableTransform({}, series); |
||||
expect(results).toHaveLength(1); |
||||
const result = results[0]; |
||||
expect(result.refId).toBe('A'); |
||||
expect(result.fields).toHaveLength(3); |
||||
expect(result.fields[0].values.toArray()).toEqual(['A', 'A', 'A']); |
||||
expect(result.fields[1].values.toArray()).toEqual(['B', 'C', 'D']); |
||||
assertDataFrameField(result.fields[2], series); |
||||
}); |
||||
|
||||
it('Will pass through non time series frames', () => { |
||||
const series = [ |
||||
getTable('B', ['foo', 'bar']), |
||||
getTimeSeries('A', { instance: 'A', pod: 'B' }), |
||||
getTimeSeries('A', { instance: 'A', pod: 'C' }), |
||||
getTable('C', ['bar', 'baz', 'bad']), |
||||
]; |
||||
|
||||
const results = timeSeriesToTableTransform({}, series); |
||||
expect(results).toHaveLength(3); |
||||
expect(results[0]).toEqual(series[0]); |
||||
expect(results[1].refId).toBe('A'); |
||||
expect(results[1].fields).toHaveLength(3); |
||||
expect(results[1].fields[0].values.toArray()).toEqual(['A', 'A']); |
||||
expect(results[1].fields[1].values.toArray()).toEqual(['B', 'C']); |
||||
expect(results[2]).toEqual(series[3]); |
||||
}); |
||||
|
||||
it('Will group by refId', () => { |
||||
const series = [ |
||||
getTimeSeries('A', { instance: 'A', pod: 'B' }), |
||||
getTimeSeries('A', { instance: 'A', pod: 'C' }), |
||||
getTimeSeries('A', { instance: 'A', pod: 'D' }), |
||||
getTimeSeries('B', { instance: 'B', pod: 'F', cluster: 'A' }), |
||||
getTimeSeries('B', { instance: 'B', pod: 'G', cluster: 'B' }), |
||||
]; |
||||
|
||||
const results = timeSeriesToTableTransform({}, series); |
||||
expect(results).toHaveLength(2); |
||||
expect(results[0].refId).toBe('A'); |
||||
expect(results[0].fields).toHaveLength(3); |
||||
expect(results[0].fields[0].values.toArray()).toEqual(['A', 'A', 'A']); |
||||
expect(results[0].fields[1].values.toArray()).toEqual(['B', 'C', 'D']); |
||||
assertDataFrameField(results[0].fields[2], series.slice(0, 3)); |
||||
expect(results[1].refId).toBe('B'); |
||||
expect(results[1].fields).toHaveLength(4); |
||||
expect(results[1].fields[0].values.toArray()).toEqual(['B', 'B']); |
||||
expect(results[1].fields[1].values.toArray()).toEqual(['F', 'G']); |
||||
expect(results[1].fields[2].values.toArray()).toEqual(['A', 'B']); |
||||
assertDataFrameField(results[1].fields[3], series.slice(3, 5)); |
||||
}); |
||||
}); |
||||
|
||||
function assertFieldsEqual(field1: Field, field2: Field) { |
||||
expect(field1.type).toEqual(field2.type); |
||||
expect(field1.name).toEqual(field2.name); |
||||
expect(field1.values.toArray()).toEqual(field2.values.toArray()); |
||||
expect(field1.labels ?? {}).toEqual(field2.labels ?? {}); |
||||
} |
||||
|
||||
function assertDataFrameField(field: Field, matchesFrames: DataFrame[]) { |
||||
const frames: DataFrame[] = field.values.toArray(); |
||||
expect(frames).toHaveLength(matchesFrames.length); |
||||
frames.forEach((frame, idx) => { |
||||
const matchingFrame = matchesFrames[idx]; |
||||
expect(frame.fields).toHaveLength(matchingFrame.fields.length); |
||||
frame.fields.forEach((field, fidx) => assertFieldsEqual(field, matchingFrame.fields[fidx])); |
||||
}); |
||||
} |
||||
|
||||
function getTimeSeries(refId: string, labels: Labels) { |
||||
return toDataFrame({ |
||||
refId, |
||||
fields: [ |
||||
{ name: 'Time', type: FieldType.time, values: [10] }, |
||||
{ |
||||
name: 'Value', |
||||
type: FieldType.number, |
||||
values: [10], |
||||
labels, |
||||
}, |
||||
], |
||||
}); |
||||
} |
||||
|
||||
function getTable(refId: string, fields: string[]) { |
||||
return toDataFrame({ |
||||
refId, |
||||
fields: fields.map((f) => ({ name: f, type: FieldType.string, values: ['value'] })), |
||||
labels: {}, |
||||
}); |
||||
} |
||||
@ -0,0 +1,127 @@ |
||||
import { map } from 'rxjs/operators'; |
||||
|
||||
import { |
||||
ArrayVector, |
||||
DataFrame, |
||||
DataTransformerID, |
||||
DataTransformerInfo, |
||||
Field, |
||||
FieldType, |
||||
MutableDataFrame, |
||||
isTimeSeriesFrame, |
||||
} from '@grafana/data'; |
||||
|
||||
export interface TimeSeriesTableTransformerOptions {} |
||||
|
||||
export const timeSeriesTableTransformer: DataTransformerInfo<TimeSeriesTableTransformerOptions> = { |
||||
id: DataTransformerID.timeSeriesTable, |
||||
name: 'Time series to table transform', |
||||
description: 'Time series to table rows', |
||||
defaultOptions: {}, |
||||
|
||||
operator: (options) => (source) => |
||||
source.pipe( |
||||
map((data) => { |
||||
return timeSeriesToTableTransform(options, data); |
||||
}) |
||||
), |
||||
}; |
||||
|
||||
/** |
||||
* Converts time series frames to table frames for use with sparkline chart type. |
||||
* |
||||
* @remarks |
||||
* For each refId (queryName) convert all time series frames into a single table frame, adding each series |
||||
* as values of a "Trend" frame field. This allows "Trend" to be rendered as area chart type. |
||||
* Any non time series frames are returned as is. |
||||
* |
||||
* @param options - Transform options, currently not used |
||||
* @param data - Array of data frames to transform |
||||
* @returns Array of transformed data frames |
||||
* |
||||
* @alpha |
||||
*/ |
||||
export function timeSeriesToTableTransform(options: TimeSeriesTableTransformerOptions, data: DataFrame[]): DataFrame[] { |
||||
// initialize fields from labels for each refId
|
||||
const refId2LabelFields = getLabelFields(data); |
||||
|
||||
const refId2frameField: Record<string, Field<DataFrame, ArrayVector>> = {}; |
||||
|
||||
const result: DataFrame[] = []; |
||||
|
||||
for (const frame of data) { |
||||
if (!isTimeSeriesFrame(frame)) { |
||||
result.push(frame); |
||||
continue; |
||||
} |
||||
|
||||
const refId = frame.refId ?? ''; |
||||
|
||||
const labelFields = refId2LabelFields[refId] ?? {}; |
||||
// initialize a new frame for this refId with fields per label and a Trend frame field, if it doesn't exist yet
|
||||
let frameField = refId2frameField[refId]; |
||||
if (!frameField) { |
||||
frameField = { |
||||
name: 'Trend' + (refId && Object.keys(refId2LabelFields).length > 1 ? ` #${refId}` : ''), |
||||
type: FieldType.frame, |
||||
config: {}, |
||||
values: new ArrayVector(), |
||||
}; |
||||
refId2frameField[refId] = frameField; |
||||
const table = new MutableDataFrame(); |
||||
for (const label of Object.values(labelFields)) { |
||||
table.addField(label); |
||||
} |
||||
table.addField(frameField); |
||||
table.refId = refId; |
||||
result.push(table); |
||||
} |
||||
|
||||
// add values to each label based field of this frame
|
||||
const labels = frame.fields[1].labels; |
||||
for (const labelKey of Object.keys(labelFields)) { |
||||
const labelValue = labels?.[labelKey] ?? null; |
||||
labelFields[labelKey].values.add(labelValue); |
||||
} |
||||
|
||||
frameField.values.add(frame); |
||||
} |
||||
return result; |
||||
} |
||||
|
||||
// For each refId, initialize a field for each label name
|
||||
function getLabelFields(frames: DataFrame[]): Record<string, Record<string, Field<string, ArrayVector>>> { |
||||
// refId -> label name -> field
|
||||
const labelFields: Record<string, Record<string, Field<string, ArrayVector>>> = {}; |
||||
|
||||
for (const frame of frames) { |
||||
if (!isTimeSeriesFrame(frame)) { |
||||
continue; |
||||
} |
||||
|
||||
const refId = frame.refId ?? ''; |
||||
|
||||
if (!labelFields[refId]) { |
||||
labelFields[refId] = {}; |
||||
} |
||||
|
||||
for (const field of frame.fields) { |
||||
if (!field.labels) { |
||||
continue; |
||||
} |
||||
|
||||
for (const labelName of Object.keys(field.labels)) { |
||||
if (!labelFields[refId][labelName]) { |
||||
labelFields[refId][labelName] = { |
||||
name: labelName, |
||||
type: FieldType.string, |
||||
config: {}, |
||||
values: new ArrayVector(), |
||||
}; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
return labelFields; |
||||
} |
||||
@ -0,0 +1,79 @@ |
||||
import { css } from '@emotion/css'; |
||||
import React, { useMemo } from 'react'; |
||||
|
||||
import { createFieldConfigRegistry } from '@grafana/data'; |
||||
import { GraphFieldConfig, TableSparklineCellOptions } from '@grafana/schema'; |
||||
import { VerticalGroup, Field, useStyles2 } from '@grafana/ui'; |
||||
import { defaultSparklineCellConfig } from '@grafana/ui/src/components/Table/SparklineCell'; |
||||
|
||||
import { getGraphFieldConfig } from '../../timeseries/config'; |
||||
import { TableCellEditorProps } from '../TableCellOptionEditor'; |
||||
|
||||
type OptionKey = keyof TableSparklineCellOptions; |
||||
|
||||
const optionIds: Array<keyof GraphFieldConfig> = [ |
||||
'drawStyle', |
||||
'lineInterpolation', |
||||
'barAlignment', |
||||
'lineWidth', |
||||
'fillOpacity', |
||||
'gradientMode', |
||||
'lineStyle', |
||||
'spanNulls', |
||||
'showPoints', |
||||
'pointSize', |
||||
]; |
||||
|
||||
export const SparklineCellOptionsEditor = (props: TableCellEditorProps<TableSparklineCellOptions>) => { |
||||
const { cellOptions, onChange } = props; |
||||
|
||||
const registry = useMemo(() => { |
||||
const config = getGraphFieldConfig(defaultSparklineCellConfig); |
||||
return createFieldConfigRegistry(config, 'ChartCell'); |
||||
}, []); |
||||
|
||||
const style = useStyles2(getStyles); |
||||
|
||||
const values = { ...defaultSparklineCellConfig, ...cellOptions }; |
||||
|
||||
return ( |
||||
<VerticalGroup> |
||||
{registry.list(optionIds.map((id) => `custom.${id}`)).map((item) => { |
||||
if (item.showIf && !item.showIf(values)) { |
||||
return null; |
||||
} |
||||
const Editor = item.editor; |
||||
const path = item.path; |
||||
|
||||
return ( |
||||
<Field label={item.name} key={item.id} className={style.field}> |
||||
<Editor |
||||
onChange={(val) => onChange({ ...cellOptions, [path]: val })} |
||||
value={(isOptionKey(path, values) ? values[path] : undefined) ?? item.defaultValue} |
||||
item={item} |
||||
context={{ data: [] }} |
||||
/> |
||||
</Field> |
||||
); |
||||
})} |
||||
</VerticalGroup> |
||||
); |
||||
}; |
||||
|
||||
// jumping through hoops to avoid using "any"
|
||||
function isOptionKey(key: string, options: TableSparklineCellOptions): key is OptionKey { |
||||
return key in options; |
||||
} |
||||
|
||||
const getStyles = () => ({ |
||||
field: css` |
||||
width: 100%; |
||||
|
||||
// @TODO don't show "scheme" option for custom gradient mode.
|
||||
// it needs thresholds to work, which are not supported
|
||||
// for area chart cell right now
|
||||
[title='Use color scheme to define gradient'] { |
||||
display: none; |
||||
} |
||||
`,
|
||||
}); |
||||
Loading…
Reference in new issue