energylink/public/app/plugins/panel/heatmap/specs/renderer_specs.ts

///<reference path="../../../../headers/common.d.ts" />

import { describe, beforeEach, it, sinon, expect, angularMocks } from '../../../../../test/lib/common';

import '../module';
import angular from 'angular';
import $ from 'jquery';
import _ from 'lodash';
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} 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
              },
              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: sinon.spy(),
            hiddenSeries: {},
            dashboard: {
              getTimezone: sinon.stub().returns('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 = 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 = angular.element(elemHtml);
          $compile(element)(scope);
          scope.$digest();

          ctrl.data = ctx.data;
          ctx.element = element;
          let render = 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).to.eql(['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).to.eql(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).to.eql(['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).to.eql(['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).to.eql(['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).to.eql(['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).to.eql(['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).to.eql(['0 ns', '17 min', '33 min', '50 min', '1.11 hour']);
    });
  });

});


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);
}