Data: Adds support for the wide data frame format

package.json

@@ -7,7 +7,8 @@
     "build": "node --max-old-space-size=8192 ./node_modules/.bin/webpack --config webpack.config.prod.js",
     "dev": "webpack --mode development",
     "watch": "webpack --mode development --watch",
-    "test": "jest --config jest.config.js"
+    "test": "jest --config jest.config.js",
+    "test:watch": "jest --config jest.config.js --watch"
   },
   "keywords": [
     "worldmap",

src/data_formatter.test.ts

@@ -1,4 +1,4 @@
-import DataFormatter from './data_formatter';
+import DataFormatter, { fromWideDataFrame } from './data_formatter';
 import _ from 'lodash';
 
 describe('DataFormatter', () => {
@@ -227,3 +227,89 @@ describe('DataFormatter', () => {
     formattedData = [];
   });
 });
+
+describe('fromWideDataFrame', () => {
+  describe('when called with a wide data frame', () => {
+    it('then it should convert it to time series', () => {
+      const input = [
+        {
+          columns: [
+            {
+              text: 'time_sec',
+            },
+            {
+              text: 'fr',
+            },
+            {
+              text: 'se',
+            },
+            {
+              text: 'us',
+            },
+          ],
+          type: 'table',
+          refId: 'A',
+          meta: {
+            executedQueryString:
+              'SELECT UNIX_TIMESTAMP(timestamp) as time_sec, country_iso_code AS metric, COUNT(country_iso_code) AS value FROM geo GROUP BY metric ORDER BY 1',
+          },
+          rows: [
+            [1589767200000, null, null, 2],
+            [1589774400000, 1, null, null],
+            [1589785200000, null, 1, null],
+            [1589785300000, null, 2, null],
+          ],
+        },
+      ];
+      const output = [
+        {
+          alias: 'fr',
+          target: 'fr',
+          datapoints: [
+            [null, 1589767200000],
+            [1, 1589774400000],
+            [null, 1589785200000],
+            [null, 1589785300000],
+          ],
+          refId: 'A',
+          meta: {
+            executedQueryString:
+              'SELECT UNIX_TIMESTAMP(timestamp) as time_sec, country_iso_code AS metric, COUNT(country_iso_code) AS value FROM geo GROUP BY metric ORDER BY 1',
+          },
+        },
+        {
+          alias: 'se',
+          target: 'se',
+          datapoints: [
+            [null, 1589767200000],
+            [null, 1589774400000],
+            [1, 1589785200000],
+            [2, 1589785300000],
+          ],
+          refId: 'A',
+          meta: {
+            executedQueryString:
+              'SELECT UNIX_TIMESTAMP(timestamp) as time_sec, country_iso_code AS metric, COUNT(country_iso_code) AS value FROM geo GROUP BY metric ORDER BY 1',
+          },
+        },
+        {
+          alias: 'us',
+          target: 'us',
+          datapoints: [
+            [2, 1589767200000],
+            [null, 1589774400000],
+            [null, 1589785200000],
+            [null, 1589785300000],
+          ],
+          refId: 'A',
+          meta: {
+            executedQueryString:
+              'SELECT UNIX_TIMESTAMP(timestamp) as time_sec, country_iso_code AS metric, COUNT(country_iso_code) AS value FROM geo GROUP BY metric ORDER BY 1',
+          },
+        },
+      ];
+
+      expect(fromWideDataFrame(input)).toEqual(output);
+    });
+  });
+});

src/data_formatter.ts

@@ -1,6 +1,7 @@
 import * as _ from 'lodash';
 import decodeGeoHash from './geohash';
 import kbn from 'grafana/app/core/utils/kbn';
+import { FrameMapInfo, LegacyTable, LegacyTimeSeries } from 'types';
 
 export default class DataFormatter {
   constructor(private ctrl) {}
@@ -240,3 +241,85 @@ export default class DataFormatter {
     }
   }
 }
+
+export function containsWideDataFrame(data: any[]) {
+  if (!data || !data.length) {
+    return false;
+  }
+
+  return data.some(d => d && d.hasOwnProperty('type') && d.type === 'table');
+}
+
+export function fromWideDataFrame(data: LegacyTable[]): LegacyTimeSeries[] {
+  if (!data || !data.length) {
+    return [{ alias: '', target: '', datapoints: [], refId: 'A', meta: {} }];
+  }
+
+  const frameMap: Map<number, FrameMapInfo> = new Map<number, FrameMapInfo>();
+  for (let frameIndex = 0; frameIndex < data.length; frameIndex++) {
+    const frame = data[frameIndex];
+    const columnMap: Map<string, LegacyTimeSeries> = new Map<string, LegacyTimeSeries>();
+    const frameMapInfo: FrameMapInfo = {
+      columnMap,
+      meta: frame.meta,
+      refId: frame.refId,
+      timeColumn: 0,
+    };
+    frameMap.set(frameIndex, frameMapInfo);
+
+    for (let columnIndex = 0; columnIndex < frame.columns.length; columnIndex++) {
+      const column = frame.columns[columnIndex];
+      if (column.text === 'time' || column.text === 'time_sec') {
+        frameMapInfo.timeColumn = columnIndex;
+        continue;
+      }
+
+      if (!column.text) {
+        continue;
+      }
+
+      columnMap.set(column.text, {
+        alias: column.text,
+        target: column.text,
+        datapoints: [],
+        refId: frame.refId,
+        meta: frame.meta,
+      });
+    }
+  }
+
+  const result: LegacyTimeSeries[] = [];
+
+  for (let frameIndex = 0; frameIndex < data.length; frameIndex++) {
+    const frame = data[frameIndex];
+    const frameMapInfo = frameMap.get(frameIndex);
+
+    if (!frameMapInfo) {
+      throw new Error('Could not find the mapped index for a frame.');
+    }
+
+    for (let rowIndex = 0; rowIndex < frame.rows.length; rowIndex++) {
+      const row = frame.rows[rowIndex];
+      const timestamp = row[frameMapInfo.timeColumn];
+      for (let columnIndex = 0; columnIndex < frame.columns.length; columnIndex++) {
+        const column = frame.columns[columnIndex];
+        const mapped = frameMapInfo.columnMap.get(column.text);
+
+        if (!mapped) {
+          continue;
+        }
+
+        const value = row[columnIndex];
+        mapped.datapoints.push([value, timestamp]);
+      }
+    }
+  }
+
+  for (const frameMapInfo of frameMap.values()) {
+    for (const series of frameMapInfo.columnMap.values()) {
+      result.push(series);
+    }
+  }
+
+  return result;
+}

src/types.ts

@@ -0,0 +1,38 @@
+export interface DataPoint {
+  key: string;
+  locationName: string;
+  locationLatitude: number;
+  locationLongitude: number;
+  value: number;
+  valueRounded: number;
+}
+
+export interface DataPoints extends Array<DataPoint> {
+  highestValue: number;
+  lowestValue: number;
+  valueRange: number;
+  thresholds: number[];
+}
+
+export interface LegacyTable {
+  columns: { text: string }[];
+  type: string;
+  refId: string;
+  meta: any;
+  rows: any[][];
+}
+
+export interface LegacyTimeSeries {
+  alias: string;
+  target: string;
+  datapoints: any[];
+  refId: string;
+  meta: any;
+}
+
+export interface FrameMapInfo {
+  timeColumn: number;
+  columnMap: Map<string, LegacyTimeSeries>;
+  refId: string;
+  meta: any;
+}

src/worldmap_ctrl.ts

@@ -3,11 +3,12 @@ import TimeSeries from "grafana/app/core/time_series2";
 import appEvents from 'grafana/app/core/app_events';
 
 import * as _ from "lodash";
-import DataFormatter from "./data_formatter";
+import DataFormatter, { containsWideDataFrame, fromWideDataFrame } from "./data_formatter";
 import "./css/worldmap-panel.css";
 import $ from "jquery";
 import "./css/leaflet.css";
 import WorldMap from "./worldmap";
+import { DataPoints } from "types";
 
 const panelDefaults = {
   maxDataPoints: 1,
@@ -178,7 +179,7 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
     );
   }
 
-  onDataReceived(dataList) {
+  onDataReceived(dataList: any[]) {
     if (!dataList) {
       return;
     }
@@ -188,7 +189,7 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
         this.panel.snapshotLocationData = this.locations;
       }
 
-      const data = [];
+      const data: DataPoints = Object.assign([], { highestValue: 0, lowestValue: 0, valueRange: 0, thresholds: [] });
 
       if (this.panel.locationData === "geohash") {
         this.dataFormatter.setGeohashValues(dataList, data);
@@ -198,6 +199,11 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
       } else if (this.panel.locationData === "json result") {
         this.series = dataList;
         this.dataFormatter.setJsonValues(data);
+      } else if (containsWideDataFrame(dataList)) {
+        // convert from wide data frame
+        const timeSeries = fromWideDataFrame(dataList);
+        this.series = timeSeries.map(this.seriesHandler.bind(this));
+        this.dataFormatter.setValues(data);
       } else {
         this.series = dataList.map(this.seriesHandler.bind(this));
         this.dataFormatter.setValues(data);

tsconfig.json

@@ -20,6 +20,7 @@
     "noUnusedLocals": true,
     "strictNullChecks": true,
     "moduleResolution": "node",
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "downlevelIteration": true,
   },
 }