Graph: Fixes so graph is shown for non numeric time values (#30972)

* Graph: Fixes so graph is shown for non numeric time values

* Tests: changes times to UTC

* Tests: forgot one value in time array

* GraphNG: make time series panel work with string time stamps (#30981)

* Make Time series panel work with data that time is represented as string

* Map to for

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

packages/grafana-ui/src/components/uPlot/Plot.tsx

@@ -4,7 +4,7 @@ import { buildPlotContext, PlotContext } from './context';
 import { pluginLog } from './utils';
 import { usePlotConfig } from './hooks';
 import { PlotProps } from './types';
-import { DataFrame } from '@grafana/data';
+import { DataFrame, dateTime, FieldType } from '@grafana/data';
 import { UPlotConfigBuilder } from './config/UPlotConfigBuilder';
 import usePrevious from 'react-use/lib/usePrevious';
 
@@ -87,7 +87,20 @@ export const UPlotChart: React.FC<PlotProps> = (props) => {
 };
 
 function prepareData(frame: DataFrame): AlignedData {
-  return frame.fields.map((f) => f.values.toArray()) as AlignedData;
+  return frame.fields.map((f) => {
+    if (f.type === FieldType.time) {
+      if (f.values.length > 0 && typeof f.values.get(0) === 'string') {
+        const timestamps = [];
+        for (let i = 0; i < f.values.length; i++) {
+          timestamps.push(dateTime(f.values.get(i)).valueOf());
+        }
+        return timestamps;
+      }
+      return f.values.toArray();
+    }
+
+    return f.values.toArray();
+  }) as AlignedData;
 }
 
 function initializePlot(data: AlignedData, config: Options, el: HTMLDivElement) {

public/app/plugins/panel/graph/data_processor.ts

@@ -1,13 +1,14 @@
 import _ from 'lodash';
 import { colors } from '@grafana/ui';
 import {
-  TimeRange,
-  FieldType,
-  Field,
   DataFrame,
-  getTimeField,
+  dateTime,
-  getFieldDisplayName,
+  Field,
+  FieldType,
   getColorForTheme,
+  getFieldDisplayName,
+  getTimeField,
+  TimeRange,
 } from '@grafana/data';
 import TimeSeries from 'app/core/time_series2';
 import config from 'app/core/config';
@@ -46,7 +47,7 @@ export class DataProcessor {
         const datapoints = [];
 
         for (let r = 0; r < series.length; r++) {
-          datapoints.push([field.values.get(r), timeField.values.get(r)]);
+          datapoints.push([field.values.get(r), dateTime(timeField.values.get(r)).valueOf()]);
         }
 
         list.push(this.toTimeSeries(field, name, i, j, datapoints, list.length, range));

public/app/plugins/panel/graph/specs/__snapshots__/data_processor.test.ts.snap

@@ -157,6 +157,37 @@ Array [
     "unit": undefined,
     "valueFormater": [Function],
   },
+  TimeSeries {
+    "alias": "series with time as strings v1",
+    "aliasEscaped": "series with time as strings v1",
+    "bars": Object {
+      "fillColor": "#1F78C1",
+    },
+    "color": "#1F78C1",
+    "dataFrameIndex": 3,
+    "datapoints": Array [
+      Array [
+        0.1,
+        1609462800000,
+      ],
+      Array [
+        0.2,
+        1609462800000,
+      ],
+      Array [
+        0.3,
+        1609466400000,
+      ],
+    ],
+    "fieldIndex": 0,
+    "hasMsResolution": false,
+    "id": "series with time as strings v1",
+    "label": "series with time as strings v1",
+    "legend": true,
+    "stats": Object {},
+    "unit": undefined,
+    "valueFormater": [Function],
+  },
 ]
 `;
 
@@ -231,6 +262,18 @@ Array [
         3.3,
         1003,
       ],
+      Array [
+        0.1,
+        1609462800000,
+      ],
+      Array [
+        0.2,
+        1609462800000,
+      ],
+      Array [
+        0.3,
+        1609466400000,
+      ],
     ],
     "fieldIndex": 1,
     "hasMsResolution": false,

public/app/plugins/panel/graph/specs/data_processor.test.ts

@@ -44,12 +44,22 @@ describe('Graph DataProcessor', () => {
           { name: 'time', values: [1001, 1002, 1003] }, // Time is last column
         ],
       },
+      {
+        name: 'series with time as strings',
+        fields: [
+          { name: 'v1', values: [0.1, 0.2, 0.3] }, // first
+          {
+            name: 'time',
+            values: ['2021-01-01T01:00:00.000Z', 'Fri, 01 Jan 2021 01:00:00 GMT', '2021-01-01T02:00:00.000Z'], // Time is last column
+          },
+        ],
+      },
     ]);
 
     it('Should return a new series for each field', () => {
       panel.xaxis.mode = 'series';
       const series = processor.getSeriesList({ dataList });
-      expect(series.length).toEqual(5);
+      expect(series.length).toEqual(6);
 
       expect(series).toMatchSnapshot();
     });