mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Timeline: add support for strings & booleans (#33882)
This commit is contained in:
parent
a67fe57e56
commit
4959c55985
@ -42,7 +42,7 @@
|
|||||||
"overrides": []
|
"overrides": []
|
||||||
},
|
},
|
||||||
"gridPos": {
|
"gridPos": {
|
||||||
"h": 11,
|
"h": 10,
|
||||||
"w": 24,
|
"w": 24,
|
||||||
"x": 0,
|
"x": 0,
|
||||||
"y": 0
|
"y": 0
|
||||||
@ -190,6 +190,71 @@
|
|||||||
"title": "Spans Mode",
|
"title": "Spans Mode",
|
||||||
"type": "timeline"
|
"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,
|
"datasource": null,
|
||||||
"fieldConfig": {
|
"fieldConfig": {
|
||||||
@ -219,7 +284,7 @@
|
|||||||
"h": 11,
|
"h": 11,
|
||||||
"w": 24,
|
"w": 24,
|
||||||
"x": 0,
|
"x": 0,
|
||||||
"y": 11
|
"y": 21
|
||||||
},
|
},
|
||||||
"id": 4,
|
"id": 4,
|
||||||
"interval": null,
|
"interval": null,
|
||||||
@ -271,7 +336,7 @@
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
"refresh": false,
|
"refresh": false,
|
||||||
"schemaVersion": 27,
|
"schemaVersion": 29,
|
||||||
"style": "dark",
|
"style": "dark",
|
||||||
"tags": [],
|
"tags": [],
|
||||||
"templating": {
|
"templating": {
|
||||||
@ -285,5 +350,5 @@
|
|||||||
"timezone": "utc",
|
"timezone": "utc",
|
||||||
"title": "Timeline Modes",
|
"title": "Timeline Modes",
|
||||||
"uid": "mIJjFy8Gz",
|
"uid": "mIJjFy8Gz",
|
||||||
"version": 1
|
"version": 7
|
||||||
}
|
}
|
@ -6,7 +6,6 @@ import {
|
|||||||
DataFrame,
|
DataFrame,
|
||||||
FieldMatcherID,
|
FieldMatcherID,
|
||||||
fieldMatchers,
|
fieldMatchers,
|
||||||
FieldType,
|
|
||||||
LegacyGraphHoverClearEvent,
|
LegacyGraphHoverClearEvent,
|
||||||
LegacyGraphHoverEvent,
|
LegacyGraphHoverEvent,
|
||||||
TimeRange,
|
TimeRange,
|
||||||
@ -99,7 +98,7 @@ export class GraphNG extends React.Component<GraphNGProps, GraphNGState> {
|
|||||||
if (alignedFrame) {
|
if (alignedFrame) {
|
||||||
state = {
|
state = {
|
||||||
alignedFrame,
|
alignedFrame,
|
||||||
alignedData: preparePlotData(alignedFrame, [FieldType.number]),
|
alignedData: preparePlotData(alignedFrame),
|
||||||
};
|
};
|
||||||
pluginLog('GraphNG', false, 'data prepared', state.alignedData);
|
pluginLog('GraphNG', false, 'data prepared', state.alignedData);
|
||||||
|
|
||||||
|
@ -34,7 +34,7 @@ export const DEFAULT_PLOT_CONFIG: Partial<Options> = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
/** @internal */
|
/** @internal */
|
||||||
export function preparePlotData(frame: DataFrame, keepFieldTypes?: FieldType[]): AlignedData {
|
export function preparePlotData(frame: DataFrame): AlignedData {
|
||||||
const result: any[] = [];
|
const result: any[] = [];
|
||||||
const stackingGroups: Map<string, number[]> = new Map();
|
const stackingGroups: Map<string, number[]> = new Map();
|
||||||
let seriesIndex = 0;
|
let seriesIndex = 0;
|
||||||
@ -57,10 +57,6 @@ export function preparePlotData(frame: DataFrame, keepFieldTypes?: FieldType[]):
|
|||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (keepFieldTypes && keepFieldTypes.indexOf(f.type) < 0) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
collectStackingGroups(f, stackingGroups, seriesIndex);
|
collectStackingGroups(f, stackingGroups, seriesIndex);
|
||||||
result.push(f.values.toArray());
|
result.push(f.values.toArray());
|
||||||
seriesIndex++;
|
seriesIndex++;
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { PanelContext, PanelContextRoot, UPlotConfigBuilder, GraphNG, GraphNGProps } from '@grafana/ui';
|
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 { preparePlotConfigBuilder } from './utils';
|
||||||
import { BarValueVisibility, TimelineMode } from './types';
|
import { BarValueVisibility, TimelineMode } from './types';
|
||||||
|
|
||||||
@ -40,6 +40,10 @@ export class TimelineChart extends React.Component<TimelineProps> {
|
|||||||
return (
|
return (
|
||||||
<GraphNG
|
<GraphNG
|
||||||
{...this.props}
|
{...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}
|
prepConfig={this.prepConfig}
|
||||||
propsToDiff={propsToDiff}
|
propsToDiff={propsToDiff}
|
||||||
renderLegend={this.renderLegend as any}
|
renderLegend={this.renderLegend as any}
|
||||||
|
Loading…
Reference in New Issue
Block a user