X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;ds=sidebyside;f=auto_tests%2Ftests%2Fconnect_separated_points.js;h=2636b41e6bcb24f60f544bf6981fcd23c871b8f9;hb=cf4a09a9048ae6089f67c32c6d9ae55a8458873f;hp=65baf91f3e7fbe685049151dace99900a77802e1;hpb=d413f7917332b8cdb23c2775dd25e928ceb47ed4;p=dygraphs.git diff --git a/auto_tests/tests/connect_separated_points.js b/auto_tests/tests/connect_separated_points.js index 65baf91..2636b41 100644 --- a/auto_tests/tests/connect_separated_points.js +++ b/auto_tests/tests/connect_separated_points.js @@ -1,96 +1,451 @@ -/** - * @fileoverview Test cases for the option "connectSeparatedPoints" especially for the scenario where not every series has a value for each timestamp. - * - * @author julian.eichstaedt@ch.sauter-bc.com (Fr. Sauter AG) - */ -var StepTestCase = TestCase("connect_separated_points"); - -StepTestCase.prototype.setUp = function() { - document.body.innerHTML = "
"; -}; - -StepTestCase.origFunc = Dygraph.getContext; - -StepTestCase.prototype.setUp = function() { - document.body.innerHTML = ""; - Dygraph.getContext = function(canvas) { - return new Proxy(StepTestCase.origFunc(canvas)); - }; -}; - -StepTestCase.prototype.tearDown = function() { - Dygraph.getContext = StepTestCase.origFunc; -}; - -StepTestCase.prototype.testEdgePoints = function() { - var opts = { - width: 480, - height: 320, -// drawXGrid: false, -// drawYGrid: false, -// drawXAxis: false, -// drawYAxis: false, - errorBars: false, - labels: ["x", "series1", "series2"], - connectSeparatedPoints: true, - dateWindow: [1.5,6.5] - }; - - var data = [ - [0,0,2], - [1,null,0.5], - [2,0.5,1], - [3,1,-1], - [4,2,-2], - [5,2.5,-2.5], - [6,3,-3], - [7,4,null], - [8,4,-4], - ]; - - var graph = document.getElementById("graph"); - var g = new Dygraph(graph, data, opts); - - htx = g.hidden_ctx_; - - var attrs = {}; - - //Test if series1 is drawn correctly. - //------------------------------------ - - // The first point of the first series - var x1 = data[0][0]; - var y1 = data[0][1]; - var xy1 = g.toDomCoords(x1, y1); - - // The third (the second valid) point of the first series - // This series has no value at the second position. - var x2 = data[2][0]; - var y2 = data[2][1]; - var xy2 = g.toDomCoords(x2, y2); - - // Check if both points are connected at the left edge of the canvas and if the option "connectSeparatedPoints" works properly - // even if the point is outside the visible range and only one series has a valid value for this point. - CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); - - //Test if series2 is drawn correctly. - //------------------------------------ - - // The sixth point of the second series - // Use the sixth and NOT the seventh point despite this series has eight points - // since this series has no value at the seventh position. - var x1 = data[6][0]; - var y1 = data[6][2]; - var xy1 = g.toDomCoords(x1, y1); - - // The last point of the second series. - var x2 = data[8][0]; - var y2 = data[8][2]; - var xy2 = g.toDomCoords(x2, y2); - - // Check if both points are connected at the right edge of the canvas and if the option "connectSeparatedPoints" works properly - // even if the point is outside the visible range and only one series has a valid value for this point. - CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); - - -}; +/** + * @fileoverview Test cases for the option "connectSeparatedPoints" especially for the scenario where not every series has a value for each timestamp. + * + * @author julian.eichstaedt@ch.sauter-bc.com (Fr. Sauter AG) + */ +describe("connect-separated-points", function() { + +beforeEach(function() { + document.body.innerHTML = ""; +}); + +var origFunc = Dygraph.getContext; + +beforeEach(function() { + document.body.innerHTML = ""; + Dygraph.getContext = function(canvas) { + return new Proxy(origFunc(canvas)); + }; +}); + +afterEach(function() { + Dygraph.getContext = origFunc; +}); + +it('testEdgePointsSimple', function() { + var opts = { + width: 480, + height: 320, + labels: ["x", "series1", "series2", "additionalSeries"], + connectSeparatedPoints: true, + dateWindow: [2.5,7.5] + }; + + var data = [ + [0,-1,0,null], + [1,null,2,null], + [2,null,4,null], + [3,0.5,0,null], + [4,1,-1,5], + [5,2,-2,6], + [6,2.5,-2.5,7], + [7,3,-3,null], + [8,4,null,null], + [9,4,-10,null] + ]; + + var graph = document.getElementById("graph"); + var g = new Dygraph(graph, data, opts); + + var htx = g.hidden_ctx_; + + var attrs = {}; + + // Test if series1 is drawn correctly. + // ------------------------------------ + + // The first point of the first series + var x1 = data[0][0]; + var y1 = data[0][1]; + var xy1 = g.toDomCoords(x1, y1); + + // The next valid point of this series + var x2 = data[3][0]; + var y2 = data[3][1]; + var xy2 = g.toDomCoords(x2, y2); + + // Check if both points are connected at the left edge of the canvas and if the option "connectSeparatedPoints" works properly + // even if the point is outside the visible range and only one series has a valid value for this point. + CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); + + // Test if series2 is drawn correctly. + // ------------------------------------ + + // The last point of the second series. + var x2 = data[9][0]; + var y2 = data[9][2]; + var xy2 = g.toDomCoords(x2, y2); + + // The previous valid point of this series + var x1 = data[7][0]; + var y1 = data[7][2]; + var xy1 = g.toDomCoords(x1, y1); + + // Check if both points are connected at the right edge of the canvas and if the option "connectSeparatedPoints" works properly + // even if the point is outside the visible range and only one series has a valid value for this point. + CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); +}); + +it('testEdgePointsCustomBars', function() { + var opts = { + width: 480, + height: 320, + labels: ["x", "series1", "series2", "additionalSeries"], + connectSeparatedPoints: true, + dateWindow: [2.5,7.5], + customBars: true + }; + + var data = [ + [0,[4,5,6], [1,2,3], [null, null, null]], + [1,[null,null,null], [2,3,4], [null, null, null]], + [2,[null,null,null], [3,4,5], [null, null, null]], + [3,[0,1,2], [2,3,4], [null, null, null]], + [4,[1,2,3], [2,3,4], [4, 5, 6]], + [5,[1,2,3], [3,4,5], [4, 5, 6]], + [6,[0,1,2], [4,5,6], [5, 6, 7]], + [7,[0,1,2], [4,5,6], [null, null, null]], + [8,[2,3,4], [null,null,null], [null, null, null]], + [9,[0,1,2], [2,4,9], [null, null, null]] + + ]; + + var graph = document.getElementById("graph"); + var g = new Dygraph(graph, data, opts); + + var htx = g.hidden_ctx_; + + var attrs = {}; + + + // Test if values of the series1 are drawn correctly. + // ------------------------------------ + + // The first point of the first series + var x1 = data[0][0]; + var y1 = data[0][1][1]; + var xy1 = g.toDomCoords(x1, y1); + + // The next valid point of this series + var x2 = data[3][0]; + var y2 = data[3][1][1]; + var xy2 = g.toDomCoords(x2, y2); + + // Check if both points are connected at the left edge of the canvas and if the option "connectSeparatedPoints" works properly + // even if the point is outside the visible range and only one series has a valid value for this point. + CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); + + // Test if the custom bars of the series1 are drawn correctly + // -------------------------------------------- + + // The first min-point of this series + x1 = data[0][0]; + y1 = data[0][1][0]; + xy1 = g.toDomCoords(x1, y1); + + // The next valid min-point of the second series. + x2 = data[3][0]; + y2 = data[3][1][0]; + xy2 = g.toDomCoords(x2, y2); + + // Check if both points are connected at the left edge of the canvas and if the option "connectSeparatedPoints" works properly + // even if the point is outside the visible range and only one series has a valid value for this point. + CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); + + // The first max-point of this series + x1 = data[0][0]; + y1 = data[0][1][2]; + xy1 = g.toDomCoords(x1, y1); + + // The next valid max-point of the second series. + x2 = data[3][0]; + y2 = data[3][1][2]; + xy2 = g.toDomCoords(x2, y2); + + // Check if both points are connected at the left edge of the canvas and if the option "connectSeparatedPoints" works properly + // even if the point is outside the visible range and only one series has a valid value for this point. + CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); + + // Test if values of the series2 are drawn correctly. + // ------------------------------------ + + // The last point of the second series. + var x2 = data[9][0]; + var y2 = data[9][2][1]; + var xy2 = g.toDomCoords(x2, y2); + + // The previous valid point of this series + var x1 = data[7][0]; + var y1 = data[7][2][1]; + var xy1 = g.toDomCoords(x1, y1); + + // Check if both points are connected at the right edge of the canvas and if the option "connectSeparatedPoints" works properly + // even if the point is outside the visible range and only one series has a valid value for this point. + CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); + + // Test if the custom bars of the series2 are drawn correctly + // -------------------------------------------- + + // The last min-point of the second series. + x2 = data[9][0]; + y2 = data[9][2][0]; + xy2 = g.toDomCoords(x2, y2); + + // The previous valid min-point of this series + x1 = data[7][0]; + y1 = data[7][2][0]; + xy1 = g.toDomCoords(x1, y1); + + // Check if both points are connected at the right edge of the canvas and if the option "connectSeparatedPoints" works properly + // even if the point is outside the visible range and only one series has a valid value for this point. + CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); + + // The last max-point of the second series. + x2 = data[9][0]; + y2 = data[9][2][2]; + xy2 = g.toDomCoords(x2, y2); + + // The previous valid max-point of this series + x1 = data[7][0]; + y1 = data[7][2][2]; + xy1 = g.toDomCoords(x1, y1); + + // Check if both points are connected at the right edge of the canvas and if the option "connectSeparatedPoints" works properly + // even if the point is outside the visible range and only one series has a valid value for this point. + CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); +}); + +it('testEdgePointsErrorBars', function() { + var opts = { + width: 480, + height: 320, + labels: ["x", "series1", "series2", "seriesTestHelper"], + connectSeparatedPoints: true, + dateWindow: [2,7.5], + errorBars: true + + }; + + var data = [ + [0,[5,1], [2,1], [null,null]], + [1,[null,null], [3,1], [null,null]], + [2,[null,null], [4,1], [null,null]], + [3,[1,1], [3,1], [null,null]], + [4,[2,1], [3,1], [5,1]], + [5,[2,1], [4,1], [5,1]], + [6,[1,1], [5,1], [6,1]], + [7,[1,1], [5,1], [null,null]], + [8,[3,1], [null,null], [null,null]], + [9,[1,1], [4,1], [null,null]] + + ]; + + var graph = document.getElementById("graph"); + var g = new Dygraph(graph, data, opts); + + var htx = g.hidden_ctx_; + + var attrs = {}; + + + // Test if values of the series1 are drawn correctly. + // ------------------------------------ + + // The first point of the first series + var x1 = data[0][0]; + var y1 = data[0][1][0]; + var xy1 = g.toDomCoords(x1, y1); + + // The next valid point of this series + var x2 = data[3][0]; + var y2 = data[3][1][0]; + var xy2 = g.toDomCoords(x2, y2); + + // Check if both points are connected at the left edge of the canvas and if the option "connectSeparatedPoints" works properly + // even if the point is outside the visible range and only one series has a valid value for this point. + CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); + + // Test if the upper error bars of series1 are drawn correctly + // -------------------------------------------- + + // The first upper error-point of this series + x1 = data[0][0]; + var y1error = y1 + (data[0][1][1]*2); + xy1 = g.toDomCoords(x1, y1error); + + // The next valid upper error-point of the second series. + x2 = data[3][0]; + var y2error = y2 + (data[3][1][1]*2); + xy2 = g.toDomCoords(x2, y2error); + + // Check if both points are connected at the left edge of the canvas and if the option "connectSeparatedPoints" works properly + // even if the point is outside the visible range and only one series has a valid value for this point. + CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); + + // Test if the lower error bars of series1 are drawn correctly + // -------------------------------------------- + + // The first lower error-point of this series + x1 = data[0][0]; + y1error = y1 - (data[0][1][1]*2); + xy1 = g.toDomCoords(x1, y1error); + + //The next valid lower error-point of the second series. + x2 = data[3][0]; + y2error = y2 - (data[3][1][1]*2); + xy2 = g.toDomCoords(x2, y2error); + + // Check if both points are connected at the left edge of the canvas and if the option "connectSeparatedPoints" works properly + // even if the point is outside the visible range and only one series has a valid value for this point. + CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); + + + // Test if values of the series2 are drawn correctly. + // ------------------------------------ + + // The last point of this series + x2 = data[9][0]; + y2 = data[9][2][0]; + xy2 = g.toDomCoords(x2, y2); + + // The previous valid point of the first series + x1 = data[7][0]; + y1 = data[7][2][0]; + xy1 = g.toDomCoords(x1, y1); + + // Check if both points are connected at the right edge of the canvas and if the option "connectSeparatedPoints" works properly + // even if the point is outside the visible range and only one series has a valid value for this point. + CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); + + // Test if the upper error bars of series2 are drawn correctly + // -------------------------------------------- + + // The last upper error-point of the second series. + x2 = data[9][0]; + var y2error = y2 + (data[9][2][1]*2); + xy2 = g.toDomCoords(x2, y2error); + + // The previous valid upper error-point of this series + x1 = data[7][0]; + var y1error = y1 + (data[7][2][1]*2); + xy1 = g.toDomCoords(x1, y1error); + + // Check if both points are connected at the right edge of the canvas and if the option "connectSeparatedPoints" works properly + // even if the point is outside the visible range and only one series has a valid value for this point. + CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); + + // Test if the lower error bars of series1 are drawn correctly + // -------------------------------------------- + + // The last lower error-point of the second series. + x2 = data[9][0]; + y2error = y2 - (data[9][2][1]*2); + xy2 = g.toDomCoords(x2, y2error); + + // The previous valid lower error-point of this series + x1 = data[7][0]; + y1error = y1 - (data[7][2][1]*2); + xy1 = g.toDomCoords(x1, y1error); + + // Check if both points are connected at the right edge of the canvas and if the option "connectSeparatedPoints" works properly + // even if the point is outside the visible range and only one series has a valid value for this point. + CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); +}); + +it('testConnectSeparatedPointsPerSeries', function() { + var assertExpectedLinesDrawnPerSeries = function(htx, expectedSeries1, expectedSeries2, expectedSeries3) { + var expected = [expectedSeries1, expectedSeries2, expectedSeries3]; + var actual = [ + CanvasAssertions.numLinesDrawn(htx, "#ff0000"), + CanvasAssertions.numLinesDrawn(htx, "#00ff00"), + CanvasAssertions.numLinesDrawn(htx, "#0000ff")]; + assert.deepEqual(expected, actual); + } + + var g = new Dygraph(document.getElementById("graph"), + [ + [1, 10, 10, 10], + [2, 15, 11, 12], + [3, null, null, 12], + [4, 20, 14, null], + [5, 15, null, 17], + [6, 18, null, null], + [7, 12, 14, null] + ], + { + labels: ["Date","Series1","Series2","Series3"], + connectSeparatedPoints: false, + colors: ["#ff0000", "#00ff00", "#0000ff"] + }); + + var htx = g.hidden_ctx_; + assertExpectedLinesDrawnPerSeries(htx, 4, 1, 2); + + Proxy.reset(htx); + g.updateOptions({ + connectSeparatedPoints : true, + }); + assertExpectedLinesDrawnPerSeries(htx, 5, 3, 3); + + Proxy.reset(htx); + g.updateOptions({ + connectSeparatedPoints : false, + series : { + Series1 : { connectSeparatedPoints : true } + } + }); + assertExpectedLinesDrawnPerSeries(htx, 5, 1, 2); + + + Proxy.reset(htx); + g.updateOptions({ + connectSeparatedPoints : true, + series : { + Series1 : { connectSeparatedPoints : false } + } + }); + assertExpectedLinesDrawnPerSeries(htx, 4, 3, 3); +}); + +it('testNaNErrorBars', function() { + var data = [ + [0,[1,2,3]], + [1,[2,3,4]], + [2,[3,4,5]], + [3,[null,null,null]], + [4,[2,3,4]], + [5,[3,4,5]], + [6,[2,3,4]], + [7,[NaN,NaN,NaN]], + [8,[2,3,4]], + [9,[2,3,4]], + [10,[2,3,4]], + [11,[2,3,4]] + ]; + + var opts = { + labels: ["x", "y"], + colors: ["#ff0000"], + customBars: true, + connectSeparatedPoints: true + }; + + var graph = document.getElementById("graph"); + var g = new Dygraph(graph, data, opts); + + var htx = g.hidden_ctx_; + + var attrs = {}; + + // Line should be drawn across the null gap. + CanvasAssertions.assertLineDrawn(htx, + g.toDomCoords(data[2][0], data[2][1][1]), + g.toDomCoords(data[4][0], data[4][1][1]), + attrs); + + // No line across the NaN gap, and a single line (not two) + // across the null gap. + assert.equal(8, CanvasAssertions.numLinesDrawn(htx, '#ff0000')); +}); + +});