/* 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);
});
});
});
|