energylink/public/app/plugins/panel/graph/specs/graph_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 helpers from 'test/specs/helpers';
import TimeSeries from 'app/core/time_series2';
import moment from 'moment';
import {Emitter} from 'app/core/core';

describe('grafanaGraph', function() {

  beforeEach(angularMocks.module('grafana.core'));

  function graphScenario(desc, func, elementWidth = 500)  {
    describe(desc, () => {
      var ctx: any = {};

      ctx.setup = (setupFunc) => {

        beforeEach(angularMocks.module(($provide) => {
          $provide.value("timeSrv", new helpers.TimeSrvStub());
        }));

        beforeEach(angularMocks.inject(($rootScope, $compile) => {
          var ctrl: any = {
            events: new Emitter(),
            height: 200,
            panel: {
              legend: {},
              grid: { },
              yaxes: [
                {
                  min: null,
                  max: null,
                  format: 'short',
                  logBase: 1
                },
                {
                  min: null,
                  max: null,
                  format: 'short',
                  logBase: 1
                }
              ],
              thresholds: [],
              xaxis: {},
              seriesOverrides: [],
              tooltip: {
                shared: true
              }
            },
            renderingCompleted: sinon.spy(),
            hiddenSeries: {},
            dashboard: {
              getTimezone: sinon.stub().returns('browser')
            },
            range: {
              from: moment([2015, 1, 1, 10]),
              to: moment([2015, 1, 1, 22]),
            },
          };

          var scope = $rootScope.$new();
          scope.ctrl = ctrl;


          $rootScope.onAppEvent = sinon.spy();

          ctx.data = [];
          ctx.data.push(new TimeSeries({
            datapoints: [[1,1],[2,2]],
            alias: 'series1'
          }));
          ctx.data.push(new TimeSeries({
            datapoints: [[10,1],[20,2]],
            alias: 'series2'
          }));

          setupFunc(ctrl, ctx.data);

          var element = angular.element("<div style='width:" + elementWidth + "px' grafana-graph><div>");
          $compile(element)(scope);
          scope.$digest();

          $.plot = ctx.plotSpy = sinon.spy();
          ctrl.events.emit('render', ctx.data);
          ctx.plotData = ctx.plotSpy.getCall(0).args[1];
          ctx.plotOptions = ctx.plotSpy.getCall(0).args[2];
        }));
      };

      func(ctx);
    });
  }

  graphScenario('simple lines options', (ctx) => {
    ctx.setup((ctrl) => {
      ctrl.panel.lines = true;
      ctrl.panel.fill = 5;
      ctrl.panel.linewidth = 3;
      ctrl.panel.steppedLine = true;
    });

    it('should configure plot with correct options', () => {
      expect(ctx.plotOptions.series.lines.show).to.be(true);
      expect(ctx.plotOptions.series.lines.fill).to.be(0.5);
      expect(ctx.plotOptions.series.lines.lineWidth).to.be(3);
      expect(ctx.plotOptions.series.lines.steps).to.be(true);
    });
  });

  graphScenario('sorting stacked series as legend. disabled', (ctx) => {
    ctx.setup((ctrl) => {
      ctrl.panel.legend.sort = undefined;
      ctrl.panel.stack = false;
    });

    it("should not modify order of time series", () => {
      expect(ctx.plotData[0].alias).to.be('series1');
      expect(ctx.plotData[1].alias).to.be('series2');
    });
  });

  graphScenario("sorting stacked series as legend. min descending order", (ctx) => {
    ctx.setup(ctrl => {
      ctrl.panel.legend.sort = 'min';
      ctrl.panel.legend.sortDesc = true;
      ctrl.panel.stack = true;
    });

    it("highest value should be first", () => {
      expect(ctx.plotData[0].alias).to.be('series2');
      expect(ctx.plotData[1].alias).to.be('series1');
    });
  });

  graphScenario("sorting stacked series as legend. min ascending order", (ctx) => {
    ctx.setup((ctrl, data) => {
      ctrl.panel.legend.sort = 'min';
      ctrl.panel.legend.sortDesc = false;
      ctrl.panel.stack = true;
    });

    it("lowest value should be first", () => {
      expect(ctx.plotData[0].alias).to.be('series1');
      expect(ctx.plotData[1].alias).to.be('series2');
    });
  });

  graphScenario("sorting stacked series as legend. stacking disabled", (ctx) => {
    ctx.setup((ctrl) => {
      ctrl.panel.legend.sort = 'min';
      ctrl.panel.legend.sortDesc = true;
      ctrl.panel.stack = false;
    });

    it("highest value should be first", () => {
      expect(ctx.plotData[0].alias).to.be('series1');
      expect(ctx.plotData[1].alias).to.be('series2');
    });
  });

  graphScenario("sorting stacked series as legend. current descending order", (ctx) => {
    ctx.setup((ctrl) => {
      ctrl.panel.legend.sort = 'current';
      ctrl.panel.legend.sortDesc = true;
      ctrl.panel.stack = true;
    });

    it("highest last value should be first", () => {
      expect(ctx.plotData[0].alias).to.be('series2');
      expect(ctx.plotData[1].alias).to.be('series1');
    });
  });

  graphScenario('when logBase is log 10', function(ctx) {
    ctx.setup(function(ctrl, data) {
      ctrl.panel.yaxes[0].logBase = 10;
      data[0] = new TimeSeries({
        datapoints: [[2000,1],[0.002,2],[0,3],[-1,4]],
        alias: 'seriesAutoscale',
      });
      data[0].yaxis = 1;
      ctrl.panel.yaxes[1].logBase = 10;
      ctrl.panel.yaxes[1].min = '0.05';
      ctrl.panel.yaxes[1].max = '1500';
      data[1] = new TimeSeries({
        datapoints: [[2000,1],[0.002,2],[0,3],[-1,4]],
        alias: 'seriesFixedscale',
      });
      data[1].yaxis = 2;
    });

    it('should apply axis transform, autoscaling (if necessary) and ticks', function() {
      var axisAutoscale = ctx.plotOptions.yaxes[0];
      expect(axisAutoscale.transform(100)).to.be(2);
      expect(axisAutoscale.inverseTransform(-3)).to.within(0.00099999999,0.00100000001);
      expect(axisAutoscale.min).to.within(0.00099999999,0.00100000001);
      expect(axisAutoscale.max).to.be(10000);
      expect(axisAutoscale.ticks.length).to.within(7,8);
      expect(axisAutoscale.ticks[0]).to.within(0.00099999999,0.00100000001);
      if (axisAutoscale.ticks.length === 7) {
        expect(axisAutoscale.ticks[axisAutoscale.ticks.length-1]).to.within(999.9999,1000.0001);
      } else {
        expect(axisAutoscale.ticks[axisAutoscale.ticks.length-1]).to.be(10000);
      }

      var axisFixedscale = ctx.plotOptions.yaxes[1];
      expect(axisFixedscale.min).to.be(0.05);
      expect(axisFixedscale.max).to.be(1500);
      expect(axisFixedscale.ticks.length).to.be(5);
      expect(axisFixedscale.ticks[0]).to.be(0.1);
      expect(axisFixedscale.ticks[4]).to.be(1000);
    });
  });

  graphScenario('when logBase is log 10 and data points contain only zeroes', function(ctx) {
    ctx.setup(function(ctrl, data) {
      ctrl.panel.yaxes[0].logBase = 10;
      data[0] = new TimeSeries({
        datapoints: [[0,1],[0,2],[0,3],[0,4]],
        alias: 'seriesAutoscale',
      });
      data[0].yaxis = 1;
    });

    it('should not set min and max and should create some fake ticks', function() {
      var axisAutoscale = ctx.plotOptions.yaxes[0];
      expect(axisAutoscale.transform(100)).to.be(2);
      expect(axisAutoscale.inverseTransform(-3)).to.within(0.00099999999,0.00100000001);
      expect(axisAutoscale.min).to.be(undefined);
      expect(axisAutoscale.max).to.be(undefined);
      expect(axisAutoscale.ticks.length).to.be(2);
      expect(axisAutoscale.ticks[0]).to.be(1);
      expect(axisAutoscale.ticks[1]).to.be(2);
    });
  });

  // y-min set 0 is a special case for log scale,
  // this approximates it by setting min to 0.1
  graphScenario('when logBase is log 10 and y-min is set to 0 and auto min is > 0.1', function(ctx) {
    ctx.setup(function(ctrl, data) {
      ctrl.panel.yaxes[0].logBase = 10;
      ctrl.panel.yaxes[0].min = '0';
      data[0] = new TimeSeries({
        datapoints: [[2000,1],[4 ,2],[500,3],[3000,4]],
        alias: 'seriesAutoscale',
      });
      data[0].yaxis = 1;
    });

    it('should set min to 0.1 and add a tick for 0.1', function() {
      var axisAutoscale = ctx.plotOptions.yaxes[0];
      expect(axisAutoscale.transform(100)).to.be(2);
      expect(axisAutoscale.inverseTransform(-3)).to.within(0.00099999999,0.00100000001);
      expect(axisAutoscale.min).to.be(0.1);
      expect(axisAutoscale.max).to.be(10000);
      expect(axisAutoscale.ticks.length).to.be(6);
      expect(axisAutoscale.ticks[0]).to.be(0.1);
      expect(axisAutoscale.ticks[5]).to.be(10000);
    });
  });

  graphScenario('when logBase is log 2 and y-min is set to 0 and num of ticks exceeds max', function(ctx) {
    ctx.setup(function(ctrl, data) {
      const heightForApprox5Ticks = 125;
      ctrl.height = heightForApprox5Ticks;
      ctrl.panel.yaxes[0].logBase = 2;
      ctrl.panel.yaxes[0].min = '0';
      data[0] = new TimeSeries({
        datapoints: [[2000,1],[4 ,2],[500,3],[3000,4], [10000,5], [100000,6]],
        alias: 'seriesAutoscale',
      });
      data[0].yaxis = 1;
    });

    it('should regenerate ticks so that if fits on the y-axis', function() {
      var axisAutoscale = ctx.plotOptions.yaxes[0];
      expect(axisAutoscale.min).to.be(0.1);
      expect(axisAutoscale.ticks.length).to.be(8);
      expect(axisAutoscale.ticks[0]).to.be(0.1);
      expect(axisAutoscale.ticks[7]).to.be(262144);
      expect(axisAutoscale.max).to.be(262144);
    });

    it('should set axis max to be max tick value', function() {
      expect(ctx.plotOptions.yaxes[0].max).to.be(262144);
    });
  });

  graphScenario('dashed lines options', function(ctx) {
    ctx.setup(function(ctrl) {
      ctrl.panel.lines = true;
      ctrl.panel.linewidth = 2;
      ctrl.panel.dashes = true;
    });

    it('should configure dashed plot with correct options', function() {
      expect(ctx.plotOptions.series.lines.show).to.be(true);
      expect(ctx.plotOptions.series.dashes.lineWidth).to.be(2);
      expect(ctx.plotOptions.series.dashes.show).to.be(true);
    });
  });

  graphScenario('should use timeStep for barWidth', function(ctx) {
    ctx.setup(function(ctrl, data) {
      ctrl.panel.bars = true;
      data[0] = new TimeSeries({
        datapoints: [[1,10],[2,20]],
        alias: 'series1',
      });
    });

    it('should set barWidth', function() {
      expect(ctx.plotOptions.series.bars.barWidth).to.be(1/1.5);
    });
  });

  graphScenario('series option overrides, fill & points', function(ctx) {
    ctx.setup(function(ctrl, data) {
      ctrl.panel.lines = true;
      ctrl.panel.fill = 5;
      data[0].zindex = 10;
      data[1].alias = 'test';
      data[1].lines = {fill: 0.001};
      data[1].points = {show: true};
    });

    it('should match second series and fill zero, and enable points', function() {
      expect(ctx.plotOptions.series.lines.fill).to.be(0.5);
      expect(ctx.plotData[1].lines.fill).to.be(0.001);
      expect(ctx.plotData[1].points.show).to.be(true);
    });
  });

  graphScenario('should order series order according to zindex', function(ctx) {
    ctx.setup(function(ctrl, data) {
      data[1].zindex = 1;
      data[0].zindex = 10;
    });

    it('should move zindex 2 last', function() {
      expect(ctx.plotData[0].alias).to.be('series2');
      expect(ctx.plotData[1].alias).to.be('series1');
    });
  });

  graphScenario('when series is hidden', function(ctx) {
    ctx.setup(function(ctrl) {
      ctrl.hiddenSeries = {'series2': true};
    });

    it('should remove datapoints and disable stack', function() {
      expect(ctx.plotData[0].alias).to.be('series1');
      expect(ctx.plotData[1].data.length).to.be(0);
      expect(ctx.plotData[1].stack).to.be(false);
    });
  });

  graphScenario('when stack and percent', function(ctx) {
    ctx.setup(function(ctrl) {
      ctrl.panel.percentage = true;
      ctrl.panel.stack = true;
    });

    it('should show percentage', function() {
      var axis = ctx.plotOptions.yaxes[0];
      expect(axis.tickFormatter(100, axis)).to.be("100%");
    });
  });

  graphScenario('when panel too narrow to show x-axis dates in same granularity as wide panels', function(ctx) {
    describe('and the range is less than 24 hours', function() {
      ctx.setup(function(ctrl) {
        ctrl.range.from = moment([2015, 1, 1, 10]);
        ctrl.range.to = moment([2015, 1, 1, 22]);
      });

      it('should format dates as hours minutes', function() {
        var axis = ctx.plotOptions.xaxis;
        expect(axis.timeformat).to.be('%H:%M');
      });
    });

    describe('and the range is less than one year', function() {
      ctx.setup(function(scope) {
        scope.range.from = moment([2015, 1, 1]);
        scope.range.to = moment([2015, 11, 20]);
      });

      it('should format dates as month days', function() {
        var axis = ctx.plotOptions.xaxis;
        expect(axis.timeformat).to.be('%m/%d');
      });
    });

  }, 10);
});