diff --git a/public/app/plugins/panel/heatmap/HeatmapRenderContainer.tsx b/public/app/plugins/panel/heatmap/HeatmapRenderContainer.tsx deleted file mode 100644 index e5982a485ca..00000000000 --- a/public/app/plugins/panel/heatmap/HeatmapRenderContainer.tsx +++ /dev/null @@ -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
; - } -} diff --git a/public/app/plugins/panel/heatmap/rendering.ts b/public/app/plugins/panel/heatmap/rendering.ts index 6d3d21420e0..e3318ea7e23 100644 --- a/public/app/plugins/panel/heatmap/rendering.ts +++ b/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; diff --git a/public/app/plugins/panel/heatmap/specs/renderer.jest.ts b/public/app/plugins/panel/heatmap/specs/renderer.jest.ts deleted file mode 100644 index a5546624d65..00000000000 --- a/public/app/plugins/panel/heatmap/specs/renderer.jest.ts +++ /dev/null @@ -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 = {}; - 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 = ` - //
- //
- //
- //
- //
`; - - // 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); -} diff --git a/public/app/plugins/panel/heatmap/specs/renderer_specs.ts b/public/app/plugins/panel/heatmap/specs/renderer_specs.ts deleted file mode 100644 index f52b6d1d985..00000000000 --- a/public/app/plugins/panel/heatmap/specs/renderer_specs.ts +++ /dev/null @@ -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 = ` -
-
-
-
-
`; - - 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); -}