progress on react time series infra

public/app/features/dashboard/dashgrid/PanelChrome.tsx

@@ -74,7 +74,7 @@ export class PanelChrome extends PureComponent<Props, State> {
             refreshCounter={refreshCounter}
           >
             {({ loading, timeSeries }) => {
-              return <PanelComponent loading={loading} timeSeries={timeSeries} />;
+              return <PanelComponent loading={loading} timeSeries={timeSeries} timeRange={timeRange} />;
             }}
           </DataPanel>
         </div>

public/app/plugins/panel/graph2/module.tsx

@@ -3,7 +3,10 @@ import _ from 'lodash';
 import React, { PureComponent } from 'react';
 
 // Components
-import { Graph } from 'app/viz/Graph';
+import Graph from 'app/viz/Graph';
+
+// Utils
+import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
 
 // Types
 import { PanelProps } from 'app/types';
@@ -22,10 +25,11 @@ export class Graph2 extends PureComponent<Props> {
   }
 
   render() {
-    const { timeSeries } = this.props;
-    let index = 0;
+    const { timeSeries, timeRange } = this.props;
+    const viewModels = getTimeSeriesVMs({ timeSeries });
+    console.log(viewModels);
 
-    return <Graph timeSeries={timeSeries} />;
+    return <Graph timeSeries={viewModels} timeRange={timeRange} />;
   }
 }
 

public/app/types/index.ts

@@ -13,10 +13,11 @@ import {
   TimeRange,
   LoadingState,
   TimeSeries,
+  TimeSeriesVM,
+  TimeSeriesVMs,
   DataQuery,
   DataQueryResponse,
   DataQueryOptions,
-  TimeSeriesViewModel,
 } from './series';
 import { PanelProps } from './panel';
 
@@ -59,7 +60,8 @@ export {
   LoadingState,
   PanelProps,
   TimeSeries,
-  TimeSeriesViewModel,
+  TimeSeriesVM,
+  TimeSeriesVMs,
   DataQuery,
   DataQueryResponse,
   DataQueryOptions,

public/app/types/series.ts

@@ -28,10 +28,16 @@ export interface TimeSeries {
   unit?: string;
 }
 
-export interface TimeSeriesViewModel {
+/** View model projection of a time series */
+export interface TimeSeriesVM {
   label: string;
   color: string;
-  data: number[][];
+  data: TimeSeriesValue[][];
+}
+
+/** View model projection of many time series */
+export interface TimeSeriesVMs {
+  [index: number]: TimeSeriesVM;
 }
 
 export interface DataQueryResponse {

public/app/viz/Graph.tsx

@@ -6,8 +6,7 @@ import 'vendor/flot/jquery.flot';
 import 'vendor/flot/jquery.flot.time';
 
 // Types
-import TimeSeries from 'app/core/time_series2';
-import { TimeRange } from 'app/types';
+import { TimeRange, TimeSeriesVMs } from 'app/types';
 
 // Copied from graph.ts
 function time_format(ticks, min, max) {
@@ -60,7 +59,7 @@ const FLOT_OPTIONS = {
 };
 
 interface GraphProps {
-  timeSeries: TimeSeries[];
+  timeSeries: TimeSeriesVMs;
   timeRange: TimeRange;
   size?: { width: number; height: number };
 }
@@ -85,11 +84,9 @@ export class Graph extends PureComponent<GraphProps> {
   draw() {
     const { size, timeSeries, timeRange } = this.props;
 
-    const data = timeSeries.map((ts: TimeSeries) => ({
-      color: ts.color,
-      label: ts.label,
-      data: ts.getFlotPairs('null'),
-    }));
+    if (!size) {
+      return;
+    }
 
     const ticks = (size.width || 0) / 100;
     const min = timeRange.from.valueOf();
@@ -111,7 +108,7 @@ export class Graph extends PureComponent<GraphProps> {
       ...dynamicOptions,
     };
 
-    $.plot(this.element, data, options);
+    $.plot(this.element, timeSeries, options);
   }
 
   render() {

public/app/viz/state/getTimeSeriesViewModel.ts

-import colors from 'app/core/utils/colors';
-import { TimeSeries, TimeSeriesViewModel } from 'app/types';
-
-interface Options {
-  ts: TimeSeries;
-  seriesIndex: number;
-}
-
-export function getTimeSeriesViewModel(ts: TimeSeries): TimeSeriesViewModel {}

public/app/viz/state/timeSeries.ts

+import colors from 'app/core/utils/colors';
+import { TimeSeries, TimeSeriesVMs } from 'app/types';
+
+interface Options {
+  timeSeries: TimeSeries[];
+}
+
+export function getTimeSeriesVMs({ timeSeries }: Options): TimeSeriesVMs {
+  const vmSeries = timeSeries.map((item, index) => {
+    const colorIndex = index % colors.length;
+    const label = item.target;
+
+    return {
+      data: item.datapoints,
+      label: label,
+      color: colors[colorIndex],
+    };
+  });
+
+  return vmSeries;
+}