Browse Source

show all colums in graph

ryan 6 năm trước cách đây
mục cha
commit
0558b17b9e

+ 10 - 0
packages/grafana-ui/src/utils/processTableData.ts

@@ -149,6 +149,16 @@ function convertTimeSeriesToTableData(timeSeries: TimeSeries): TableData {
   };
 }
 
+export const getFirstTimeColumn = (table: TableData): number => {
+  const { columns } = table;
+  for (let i = 0; i < columns.length; i++) {
+    if (columns[i].type === ColumnType.time) {
+      return i;
+    }
+  }
+  return -1;
+};
+
 /**
  * @returns a table Returns a copy of the table with the best guess for each column type
  */

+ 34 - 14
public/app/plugins/panel/graph2/GraphPanel.tsx

@@ -2,14 +2,17 @@
 import _ from 'lodash';
 import React, { PureComponent } from 'react';
 
-// Utils
-import { processTimeSeries } from '@grafana/ui/src/utils';
-
-// Components
-import { Graph } from '@grafana/ui';
-
-// Types
-import { PanelProps, NullValueMode, TimeSeriesVMs } from '@grafana/ui/src/types';
+import {
+  Graph,
+  PanelProps,
+  NullValueMode,
+  colors,
+  TimeSeriesVMs,
+  ColumnType,
+  guessColumnTypes,
+  getFirstTimeColumn,
+  processTimeSeries,
+} from '@grafana/ui';
 import { Options } from './types';
 
 interface Props extends PanelProps<Options> {}
@@ -19,12 +22,29 @@ export class GraphPanel extends PureComponent<Props> {
     const { data, timeRange, width, height } = this.props;
     const { showLines, showBars, showPoints } = this.props.options;
 
-    let vmSeries: TimeSeriesVMs;
-    if (data) {
-      vmSeries = processTimeSeries({
-        data,
-        nullValueMode: NullValueMode.Ignore,
-      });
+    const vmSeries: TimeSeriesVMs = [];
+    for (let t = 0; t < data.length; t++) {
+      const table = guessColumnTypes(data[t]);
+      const timeColumn = getFirstTimeColumn(table);
+      if (timeColumn >= 0) {
+        for (let i = 0; i < table.columns.length; i++) {
+          const column = table.columns[i];
+
+          // Show all numeric columns
+          if (column.type === ColumnType.number) {
+            const tsvm = processTimeSeries({
+              data: [table],
+              xColumn: timeColumn,
+              yColumn: i,
+              nullValueMode: NullValueMode.Null,
+            })[0];
+
+            const colorIndex = vmSeries.length % colors.length;
+            tsvm.color = colors[colorIndex];
+            vmSeries.push(tsvm);
+          }
+        }
+      }
     }
 
     return (