| 1 | // Copyright (c) 2011 Google, Inc. |
| 2 | // |
| 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy |
| 4 | // of this software and associated documentation files (the "Software"), to deal |
| 5 | // in the Software without restriction, including without limitation the rights |
| 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
| 7 | // copies of the Software, and to permit persons to whom the Software is |
| 8 | // furnished to do so, subject to the following conditions: |
| 9 | // |
| 10 | // The above copyright notice and this permission notice shall be included in |
| 11 | // all copies or substantial portions of the Software. |
| 12 | // |
| 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
| 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
| 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
| 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
| 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
| 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN |
| 19 | // THE SOFTWARE. |
| 20 | |
| 21 | /** |
| 22 | * @fileoverview Test cases for drawing simple lines. |
| 23 | * |
| 24 | * @author konigsberg@google.com (Robert Konigsberg) |
| 25 | */ |
| 26 | |
| 27 | describe("simple-drawing", function() { |
| 28 | |
| 29 | var ZERO_TO_FIFTY = 'X,Y\n10,0\n20,50'; |
| 30 | |
| 31 | var _origFunc = Dygraph.getContext; |
| 32 | beforeEach(function() { |
| 33 | document.body.innerHTML = "<div id='graph'></div>"; |
| 34 | Dygraph.getContext = function(canvas) { |
| 35 | return new Proxy(_origFunc(canvas)); |
| 36 | } |
| 37 | }); |
| 38 | |
| 39 | afterEach(function() { |
| 40 | Dygraph.getContext = _origFunc; |
| 41 | }); |
| 42 | |
| 43 | it('testDrawSimpleRangePlusOne', function() { |
| 44 | var opts = { |
| 45 | axes: { |
| 46 | x: { |
| 47 | drawGrid: false, |
| 48 | drawAxis: false |
| 49 | }, |
| 50 | y: { |
| 51 | drawGrid: false, |
| 52 | drawAxis: false |
| 53 | } |
| 54 | }, |
| 55 | valueRange: [0,51] |
| 56 | }; |
| 57 | |
| 58 | var graph = document.getElementById("graph"); |
| 59 | var g = new Dygraph(graph, ZERO_TO_FIFTY, opts); |
| 60 | var htx = g.hidden_ctx_; |
| 61 | |
| 62 | CanvasAssertions.assertLineDrawn(htx, [0,320], [475,6.2745], { |
| 63 | strokeStyle: "#008080", |
| 64 | lineWidth: 1 |
| 65 | }); |
| 66 | g.destroy(); // to balance context saves and destroys. |
| 67 | CanvasAssertions.assertBalancedSaveRestore(htx); |
| 68 | }); |
| 69 | |
| 70 | // See http://code.google.com/p/dygraphs/issues/detail?id=185 |
| 71 | it('testDrawSimpleRangeZeroToFifty', function() { |
| 72 | var opts = { |
| 73 | axes : { |
| 74 | x : { |
| 75 | drawGrid: false, |
| 76 | drawAxis: false, |
| 77 | }, |
| 78 | y : { |
| 79 | drawGrid: false, |
| 80 | drawAxis: false, |
| 81 | } |
| 82 | }, |
| 83 | valueRange: [0,50] } |
| 84 | |
| 85 | var graph = document.getElementById("graph"); |
| 86 | var g = new Dygraph(graph, ZERO_TO_FIFTY, opts); |
| 87 | var htx = g.hidden_ctx_; |
| 88 | |
| 89 | var lines = CanvasAssertions.getLinesDrawn(htx, { |
| 90 | strokeStyle: "#008080", |
| 91 | lineWidth: 1 |
| 92 | }); |
| 93 | assert.equal(1, lines.length); |
| 94 | g.destroy(); // to balance context saves and destroys. |
| 95 | CanvasAssertions.assertBalancedSaveRestore(htx); |
| 96 | }); |
| 97 | |
| 98 | it('testDrawWithAxis', function() { |
| 99 | var graph = document.getElementById("graph"); |
| 100 | var g = new Dygraph(graph, ZERO_TO_FIFTY); |
| 101 | |
| 102 | var htx = g.hidden_ctx_; |
| 103 | g.destroy(); // to balance context saves and destroys. |
| 104 | CanvasAssertions.assertBalancedSaveRestore(htx); |
| 105 | }); |
| 106 | |
| 107 | /** |
| 108 | * Tests that it is drawing dashes, and it remember the dash history between |
| 109 | * points. |
| 110 | */ |
| 111 | it('testDrawSimpleDash', function() { |
| 112 | var opts = { |
| 113 | axes: { |
| 114 | x: { |
| 115 | drawGrid: false, |
| 116 | drawAxis: false |
| 117 | }, |
| 118 | y: { |
| 119 | drawGrid: false, |
| 120 | drawAxis: false |
| 121 | } |
| 122 | }, |
| 123 | series: { |
| 124 | 'Y1': {strokePattern: [25, 7, 7, 7]}, |
| 125 | }, |
| 126 | colors: ['#ff0000'], |
| 127 | labels: ['X', 'Y'] |
| 128 | }; |
| 129 | |
| 130 | var graph = document.getElementById("graph"); |
| 131 | // Set the dims so we pass if default changes. |
| 132 | graph.style.width='480px'; |
| 133 | graph.style.height='320px'; |
| 134 | var g = new Dygraph(graph, [[1, 4], [2, 5], [3, 3], [4, 7], [5, 9]], opts); |
| 135 | var htx = g.hidden_ctx_; |
| 136 | |
| 137 | // TODO(danvk): figure out a good way to restore this test. |
| 138 | // assert.equal(29, CanvasAssertions.numLinesDrawn(htx, "#ff0000")); |
| 139 | g.destroy(); // to balance context saves and destroys. |
| 140 | CanvasAssertions.assertBalancedSaveRestore(htx); |
| 141 | }); |
| 142 | |
| 143 | /** |
| 144 | * Tests that thick lines are drawn continuously. |
| 145 | * Regression test for http://code.google.com/p/dygraphs/issues/detail?id=328 |
| 146 | */ |
| 147 | it('testDrawThickLine', function() { |
| 148 | var opts = { |
| 149 | axes: { |
| 150 | x: { |
| 151 | drawGrid: false, |
| 152 | drawAxis: false |
| 153 | }, |
| 154 | y: { |
| 155 | drawGrid: false, |
| 156 | drawAxis: false |
| 157 | } |
| 158 | }, |
| 159 | strokeWidth: 15, |
| 160 | colors: ['#ff0000'], |
| 161 | labels: ['X', 'Y'] |
| 162 | }; |
| 163 | |
| 164 | var graph = document.getElementById("graph"); |
| 165 | // Set the dims so we pass if default changes. |
| 166 | graph.style.width='480px'; |
| 167 | graph.style.height='320px'; |
| 168 | var g = new Dygraph(graph, [[1, 2], [2, 5], [3, 2], [4, 7], [5, 0]], opts); |
| 169 | var htx = g.hidden_ctx_; |
| 170 | |
| 171 | // There's a big gap in the line at (2, 5) |
| 172 | // If the bug is fixed, then there should be some red going up from here. |
| 173 | var xy = g.toDomCoords(2, 5); |
| 174 | var x = Math.round(xy[0]), y = Math.round(xy[1]); |
| 175 | |
| 176 | var sampler = new PixelSampler(g); |
| 177 | assert.deepEqual([255,0,0,255], sampler.colorAtPixel(x, y)); |
| 178 | assert.deepEqual([255,0,0,255], sampler.colorAtPixel(x, y - 1)); |
| 179 | assert.deepEqual([255,0,0,255], sampler.colorAtPixel(x, y - 2)); |
| 180 | |
| 181 | // TODO(danvk): figure out a good way to restore this test. |
| 182 | // assert.equal(29, CanvasAssertions.numLinesDrawn(htx, "#ff0000")); |
| 183 | g.destroy(); // to balance context saves and destroys. |
| 184 | CanvasAssertions.assertBalancedSaveRestore(htx); |
| 185 | }); |
| 186 | |
| 187 | }); |