Refactor: Rename TimeSeriesVM to GraphSeriesXY (#16216)

* Rename TimeSeriesVM to Trace

* remove TimeSeriesVM from types

* rename to GraphSeriesVM

* rename again

* now GraphSeriesXY

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

@@ -3,11 +3,11 @@ import $ from 'jquery';
 import React, { PureComponent } from 'react';
 import React, { PureComponent } from 'react';
 
 
 // Types
 // Types
-import { TimeRange, TimeSeriesVMs } from '../../types';
+import { TimeRange, GraphSeriesXY } from '../../types';
 
 
 interface GraphProps {
 interface GraphProps {
-  timeSeries: TimeSeriesVMs;
-  timeRange: TimeRange;
+  series: GraphSeriesXY[];
+  timeRange: TimeRange; // NOTE: we should aim to make `time` a property of the axis, not force it for all graphs
   showLines?: boolean;
   showLines?: boolean;
   showPoints?: boolean;
   showPoints?: boolean;
   showBars?: boolean;
   showBars?: boolean;
@@ -37,7 +37,7 @@ export class Graph extends PureComponent<GraphProps> {
       return;
       return;
     }
     }
 
 
-    const { width, timeSeries, timeRange, showLines, showBars, showPoints } = this.props;
+    const { width, series, timeRange, showLines, showBars, showPoints } = this.props;
 
 
     if (!width) {
     if (!width) {
       return;
       return;
@@ -95,9 +95,9 @@ export class Graph extends PureComponent<GraphProps> {
 
 
     try {
     try {
       console.log('Graph render');
       console.log('Graph render');
-      $.plot(this.element, timeSeries, flotOptions);
+      $.plot(this.element, series, flotOptions);
     } catch (err) {
     } catch (err) {
-      console.log('Graph rendering error', err, flotOptions, timeSeries);
+      console.log('Graph rendering error', err, flotOptions, series);
       throw new Error('Error rendering panel');
       throw new Error('Error rendering panel');
     }
     }
   }
   }

packages/grafana-ui/src/types/data.ts

@@ -53,24 +53,12 @@ export interface TimeSeries {
   unit?: string;
   unit?: string;
 }
 }
 
 
-/** View model projection of a time series */
-export interface TimeSeriesVM {
-  label: string;
-  color: string;
-  data: TimeSeriesValue[][];
-  allIsNull: boolean;
-  allIsZero: boolean;
-}
-
 export enum NullValueMode {
 export enum NullValueMode {
   Null = 'null',
   Null = 'null',
   Ignore = 'connected',
   Ignore = 'connected',
   AsZero = 'null as zero',
   AsZero = 'null as zero',
 }
 }
 
 
-/** View model projection of many time series */
-export type TimeSeriesVMs = TimeSeriesVM[];
-
 export interface AnnotationEvent {
 export interface AnnotationEvent {
   annotation?: any;
   annotation?: any;
   dashboardId?: number;
   dashboardId?: number;

packages/grafana-ui/src/types/graph.ts

+import { DisplayValue } from './displayValue';
+
+export type GraphSeriesValue = number | null;
+
+/** View model projection of a series */
+export interface GraphSeriesXY {
+  label: string;
+  color: string;
+  data: GraphSeriesValue[][]; // [x,y][]
+  info?: DisplayValue[]; // Legend info
+}

packages/grafana-ui/src/types/index.ts

@@ -4,6 +4,7 @@ export * from './panel';
 export * from './plugin';
 export * from './plugin';
 export * from './datasource';
 export * from './datasource';
 export * from './theme';
 export * from './theme';
+export * from './graph';
 export * from './threshold';
 export * from './threshold';
 export * from './input';
 export * from './input';
 export * from './displayValue';
 export * from './displayValue';

packages/grafana-ui/src/utils/flotPairs.test.ts

 import { getFlotPairs } from './flotPairs';
 import { getFlotPairs } from './flotPairs';
 
 
 describe('getFlotPairs', () => {
 describe('getFlotPairs', () => {
-  const table = {
+  const series = {
+    fields: [],
     rows: [[1, 100, 'a'], [2, 200, 'b'], [3, 300, 'c']],
     rows: [[1, 100, 'a'], [2, 200, 'b'], [3, 300, 'c']],
   };
   };
   it('should get X and y', () => {
   it('should get X and y', () => {
-    const pairs = getFlotPairs({ rows: table.rows, xIndex: 0, yIndex: 1 });
+    const pairs = getFlotPairs({ series, xIndex: 0, yIndex: 1 });
 
 
     expect(pairs.length).toEqual(3);
     expect(pairs.length).toEqual(3);
     expect(pairs[0].length).toEqual(2);
     expect(pairs[0].length).toEqual(2);
@@ -14,7 +15,7 @@ describe('getFlotPairs', () => {
   });
   });
 
 
   it('should work with strings', () => {
   it('should work with strings', () => {
-    const pairs = getFlotPairs({ rows: table.rows, xIndex: 0, yIndex: 2 });
+    const pairs = getFlotPairs({ series, xIndex: 0, yIndex: 2 });
 
 
     expect(pairs.length).toEqual(3);
     expect(pairs.length).toEqual(3);
     expect(pairs[0].length).toEqual(2);
     expect(pairs[0].length).toEqual(2);

packages/grafana-ui/src/utils/flotPairs.ts

 // Types
 // Types
-import { NullValueMode } from '../types/index';
+import { NullValueMode, GraphSeriesValue, SeriesData } from '../types/index';
 
 
-export interface FloatPairsOptions {
-  rows: any[][];
+export interface FlotPairsOptions {
+  series: SeriesData;
   xIndex: number;
   xIndex: number;
   yIndex: number;
   yIndex: number;
   nullValueMode?: NullValueMode;
   nullValueMode?: NullValueMode;
 }
 }
 
 
-export function getFlotPairs({ rows, xIndex, yIndex, nullValueMode }: FloatPairsOptions): any[][] {
+export function getFlotPairs({ series, xIndex, yIndex, nullValueMode }: FlotPairsOptions): GraphSeriesValue[][] {
+  const rows = series.rows;
+
   const ignoreNulls = nullValueMode === NullValueMode.Ignore;
   const ignoreNulls = nullValueMode === NullValueMode.Ignore;
   const nullAsZero = nullValueMode === NullValueMode.AsZero;
   const nullAsZero = nullValueMode === NullValueMode.AsZero;
 
 

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

@@ -2,7 +2,7 @@
 import _ from 'lodash';
 import _ from 'lodash';
 import React, { PureComponent } from 'react';
 import React, { PureComponent } from 'react';
 
 
-import { Graph, PanelProps, NullValueMode, colors, TimeSeriesVMs, FieldType, getFirstTimeField } from '@grafana/ui';
+import { Graph, PanelProps, NullValueMode, colors, GraphSeriesXY, FieldType, getFirstTimeField } from '@grafana/ui';
 import { Options } from './types';
 import { Options } from './types';
 import { getFlotPairs } from '@grafana/ui/src/utils/flotPairs';
 import { getFlotPairs } from '@grafana/ui/src/utils/flotPairs';
 
 
@@ -13,42 +13,40 @@ export class GraphPanel extends PureComponent<Props> {
     const { data, timeRange, width, height } = this.props;
     const { data, timeRange, width, height } = this.props;
     const { showLines, showBars, showPoints } = this.props.options;
     const { showLines, showBars, showPoints } = this.props.options;
 
 
-    const vmSeries: TimeSeriesVMs = [];
-    for (const table of data) {
-      const timeColumn = getFirstTimeField(table);
+    const graphs: GraphSeriesXY[] = [];
+    for (const series of data) {
+      const timeColumn = getFirstTimeField(series);
       if (timeColumn < 0) {
       if (timeColumn < 0) {
         continue;
         continue;
       }
       }
 
 
-      for (let i = 0; i < table.fields.length; i++) {
-        const column = table.fields[i];
+      for (let i = 0; i < series.fields.length; i++) {
+        const field = series.fields[i];
 
 
         // Show all numeric columns
         // Show all numeric columns
-        if (column.type === FieldType.number) {
+        if (field.type === FieldType.number) {
           // Use external calculator just to make sure it works :)
           // Use external calculator just to make sure it works :)
           const points = getFlotPairs({
           const points = getFlotPairs({
-            rows: table.rows,
+            series,
             xIndex: timeColumn,
             xIndex: timeColumn,
             yIndex: i,
             yIndex: i,
             nullValueMode: NullValueMode.Null,
             nullValueMode: NullValueMode.Null,
           });
           });
 
 
-          vmSeries.push({
-            label: column.name,
-            data: points,
-            color: colors[vmSeries.length % colors.length],
-
-            // TODO (calculate somewhere)
-            allIsNull: false,
-            allIsZero: false,
-          });
+          if (points.length > 0) {
+            graphs.push({
+              label: field.name,
+              data: points,
+              color: colors[graphs.length % colors.length],
+            });
+          }
         }
         }
       }
       }
     }
     }
 
 
     return (
     return (
       <Graph
       <Graph
-        timeSeries={vmSeries}
+        series={graphs}
         timeRange={timeRange}
         timeRange={timeRange}
         showLines={showLines}
         showLines={showLines}
         showPoints={showPoints}
         showPoints={showPoints}