Karma to Jest: graph (refactor) (#12860)

* Begin conversion

* Test setup started

* Begin rewrite of graph

* Rewrite as class

* Some tests passing

* Fix binding errors

* Half tests passing

* Call buildFlotPairs. More tests passing

* All tests passing

* Remove test test

* Remove Karma test

* Make methods out of event functions

* Rename GraphElement
This commit is contained in:
Tobias Skarhed 2018-08-13 16:08:01 +02:00 committed by Torkel Ödegaard
parent c521f51780
commit 739bee0207
4 changed files with 1236 additions and 1140 deletions

File diff suppressed because it is too large Load Diff

View File

@ -13,6 +13,7 @@ import { axesEditorComponent } from './axes_editor';
class GraphCtrl extends MetricsPanelCtrl {
static template = template;
renderError: boolean;
hiddenSeries: any = {};
seriesList: any = [];
dataList: any = [];

View File

@ -0,0 +1,518 @@
jest.mock('app/features/annotations/all', () => ({
EventManager: function() {
return {
on: () => {},
addFlotEvents: () => {},
};
},
}));
jest.mock('app/core/core', () => ({
coreModule: {
directive: () => {},
},
appEvents: {
on: () => {},
},
}));
import '../module';
import { GraphCtrl } from '../module';
import { MetricsPanelCtrl } from 'app/features/panel/metrics_panel_ctrl';
import { PanelCtrl } from 'app/features/panel/panel_ctrl';
import config from 'app/core/config';
import TimeSeries from 'app/core/time_series2';
import moment from 'moment';
import $ from 'jquery';
import { graphDirective } from '../graph';
let ctx = <any>{};
let ctrl;
let scope = {
ctrl: {},
range: {
from: moment([2015, 1, 1]),
to: moment([2015, 11, 20]),
},
$on: () => {},
};
let link;
describe('grafanaGraph', function() {
const setupCtx = (beforeRender?) => {
config.bootData = {
user: {
lightTheme: false,
},
};
GraphCtrl.prototype = <any>{
...MetricsPanelCtrl.prototype,
...PanelCtrl.prototype,
...GraphCtrl.prototype,
height: 200,
panel: {
events: {
on: () => {},
},
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: jest.fn(),
hiddenSeries: {},
dashboard: {
getTimezone: () => 'browser',
},
range: {
from: moment([2015, 1, 1, 10]),
to: moment([2015, 1, 1, 22]),
},
};
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',
})
);
ctrl = new GraphCtrl(
{
$on: () => {},
},
{
get: () => {},
},
{}
);
$.plot = ctrl.plot = jest.fn();
scope.ctrl = ctrl;
link = graphDirective({}, {}, {}).link(scope, { width: () => 500, mouseleave: () => {}, bind: () => {} });
if (typeof beforeRender === 'function') {
beforeRender();
}
link.data = ctx.data;
//Emulate functions called by event listeners
link.buildFlotPairs(link.data);
link.render_panel();
ctx.plotData = ctrl.plot.mock.calls[0][1];
ctx.plotOptions = ctrl.plot.mock.calls[0][2];
};
describe('simple lines options', () => {
beforeEach(() => {
setupCtx(() => {
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).toBe(true);
expect(ctx.plotOptions.series.lines.fill).toBe(0.5);
expect(ctx.plotOptions.series.lines.lineWidth).toBe(3);
expect(ctx.plotOptions.series.lines.steps).toBe(true);
});
});
describe('sorting stacked series as legend. disabled', () => {
beforeEach(() => {
setupCtx(() => {
ctrl.panel.legend.sort = undefined;
ctrl.panel.stack = false;
});
});
it('should not modify order of time series', () => {
expect(ctx.plotData[0].alias).toBe('series1');
expect(ctx.plotData[1].alias).toBe('series2');
});
});
describe('sorting stacked series as legend. min descending order', () => {
beforeEach(() => {
setupCtx(() => {
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).toBe('series2');
expect(ctx.plotData[1].alias).toBe('series1');
});
});
describe('sorting stacked series as legend. min ascending order', () => {
beforeEach(() => {
setupCtx(() => {
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).toBe('series1');
expect(ctx.plotData[1].alias).toBe('series2');
});
});
describe('sorting stacked series as legend. stacking disabled', () => {
beforeEach(() => {
setupCtx(() => {
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).toBe('series1');
expect(ctx.plotData[1].alias).toBe('series2');
});
});
describe('sorting stacked series as legend. current descending order', () => {
beforeEach(() => {
setupCtx(() => {
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).toBe('series2');
expect(ctx.plotData[1].alias).toBe('series1');
});
});
describe('when logBase is log 10', () => {
beforeEach(() => {
setupCtx(() => {
ctx.data[0] = new TimeSeries({
datapoints: [[2000, 1], [0.002, 2], [0, 3], [-1, 4]],
alias: 'seriesAutoscale',
});
ctx.data[0].yaxis = 1;
ctx.data[1] = new TimeSeries({
datapoints: [[2000, 1], [0.002, 2], [0, 3], [-1, 4]],
alias: 'seriesFixedscale',
});
ctx.data[1].yaxis = 2;
ctrl.panel.yaxes[0].logBase = 10;
ctrl.panel.yaxes[1].logBase = 10;
ctrl.panel.yaxes[1].min = '0.05';
ctrl.panel.yaxes[1].max = '1500';
});
});
it('should apply axis transform, autoscaling (if necessary) and ticks', function() {
var axisAutoscale = ctx.plotOptions.yaxes[0];
expect(axisAutoscale.transform(100)).toBe(2);
expect(axisAutoscale.inverseTransform(-3)).toBeCloseTo(0.001);
expect(axisAutoscale.min).toBeCloseTo(0.001);
expect(axisAutoscale.max).toBe(10000);
expect(axisAutoscale.ticks.length).toBeCloseTo(8);
expect(axisAutoscale.ticks[0]).toBeCloseTo(0.001);
if (axisAutoscale.ticks.length === 7) {
expect(axisAutoscale.ticks[axisAutoscale.ticks.length - 1]).toBeCloseTo(1000);
} else {
expect(axisAutoscale.ticks[axisAutoscale.ticks.length - 1]).toBe(10000);
}
var axisFixedscale = ctx.plotOptions.yaxes[1];
expect(axisFixedscale.min).toBe(0.05);
expect(axisFixedscale.max).toBe(1500);
expect(axisFixedscale.ticks.length).toBe(5);
expect(axisFixedscale.ticks[0]).toBe(0.1);
expect(axisFixedscale.ticks[4]).toBe(1000);
});
});
describe('when logBase is log 10 and data points contain only zeroes', () => {
beforeEach(() => {
setupCtx(() => {
ctrl.panel.yaxes[0].logBase = 10;
ctx.data[0] = new TimeSeries({
datapoints: [[0, 1], [0, 2], [0, 3], [0, 4]],
alias: 'seriesAutoscale',
});
ctx.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)).toBe(2);
expect(axisAutoscale.inverseTransform(-3)).toBeCloseTo(0.001);
expect(axisAutoscale.min).toBe(undefined);
expect(axisAutoscale.max).toBe(undefined);
expect(axisAutoscale.ticks.length).toBe(2);
expect(axisAutoscale.ticks[0]).toBe(1);
expect(axisAutoscale.ticks[1]).toBe(2);
});
});
// y-min set 0 is a special case for log scale,
// this approximates it by setting min to 0.1
describe('when logBase is log 10 and y-min is set to 0 and auto min is > 0.1', () => {
beforeEach(() => {
setupCtx(() => {
ctrl.panel.yaxes[0].logBase = 10;
ctrl.panel.yaxes[0].min = '0';
ctx.data[0] = new TimeSeries({
datapoints: [[2000, 1], [4, 2], [500, 3], [3000, 4]],
alias: 'seriesAutoscale',
});
ctx.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)).toBe(2);
expect(axisAutoscale.inverseTransform(-3)).toBeCloseTo(0.001);
expect(axisAutoscale.min).toBe(0.1);
expect(axisAutoscale.max).toBe(10000);
expect(axisAutoscale.ticks.length).toBe(6);
expect(axisAutoscale.ticks[0]).toBe(0.1);
expect(axisAutoscale.ticks[5]).toBe(10000);
});
});
describe('when logBase is log 2 and y-min is set to 0 and num of ticks exceeds max', () => {
beforeEach(() => {
setupCtx(() => {
const heightForApprox5Ticks = 125;
ctrl.height = heightForApprox5Ticks;
ctrl.panel.yaxes[0].logBase = 2;
ctrl.panel.yaxes[0].min = '0';
ctx.data[0] = new TimeSeries({
datapoints: [[2000, 1], [4, 2], [500, 3], [3000, 4], [10000, 5], [100000, 6]],
alias: 'seriesAutoscale',
});
ctx.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).toBe(0.1);
expect(axisAutoscale.ticks.length).toBe(8);
expect(axisAutoscale.ticks[0]).toBe(0.1);
expect(axisAutoscale.ticks[7]).toBe(262144);
expect(axisAutoscale.max).toBe(262144);
});
it('should set axis max to be max tick value', function() {
expect(ctx.plotOptions.yaxes[0].max).toBe(262144);
});
});
describe('dashed lines options', () => {
beforeEach(() => {
setupCtx(() => {
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).toBe(true);
expect(ctx.plotOptions.series.dashes.lineWidth).toBe(2);
expect(ctx.plotOptions.series.dashes.show).toBe(true);
});
});
describe('should use timeStep for barWidth', () => {
beforeEach(() => {
setupCtx(() => {
ctrl.panel.bars = true;
ctx.data[0] = new TimeSeries({
datapoints: [[1, 10], [2, 20]],
alias: 'series1',
});
});
});
it('should set barWidth', function() {
expect(ctx.plotOptions.series.bars.barWidth).toBe(1 / 1.5);
});
});
describe('series option overrides, fill & points', () => {
beforeEach(() => {
setupCtx(() => {
ctrl.panel.lines = true;
ctrl.panel.fill = 5;
ctx.data[0].zindex = 10;
ctx.data[1].alias = 'test';
ctx.data[1].lines = { fill: 0.001 };
ctx.data[1].points = { show: true };
});
});
it('should match second series and fill zero, and enable points', function() {
expect(ctx.plotOptions.series.lines.fill).toBe(0.5);
expect(ctx.plotData[1].lines.fill).toBe(0.001);
expect(ctx.plotData[1].points.show).toBe(true);
});
});
describe('should order series order according to zindex', () => {
beforeEach(() => {
setupCtx(() => {
ctx.data[1].zindex = 1;
ctx.data[0].zindex = 10;
});
});
it('should move zindex 2 last', function() {
expect(ctx.plotData[0].alias).toBe('series2');
expect(ctx.plotData[1].alias).toBe('series1');
});
});
describe('when series is hidden', () => {
beforeEach(() => {
setupCtx(() => {
ctrl.hiddenSeries = { series2: true };
});
});
it('should remove datapoints and disable stack', function() {
expect(ctx.plotData[0].alias).toBe('series1');
expect(ctx.plotData[1].data.length).toBe(0);
expect(ctx.plotData[1].stack).toBe(false);
});
});
describe('when stack and percent', () => {
beforeEach(() => {
setupCtx(() => {
ctrl.panel.percentage = true;
ctrl.panel.stack = true;
});
});
it('should show percentage', function() {
var axis = ctx.plotOptions.yaxes[0];
expect(axis.tickFormatter(100, axis)).toBe('100%');
});
});
describe('when panel too narrow to show x-axis dates in same granularity as wide panels', () => {
//Set width to 10px
describe('and the range is less than 24 hours', function() {
beforeEach(() => {
setupCtx(() => {
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).toBe('%H:%M');
});
});
describe('and the range is less than one year', function() {
beforeEach(() => {
setupCtx(() => {
ctrl.range.from = moment([2015, 1, 1]);
ctrl.range.to = moment([2015, 11, 20]);
});
});
it('should format dates as month days', function() {
var axis = ctx.plotOptions.xaxis;
expect(axis.timeformat).toBe('%m/%d');
});
});
});
describe('when graph is histogram, and enable stack', () => {
beforeEach(() => {
setupCtx(() => {
ctrl.panel.xaxis.mode = 'histogram';
ctrl.panel.stack = true;
ctrl.hiddenSeries = {};
ctx.data[0] = new TimeSeries({
datapoints: [[100, 1], [100, 2], [200, 3], [300, 4]],
alias: 'series1',
});
ctx.data[1] = new TimeSeries({
datapoints: [[100, 1], [100, 2], [200, 3], [300, 4]],
alias: 'series2',
});
});
});
it('should calculate correct histogram', function() {
expect(ctx.plotData[0].data[0][0]).toBe(100);
expect(ctx.plotData[0].data[0][1]).toBe(2);
expect(ctx.plotData[1].data[0][0]).toBe(100);
expect(ctx.plotData[1].data[0][1]).toBe(2);
});
});
describe('when graph is histogram, and some series are hidden', () => {
beforeEach(() => {
setupCtx(() => {
ctrl.panel.xaxis.mode = 'histogram';
ctrl.panel.stack = false;
ctrl.hiddenSeries = { series2: true };
ctx.data[0] = new TimeSeries({
datapoints: [[100, 1], [100, 2], [200, 3], [300, 4]],
alias: 'series1',
});
ctx.data[1] = new TimeSeries({
datapoints: [[100, 1], [100, 2], [200, 3], [300, 4]],
alias: 'series2',
});
});
});
it('should calculate correct histogram', function() {
expect(ctx.plotData[0].data[0][0]).toBe(100);
expect(ctx.plotData[0].data[0][1]).toBe(2);
});
});
});

View File

@ -1,454 +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';
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 = {
height: 200,
panel: {
events: new Emitter(),
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;
scope.ctrl.events = ctrl.panel.events;
$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);
ctrl.events.emit('render-legend');
ctrl.events.emit('legend-rendering-complete');
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
);
graphScenario('when graph is histogram, and enable stack', function(ctx) {
ctx.setup(function(ctrl, data) {
ctrl.panel.xaxis.mode = 'histogram';
ctrl.panel.stack = true;
ctrl.hiddenSeries = {};
data[0] = new TimeSeries({
datapoints: [[100, 1], [100, 2], [200, 3], [300, 4]],
alias: 'series1',
});
data[1] = new TimeSeries({
datapoints: [[100, 1], [100, 2], [200, 3], [300, 4]],
alias: 'series2',
});
});
it('should calculate correct histogram', function() {
expect(ctx.plotData[0].data[0][0]).to.be(100);
expect(ctx.plotData[0].data[0][1]).to.be(2);
expect(ctx.plotData[1].data[0][0]).to.be(100);
expect(ctx.plotData[1].data[0][1]).to.be(2);
});
});
graphScenario('when graph is histogram, and some series are hidden', function(ctx) {
ctx.setup(function(ctrl, data) {
ctrl.panel.xaxis.mode = 'histogram';
ctrl.panel.stack = false;
ctrl.hiddenSeries = { series2: true };
data[0] = new TimeSeries({
datapoints: [[100, 1], [100, 2], [200, 3], [300, 4]],
alias: 'series1',
});
data[1] = new TimeSeries({
datapoints: [[100, 1], [100, 2], [200, 3], [300, 4]],
alias: 'series2',
});
});
it('should calculate correct histogram', function() {
expect(ctx.plotData[0].data[0][0]).to.be(100);
expect(ctx.plotData[0].data[0][1]).to.be(2);
});
});
});