Remove tests and logs

public/app/plugins/panel/heatmap/HeatmapRenderContainer.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import HeatmapRenderer from './rendering';
-import { HeatmapCtrl } from './heatmap_ctrl';
-
-export class HeatmapRenderContainer extends React.Component {
-  renderer: any;
-  constructor(props) {
-    super(props);
-    this.renderer = HeatmapRenderer(
-      this.props.scope,
-      this.props.children[0],
-      [],
-      new HeatmapCtrl(this.props.scope, {}, {})
-    );
-  }
-
-  render() {
-    return <div />;
-  }
-}

public/app/plugins/panel/heatmap/rendering.ts

@@ -154,7 +154,7 @@ export class HeatmapRenderer {
     } else {
       timeFormat = d3.timeFormat(grafanaTimeFormatter);
     }
-    console.log(ticks);
+
     let xAxis = d3
       .axisBottom(this.xScale)
       .ticks(ticks)
@@ -549,7 +549,6 @@ export class HeatmapRenderer {
       .style('opacity', this.getCardOpacity.bind(this));
 
     let $cards = this.$heatmap.find('.heatmap-card');
-    console.log($cards);
     $cards
       .on('mouseenter', event => {
         this.tooltip.mouseOverBucket = true;

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

@@ -1,351 +0,0 @@
-// 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 * as d3 from 'd3';
-import { convertToHeatMap, convertToCards, histogramToHeatmap, calculateBucketSize } from '../heatmap_data_converter';
-jest.mock('app/core/core', () => ({
-  appEvents: {
-    on: () => {},
-  },
-  contextSrv: {
-    user: {
-      lightTheme: false,
-    },
-  },
-}));
-
-describe('grafanaHeatmap', function() {
-  //   beforeEach(angularMocks.module('grafana.core'));
-
-  let scope = <any>{};
-  let render;
-
-  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: {
-              on: () => {},
-              emit: () => {},
-            },
-            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 = {
-            find: () => ({
-              on: () => {},
-              css: () => 189,
-              width: () => 189,
-              height: () => 200,
-              find: () => ({
-                on: () => {},
-              }),
-            }),
-            on: () => {},
-          };
-          render = rendering(scope, ctx.element, [], ctrl);
-          render.render();
-          render.ctrl.renderingCompleted();
-        });
-      };
-
-      func(ctx);
-    });
-  }
-
-  heatmapScenario('default options', function(ctx) {
-    ctx.setup(function(ctrl) {
-      ctrl.panel.yAxis.logBase = 1;
-    });
-
-    it('should draw correct Y axis', function() {
-      console.log('Runnign first test');
-      // console.log(render.ctrl.data);
-      console.log(render.scope.yScale);
-      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);
-}

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

@@ -1,320 +0,0 @@
-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: 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;
-            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 = angular.element(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).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']);
-    });
-  });
-
-  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).to.eql(['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);
-}