From 5324bb4f11a06291c913c031b00fea2125461544 Mon Sep 17 00:00:00 2001 From: Ryan McKinley Date: Wed, 27 Mar 2019 13:51:10 -0700 Subject: [PATCH] Refactor: Rename TimeSeriesVM to GraphSeriesXY (#16216) * Rename TimeSeriesVM to Trace * remove TimeSeriesVM from types * rename to GraphSeriesVM * rename again * now GraphSeriesXY --- .../grafana-ui/src/components/Graph/Graph.tsx | 12 +++---- packages/grafana-ui/src/types/data.ts | 12 ------- packages/grafana-ui/src/types/graph.ts | 11 ++++++ packages/grafana-ui/src/types/index.ts | 1 + .../grafana-ui/src/utils/flotPairs.test.ts | 7 ++-- packages/grafana-ui/src/utils/flotPairs.ts | 10 +++--- .../app/plugins/panel/graph2/GraphPanel.tsx | 34 +++++++++---------- 7 files changed, 44 insertions(+), 43 deletions(-) create mode 100644 packages/grafana-ui/src/types/graph.ts diff --git a/packages/grafana-ui/src/components/Graph/Graph.tsx b/packages/grafana-ui/src/components/Graph/Graph.tsx index d380ad26b68..b8ecc400217 100644 --- a/packages/grafana-ui/src/components/Graph/Graph.tsx +++ b/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 { 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 { 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'); } } diff --git a/packages/grafana-ui/src/types/data.ts b/packages/grafana-ui/src/types/data.ts index 0a03bb62833..03043c4bec8 100644 --- a/packages/grafana-ui/src/types/data.ts +++ b/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; diff --git a/packages/grafana-ui/src/types/graph.ts b/packages/grafana-ui/src/types/graph.ts new file mode 100644 index 00000000000..0e2c2361a69 --- /dev/null +++ b/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 +} diff --git a/packages/grafana-ui/src/types/index.ts b/packages/grafana-ui/src/types/index.ts index 1aec63c8690..415f7325fef 100644 --- a/packages/grafana-ui/src/types/index.ts +++ b/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'; diff --git a/packages/grafana-ui/src/utils/flotPairs.test.ts b/packages/grafana-ui/src/utils/flotPairs.test.ts index 6e95eb7df78..525deda3ed7 100644 --- a/packages/grafana-ui/src/utils/flotPairs.test.ts +++ b/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); diff --git a/packages/grafana-ui/src/utils/flotPairs.ts b/packages/grafana-ui/src/utils/flotPairs.ts index 2583ee3340d..9eb50266f4e 100644 --- a/packages/grafana-ui/src/utils/flotPairs.ts +++ b/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; diff --git a/public/app/plugins/panel/graph2/GraphPanel.tsx b/public/app/plugins/panel/graph2/GraphPanel.tsx index 03aa637e21a..902ea34b380 100644 --- a/public/app/plugins/panel/graph2/GraphPanel.tsx +++ b/public/app/plugins/panel/graph2/GraphPanel.tsx @@ -2,7 +2,7 @@ import _ from 'lodash'; 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 { getFlotPairs } from '@grafana/ui/src/utils/flotPairs'; @@ -13,42 +13,40 @@ export class GraphPanel extends PureComponent { const { data, timeRange, width, height } = this.props; 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) { 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 - if (column.type === FieldType.number) { + if (field.type === FieldType.number) { // Use external calculator just to make sure it works :) const points = getFlotPairs({ - rows: table.rows, + series, xIndex: timeColumn, yIndex: i, 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 (