Begin conversion

public/app/plugins/panel/heatmap/specs/renderer.jest.ts

@@ -0,0 +1,319 @@
+// import { describe, beforeEach, it, sinon, expect, angularMocks } from '../../../../../test/lib/common';
+
+import '../module';
+import angular from 'angular';
+import $ from 'jquery';
+// import helpers from 'test/specs/helpers';
+import TimeSeries from 'app/core/time_series2';
+import moment from 'moment';
+import { Emitter } from 'app/core/core';
+import rendering from '../rendering';
+import { convertToHeatMap, convertToCards, histogramToHeatmap, calculateBucketSize } from '../heatmap_data_converter';
+
+describe('grafanaHeatmap', function() {
+  //   beforeEach(angularMocks.module('grafana.core'));
+
+  function heatmapScenario(desc, func, elementWidth = 500) {
+    describe(desc, function() {
+      var ctx: any = {};
+
+      ctx.setup = function(setupFunc) {
+        // beforeEach(
+        //   angularMocks.module(function($provide) {
+        //     $provide.value('timeSrv', new helpers.TimeSrvStub());
+        //   })
+        // );
+
+        beforeEach(() => {
+          //   angularMocks.inject(function($rootScope, $compile) {
+          var ctrl: any = {
+            colorSchemes: [
+              {
+                name: 'Oranges',
+                value: 'interpolateOranges',
+                invert: 'dark',
+              },
+              { name: 'Reds', value: 'interpolateReds', invert: 'dark' },
+            ],
+            //   events: new Emitter(),
+            height: 200,
+            panel: {
+              heatmap: {},
+              cards: {
+                cardPadding: null,
+                cardRound: null,
+              },
+              color: {
+                mode: 'spectrum',
+                cardColor: '#b4ff00',
+                colorScale: 'linear',
+                exponent: 0.5,
+                colorScheme: 'interpolateOranges',
+                fillBackground: false,
+              },
+              legend: {
+                show: false,
+              },
+              xBucketSize: 1000,
+              xBucketNumber: null,
+              yBucketSize: 1,
+              yBucketNumber: null,
+              xAxis: {
+                show: true,
+              },
+              yAxis: {
+                show: true,
+                format: 'short',
+                decimals: null,
+                logBase: 1,
+                splitFactor: null,
+                min: null,
+                max: null,
+                removeZeroValues: false,
+              },
+              tooltip: {
+                show: true,
+                seriesStat: false,
+                showHistogram: false,
+              },
+              highlightCards: true,
+            },
+            renderingCompleted: jest.fn(),
+            hiddenSeries: {},
+            dashboard: {
+              getTimezone: () => 'utc',
+            },
+            range: {
+              from: moment.utc('01 Mar 2017 10:00:00', 'DD MMM YYYY HH:mm:ss'),
+              to: moment.utc('01 Mar 2017 11:00:00', 'DD MMM YYYY HH:mm:ss'),
+            },
+          };
+
+          var scope = $rootScope.$new();
+          scope.ctrl = ctrl;
+
+          ctx.series = [];
+          ctx.series.push(
+            new TimeSeries({
+              datapoints: [[1, 1422774000000], [2, 1422774060000]],
+              alias: 'series1',
+            })
+          );
+          ctx.series.push(
+            new TimeSeries({
+              datapoints: [[2, 1422774000000], [3, 1422774060000]],
+              alias: 'series2',
+            })
+          );
+
+          ctx.data = {
+            heatmapStats: {
+              min: 1,
+              max: 3,
+              minLog: 1,
+            },
+            xBucketSize: ctrl.panel.xBucketSize,
+            yBucketSize: ctrl.panel.yBucketSize,
+          };
+
+          setupFunc(ctrl, ctx);
+
+          let logBase = ctrl.panel.yAxis.logBase;
+          let bucketsData;
+          if (ctrl.panel.dataFormat === 'tsbuckets') {
+            bucketsData = histogramToHeatmap(ctx.series);
+          } else {
+            bucketsData = convertToHeatMap(ctx.series, ctx.data.yBucketSize, ctx.data.xBucketSize, logBase);
+          }
+          ctx.data.buckets = bucketsData;
+
+          let { cards, cardStats } = convertToCards(bucketsData);
+          ctx.data.cards = cards;
+          ctx.data.cardStats = cardStats;
+
+          let elemHtml = `
+          <div class="heatmap-wrapper">
+            <div class="heatmap-canvas-wrapper">
+              <div class="heatmap-panel" style='width:${elementWidth}px'></div>
+            </div>
+          </div>`;
+
+          var element = $.parseHTML(elemHtml);
+          // $compile(element)(scope);
+          // scope.$digest();
+
+          ctrl.data = ctx.data;
+          ctx.element = element;
+          rendering(scope, $(element), [], ctrl);
+          ctrl.events.emit('render');
+        });
+      };
+
+      func(ctx);
+    });
+  }
+
+  heatmapScenario('default options', function(ctx) {
+    ctx.setup(function(ctrl) {
+      ctrl.panel.yAxis.logBase = 1;
+    });
+
+    it('should draw correct Y axis', function() {
+      var yTicks = getTicks(ctx.element, '.axis-y');
+      expect(yTicks).toEqual(['1', '2', '3']);
+    });
+
+    it('should draw correct X axis', function() {
+      var xTicks = getTicks(ctx.element, '.axis-x');
+      let expectedTicks = [
+        formatTime('01 Mar 2017 10:00:00'),
+        formatTime('01 Mar 2017 10:15:00'),
+        formatTime('01 Mar 2017 10:30:00'),
+        formatTime('01 Mar 2017 10:45:00'),
+        formatTime('01 Mar 2017 11:00:00'),
+      ];
+      expect(xTicks).toEqual(expectedTicks);
+    });
+  });
+
+  heatmapScenario('when logBase is 2', function(ctx) {
+    ctx.setup(function(ctrl) {
+      ctrl.panel.yAxis.logBase = 2;
+    });
+
+    it('should draw correct Y axis', function() {
+      var yTicks = getTicks(ctx.element, '.axis-y');
+      expect(yTicks).toEqual(['1', '2', '4']);
+    });
+  });
+
+  heatmapScenario('when logBase is 10', function(ctx) {
+    ctx.setup(function(ctrl, ctx) {
+      ctrl.panel.yAxis.logBase = 10;
+
+      ctx.series.push(
+        new TimeSeries({
+          datapoints: [[10, 1422774000000], [20, 1422774060000]],
+          alias: 'series3',
+        })
+      );
+      ctx.data.heatmapStats.max = 20;
+    });
+
+    it('should draw correct Y axis', function() {
+      var yTicks = getTicks(ctx.element, '.axis-y');
+      expect(yTicks).toEqual(['1', '10', '100']);
+    });
+  });
+
+  heatmapScenario('when logBase is 32', function(ctx) {
+    ctx.setup(function(ctrl) {
+      ctrl.panel.yAxis.logBase = 32;
+
+      ctx.series.push(
+        new TimeSeries({
+          datapoints: [[10, 1422774000000], [100, 1422774060000]],
+          alias: 'series3',
+        })
+      );
+      ctx.data.heatmapStats.max = 100;
+    });
+
+    it('should draw correct Y axis', function() {
+      var yTicks = getTicks(ctx.element, '.axis-y');
+      expect(yTicks).toEqual(['1', '32', '1.0 K']);
+    });
+  });
+
+  heatmapScenario('when logBase is 1024', function(ctx) {
+    ctx.setup(function(ctrl) {
+      ctrl.panel.yAxis.logBase = 1024;
+
+      ctx.series.push(
+        new TimeSeries({
+          datapoints: [[2000, 1422774000000], [300000, 1422774060000]],
+          alias: 'series3',
+        })
+      );
+      ctx.data.heatmapStats.max = 300000;
+    });
+
+    it('should draw correct Y axis', function() {
+      var yTicks = getTicks(ctx.element, '.axis-y');
+      expect(yTicks).toEqual(['1', '1 K', '1.0 Mil']);
+    });
+  });
+
+  heatmapScenario('when Y axis format set to "none"', function(ctx) {
+    ctx.setup(function(ctrl) {
+      ctrl.panel.yAxis.logBase = 1;
+      ctrl.panel.yAxis.format = 'none';
+      ctx.data.heatmapStats.max = 10000;
+    });
+
+    it('should draw correct Y axis', function() {
+      var yTicks = getTicks(ctx.element, '.axis-y');
+      expect(yTicks).toEqual(['0', '2000', '4000', '6000', '8000', '10000', '12000']);
+    });
+  });
+
+  heatmapScenario('when Y axis format set to "second"', function(ctx) {
+    ctx.setup(function(ctrl) {
+      ctrl.panel.yAxis.logBase = 1;
+      ctrl.panel.yAxis.format = 's';
+      ctx.data.heatmapStats.max = 3600;
+    });
+
+    it('should draw correct Y axis', function() {
+      var yTicks = getTicks(ctx.element, '.axis-y');
+      expect(yTicks).toEqual(['0 ns', '17 min', '33 min', '50 min', '1.11 hour']);
+    });
+  });
+
+  heatmapScenario('when data format is Time series buckets', function(ctx) {
+    ctx.setup(function(ctrl, ctx) {
+      ctrl.panel.dataFormat = 'tsbuckets';
+
+      const series = [
+        {
+          alias: '1',
+          datapoints: [[1000, 1422774000000], [200000, 1422774060000]],
+        },
+        {
+          alias: '2',
+          datapoints: [[3000, 1422774000000], [400000, 1422774060000]],
+        },
+        {
+          alias: '3',
+          datapoints: [[2000, 1422774000000], [300000, 1422774060000]],
+        },
+      ];
+      ctx.series = series.map(s => new TimeSeries(s));
+
+      ctx.data.tsBuckets = series.map(s => s.alias).concat('');
+      ctx.data.yBucketSize = 1;
+      let xBucketBoundSet = series[0].datapoints.map(dp => dp[1]);
+      ctx.data.xBucketSize = calculateBucketSize(xBucketBoundSet);
+    });
+
+    it('should draw correct Y axis', function() {
+      var yTicks = getTicks(ctx.element, '.axis-y');
+      expect(yTicks).toEqual(['1', '2', '3', '']);
+    });
+  });
+});
+
+function getTicks(element, axisSelector) {
+  return element
+    .find(axisSelector)
+    .find('text')
+    .map(function() {
+      return this.textContent;
+    })
+    .get();
+}
+
+function formatTime(timeStr) {
+  let format = 'HH:mm';
+  return moment.utc(timeStr, 'DD MMM YYYY HH:mm:ss').format(format);
+}