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

devenv/dev-dashboards/panel-timeline/timeline-modes.json

@@ -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
 }

packages/grafana-ui/src/components/GraphNG/GraphNG.tsx

@@ -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);
 

packages/grafana-ui/src/components/uPlot/utils.ts

@@ -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++;

public/app/plugins/panel/timeline/TimelineChart.tsx

@@ -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}