feat: pagination

Continuation of PR #93.

dist/css/statusmap.dark.css

@@ -69,6 +69,9 @@
 .width-c-70 {
   width: 70rem !important; }
 
+.pagination-buttons {
+  text-align: right; }
+
 .status-heatmap-legend-wrapper {
   margin: 0 10px; }
   .status-heatmap-legend-wrapper svg {

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;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",
+"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,mBAAmB;EAAC,UAAU,EAAE,KAAK;;AAErC,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,EC7HG,OAAO;ID8Hd,KAAK,EC9HE,OAAO;ID+Hd,SAAS,EE/HE,IAAI;EFkIjB,+CAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,ECnIM,OAAO;EDsIrB,kDAAQ;IACN,OAAO,EAAE,GAAG;IACZ,MAAM,ECxIM,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

@@ -69,6 +69,9 @@
 .width-c-70 {
   width: 70rem !important; }
 
+.pagination-buttons {
+  text-align: right; }
+
 .status-heatmap-legend-wrapper {
   margin: 0 10px; }
   .status-heatmap-legend-wrapper svg {

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;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",
+"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,mBAAmB;EAAC,UAAU,EAAE,KAAK;;AAErC,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,EC7HG,OAAO;ID8Hd,KAAK,EC9HE,OAAO;ID+Hd,SAAS,EE/HE,IAAI;EFkIjB,+CAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,ECnIM,OAAO;EDsIrB,kDAAQ;IACN,OAAO,EAAE,GAAG;IACZ,MAAM,ECxIM,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

@@ -0,0 +1,28 @@
+"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

@@ -0,0 +1 @@
+{"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.html

@@ -1,4 +1,13 @@
 <div class="status-heatmap-wrapper">
+	<div class="clearfix"></div>
+	<br>
+	<div class="gf-form" ng-if="ctrl.panel.usingPagination">
+		<label class="gf-form-label width-9">Items per page</label>
+		<input type="number" class="gf-form-input width-5" placeholder="2" data-placement="right"
+		bs-tooltip="'Number of items to show per page.'" ng-model="ctrl.pageSizeViewer" ng-change="ctrl.changePaginationSize()"
+		ng-model-onblur>
+	</div>
+
 	<div class="status-heatmap-canvas-wrapper">
 
 		<div class="datapoints-warning"  ng-if="ctrl.multipleValues || ctrl.noColorDefined || ctrl.noDatapoints">
@@ -7,8 +16,19 @@
 			<span class="small" ng-if="ctrl.noDatapoints" bs-tooltip="'{{ctrl.dataWarnings.noDatapoints.tip}}'">{{ctrl.dataWarnings.noDatapoints.title}}</span>
 		</div>
 
-
+		<div class="status-heatmap-panel" ng-dblclick="ctrl.zoomOut()"></div>
-		<div class="statusmap-panel" ng-dblclick="ctrl.zoomOut()"></div>
+	</div>
+	<div class="pagination" ng-if="ctrl.panel.usingPagination">
+		Showing {{ctrl.firstPageElement}} to {{ctrl.lastPageElement}} of {{ctrl.totalElements}} entries
+		<div class="pagination-buttons">
+			<button class="btn btn-inverse" ng-disabled="ctrl.currentPage == 0" ng-click="ctrl.currentPage=ctrl.currentPage-1; ctrl.render()">
+				Previous
+			</button>
+			{{ctrl.currentPage+1}}/{{ctrl.numberOfPages}}
+			<button class="btn btn-inverse" ng-disabled="ctrl.currentPage >= ctrl.cardsData.targets.length/ctrl.pageSizeViewer - 1 || ctrl.numberOfPages == 0" ng-click="ctrl.currentPage=ctrl.currentPage+1; ctrl.render()">
+				Next
+			</button>
+		</div>
 	</div>
 	<div class="status-heatmap-legend-wrapper" ng-if="ctrl.panel.legend.show">
 		<status-heatmap-legend></status-heatmap-legend>

dist/module.js

@@ -192,6 +192,12 @@ System.register(["lodash", "./color_legend", "./options_editor", "./tooltip_edit
 
           _defineProperty(_assertThisInitialized(_this), "unitFormats", void 0);
 
+          _defineProperty(_assertThisInitialized(_this), "cardsDataComplete", void 0);
+
+          _defineProperty(_assertThisInitialized(_this), "cardsDataLabelsComplete", void 0);
+
+          _defineProperty(_assertThisInitialized(_this), "ticksWhenPaginating", void 0);
+
           _defineProperty(_assertThisInitialized(_this), "dataWarnings", {});
 
           _defineProperty(_assertThisInitialized(_this), "multipleValues", void 0);
@@ -206,6 +212,18 @@ System.register(["lodash", "./color_legend", "./options_editor", "./tooltip_edit
 
           _defineProperty(_assertThisInitialized(_this), "annotationsPromise", void 0);
 
+          _defineProperty(_assertThisInitialized(_this), "pageSizeViewer", 15);
+
+          _defineProperty(_assertThisInitialized(_this), "currentPage", 0);
+
+          _defineProperty(_assertThisInitialized(_this), "numberOfPages", 1);
+
+          _defineProperty(_assertThisInitialized(_this), "totalElements", 0);
+
+          _defineProperty(_assertThisInitialized(_this), "firstPageElement", 1);
+
+          _defineProperty(_assertThisInitialized(_this), "lastPageElement", 5);
+
           _defineProperty(_assertThisInitialized(_this), "panelDefaults", {
             // datasource name, null = default datasource
             datasource: null,
@@ -251,7 +269,11 @@ System.register(["lodash", "./color_legend", "./options_editor", "./tooltip_edit
             yAxisSort: 'metrics',
             highlightCards: true,
             useMax: true,
-            seriesFilterIndex: -1
+            seriesFilterIndex: -1,
+            usingPagination: false,
+            pageSize: 15,
+            allowAllElements: false,
+            availableValues: []
           });
 
           if (!Polygrafill.hasAppEventCompatibleEmitter(_this.events)) {
@@ -265,6 +287,12 @@ System.register(["lodash", "./color_legend", "./options_editor", "./tooltip_edit
 
           _.defaultsDeep(_this.panel, _this.panelDefaults);
 
+          if (_this.panel.usingPagination) {
+            _this.setPaginationSize(_this.panel.pageSize);
+
+            _this.setCurrentPage(0);
+          }
+
           _this.opacityScales = opacityScales;
           _this.colorModes = colorModes;
           _this.colorSchemes = colorSchemes; // default graph width for discrete card width calculation
@@ -317,6 +345,79 @@ System.register(["lodash", "./color_legend", "./options_editor", "./tooltip_edit
           value: function onRenderComplete(data) {
             this.graph.chartWidth = data.chartWidth;
             this.renderingCompleted();
+          }
+        }, {
+          key: "changeDefaultPaginationSize",
+          value: function changeDefaultPaginationSize(defaultPageSize) {
+            this.pageSizeViewer = defaultPageSize;
+            this.render();
+            this.refresh();
+          }
+        }, {
+          key: "changePaginationSize",
+          value: function changePaginationSize() {
+            if (this.pageSizeViewer <= 0) {
+              this.pageSizeViewer = 1;
+            }
+
+            this.currentPage = 0;
+            this.render();
+            this.refresh();
+          }
+        }, {
+          key: "getPaginationSize",
+          value: function getPaginationSize() {
+            return this.pageSizeViewer;
+          }
+        }, {
+          key: "setPaginationSize",
+          value: function setPaginationSize(pageSize) {
+            this.pageSizeViewer = pageSize;
+          }
+        }, {
+          key: "getCurrentPage",
+          value: function getCurrentPage() {
+            return this.currentPage;
+          }
+        }, {
+          key: "setCurrentPage",
+          value: function setCurrentPage(currentPage) {
+            this.currentPage = currentPage;
+          }
+        }, {
+          key: "getNumberOfPages",
+          value: function getNumberOfPages() {
+            return this.numberOfPages;
+          }
+        }, {
+          key: "getTotalElements",
+          value: function getTotalElements() {
+            return this.totalElements;
+          }
+        }, {
+          key: "setTotalElements",
+          value: function setTotalElements(totalElements) {
+            this.totalElements = totalElements;
+          }
+        }, {
+          key: "getFirstPageElement",
+          value: function getFirstPageElement() {
+            return this.firstPageElement;
+          }
+        }, {
+          key: "setFirstPageElement",
+          value: function setFirstPageElement(firstPageElement) {
+            this.firstPageElement = firstPageElement;
+          }
+        }, {
+          key: "getLastPageElement",
+          value: function getLastPageElement() {
+            return this.lastPageElement;
+          }
+        }, {
+          key: "setLastPageElement",
+          value: function setLastPageElement(lastPageElement) {
+            this.lastPageElement = lastPageElement;
           } // getChartWidth returns an approximation of chart canvas width or
           // a saved value calculated during a render.
 
@@ -448,6 +549,13 @@ System.register(["lodash", "./color_legend", "./options_editor", "./tooltip_edit
             this.bucketMatrix = this.convertDataToBuckets(dataList, this.range.from.valueOf(), this.range.to.valueOf(), this.intervalMs, true);
             this.noDatapoints = this.bucketMatrix.noDatapoints;
 
+            if (this.panel.usingPagination && this.cardsData.targets) {
+              this.numberOfPages = Math.ceil(this.cardsData.targets.length / this.pageSizeViewer);
+              this.totalElements = this.cardsData.targets.length;
+            } else {
+              this.setPaginationSize(this.cardsData.targets.length);
+            }
+
             if (this.annotationsPromise) {
               this.annotationsPromise.then(function (result) {
                 _this3.loading = false; //this.alertState = result.alertState;
@@ -463,7 +571,8 @@ System.register(["lodash", "./color_legend", "./options_editor", "./tooltip_edit
                 _this3.loading = false;
                 _this3.annotations = [];
 
-                _this3.render();
+                _this3.render(); // this.render(this.data);???
+
               });
             } else {
               this.loading = false;
@@ -477,6 +586,11 @@ System.register(["lodash", "./color_legend", "./options_editor", "./tooltip_edit
             this.addEditorTab('Options', optionsEditorCtrl, 2);
             this.addEditorTab('Tooltip', tooltipEditorCtrl, 3);
             this.unitFormats = kbn.getUnitFormats();
+          }
+        }, {
+          key: "paginate",
+          value: function paginate() {
+            this.refresh();
           } // onRender will be called before StatusmapRenderer.onRender.
           // Decide if warning should be displayed over cards.
 

dist/partials/options_editor.html

@@ -216,4 +216,119 @@
     </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">Pagination options</h5>
+    <div class="gf-form">
+      <gf-form-switch class="gf-form" label="Paginate elements" label-class="width-12"
+      checked="ctrl.panel.usingPagination" on-change="ctrl.paginate()"></gf-form-switch>
+    </div>
+    <div class="gf-form" ng-if="ctrl.panel.usingPagination">
+      <label class="gf-form-label width-9">Items per Page by default</label>
+      <input type="number" class="gf-form-input width-5" placeholder="2" data-placement="right"
+        bs-tooltip="Number of items to show by default" ng-model="ctrl.panel.pageSize" ng-change="ctrl.changeDefaultPaginationSize(ctrl.panel.pageSize)"
+        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/rendering.js

@@ -5,6 +5,14 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
 
   var _, $, moment, kbn, appEvents, contextSrv, d3, d3ScaleChromatic, StatusmapTooltip, AnnotationTooltip, renderComplete, CoreEvents, PanelEvents, 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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
+
+  function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+
+  function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+
+  function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+
   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; }
@@ -238,7 +246,11 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
                 height = parseInt(height.replace('px', ''), 10);
               }
 
-              height -= this.panel.legend.show ? 32 : 10; // bottom padding and space for legend. Change margin in .status-heatmap-color-legend !
+              if (this.panel.usingPagination) {
+                height -= this.panel.legend.show ? 140 : 10; // bottom padding and space for legend. Change margin in .status-heatmap-color-legend !
+              } else {
+                height -= this.panel.legend.show ? 50 : 10; // bottom padding and space for legend. Change margin in .status-heatmap-color-legend !
+              }
 
               this.$heatmap.css('height', height + 'px');
               return true;
@@ -305,8 +317,10 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
         }, {
           key: "getYScale",
           value: function getYScale(ticks) {
-            var range = [];
+            var range = []; //let step = this.chartHeight / ticks.length;
-            var step = this.chartHeight / ticks.length; // svg has y=0 on the top, so top card should have a minimal value in range
+
+            console.log('GETYSCALE - RENDERING', this.ctrl.getPaginationSize());
+            var step = this.chartHeight / this.ctrl.getPaginationSize(); // svg has y=0 on the top, so top card should have a minimal value in range
 
             range.push(step);
 
@@ -320,8 +334,10 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
         }, {
           key: "getYAxisScale",
           value: function getYAxisScale(ticks) {
-            var range = [];
+            var range = []; //let step = this.chartHeight / ticks.length;
-            var step = this.chartHeight / ticks.length; // svg has y=0 on the top, so top tick should have a minimal value in range
+
+            console.log('GETYAXISSCALE - RENDERING', this.ctrl.getPaginationSize());
+            var step = this.chartHeight / this.ctrl.getPaginationSize(); // svg has y=0 on the top, so top tick should have a minimal value in range
 
             range.push(this.yOffset);
 
@@ -334,7 +350,21 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
         }, {
           key: "addYAxis",
           value: function addYAxis() {
-            var ticks = this.bucketMatrix.targets;
+            var ticks;
+
+            if (this.ctrl.ticksWhenPaginating !== undefined && this.ctrl.panel.usingPagination) {
+              ticks = _.uniq(_.map(this.ctrl.ticksWhenPaginating));
+            } else {
+              ticks = this.bucketMatrix.targets; //ticks = _.uniq(_.map(this.data, d => d.target));
+            } // // Set default Y min and max if no data
+            // if (_.isEmpty(this.data)) {
+            //   ticks = [''];
+            // }
+            //
+            // // TODO
+            // // New version!
+            // let ticks = this.bucketMatrix.targets;
+
 
             if (this.panel.yAxisSort == 'a → z') {
               ticks.sort(function (a, b) {
@@ -424,9 +454,16 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
 
             this.yGridSize = this.chartHeight;
 
+            if (this.ctrl.panel.usingPagination) {
+              // Pagination mode overrides count of rows.
+              //this.yGridSize = Math.floor(this.chartHeight / this.ctrl.ticksWhenPaginating.length);
+              console.log('addHeatmapCanvas - rendering', this.ctrl.getPaginationSize());
+              this.yGridSize = Math.floor(this.chartHeight / this.ctrl.getPaginationSize());
+            } else {
               if (this.bucketMatrix.targets.length > 0) {
                 this.yGridSize = Math.floor(this.chartHeight / this.bucketMatrix.targets.length);
               }
+            }
 
             this.cardHeight = this.yGridSize ? this.yGridSize - this.cardVSpacing : 0;
             this.yOffset = this.cardHeight / 2;
@@ -581,7 +618,6 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
             return w;
           } // Top y for card.
           // yScale gives ???
-          // 
 
         }, {
           key: "getCardY",
@@ -845,6 +881,61 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
 
             if (!this.bucketMatrix || !this.setElementHeight()) {
               return;
+            } else {
+              // TODO pagination!
+              this.ctrl.cardsDataComplete = this.ctrl.bucketMatrix.buckets;
+
+              if (this.ctrl.panel.usingPagination) {
+                if (!this.bucketMatrix.targets) {
+                  return;
+                }
+
+                this.ctrl.setFirstPageElement(this.ctrl.getCurrentPage() * this.ctrl.getPaginationSize() + 1);
+                var elems = this.ctrl.getTotalElements();
+                console.log('total elems in add heatmap canvas', elems);
+
+                if (elems < this.ctrl.getFirstPageElement()) {
+                  this.ctrl.setCurrentPage(0);
+                  this.render();
+                }
+
+                if (this.ctrl.getPaginationSize() >= this.ctrl.getTotalElements()) {
+                  this.ctrl.setLastPageElement(this.ctrl.getTotalElements());
+                } else {
+                  if (this.ctrl.getCurrentPage() + 1 === this.ctrl.getNumberOfPages() && this.ctrl.getCurrentPage() > 0) {
+                    this.ctrl.setLastPageElement(this.ctrl.getTotalElements());
+                  } else {
+                    this.ctrl.setLastPageElement(this.ctrl.getCurrentPage() * this.ctrl.getPaginationSize() + this.ctrl.getPaginationSize());
+                  }
+                }
+
+                var cardsList = this.ctrl.bucketMatrix.targets.slice(this.ctrl.getPaginationSize() * this.ctrl.getCurrentPage(), this.ctrl.getPaginationSize() * this.ctrl.getCurrentPage() + this.ctrl.getPaginationSize());
+                var cardsToShow = [];
+                var labelsToShow = []; // Rewrite for bucket matrix.
+
+                for (var i = 0; i < this.cardsData.cards.length; i++) {
+                  var card = this.cardsData.cards[i];
+
+                  for (var j = 0; j < cardsList.length; j++) {
+                    var value = cardsList[j];
+
+                    if (card.y === value) {
+                      cardsToShow.push(card);
+                      labelsToShow.push(value);
+                    }
+                  }
+                }
+
+                var labelsToShowClean = _toConsumableArray(new Set(labelsToShow));
+
+                this.cardsData.cards = cardsToShow.slice();
+                this.ctrl.ticksWhenPaginating = labelsToShowClean;
+                cardsToShow = undefined;
+              } else {
+                var pageSize = this.ctrl.bucketMatrix.targets.length;
+                this.ctrl.getPaginationSize(pageSize);
+                this.ctrl.ticksWhenPaginating = undefined;
+              }
             } // Draw default axes and return if no data
 
 
@@ -859,7 +950,8 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
             this.scope.xAxisHeight = this.xAxisHeight;
             this.scope.chartHeight = this.chartHeight;
             this.scope.chartWidth = this.chartWidth;
-            this.scope.chartTop = this.chartTop;
+            this.scope.chartTop = this.chartTop; // TODO pagination. Why this needed?
+            //this.ctrl.cardsData.cards = this.ctrl.cardsDataComplete.slice();
           }
         }, {
           key: "_renderAnnotations",

dist/tooltipextraseries.js

@@ -0,0 +1,248 @@
+"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;
+
+            if (this.panel.usingPagination) {
+              card = this.panelCtrl.cardsDataComplete[cardId];
+            } else {
+              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

src/css/_statusmap.scss

@@ -102,6 +102,8 @@
   width: 70.0rem!important
 }
 
+.pagination-buttons{text-align: right;}
+
 .status-heatmap-legend-wrapper {
   margin: 0 10px;
 

src/extra_series_format.ts

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

src/module.html

@@ -1,4 +1,13 @@
 <div class="status-heatmap-wrapper">
+	<div class="clearfix"></div>
+	<br>
+	<div class="gf-form" ng-if="ctrl.panel.usingPagination">
+		<label class="gf-form-label width-9">Items per page</label>
+		<input type="number" class="gf-form-input width-5" placeholder="2" data-placement="right"
+		bs-tooltip="'Number of items to show per page.'" ng-model="ctrl.pageSizeViewer" ng-change="ctrl.changePaginationSize()"
+		ng-model-onblur>
+	</div>
+
 	<div class="status-heatmap-canvas-wrapper">
 
 		<div class="datapoints-warning"  ng-if="ctrl.multipleValues || ctrl.noColorDefined || ctrl.noDatapoints">
@@ -7,8 +16,19 @@
 			<span class="small" ng-if="ctrl.noDatapoints" bs-tooltip="'{{ctrl.dataWarnings.noDatapoints.tip}}'">{{ctrl.dataWarnings.noDatapoints.title}}</span>
 		</div>
 
-
+		<div class="status-heatmap-panel" ng-dblclick="ctrl.zoomOut()"></div>
-		<div class="statusmap-panel" ng-dblclick="ctrl.zoomOut()"></div>
+	</div>
+	<div class="pagination" ng-if="ctrl.panel.usingPagination">
+		Showing {{ctrl.firstPageElement}} to {{ctrl.lastPageElement}} of {{ctrl.totalElements}} entries
+		<div class="pagination-buttons">
+			<button class="btn btn-inverse" ng-disabled="ctrl.currentPage == 0" ng-click="ctrl.currentPage=ctrl.currentPage-1; ctrl.render()">
+				Previous
+			</button>
+			{{ctrl.currentPage+1}}/{{ctrl.numberOfPages}}
+			<button class="btn btn-inverse" ng-disabled="ctrl.currentPage >= ctrl.cardsData.targets.length/ctrl.pageSizeViewer - 1 || ctrl.numberOfPages == 0" ng-click="ctrl.currentPage=ctrl.currentPage+1; ctrl.render()">
+				Next
+			</button>
+		</div>
 	</div>
 	<div class="status-heatmap-legend-wrapper" ng-if="ctrl.panel.legend.show">
 		<status-heatmap-legend></status-heatmap-legend>

src/module.ts

@@ -78,6 +78,10 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
   colorSchemes: any = [];
   unitFormats: any;
 
+  cardsDataComplete: any;
+  cardsDataLabelsComplete: any;
+  ticksWhenPaginating: [];
+
   dataWarnings: {[warningId: string]: {title: string, tip: string}} = {};
   multipleValues: boolean;
   noColorDefined: boolean;
@@ -88,6 +92,13 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
   annotations: object[] = [];
   annotationsPromise: any;
 
+  pageSizeViewer: number = 15;
+  currentPage: number = 0;
+  numberOfPages: number = 1;
+  totalElements: number = 0;
+  firstPageElement: number = 1;
+  lastPageElement: number = 5;
+
   panelDefaults: any = {
     // datasource name, null = default datasource
     datasource: null,
@@ -132,7 +143,11 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
     highlightCards: true,
     useMax: true,
 
-    seriesFilterIndex: -1
+    seriesFilterIndex: -1,
+    usingPagination: false,
+    pageSize: 15,
+    allowAllElements: false,
+    availableValues: []
   };
 
   /** @ngInject */
@@ -148,6 +163,11 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
     migratePanelConfig(this.panel);
     _.defaultsDeep(this.panel, this.panelDefaults);
 
+    if (this.panel.usingPagination) {
+      this.setPaginationSize(this.panel.pageSize);
+      this.setCurrentPage(0);
+    }
+
     this.opacityScales = opacityScales;
     this.colorModes = colorModes;
     this.colorSchemes = colorSchemes;
@@ -199,6 +219,68 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
     this.renderingCompleted();
   }
 
+  changeDefaultPaginationSize(defaultPageSize: number): void {
+    this.pageSizeViewer = defaultPageSize;
+
+    this.render();
+    this.refresh();
+  }
+
+  changePaginationSize(): void {
+    if (this.pageSizeViewer <= 0) {
+      this.pageSizeViewer = 1;
+    }
+
+    this.currentPage = 0;
+
+    this.render();
+    this.refresh();
+  }
+
+  getPaginationSize(): number {
+    return this.pageSizeViewer;
+  }
+
+  setPaginationSize(pageSize: number): void {
+    this.pageSizeViewer = pageSize;
+  }
+
+  getCurrentPage(): number {
+    return this.currentPage;
+  }
+
+  setCurrentPage(currentPage: number): void {
+    this.currentPage = currentPage;
+  }
+
+  getNumberOfPages(): number {
+    return this.numberOfPages;
+  }
+
+  getTotalElements(): number {
+    return this.totalElements;
+  }
+
+  setTotalElements(totalElements: number): void {
+    this.totalElements = totalElements;
+  }
+
+  getFirstPageElement(): number {
+    return this.firstPageElement;
+  }
+
+  setFirstPageElement(firstPageElement: number): void {
+    this.firstPageElement = firstPageElement;
+  }
+
+  getLastPageElement(): number {
+    return this.lastPageElement;
+  }
+
+  setLastPageElement(lastPageElement: number): void {
+    this.lastPageElement = lastPageElement;
+  }
+
   // getChartWidth returns an approximation of chart canvas width or
   // a saved value calculated during a render.
   getChartWidth():number {
@@ -323,6 +405,13 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
     this.bucketMatrix = this.convertDataToBuckets(dataList, this.range.from.valueOf(), this.range.to.valueOf(), this.intervalMs, true);
     this.noDatapoints = this.bucketMatrix.noDatapoints;
 
+    if (this.panel.usingPagination && this.cardsData.targets) {
+      this.numberOfPages = Math.ceil(this.cardsData.targets.length/this.pageSizeViewer);
+      this.totalElements = this.cardsData.targets.length;
+    } else {
+      this.setPaginationSize(this.cardsData.targets.length);
+    }
+
     if (this.annotationsPromise) {
       this.annotationsPromise.then(
         (result: { alertState: any; annotations: any }) => {
@@ -338,7 +427,7 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
         () => {
           this.loading = false;
           this.annotations = [];
-          this.render();
+          this.render(); // this.render(this.data);???
         }
       );
     } else {
@@ -354,6 +443,10 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
     this.unitFormats = kbn.getUnitFormats();
   }
 
+  paginate() {
+    this.refresh();
+  }
+
   // onRender will be called before StatusmapRenderer.onRender.
   // Decide if warning should be displayed over cards.
   onRender() {

src/partials/options_editor.html

@@ -216,4 +216,119 @@
     </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">Pagination options</h5>
+    <div class="gf-form">
+      <gf-form-switch class="gf-form" label="Paginate elements" label-class="width-12"
+      checked="ctrl.panel.usingPagination" on-change="ctrl.paginate()"></gf-form-switch>
+    </div>
+    <div class="gf-form" ng-if="ctrl.panel.usingPagination">
+      <label class="gf-form-label width-9">Items per Page by default</label>
+      <input type="number" class="gf-form-input width-5" placeholder="2" data-placement="right"
+        bs-tooltip="Number of items to show by default" ng-model="ctrl.panel.pageSize" ng-change="ctrl.changeDefaultPaginationSize(ctrl.panel.pageSize)"
+        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/rendering.ts

@@ -133,7 +133,11 @@ export class StatusmapRenderer {
         height = parseInt(height.replace('px', ''), 10);
       }
 
-      height -= this.panel.legend.show ? 32 : 10; // bottom padding and space for legend. Change margin in .status-heatmap-color-legend !
+      if (this.panel.usingPagination) {
+        height -= this.panel.legend.show ? 140 : 10; // bottom padding and space for legend. Change margin in .status-heatmap-color-legend !
+      } else {
+        height -= this.panel.legend.show ? 50 : 10; // bottom padding and space for legend. Change margin in .status-heatmap-color-legend !
+      }
 
       this.$heatmap.css('height', height + 'px');
 
@@ -210,7 +214,9 @@ export class StatusmapRenderer {
   // divide chart height by ticks for cards drawing
   getYScale(ticks: any[]) {
     let range:any[] = [];
-    let step = this.chartHeight / ticks.length;
+    //let step = this.chartHeight / ticks.length;
+    console.log('GETYSCALE - RENDERING', this.ctrl.getPaginationSize());
+    let step = this.chartHeight / this.ctrl.getPaginationSize();
     // svg has y=0 on the top, so top card should have a minimal value in range
     range.push(step);
     for (let i = 1; i < ticks.length; i++) {
@@ -224,7 +230,9 @@ export class StatusmapRenderer {
   // divide chart height by ticks with offset for ticks drawing
   getYAxisScale(ticks: any[]) {
     let range:any[] = [];
-    let step = this.chartHeight / ticks.length;
+    //let step = this.chartHeight / ticks.length;
+    console.log('GETYAXISSCALE - RENDERING', this.ctrl.getPaginationSize());
+    let step = this.chartHeight / this.ctrl.getPaginationSize();
     // svg has y=0 on the top, so top tick should have a minimal value in range
     range.push(this.yOffset);
     for (let i = 1; i < ticks.length; i++) {
@@ -236,7 +244,25 @@ export class StatusmapRenderer {
   }
 
   addYAxis() {
-    let ticks = this.bucketMatrix.targets;
+
+    let ticks;
+
+    if(this.ctrl.ticksWhenPaginating !== undefined && this.ctrl.panel.usingPagination) {
+      ticks = _.uniq(_.map(this.ctrl.ticksWhenPaginating));
+    } else {
+      ticks = this.bucketMatrix.targets;
+      //ticks = _.uniq(_.map(this.data, d => d.target));
+    }
+
+    // // Set default Y min and max if no data
+    // if (_.isEmpty(this.data)) {
+    //   ticks = [''];
+    // }
+    //
+    // // TODO
+    // // New version!
+    // let ticks = this.bucketMatrix.targets;
+
 
     if (this.panel.yAxisSort == 'a → z') {
       ticks.sort((a, b) => a.localeCompare(b, 'en', {ignorePunctuation: false, numeric: true}));
@@ -326,9 +352,17 @@ export class StatusmapRenderer {
 
     // calculate yOffset for YAxis
     this.yGridSize = this.chartHeight;
+    if (this.ctrl.panel.usingPagination) {
+      // Pagination mode overrides count of rows.
+      //this.yGridSize = Math.floor(this.chartHeight / this.ctrl.ticksWhenPaginating.length);
+      console.log('addHeatmapCanvas - rendering',this.ctrl.getPaginationSize());
+      this.yGridSize = Math.floor(this.chartHeight / this.ctrl.getPaginationSize());
+    } else {
       if (this.bucketMatrix.targets.length > 0) {
         this.yGridSize = Math.floor(this.chartHeight / this.bucketMatrix.targets.length);
       }
+    }
+
     this.cardHeight = this.yGridSize ? this.yGridSize - this.cardVSpacing : 0;
     this.yOffset = this.cardHeight / 2;
 
@@ -501,7 +535,6 @@ export class StatusmapRenderer {
 
   // Top y for card.
   // yScale gives ???
-  // 
   getCardY(b: Bucket) {
     return this.yScale(b.yLabel) + this.chartTop - this.cardHeight - this.cardVSpacing/2;
   }
@@ -753,6 +786,67 @@ export class StatusmapRenderer {
 
     if (!this.bucketMatrix || !this.setElementHeight()) {
       return;
+    } else {
+      // TODO pagination!
+      this.ctrl.cardsDataComplete = this.ctrl.bucketMatrix.buckets;
+
+      if(this.ctrl.panel.usingPagination) {
+        if (!this.bucketMatrix.targets) {
+          return;
+        }
+
+        this.ctrl.setFirstPageElement((this.ctrl.getCurrentPage()*this.ctrl.getPaginationSize())+1);
+
+        let elems = this.ctrl.getTotalElements();
+
+        console.log('total elems in add heatmap canvas', elems);
+        if (elems < this.ctrl.getFirstPageElement()) {
+          this.ctrl.setCurrentPage(0);
+          this.render();
+        }
+
+        if (this.ctrl.getPaginationSize() >= this.ctrl.getTotalElements()) {
+          this.ctrl.setLastPageElement(this.ctrl.getTotalElements());
+        } else {
+          if ((this.ctrl.getCurrentPage()+1) === this.ctrl.getNumberOfPages() && (this.ctrl.getCurrentPage()>0)) {
+            this.ctrl.setLastPageElement(this.ctrl.getTotalElements());
+          } else {
+            this.ctrl.setLastPageElement((this.ctrl.getCurrentPage() * this.ctrl.getPaginationSize())+this.ctrl.getPaginationSize());
+          }
+        }
+
+        let cardsList = this.ctrl.bucketMatrix.targets.slice(this.ctrl.getPaginationSize()*this.ctrl.getCurrentPage(),
+          (this.ctrl.getPaginationSize()*this.ctrl.getCurrentPage())+this.ctrl.getPaginationSize());
+
+        let cardsToShow = [];
+        let labelsToShow = [];
+
+        // Rewrite for bucket matrix.
+        for (let i = 0; i < this.cardsData.cards.length; i++) {
+          const card = this.cardsData.cards[i];
+
+          for (let j = 0; j < cardsList.length; j++) {
+            const value = cardsList[j];
+
+            if (card.y === value) {
+              cardsToShow.push(card);
+              labelsToShow.push(value);
+            }
+
+          }
+        }
+
+        const labelsToShowClean = [...new Set(labelsToShow)];
+
+        this.cardsData.cards = cardsToShow.slice();
+        this.ctrl.ticksWhenPaginating = labelsToShowClean;
+
+        cardsToShow = undefined;
+      } else {
+        const pageSize = this.ctrl.bucketMatrix.targets.length
+        this.ctrl.getPaginationSize(pageSize);
+        this.ctrl.ticksWhenPaginating = undefined;
+      }
     }
 
     // Draw default axes and return if no data
@@ -767,6 +861,9 @@ export class StatusmapRenderer {
     this.scope.chartHeight = this.chartHeight;
     this.scope.chartWidth = this.chartWidth;
     this.scope.chartTop = this.chartTop;
+
+    // TODO pagination. Why this needed?
+    //this.ctrl.cardsData.cards = this.ctrl.cardsDataComplete.slice();
   }
 
   _renderAnnotations() {

src/tooltipextraseries.ts

@@ -0,0 +1,228 @@
+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;
+
+            if (this.panel.usingPagination) {
+                card = this.panelCtrl.cardsDataComplete[cardId];
+            } else {
+                card = 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");
+        }
+}