Merge pull request #109 from flant/feat_one_tooltip

ref: one codebase for the hover tooltip and the frozen tooltip

dist/css/statusmap.dark.css

@@ -22,6 +22,15 @@
       pointer-events: visiblePainted; }
 
 .statusmap-tooltip {
+  position: absolute;
+  padding: 10px;
+  font-weight: 200;
+  border-radius: 5px;
+  max-width: 800px;
+  max-height: 600px;
+  overflow: hidden;
+  line-height: 14px;
+  z-index: 9999;
   white-space: nowrap;
   font-size: 12px;
   background-color: #141414;
@@ -32,17 +41,9 @@
     font-weight: bold;
     text-shadow: 0 0 0.2em #212124, 0 0 0.2em #212124, 0 0 0.2em #212124; }
 
-.statusmap-tooltip-extraseries {
+.statusmap-tooltip-frozen {
-  white-space: nowrap;
+  position: relative;
-  font-size: 12px;
+  z-index: 1; }
-  background-color: #141414;
-  color: #d8d9da; }
-  .statusmap-tooltip-extraseries .discrete-item {
-    color: #ffffff;
-    padding: 1px;
-    font-weight: bold;
-    margin-bottom: 0;
-    text-shadow: 0 0 0.2em #212124, 0 0 0.2em #212124, 0 0 0.2em #212124; }
 
 .statusmap-histogram rect {
   fill: #8e8e8e; }

dist/css/statusmap.dark.css.map

@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "AAAA,8BAA+B;EAE7B,MAAM,EAAE,SAAS;EAGjB,kDAAoB;IAClB,cAAc,EAAE,IAAI;EAGtB,uDAAyB;IACzB,gBAAgB,ECNL,OAAO;IDOlB,KAAK,ECVM,OAAO;IDWlB,OAAO,EAAE,GAAG;;AAId,gBAAiB;EACf,QAAQ,EAAE,QAAQ;EAGhB,iCAAK;IACH,IAAI,ECpBG,OAAO;IDqBd,KAAK,ECrBE,OAAO;IDsBd,SAAS,EEtBE,IAAI;EFyBjB,iCAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,EC1BM,OAAO;ED+BvB,oBAAI;IACF,cAAc,EAAE,IAAI;IAEpB,yBAAK;MACH,cAAc,EAAE,cAAc;;AAKpC,kBAAmB;EACjB,WAAW,EAAE,MAAM;EACnB,SAAS,EE5CI,IAAI;EF6CjB,gBAAgB,EC1CC,OAAO;ED2CxB,KAAK,EC7CM,OAAO;ED+ClB,iCAAe;IACb,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,GAAG;IACZ,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,uDAAuD;;AAIxE,8BAA+B;EAC7B,WAAW,EAAE,MAAM;EACnB,SAAS,EE1DI,IAAI;EF2DjB,gBAAgB,ECxDC,OAAO;EDyDxB,KAAK,EC3DM,OAAO;ED6DlB,6CAAe;IACb,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,GAAG;IACZ,WAAW,EAAE,IAAI;IACjB,aAAa,EAAE,CAAC;IAChB,WAAW,EAAE,uDAAuD;;AAIxE,yBAA0B;EACxB,IAAI,ECtEY,OAAO;;AD0EvB,8BAAK;EACH,MAAM,EAAE,OAAgB;EACxB,YAAY,EAAE,CAAC;;AAInB,yBAA0B;EACxB,YAAY,EAAE,CAAC;EACf,IAAI,EAAE,wBAAwB;EAC9B,MAAM,EAAE,wBAAwB;;AAGlC,WAAY;EACV,KAAK,EAAE,gBACT;;AACA,WAAY;EACV,KAAK,EAAE,gBACT;;AACA,WAAY;EACV,KAAK,EAAE,gBACT;;AACA,WAAY;EACV,KAAK,EAAE,gBACT;;AAEA,8BAA+B;EAC7B,MAAM,EAAE,MAAM;EAEd,kCAAI;IACF,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;IACX,WAAW,EAAE,MAAM;EAIrB,2DAA6B;IAC3B,UAAU,EAAE,GAAG;EAGjB,4DAA8B;IAC5B,OAAO,EAAE,YAAY;EAIrB,+CAAK;IACH,IAAI,ECxHG,OAAO;IDyHd,KAAK,ECzHE,OAAO;ID0Hd,SAAS,EE1HE,IAAI;EF6HjB,+CAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,EC9HM,OAAO;EDiIrB,kDAAQ;IACN,OAAO,EAAE,GAAG;IACZ,MAAM,ECnIM,OAAO",
+"mappings": "AAAA,8BAA+B;EAE7B,MAAM,EAAE,SAAS;EAGjB,kDAAoB;IAClB,cAAc,EAAE,IAAI;EAGtB,uDAAyB;IACzB,gBAAgB,ECNL,OAAO;IDOlB,KAAK,ECVM,OAAO;IDWlB,OAAO,EAAE,GAAG;;AAId,gBAAiB;EACf,QAAQ,EAAE,QAAQ;EAGhB,iCAAK;IACH,IAAI,ECpBG,OAAO;IDqBd,KAAK,ECrBE,OAAO;IDsBd,SAAS,EEtBE,IAAI;EFyBjB,iCAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,EC1BM,OAAO;ED+BvB,oBAAI;IACF,cAAc,EAAE,IAAI;IAEpB,yBAAK;MACH,cAAc,EAAE,cAAc;;AAKpC,kBAAmB;EAGjB,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,GAAG;EAChB,aAAa,EAAE,GAAG;EAClB,SAAS,EAAE,KAAK;EAChB,UAAU,EAAE,KAAK;EACjB,QAAQ,EAAE,MAAM;EAChB,WAAW,EAAE,IAAI;EACjB,OAAO,EAAE,IAAI;EAGb,WAAW,EAAE,MAAM;EACnB,SAAS,EEzDI,IAAI;EF0DjB,gBAAgB,ECvDC,OAAO;EDwDxB,KAAK,EC1DM,OAAO;ED4DlB,iCAAe;IACb,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,GAAG;IACZ,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,uDAAuD;;AAIxE,yBAA0B;EACxB,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,CAAC;;AAGZ,yBAA0B;EACxB,IAAI,ECzEY,OAAO;;AD6EvB,8BAAK;EACH,MAAM,EAAE,OAAgB;EACxB,YAAY,EAAE,CAAC;;AAInB,yBAA0B;EACxB,YAAY,EAAE,CAAC;EACf,IAAI,EAAE,wBAAwB;EAC9B,MAAM,EAAE,wBAAwB;;AAGlC,WAAY;EACV,KAAK,EAAE,gBACT;;AACA,WAAY;EACV,KAAK,EAAE,gBACT;;AACA,WAAY;EACV,KAAK,EAAE,gBACT;;AACA,WAAY;EACV,KAAK,EAAE,gBACT;;AAEA,8BAA+B;EAC7B,MAAM,EAAE,MAAM;EAEd,kCAAI;IACF,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;IACX,WAAW,EAAE,MAAM;EAIrB,2DAA6B;IAC3B,UAAU,EAAE,GAAG;EAGjB,4DAA8B;IAC5B,OAAO,EAAE,YAAY;EAIrB,+CAAK;IACH,IAAI,EC3HG,OAAO;ID4Hd,KAAK,EC5HE,OAAO;ID6Hd,SAAS,EE7HE,IAAI;EFgIjB,+CAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,ECjIM,OAAO;EDoIrB,kDAAQ;IACN,OAAO,EAAE,GAAG;IACZ,MAAM,ECtIM,OAAO",
 "sources": ["../../src/css/_statusmap.scss","../../src/css/_variables.dark.scss","../../src/css/_variables.scss"],
 "names": [],
 "file": "statusmap.dark.css"

dist/css/statusmap.light.css

@@ -22,6 +22,15 @@
       pointer-events: visiblePainted; }
 
 .statusmap-tooltip {
+  position: absolute;
+  padding: 10px;
+  font-weight: 200;
+  border-radius: 5px;
+  max-width: 800px;
+  max-height: 600px;
+  overflow: hidden;
+  line-height: 14px;
+  z-index: 9999;
   white-space: nowrap;
   font-size: 12px;
   background-color: #dde4ed;
@@ -32,17 +41,9 @@
     font-weight: bold;
     text-shadow: 0 0 0.2em #212124, 0 0 0.2em #212124, 0 0 0.2em #212124; }
 
-.statusmap-tooltip-extraseries {
+.statusmap-tooltip-frozen {
-  white-space: nowrap;
+  position: relative;
-  font-size: 12px;
+  z-index: 1; }
-  background-color: #dde4ed;
-  color: #52545c; }
-  .statusmap-tooltip-extraseries .discrete-item {
-    color: #ffffff;
-    padding: 1px;
-    font-weight: bold;
-    margin-bottom: 0;
-    text-shadow: 0 0 0.2em #212124, 0 0 0.2em #212124, 0 0 0.2em #212124; }
 
 .statusmap-histogram rect {
   fill: #767980; }

dist/css/statusmap.light.css.map

@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "AAAA,8BAA+B;EAE7B,MAAM,EAAE,SAAS;EAGjB,kDAAoB;IAClB,cAAc,EAAE,IAAI;EAGtB,uDAAyB;IACzB,gBAAgB,ECNL,OAAO;IDOlB,KAAK,ECVM,OAAO;IDWlB,OAAO,EAAE,GAAG;;AAId,gBAAiB;EACf,QAAQ,EAAE,QAAQ;EAGhB,iCAAK;IACH,IAAI,ECpBG,OAAO;IDqBd,KAAK,ECrBE,OAAO;IDsBd,SAAS,EEtBE,IAAI;EFyBjB,iCAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,EC1BM,OAAO;ED+BvB,oBAAI;IACF,cAAc,EAAE,IAAI;IAEpB,yBAAK;MACH,cAAc,EAAE,cAAc;;AAKpC,kBAAmB;EACjB,WAAW,EAAE,MAAM;EACnB,SAAS,EE5CI,IAAI;EF6CjB,gBAAgB,EC1CC,OAAO;ED2CxB,KAAK,EC7CM,OAAO;ED+ClB,iCAAe;IACb,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,GAAG;IACZ,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,uDAAuD;;AAIxE,8BAA+B;EAC7B,WAAW,EAAE,MAAM;EACnB,SAAS,EE1DI,IAAI;EF2DjB,gBAAgB,ECxDC,OAAO;EDyDxB,KAAK,EC3DM,OAAO;ED6DlB,6CAAe;IACb,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,GAAG;IACZ,WAAW,EAAE,IAAI;IACjB,aAAa,EAAE,CAAC;IAChB,WAAW,EAAE,uDAAuD;;AAIxE,yBAA0B;EACxB,IAAI,ECtEY,OAAO;;AD0EvB,8BAAK;EACH,MAAM,EAAE,OAAgB;EACxB,YAAY,EAAE,CAAC;;AAInB,yBAA0B;EACxB,YAAY,EAAE,CAAC;EACf,IAAI,EAAE,wBAAwB;EAC9B,MAAM,EAAE,wBAAwB;;AAGlC,WAAY;EACV,KAAK,EAAE,gBACT;;AACA,WAAY;EACV,KAAK,EAAE,gBACT;;AACA,WAAY;EACV,KAAK,EAAE,gBACT;;AACA,WAAY;EACV,KAAK,EAAE,gBACT;;AAEA,8BAA+B;EAC7B,MAAM,EAAE,MAAM;EAEd,kCAAI;IACF,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;IACX,WAAW,EAAE,MAAM;EAIrB,2DAA6B;IAC3B,UAAU,EAAE,GAAG;EAGjB,4DAA8B;IAC5B,OAAO,EAAE,YAAY;EAIrB,+CAAK;IACH,IAAI,ECxHG,OAAO;IDyHd,KAAK,ECzHE,OAAO;ID0Hd,SAAS,EE1HE,IAAI;EF6HjB,+CAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,EC9HM,OAAO;EDiIrB,kDAAQ;IACN,OAAO,EAAE,GAAG;IACZ,MAAM,ECnIM,OAAO",
+"mappings": "AAAA,8BAA+B;EAE7B,MAAM,EAAE,SAAS;EAGjB,kDAAoB;IAClB,cAAc,EAAE,IAAI;EAGtB,uDAAyB;IACzB,gBAAgB,ECNL,OAAO;IDOlB,KAAK,ECVM,OAAO;IDWlB,OAAO,EAAE,GAAG;;AAId,gBAAiB;EACf,QAAQ,EAAE,QAAQ;EAGhB,iCAAK;IACH,IAAI,ECpBG,OAAO;IDqBd,KAAK,ECrBE,OAAO;IDsBd,SAAS,EEtBE,IAAI;EFyBjB,iCAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,EC1BM,OAAO;ED+BvB,oBAAI;IACF,cAAc,EAAE,IAAI;IAEpB,yBAAK;MACH,cAAc,EAAE,cAAc;;AAKpC,kBAAmB;EAGjB,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,GAAG;EAChB,aAAa,EAAE,GAAG;EAClB,SAAS,EAAE,KAAK;EAChB,UAAU,EAAE,KAAK;EACjB,QAAQ,EAAE,MAAM;EAChB,WAAW,EAAE,IAAI;EACjB,OAAO,EAAE,IAAI;EAGb,WAAW,EAAE,MAAM;EACnB,SAAS,EEzDI,IAAI;EF0DjB,gBAAgB,ECvDC,OAAO;EDwDxB,KAAK,EC1DM,OAAO;ED4DlB,iCAAe;IACb,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,GAAG;IACZ,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,uDAAuD;;AAIxE,yBAA0B;EACxB,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,CAAC;;AAGZ,yBAA0B;EACxB,IAAI,ECzEY,OAAO;;AD6EvB,8BAAK;EACH,MAAM,EAAE,OAAgB;EACxB,YAAY,EAAE,CAAC;;AAInB,yBAA0B;EACxB,YAAY,EAAE,CAAC;EACf,IAAI,EAAE,wBAAwB;EAC9B,MAAM,EAAE,wBAAwB;;AAGlC,WAAY;EACV,KAAK,EAAE,gBACT;;AACA,WAAY;EACV,KAAK,EAAE,gBACT;;AACA,WAAY;EACV,KAAK,EAAE,gBACT;;AACA,WAAY;EACV,KAAK,EAAE,gBACT;;AAEA,8BAA+B;EAC7B,MAAM,EAAE,MAAM;EAEd,kCAAI;IACF,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;IACX,WAAW,EAAE,MAAM;EAIrB,2DAA6B;IAC3B,UAAU,EAAE,GAAG;EAGjB,4DAA8B;IAC5B,OAAO,EAAE,YAAY;EAIrB,+CAAK;IACH,IAAI,EC3HG,OAAO;ID4Hd,KAAK,EC5HE,OAAO;ID6Hd,SAAS,EE7HE,IAAI;EFgIjB,+CAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,ECjIM,OAAO;EDoIrB,kDAAQ;IACN,OAAO,EAAE,GAAG;IACZ,MAAM,ECtIM,OAAO",
 "sources": ["../../src/css/_statusmap.scss","../../src/css/_variables.light.scss","../../src/css/_variables.scss"],
 "names": [],
 "file": "statusmap.light.css"

dist/extra_series_format.js

@@ -1,28 +0,0 @@
-"use strict";
-
-System.register([], function (_export, _context) {
-  "use strict";
-
-  var ExtraSeriesFormat, ExtraSeriesFormatValue;
-
-  _export({
-    ExtraSeriesFormat: void 0,
-    ExtraSeriesFormatValue: void 0
-  });
-
-  return {
-    setters: [],
-    execute: function () {
-      (function (ExtraSeriesFormat) {
-        ExtraSeriesFormat["Date"] = "Date";
-        ExtraSeriesFormat["Raw"] = "Raw";
-      })(ExtraSeriesFormat || _export("ExtraSeriesFormat", ExtraSeriesFormat = {}));
-
-      (function (ExtraSeriesFormatValue) {
-        ExtraSeriesFormatValue["Date"] = "YYYY/MM/DD/HH_mm_ss";
-        ExtraSeriesFormatValue["Raw"] = "";
-      })(ExtraSeriesFormatValue || _export("ExtraSeriesFormatValue", ExtraSeriesFormatValue = {}));
-    }
-  };
-});
-//# sourceMappingURL=extra_series_format.js.map

dist/extra_series_format.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/extra_series_format.ts"],"names":["ExtraSeriesFormat","ExtraSeriesFormatValue"],"mappings":";;;;;;;;;;;;;;;iBAAYA,iB;AAAAA,QAAAA,iB;AAAAA,QAAAA,iB;SAAAA,iB,iCAAAA,iB;;iBAKAC,sB;AAAAA,QAAAA,sB;AAAAA,QAAAA,sB;SAAAA,sB,sCAAAA,sB","sourcesContent":["export enum ExtraSeriesFormat {\n    Date = 'Date',\n    Raw = 'Raw',\n}\n\nexport enum ExtraSeriesFormatValue {\n    Date = 'YYYY/MM/DD/HH_mm_ss',\n    Raw = '',\n}"],"file":"extra_series_format.js"}

dist/module.js

@@ -1,9 +1,9 @@
 "use strict";
 
-System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/sdk", "./statusmap_data", "./rendering", "./options_editor", "./color_mode_discrete", "./extra_series_format"], function (_export, _context) {
+System.register(["lodash", "./color_legend", "./options_editor", "./tooltip_editor", "./panel_config_migration", "app/core/utils/kbn", "app/plugins/sdk", "./statusmap_data", "./rendering", "./color_mode_discrete"], function (_export, _context) {
   "use strict";
 
-  var _, kbn, loadPluginCss, MetricsPanelCtrl, Bucket, BucketMatrix, rendering, statusHeatmapOptionsEditor, ColorModeDiscrete, ExtraSeriesFormat, ExtraSeriesFormatValue, VALUE_INDEX, TIME_INDEX, colorSchemes, colorModes, opacityScales, StatusHeatmapCtrl;
+  var _, optionsEditorCtrl, tooltipEditorCtrl, migratePanelConfig, kbn, loadPluginCss, MetricsPanelCtrl, Bucket, BucketMatrix, rendering, ColorModeDiscrete, VALUE_INDEX, TIME_INDEX, colorSchemes, colorModes, opacityScales, StatusHeatmapCtrl;
 
   function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
@@ -32,7 +32,13 @@ System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/
   return {
     setters: [function (_lodash) {
       _ = _lodash.default;
-    }, function (_color_legend) {}, function (_appCoreUtilsKbn) {
+    }, function (_color_legend) {}, function (_options_editor) {
+      optionsEditorCtrl = _options_editor.optionsEditorCtrl;
+    }, function (_tooltip_editor) {
+      tooltipEditorCtrl = _tooltip_editor.tooltipEditorCtrl;
+    }, function (_panel_config_migration) {
+      migratePanelConfig = _panel_config_migration.migratePanelConfig;
+    }, function (_appCoreUtilsKbn) {
       kbn = _appCoreUtilsKbn.default;
     }, function (_appPluginsSdk) {
       loadPluginCss = _appPluginsSdk.loadPluginCss;
@@ -42,13 +48,8 @@ System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/
       BucketMatrix = _statusmap_data.BucketMatrix;
     }, function (_rendering) {
       rendering = _rendering.default;
-    }, function (_options_editor) {
-      statusHeatmapOptionsEditor = _options_editor.statusHeatmapOptionsEditor;
     }, function (_color_mode_discrete) {
       ColorModeDiscrete = _color_mode_discrete.ColorModeDiscrete;
-    }, function (_extra_series_format) {
-      ExtraSeriesFormat = _extra_series_format.ExtraSeriesFormat;
-      ExtraSeriesFormatValue = _extra_series_format.ExtraSeriesFormatValue;
     }],
     execute: function () {
       VALUE_INDEX = 0;
@@ -163,6 +164,7 @@ System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/
 
           _this = _possibleConstructorReturn(this, _getPrototypeOf(StatusHeatmapCtrl).call(this, $scope, $injector));
           _this.annotationsSrv = annotationsSrv;
+          _this.variableSrv = variableSrv;
 
           _defineProperty(_assertThisInitialized(_this), "data", void 0);
 
@@ -190,8 +192,6 @@ System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/
 
           _defineProperty(_assertThisInitialized(_this), "discreteExtraSeries", void 0);
 
-          _defineProperty(_assertThisInitialized(_this), "extraSeriesFormats", []);
-
           _defineProperty(_assertThisInitialized(_this), "annotations", []);
 
           _defineProperty(_assertThisInitialized(_this), "annotationsPromise", void 0);
@@ -219,8 +219,7 @@ System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/
               cardRound: null
             },
             xAxis: {
-              show: true,
+              show: true
-              labelFormat: '%a %m/%d'
             },
             yAxis: {
               show: true,
@@ -228,88 +227,30 @@ System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/
               maxWidth: -1
             },
             tooltip: {
-              show: true
+              show: true,
+              freezeOnClick: true,
+              showItems: false,
+              items: [] // see tooltip_editor.ts
+
             },
             legend: {
               show: true
             },
-            data: {
-              unitFormat: 'short',
-              decimals: null
-            },
             // how null points should be handled
             nullPointMode: 'as empty',
             yAxisSort: 'metrics',
             highlightCards: true,
             useMax: true,
-            urls: [{
+            seriesFilterIndex: -1
-              tooltip: '',
-              label: '',
-              base_url: '',
-              useExtraSeries: false,
-              useseriesname: true,
-              forcelowercase: true,
-              icon_fa: 'external-link',
-              extraSeries: {
-                index: -1
-              }
-            }],
-            seriesFilterIndex: -1,
-            usingUrl: false
           });
 
-          _defineProperty(_assertThisInitialized(_this), "onEditorAddUrl", function () {
+          migratePanelConfig(_this.panel);
-            _this.panel.urls.push({
-              label: '',
-              base_url: '',
-              useExtraSeries: false,
-              useseriesname: true,
-              forcelowercase: true,
-              icon_fa: 'external-link',
-              extraSeries: {
-                index: -1
-              }
-            });
-
-            _this.render();
-          });
-
-          _defineProperty(_assertThisInitialized(_this), "onEditorRemoveUrl", function (index) {
-            _this.panel.urls.splice(index, 1);
-
-            _this.render();
-          });
-
-          _defineProperty(_assertThisInitialized(_this), "onEditorRemoveUrls", function () {
-            _this.panel.urls = [];
-
-            _this.render();
-          });
 
           _.defaultsDeep(_this.panel, _this.panelDefaults);
 
           _this.opacityScales = opacityScales;
           _this.colorModes = colorModes;
-          _this.colorSchemes = colorSchemes;
+          _this.colorSchemes = colorSchemes; // default graph width for discrete card width calculation
-          _this.variableSrv = variableSrv;
-          _this.extraSeriesFormats = ExtraSeriesFormat;
-
-          _this.renderLink = function (link, scopedVars, format) {
-            var scoped = {};
-
-            for (var key in scopedVars) {
-              scoped[key] = {
-                value: scopedVars[key]
-              };
-            }
-
-            if (format) {
-              return _this.templateSrv.replace(link, scoped, format);
-            } else {
-              return _this.templateSrv.replace(link, scoped);
-            }
-          }; // default graph width for discrete card width calculation
-
 
           _this.graph = {
             "chartWidth": -1
@@ -350,8 +291,6 @@ System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/
 
           _this.events.on('render-complete', _this.onRenderComplete.bind(_assertThisInitialized(_this)));
 
-          _this.events.on('onChangeType', _this.onChangeType.bind(_assertThisInitialized(_this)));
-
           _this.onCardColorChange = _this.onCardColorChange.bind(_assertThisInitialized(_this));
           return _this;
         }
@@ -359,32 +298,8 @@ System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/
         _createClass(StatusHeatmapCtrl, [{
           key: "onRenderComplete",
           value: function onRenderComplete(data) {
-            // console.log({
-            //   data: this.data,
-            //   bucketMatrix: this.bucketMatrix,
-            //   chartWidth: data.chartWidth,
-            //   from: this.range.from.valueOf(),
-            //   to: this.range.to.valueOf()
-            // })
             this.graph.chartWidth = data.chartWidth;
             this.renderingCompleted();
-          }
-        }, {
-          key: "onChangeType",
-          value: function onChangeType(url) {
-            switch (url.type) {
-              case ExtraSeriesFormat.Date:
-                url.extraSeries.format = ExtraSeriesFormatValue.Date;
-                break;
-
-              case ExtraSeriesFormat.Raw:
-                url.extraSeries.format = ExtraSeriesFormatValue.Raw;
-                break;
-
-              default:
-                url.extraSeries.format = ExtraSeriesFormatValue.Raw;
-                break;
-            }
           } // getChartWidth returns an approximation of chart canvas width or
           // a saved value calculated during a render.
 
@@ -408,6 +323,7 @@ System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/
             return chartWidth;
           } // Quick workaround for 6.7 and 7.0+. There is no call to
           // calculateInterval in updateTimeRange in those versions.
+          // TODO ts type has no argument for this method.
 
         }, {
           key: "updateTimeRange",
@@ -457,16 +373,8 @@ System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/
             var interval = kbn.secondsToHms(intervalMs / 1000);
             this.intervalMs = intervalMs;
             this.interval = interval; // Get final buckets count after interval is adjusted
+            // TODO is it needed?
             //this.xBucketsCount = Math.floor(rangeMs / intervalMs);
-            // console.log("calculateInterval: ", {
-            //   interval: this.interval,
-            //   intervalMs: this.intervalMs,
-            //   rangeMs: rangeMs,
-            //   from: this.range.from.valueOf(),
-            //   to: this.range.to.valueOf(),
-            //   numIntervals: rangeMs/this.intervalMs,
-            //   maxCardsCount: maxCardsCount,
-            // });
           }
         }, {
           key: "issueQueries",
@@ -484,7 +392,7 @@ System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/
              * (but not wait for completion). This resolves
              * issue 11806.
              */
-            // 5.x before 5.4 doesn't have datasourcePromises. 
+            // 5.x before 5.4 doesn't have datasourcePromises.
 
             if ("undefined" !== typeof this.annotationsSrv.datasourcePromises) {
               return this.annotationsSrv.datasourcePromises.then(function (r) {
@@ -549,7 +457,8 @@ System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/
         }, {
           key: "onInitEditMode",
           value: function onInitEditMode() {
-            this.addEditorTab('Options', statusHeatmapOptionsEditor, 2);
+            this.addEditorTab('Options', optionsEditorCtrl, 2);
+            this.addEditorTab('Tooltip', tooltipEditorCtrl, 3);
             this.unitFormats = kbn.getUnitFormats();
           } // onRender will be called before StatusmapRenderer.onRender.
           // Decide if warning should be displayed over cards.
@@ -588,8 +497,7 @@ System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/
 
             if (this.bucketMatrix) {
               this.noDatapoints = this.bucketMatrix.noDatapoints;
-            } //console.log(this);
+            }
-
           }
         }, {
           key: "onCardColorChange",
@@ -609,104 +517,17 @@ System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/
           value: function postRefresh() {
             this.noColorDefined = false;
           }
-        }, {
-          key: "onEditorAddThreshold",
-          value: function onEditorAddThreshold() {
-            this.panel.color.thresholds.push({
-              color: this.panel.defaultColor
-            });
-            this.render();
-          }
-        }, {
-          key: "onEditorRemoveThreshold",
-          value: function onEditorRemoveThreshold(index) {
-            this.panel.color.thresholds.splice(index, 1);
-            this.render();
-          }
-        }, {
-          key: "onEditorRemoveThresholds",
-          value: function onEditorRemoveThresholds() {
-            this.panel.color.thresholds = [];
-            this.render();
-          }
-        }, {
-          key: "onEditorAddThreeLights",
-          value: function onEditorAddThreeLights() {
-            this.panel.color.thresholds.push({
-              color: "red",
-              value: 2,
-              tooltip: "error"
-            });
-            this.panel.color.thresholds.push({
-              color: "yellow",
-              value: 1,
-              tooltip: "warning"
-            });
-            this.panel.color.thresholds.push({
-              color: "green",
-              value: 0,
-              tooltip: "ok"
-            });
-            this.render();
-          }
-          /* https://ethanschoonover.com/solarized/ */
-
-        }, {
-          key: "onEditorAddSolarized",
-          value: function onEditorAddSolarized() {
-            this.panel.color.thresholds.push({
-              color: "#b58900",
-              value: 0,
-              tooltip: "yellow"
-            });
-            this.panel.color.thresholds.push({
-              color: "#cb4b16",
-              value: 1,
-              tooltip: "orange"
-            });
-            this.panel.color.thresholds.push({
-              color: "#dc322f",
-              value: 2,
-              tooltip: "red"
-            });
-            this.panel.color.thresholds.push({
-              color: "#d33682",
-              value: 3,
-              tooltip: "magenta"
-            });
-            this.panel.color.thresholds.push({
-              color: "#6c71c4",
-              value: 4,
-              tooltip: "violet"
-            });
-            this.panel.color.thresholds.push({
-              color: "#268bd2",
-              value: 5,
-              tooltip: "blue"
-            });
-            this.panel.color.thresholds.push({
-              color: "#2aa198",
-              value: 6,
-              tooltip: "cyan"
-            });
-            this.panel.color.thresholds.push({
-              color: "#859900",
-              value: 7,
-              tooltip: "green"
-            });
-            this.render();
-          }
         }, {
           key: "link",
           value: function link(scope, elem, attrs, ctrl) {
             rendering(scope, elem, attrs, ctrl);
-          }
+          } // Compatible with Grafana 7.0 overrides feature.
+
         }, {
           key: "retrieveTimeVar",
           value: function retrieveTimeVar() {
             var time = this.timeSrv.timeRangeForUrl();
-            var var_time = '&from=' + time.from + '&to=' + time.to;
+            return 'from=' + time.from + '&to=' + time.to;
-            return var_time;
           } // convertToBuckets groups values in data into buckets by target and timestamp.
           //
           // data is a result from datasource. It is an array of timeseries and tables:
@@ -918,109 +739,6 @@ System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/
 
             bucketMatrix.targets = targetKeys;
             return bucketMatrix;
-            this.bucketMatrix = bucketMatrix; // Collect all values for each bucket from datapoints with similar target.
-            // TODO aggregate values into buckets over datapoint[TIME_INDEX] not over datapoint index (j).
-            // for(let i = 0; i < cardsData.targets.length; i++) {
-            //   let target = cardsData.targets[i];
-            //   for (let j = 0; j < cardsData.xBucketSize; j++) {
-            //     let card = new Card();
-            //     card.id = i*cardsData.xBucketSize + j;
-            //     card.values = [];
-            //     card.y = target;
-            //     card.x = -1;
-            //     // collect values from all timeseries with target
-            //     for (let si = 0; si < cardsData.targetIndex[target].length; si++) {
-            //       let s = data[cardsData.targetIndex[target][si]];
-            //       if (s.datapoints.length <= j) {
-            //         continue;
-            //       }
-            //       let datapoint = s.datapoints[j];
-            //       if (card.values.length === 0) {
-            //         card.x = datapoint[TIME_INDEX];
-            //       }
-            //       card.values.push(datapoint[VALUE_INDEX]);
-            //     }
-            //     card.minValue = _.min(card.values);
-            //     card.maxValue = _.max(card.values);
-            //     if (card.values.length > 1) {
-            //       cardsData.multipleValues = true;
-            //       card.multipleValues = true;
-            //       card.value = card.maxValue; // max value by default
-            //     } else {
-            //       card.value = card.maxValue; // max value by default
-            //     }
-            //     if (cardsData.maxValue < card.maxValue)
-            //       cardsData.maxValue = card.maxValue;
-            //     if (cardsData.minValue > card.minValue)
-            //       cardsData.minValue = card.minValue;
-            //     if (card.x != -1) {
-            //     cardsData.cards.push(card);
-            //     }
-            //   }
-            // }
-            // let cardsData = <CardsStorage> {
-            //   cards: [],
-            //   xBucketSize: 0,
-            //   yBucketSize: 0,
-            //   maxValue: 0,
-            //   minValue: 0,
-            //   multipleValues: false,
-            //   noColorDefined: false,
-            //   targets: [], // array of available unique targets
-            //   targetIndex: {} // indices in data array for each of available unique targets
-            // };
-            // if (!data || data.length == 0) { return cardsData;}
-            // // Collect uniq timestamps from data and spread over targets and timestamps
-            // // collect uniq targets and their indices
-            // _.map(data, (d, i) => {
-            //   cardsData.targetIndex[d.target] = _.concat(_.toArray(cardsData.targetIndex[d.target]), i)
-            // });
-            // // TODO add some logic for targets heirarchy
-            // cardsData.targets = _.keys(cardsData.targetIndex);
-            // cardsData.yBucketSize = cardsData.targets.length;
-            // // Maximum number of buckets over x axis
-            // cardsData.xBucketSize = _.max(_.map(data, d => d.datapoints.length));
-            // // Collect all values for each bucket from datapoints with similar target.
-            // // TODO aggregate values into buckets over datapoint[TIME_INDEX] not over datapoint index (j).
-            // for(let i = 0; i < cardsData.targets.length; i++) {
-            //   let target = cardsData.targets[i];
-            //   for (let j = 0; j < cardsData.xBucketSize; j++) {
-            //     let card = new Card();
-            //     card.id = i*cardsData.xBucketSize + j;
-            //     card.values = [];
-            //     card.y = target;
-            //     card.x = -1;
-            //     // collect values from all timeseries with target
-            //     for (let si = 0; si < cardsData.targetIndex[target].length; si++) {
-            //       let s = data[cardsData.targetIndex[target][si]];
-            //       if (s.datapoints.length <= j) {
-            //         continue;
-            //       }
-            //       let datapoint = s.datapoints[j];
-            //       if (card.values.length === 0) {
-            //         card.x = datapoint[TIME_INDEX];
-            //       }
-            //       card.values.push(datapoint[VALUE_INDEX]);
-            //     }
-            //     card.minValue = _.min(card.values);
-            //     card.maxValue = _.max(card.values);
-            //     if (card.values.length > 1) {
-            //       cardsData.multipleValues = true;
-            //       card.multipleValues = true;
-            //       card.value = card.maxValue; // max value by default
-            //     } else {
-            //       card.value = card.maxValue; // max value by default
-            //     }
-            //     if (cardsData.maxValue < card.maxValue)
-            //       cardsData.maxValue = card.maxValue;
-            //     if (cardsData.minValue > card.minValue)
-            //       cardsData.minValue = card.minValue;
-            //     if (card.x != -1) {
-            //     cardsData.cards.push(card);
-            //     }
-            //   }
-            // }
-            // return cardsData;
           }
         }]);
 

dist/options_editor.js

@@ -13,7 +13,8 @@ System.register(["app/core/utils/kbn"], function (_export, _context) {
 
   function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-  function statusHeatmapOptionsEditor() {
+  /** @ngInject */
+  function optionsEditorCtrl() {
     'use strict';
 
     return {
@@ -24,7 +25,7 @@ System.register(["app/core/utils/kbn"], function (_export, _context) {
     };
   }
 
-  _export("statusHeatmapOptionsEditor", statusHeatmapOptionsEditor);
+  _export("optionsEditorCtrl", optionsEditorCtrl);
 
   return {
     setters: [function (_appCoreUtilsKbn) {
@@ -34,6 +35,9 @@ System.register(["app/core/utils/kbn"], function (_export, _context) {
       _export("StatusHeatmapOptionsEditorCtrl", StatusHeatmapOptionsEditorCtrl =
       /*#__PURE__*/
       function () {
+        StatusHeatmapOptionsEditorCtrl.$inject = ["$scope"];
+
+        /** @ngInject */
         function StatusHeatmapOptionsEditorCtrl($scope) {
           _classCallCheck(this, StatusHeatmapOptionsEditorCtrl);
 
@@ -47,7 +51,6 @@ System.register(["app/core/utils/kbn"], function (_export, _context) {
           this.panelCtrl = $scope.ctrl;
           this.panel = this.panelCtrl.panel;
           this.unitFormats = kbn.getUnitFormats();
-          this.panelCtrl.render();
         }
 
         _createClass(StatusHeatmapOptionsEditorCtrl, [{
@@ -56,6 +59,98 @@ System.register(["app/core/utils/kbn"], function (_export, _context) {
             this.panel.data.unitFormat = subItem.value;
             this.panelCtrl.render();
           }
+        }, {
+          key: "render",
+          value: function render() {
+            this.panelCtrl.render();
+          }
+        }, {
+          key: "onAddThreshold",
+          value: function onAddThreshold() {
+            this.panel.color.thresholds.push({
+              color: this.panel.defaultColor
+            });
+            this.render();
+          }
+        }, {
+          key: "onRemoveThreshold",
+          value: function onRemoveThreshold(index) {
+            this.panel.color.thresholds.splice(index, 1);
+            this.render();
+          }
+        }, {
+          key: "onRemoveThresholds",
+          value: function onRemoveThresholds() {
+            this.panel.color.thresholds = [];
+            this.render();
+          }
+        }, {
+          key: "onAddThreeLights",
+          value: function onAddThreeLights() {
+            this.panel.color.thresholds.push({
+              color: "red",
+              value: 2,
+              tooltip: "error"
+            });
+            this.panel.color.thresholds.push({
+              color: "yellow",
+              value: 1,
+              tooltip: "warning"
+            });
+            this.panel.color.thresholds.push({
+              color: "green",
+              value: 0,
+              tooltip: "ok"
+            });
+            this.render();
+          }
+          /* https://ethanschoonover.com/solarized/ */
+
+        }, {
+          key: "onAddSolarized",
+          value: function onAddSolarized() {
+            this.panel.color.thresholds.push({
+              color: "#b58900",
+              value: 0,
+              tooltip: "yellow"
+            });
+            this.panel.color.thresholds.push({
+              color: "#cb4b16",
+              value: 1,
+              tooltip: "orange"
+            });
+            this.panel.color.thresholds.push({
+              color: "#dc322f",
+              value: 2,
+              tooltip: "red"
+            });
+            this.panel.color.thresholds.push({
+              color: "#d33682",
+              value: 3,
+              tooltip: "magenta"
+            });
+            this.panel.color.thresholds.push({
+              color: "#6c71c4",
+              value: 4,
+              tooltip: "violet"
+            });
+            this.panel.color.thresholds.push({
+              color: "#268bd2",
+              value: 5,
+              tooltip: "blue"
+            });
+            this.panel.color.thresholds.push({
+              color: "#2aa198",
+              value: 6,
+              tooltip: "cyan"
+            });
+            this.panel.color.thresholds.push({
+              color: "#859900",
+              value: 7,
+              tooltip: "green"
+            });
+            this.render();
+          }
         }]);
 
         return StatusHeatmapOptionsEditorCtrl;

dist/panel_config_migration.js

@@ -0,0 +1,165 @@
+"use strict";
+
+System.register(["lodash"], function (_export, _context) {
+  "use strict";
+
+  var _;
+
+  function migrate_V0_V1(panel) {
+    // Remove unused fields.
+    if (_.has(panel, "xAxis.labelFormat")) {
+      delete panel.xAxis.labelFormat;
+    }
+
+    if (_.has(panel, "xAxis.minBucketWidthToShowWeekends")) {
+      delete panel.xAxis.minBucketWidthToShowWeekends;
+    }
+
+    if (_.has(panel, "xAxis.showCrosshair")) {
+      delete panel.xAxis.showCrosshair;
+    }
+
+    if (_.has(panel, "xAxis.showWeekends")) {
+      delete panel.xAxis.showWeekends;
+    }
+
+    if (_.has(panel, "yAxis.showCrosshair")) {
+      delete panel.yAxis.showCrosshair;
+    }
+
+    if (_.has(panel, "data.unitFormat")) {
+      delete panel.data;
+    } // Migrate cardSpacing value. Seems rare (update from version 0.0.2).
+
+
+    if (_.has(panel, "cards.cardSpacing")) {
+      if (!_.has(panel, "cards.cardVSpacing")) {
+        if (panel.cards.cardSpacing) {
+          panel.cards.cardVSpacing = panel.cards.cardSpacing;
+          panel.cards.cardHSpacing = panel.cards.cardSpacing;
+        }
+      }
+
+      delete panel.cards.cardSpacing;
+    } // Migrate initial config for urls in tooltip (pull/86).
+    // 'usingUrl' was used to show tooltip with urls on click or not.
+
+
+    if (_.has(panel, "usingUrl")) {
+      if (!_.has(panel, "tooltip.freezeOnClick")) {
+        panel.tooltip.freezeOnClick = panel.usingUrl;
+      }
+
+      delete panel.usingUrl;
+    } // 'urls' array is now tooltip.items array. Also items are changed.
+
+
+    if (_.has(panel, "urls")) {
+      if (!_.has(panel, "tooltip.items")) {
+        panel.tooltip.items = [];
+        var hasRealItems = true;
+
+        if (panel.urls.length == 0) {
+          hasRealItems = false;
+        }
+
+        if (panel.urls.length == 1) {
+          var url = panel.urls[0];
+
+          if (url.base_url === '' && url.label === '') {
+            hasRealItems = false;
+          }
+        }
+
+        if (hasRealItems) {
+          panel.tooltip.showItems = true;
+          var _iteratorNormalCompletion = true;
+          var _didIteratorError = false;
+          var _iteratorError = undefined;
+
+          try {
+            for (var _iterator = panel.urls[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+              var _url = _step.value;
+              var item = {
+                urlTemplate: _.toString(_url.base_url),
+                urlText: _.toString(_url.label),
+                urlIcon: _.toString(_url.icon_fa),
+                urlToLowerCase: _url.forcelowercase,
+                valueDateFormat: ''
+              }; // replace $vars with new ${__vars} if url template is not empty
+
+              if (item.urlTemplate !== "") {
+                // $time was a graph time with prepended &
+                item.urlTemplate = _.replace(_url.base_url, /\$time/g, "&${__url_time_range}"); // $series_label was a y axis label
+
+                item.urlTemplate = _.replace(item.urlTemplate, /\$series_label/, "${__y_label}"); // $series_extra was a value from bucket. This value has format options and index.
+
+                var valueVar = "__value";
+
+                if (_url.useExtraSeries === true) {
+                  // index?
+                  if (_url.extraSeries.index > -1) {
+                    valueVar += "_" + _url.extraSeries.index;
+                  }
+
+                  var format = _.toString(_url.extraSeries.format);
+
+                  if (format === 'YYYY/MM/DD/HH_mm_ss') {
+                    valueVar += '_date';
+                    item.valueDateFormat = format;
+                  }
+                }
+
+                item.urlTemplate = _.replace(item.urlTemplate, /\$series_extra/, "${".concat(valueVar, "}"));
+              }
+
+              panel.tooltip.items.push(item);
+            }
+          } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+          } finally {
+            try {
+              if (!_iteratorNormalCompletion && _iterator["return"] != null) {
+                _iterator["return"]();
+              }
+            } finally {
+              if (_didIteratorError) {
+                throw _iteratorError;
+              }
+            }
+          }
+        }
+      }
+
+      delete panel.urls;
+    } // create statusmap metadata
+
+
+    panel.statusmap = {
+      "ConfigVersion": "v1"
+    };
+  }
+
+  function migratePanelConfig(panel) {
+    if (_.has(panel, "statusmap")) {
+      if (panel.statusmap.ConfigVersion == "v1") {
+        return;
+      }
+    } else {
+      migrate_V0_V1(panel);
+    }
+
+    return;
+  }
+
+  _export("migratePanelConfig", migratePanelConfig);
+
+  return {
+    setters: [function (_lodash) {
+      _ = _lodash.default;
+    }],
+    execute: function () {}
+  };
+});
+//# sourceMappingURL=panel_config_migration.js.map

dist/partials/options_editor.html

@@ -81,7 +81,7 @@
           </div>
           <div class="gf-form">
             <label class="gf-form-label">
-              <a class="pointer" tabindex="1" ng-click="ctrl.onEditorRemoveThreshold($index)">
+              <a class="pointer" tabindex="1" ng-click="editor.onRemoveThreshold($index)">
                 <i class="fa fa-trash"/>
               </a>
             </label>
@@ -91,12 +91,12 @@
         <div class="gf-form-inline">
             <div class="gf-form"></div>
           <div class="gf-form">
-            <button class="btn btn-inverse" ng-click="ctrl.onEditorAddThreshold()">
+            <button class="btn btn-inverse" ng-click="editor.onAddThreshold()">
               <i class="fa fa-plus"></i> Add new status
             </button>
           </div>
           <div class="gf-form">
-            <button class="btn btn-inverse" ng-click="ctrl.onEditorRemoveThresholds()">
+            <button class="btn btn-inverse" ng-click="editor.onRemoveThresholds()">
                 <i class="fa fa-minus"></i> Remove all
             </button>
           </div>
@@ -108,12 +108,12 @@
               <label class="gf-form-label">Presets</label>
           </div>
           <div class="gf-form">
-            <button class="btn" ng-click="ctrl.onEditorAddThreeLights()">
+            <button class="btn" ng-click="editor.onAddThreeLights()">
               Red-Yellow-Green
             </button>
           </div>
           <div class="gf-form">            
-            <button class="btn" ng-click="ctrl.onEditorAddSolarized()">
+            <button class="btn" ng-click="editor.onAddSolarized()">
               Solarized
             </button>
           </div>
@@ -144,10 +144,6 @@
       label="Show legend"
       checked="ctrl.panel.legend.show" on-change="ctrl.render()">
     </gf-form-switch>
-    <gf-form-switch class="gf-form" label-class="width-8"
-      label="Show tooltip"
-      checked="ctrl.panel.tooltip.show" on-change="ctrl.render()">
-    </gf-form-switch>
     <gf-form-switch class="gf-form" label-class="width-8"
       label="Show X axis"
       checked="ctrl.panel.xAxis.show" on-change="ctrl.render()">
@@ -159,17 +155,12 @@
 
     <div class="gf-form" ng-show="ctrl.panel.yAxis.show">
       <label class="gf-form-label width-8">Min width</label>
-      <input type="number" ng-model="ctrl.panel.xAxis.minWidth" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="''" ng-change="ctrl.render()" ng-model-onblur>
+      <input type="number" ng-model="ctrl.panel.yAxis.minWidth" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="''" ng-change="ctrl.render()" ng-model-onblur>
     </div>
     <div class="gf-form" ng-show="ctrl.panel.yAxis.show">
       <label class="gf-form-label width-8">Max width</label>
-      <input type="number" ng-model="ctrl.panel.xAxis.maxWidth" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="''" ng-change="ctrl.render()" ng-model-onblur>
+      <input type="number" ng-model="ctrl.panel.yAxis.maxWidth" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="''" ng-change="ctrl.render()" ng-model-onblur>
     </div>
-  </div>
-
-  <div class="section gf-form-group">
-    <h5 class="section-heading">Buckets</h5>
-
     <div class="gf-form" ng-show="ctrl.panel.yAxis.show">
       <label class="gf-form-label width-8">Rows sort</label>
       <div class="gf-form-select-wrapper">
@@ -180,6 +171,11 @@
       </div>
     </div>
 
+  </div>
+
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Buckets</h5>
+
     <gf-form-switch class="gf-form" label-class="width-8"
                     label="Multiple values"
                     checked="ctrl.panel.useMax" on-change="ctrl.render()">
@@ -187,6 +183,13 @@
     <div class="gf-form" ng-show="ctrl.panel.useMax">
       Color for bucket with multiple values is determined by color mode<br/>
     </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-8">Values index</label>
+      <input type="number" class="gf-form-input width-5" placeholder="-1" data-placement="right"
+        bs-tooltip="'Display only values with this index in a bucket. Use -1 to display all values'"
+        ng-model="ctrl.panel.seriesFilterIndex" ng-change="ctrl.refresh()"
+        ng-model-onblur>
+    </div>
 
     <div class="gf-form">
       <label class="gf-form-label width-8">Display nulls</label>
@@ -194,6 +197,7 @@
         <select class="gf-form-input max-width-9" ng-model="ctrl.panel.nullPointMode" ng-options="f for f in ['as empty', 'as zero']" ng-change="ctrl.render()"></select>
       </div>
     </div>
+
     <div class="gf-form">
       <label class="gf-form-label width-8">Min width</label>
       <input type="number" class="gf-form-input width-5" placeholder="5" data-placement="right" bs-tooltip="'Minimal card width for 1/1 resolution in pixels'" ng-model="ctrl.panel.cards.cardMinWidth" ng-change="ctrl.refresh()" ng-model-onblur>
@@ -212,105 +216,4 @@
     </div>
   </div>
 
-  <div class="section gf-form-group width-30">
-    <h5 class="section-heading">Filtering</h5>
-    <div class="gf-form">
-      <label class="gf-form-label width-9">Show only serie with Index</label>
-      <input type="number" class="gf-form-input width-5" placeholder="2" data-placement="right"
-        bs-tooltip="'Filter with the serie index to show the value on graph. Use -1 to get all values'" ng-model="ctrl.panel.seriesFilterIndex" ng-change="ctrl.refresh()"
-        ng-model-onblur>
-    </div>
-  </div>
-
-  <div class="section gf-form-group">
-    <h5 class="section-heading">URL</h5>
-
-    <div class="gf-form">
-      Insert the url to navigate<br />
-    </div>
-
-    <div class="gf-form">
-      <gf-form-switch class="gf-form" label="Show extraSeries Tooltip when clicking elements" label-class="width-12"
-        checked="ctrl.panel.usingUrl" on-change="ctrl.render()"></gf-form-switch>
-    </div>
-
-    <div class="section gf-form-group" ng-if="ctrl.panel.usingUrl">
-      <br>
-      <div class="gf-form-inline">
-        <div class="gf-form"></div>
-        <div class="gf-form">
-          <button class="btn btn-inverse" ng-click="ctrl.onEditorAddUrl()">
-            <i class="fa fa-plus"></i> Add new URL
-          </button>
-        </div>
-        <div class="gf-form">
-          <button class="btn btn-inverse" ng-click="ctrl.onEditorRemoveUrls()">
-            <i class="fa fa-minus"></i> Remove all URLs
-          </button>
-        </div>
-      </div>
-      
-      <div class="gf-form-block" ng-repeat="url in ctrl.panel.urls">
-        <div class="gf-form">
-          <label class="gf-form-label width-2">{{ $index }}</label>
-          <label class="gf-form-label width-2">
-            <a class="pointer" tabindex="1" ng-click="ctrl.onEditorRemoveUrl($index)">
-              <i class="fa fa-trash" />
-            </a>
-          </label>
-          <label class="gf-form-label width-4">Label: </label>
-          <input type="text" class="gf-form-input width-16" placeholder="My URL" data-placement="right"
-            ng-model="url.label" ng-change="ctrl.refresh()">
-          <label class="gf-form-label width-4">URL: </label>
-          <input type="text" class="gf-form-input width-c-50" placeholder="https://www.google.es" data-placement="right"
-            bs-tooltip="'This is the url to be shown when the user clicks on it'" ng-model="url.base_url"
-            ng-change="ctrl.refresh()">
-          <info-popover mode="right-normal">
-            <p>Specify an URL (relative or absolute)</p>
-            <span>
-              Use special variables to specify cell values:
-              <br>
-              <em>$series_label</em> name of the serie
-              <br>
-              <em>$(template.name)</em> name of the templated to be replaced
-              <br>
-              <em>$time</em> append &from...&to on the URL
-              <br>
-              <em>$series_extra</em> use extraSeries value to use it on URL
-            </span>
-          </info-popover>
-        </div>
-        <div class="gf-form">
-          <label class="gf-form-label width-4">Icon: </label>
-          <input type="text" class="gf-form-input width-12" placeholder="FA Icon" data-placement="right"
-            bs-tooltip="'The icon shown on URL'" ng-model="url.icon_fa" ng-change="ctrl.refresh()">
-          <gf-form-switch class="gf-form" label-class="width-8" label="Force lowercase" checked="url.forcelowercase"
-            on-change="ctrl.render()">
-          </gf-form-switch>
-          <gf-form-switch class="gf-form" label-class="width-6" label="Use Extra Serie Data" checked="url.useExtraSeries"
-            on-change="ctrl.render()">
-          </gf-form-switch>
-          <div class="gf-form" ng-if="url.useExtraSeries == true">
-            <label class="gf-form-label width-8">Extra Series Index: </label>
-            <input type="number" class="gf-form-input width-12" placeholder="0" ng-if="url.useExtraSeries == true"
-              data-placement="right" bs-tooltip="'Fields index to use its value on URL using $series_extra. Use -1 to disable it'" ng-model="url.extraSeries.index"
-              ng-change="ctrl.refresh()">
-            
-            <label class="gf-form-label width-9">Type</label>
-            <div class="gf-form-select-wrapper width-8">
-              <select class="input-small gf-form-input" ng-model="url.type" ng-options="s for s in ctrl.extraSeriesFormats" ng-change="ctrl.onChangeType(url)"></select>
-            </div>
-            
-            <div ng-if="url.type === 'Date'">
-              <label class="gf-form-label width-12">Extra Series Date Format: </label>
-              <input type="text" class="gf-form-input width-12" placeholder="YYYY/MM/DD/HH_mm_ss" ng-if="url.useExtraSeries == true"
-                data-placement="right" bs-tooltip="'Date format to transformat extraSeries'" ng-model="url.extraSeries.format"
-                ng-change="ctrl.refresh()">
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-  </div>
 </div>

dist/partials/tooltip_editor.html

@@ -0,0 +1,120 @@
+<div class="editor-row">
+  <div class="section gf-form-group">
+    <gf-form-switch class="gf-form" label-class="width-10"
+      label="Show tooltip"
+      tooltip="'Show tooltip when mouse is over the card'"
+      checked="ctrl.panel.tooltip.show" on-change="ctrl.render()">
+    </gf-form-switch>
+    <gf-form-switch class="gf-form" label-class="width-10"
+      label="Freeze on click"
+      tooltip="'Freeze tooltip copy when card is clicked'"
+      checked="ctrl.panel.tooltip.freezeOnClick" on-change="ctrl.render()">
+    </gf-form-switch>
+    <gf-form-switch class="gf-form" label-class="width-10"
+      label="Show items"
+      tooltip="'Show items (urls) in tooltip'"
+      checked="ctrl.panel.tooltip.showItems" on-change="ctrl.render()">
+    </gf-form-switch>
+  </div>
+
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Items</h5>
+
+    <div class="gf-form" ng-show="ctrl.panel.tooltip.items.length == 0">
+      <label class="gf-form-label width-2">0</label>
+      <label class="gf-form-input width-30">No items defined.</label>
+    </div>
+  </div>
+</div>  
+  
+<div>
+  <div ng-repeat="item in ctrl.panel.tooltip.items">
+    <div class="gf-form gf-form--grow">
+        <label class="gf-form-label width-6">
+          URL
+          <info-popover mode="left-normal">
+            <p>Specify an URL (relative or absolute)</p>
+            <span>
+              Use special variables:
+              <br>
+              <em>${__y_label}</em> name of the time series (alias or legend in the query editor).
+              <!-- <br>
+              <em>$(template.name)</em> name of the templated to be replaced -->
+              <br>
+              <em>${__bucket_range}</em> refers to bucket range in the form of '&from=...&to=...'.
+              <br>
+              <em>${__graph_range}</em> refers to graph range in the form of '&from=...&to=...'.
+              <br>
+              <em>${__value}</em> refers to current bucket value or max value if multiple values mode is on.
+              <br>
+              <em>${__value_N}</em> refers to Nth value in current bucket. Value indexes are started from 0. For instance,
+              <em>${__value_1}</em> refers to second value.
+            </span>
+          </info-popover>
+        </label>
+        <input type="text" class="gf-form-input" placeholder="https://www.google.es" data-placement="top"
+          bs-tooltip="'This is the url to be shown when the user clicks on it'" ng-model="item.urlTemplate"
+          ng-change="ctrl.refresh()">
+        <label class="gf-form-label">
+          <i class="fa fa-trash pointer" ng-click="editor.onRemoveUrl($index)"></i>
+        </label>
+    </div>
+
+    <div class="gf-form-inline">
+      <div class="gf-form">
+          <label class="gf-form-label width-4">Icon</label>
+          <label class="gf-form-label width-2">
+            <i class="fa fa-{{item.urlIcon}}"></i>
+          </label>
+          <input
+            class="gf-form-input width-10"
+            type="text"
+            ng-model="item.urlIcon"
+            bs-typeahead="editor.getFAIconClasses"
+            bs-tooltip="'The icon for URL link'"
+            data-placement="top"
+            ng-blur="ctrl.render()"
+            data-min-length="0"
+            data-items="100"
+          />
+      </div>
+      <div class="gf-form">
+          <label class="gf-form-label width-4">Label</label>
+          <input type="text" class="gf-form-input width-16" placeholder="My URL" data-placement="top"
+                 bs-tooltip="'Text for URL link'"
+            ng-model="item.urlText" ng-change="ctrl.refresh()">
+      </div>
+
+      <div class="gf-form">
+        <gf-form-switch class="gf-form" label-class="width-8" label="Lowercase link" checked="item.urlToLowerCase"
+          on-change="ctrl.render()">
+        </gf-form-switch>
+      </div>
+
+      <div class="gf-form">
+          <label class="gf-form-label width-8">Date format</label>
+          <input type="text" class="gf-form-input width-12" placeholder="YYYY/MM/DD/HH_mm_ss"
+            data-placement="top" bs-tooltip="'Date format for __value_date'"
+            bs-typeahead="editor.getValueDateFormats"
+            data-min-length="0"
+            data-items="100"
+            ng-model="item.valueDateFormat"
+            ng-blur="ctrl.render()">
+      </div>
+    </div>
+  </div>
+
+  <div class="gf-form-inline">
+    <div class="gf-form"></div>
+    <div class="gf-form">
+      <button class="btn btn-inverse" ng-click="editor.onAddUrl()">
+        <i class="fa fa-plus"></i> Add URL
+      </button>
+    </div>
+    <div class="gf-form">
+      <button class="btn btn-inverse" ng-click="editor.onRemoveUrls()">
+        <i class="fa fa-minus"></i> Remove all
+      </button>
+    </div>
+  </div>
+</div>

dist/plugin.json

@@ -17,7 +17,6 @@
     "links": [
       {"name": "Github", "url": "https://github.com/flant/grafana-statusmap"},
       {"name": "MIT Licence", "url": "https://github.com/flant/grafana-statusmap/blob/master/LICENSE"}
-
     ],
     "screenshots": [
       {"name": "Panel with light theme", "path": "img/flant-statusmap-panel.png"},

dist/rendering.js

@@ -1,9 +1,9 @@
 "use strict";
 
-System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/core", "d3", "./libs/d3-scale-chromatic/index", "./tooltip", "./tooltipextraseries", "./annotations"], function (_export, _context) {
+System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/core", "d3", "./libs/d3-scale-chromatic/index", "./tooltip", "./annotations"], function (_export, _context) {
   "use strict";
 
-  var _, $, moment, kbn, appEvents, contextSrv, d3, d3ScaleChromatic, StatusmapTooltip, StatusHeatmapTooltipExtraSeries, AnnotationTooltip, MIN_CARD_SIZE, CARD_H_SPACING, CARD_V_SPACING, CARD_ROUND, DATA_RANGE_WIDING_FACTOR, DEFAULT_X_TICK_SIZE_PX, DEFAULT_Y_TICK_SIZE_PX, X_AXIS_TICK_PADDING, Y_AXIS_TICK_PADDING, MIN_SELECTION_WIDTH, Statusmap, StatusmapRenderer;
+  var _, $, moment, kbn, appEvents, contextSrv, d3, d3ScaleChromatic, StatusmapTooltip, AnnotationTooltip, MIN_CARD_SIZE, CARD_H_SPACING, CARD_V_SPACING, CARD_ROUND, DATA_RANGE_WIDING_FACTOR, DEFAULT_X_TICK_SIZE_PX, DEFAULT_Y_TICK_SIZE_PX, X_AXIS_TICK_PADDING, Y_AXIS_TICK_PADDING, MIN_SELECTION_WIDTH, Statusmap, StatusmapRenderer;
 
   function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
@@ -66,8 +66,6 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
       d3ScaleChromatic = _libsD3ScaleChromaticIndex;
     }, function (_tooltip) {
       StatusmapTooltip = _tooltip.StatusmapTooltip;
-    }, function (_tooltipextraseries) {
-      StatusHeatmapTooltipExtraSeries = _tooltipextraseries.StatusHeatmapTooltipExtraSeries;
     }, function (_annotations) {
       AnnotationTooltip = _annotations.AnnotationTooltip;
     }],
@@ -156,8 +154,6 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
 
           _defineProperty(this, "tooltip", void 0);
 
-          _defineProperty(this, "tooltipExtraSeries", void 0);
-
           _defineProperty(this, "annotationTooltip", void 0);
 
           _defineProperty(this, "heatmap", void 0);
@@ -177,7 +173,6 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
           // $heatmap is JQuery object, but heatmap is D3
           this.$heatmap = this.elem.find('.statusmap-panel');
           this.tooltip = new StatusmapTooltip(this.$heatmap, this.scope);
-          this.tooltipExtraSeries = new StatusHeatmapTooltipExtraSeries(this.$heatmap, this.scope);
           this.annotationTooltip = new AnnotationTooltip(this.$heatmap, this.scope);
           this.yOffset = 0;
           this.selection = {
@@ -410,9 +405,11 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
 
             if (this.heatmap) {
               this.heatmap.remove();
-            }
+            } // Insert svg as a first child into heatmap_elem
+            // as the frozen tooltip moving logiс assumes that tooltip is the last child.
 
-            this.heatmap = d3.select(heatmap_elem).append("svg").attr("width", this.width).attr("height", this.height);
+
+            this.heatmap = d3.select(heatmap_elem).insert("svg", ":first-child").attr("width", this.width).attr("height", this.height);
             this.chartHeight = this.height - this.margin.top - this.margin.bottom;
             this.chartTop = this.margin.top;
             this.chartBottom = this.chartTop + this.chartHeight;
@@ -513,10 +510,7 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
 
             var colorScheme = _.find(this.ctrl.colorSchemes, {
               value: this.panel.color.colorScheme
-            }); // if (!colorScheme) {
+            });
-            //
-            // }
-
 
             var colorInterpolator = d3ScaleChromatic[colorScheme.value];
             var colorScaleInverted = colorScheme.invert === 'always' || colorScheme.invert === 'dark' && !contextSrv.user.lightTheme;
@@ -618,28 +612,28 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
           }
         }, {
           key: "getCardColor",
-          value: function getCardColor(b) {
+          value: function getCardColor(bucket) {
             if (this.panel.color.mode === 'opacity') {
               return this.panel.color.cardColor;
             } else if (this.panel.color.mode === 'spectrum') {
-              return this.colorScale(b.value);
+              return this.colorScale(bucket.value);
             } else if (this.panel.color.mode === 'discrete') {
               if (this.panel.seriesFilterIndex != null && this.panel.seriesFilterIndex != -1) {
-                return this.ctrl.discreteExtraSeries.getBucketColorSingle(d.values[this.panel.seriesFilterIndex]);
+                return this.ctrl.discreteExtraSeries.getBucketColorSingle(bucket.values[this.panel.seriesFilterIndex]);
               } else {
-                return this.ctrl.discreteExtraSeries.getBucketColor(b.values);
+                return this.ctrl.discreteExtraSeries.getBucketColor(bucket.values);
               }
             }
           }
         }, {
           key: "getCardOpacity",
-          value: function getCardOpacity(b) {
+          value: function getCardOpacity(bucket) {
-            if (this.panel.nullPointMode === 'as empty' && b.value == null) {
+            if (this.panel.nullPointMode === 'as empty' && bucket.value == null) {
               return 0;
             }
 
             if (this.panel.color.mode === 'opacity') {
-              return this.opacityScale(b.value);
+              return this.opacityScale(bucket.value);
             } else {
               return 1;
             }
@@ -705,14 +699,7 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
           key: "onMouseLeave",
           value: function onMouseLeave(e) {
             appEvents.emit('graph-hover-clear');
-            this.clearCrosshair(); //annotationTooltip.destroy();
+            this.clearCrosshair();
-
-            if (e.relatedTarget) {
-              if (e.relatedTarget.className == "statusmap-tooltip-extraseries graph-tooltip grafana-tooltip" || e.relatedTarget.className == "graph-tooltip-time") {} else {
-                this.tooltipExtraSeries.destroy();
-              }
-            }
-
             this.annotationTooltip.destroy();
           }
         }, {
@@ -738,13 +725,13 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
               this.tooltip.show(event);
               this.annotationTooltip.show(event);
             }
-          }
+          } // TODO emit an event and move logic to panelCtrl
+
         }, {
           key: "onMouseClick",
-          value: function onMouseClick(event) {
+          value: function onMouseClick(e) {
-            this.tooltipExtraSeries.show(event);
+            if (this.ctrl.panel.tooltip.freezeOnClick) {
-
+              this.tooltip.showFrozen(e);
-            if (this.ctrl.panel.usingUrl) {
               this.tooltip.destroy();
             }
           }

dist/specs/panel_config_migration.js

@@ -0,0 +1,166 @@
+"use strict";
+
+System.register(["../panel_config_migration"], function (_export, _context) {
+  "use strict";
+
+  var migratePanelConfig;
+  return {
+    setters: [function (_panel_config_migration) {
+      migratePanelConfig = _panel_config_migration.migratePanelConfig;
+    }],
+    execute: function () {
+      describe('when migrate from config with urls', function () {
+        var panel;
+        describe('given full panel configuration', function () {
+          var panelConfig = {
+            "cards": {
+              "cardHSpacing": 2,
+              "cardMinWidth": 5,
+              "cardRound": null,
+              "cardVSpacing": 2
+            },
+            "color": {
+              "cardColor": "#b4ff00",
+              "colorScale": "sqrt",
+              "colorScheme": "interpolateGnYlRd",
+              "defaultColor": "#757575",
+              "exponent": 0.5,
+              "mode": "opacity",
+              "thresholds": []
+            },
+            "data": {
+              "decimals": null,
+              "unitFormat": "short"
+            },
+            "datasource": "TestData DB",
+            "gridPos": {
+              "h": 8,
+              "w": 12,
+              "x": 0,
+              "y": 0
+            },
+            "highlightCards": true,
+            "id": 4,
+            "legend": {
+              "show": false
+            },
+            "nullPointMode": "as empty",
+            "seriesFilterIndex": -1,
+            "targets": [{
+              "aggregation": "Last",
+              "csvWave": {
+                "timeStep": 60,
+                "valuesCSV": "0,0,2,2,1,1,3,3"
+              },
+              "decimals": 2,
+              "displayAliasType": "Warning / Critical",
+              "displayType": "Regular",
+              "displayValueWithAlias": "Never",
+              "refId": "A",
+              "scenarioId": "predictable_csv_wave",
+              "stringInput": "",
+              "units": "none",
+              "valueHandler": "Number Threshold"
+            }],
+            "timeFrom": null,
+            "timeShift": null,
+            "title": "Panel Title",
+            "tooltip": {
+              "show": true
+            },
+            "type": "flant-statusmap-panel",
+            "urls": [{
+              "base_url": "",
+              "extraSeries": {
+                "index": -1
+              },
+              "forcelowercase": true,
+              "icon_fa": "external-link",
+              "label": "",
+              "tooltip": "",
+              "useExtraSeries": false,
+              "useseriesname": true
+            }],
+            "useMax": true,
+            "usingUrl": true,
+            "xAxis": {
+              "labelFormat": "%a %m/%d",
+              "show": true
+            },
+            "yAxis": {
+              "maxWidth": -1,
+              "minWidth": -1,
+              "show": true
+            },
+            "yAxisSort": "metrics"
+          };
+          beforeEach(function () {
+            panel = Object.assign({}, panelConfig);
+            migratePanelConfig(panel);
+          });
+          it('should migrate usingUrls to tooltip.freezeOnClick', function () {
+            expect(panel.usingUrl).toBeUndefined();
+            expect(panel.tooltip).toHaveProperty("freezeOnClick", true);
+            expect(panel.tooltip.freezeOnClick).toBeTruthy();
+          });
+          it('should have no urls', function () {
+            expect(panel.urls).toBeUndefined();
+          });
+          it('should have empty items in tooltip', function () {
+            expect(panel.tooltip).toHaveProperty("items", []);
+            expect(panel.tooltip.items).toHaveLength(0);
+          });
+        });
+        describe("given configuration with non-empty base_url", function () {
+          describe("with variables", function () {
+            var panelConfig = {
+              "tooltip": {
+                "show": true
+              },
+              "urls": [{
+                "base_url": "https://google.com/$series_label$time",
+                "extraSeries": {
+                  "index": -1
+                },
+                "forcelowercase": true,
+                "icon_fa": "external-link",
+                "label": "google",
+                "tooltip": "",
+                "useExtraSeries": false,
+                "useseriesname": true
+              }, {
+                "base_url": "example.com/$series_extra",
+                "extraSeries": {
+                  "format": "YYYY/MM/DD/HH_mm_ss",
+                  "index": -1
+                },
+                "forcelowercase": true,
+                "icon_fa": "external-link",
+                "label": "DateLink",
+                "useExtraSeries": true
+              }]
+            };
+            beforeEach(function () {
+              panel = Object.assign({}, panelConfig);
+              migratePanelConfig(panel);
+            });
+            it("should have equal size of tooltip.items", function () {
+              expect(panel.tooltip).toHaveProperty("items");
+              expect(panel.tooltip.items).toHaveLength(panelConfig.urls.length);
+            });
+            it("should replace time variable with __url_time_range", function () {
+              expect(panel.tooltip.items[0].urlTemplate).toContain("${__url_time_range}");
+            });
+            it("should replace series_label variable with __y_label", function () {
+              expect(panel.tooltip.items[0].urlTemplate).toContain("${__y_label}");
+            });
+            it("should replace series_extra variable with __value_date", function () {
+              expect(panel.tooltip.items[1].urlTemplate).toContain("${__value_date}");
+            });
+          });
+        });
+      });
+    }
+  };
+});
+//# sourceMappingURL=panel_config_migration.js.map

dist/tooltip.js

@@ -3,7 +3,7 @@
 System.register(["d3", "jquery", "lodash"], function (_export, _context) {
   "use strict";
 
-  var d3, $, _, TOOLTIP_PADDING_X, TOOLTIP_PADDING_Y, StatusmapTooltip;
+  var d3, $, _, TOOLTIP_PADDING_X, TOOLTIP_PADDING_Y, DefaultValueDateFormat, StatusmapTooltip;
 
   function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
@@ -23,7 +23,10 @@ System.register(["d3", "jquery", "lodash"], function (_export, _context) {
     }],
     execute: function () {
       TOOLTIP_PADDING_X = 30;
-      TOOLTIP_PADDING_Y = 5;
+      TOOLTIP_PADDING_Y = 5; // TODO rename file to tooltip_ctrl.ts
+      // TODO move DefaultValueDateFormat into tooltip.ts, as it used in several places (migration, partial and tooltip render)
+
+      DefaultValueDateFormat = 'YYYY/MM/DD/HH_mm_ss';
 
       _export("StatusmapTooltip", StatusmapTooltip =
       /*#__PURE__*/
@@ -41,17 +44,21 @@ System.register(["d3", "jquery", "lodash"], function (_export, _context) {
 
           _defineProperty(this, "panel", void 0);
 
-          _defineProperty(this, "heatmapPanel", void 0);
+          _defineProperty(this, "panelElem", void 0);
 
           _defineProperty(this, "mouseOverBucket", void 0);
 
           _defineProperty(this, "originalFillColor", void 0);
 
+          _defineProperty(this, "tooltipWidth", void 0);
+
+          _defineProperty(this, "tooltipFrozen", void 0);
+
           this.scope = scope;
           this.dashboard = scope.ctrl.dashboard;
           this.panelCtrl = scope.ctrl;
           this.panel = scope.ctrl.panel;
-          this.heatmapPanel = elem;
+          this.panelElem = elem;
           this.mouseOverBucket = false;
           this.originalFillColor = null;
           elem.on("mouseover", this.onMouseOver.bind(this));
@@ -67,7 +74,7 @@ System.register(["d3", "jquery", "lodash"], function (_export, _context) {
 
             if (!this.tooltip) {
               this.add();
-              this.move(e);
+              this.move(e, this.tooltip);
             }
           }
         }, {
@@ -82,12 +89,12 @@ System.register(["d3", "jquery", "lodash"], function (_export, _context) {
               return;
             }
 
-            this.move(e);
+            this.move(e, this.tooltip);
           }
         }, {
           key: "add",
           value: function add() {
-            this.tooltip = d3.select("body").append("div").attr("class", "statusmap-tooltip graph-tooltip grafana-tooltip");
+            this.tooltip = d3.select("body").append("div").attr("class", "graph-tooltip statusmap-tooltip");
           }
         }, {
           key: "destroy",
@@ -98,6 +105,22 @@ System.register(["d3", "jquery", "lodash"], function (_export, _context) {
 
             this.tooltip = null;
           }
+        }, {
+          key: "removeFrozen",
+          value: function removeFrozen() {
+            if (this.tooltipFrozen) {
+              this.tooltipFrozen.remove();
+              this.tooltipFrozen = null;
+            }
+          }
+        }, {
+          key: "showFrozen",
+          value: function showFrozen(pos) {
+            this.removeFrozen();
+            this.tooltipFrozen = d3.select(this.panelElem[0]).append("div").attr("class", "graph-tooltip statusmap-tooltip statusmap-tooltip-frozen");
+            this.displayTooltip(pos, this.tooltipFrozen, true);
+            this.moveRelative(pos, this.tooltipFrozen);
+          }
         }, {
           key: "show",
           value: function show(pos) {
@@ -110,6 +133,13 @@ System.register(["d3", "jquery", "lodash"], function (_export, _context) {
               return;
             }
 
+            this.displayTooltip(pos, this.tooltip, false);
+            this.move(pos, this.tooltip);
+          } // Retrieve bucket and create html content inside tooltip’s div element.
+
+        }, {
+          key: "displayTooltip",
+          value: function displayTooltip(pos, tooltip, frozen) {
             var cardEl = d3.select(pos.target);
             var yid = cardEl.attr('yid');
             var xid = cardEl.attr('xid');
@@ -121,41 +151,137 @@ System.register(["d3", "jquery", "lodash"], function (_export, _context) {
             }
 
             var timestamp = bucket.to;
-            var name = bucket.yLabel;
+            var yLabel = bucket.yLabel;
             var value = bucket.value;
-            var values = bucket.values;
+            var values = bucket.values; // TODO create option for this formatting.
+
             var tooltipTimeFormat = 'YYYY-MM-DD HH:mm:ss';
-            var time = this.dashboard.formatDate(+timestamp, tooltipTimeFormat);
+            var time = this.dashboard.formatDate(+timestamp, tooltipTimeFormat); // Close button for the frozen tooltip.
-            var tooltipHtml = "<div class=\"graph-tooltip-time\">".concat(time, "</div>\n      <div class=\"statusmap-histogram\"></div>");
+
-            var statuses;
+            var tooltipClose = "";
+
+            if (frozen) {
+              tooltipClose = "\n<a class=\"pointer pull-right small tooltip-close\">\n      <i class=\"fa fa-remove\"></i>\n</a>\n";
+            }
+
+            var tooltipHtml = "<div class=\"graph-tooltip-time\">".concat(time).concat(tooltipClose, "</div>");
 
             if (this.panel.color.mode === 'discrete') {
+              var statuses;
+
               if (this.panel.seriesFilterIndex >= 0) {
                 statuses = this.panelCtrl.discreteExtraSeries.convertValueToTooltips(value);
               } else {
                 statuses = this.panelCtrl.discreteExtraSeries.convertValuesToTooltips(values);
               }
 
-              var statusesHtml = '';
+              var statusTitle = "status:";
 
-              if (statuses.length === 1) {
+              if (statuses.length > 1) {
-                statusesHtml = "status:";
+                statusTitle = "statuses:";
-              } else if (statuses.length > 1) {
-                statusesHtml = "statuses:";
               }
 
-              tooltipHtml += "\n      <div>\n        name: <b>".concat(name, "</b> <br>\n        ").concat(statusesHtml, "\n        <ul>\n          ").concat(_.join(_.map(statuses, function (v) {
+              tooltipHtml += "\n      <div>\n        name: <b>".concat(yLabel, "</b>\n        <br>\n        <span>").concat(statusTitle, "</span>\n        <ul>\n          ").concat(_.join(_.map(statuses, function (v) {
-                return "<li style=\"background-color: ".concat(v.color, "\" class=\"discrete-item\">").concat(v.tooltip, "</li>");
+                return "<li style=\"background-color: ".concat(v.color, "; text-align:center\" class=\"discrete-item\">").concat(v.tooltip, "</li>");
               }), ""), "\n        </ul>\n      </div>");
             } else {
               if (values.length === 1) {
                 tooltipHtml += "<div> \n      name: <b>".concat(name, "</b> <br>\n      value: <b>").concat(value, "</b> <br>\n      </div>");
               } else {
-                tooltipHtml += "<div>\n      name: <b>".concat(name, "}</b> <br>\n      values:\n      <ul>\n        ").concat(_.join(_.map(values, function (v) {
+                tooltipHtml += "<div>\n      name: <b>".concat(name, "</b> <br>\n      values:\n      <ul>\n        ").concat(_.join(_.map(values, function (v) {
                   return "<li>".concat(v, "</li>");
                 }), ""), "\n      </ul>\n      </div>");
               }
-            } //   "Ambiguous bucket state: Multiple values!";
+            }
+
+            tooltipHtml += "<div class=\"statusmap-histogram\"></div>";
+
+            if (this.panel.tooltip.showItems) {
+              // Additional information: urls, etc.
+              // Clone additional items
+              var items = JSON.parse(JSON.stringify(this.panel.tooltip.items));
+              var scopedVars = {};
+              var valueVar;
+
+              for (var i = 0; i < bucket.values.length; i++) {
+                valueVar = "__value_".concat(i);
+                scopedVars[valueVar] = {
+                  value: bucket.values[i]
+                };
+              }
+
+              scopedVars["__value"] = {
+                value: bucket.value
+              };
+              scopedVars["__y_label"] = {
+                value: yLabel
+              }; // Grafana 7.0 compatible
+
+              scopedVars["__url_time_range"] = {
+                value: this.panelCtrl.retrieveTimeVar()
+              };
+              var _iteratorNormalCompletion = true;
+              var _didIteratorError = false;
+              var _iteratorError = undefined;
+
+              try {
+                for (var _iterator = items[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+                  var item = _step.value;
+
+                  if (_.isEmpty(item.urlTemplate)) {
+                    item.link = "#";
+                  } else {
+                    var dateFormat = item.valueDateFormat;
+
+                    if (dateFormat == '') {
+                      dateFormat = DefaultValueDateFormat;
+                    }
+
+                    var valueDateVar = void 0;
+
+                    for (var _i = 0; _i < bucket.values.length; _i++) {
+                      valueDateVar = "__value_".concat(_i, "_date");
+                      scopedVars[valueDateVar] = {
+                        value: this.dashboard.formatDate(+bucket.values[_i], dateFormat)
+                      };
+                    }
+
+                    scopedVars["__value_date"] = {
+                      value: this.dashboard.formatDate(+bucket.value, dateFormat)
+                    };
+                    item.link = this.panelCtrl.templateSrv.replace(item.urlTemplate, scopedVars); // Force lowercase for link
+
+                    if (item.urlToLowerCase) {
+                      item.link = item.link.toLowerCase();
+                    }
+                  }
+
+                  item.label = item.urlText;
+
+                  if (_.isEmpty(item.label)) {
+                    item.label = _.isEmpty(item.urlTemplate) ? "Empty URL" : _.truncate(item.link);
+                  }
+                }
+              } catch (err) {
+                _didIteratorError = true;
+                _iteratorError = err;
+              } finally {
+                try {
+                  if (!_iteratorNormalCompletion && _iterator["return"] != null) {
+                    _iterator["return"]();
+                  }
+                } finally {
+                  if (_didIteratorError) {
+                    throw _iteratorError;
+                  }
+                }
+              }
+
+              tooltipHtml += _.join(_.map(items, function (v) {
+                return "\n          <div>\n            <a href=\"".concat(v.link, "\" target=\"_blank\">\n            <div class=\"dashlist-item\">\n            <p class=\"dashlist-link dashlist-link-dash-db\">\n              <span style=\"word-wrap: break-word;\" class=\"dash-title\">").concat(v.label, "</span><span class=\"dashlist-star\">\n              <i class=\"fa fa-").concat(v.urlIcon, "\"></i>\n            </span></p> </div></a><div>");
+              }), "\n");
+            } // Ambiguous state: there multiple values in bucket!
+            // TODO rename useMax to expectMultipleValues
 
 
             if (!this.panel.useMax && bucket.multipleValues) {
@@ -172,18 +298,32 @@ System.register(["d3", "jquery", "lodash"], function (_export, _context) {
               }
             }
 
-            this.tooltip.html(tooltipHtml);
+            tooltip.html(tooltipHtml); // Assign mouse event handlers for "frozen" tooltip.
-            this.move(pos);
+
-          }
+            if (frozen) {
+              // Stop propagation mouse events up to parents to allow interaction with frozen tooltip’s elements.
+              tooltip.on("click", function () {
+                d3.event.stopPropagation();
+              }).on("mousedown", function () {
+                d3.event.stopPropagation();
+              }).on("mouseup", function () {
+                d3.event.stopPropagation();
+              }); // Activate close button
+
+              tooltip.select("a.tooltip-close").on("click", this.removeFrozen.bind(this));
+            }
+          } // Move tooltip as absolute positioned element.
+
         }, {
           key: "move",
-          value: function move(pos) {
+          value: function move(pos, tooltip) {
-            if (!this.tooltip) {
+            if (!tooltip) {
               return;
             }
 
-            var elem = $(this.tooltip.node())[0];
+            var elem = $(tooltip.node())[0];
             var tooltipWidth = elem.clientWidth;
+            this.tooltipWidth = tooltipWidth;
             var tooltipHeight = elem.clientHeight;
             var left = pos.pageX + TOOLTIP_PADDING_X;
             var top = pos.pageY + TOOLTIP_PADDING_Y;
@@ -196,7 +336,39 @@ System.register(["d3", "jquery", "lodash"], function (_export, _context) {
               top = pos.pageY - tooltipHeight - TOOLTIP_PADDING_Y;
             }
 
-            return this.tooltip.style("left", left + "px").style("top", top + "px");
+            return tooltip.style("left", left + "px").style("top", top + "px");
+          } // Move tooltip relative to svg element of panel.
+
+        }, {
+          key: "moveRelative",
+          value: function moveRelative(pos, tooltip) {
+            if (!tooltip) {
+              return;
+            }
+
+            var panelX = pos.pageX - this.panelElem.offset().left;
+            var panelY = pos.pageY - this.panelElem.offset().top;
+            var panelWidth = this.panelElem.width();
+            var panelHeight = this.panelElem.height(); // 'position: relative' sets tooltip’s width to 100% of panel element.
+            // Restore width from floating tooltip and add more space for 'Close' button.
+
+            var tooltipWidth = this.tooltipWidth + 25; // Left property is clamped so tooltip stays inside panel bound box.
+
+            var tooltipLeft = panelX + TOOLTIP_PADDING_X;
+
+            if (tooltipLeft + tooltipWidth > panelWidth) {
+              tooltipLeft = panelWidth - tooltipWidth;
+            }
+
+            if (tooltipLeft < 0) {
+              tooltipLeft = 0;
+            } // Frozen tooltip’s root element is appended next to panel’s svg element,
+            // so top property is adjusted to move tooltip’s root element
+            // up to the mouse pointer position.
+
+
+            var tooltipTop = -(panelHeight - panelY + TOOLTIP_PADDING_Y);
+            return tooltip.style("left", tooltipLeft + "px").style("top", tooltipTop + "px").style("width", tooltipWidth + "px");
           }
         }]);
 

dist/tooltip_editor.js

@@ -0,0 +1,95 @@
+"use strict";
+
+System.register([], function (_export, _context) {
+  "use strict";
+
+  var emptyTooltipItem, TooltipEditorCtrl;
+
+  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+  function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+  function tooltipEditorCtrl() {
+    'use strict';
+
+    return {
+      restrict: 'E',
+      scope: true,
+      templateUrl: 'public/plugins/flant-statusmap-panel/partials/tooltip_editor.html',
+      controller: TooltipEditorCtrl
+    };
+  }
+
+  _export("tooltipEditorCtrl", tooltipEditorCtrl);
+
+  return {
+    setters: [],
+    execute: function () {
+      emptyTooltipItem = {
+        urlText: '',
+        urlTemplate: '',
+        urlIcon: 'external-link',
+        urlToLowerCase: true,
+        valueDateFormat: ''
+      };
+
+      _export("TooltipEditorCtrl", TooltipEditorCtrl =
+      /*#__PURE__*/
+      function () {
+        function TooltipEditorCtrl($scope) {
+          _classCallCheck(this, TooltipEditorCtrl);
+
+          _defineProperty(this, "panel", void 0);
+
+          _defineProperty(this, "panelCtrl", void 0);
+
+          $scope.editor = this;
+          this.panelCtrl = $scope.ctrl;
+          this.panel = this.panelCtrl.panel;
+        }
+
+        _createClass(TooltipEditorCtrl, [{
+          key: "render",
+          value: function render() {
+            this.panelCtrl.render();
+          }
+        }, {
+          key: "onAddUrl",
+          value: function onAddUrl() {
+            this.panel.tooltip.items.push(Object.assign({}, emptyTooltipItem));
+            this.render();
+          }
+        }, {
+          key: "onRemoveUrl",
+          value: function onRemoveUrl(index) {
+            this.panel.tooltip.items.splice(index, 1);
+            this.render();
+          }
+        }, {
+          key: "onRemoveUrls",
+          value: function onRemoveUrls() {
+            this.panel.tooltip.items = [];
+            this.render();
+          }
+        }, {
+          key: "getFAIconClasses",
+          value: function getFAIconClasses() {
+            return ['external-link', 'plus', 'anchor', 'ban', 'globe', 'gear', 'cloud', 'download', 'cloud-download'];
+          }
+        }, {
+          key: "getValueDateFormats",
+          value: function getValueDateFormats() {
+            return ['YYYY/MM/DD/HH_mm_ss', 'YYYYMMDDHHmmss', 'YYYY-MM-DD-HH-mm-ss'];
+          }
+        }]);
+
+        return TooltipEditorCtrl;
+      }());
+    }
+  };
+});
+//# sourceMappingURL=tooltip_editor.js.map

dist/tooltip_editor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tooltip_editor.ts"],"names":["tooltipEditorCtrl","restrict","scope","templateUrl","controller","TooltipEditorCtrl","emptyTooltipItem","urlText","urlTemplate","urlIcon","urlToLowerCase","valueDateFormat","$scope","editor","panelCtrl","ctrl","panel","render","tooltip","items","push","Object","assign","index","splice"],"mappings":";;;;;;;;;;;;;;;AAoDO,WAASA,iBAAT,GAA6B;AAClC;;AACA,WAAO;AACLC,MAAAA,QAAQ,EAAE,GADL;AAELC,MAAAA,KAAK,EAAE,IAFF;AAGLC,MAAAA,WAAW,EAAE,mEAHR;AAILC,MAAAA,UAAU,EAAEC;AAJP,KAAP;AAMD;;+BAReL,iB;;;;;AAlDZM,MAAAA,gB,GAAmB;AACrBC,QAAAA,OAAO,EAAE,EADY;AAErBC,QAAAA,WAAW,EAAE,EAFQ;AAGrBC,QAAAA,OAAO,EAAE,eAHY;AAIrBC,QAAAA,cAAc,EAAE,IAJK;AAKrBC,QAAAA,eAAe,EAAE;AALI,O;;mCAQVN,iB;;;AAIX,mCAAYO,MAAZ,EAAyB;AAAA;;AAAA;;AAAA;;AACvBA,UAAAA,MAAM,CAACC,MAAP,GAAgB,IAAhB;AACA,eAAKC,SAAL,GAAiBF,MAAM,CAACG,IAAxB;AACA,eAAKC,KAAL,GAAa,KAAKF,SAAL,CAAeE,KAA5B;AACD;;;;mCAEQ;AACP,iBAAKF,SAAL,CAAeG,MAAf;AACD;;;qCAEU;AACT,iBAAKD,KAAL,CAAWE,OAAX,CAAmBC,KAAnB,CAAyBC,IAAzB,CAA8BC,MAAM,CAACC,MAAP,CAAc,EAAd,EAAkBhB,gBAAlB,CAA9B;AACA,iBAAKW,MAAL;AACD;;;sCAEWM,K,EAAe;AACzB,iBAAKP,KAAL,CAAWE,OAAX,CAAmBC,KAAnB,CAAyBK,MAAzB,CAAgCD,KAAhC,EAAuC,CAAvC;AACA,iBAAKN,MAAL;AACD;;;yCAEc;AACb,iBAAKD,KAAL,CAAWE,OAAX,CAAmBC,KAAnB,GAA2B,EAA3B;AACA,iBAAKF,MAAL;AACD;;;6CAEkB;AACjB,mBAAO,CAAC,eAAD,EAAkB,MAAlB,EAA0B,QAA1B,EAAoC,KAApC,EAA2C,OAA3C,EAAoD,MAApD,EAA4D,OAA5D,EAAqE,UAArE,EAAiF,gBAAjF,CAAP;AACD;;;gDAEqB;AACpB,mBAAO,CACH,qBADG,EAEH,gBAFG,EAGH,qBAHG,CAAP;AAKD","sourcesContent":["import { StatusHeatmapCtrl } from './module';\n\nlet emptyTooltipItem = {\n  urlText: '',\n  urlTemplate: '',\n  urlIcon: 'external-link',\n  urlToLowerCase: true,\n  valueDateFormat: ''\n};\n\nexport class TooltipEditorCtrl {\n  panel: any;\n  panelCtrl: StatusHeatmapCtrl;\n\n  constructor($scope: any) {\n    $scope.editor = this;\n    this.panelCtrl = $scope.ctrl as StatusHeatmapCtrl;\n    this.panel = this.panelCtrl.panel;\n  }\n\n  render() {\n    this.panelCtrl.render();\n  }\n\n  onAddUrl() {\n    this.panel.tooltip.items.push(Object.assign({}, emptyTooltipItem));\n    this.render();\n  }\n\n  onRemoveUrl(index: number) {\n    this.panel.tooltip.items.splice(index, 1);\n    this.render();\n  }\n\n  onRemoveUrls() {\n    this.panel.tooltip.items = [];\n    this.render();\n  }\n\n  getFAIconClasses() {\n    return ['external-link', 'plus', 'anchor', 'ban', 'globe', 'gear', 'cloud', 'download', 'cloud-download'];\n  }\n\n  getValueDateFormats() {\n    return [\n        'YYYY/MM/DD/HH_mm_ss',\n        'YYYYMMDDHHmmss',\n        'YYYY-MM-DD-HH-mm-ss'\n        ];\n  }\n}\n\nexport function tooltipEditorCtrl() {\n  'use strict';\n  return {\n    restrict: 'E',\n    scope: true,\n    templateUrl: 'public/plugins/flant-statusmap-panel/partials/tooltip_editor.html',\n    controller: TooltipEditorCtrl,\n  };\n}\n"],"file":"tooltip_editor.js"}

dist/tooltipextraseries.js

@@ -1,242 +0,0 @@
-"use strict";
-
-System.register(["d3", "lodash", "jquery", "./extra_series_format"], function (_export, _context) {
-  "use strict";
-
-  var d3, _, $, ExtraSeriesFormatValue, TOOLTIP_PADDING_X, TOOLTIP_PADDING_Y, StatusHeatmapTooltipExtraSeries;
-
-  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-  function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-  return {
-    setters: [function (_d) {
-      d3 = _d.default;
-    }, function (_lodash) {
-      _ = _lodash.default;
-    }, function (_jquery) {
-      $ = _jquery.default;
-    }, function (_extra_series_format) {
-      ExtraSeriesFormatValue = _extra_series_format.ExtraSeriesFormatValue;
-    }],
-    execute: function () {
-      TOOLTIP_PADDING_X = -50;
-      TOOLTIP_PADDING_Y = 5;
-
-      _export("StatusHeatmapTooltipExtraSeries", StatusHeatmapTooltipExtraSeries =
-      /*#__PURE__*/
-      function () {
-        function StatusHeatmapTooltipExtraSeries(elem, scope) {
-          _classCallCheck(this, StatusHeatmapTooltipExtraSeries);
-
-          _defineProperty(this, "scope", void 0);
-
-          _defineProperty(this, "dashboard", void 0);
-
-          _defineProperty(this, "panelCtrl", void 0);
-
-          _defineProperty(this, "panel", void 0);
-
-          _defineProperty(this, "heatmapPanel", void 0);
-
-          _defineProperty(this, "mouseOverBucket", void 0);
-
-          _defineProperty(this, "originalFillColor", void 0);
-
-          _defineProperty(this, "tooltip", void 0);
-
-          this.scope = scope;
-          this.dashboard = scope.ctrl.dashboard;
-          this.panelCtrl = scope.ctrl;
-          this.panel = scope.ctrl.panel;
-          this.heatmapPanel = elem;
-          this.mouseOverBucket = false;
-          this.originalFillColor = null;
-          elem.on("mouseover", this.onMouseOver.bind(this));
-          elem.on("click", this.onMouseClick.bind(this));
-        }
-
-        _createClass(StatusHeatmapTooltipExtraSeries, [{
-          key: "onMouseOver",
-          value: function onMouseOver(e) {
-            if (!this.panel.usingUrl || !this.scope.ctrl.data || _.isEmpty(this.scope.ctrl.data)) {
-              return;
-            }
-          }
-        }, {
-          key: "onMouseClick",
-          value: function onMouseClick(e) {
-            if (!this.panel.usingUrl) {
-              return;
-            }
-
-            this.destroy();
-            this.add();
-          }
-        }, {
-          key: "add",
-          value: function add() {
-            this.tooltip = d3.select("body").append("div").attr("class", "statusmap-tooltip-extraseries graph-tooltip grafana-tooltip");
-          }
-        }, {
-          key: "destroy",
-          value: function destroy() {
-            if (this.tooltip) {
-              this.tooltip.remove();
-            }
-
-            this.tooltip = null;
-          }
-        }, {
-          key: "show",
-          value: function show(pos) {
-            if (!this.panel.usingUrl || !this.tooltip) {
-              return;
-            } // shared tooltip mode
-
-
-            if (pos.panelRelY) {
-              return;
-            }
-
-            var cardId = d3.select(pos.target).attr('cardId');
-
-            if (!cardId) {
-              this.destroy();
-              return;
-            }
-
-            var card = this.panelCtrl.cardsData.cards[cardId];
-
-            if (!card) {
-              this.destroy();
-              return;
-            }
-
-            if (card.value == null) {
-              this.destroy();
-              return;
-            }
-
-            var x = card.x;
-            var y = card.y;
-            var value = card.value;
-            var values = card.values;
-            var tooltipTimeFormat = 'YYYY-MM-DD HH:mm:ss';
-            var time = this.dashboard.formatDate(+x, tooltipTimeFormat);
-            var tooltipHtml = "<div class=\"graph-tooltip-time\">".concat(time, "</div>");
-
-            if (this.panel.color.mode === 'discrete') {
-              var statuses = "";
-
-              if (this.panelCtrl.panel.seriesFilterIndex == -1) {
-                statuses = this.panelCtrl.discreteExtraSeries.convertValuesToTooltips(values);
-              } else {
-                statuses = this.panelCtrl.discreteExtraSeries.convertValueToTooltips(value);
-              }
-
-              tooltipHtml += "\n                <div>\n                name: <b>".concat(y, "</b>\n                <div>\n                <br>\n                <span>status:</span>\n                <ul>\n                  ").concat(_.join(_.map(statuses, function (v) {
-                return "<p style=\"background-color: ".concat(v.color, "; text-align:center\" class=\"discrete-item\">").concat(v.tooltip, "</p>");
-              }), ""), "\n                </ul>\n                </div>      \n                </div> <br>");
-            }
-
-            tooltipHtml += "<div class=\"statusmap-histogram\"></div>";
-            var urls = this.panelCtrl.panel.urls;
-            var rtime = this.panelCtrl.retrieveTimeVar();
-            var curl = JSON.parse(JSON.stringify(urls));
-
-            for (var i = 0; i < curl.length; i++) {
-              //Change name var
-              curl[i].base_url = _.replace(curl[i].base_url, /\$series_label/g, y); //Set up extra series
-
-              if (curl[i].useExtraSeries == true) {
-                var tf = curl[i].extraSeries.format;
-                var vh = card.values[curl[i].extraSeries.index]; //let extraSeries: any = this.dashboard.formatDate(+vh, tf)
-
-                var series_extra = this.formatExtraSeries(vh, tf);
-                curl[i].base_url = _.replace(curl[i].base_url, /\$series_extra/g, series_extra);
-              } //Change time var
-
-
-              curl[i].base_url = _.replace(curl[i].base_url, /\$time/g, rtime); //Replace vars
-
-              curl[i].base_url = this.panelCtrl.renderLink(curl[i].base_url, this.panelCtrl.variableSrv.variables);
-            }
-
-            if (this.panelCtrl.panel.usingUrl == true) {
-              tooltipHtml += "\n                <div bs-tooltip='Settings' data-placement=\"right\">\n                  ".concat(_.join(_.map(curl, function (v) {
-                return "<div ><a   href=\"".concat(v.forcelowercase ? v.base_url.toLowerCase() : v.base_url, "\" target=\"_blank\"><div class=\"dashlist-item\">\n                  <p  class=\"dashlist-link dashlist-link-dash-db\"><span style=\"word-wrap: break-word;\" class=\"dash-title\">").concat(v.label ? v.label : v.base_url != "" ? _.truncate(v.base_url) : "Empty URL", "</span><span class=\"dashlist-star\">\n                        <i class=\"fa fa-").concat(v.icon_fa, "\"></i>\n                      </span></p> </div></a><div>");
-              }), ""), "\n                </div> <br>");
-            } //   "Ambiguous bucket state: Multiple values!";
-
-
-            if (!this.panel.useMax && card.multipleValues) {
-              tooltipHtml += "<div><b>Error:</b> ".concat(this.panelCtrl.dataWarnings.multipleValues.title, "</div>");
-            } // Discrete mode errors
-
-
-            if (this.panel.color.mode === 'discrete') {
-              if (card.noColorDefined) {
-                var badValues = this.panelCtrl.discreteExtraSeries.getNotColoredValues(values);
-                tooltipHtml += "<div><b>Error:</b> ".concat(this.panelCtrl.dataWarnings.noColorDefined.title, "\n                    <br>not colored values:\n                    <ul>\n                    ").concat(_.join(_.map(badValues, function (v) {
-                  return "<li>".concat(v, "</li>");
-                }), ""), "\n                    </ul>\n                    </div>");
-              }
-            }
-
-            this.tooltip.html(tooltipHtml);
-            this.move(pos);
-          }
-        }, {
-          key: "formatExtraSeries",
-          value: function formatExtraSeries(value, type) {
-            var extraSeries = '';
-
-            switch (type) {
-              case ExtraSeriesFormatValue.Date:
-                extraSeries = this.dashboard.formatDate(+value, type);
-                return extraSeries;
-
-              case ExtraSeriesFormatValue.Raw:
-                extraSeries = value;
-                return extraSeries;
-
-              default:
-                return extraSeries;
-            }
-          }
-        }, {
-          key: "move",
-          value: function move(pos) {
-            if (!this.tooltip) {
-              return;
-            }
-
-            var elem = $(this.tooltip.node())[0];
-            var tooltipWidth = elem.clientWidth;
-            var tooltipHeight = elem.clientHeight;
-            var left = pos.pageX + TOOLTIP_PADDING_X;
-            var top = pos.pageY + TOOLTIP_PADDING_Y;
-
-            if (pos.pageX + tooltipWidth + 40 > window.innerWidth) {
-              left = pos.pageX - tooltipWidth - TOOLTIP_PADDING_X;
-            }
-
-            if (pos.pageY - window.pageYOffset + tooltipHeight + 20 > window.innerHeight) {
-              top = pos.pageY - tooltipHeight - TOOLTIP_PADDING_Y;
-            }
-
-            return this.tooltip.style("left", left + "px").style("top", top + "px");
-          }
-        }]);
-
-        return StatusHeatmapTooltipExtraSeries;
-      }());
-    }
-  };
-});
-//# sourceMappingURL=tooltipextraseries.js.map

example/k8s/dashboard.json

@@ -63,10 +63,6 @@
             }
           ]
         },
-        "data": {
-          "decimals": null,
-          "unitFormat": "short"
-        },
         "datasource": "prometheus",
         "gridPos": {
           "h": 16,
@@ -130,21 +126,21 @@
         ],
         "title": "Pod Status",
         "tooltip": {
-          "show": true
+          "show": true,
+          "freezeOnClick": false,
+          "showItems": false,
+          "items": []
         },
         "transparent": true,
         "type": "flant-statusmap-panel",
         "useMax": true,
         "xAxis": {
-          "labelFormat": "%a %m/%d",
+          "show": true
-          "minBucketWidthToShowWeekends": 4,
-          "show": true,
-          "showCrosshair": true,
-          "showWeekends": true
         },
         "yAxis": {
           "show": true,
-          "showCrosshair": false
+          "minWidth": -1,
+          "maxWidth": -1
         },
         "yAxisSort": "a → z"
       },
@@ -310,21 +306,21 @@
         ],
         "title": "Container Status",
         "tooltip": {
-          "show": true
+          "show": true,
+          "freezeOnClick": true,
+          "showItems": false,
+          "items": []
         },
         "transparent": true,
         "type": "flant-statusmap-panel",
         "useMax": true,
         "xAxis": {
-          "labelFormat": "%a %m/%d",
+          "show": true
-          "minBucketWidthToShowWeekends": 4,
-          "show": true,
-          "showCrosshair": true,
-          "showWeekends": true
         },
         "yAxis": {
           "show": true,
-          "showCrosshair": false
+          "minWidth": -1,
+          "maxWidth": -1
         },
         "yAxisSort": "a → z"
       }

jest.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+    verbose: false,
+    transform: {
+        '^.+\\.(ts|tsx)$': 'ts-jest',
+    },
+    moduleDirectories: ['node_modules'],
+    roots: ['<rootDir>/src'],
+    testRegex: '(\\.|/)(test)\\.(jsx?|tsx?)$',
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
+    //setupFiles: ['jest-canvas-mock', './public/test/jest-shim.ts', './public/test/jest-setup.ts'],
+    //snapshotSerializers: ['enzyme-to-json/serializer'],
+    globals: { 'ts-jest': { isolatedModules: true } },
+};

package.json

@@ -5,7 +5,8 @@
   "main": "README.md",
   "scripts": {
     "build": "grunt",
-    "check-types": "node_modules/typescript/bin/tsc"
+    "check-types": "node_modules/typescript/bin/tsc",
+    "test": "jest"
   },
   "author": "Flant JSC",
   "license": "Apache-2.0",
@@ -26,6 +27,7 @@
     "@types/d3-scale-chromatic": "1.3.1",
     "@types/angular": "1.6.56",
     "@types/grafana": "github:flant/types-grafana",
+    "@types/jest": "24.0.13",
     "@types/jquery": "1.10.35",
     "@types/lodash": "4.14.123",
     "babel-core": "7.0.0-bridge.0",
@@ -43,8 +45,12 @@
     "grunt-contrib-uglify": "^3.0.1",
     "grunt-contrib-watch": "^1.0.0",
     "grunt-notify": "^0.4.5",
+    "jest": "24.8.0",
+    "jest-canvas-mock": "2.1.2",
+    "jest-date-mock": "1.0.7",
     "load-grunt-tasks": "^3.5.2",
     "typescript": "3.7.2",
+    "ts-jest": "24.1.0",
     "tslib": "1.10.0"
   },
   "dependencies": {

src/color_legend.ts

@@ -16,7 +16,7 @@ coreModule.directive('optionsColorLegend', function() {
   return {
     restrict: 'E',
     template: '<div class="status-heatmap-color-legend"><svg width="16.8rem" height="24px"></svg></div>',
-    link: function(scope, elem, attrs) {
+    link: function(scope: any, elem, attrs) {
       let ctrl = scope.ctrl;
       let panel = scope.ctrl.panel;
 

src/css/_statusmap.scss

@@ -41,6 +41,19 @@
 }
 
 .statusmap-tooltip {
+  // from .grafana-tooltip
+  // '.grafana-tooltip a' makes links not readable for tooltip items.
+  position: absolute;
+  padding: 10px;
+  font-weight: 200;
+  border-radius: 5px;
+  max-width: 800px;
+  max-height: 600px;
+  overflow: hidden;
+  line-height: 14px;
+  z-index: 9999;
+
+  // more overrides
   white-space: nowrap;
   font-size: $font-size-sm;
   background-color: $graph-tooltip-bg;
@@ -54,19 +67,9 @@
   }
 }
 
-.statusmap-tooltip-extraseries {
+.statusmap-tooltip-frozen {
-  white-space: nowrap;
+  position: relative;
-  font-size: $font-size-sm;
+  z-index: 1;
-  background-color: $graph-tooltip-bg;
-  color: $text-color;
-
-  .discrete-item {
-    color: #ffffff;
-    padding: 1px;
-    font-weight: bold;
-    margin-bottom: 0;
-    text-shadow: 0 0 0.2em #212124, 0 0 0.2em #212124, 0 0 0.2em #212124;
-  }
 }
 
 .statusmap-histogram rect {

src/extra_series_format.ts

@@ -1,9 +0,0 @@
-export enum ExtraSeriesFormat {
-    Date = 'Date',
-    Raw = 'Raw',
-}
-
-export enum ExtraSeriesFormatValue {
-    Date = 'YYYY/MM/DD/HH_mm_ss',
-    Raw = '',
-}

src/module.ts

@@ -4,6 +4,9 @@ import { auto } from 'angular';
 
 // Components
 import './color_legend';
+import { optionsEditorCtrl } from './options_editor';
+import { tooltipEditorCtrl } from './tooltip_editor';
+import { migratePanelConfig } from './panel_config_migration';
 
 // Utils
 import kbn from 'app/core/utils/kbn';
@@ -14,12 +17,8 @@ import { MetricsPanelCtrl } from 'app/plugins/sdk';
 import { AnnotationsSrv } from 'app/features/annotations/annotations_srv';
 import { Bucket, BucketMatrix } from './statusmap_data';
 import rendering from './rendering';
-// import aggregates, { aggregatesMap } from './aggregates';
+
-// import fragments, { fragmentsMap } from './fragments';
-// import { labelFormats } from './xAxisLabelFormats';
-import {statusHeatmapOptionsEditor} from './options_editor';
 import {ColorModeDiscrete} from "./color_mode_discrete";
-import { ExtraSeriesFormat, ExtraSeriesFormatValue } from './extra_series_format';
 
 const VALUE_INDEX = 0,
       TIME_INDEX = 1;
@@ -56,7 +55,6 @@ const colorSchemes = [
 let colorModes = ['opacity', 'spectrum', 'discrete'];
 let opacityScales = ['linear', 'sqrt'];
 
-
 loadPluginCss({
   dark: 'plugins/flant-statusmap-panel/css/statusmap.dark.css',
   light: 'plugins/flant-statusmap-panel/css/statusmap.light.css'
@@ -81,7 +79,6 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
   noDatapoints: boolean;
 
   discreteExtraSeries: ColorModeDiscrete;
-  extraSeriesFormats: any = [];
 
   annotations: object[] = [];
   annotationsPromise: any;
@@ -108,68 +105,41 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
       cardRound: null
     },
     xAxis: {
-      show: true,
+      show: true
-      labelFormat: '%a %m/%d'
     },
     yAxis: {
       show: true,
       minWidth: -1,
-      maxWidth: -1,
+      maxWidth: -1
     },
     tooltip: {
-      show: true
+      show: true,
+      freezeOnClick: true,
+      showItems: false,
+      items: [] // see tooltip_editor.ts
     },
     legend: {
       show: true
     },
-    data: {
-      unitFormat: 'short',
-      decimals: null
-    },
     // how null points should be handled
     nullPointMode: 'as empty',
     yAxisSort: 'metrics',
     highlightCards: true,
     useMax: true,
-    urls: [{
+
-      tooltip: '',
+    seriesFilterIndex: -1
-      label: '',
-      base_url: '',
-      useExtraSeries: false,
-      useseriesname: true,
-      forcelowercase: true,
-      icon_fa: 'external-link',
-      extraSeries: {
-        index: -1
-      }
-    }],
-    seriesFilterIndex: -1,
-    usingUrl: false
   };
 
   /** @ngInject */
-  constructor($scope: any, $injector: auto.IInjectorService, timeSrv, private annotationsSrv: AnnotationsSrv, $window, datasourceSrv, variableSrv, templateSrv) {
+  constructor($scope: any, $injector: auto.IInjectorService, timeSrv, private annotationsSrv: AnnotationsSrv, $window, datasourceSrv, public variableSrv: any, templateSrv) {
     super($scope, $injector);
 
+    migratePanelConfig(this.panel);
     _.defaultsDeep(this.panel, this.panelDefaults);
 
     this.opacityScales = opacityScales;
     this.colorModes = colorModes;
     this.colorSchemes = colorSchemes;
-    this.variableSrv = variableSrv;
-    this.extraSeriesFormats = ExtraSeriesFormat;
-
-    this.renderLink = (link, scopedVars, format) => {
-      var scoped = {}
-      for (var key in scopedVars) {
-        scoped[key] = { value: scopedVars[key] }
-      }
-      if (format) {
-        return this.templateSrv.replace(link, scoped, format)
-      } else {
-        return this.templateSrv.replace(link, scoped)
-      }
-    }
 
     // default graph width for discrete card width calculation
     this.graph = {
@@ -209,38 +179,15 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
     this.events.on('refresh', this.postRefresh.bind(this));
     // custom event from rendering.js
     this.events.on('render-complete', this.onRenderComplete.bind(this));
-    this.events.on('onChangeType', this.onChangeType.bind(this));
 
     this.onCardColorChange = this.onCardColorChange.bind(this);
   }
 
   onRenderComplete(data: any):void {
-    // console.log({
-    //   data: this.data,
-    //   bucketMatrix: this.bucketMatrix,
-    //   chartWidth: data.chartWidth,
-    //   from: this.range.from.valueOf(),
-    //   to: this.range.to.valueOf()
-    // })
-
     this.graph.chartWidth = data.chartWidth;
     this.renderingCompleted();
   }
 
-  onChangeType(url): void {
-    switch (url.type) {
-      case ExtraSeriesFormat.Date:
-        url.extraSeries.format = ExtraSeriesFormatValue.Date;
-        break;
-      case ExtraSeriesFormat.Raw:
-        url.extraSeries.format = ExtraSeriesFormatValue.Raw;
-        break;
-      default:
-        url.extraSeries.format = ExtraSeriesFormatValue.Raw;
-        break;
-    }
-  }
-
   // getChartWidth returns an approximation of chart canvas width or
   // a saved value calculated during a render.
   getChartWidth():number {
@@ -266,6 +213,7 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
 
   // Quick workaround for 6.7 and 7.0+. There is no call to
   // calculateInterval in updateTimeRange in those versions.
+  // TODO ts type has no argument for this method.
   updateTimeRange(datasource?: any) {
     let ret = super.updateTimeRange(datasource);
     this.calculateInterval();
@@ -316,17 +264,8 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
     this.interval = interval;
 
     // Get final buckets count after interval is adjusted
+    // TODO is it needed?
     //this.xBucketsCount = Math.floor(rangeMs / intervalMs);
-
-    // console.log("calculateInterval: ", {
-    //   interval: this.interval,
-    //   intervalMs: this.intervalMs,
-    //   rangeMs: rangeMs,
-    //   from: this.range.from.valueOf(),
-    //   to: this.range.to.valueOf(),
-    //   numIntervals: rangeMs/this.intervalMs,
-    //   maxCardsCount: maxCardsCount,
-    // });
   }
 
   issueQueries(datasource: any) {
@@ -342,8 +281,7 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
      * (but not wait for completion). This resolves
      * issue 11806.
      */
-    // 5.x before 5.4 doesn't have datasourcePromises. 
+    // 5.x before 5.4 doesn't have datasourcePromises.
-
     if ("undefined" !== typeof(this.annotationsSrv.datasourcePromises)) {
       return this.annotationsSrv.datasourcePromises.then(r => {
         return this.issueQueriesWithInterval(datasource, this.interval);
@@ -364,7 +302,6 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
     return res;
   }
 
-
   onDataReceived(dataList: any) {
     this.data    = dataList;
     // Quick workaround for 7.0+. There is no call to
@@ -401,7 +338,8 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
   }
 
   onInitEditMode() {
-    this.addEditorTab('Options', statusHeatmapOptionsEditor, 2);
+    this.addEditorTab('Options', optionsEditorCtrl, 2);
+    this.addEditorTab('Tooltip', tooltipEditorCtrl, 3);
     this.unitFormats = kbn.getUnitFormats();
   }
 
@@ -436,8 +374,6 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
     if (this.bucketMatrix) {
       this.noDatapoints = this.bucketMatrix.noDatapoints;
     }
-
-    //console.log(this);
   }
 
   onCardColorChange(newColor) {
@@ -455,75 +391,14 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
     this.noColorDefined = false;
   }
 
-  onEditorAddThreshold() {
-    this.panel.color.thresholds.push({ color: this.panel.defaultColor });
-    this.render();
-  }
-
-  onEditorAddUrl = () => {
-    this.panel.urls.push({
-      label: '',
-      base_url: '',
-      useExtraSeries: false,
-      useseriesname: true,
-      forcelowercase: true,
-      icon_fa: 'external-link',
-      extraSeries: {
-        index: -1
-      }
-    });
-    this.render();
-  }
-
-  onEditorRemoveUrl = (index) => {
-    this.panel.urls.splice(index, 1);
-    this.render();
-  }
-
-  onEditorRemoveThreshold(index:number) {
-    this.panel.color.thresholds.splice(index, 1);
-    this.render();
-  }
-
-  onEditorRemoveThresholds() {
-    this.panel.color.thresholds = [];
-    this.render();
-  }
-
-
-  onEditorRemoveUrls = () => {
-    this.panel.urls = [];
-    this.render();
-  }
-
-  onEditorAddThreeLights() {
-    this.panel.color.thresholds.push({color: "red", value: 2, tooltip: "error" });
-    this.panel.color.thresholds.push({color: "yellow", value: 1, tooltip: "warning" });
-    this.panel.color.thresholds.push({color: "green", value: 0, tooltip: "ok" });
-    this.render();
-  }
-  
-  /* https://ethanschoonover.com/solarized/ */
-  onEditorAddSolarized() {
-    this.panel.color.thresholds.push({color: "#b58900", value: 0, tooltip: "yellow" });
-    this.panel.color.thresholds.push({color: "#cb4b16", value: 1, tooltip: "orange" });
-    this.panel.color.thresholds.push({color: "#dc322f", value: 2, tooltip: "red" });
-    this.panel.color.thresholds.push({color: "#d33682", value: 3, tooltip: "magenta" });
-    this.panel.color.thresholds.push({color: "#6c71c4", value: 4, tooltip: "violet" });
-    this.panel.color.thresholds.push({color: "#268bd2", value: 5, tooltip: "blue" });
-    this.panel.color.thresholds.push({color: "#2aa198", value: 6, tooltip: "cyan" });
-    this.panel.color.thresholds.push({color: "#859900", value: 7, tooltip: "green" });
-    this.render();
-  }
-
   link(scope, elem, attrs, ctrl) {
     rendering(scope, elem, attrs, ctrl);
   }
 
+  // Compatible with Grafana 7.0 overrides feature.
   retrieveTimeVar() {
     var time = this.timeSrv.timeRangeForUrl();
-    var var_time = '&from=' + time.from + '&to=' + time.to;
+    return 'from=' + time.from + '&to=' + time.to;
-    return var_time;
   }
 
   // convertToBuckets groups values in data into buckets by target and timestamp.
@@ -737,133 +612,6 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
 
     bucketMatrix.targets = targetKeys;
     return bucketMatrix;
-    this.bucketMatrix = bucketMatrix;
-    
-    // Collect all values for each bucket from datapoints with similar target.
-    // TODO aggregate values into buckets over datapoint[TIME_INDEX] not over datapoint index (j).
-
-
-    // for(let i = 0; i < cardsData.targets.length; i++) {
-    //   let target = cardsData.targets[i];
-
-    //   for (let j = 0; j < cardsData.xBucketSize; j++) {
-    //     let card = new Card();
-    //     card.id = i*cardsData.xBucketSize + j;
-    //     card.values = [];
-    //     card.y = target;
-    //     card.x = -1;
-
-    //     // collect values from all timeseries with target
-    //     for (let si = 0; si < cardsData.targetIndex[target].length; si++) {
-    //       let s = data[cardsData.targetIndex[target][si]];
-    //       if (s.datapoints.length <= j) {
-    //         continue;
-    //       }
-    //       let datapoint = s.datapoints[j];
-    //       if (card.values.length === 0) {
-    //         card.x = datapoint[TIME_INDEX];
-    //       }
-    //       card.values.push(datapoint[VALUE_INDEX]);
-    //     }
-    //     card.minValue = _.min(card.values);
-    //     card.maxValue = _.max(card.values);
-    //     if (card.values.length > 1) {
-    //       cardsData.multipleValues = true;
-    //       card.multipleValues = true;
-    //       card.value = card.maxValue; // max value by default
-    //     } else {
-    //       card.value = card.maxValue; // max value by default
-    //     }
-
-    //     if (cardsData.maxValue < card.maxValue)
-    //       cardsData.maxValue = card.maxValue;
-
-    //     if (cardsData.minValue > card.minValue)
-    //       cardsData.minValue = card.minValue;
-
-    //     if (card.x != -1) {
-    //     cardsData.cards.push(card);
-    //     }
-    //   }
-    // }
-
-
-
-
-    // let cardsData = <CardsStorage> {
-    //   cards: [],
-    //   xBucketSize: 0,
-    //   yBucketSize: 0,
-    //   maxValue: 0,
-    //   minValue: 0,
-    //   multipleValues: false,
-    //   noColorDefined: false,
-    //   targets: [], // array of available unique targets
-    //   targetIndex: {} // indices in data array for each of available unique targets
-    // };
-
-    // if (!data || data.length == 0) { return cardsData;}
-
-    // // Collect uniq timestamps from data and spread over targets and timestamps
-
-    // // collect uniq targets and their indices
-    // _.map(data, (d, i) => {
-    //   cardsData.targetIndex[d.target] = _.concat(_.toArray(cardsData.targetIndex[d.target]), i)
-    // });
-
-    // // TODO add some logic for targets heirarchy
-    // cardsData.targets = _.keys(cardsData.targetIndex);
-    // cardsData.yBucketSize = cardsData.targets.length;
-    // // Maximum number of buckets over x axis
-    // cardsData.xBucketSize = _.max(_.map(data, d => d.datapoints.length));
-
-    // // Collect all values for each bucket from datapoints with similar target.
-    // // TODO aggregate values into buckets over datapoint[TIME_INDEX] not over datapoint index (j).
-    // for(let i = 0; i < cardsData.targets.length; i++) {
-    //   let target = cardsData.targets[i];
-
-    //   for (let j = 0; j < cardsData.xBucketSize; j++) {
-    //     let card = new Card();
-    //     card.id = i*cardsData.xBucketSize + j;
-    //     card.values = [];
-    //     card.y = target;
-    //     card.x = -1;
-
-    //     // collect values from all timeseries with target
-    //     for (let si = 0; si < cardsData.targetIndex[target].length; si++) {
-    //       let s = data[cardsData.targetIndex[target][si]];
-    //       if (s.datapoints.length <= j) {
-    //         continue;
-    //       }
-    //       let datapoint = s.datapoints[j];
-    //       if (card.values.length === 0) {
-    //         card.x = datapoint[TIME_INDEX];
-    //       }
-    //       card.values.push(datapoint[VALUE_INDEX]);
-    //     }
-    //     card.minValue = _.min(card.values);
-    //     card.maxValue = _.max(card.values);
-    //     if (card.values.length > 1) {
-    //       cardsData.multipleValues = true;
-    //       card.multipleValues = true;
-    //       card.value = card.maxValue; // max value by default
-    //     } else {
-    //       card.value = card.maxValue; // max value by default
-    //     }
-
-    //     if (cardsData.maxValue < card.maxValue)
-    //       cardsData.maxValue = card.maxValue;
-
-    //     if (cardsData.minValue > card.minValue)
-    //       cardsData.minValue = card.minValue;
-
-    //     if (card.x != -1) {
-    //     cardsData.cards.push(card);
-    //     }
-    //   }
-    // }
-
-    // return cardsData;
   }
 }
 

src/options_editor.ts

@@ -1,26 +1,68 @@
 import kbn from 'app/core/utils/kbn';
+import { StatusHeatmapCtrl } from './module';
 
 export class StatusHeatmapOptionsEditorCtrl {
   panel: any;
-  panelCtrl: any;
+  panelCtrl: StatusHeatmapCtrl;
   unitFormats: any;
 
-  constructor($scope) {
+  /** @ngInject */
+  constructor($scope: any) {
     $scope.editor = this;
-    this.panelCtrl = $scope.ctrl;
+    this.panelCtrl = $scope.ctrl as StatusHeatmapCtrl;
     this.panel = this.panelCtrl.panel;
-    this.unitFormats = kbn.getUnitFormats();
 
-    this.panelCtrl.render();
+    this.unitFormats = kbn.getUnitFormats();
   }
 
   setUnitFormat(subItem) {
     this.panel.data.unitFormat = subItem.value;
     this.panelCtrl.render();
   }
+
+  render() {
+    this.panelCtrl.render();
+  }
+
+  onAddThreshold() {
+    this.panel.color.thresholds.push({ color: this.panel.defaultColor });
+    this.render();
+  }
+
+  onRemoveThreshold(index:number) {
+    this.panel.color.thresholds.splice(index, 1);
+    this.render();
+  }
+
+  onRemoveThresholds() {
+    this.panel.color.thresholds = [];
+    this.render();
+  }
+
+  onAddThreeLights() {
+    this.panel.color.thresholds.push({color: "red", value: 2, tooltip: "error" });
+    this.panel.color.thresholds.push({color: "yellow", value: 1, tooltip: "warning" });
+    this.panel.color.thresholds.push({color: "green", value: 0, tooltip: "ok" });
+    this.render();
+  }
+  
+  /* https://ethanschoonover.com/solarized/ */
+  onAddSolarized() {
+    this.panel.color.thresholds.push({color: "#b58900", value: 0, tooltip: "yellow" });
+    this.panel.color.thresholds.push({color: "#cb4b16", value: 1, tooltip: "orange" });
+    this.panel.color.thresholds.push({color: "#dc322f", value: 2, tooltip: "red" });
+    this.panel.color.thresholds.push({color: "#d33682", value: 3, tooltip: "magenta" });
+    this.panel.color.thresholds.push({color: "#6c71c4", value: 4, tooltip: "violet" });
+    this.panel.color.thresholds.push({color: "#268bd2", value: 5, tooltip: "blue" });
+    this.panel.color.thresholds.push({color: "#2aa198", value: 6, tooltip: "cyan" });
+    this.panel.color.thresholds.push({color: "#859900", value: 7, tooltip: "green" });
+    this.render();
+  }
+
 }
 
-export function statusHeatmapOptionsEditor() {
+/** @ngInject */
+export function optionsEditorCtrl() {
   'use strict';
   return {
     restrict: 'E',

src/panel_config_migration.ts

@@ -0,0 +1,115 @@
+import _ from 'lodash';
+
+function migrate_V0_V1(panel: any) {
+  // Remove unused fields.
+  if (_.has(panel, "xAxis.labelFormat")) {
+    delete panel.xAxis.labelFormat;
+  }
+  if (_.has(panel, "xAxis.minBucketWidthToShowWeekends")) {
+    delete panel.xAxis.minBucketWidthToShowWeekends;
+  }
+  if (_.has(panel, "xAxis.showCrosshair")) {
+    delete panel.xAxis.showCrosshair;
+  }
+  if (_.has(panel, "xAxis.showWeekends")) {
+    delete panel.xAxis.showWeekends;
+  }
+  if (_.has(panel, "yAxis.showCrosshair")) {
+    delete panel.yAxis.showCrosshair;
+  }
+  if (_.has(panel, "data.unitFormat")) {
+    delete panel.data;
+  }
+
+  // Migrate cardSpacing value. Seems rare (update from version 0.0.2).
+  if (_.has(panel, "cards.cardSpacing")) {
+    if (!_.has(panel, "cards.cardVSpacing")) {
+      if (panel.cards.cardSpacing) {
+        panel.cards.cardVSpacing = panel.cards.cardSpacing
+        panel.cards.cardHSpacing = panel.cards.cardSpacing
+      }
+    }
+    delete panel.cards.cardSpacing;
+  }
+
+  // Migrate initial config for urls in tooltip (pull/86).
+  // 'usingUrl' was used to show tooltip with urls on click or not.
+  if (_.has(panel, "usingUrl")) {
+    if (!_.has(panel, "tooltip.freezeOnClick")) {
+      panel.tooltip.freezeOnClick = panel.usingUrl;
+    }
+    delete panel.usingUrl;
+  }
+
+  // 'urls' array is now tooltip.items array. Also items are changed.
+  if (_.has(panel, "urls")) {
+    if (!_.has(panel, "tooltip.items")) {
+      panel.tooltip.items = [];
+      let hasRealItems = true;
+      if (panel.urls.length == 0) {
+        hasRealItems = false;
+      }
+      if (panel.urls.length == 1) {
+        let url = panel.urls[0];
+        if (url.base_url === '' && url.label === '') {
+          hasRealItems = false;
+        }
+      }
+      if (hasRealItems) {
+        panel.tooltip.showItems = true;
+        for (let url of panel.urls) {
+          let item = {
+            urlTemplate: _.toString(url.base_url),
+            urlText: _.toString(url.label),
+            urlIcon: _.toString(url.icon_fa),
+            urlToLowerCase: url.forcelowercase,
+            valueDateFormat: '',
+          }
+          // replace $vars with new ${__vars} if url template is not empty
+          if (item.urlTemplate !== "") {
+            // $time was a graph time with prepended &
+            item.urlTemplate = _.replace(url.base_url, /\$time/g, "&${__url_time_range}");
+            // $series_label was a y axis label
+            item.urlTemplate = _.replace(item.urlTemplate, /\$series_label/, "${__y_label}");
+            // $series_extra was a value from bucket. This value has format options and index.
+            let valueVar = "__value";
+            if (url.useExtraSeries === true) {
+              // index?
+              if (url.extraSeries.index > -1) {
+                valueVar += "_" + url.extraSeries.index;
+              }
+
+              let format = _.toString(url.extraSeries.format);
+              if (format === 'YYYY/MM/DD/HH_mm_ss') {
+                valueVar += '_date';
+                item.valueDateFormat = format;
+              }
+            }
+
+            item.urlTemplate = _.replace(item.urlTemplate, /\$series_extra/, `\${${valueVar}}`);
+          }
+          panel.tooltip.items.push(item);
+        }
+      }
+    }
+    delete panel.urls;
+  }
+
+  // create statusmap metadata
+  panel.statusmap = {
+    "ConfigVersion": "v1",
+  }
+}
+
+
+export function migratePanelConfig(panel: any) {
+  if (_.has(panel, "statusmap")) {
+    if (panel.statusmap.ConfigVersion == "v1") {
+      return;
+    }
+  } else {
+    migrate_V0_V1(panel);
+  }
+  return;
+}
+

src/partials/options_editor.html

@@ -81,7 +81,7 @@
           </div>
           <div class="gf-form">
             <label class="gf-form-label">
-              <a class="pointer" tabindex="1" ng-click="ctrl.onEditorRemoveThreshold($index)">
+              <a class="pointer" tabindex="1" ng-click="editor.onRemoveThreshold($index)">
                 <i class="fa fa-trash"/>
               </a>
             </label>
@@ -91,12 +91,12 @@
         <div class="gf-form-inline">
             <div class="gf-form"></div>
           <div class="gf-form">
-            <button class="btn btn-inverse" ng-click="ctrl.onEditorAddThreshold()">
+            <button class="btn btn-inverse" ng-click="editor.onAddThreshold()">
               <i class="fa fa-plus"></i> Add new status
             </button>
           </div>
           <div class="gf-form">
-            <button class="btn btn-inverse" ng-click="ctrl.onEditorRemoveThresholds()">
+            <button class="btn btn-inverse" ng-click="editor.onRemoveThresholds()">
                 <i class="fa fa-minus"></i> Remove all
             </button>
           </div>
@@ -108,12 +108,12 @@
               <label class="gf-form-label">Presets</label>
           </div>
           <div class="gf-form">
-            <button class="btn" ng-click="ctrl.onEditorAddThreeLights()">
+            <button class="btn" ng-click="editor.onAddThreeLights()">
               Red-Yellow-Green
             </button>
           </div>
           <div class="gf-form">            
-            <button class="btn" ng-click="ctrl.onEditorAddSolarized()">
+            <button class="btn" ng-click="editor.onAddSolarized()">
               Solarized
             </button>
           </div>
@@ -144,10 +144,6 @@
       label="Show legend"
       checked="ctrl.panel.legend.show" on-change="ctrl.render()">
     </gf-form-switch>
-    <gf-form-switch class="gf-form" label-class="width-8"
-      label="Show tooltip"
-      checked="ctrl.panel.tooltip.show" on-change="ctrl.render()">
-    </gf-form-switch>
     <gf-form-switch class="gf-form" label-class="width-8"
       label="Show X axis"
       checked="ctrl.panel.xAxis.show" on-change="ctrl.render()">
@@ -159,17 +155,12 @@
 
     <div class="gf-form" ng-show="ctrl.panel.yAxis.show">
       <label class="gf-form-label width-8">Min width</label>
-      <input type="number" ng-model="ctrl.panel.xAxis.minWidth" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="''" ng-change="ctrl.render()" ng-model-onblur>
+      <input type="number" ng-model="ctrl.panel.yAxis.minWidth" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="''" ng-change="ctrl.render()" ng-model-onblur>
     </div>
     <div class="gf-form" ng-show="ctrl.panel.yAxis.show">
       <label class="gf-form-label width-8">Max width</label>
-      <input type="number" ng-model="ctrl.panel.xAxis.maxWidth" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="''" ng-change="ctrl.render()" ng-model-onblur>
+      <input type="number" ng-model="ctrl.panel.yAxis.maxWidth" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="''" ng-change="ctrl.render()" ng-model-onblur>
     </div>
-  </div>
-
-  <div class="section gf-form-group">
-    <h5 class="section-heading">Buckets</h5>
-
     <div class="gf-form" ng-show="ctrl.panel.yAxis.show">
       <label class="gf-form-label width-8">Rows sort</label>
       <div class="gf-form-select-wrapper">
@@ -180,6 +171,11 @@
       </div>
     </div>
 
+  </div>
+
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Buckets</h5>
+
     <gf-form-switch class="gf-form" label-class="width-8"
                     label="Multiple values"
                     checked="ctrl.panel.useMax" on-change="ctrl.render()">
@@ -187,6 +183,13 @@
     <div class="gf-form" ng-show="ctrl.panel.useMax">
       Color for bucket with multiple values is determined by color mode<br/>
     </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-8">Values index</label>
+      <input type="number" class="gf-form-input width-5" placeholder="-1" data-placement="right"
+        bs-tooltip="'Display only values with this index in a bucket. Use -1 to display all values'"
+        ng-model="ctrl.panel.seriesFilterIndex" ng-change="ctrl.refresh()"
+        ng-model-onblur>
+    </div>
 
     <div class="gf-form">
       <label class="gf-form-label width-8">Display nulls</label>
@@ -194,6 +197,7 @@
         <select class="gf-form-input max-width-9" ng-model="ctrl.panel.nullPointMode" ng-options="f for f in ['as empty', 'as zero']" ng-change="ctrl.render()"></select>
       </div>
     </div>
+
     <div class="gf-form">
       <label class="gf-form-label width-8">Min width</label>
       <input type="number" class="gf-form-input width-5" placeholder="5" data-placement="right" bs-tooltip="'Minimal card width for 1/1 resolution in pixels'" ng-model="ctrl.panel.cards.cardMinWidth" ng-change="ctrl.refresh()" ng-model-onblur>
@@ -212,105 +216,4 @@
     </div>
   </div>
 
-  <div class="section gf-form-group width-30">
-    <h5 class="section-heading">Filtering</h5>
-    <div class="gf-form">
-      <label class="gf-form-label width-9">Show only serie with Index</label>
-      <input type="number" class="gf-form-input width-5" placeholder="2" data-placement="right"
-        bs-tooltip="'Filter with the serie index to show the value on graph. Use -1 to get all values'" ng-model="ctrl.panel.seriesFilterIndex" ng-change="ctrl.refresh()"
-        ng-model-onblur>
-    </div>
-  </div>
-
-  <div class="section gf-form-group">
-    <h5 class="section-heading">URL</h5>
-
-    <div class="gf-form">
-      Insert the url to navigate<br />
-    </div>
-
-    <div class="gf-form">
-      <gf-form-switch class="gf-form" label="Show extraSeries Tooltip when clicking elements" label-class="width-12"
-        checked="ctrl.panel.usingUrl" on-change="ctrl.render()"></gf-form-switch>
-    </div>
-
-    <div class="section gf-form-group" ng-if="ctrl.panel.usingUrl">
-      <br>
-      <div class="gf-form-inline">
-        <div class="gf-form"></div>
-        <div class="gf-form">
-          <button class="btn btn-inverse" ng-click="ctrl.onEditorAddUrl()">
-            <i class="fa fa-plus"></i> Add new URL
-          </button>
-        </div>
-        <div class="gf-form">
-          <button class="btn btn-inverse" ng-click="ctrl.onEditorRemoveUrls()">
-            <i class="fa fa-minus"></i> Remove all URLs
-          </button>
-        </div>
-      </div>
-      
-      <div class="gf-form-block" ng-repeat="url in ctrl.panel.urls">
-        <div class="gf-form">
-          <label class="gf-form-label width-2">{{ $index }}</label>
-          <label class="gf-form-label width-2">
-            <a class="pointer" tabindex="1" ng-click="ctrl.onEditorRemoveUrl($index)">
-              <i class="fa fa-trash" />
-            </a>
-          </label>
-          <label class="gf-form-label width-4">Label: </label>
-          <input type="text" class="gf-form-input width-16" placeholder="My URL" data-placement="right"
-            ng-model="url.label" ng-change="ctrl.refresh()">
-          <label class="gf-form-label width-4">URL: </label>
-          <input type="text" class="gf-form-input width-c-50" placeholder="https://www.google.es" data-placement="right"
-            bs-tooltip="'This is the url to be shown when the user clicks on it'" ng-model="url.base_url"
-            ng-change="ctrl.refresh()">
-          <info-popover mode="right-normal">
-            <p>Specify an URL (relative or absolute)</p>
-            <span>
-              Use special variables to specify cell values:
-              <br>
-              <em>$series_label</em> name of the serie
-              <br>
-              <em>$(template.name)</em> name of the templated to be replaced
-              <br>
-              <em>$time</em> append &from...&to on the URL
-              <br>
-              <em>$series_extra</em> use extraSeries value to use it on URL
-            </span>
-          </info-popover>
-        </div>
-        <div class="gf-form">
-          <label class="gf-form-label width-4">Icon: </label>
-          <input type="text" class="gf-form-input width-12" placeholder="FA Icon" data-placement="right"
-            bs-tooltip="'The icon shown on URL'" ng-model="url.icon_fa" ng-change="ctrl.refresh()">
-          <gf-form-switch class="gf-form" label-class="width-8" label="Force lowercase" checked="url.forcelowercase"
-            on-change="ctrl.render()">
-          </gf-form-switch>
-          <gf-form-switch class="gf-form" label-class="width-6" label="Use Extra Serie Data" checked="url.useExtraSeries"
-            on-change="ctrl.render()">
-          </gf-form-switch>
-          <div class="gf-form" ng-if="url.useExtraSeries == true">
-            <label class="gf-form-label width-8">Extra Series Index: </label>
-            <input type="number" class="gf-form-input width-12" placeholder="0" ng-if="url.useExtraSeries == true"
-              data-placement="right" bs-tooltip="'Fields index to use its value on URL using $series_extra. Use -1 to disable it'" ng-model="url.extraSeries.index"
-              ng-change="ctrl.refresh()">
-            
-            <label class="gf-form-label width-9">Type</label>
-            <div class="gf-form-select-wrapper width-8">
-              <select class="input-small gf-form-input" ng-model="url.type" ng-options="s for s in ctrl.extraSeriesFormats" ng-change="ctrl.onChangeType(url)"></select>
-            </div>
-            
-            <div ng-if="url.type === 'Date'">
-              <label class="gf-form-label width-12">Extra Series Date Format: </label>
-              <input type="text" class="gf-form-input width-12" placeholder="YYYY/MM/DD/HH_mm_ss" ng-if="url.useExtraSeries == true"
-                data-placement="right" bs-tooltip="'Date format to transformat extraSeries'" ng-model="url.extraSeries.format"
-                ng-change="ctrl.refresh()">
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-  </div>
 </div>

src/partials/tooltip_editor.html

@@ -0,0 +1,120 @@
+<div class="editor-row">
+  <div class="section gf-form-group">
+    <gf-form-switch class="gf-form" label-class="width-10"
+      label="Show tooltip"
+      tooltip="'Show tooltip when mouse is over the card'"
+      checked="ctrl.panel.tooltip.show" on-change="ctrl.render()">
+    </gf-form-switch>
+    <gf-form-switch class="gf-form" label-class="width-10"
+      label="Freeze on click"
+      tooltip="'Freeze tooltip copy when card is clicked'"
+      checked="ctrl.panel.tooltip.freezeOnClick" on-change="ctrl.render()">
+    </gf-form-switch>
+    <gf-form-switch class="gf-form" label-class="width-10"
+      label="Show items"
+      tooltip="'Show items (urls) in tooltip'"
+      checked="ctrl.panel.tooltip.showItems" on-change="ctrl.render()">
+    </gf-form-switch>
+  </div>
+
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Items</h5>
+
+    <div class="gf-form" ng-show="ctrl.panel.tooltip.items.length == 0">
+      <label class="gf-form-label width-2">0</label>
+      <label class="gf-form-input width-30">No items defined.</label>
+    </div>
+  </div>
+</div>  
+  
+<div>
+  <div ng-repeat="item in ctrl.panel.tooltip.items">
+    <div class="gf-form gf-form--grow">
+        <label class="gf-form-label width-6">
+          URL
+          <info-popover mode="left-normal">
+            <p>Specify an URL (relative or absolute)</p>
+            <span>
+              Use special variables:
+              <br>
+              <em>${__y_label}</em> name of the time series (alias or legend in the query editor).
+              <!-- <br>
+              <em>$(template.name)</em> name of the templated to be replaced -->
+              <br>
+              <em>${__bucket_range}</em> refers to bucket range in the form of '&from=...&to=...'.
+              <br>
+              <em>${__graph_range}</em> refers to graph range in the form of '&from=...&to=...'.
+              <br>
+              <em>${__value}</em> refers to current bucket value or max value if multiple values mode is on.
+              <br>
+              <em>${__value_N}</em> refers to Nth value in current bucket. Value indexes are started from 0. For instance,
+              <em>${__value_1}</em> refers to second value.
+            </span>
+          </info-popover>
+        </label>
+        <input type="text" class="gf-form-input" placeholder="https://www.google.es" data-placement="top"
+          bs-tooltip="'This is the url to be shown when the user clicks on it'" ng-model="item.urlTemplate"
+          ng-change="ctrl.refresh()">
+        <label class="gf-form-label">
+          <i class="fa fa-trash pointer" ng-click="editor.onRemoveUrl($index)"></i>
+        </label>
+    </div>
+
+    <div class="gf-form-inline">
+      <div class="gf-form">
+          <label class="gf-form-label width-4">Icon</label>
+          <label class="gf-form-label width-2">
+            <i class="fa fa-{{item.urlIcon}}"></i>
+          </label>
+          <input
+            class="gf-form-input width-10"
+            type="text"
+            ng-model="item.urlIcon"
+            bs-typeahead="editor.getFAIconClasses"
+            bs-tooltip="'The icon for URL link'"
+            data-placement="top"
+            ng-blur="ctrl.render()"
+            data-min-length="0"
+            data-items="100"
+          />
+      </div>
+      <div class="gf-form">
+          <label class="gf-form-label width-4">Label</label>
+          <input type="text" class="gf-form-input width-16" placeholder="My URL" data-placement="top"
+                 bs-tooltip="'Text for URL link'"
+            ng-model="item.urlText" ng-change="ctrl.refresh()">
+      </div>
+
+      <div class="gf-form">
+        <gf-form-switch class="gf-form" label-class="width-8" label="Lowercase link" checked="item.urlToLowerCase"
+          on-change="ctrl.render()">
+        </gf-form-switch>
+      </div>
+
+      <div class="gf-form">
+          <label class="gf-form-label width-8">Date format</label>
+          <input type="text" class="gf-form-input width-12" placeholder="YYYY/MM/DD/HH_mm_ss"
+            data-placement="top" bs-tooltip="'Date format for __value_date'"
+            bs-typeahead="editor.getValueDateFormats"
+            data-min-length="0"
+            data-items="100"
+            ng-model="item.valueDateFormat"
+            ng-blur="ctrl.render()">
+      </div>
+    </div>
+  </div>
+
+  <div class="gf-form-inline">
+    <div class="gf-form"></div>
+    <div class="gf-form">
+      <button class="btn btn-inverse" ng-click="editor.onAddUrl()">
+        <i class="fa fa-plus"></i> Add URL
+      </button>
+    </div>
+    <div class="gf-form">
+      <button class="btn btn-inverse" ng-click="editor.onRemoveUrls()">
+        <i class="fa fa-minus"></i> Remove all
+      </button>
+    </div>
+  </div>
+</div>

src/plugin.json

@@ -17,7 +17,6 @@
     "links": [
       {"name": "Github", "url": "https://github.com/flant/grafana-statusmap"},
       {"name": "MIT Licence", "url": "https://github.com/flant/grafana-statusmap/blob/master/LICENSE"}
-
     ],
     "screenshots": [
       {"name": "Panel with light theme", "path": "img/flant-statusmap-panel.png"},

src/rendering.ts

@@ -3,11 +3,9 @@ import $ from 'jquery';
 import moment from 'moment';
 import kbn from 'app/core/utils/kbn';
 import {appEvents, contextSrv} from 'app/core/core';
-import {tickStep, getScaledDecimals, getFlotTickSize} from 'app/core/utils/ticks';
 import * as d3 from 'd3';
 import * as d3ScaleChromatic from './libs/d3-scale-chromatic/index';
 import {StatusmapTooltip} from './tooltip';
-import {StatusHeatmapTooltipExtraSeries} from './tooltipextraseries';
 import {AnnotationTooltip} from './annotations';
 import { Bucket, BucketMatrix } from './statusmap_data';
 import { StatusHeatmapCtrl } from './module';
@@ -65,7 +63,6 @@ export class StatusmapRenderer {
   panel: any;
   $heatmap: any;
   tooltip: StatusmapTooltip;
-  tooltipExtraSeries:StatusHeatmapTooltipExtraSeries;
   annotationTooltip: AnnotationTooltip;
   heatmap: any;
   timeRange: any;
@@ -80,7 +77,6 @@ export class StatusmapRenderer {
     // $heatmap is JQuery object, but heatmap is D3
     this.$heatmap = this.elem.find('.statusmap-panel');
     this.tooltip = new StatusmapTooltip(this.$heatmap, this.scope);
-    this.tooltipExtraSeries = new StatusHeatmapTooltipExtraSeries(this.$heatmap, this.scope);
     this.annotationTooltip = new AnnotationTooltip(this.$heatmap, this.scope);
 
     this.yOffset = 0;
@@ -312,8 +308,10 @@ export class StatusmapRenderer {
       this.heatmap.remove();
     }
 
+    // Insert svg as a first child into heatmap_elem
+    // as the frozen tooltip moving logiс assumes that tooltip is the last child.
     this.heatmap = d3.select(heatmap_elem)
-        .append("svg")
+        .insert("svg",":first-child")
         .attr("width", this.width)
         .attr("height", this.height);
 
@@ -428,9 +426,6 @@ export class StatusmapRenderer {
 
   getColorScale(maxValue, minValue = 0) {
     let colorScheme = _.find(this.ctrl.colorSchemes, {value: this.panel.color.colorScheme});
-    // if (!colorScheme) {
-    //
-    // }
     let colorInterpolator = d3ScaleChromatic[colorScheme.value];
     let colorScaleInverted = colorScheme.invert === 'always' ||
         (colorScheme.invert === 'dark' && !contextSrv.user.lightTheme);
@@ -537,26 +532,26 @@ export class StatusmapRenderer {
     return h;
   }
 
-  getCardColor(b: Bucket) {
+  getCardColor(bucket: Bucket) {
     if (this.panel.color.mode === 'opacity') {
       return this.panel.color.cardColor;
     } else if (this.panel.color.mode === 'spectrum') {
-      return this.colorScale(b.value);
+      return this.colorScale(bucket.value);
     } else if (this.panel.color.mode === 'discrete') {
       if (this.panel.seriesFilterIndex != null && this.panel.seriesFilterIndex != -1) {
-        return this.ctrl.discreteExtraSeries.getBucketColorSingle(d.values[this.panel.seriesFilterIndex]);
+        return this.ctrl.discreteExtraSeries.getBucketColorSingle(bucket.values[this.panel.seriesFilterIndex]);
       } else {
-        return this.ctrl.discreteExtraSeries.getBucketColor(b.values);
+        return this.ctrl.discreteExtraSeries.getBucketColor(bucket.values);
       }
     }
   }
 
-  getCardOpacity(b: Bucket) {
+  getCardOpacity(bucket: Bucket) {
-    if (this.panel.nullPointMode === 'as empty' && b.value == null ) {
+    if (this.panel.nullPointMode === 'as empty' && bucket.value == null ) {
       return 0;
     }
     if (this.panel.color.mode === 'opacity') {
-      return this.opacityScale(b.value);
+      return this.opacityScale(bucket.value);
     } else {
       return 1;
     }
@@ -615,17 +610,10 @@ export class StatusmapRenderer {
   onMouseLeave(e) {
     appEvents.emit('graph-hover-clear');
     this.clearCrosshair();
-    //annotationTooltip.destroy();
+    this.annotationTooltip.destroy();
-    if (e.relatedTarget) {
-      if (e.relatedTarget.className == "statusmap-tooltip-extraseries graph-tooltip grafana-tooltip" || e.relatedTarget.className == "graph-tooltip-time" ) {
-      } else {
-        this.tooltipExtraSeries.destroy();
-      }
-    }
-    this.annotationTooltip.destroy(); 
   }
 
-  onMouseMove(event) {
+  onMouseMove(event: MouseEvent) {
     if (!this.heatmap) { return; }
 
     const offset = this.getEventOffset(event);
@@ -646,9 +634,10 @@ export class StatusmapRenderer {
     }
   }
 
-  public onMouseClick(event) {
+  // TODO emit an event and move logic to panelCtrl
-    this.tooltipExtraSeries.show(event)
+  public onMouseClick(e: MouseEvent) {
-    if (this.ctrl.panel.usingUrl) {
+    if (this.ctrl.panel.tooltip.freezeOnClick) {
+      this.tooltip.showFrozen(e);
       this.tooltip.destroy();
     }
   }

src/specs/panel_config_migration.test.ts

@@ -0,0 +1,168 @@
+import { migratePanelConfig } from '../panel_config_migration';
+
+describe('when migrate from config with urls', () => {
+  let panel: any;
+
+  describe('given full panel configuration', () => {
+    const panelConfig = {
+      "cards": {
+        "cardHSpacing": 2,
+        "cardMinWidth": 5,
+        "cardRound": null,
+        "cardVSpacing": 2
+      },
+      "color": {
+        "cardColor": "#b4ff00",
+        "colorScale": "sqrt",
+        "colorScheme": "interpolateGnYlRd",
+        "defaultColor": "#757575",
+        "exponent": 0.5,
+        "mode": "opacity",
+        "thresholds": []
+      },
+      "data": {
+        "decimals": null,
+        "unitFormat": "short"
+      },
+      "datasource": "TestData DB",
+      "gridPos": {
+        "h": 8,
+        "w": 12,
+        "x": 0,
+        "y": 0
+      },
+      "highlightCards": true,
+      "id": 4,
+      "legend": {
+        "show": false
+      },
+      "nullPointMode": "as empty",
+      "seriesFilterIndex": -1,
+      "targets": [
+        {
+          "aggregation": "Last",
+          "csvWave": {
+            "timeStep": 60,
+            "valuesCSV": "0,0,2,2,1,1,3,3"
+          },
+          "decimals": 2,
+          "displayAliasType": "Warning / Critical",
+          "displayType": "Regular",
+          "displayValueWithAlias": "Never",
+          "refId": "A",
+          "scenarioId": "predictable_csv_wave",
+          "stringInput": "",
+          "units": "none",
+          "valueHandler": "Number Threshold"
+        }
+      ],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Panel Title",
+      "tooltip": {
+        "show": true
+      },
+      "type": "flant-statusmap-panel",
+      "urls": [
+        {
+          "base_url": "",
+          "extraSeries": {
+            "index": -1
+          },
+          "forcelowercase": true,
+          "icon_fa": "external-link",
+          "label": "",
+          "tooltip": "",
+          "useExtraSeries": false,
+          "useseriesname": true
+        }
+      ],
+      "useMax": true,
+      "usingUrl": true,
+      "xAxis": {
+        "labelFormat": "%a %m/%d",
+        "show": true
+      },
+      "yAxis": {
+        "maxWidth": -1,
+        "minWidth": -1,
+        "show": true
+      },
+      "yAxisSort": "metrics"
+    }
+
+    beforeEach(() => {
+      panel = Object.assign({}, panelConfig);
+      migratePanelConfig(panel);
+    });
+
+    it('should migrate usingUrls to tooltip.freezeOnClick', () => {
+      expect(panel.usingUrl).toBeUndefined();
+      expect(panel.tooltip).toHaveProperty("freezeOnClick", true);
+      expect(panel.tooltip.freezeOnClick).toBeTruthy();
+    });
+
+    it('should have no urls', () => {
+      expect(panel.urls).toBeUndefined();
+    });
+
+    it('should have empty items in tooltip', () => {
+      expect(panel.tooltip).toHaveProperty("items", []);
+      expect(panel.tooltip.items).toHaveLength(0);
+    });
+  });
+
+  describe("given configuration with non-empty base_url", () => {
+
+    describe("with variables", () => {
+      const panelConfig = {
+        "tooltip": {
+          "show": true
+        },
+        "urls": [
+          {
+            "base_url": "https://google.com/$series_label$time",
+            "extraSeries": {
+              "index": -1
+            },
+            "forcelowercase": true,
+            "icon_fa": "external-link",
+            "label": "google",
+            "tooltip": "",
+            "useExtraSeries": false,
+            "useseriesname": true,
+          },
+          {
+            "base_url": "example.com/$series_extra",
+            "extraSeries": {
+              "format": "YYYY/MM/DD/HH_mm_ss",
+              "index": -1
+            },
+            "forcelowercase": true,
+            "icon_fa": "external-link",
+            "label": "DateLink",
+            "useExtraSeries": true,
+          }
+        ]
+      };
+      beforeEach(() => {
+        panel = Object.assign({}, panelConfig);
+        migratePanelConfig(panel);
+      });
+
+      it("should have equal size of tooltip.items", () => {
+        expect(panel.tooltip).toHaveProperty("items");
+        expect(panel.tooltip.items).toHaveLength(panelConfig.urls.length);
+      });
+      it("should replace time variable with __url_time_range", () => {
+        expect(panel.tooltip.items[0].urlTemplate).toContain("${__url_time_range}");
+      });
+      it("should replace series_label variable with __y_label", () => {
+        expect(panel.tooltip.items[0].urlTemplate).toContain("${__y_label}");
+      });
+      it("should replace series_extra variable with __value_date", () => {
+        expect(panel.tooltip.items[1].urlTemplate).toContain("${__value_date}");
+      });
+    });
+  });
+});

src/tooltip.ts

@@ -7,22 +7,29 @@ import { StatusHeatmapCtrl } from './module';
 let TOOLTIP_PADDING_X = 30;
 let TOOLTIP_PADDING_Y = 5;
 
+// TODO rename file to tooltip_ctrl.ts
+// TODO move DefaultValueDateFormat into tooltip.ts, as it used in several places (migration, partial and tooltip render)
+let DefaultValueDateFormat = 'YYYY/MM/DD/HH_mm_ss';
+
 export class StatusmapTooltip {
   tooltip: any;
   scope: any;
   dashboard: any;
   panelCtrl: StatusHeatmapCtrl;
   panel: any;
-  heatmapPanel: any;
+  panelElem: any;
   mouseOverBucket: any;
   originalFillColor: any;
 
+  tooltipWidth: number;
+  tooltipFrozen: any;
+
   constructor(elem: any, scope: any) {
     this.scope = scope;
     this.dashboard = scope.ctrl.dashboard;
     this.panelCtrl = scope.ctrl;
     this.panel = scope.ctrl.panel;
-    this.heatmapPanel = elem;
+    this.panelElem = elem;
     this.mouseOverBucket = false;
     this.originalFillColor = null;
 
@@ -35,7 +42,7 @@ export class StatusmapTooltip {
 
     if (!this.tooltip) {
       this.add();
-      this.move(e);
+      this.move(e, this.tooltip);
     }
   }
 
@@ -46,13 +53,13 @@ export class StatusmapTooltip {
   onMouseMove(e) {
     if (!this.panel.tooltip.show) { return; }
 
-    this.move(e);
+    this.move(e, this.tooltip);
   }
 
   add() {
     this.tooltip = d3.select("body")
       .append("div")
-      .attr("class", "statusmap-tooltip graph-tooltip grafana-tooltip");
+      .attr("class", "graph-tooltip statusmap-tooltip");
   }
 
   destroy() {
@@ -63,13 +70,37 @@ export class StatusmapTooltip {
     this.tooltip = null;
   }
 
-  show(pos) {
+  removeFrozen() {
+    if (this.tooltipFrozen) {
+      this.tooltipFrozen.remove();
+      this.tooltipFrozen = null
+    }
+  }
+
+  showFrozen(pos: any) {
+    this.removeFrozen();
+    this.tooltipFrozen = d3.select(this.panelElem[0])
+        .append("div")
+        .attr("class", "graph-tooltip statusmap-tooltip statusmap-tooltip-frozen");
+    this.displayTooltip(pos, this.tooltipFrozen, true);
+    this.moveRelative(pos, this.tooltipFrozen);
+  }
+
+  show(pos: any) {
     if (!this.panel.tooltip.show || !this.tooltip) { return; }
-    
+
     // TODO support for shared tooltip mode
     if (pos.panelRelY) {
       return;
     }
+
+    this.displayTooltip(pos, this.tooltip, false);
+
+    this.move(pos, this.tooltip);
+  }
+
+  // Retrieve bucket and create html content inside tooltip’s div element.
+  displayTooltip(pos: any, tooltip: any, frozen: boolean) {
     let cardEl = d3.select(pos.target);
     let yid = cardEl.attr('yid');
     let xid = cardEl.attr('xid');
@@ -80,36 +111,44 @@ export class StatusmapTooltip {
     }
 
     let timestamp = bucket.to;
-    let name = bucket.yLabel;
+    let yLabel = bucket.yLabel;
     let value = bucket.value;
     let values = bucket.values;
-    let tooltipTimeFormat = 'YYYY-MM-DD HH:mm:ss';
+    // TODO create option for this formatting.
-    let time = this.dashboard.formatDate(+timestamp, tooltipTimeFormat);
+    let tooltipTimeFormat:string = 'YYYY-MM-DD HH:mm:ss';
+    let time: Date = this.dashboard.formatDate(+timestamp, tooltipTimeFormat);
 
-    let tooltipHtml = `<div class="graph-tooltip-time">${time}</div>
+    // Close button for the frozen tooltip.
-      <div class="statusmap-histogram"></div>`;
+    let tooltipClose:string = ``;
+    if (frozen) {
+      tooltipClose = `
+<a class="pointer pull-right small tooltip-close">
+      <i class="fa fa-remove"></i>
+</a>
+`;
+    }
 
-    let statuses;
+    let tooltipHtml:string = `<div class="graph-tooltip-time">${time}${tooltipClose}</div>`;
 
     if (this.panel.color.mode === 'discrete') {
+      let statuses;
       if (this.panel.seriesFilterIndex >= 0) {
         statuses = this.panelCtrl.discreteExtraSeries.convertValueToTooltips(value);
       } else {
         statuses = this.panelCtrl.discreteExtraSeries.convertValuesToTooltips(values);
       }
       
-      let statusesHtml = '';
+      let statusTitle:string = "status:";
-      if (statuses.length === 1) {
+      if (statuses.length > 1) {
-        statusesHtml = "status:";
+        statusTitle = "statuses:";
-      } else if (statuses.length > 1) {
-        statusesHtml = "statuses:";
       }
       tooltipHtml += `
       <div>
-        name: <b>${name}</b> <br>
+        name: <b>${yLabel}</b>
-        ${statusesHtml}
+        <br>
+        <span>${statusTitle}</span>
         <ul>
-          ${_.join(_.map(statuses, v => `<li style="background-color: ${v.color}" class="discrete-item">${v.tooltip}</li>`), "")}
+          ${_.join(_.map(statuses, v => `<li style="background-color: ${v.color}; text-align:center" class="discrete-item">${v.tooltip}</li>`), "")}
         </ul>
       </div>`;
     } else {
@@ -120,7 +159,7 @@ export class StatusmapTooltip {
       </div>`;
       } else {
         tooltipHtml += `<div>
-      name: <b>${name}}</b> <br>
+      name: <b>${name}</b> <br>
       values:
       <ul>
         ${_.join(_.map(values, v => `<li>${v}</li>`), "")}
@@ -129,14 +168,73 @@ export class StatusmapTooltip {
       }
     }
 
-    //   "Ambiguous bucket state: Multiple values!";
+    tooltipHtml += `<div class="statusmap-histogram"></div>`;
+
+    if (this.panel.tooltip.showItems) {
+      // Additional information: urls, etc.
+      // Clone additional items
+      let items: any = JSON.parse(JSON.stringify(this.panel.tooltip.items));
+
+      let scopedVars = {};
+
+      let valueVar;
+      for (let i = 0; i < bucket.values.length; i++) {
+        valueVar = `__value_${i}`;
+        scopedVars[valueVar] = {value: bucket.values[i] };
+      }
+      scopedVars[`__value`] = {value: bucket.value};
+      scopedVars[`__y_label`] = {value: yLabel};
+      // Grafana 7.0 compatible
+      scopedVars[`__url_time_range`] = {value: this.panelCtrl.retrieveTimeVar()};
+
+      for (let item of items) {
+        if (_.isEmpty(item.urlTemplate)) {
+          item.link = "#";
+        } else {
+          let dateFormat = item.valueDateFormat;
+          if (dateFormat == '') {
+            dateFormat = DefaultValueDateFormat;
+          }
+          let valueDateVar;
+          for (let i = 0; i < bucket.values.length; i++) {
+            valueDateVar = `__value_${i}_date`;
+            scopedVars[valueDateVar] = {value: this.dashboard.formatDate(+bucket.values[i], dateFormat)};
+          }
+          scopedVars[`__value_date`] = {value: this.dashboard.formatDate(+bucket.value, dateFormat)};
+
+          item.link = this.panelCtrl.templateSrv.replace(item.urlTemplate, scopedVars)
+
+          // Force lowercase for link
+          if (item.urlToLowerCase) {
+            item.link = item.link.toLowerCase();
+          }
+        }
+
+        item.label = item.urlText;
+        if (_.isEmpty(item.label)) {
+          item.label = _.isEmpty(item.urlTemplate) ? "Empty URL" : _.truncate(item.link);
+        }
+      }
+
+      tooltipHtml += _.join(_.map(items, v => `
+          <div>
+            <a href="${v.link}" target="_blank">
+            <div class="dashlist-item">
+            <p class="dashlist-link dashlist-link-dash-db">
+              <span style="word-wrap: break-word;" class="dash-title">${v.label}</span><span class="dashlist-star">
+              <i class="fa fa-${v.urlIcon}"></i>
+            </span></p> </div></a><div>`), "\n");
+
+    }
+
+    // Ambiguous state: there multiple values in bucket!
+    // TODO rename useMax to expectMultipleValues
     if (!this.panel.useMax && bucket.multipleValues) {
       tooltipHtml += `<div><b>Error:</b> ${this.panelCtrl.dataWarnings.multipleValues.title}</div>`;
     }
 
     // Discrete mode errors
     if (this.panel.color.mode === 'discrete') {
-
       if (bucket.noColorDefined) {
         let badValues = this.panelCtrl.discreteExtraSeries.getNotColoredValues(values);
         tooltipHtml += `<div><b>Error:</b> ${this.panelCtrl.dataWarnings.noColorDefined.title}
@@ -145,20 +243,32 @@ export class StatusmapTooltip {
           ${_.join(_.map(badValues, v => `<li>${v}</li>`), "")}
         </ul>
         </div>`;
-
       }
     }
 
-    this.tooltip.html(tooltipHtml);
+    tooltip.html(tooltipHtml);
 
-    this.move(pos);
+    // Assign mouse event handlers for "frozen" tooltip.
+    if (frozen) {
+      // Stop propagation mouse events up to parents to allow interaction with frozen tooltip’s elements.
+      tooltip
+          .on("click", function(){d3.event.stopPropagation(); })
+          .on("mousedown", function(){d3.event.stopPropagation(); })
+          .on("mouseup", function(){d3.event.stopPropagation(); });
+
+      // Activate close button
+      tooltip.select("a.tooltip-close")
+          .on("click", this.removeFrozen.bind(this));
+    }
   }
 
-  move(pos) {
+  // Move tooltip as absolute positioned element.
-    if (!this.tooltip) { return; }
+  move(pos, tooltip) {
+    if (!tooltip) { return; }
 
-    let elem = $(this.tooltip.node())[0];
+    let elem = $(tooltip.node())[0];
     let tooltipWidth = elem.clientWidth;
+    this.tooltipWidth = tooltipWidth;
     let tooltipHeight = elem.clientHeight;
 
     let left = pos.pageX + TOOLTIP_PADDING_X;
@@ -172,8 +282,43 @@ export class StatusmapTooltip {
       top = pos.pageY - tooltipHeight - TOOLTIP_PADDING_Y;
     }
 
-    return this.tooltip
+    return tooltip
       .style("left", left + "px")
       .style("top", top + "px");
   }
+
+  // Move tooltip relative to svg element of panel.
+  moveRelative(pos, tooltip) {
+    if (!tooltip) { return; }
+
+    let panelX = pos.pageX - this.panelElem.offset().left;
+    let panelY = pos.pageY - this.panelElem.offset().top;
+    let panelWidth = this.panelElem.width();
+    let panelHeight = this.panelElem.height();
+
+    // 'position: relative' sets tooltip’s width to 100% of panel element.
+    // Restore width from floating tooltip and add more space for 'Close' button.
+    let tooltipWidth = this.tooltipWidth + 25;
+
+    // Left property is clamped so tooltip stays inside panel bound box.
+    let tooltipLeft = panelX + TOOLTIP_PADDING_X;
+    if (tooltipLeft + tooltipWidth > panelWidth) {
+      tooltipLeft = panelWidth - tooltipWidth;
+    }
+    if (tooltipLeft < 0 ) {
+      tooltipLeft = 0;
+    }
+
+    // Frozen tooltip’s root element is appended next to panel’s svg element,
+    // so top property is adjusted to move tooltip’s root element
+    // up to the mouse pointer position.
+    let tooltipTop = -(panelHeight - panelY + TOOLTIP_PADDING_Y);
+
+    return tooltip
+      .style("left", tooltipLeft + "px")
+      .style("top", tooltipTop + "px")
+      .style("width", tooltipWidth + "px");
+  }
+
+
 }

src/tooltip_editor.ts

@@ -0,0 +1,61 @@
+import { StatusHeatmapCtrl } from './module';
+
+let emptyTooltipItem = {
+  urlText: '',
+  urlTemplate: '',
+  urlIcon: 'external-link',
+  urlToLowerCase: true,
+  valueDateFormat: ''
+};
+
+export class TooltipEditorCtrl {
+  panel: any;
+  panelCtrl: StatusHeatmapCtrl;
+
+  constructor($scope: any) {
+    $scope.editor = this;
+    this.panelCtrl = $scope.ctrl as StatusHeatmapCtrl;
+    this.panel = this.panelCtrl.panel;
+  }
+
+  render() {
+    this.panelCtrl.render();
+  }
+
+  onAddUrl() {
+    this.panel.tooltip.items.push(Object.assign({}, emptyTooltipItem));
+    this.render();
+  }
+
+  onRemoveUrl(index: number) {
+    this.panel.tooltip.items.splice(index, 1);
+    this.render();
+  }
+
+  onRemoveUrls() {
+    this.panel.tooltip.items = [];
+    this.render();
+  }
+
+  getFAIconClasses() {
+    return ['external-link', 'plus', 'anchor', 'ban', 'globe', 'gear', 'cloud', 'download', 'cloud-download'];
+  }
+
+  getValueDateFormats() {
+    return [
+        'YYYY/MM/DD/HH_mm_ss',
+        'YYYYMMDDHHmmss',
+        'YYYY-MM-DD-HH-mm-ss'
+        ];
+  }
+}
+
+export function tooltipEditorCtrl() {
+  'use strict';
+  return {
+    restrict: 'E',
+    scope: true,
+    templateUrl: 'public/plugins/flant-statusmap-panel/partials/tooltip_editor.html',
+    controller: TooltipEditorCtrl,
+  };
+}

src/tooltipextraseries.ts

@@ -1,222 +0,0 @@
-import d3 from 'd3';
-import _ from 'lodash';
-import $ from 'jquery';
-import { ExtraSeriesFormatValue } from './extra_series_format';
-
-const TOOLTIP_PADDING_X = -50;
-const TOOLTIP_PADDING_Y = 5;
-
-export class StatusHeatmapTooltipExtraSeries {
-    scope: any;
-    dashboard: any;
-    panelCtrl: any;
-    panel: any;
-    heatmapPanel: any;
-    mouseOverBucket: any;
-    originalFillColor: any;
-    tooltip: any;
-
-    constructor(elem: any, scope: any) {
-        this.scope = scope;
-        this.dashboard = scope.ctrl.dashboard;
-        this.panelCtrl = scope.ctrl;
-        this.panel = scope.ctrl.panel;
-        this.heatmapPanel = elem;
-        this.mouseOverBucket = false;
-        this.originalFillColor = null;
-    
-        elem.on("mouseover", this.onMouseOver.bind(this));
-        elem.on("click", this.onMouseClick.bind(this));
-    }
-
-        public onMouseOver(e: Event) {
-            if (!this.panel.usingUrl || !this.scope.ctrl.data || _.isEmpty(this.scope.ctrl.data)) { 
-                return; 
-            }
-        }
-
-        public onMouseClick(e: Event) {
-            if (!this.panel.usingUrl) { 
-                return; 
-            }
-
-            this.destroy();
-            this.add();
-        }
-
-        public add() {
-            this.tooltip = d3.select("body")
-              .append("div")
-              .attr("class", "statusmap-tooltip-extraseries graph-tooltip grafana-tooltip");
-        }
-
-        public destroy() {
-            if (this.tooltip) {
-              this.tooltip.remove();
-            }
-        
-            this.tooltip = null;
-        }
-
-        public show(pos: any) {
-            if (!this.panel.usingUrl || !this.tooltip) { 
-                return; 
-            }
-
-            // shared tooltip mode
-            if (pos.panelRelY) {
-                return;
-            }
-
-            let cardId: any = d3.select(pos.target).attr('cardId');
-            
-            if (!cardId) {
-              this.destroy();
-              
-              return;
-            }
-            
-            let card: any = this.panelCtrl.cardsData.cards[cardId];
-            
-            if (!card) {
-              this.destroy();
-              
-              return;
-            } 
-            
-            if (card.value == null) {
-                this.destroy();
-                
-                return;
-              }
-              
-            let x: any = card.x;
-            let y: any = card.y;
-            let value: any = card.value;
-            let values: any = card.values;
-            let tooltipTimeFormat: string = 'YYYY-MM-DD HH:mm:ss';
-            let time: Date = this.dashboard.formatDate(+x, tooltipTimeFormat);
-          
-            let tooltipHtml: string = `<div class="graph-tooltip-time">${time}</div>`              
-        
-            if (this.panel.color.mode === 'discrete') {
-            let statuses: any = "";
-                
-            if (this.panelCtrl.panel.seriesFilterIndex == -1) {
-              statuses = this.panelCtrl.discreteExtraSeries.convertValuesToTooltips(values);
-            } else {
-                statuses = this.panelCtrl.discreteExtraSeries.convertValueToTooltips(value);
-            }
-          
-            tooltipHtml += `
-                <div>
-                name: <b>${y}</b>
-                <div>
-                <br>
-                <span>status:</span>
-                <ul>
-                  ${_.join(_.map(statuses, v => `<p style="background-color: ${v.color}; text-align:center" class="discrete-item">${v.tooltip}</p>`), "")}
-                </ul>
-                </div>      
-                </div> <br>`;
-            }
-              
-            tooltipHtml += `<div class="statusmap-histogram"></div>`;
-              
-            let urls: any = this.panelCtrl.panel.urls
-            let rtime: any = this.panelCtrl.retrieveTimeVar();              
-
-            let curl: any = JSON.parse(JSON.stringify(urls));
-
-            for (let i = 0; i < curl.length; i++) {
-                //Change name var
-                curl[i].base_url = _.replace(curl[i].base_url, /\$series_label/g, y)
-                //Set up extra series
-                if (curl[i].useExtraSeries == true) {
-                  let tf: any = curl[i].extraSeries.format
-                  let vh: any = card.values[curl[i].extraSeries.index]
-                  //let extraSeries: any = this.dashboard.formatDate(+vh, tf)
-                  let series_extra: any = this.formatExtraSeries(vh,tf);
-
-                  curl[i].base_url = _.replace(curl[i].base_url, /\$series_extra/g, series_extra)
-                }
-                //Change time var
-                curl[i].base_url = _.replace(curl[i].base_url, /\$time/g, rtime)
-          
-                //Replace vars
-                curl[i].base_url = this.panelCtrl.renderLink(curl[i].base_url, this.panelCtrl.variableSrv.variables)
-            }
-              
-            if (this.panelCtrl.panel.usingUrl == true) {
-                tooltipHtml += `
-                <div bs-tooltip='Settings' data-placement="right">
-                  ${_.join(_.map(curl, v => `<div ><a   href="${v.forcelowercase ? v.base_url.toLowerCase() : v.base_url}" target="_blank"><div class="dashlist-item">
-                  <p  class="dashlist-link dashlist-link-dash-db"><span style="word-wrap: break-word;" class="dash-title">${v.label ? v.label : (v.base_url != "" ? _.truncate(v.base_url) : "Empty URL" )}</span><span class="dashlist-star">
-                        <i class="fa fa-${v.icon_fa}"></i>
-                      </span></p> </div></a><div>`), "")}
-                </div> <br>`;
-            }
-
-            //   "Ambiguous bucket state: Multiple values!";
-            if (!this.panel.useMax && card.multipleValues) {
-                tooltipHtml += `<div><b>Error:</b> ${this.panelCtrl.dataWarnings.multipleValues.title}</div>`;
-            }
-
-            // Discrete mode errors
-            if (this.panel.color.mode === 'discrete') {
-                if (card.noColorDefined) {
-                    let badValues: any = this.panelCtrl.discreteExtraSeries.getNotColoredValues(values);
-                    tooltipHtml += `<div><b>Error:</b> ${this.panelCtrl.dataWarnings.noColorDefined.title}
-                    <br>not colored values:
-                    <ul>
-                    ${_.join(_.map(badValues, v => `<li>${v}</li>`), "")}
-                    </ul>
-                    </div>`;
-                }
-            }
-
-            this.tooltip.html(tooltipHtml);
-
-            this.move(pos);
-        }
-
-        public formatExtraSeries (value: any, type: any) {
-            let extraSeries: any = '';
-
-            switch(type) {
-                case ExtraSeriesFormatValue.Date:
-                    extraSeries = this.dashboard.formatDate(+value, type);
-                    return extraSeries;
-                case ExtraSeriesFormatValue.Raw:
-                    extraSeries = value;
-                    return extraSeries;
-                default:
-                    return extraSeries;
-            }
-        }
-
-        public move(pos: any) {
-            if (!this.tooltip) { 
-                return; 
-            }
-
-            let elem: any = $(this.tooltip.node())[0];
-            let tooltipWidth = elem.clientWidth;
-            let tooltipHeight = elem.clientHeight;
-
-            let left = pos.pageX + TOOLTIP_PADDING_X;
-            let top = pos.pageY + TOOLTIP_PADDING_Y;
-
-            if (pos.pageX + tooltipWidth + 40 > window.innerWidth) {
-                left = pos.pageX - tooltipWidth - TOOLTIP_PADDING_X;
-            }
-          
-            if (pos.pageY - window.pageYOffset + tooltipHeight + 20 > window.innerHeight) {
-                top = pos.pageY - tooltipHeight - TOOLTIP_PADDING_Y;
-            }
-
-            return this.tooltip
-              .style("left", left + "px")
-              .style("top", top + "px");
-        }
-}