apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Browse Source 
* 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
pull/12911/head
Tobias Skarhed 7 years ago committed by Torkel Ödegaard
parent c521f51780
commit 739bee0207
4 changed files with 1201 additions and 1105 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1333
      public/app/plugins/panel/graph/graph.ts
  2. 1
      public/app/plugins/panel/graph/module.ts
  3. 518
      public/app/plugins/panel/graph/specs/graph.jest.ts
  4. 454
      public/app/plugins/panel/graph/specs/graph_specs.ts

1333
public/app/plugins/panel/graph/graph.ts
View File

File diff suppressed because it is too large Load Diff

1
public/app/plugins/panel/graph/module.ts
Unescape 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 = [];

518
public/app/plugins/panel/graph/specs/graph.jest.ts
Unescape 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);
});
});
});

454
public/app/plugins/panel/graph/specs/graph_specs.ts
Unescape 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);
});
});
});
Write Preview
Loading…
Cancel
Save