Timeline: add support for strings & booleans (#33882)

This commit is contained in:
Leon Sorokin 2021-05-10 22:41:06 -05:00 committed by GitHub
parent a67fe57e56
commit 4959c55985
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 76 additions and 12 deletions

View File

@ -42,7 +42,7 @@
"overrides": []
},
"gridPos": {
"h": 11,
"h": 10,
"w": 24,
"x": 0,
"y": 0
@ -190,6 +190,71 @@
"title": "Spans Mode",
"type": "timeline"
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 11,
"w": 24,
"x": 0,
"y": 10
},
"id": 9,
"options": {
"colWidth": 0.9,
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom"
},
"mode": "spans",
"rowHeight": 0.9,
"showValue": "always"
},
"pluginVersion": "7.5.0-pre",
"targets": [
{
"alias": "",
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": "a,a,b,b,b,b,c,a,a,d,d,d,d,d"
},
{
"alias": "",
"refId": "B",
"scenarioId": "csv_metric_values",
"stringInput": "null,null,e,e,e,null,null,e,null,null,e,null,e,e,e,e"
},
{
"refId": "C",
"scenarioId": "csv_metric_values",
"stringInput": "true,null,false,null,true,false"
}
],
"title": "Spans Mode (strings & booleans)",
"type": "timeline"
},
{
"datasource": null,
"fieldConfig": {
@ -219,7 +284,7 @@
"h": 11,
"w": 24,
"x": 0,
"y": 11
"y": 21
},
"id": 4,
"interval": null,
@ -271,7 +336,7 @@
}
],
"refresh": false,
"schemaVersion": 27,
"schemaVersion": 29,
"style": "dark",
"tags": [],
"templating": {
@ -285,5 +350,5 @@
"timezone": "utc",
"title": "Timeline Modes",
"uid": "mIJjFy8Gz",
"version": 1
"version": 7
}

View File

@ -6,7 +6,6 @@ import {
DataFrame,
FieldMatcherID,
fieldMatchers,
FieldType,
LegacyGraphHoverClearEvent,
LegacyGraphHoverEvent,
TimeRange,
@ -99,7 +98,7 @@ export class GraphNG extends React.Component<GraphNGProps, GraphNGState> {
if (alignedFrame) {
state = {
alignedFrame,
alignedData: preparePlotData(alignedFrame, [FieldType.number]),
alignedData: preparePlotData(alignedFrame),
};
pluginLog('GraphNG', false, 'data prepared', state.alignedData);

View File

@ -34,7 +34,7 @@ export const DEFAULT_PLOT_CONFIG: Partial<Options> = {
};
/** @internal */
export function preparePlotData(frame: DataFrame, keepFieldTypes?: FieldType[]): AlignedData {
export function preparePlotData(frame: DataFrame): AlignedData {
const result: any[] = [];
const stackingGroups: Map<string, number[]> = new Map();
let seriesIndex = 0;
@ -57,10 +57,6 @@ export function preparePlotData(frame: DataFrame, keepFieldTypes?: FieldType[]):
continue;
}
if (keepFieldTypes && keepFieldTypes.indexOf(f.type) < 0) {
continue;
}
collectStackingGroups(f, stackingGroups, seriesIndex);
result.push(f.values.toArray());
seriesIndex++;

View File

@ -1,6 +1,6 @@
import React from 'react';
import { PanelContext, PanelContextRoot, UPlotConfigBuilder, GraphNG, GraphNGProps } from '@grafana/ui';
import { DataFrame, TimeRange } from '@grafana/data';
import { DataFrame, FieldType, TimeRange } from '@grafana/data';
import { preparePlotConfigBuilder } from './utils';
import { BarValueVisibility, TimelineMode } from './types';
@ -40,6 +40,10 @@ export class TimelineChart extends React.Component<TimelineProps> {
return (
<GraphNG
{...this.props}
fields={{
x: (f) => f.type === FieldType.time,
y: (f) => f.type === FieldType.number || f.type === FieldType.boolean || f.type === FieldType.string,
}}
prepConfig={this.prepConfig}
propsToDiff={propsToDiff}
renderLegend={this.renderLegend as any}