IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-28 03:34:15 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #12897 from dehrax/12224-renderer

Browse Source 
WIP Karma to Jest: heatmap renderer (refactor)
This commit is contained in:
Marcus Efraimsson 2018-08-14 11:16:48 +02:00 committed by GitHub
commit ddc83c2a72
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 355 additions and 664 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

699
public/app/plugins/panel/heatmap/rendering.ts
View File

File diff suppressed because it is too large Load Diff

320
public/app/plugins/panel/heatmap/specs/renderer_specs.ts
View File

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