diff --git a/packages/grafana-ui/src/components/uPlot/Plot.tsx b/packages/grafana-ui/src/components/uPlot/Plot.tsx index 831458f808e..e5f560b135a 100755 --- a/packages/grafana-ui/src/components/uPlot/Plot.tsx +++ b/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 = (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) { diff --git a/public/app/plugins/panel/graph/data_processor.ts b/public/app/plugins/panel/graph/data_processor.ts index f66fe322549..a334a66d1ae 100644 --- a/public/app/plugins/panel/graph/data_processor.ts +++ b/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, - getFieldDisplayName, + dateTime, + 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)); diff --git a/public/app/plugins/panel/graph/specs/__snapshots__/data_processor.test.ts.snap b/public/app/plugins/panel/graph/specs/__snapshots__/data_processor.test.ts.snap index 7b1c0190035..d1a47a1594c 100644 --- a/public/app/plugins/panel/graph/specs/__snapshots__/data_processor.test.ts.snap +++ b/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, diff --git a/public/app/plugins/panel/graph/specs/data_processor.test.ts b/public/app/plugins/panel/graph/specs/data_processor.test.ts index 307b6e3e8d9..6f86c5df091 100644 --- a/public/app/plugins/panel/graph/specs/data_processor.test.ts +++ b/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(); });