Adjust codebase to Typescript 4 and stronger eslint checks

Author: amotl

src/core.ts

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import * as _ from 'lodash';
 import WorldmapCtrl from './worldmap_ctrl';
-import DataFormatter, { DataFormat } from './data_formatter';
+import DataFormatter, { DataFormat, DataContainer } from './data_formatter';
 import { ErrorManager } from './errors';
 
 export class WorldmapCore {
@@ -126,7 +126,7 @@ export class WorldmapCore {
      *      an out-of-band location source.
      */
 
-    const data = [];
+    const data = new DataContainer();
     let series;
 
     if (this.settings.locationData === 'geohash') {

src/data_formatter.test.ts

@@ -1,4 +1,4 @@
-import DataFormatter from './data_formatter';
+import DataFormatter, { DataContainer } from './data_formatter';
 import { ErrorManager } from './errors';
 import * as jQuery from 'jquery';
 
@@ -424,7 +424,7 @@ describe('DataFormatter', () => {
   });
 
   describe('when data is coming from "json result" (regular)', () => {
-    const data: any[] = [];
+    const data = new DataContainer();
     beforeEach(() => {
       const ctrl = {
         panel: {
@@ -462,7 +462,7 @@ describe('DataFormatter', () => {
   });
 
   describe('when data is coming from "json result" (dataframe)', () => {
-    const data: any[] = [];
+    const data = new DataContainer();
     beforeEach(() => {
       const ctrl = {
         panel: {

src/data_formatter.ts

@@ -14,6 +14,14 @@ interface DataInfo {
   count: number;
 }
 
+// https://stackoverflow.com/a/44441178
+export class DataContainer extends Array<Record<string, any>> {
+  highestValue: number | undefined;
+  lowestValue: number | undefined;
+  valueRange: number | undefined;
+  thresholds: [] | undefined;
+}
+
 export enum DataFormat {
   Table = 'table',
   Timeseries = 'timeseries',

src/worldmap.test.ts

@@ -3,7 +3,7 @@ import { createBasicMap } from '../test/map_builder';
 import $ from 'jquery';
 import PluginSettings from './settings';
 import { TemplateSrv } from 'grafana/app/features/templating/template_srv';
-import DataFormatter from './data_formatter';
+import DataFormatter, { DataContainer } from './data_formatter';
 import { ColorModes } from './model';
 
 describe('Worldmap', () => {
@@ -603,6 +603,7 @@ function setupInteractionMocks() {
    * Mock window.location methods.
    * https://remarkablemark.org/blog/2018/11/17/mock-window-location/
    */
+  // @ts-ignore
   delete window.location;
   // @ts-ignore
   window.location = {};
@@ -762,7 +763,7 @@ describe('ClickthroughLinks', () => {
 
       // Apply data as table format.
       const dataFormatter = new DataFormatter(ctrl);
-      const data: any[] = [];
+      const data = new DataContainer();
       dataFormatter.setTableValues(tableData, data);
       data.thresholds = [];
 

test/map_builder.ts

@@ -5,6 +5,7 @@ export function createBasicMap() {
   document.body.insertAdjacentHTML('afterbegin', fixture);
 
   let ctrl = {
+    settings: {},
     panel: {
       center: {
         mapCenterLatitude: 0,

tsconfig.json

@@ -1,9 +1,15 @@
 {
   "extends": "./node_modules/@grafana/toolkit/src/config/tsconfig.plugin.json",
-  "include": ["src", "types"],
+  "include": [
+    "src",
+    "types"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ],
   "compilerOptions": {
-    "rootDir": "./src",
-    "baseUrl": "./src",
+    "outDir": "dist",
     "typeRoots": ["./node_modules/@types"],
     "noImplicitAny": false
   }