mirror of https://github.com/ColorlibHQ/gentelella
488 lines
19 KiB
JavaScript
488 lines
19 KiB
JavaScript
/* eslint-disable */
|
|
/* global $, describe, it, xit, xdescribe, after, afterEach, expect*/
|
|
|
|
describe('drawSeries', function() {
|
|
|
|
describe('drawSeriesLines', function() {
|
|
var minx = 0, maxx = 200, miny = 0, maxy = 100,
|
|
series, ctx, plotWidth, plotHeight, plotOffset,
|
|
drawSeriesLines = jQuery.plot.drawSeries.drawSeriesLines,
|
|
getColorOrGradient;
|
|
|
|
beforeEach(function() {
|
|
series = {
|
|
lines: {
|
|
lineWidth: 1
|
|
},
|
|
datapoints: {
|
|
format: null,
|
|
points: null,
|
|
pointsize: 2
|
|
},
|
|
xaxis: {
|
|
min: minx,
|
|
max: maxx,
|
|
p2c: function(p) { return p; }
|
|
},
|
|
yaxis: {
|
|
min: miny,
|
|
max: maxy,
|
|
p2c: function(p) { return p; }
|
|
}
|
|
};
|
|
ctx = setFixtures('<div id="test-container" style="width: 200px;height: 100px;border-style: solid;border-width: 1px"><canvas id="theCanvas" style="width: 100%; height: 100%" /></div>')
|
|
.find('#theCanvas')[0]
|
|
.getContext('2d');
|
|
plotWidth = 200;
|
|
plotHeight = 100;
|
|
plotOffset = { top: 0, left: 0 };
|
|
getColorOrGradient = jasmine.createSpy().and.returnValue('rgb(10,200,10)');
|
|
});
|
|
|
|
it('should draw nothing when the values are null', function () {
|
|
series.datapoints.points = [null, null, null, null];
|
|
|
|
spyOn(ctx, 'moveTo').and.callThrough();
|
|
spyOn(ctx, 'lineTo').and.callThrough();
|
|
|
|
drawSeriesLines(series, ctx, plotOffset, plotWidth, plotHeight, null, getColorOrGradient);
|
|
|
|
expect(ctx.moveTo).not.toHaveBeenCalled();
|
|
expect(ctx.lineTo).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('should draw lines for values', function () {
|
|
series.datapoints.points = [0, 0, 150, 25, 50, 75, 200, 100];
|
|
|
|
spyOn(ctx, 'lineTo').and.callThrough();
|
|
|
|
drawSeriesLines(series, ctx, plotOffset, plotWidth, plotHeight, null, getColorOrGradient);
|
|
|
|
expect(ctx.lineTo).toHaveBeenCalled();
|
|
});
|
|
|
|
it('should decimate when a decimate function is provided', function () {
|
|
series.datapoints.points = [-1, -1, 0, 0, 1, 1, 2, 2, 3, 3];
|
|
series.decimate = function() {
|
|
return [0, 0, 1, 1];
|
|
};
|
|
|
|
spyOn(ctx, 'moveTo').and.callThrough();
|
|
spyOn(ctx, 'lineTo').and.callThrough();
|
|
|
|
drawSeriesLines(series, ctx, plotOffset, plotWidth, plotHeight, null, getColorOrGradient);
|
|
|
|
expect(ctx.moveTo).toHaveBeenCalledWith(0, 0);
|
|
expect(ctx.lineTo).toHaveBeenCalledWith(1, 1);
|
|
});
|
|
|
|
it('should clip the lines when the points are outside the range of the axes', function () {
|
|
series.datapoints.points = [
|
|
minx - 8, 50,
|
|
maxx + 8, 50,
|
|
100, miny - 8,
|
|
100, maxy + 8,
|
|
minx - 8, 50];
|
|
|
|
spyOn(ctx, 'moveTo').and.callThrough();
|
|
spyOn(ctx, 'lineTo').and.callThrough();
|
|
|
|
drawSeriesLines(series, ctx, plotOffset, plotWidth, plotHeight, null, getColorOrGradient);
|
|
|
|
validatePointsAreInsideTheAxisRanges(
|
|
ctx.moveTo.calls.allArgs().concat(
|
|
ctx.lineTo.calls.allArgs()));
|
|
});
|
|
|
|
it('should clip the lines and the fill area when the points are outside the range of the axes', function () {
|
|
series.datapoints.points = [
|
|
minx - 8, 50,
|
|
maxx + 8, 50,
|
|
100, miny - 8,
|
|
100, maxy + 8,
|
|
minx - 8, 50];
|
|
series.lines.fill = true;
|
|
series.lines.fillColor = 'rgb(200, 200, 200)';
|
|
|
|
spyOn(ctx, 'moveTo').and.callThrough();
|
|
spyOn(ctx, 'lineTo').and.callThrough();
|
|
|
|
drawSeriesLines(series, ctx, plotOffset, plotWidth, plotHeight, null, getColorOrGradient);
|
|
|
|
validatePointsAreInsideTheAxisRanges(
|
|
ctx.moveTo.calls.allArgs().concat(
|
|
ctx.lineTo.calls.allArgs()));
|
|
});
|
|
|
|
it('should draw the lines when trailing step interpolation is enabled', function () {
|
|
series.datapoints.points = [0, 0, 150, 25, 50, 75, 200, 100];
|
|
series.lines.steps = true;
|
|
|
|
spyOn(ctx, 'lineTo').and.callThrough();
|
|
|
|
drawSeriesLines(series, ctx, plotOffset, plotWidth, plotHeight, null, getColorOrGradient);
|
|
|
|
expect(ctx.lineTo).toHaveBeenCalled();
|
|
});
|
|
|
|
it('should fill the area when trailing step interpolation is enabled', function () {
|
|
series.datapoints.points = [0, 0, 150, 25, 50, 75, 200, 100];
|
|
series.lines.steps = true;
|
|
series.lines.fill = true;
|
|
series.lines.lineWidth = 0;
|
|
|
|
spyOn(ctx, 'moveTo').and.callThrough();
|
|
spyOn(ctx, 'lineTo').and.callThrough();
|
|
spyOn(ctx, 'fill').and.callThrough();
|
|
|
|
drawSeriesLines(series, ctx, plotOffset, plotWidth, plotHeight, null, getColorOrGradient);
|
|
|
|
expect(ctx.moveTo).toHaveBeenCalled();
|
|
expect(ctx.lineTo).toHaveBeenCalled();
|
|
expect(ctx.fill).toHaveBeenCalled();
|
|
});
|
|
|
|
function validatePointsAreInsideTheAxisRanges(points) {
|
|
points.forEach(function(point) {
|
|
var x = point[0], y = point[1];
|
|
expect(minx <= x && x <= maxx).toBe(true);
|
|
expect(miny <= y && y <= maxy).toBe(true);
|
|
});
|
|
}
|
|
|
|
});
|
|
|
|
describe('drawSeriesPoints', function() {
|
|
var minx = 0, maxx = 200, miny = 0, maxy = 100,
|
|
series, ctx, plotWidth, plotHeight, plotOffset,
|
|
drawSeriesPoints = jQuery.plot.drawSeries.drawSeriesPoints,
|
|
dollar, getColorOrGradient;
|
|
|
|
beforeEach(function() {
|
|
series = {
|
|
points: {
|
|
show: true,
|
|
symbol: 'circle',
|
|
radius: 5
|
|
},
|
|
datapoints: {
|
|
format: null,
|
|
points: null,
|
|
pointsize: 2
|
|
},
|
|
xaxis: {
|
|
min: minx,
|
|
max: maxx,
|
|
p2c: function(p) { return p; }
|
|
},
|
|
yaxis: {
|
|
min: miny,
|
|
max: maxy,
|
|
p2c: function(p) { return p; }
|
|
}
|
|
};
|
|
ctx = setFixtures('<div id="test-container" style="width: 200px;height: 100px;border-style: solid;border-width: 1px"><canvas id="theCanvas" style="width: 100%; height: 100%" /></div>')
|
|
.find('#theCanvas')[0]
|
|
.getContext('2d');
|
|
plotWidth = 200;
|
|
plotHeight = 100;
|
|
plotOffset = { top: 0, left: 0 };
|
|
dollar = jasmine.createSpy().and.callFake(function (ctx, x, y, radius, shadow) {
|
|
ctx.strokeText('$', x, y);
|
|
});
|
|
getColorOrGradient = jasmine.createSpy().and.returnValue('rgb(10,200,10)');
|
|
});
|
|
|
|
it('should draw nothing when the values are null', function () {
|
|
series.datapoints.points = [null, null, null, null];
|
|
|
|
spyOn(ctx, 'moveTo').and.callThrough();
|
|
spyOn(ctx, 'lineTo').and.callThrough();
|
|
|
|
drawSeriesPoints(series, ctx, plotOffset, plotWidth, plotHeight, null, getColorOrGradient);
|
|
|
|
expect(ctx.moveTo).not.toHaveBeenCalled();
|
|
expect(ctx.lineTo).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('should draw circles by default for values', function () {
|
|
series.datapoints.points = [0, 0, 150, 25, 50, 75, 200, 100];
|
|
|
|
spyOn(ctx, 'arc').and.callThrough();
|
|
|
|
drawSeriesPoints(series, ctx, plotOffset, plotWidth, plotHeight, null, getColorOrGradient);
|
|
|
|
expect(ctx.arc).toHaveBeenCalled();
|
|
});
|
|
|
|
it('should draw custom symbols given by name for values', function () {
|
|
series.points.symbol = 'dollar';
|
|
series.datapoints.points = [0, 0, 150, 25, 50, 75, 200, 100];
|
|
|
|
drawSeriesPoints(series, ctx, plotOffset, plotWidth, plotHeight, {'dollar': dollar}, getColorOrGradient);
|
|
|
|
expect(dollar).toHaveBeenCalled();
|
|
});
|
|
|
|
it('should draw custom symbols given by function for values', function () {
|
|
series.points.symbol = 'dollar';
|
|
series.datapoints.points = [0, 0, 150, 25, 50, 75, 200, 100];
|
|
|
|
drawSeriesPoints(series, ctx, plotOffset, plotWidth, plotHeight, dollar, getColorOrGradient);
|
|
|
|
expect(dollar).toHaveBeenCalled();
|
|
});
|
|
|
|
it('should not fill when the symbol function doesn`t need fill', function () {
|
|
dollar.fill = undefined;
|
|
series.points.symbol = 'dollar';
|
|
series.datapoints.points = [0, 0, 150, 25, 50, 75, 200, 100];
|
|
|
|
spyOn(ctx, 'fill').and.callThrough();
|
|
|
|
drawSeriesPoints(series, ctx, plotOffset, plotWidth, plotHeight, dollar, getColorOrGradient);
|
|
|
|
expect(ctx.fill).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('should fill only once when the symbol function needs fill', function () {
|
|
dollar.fill = true;
|
|
series.points.symbol = 'dollar';
|
|
series.datapoints.points = [0, 0, 150, 25, 50, 75, 200, 100];
|
|
|
|
spyOn(ctx, 'fill').and.callThrough();
|
|
|
|
drawSeriesPoints(series, ctx, plotOffset, plotWidth, plotHeight, dollar, getColorOrGradient);
|
|
|
|
expect(ctx.fill).toHaveBeenCalled();
|
|
expect(ctx.fill.calls.count()).toBe(1);
|
|
});
|
|
});
|
|
|
|
describe('drawSeriesBars', function() {
|
|
var minx = -200, maxx = 200, miny = -100, maxy = 100,
|
|
series, ctx, plotWidth, plotHeight, plotOffset,
|
|
drawSeriesBars = jQuery.plot.drawSeries.drawSeriesBars,
|
|
getColorOrGradient;
|
|
|
|
beforeEach(function() {
|
|
series = {
|
|
bars: {
|
|
lineWidth: 1,
|
|
show: true,
|
|
fillColor: 'blue',
|
|
barWidth: 0.8
|
|
},
|
|
datapoints: {
|
|
format: null,
|
|
points: null,
|
|
pointsize: 2
|
|
},
|
|
xaxis: {
|
|
min: minx,
|
|
max: maxx,
|
|
autoScale: 'exact',
|
|
p2c: function(p) { return p; }
|
|
},
|
|
yaxis: {
|
|
min: miny,
|
|
max: maxy,
|
|
autoScale: 'exact',
|
|
p2c: function(p) { return p; }
|
|
}
|
|
};
|
|
ctx = setFixtures('<div id="test-container" style="width: 200px;height: 100px;border-style: solid;border-width: 1px"><canvas id="theCanvas" style="width: 100%; height: 100%" /></div>')
|
|
.find('#theCanvas')[0]
|
|
.getContext('2d');
|
|
plotWidth = 200;
|
|
plotHeight = 100;
|
|
plotOffset = { top: 0, left: 0 };
|
|
});
|
|
|
|
function getPixelColor(ctx, x, y) {
|
|
return ctx.getImageData(x, y, 1, 1).data;
|
|
}
|
|
|
|
function rgba(r, g, b, a) {
|
|
return [r, g, b, a * 255];
|
|
}
|
|
|
|
it('should draw nothing when the values are null', function () {
|
|
series.datapoints.points = [null, null, null, null];
|
|
|
|
spyOn(ctx, 'moveTo').and.callThrough();
|
|
spyOn(ctx, 'lineTo').and.callThrough();
|
|
|
|
drawSeriesBars(series, ctx, plotOffset, plotWidth, plotHeight, null, getColorOrGradient);
|
|
|
|
expect(ctx.moveTo).not.toHaveBeenCalled();
|
|
expect(ctx.lineTo).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('should work with NaN, Infinity and -Infinity values', function () {
|
|
spyOn(ctx, 'lineTo').and.callThrough();
|
|
|
|
series.datapoints.points = [Infinity, 0, NaN, NaN, 0, Infinity, 10, -Infinity, -Infinity, 10, 3, 5, 8, 2];
|
|
|
|
drawSeriesBars(series, ctx, plotOffset, plotWidth, plotHeight, null, getColorOrGradient);
|
|
|
|
expect(ctx.lineTo).toHaveBeenCalled();
|
|
});
|
|
|
|
it('should draw bars for values', function () {
|
|
series.datapoints.points = [0, 0, 150, 25, 50, 75, 200, 100];
|
|
|
|
spyOn(ctx, 'lineTo').and.callThrough();
|
|
|
|
drawSeriesBars(series, ctx, plotOffset, plotWidth, plotHeight, null, getColorOrGradient);
|
|
|
|
expect(ctx.lineTo).toHaveBeenCalled();
|
|
});
|
|
|
|
it('should draw bars using bottom points if provided', function () {
|
|
getColorOrGradient = jasmine.createSpy().and.returnValue('rgb(10,200,10)');
|
|
series.bars.fill = true;
|
|
|
|
series.datapoints.points = [0, 10, 0, 1, 10, 1, 2, 10, 2];
|
|
series.datapoints.pointsize = 3;
|
|
spyOn(ctx, 'fillRect').and.callThrough();
|
|
|
|
drawSeriesBars(series, ctx, plotOffset, plotWidth, plotHeight, null, getColorOrGradient);
|
|
|
|
var barHeights = ctx.fillRect.calls.allArgs().map(function (args) {
|
|
return args[3];
|
|
});
|
|
|
|
// bottom - top
|
|
expect(barHeights).toEqual([-10, -9, -8]);
|
|
});
|
|
|
|
it('should draw bars for fillTowards infinity', function () {
|
|
series.datapoints.points = [150, 25];
|
|
series.bars.fillTowards = Infinity;
|
|
|
|
var barWidth = series.bars.barWidth[0] || series.bars.barWidth;
|
|
var xaxis = series.xaxis,
|
|
yaxis = series.yaxis,
|
|
leftValue = xaxis.p2c(series.datapoints.points[0] - barWidth / 2),
|
|
rightValue = xaxis.p2c(series.datapoints.points[0] + barWidth / 2),
|
|
topValue = yaxis.p2c(maxy),
|
|
yValue = xaxis.p2c(series.datapoints.points[1]);
|
|
|
|
spyOn(ctx, 'lineTo').and.callThrough();
|
|
|
|
drawSeriesBars(series, ctx, plotOffset, plotWidth, plotHeight, null, getColorOrGradient);
|
|
|
|
expect(ctx.lineTo.calls.argsFor(0)).toEqual([leftValue, topValue]);
|
|
expect(ctx.lineTo.calls.argsFor(1)).toEqual([rightValue, yValue]);
|
|
expect(ctx.lineTo.calls.argsFor(2)).toEqual([leftValue, yValue]);
|
|
});
|
|
|
|
it('should draw bars for fillTowards -infinity', function () {
|
|
series.datapoints.points = [150, 25];
|
|
series.bars.fillTowards = -Infinity;
|
|
|
|
var barWidth = series.bars.barWidth[0] || series.bars.barWidth;
|
|
var xaxis = series.xaxis,
|
|
yaxis = series.yaxis,
|
|
leftValue = xaxis.p2c(series.datapoints.points[0] - barWidth / 2),
|
|
rightValue = xaxis.p2c(series.datapoints.points[0] + barWidth / 2),
|
|
bottomValue = yaxis.p2c(miny),
|
|
yValue = xaxis.p2c(series.datapoints.points[1]);
|
|
|
|
|
|
spyOn(ctx, 'lineTo').and.callThrough();
|
|
|
|
drawSeriesBars(series, ctx, plotOffset, plotWidth, plotHeight, null, getColorOrGradient);
|
|
|
|
expect(ctx.lineTo.calls.argsFor(0)).toEqual([leftValue, yValue]);
|
|
expect(ctx.lineTo.calls.argsFor(1)).toEqual([rightValue, yValue]);
|
|
expect(ctx.lineTo.calls.argsFor(2)).toEqual([rightValue, bottomValue]);
|
|
});
|
|
|
|
it('should draw bars for fillTowards zero', function () {
|
|
series.datapoints.points = [150, 25];
|
|
series.bars.fillTowards = 0;
|
|
|
|
var barWidth = series.bars.barWidth[0] || series.bars.barWidth;
|
|
var xaxis = series.xaxis,
|
|
yaxis = series.yaxis,
|
|
leftValue = xaxis.p2c(series.datapoints.points[0] - barWidth / 2),
|
|
rightValue = xaxis.p2c(series.datapoints.points[0] + barWidth / 2),
|
|
zeroValue = yaxis.p2c(0),
|
|
yValue = xaxis.p2c(series.datapoints.points[1]);
|
|
|
|
spyOn(ctx, 'lineTo').and.callThrough();
|
|
|
|
drawSeriesBars(series, ctx, plotOffset, plotWidth, plotHeight, null, getColorOrGradient);
|
|
|
|
expect(ctx.lineTo.calls.argsFor(0)).toEqual([leftValue, yValue]);
|
|
expect(ctx.lineTo.calls.argsFor(1)).toEqual([rightValue, yValue]);
|
|
expect(ctx.lineTo.calls.argsFor(2)).toEqual([rightValue, zeroValue]);
|
|
});
|
|
|
|
it('should draw bars with specified color', function () {
|
|
var fixture = setFixtures('<div id="demo-container" style="width: 800px;height: 600px">').find('#demo-container').get(0),
|
|
placeholder = $('<div id="placeholder" style="width: 100%;height: 100%">');
|
|
placeholder.appendTo(fixture);
|
|
$.plot(placeholder, [[[45, 25]]], {
|
|
series: {
|
|
bars: {
|
|
lineWidth: 1,
|
|
show: true,
|
|
fillColor: 'blue'
|
|
}
|
|
},
|
|
xaxis: { autoScale:'exact' }
|
|
});
|
|
var ctx = $(placeholder).find('.flot-base').get(0).getContext('2d')
|
|
insideColor1 = getPixelColor(ctx, ctx.canvas.width / 2, ctx.canvas.height / 2),
|
|
insideColor2 = getPixelColor(ctx, ctx.canvas.width / 2 + 35, ctx.canvas.height / 2 - 20),
|
|
insideColor3 =getPixelColor(ctx, ctx.canvas.width / 2 - 10, ctx.canvas.height / 2 + 30);
|
|
|
|
expect(Array.prototype.slice.call(insideColor1)).toEqual(rgba(0,0,255,1));
|
|
expect(Array.prototype.slice.call(insideColor2)).toEqual(rgba(0,0,255,1));
|
|
expect(Array.prototype.slice.call(insideColor3)).toEqual(rgba(0,0,255,1));
|
|
});
|
|
|
|
it('should use a barWidth based on points distance', function () {
|
|
var fixture = setFixtures('<div id="demo-container" style="width: 800px;height: 600px">').find('#demo-container').get(0),
|
|
placeholder = $('<div id="placeholder" style="width: 100%;height: 100%">');
|
|
placeholder.appendTo(fixture);
|
|
var testVector = [[[[[0.1, 1], [0.2, 10]]], 0.08],
|
|
[[[[1, 1], [2, 10]]], 0.8],
|
|
[[[[10, 1], [20, 10]]], 8],
|
|
[[[[1000, 1], [2000, 10], [2100, 10]]], 80],
|
|
[[[]], 0.8],
|
|
[[[[-5, 1], [30, 15], [20, 7], [5, 2]]], 8]],
|
|
plot;
|
|
for (var i = 0; i< testVector.length; i++) {
|
|
plot = $.plot(placeholder, testVector[i][0], {
|
|
series: {
|
|
bars: {
|
|
lineWidth: 1,
|
|
show: true,
|
|
}
|
|
},
|
|
});
|
|
|
|
var barWidth = plot.getData()[0].bars.barWidth[0] || plot.getData()[0].bars.barWidth;
|
|
expect(barWidth).toBeCloseTo(testVector[i][1], 4);
|
|
}
|
|
});
|
|
|
|
it('should be able to compute barWidth for NaN, Infinity and -Infinity values', function () {
|
|
var fixture = setFixtures('<div id="test-container" style="width: 600px;height: 400px"><canvas id="theCanvas" style="width: 100%; height: 100%" /></div>'),
|
|
placeholder = fixture.find('#test-container');
|
|
placeholder.appendTo(fixture);
|
|
|
|
var plot = $.plot(placeholder, [[[Infinity, 0], [0, Infinity], [10, -Infinity], [-Infinity, 10], [3, 5], [8, 2], [NaN, NaN]]], {series: series});
|
|
|
|
var axes = plot.getAxes();
|
|
|
|
var barWidth = plot.getData()[0].bars.barWidth[0] || plot.getData()[0].bars.barWidth;
|
|
expect(barWidth).toEqual(4);
|
|
});
|
|
});
|
|
});
|