Skip to content

N
nexpie-grafana-theme
Commit 53bab1a8 by Tobias Skarhed
Options

Remove tests and logs

parent 472b8809
Showing with 1 additions and 693 deletions
public/app/plugins/panel/heatmap/HeatmapRenderContainer.tsx deleted 100644 → 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 deleted 100644 → 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 deleted 100644 → 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);
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment