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';
 
 // Types
-import { TimeRange, TimeSeriesVMs } from '../../types';
+import { TimeRange, GraphSeriesXY } from '../../types';
 
 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;
   showPoints?: boolean;
   showBars?: boolean;
@@ -37,7 +37,7 @@ export class Graph extends PureComponent<GraphProps> {
       return;
     }
 
-    const { width, timeSeries, timeRange, showLines, showBars, showPoints } = this.props;
+    const { width, series, timeRange, showLines, showBars, showPoints } = this.props;
 
     if (!width) {
       return;
@@ -95,9 +95,9 @@ export class Graph extends PureComponent<GraphProps> {
 
     try {
       console.log('Graph render');
-      $.plot(this.element, timeSeries, flotOptions);
+      $.plot(this.element, series, flotOptions);
     } catch (err) {
-      console.log('Graph rendering error', err, flotOptions, timeSeries);
+      console.log('Graph rendering error', err, flotOptions, series);
       throw new Error('Error rendering panel');
     }
   }

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

@@ -53,24 +53,12 @@ export interface TimeSeries {
   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 {
   Null = 'null',
   Ignore = 'connected',
   AsZero = 'null as zero',
 }
 
-/** View model projection of many time series */
-export type TimeSeriesVMs = TimeSeriesVM[];
-
 export interface AnnotationEvent {
   annotation?: any;
   dashboardId?: number;

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

@@ -0,0 +1,11 @@
+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 './datasource';
 export * from './theme';
+export * from './graph';
 export * from './threshold';
 export * from './input';
 export * from './displayValue';

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

@@ -1,11 +1,12 @@
 import { getFlotPairs } from './flotPairs';
 
 describe('getFlotPairs', () => {
-  const table = {
+  const series = {
+    fields: [],
     rows: [[1, 100, 'a'], [2, 200, 'b'], [3, 300, 'c']],
   };
   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[0].length).toEqual(2);
@@ -14,7 +15,7 @@ describe('getFlotPairs', () => {
   });
 
   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[0].length).toEqual(2);

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

@@ -1,14 +1,16 @@
 // 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;
   yIndex: number;
   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 nullAsZero = nullValueMode === NullValueMode.AsZero;