| 1 | /** |
| 2 | * @fileoverview Test cases for the per-axis grid options, including the new |
| 3 | * option "gridLinePattern". |
| 4 | * |
| 5 | * @author david.eberlein@ch.sauter-bc.com (Fr. Sauter AG) |
| 6 | */ |
| 7 | |
| 8 | import Dygraph from '../../src/dygraph'; |
| 9 | import * as utils from '../../src/dygraph-utils'; |
| 10 | |
| 11 | import Proxy from './Proxy'; |
| 12 | import CanvasAssertions from './CanvasAssertions'; |
| 13 | import Util from './Util'; |
| 14 | import PixelSampler from './PixelSampler'; |
| 15 | |
| 16 | describe("grid-per-axis", function() { |
| 17 | |
| 18 | cleanupAfterEach(); |
| 19 | useProxyCanvas(utils, Proxy); |
| 20 | |
| 21 | it('testIndependentGrids', function() { |
| 22 | var opts = { |
| 23 | width : 480, |
| 24 | height : 320, |
| 25 | errorBars : false, |
| 26 | labels : [ "X", "Left", "Right" ], |
| 27 | series : { |
| 28 | Left : { |
| 29 | axis : "y" |
| 30 | }, |
| 31 | Right : { |
| 32 | axis : "y2" |
| 33 | } |
| 34 | }, |
| 35 | axes : { |
| 36 | y2 : { |
| 37 | drawGrid : true, |
| 38 | independentTicks : true |
| 39 | } |
| 40 | } |
| 41 | }; |
| 42 | |
| 43 | var data = [ [ 1, 0, 0 ], [ 2, 12, 88 ], [ 3, 88, 122 ], [ 4, 63, 273 ], |
| 44 | [ 5, 110, 333 ] ]; |
| 45 | var graph = document.getElementById("graph"); |
| 46 | var g = new Dygraph(graph, data, opts); |
| 47 | |
| 48 | var htx = g.hidden_ctx_; |
| 49 | |
| 50 | // The expected gridlines |
| 51 | var yGridlines = [ 0, 20, 40, 60, 80, 100, 120 ]; |
| 52 | var y2Gridlines = [ 0, 50, 100, 150, 200, 250, 300, 350 ]; |
| 53 | var gridlines = [ yGridlines, y2Gridlines ]; |
| 54 | |
| 55 | function halfUp(x) { |
| 56 | return Math.round(x) + 0.5; |
| 57 | } |
| 58 | function halfDown(y) { |
| 59 | return Math.round(y) - 0.5; |
| 60 | } |
| 61 | |
| 62 | var attrs = {}, x, y; |
| 63 | x = halfUp(g.plotter_.area.x); |
| 64 | // Step through y(0) and y2(1) axis |
| 65 | for ( var axis = 0; axis < 2; axis++) { |
| 66 | // Step through all gridlines of the axis |
| 67 | for ( var i = 0; i < gridlines[axis].length; i++) { |
| 68 | // Check the labels: |
| 69 | var labels = Util.getYLabels(axis + 1); |
| 70 | assert.equal(gridlines[axis][i], labels[i], "Expected label not found."); |
| 71 | |
| 72 | // Check that the grid was drawn. |
| 73 | y = halfDown(g.toDomYCoord(gridlines[axis][i], axis)); |
| 74 | var p1 = [ x, y ]; |
| 75 | var p2 = [ x + g.plotter_.area.w, y ]; |
| 76 | CanvasAssertions.assertLineDrawn(htx, p1, p2, attrs); |
| 77 | } |
| 78 | } |
| 79 | }); |
| 80 | |
| 81 | it('testPerAxisGridColors', function() { |
| 82 | var opts = { |
| 83 | width : 480, |
| 84 | height : 320, |
| 85 | errorBars : false, |
| 86 | labels : [ "X", "Left", "Right" ], |
| 87 | series : { |
| 88 | Left : { |
| 89 | axis : "y" |
| 90 | }, |
| 91 | Right : { |
| 92 | axis : "y2" |
| 93 | } |
| 94 | }, |
| 95 | axes : { |
| 96 | y : { |
| 97 | gridLineColor : "#0000ff", |
| 98 | gridLineWidth : 2 |
| 99 | }, |
| 100 | y2 : { |
| 101 | drawGrid : true, |
| 102 | independentTicks : true, |
| 103 | gridLineColor : "#ff0000", |
| 104 | gridLineWidth : 2, |
| 105 | } |
| 106 | } |
| 107 | }; |
| 108 | var data = [ [ 1, 0, 0 ], [ 2, 12, 88 ], [ 3, 88, 122 ], [ 4, 63, 273 ], |
| 109 | [ 5, 110, 333 ] ]; |
| 110 | var graph = document.getElementById("graph"); |
| 111 | var g = new Dygraph(graph, data, opts); |
| 112 | var htx = g.hidden_ctx_; |
| 113 | |
| 114 | // The expected gridlines |
| 115 | var yGridlines = [ 20, 40, 60, 80, 100, 120 ]; |
| 116 | var y2Gridlines = [ 50, 100, 150, 200, 250, 300, 350 ]; |
| 117 | var gridlines = [ yGridlines, y2Gridlines ]; |
| 118 | var gridColors = [ [ 0, 0, 255, 255 ], [ 255, 0, 0, 255 ] ]; |
| 119 | |
| 120 | function halfUp(x) { |
| 121 | return Math.round(x) + 1; |
| 122 | } |
| 123 | function halfDown(y) { |
| 124 | return Math.round(y) - 1; |
| 125 | } |
| 126 | var x, y; |
| 127 | x = halfUp(g.plotter_.area.x); |
| 128 | var sampler = new PixelSampler(g); |
| 129 | // Step through y(0) and y2(1) axis |
| 130 | for ( var axis = 0; axis < 2; axis++) { |
| 131 | // Step through all gridlines of the axis |
| 132 | for ( var i = 0; i < gridlines[axis].length; i++) { |
| 133 | y = halfDown(g.toDomYCoord(gridlines[axis][i], axis)); |
| 134 | // Check the grid colors. |
| 135 | assert.deepEqual(gridColors[axis], sampler.colorAtPixel(x, y), |
| 136 | "Unexpected grid color found at pixel: x: " + x + "y: " + y); |
| 137 | } |
| 138 | } |
| 139 | }); |
| 140 | |
| 141 | it('testPerAxisGridWidth', function() { |
| 142 | var opts = { |
| 143 | width : 480, |
| 144 | height : 320, |
| 145 | errorBars : false, |
| 146 | gridLineColor : "#ff0000", |
| 147 | labels : [ "X", "Left", "Right" ], |
| 148 | series : { |
| 149 | Left : { |
| 150 | axis : "y" |
| 151 | }, |
| 152 | Right : { |
| 153 | axis : "y2" |
| 154 | } |
| 155 | }, |
| 156 | axes : { |
| 157 | x : { |
| 158 | gridLineWidth : 4 |
| 159 | }, |
| 160 | y : { |
| 161 | gridLineWidth : 2 |
| 162 | }, |
| 163 | y2 : { |
| 164 | drawGrid : true, |
| 165 | independentTicks : true, |
| 166 | gridLineWidth : 1 |
| 167 | } |
| 168 | } |
| 169 | }; |
| 170 | var data = [ [ 1, 0, 0 ], [ 2, 12, 88 ], [ 3, 88, 122 ], [ 4, 63, 273 ], |
| 171 | [ 5, 110, 333 ] ]; |
| 172 | var graph = document.getElementById("graph"); |
| 173 | var g = new Dygraph(graph, data, opts); |
| 174 | var htx = g.hidden_ctx_; |
| 175 | |
| 176 | // The expected gridlines |
| 177 | var yGridlines = [ 20, 40, 60, 80 ]; |
| 178 | var y2Gridlines = [ 50, 100, 150, 200, 250, 350 ]; |
| 179 | var gridlines = [ yGridlines, y2Gridlines ]; |
| 180 | var xGridlines = [ 2, 3, 4 ]; |
| 181 | var gridColor = [ 255, 0, 0 ]; |
| 182 | var emptyColor = [ 0, 0, 0 ]; |
| 183 | |
| 184 | function halfUp(x) { |
| 185 | return Math.round(x) + 1; |
| 186 | } |
| 187 | function halfDown(y) { |
| 188 | return Math.round(y) - 1; |
| 189 | } |
| 190 | var x, y; |
| 191 | x = halfUp(g.plotter_.area.x + 10); |
| 192 | |
| 193 | var sampler = new PixelSampler(g); |
| 194 | // Step through y(0) and y2(1) axis |
| 195 | for ( var axis = 0; axis < 2; axis++) { |
| 196 | // Step through all gridlines of the axis |
| 197 | for ( var i = 0; i < gridlines[axis].length; i++) { |
| 198 | y = halfDown(g.toDomYCoord(gridlines[axis][i], axis)); |
| 199 | // Ignore the alpha value |
| 200 | |
| 201 | // FIXME(pholden): this test fails with a context pixel ratio of 2. |
| 202 | var drawnPixeldown2 = sampler.rgbAtPixel(x, y - 2); |
| 203 | var drawnPixeldown1 = sampler.rgbAtPixel(x, y - 1); |
| 204 | var drawnPixel = sampler.rgbAtPixel(x, y); |
| 205 | var drawnPixelup1 = sampler.rgbAtPixel(x, y + 1); |
| 206 | var drawnPixelup2 = sampler.rgbAtPixel(x, y + 2); |
| 207 | // Check the grid width. |
| 208 | switch (axis) { |
| 209 | case 0: // y with 2 pixels width |
| 210 | assert.deepEqual(emptyColor, drawnPixeldown2, "Unexpected y-grid color found at pixel: x: " + x + "y: " + y); |
| 211 | assert.deepEqual(gridColor, drawnPixeldown1, "Unexpected y-grid color found at pixel: x: " + x + "y: " + y); |
| 212 | assert.deepEqual(gridColor, drawnPixel, "Unexpected y-grid color found at pixel: x: " + x + "y: " + y); |
| 213 | assert.deepEqual(gridColor, drawnPixelup1, "Unexpected y-grid color found at pixel: x: " + x + "y: " + y); |
| 214 | assert.deepEqual(emptyColor, drawnPixelup2, "Unexpected y-grid color found at pixel: x: " + x + "y: " + y); |
| 215 | break; |
| 216 | case 1: // y2 with 1 pixel width |
| 217 | assert.deepEqual(emptyColor, drawnPixeldown1, "Unexpected y2-grid color found at pixel: x: " + x + "y: " + y); |
| 218 | assert.deepEqual(gridColor, drawnPixel, "Unexpected y2-grid color found at pixel: x: " + x + "y: " + y); |
| 219 | assert.deepEqual(emptyColor, drawnPixelup1, "Unexpected y2-grid color found at pixel: x: " + x + "y: " + y); |
| 220 | break; |
| 221 | } |
| 222 | } |
| 223 | } |
| 224 | |
| 225 | // Check the x axis grid |
| 226 | y = halfDown(g.plotter_.area.y) + 10; |
| 227 | for ( var i = 0; i < xGridlines.length; i++) { |
| 228 | x = halfUp(g.toDomXCoord(xGridlines[i])); |
| 229 | assert.deepEqual(emptyColor, sampler.rgbAtPixel(x - 4, y), |
| 230 | "Unexpected x-grid color found at pixel: x: " + x + "y: " + y); |
| 231 | assert.deepEqual(gridColor, sampler.rgbAtPixel(x - 3, y), |
| 232 | "Unexpected x-grid color found at pixel: x: " + x + "y: " + y); |
| 233 | assert.deepEqual(gridColor, sampler.rgbAtPixel(x - 2, y), |
| 234 | "Unexpected x-grid color found at pixel: x: " + x + "y: " + y); |
| 235 | assert.deepEqual(gridColor, sampler.rgbAtPixel(x - 1, y), |
| 236 | "Unexpected x-grid color found at pixel: x: " + x + "y: " + y); |
| 237 | assert.deepEqual(gridColor, sampler.rgbAtPixel(x, y), |
| 238 | "Unexpected x-grid color found at pixel: x: " + x + "y: " + y); |
| 239 | assert.deepEqual(gridColor, sampler.rgbAtPixel(x + 1, y), |
| 240 | "Unexpected x-grid color found at pixel: x: " + x + "y: " + y); |
| 241 | assert.deepEqual(emptyColor, sampler.rgbAtPixel(x + 2, y), |
| 242 | "Unexpected x-grid color found at pixel: x: " + x + "y: " + y); |
| 243 | } |
| 244 | }); |
| 245 | |
| 246 | it('testGridLinePattern', function() { |
| 247 | var opts = { |
| 248 | width : 480, |
| 249 | height : 320, |
| 250 | errorBars : false, |
| 251 | labels : [ "X", "Left", "Right" ], |
| 252 | colors : [ "rgba(0,0,0,0)", "rgba(0,0,0,0)" ], |
| 253 | series : { |
| 254 | Left : { |
| 255 | axis : "y" |
| 256 | }, |
| 257 | Right : { |
| 258 | axis : "y2" |
| 259 | } |
| 260 | }, |
| 261 | axes : { |
| 262 | x : { |
| 263 | drawGrid: false, |
| 264 | drawAxis: false, |
| 265 | }, |
| 266 | y : { |
| 267 | drawAxis : false, |
| 268 | gridLineColor : "#0000ff", |
| 269 | gridLinePattern : [ 10, 10 ] |
| 270 | } |
| 271 | } |
| 272 | }; |
| 273 | var data = [ [ 1, 0, 0 ], [ 2, 12, 88 ], [ 3, 88, 122 ], [ 4, 63, 273 ], |
| 274 | [ 5, 110, 333 ] ]; |
| 275 | var graph = document.getElementById("graph"); |
| 276 | var g = new Dygraph(graph, data, opts); |
| 277 | var htx = g.hidden_ctx_; |
| 278 | |
| 279 | // The expected gridlines |
| 280 | var yGridlines = [ 0, 20, 40, 60, 80, 100, 120 ]; |
| 281 | |
| 282 | function halfUp(x) { |
| 283 | return Math.round(x) + 1; |
| 284 | } |
| 285 | function halfDown(y) { |
| 286 | return Math.round(y) - 1; |
| 287 | } |
| 288 | var x, y; |
| 289 | var sampler = new PixelSampler(g); |
| 290 | // Step through all gridlines of the axis |
| 291 | for (var i = 0; i < yGridlines.length; i++) { |
| 292 | y = halfDown(g.toDomYCoord(yGridlines[i], 0)); |
| 293 | // Step through the pixels of the line and test the pattern. |
| 294 | for (x = halfUp(g.plotter_.area.x); x < g.plotter_.area.w; x++) { |
| 295 | // avoid checking the edge pixels since they differ depending on the OS. |
| 296 | var pixelpos = x % 10; |
| 297 | if(pixelpos < 1 || pixelpos > 8) continue; |
| 298 | |
| 299 | // XXX: check what this looks like at master |
| 300 | |
| 301 | // Ignore alpha |
| 302 | var drawnPixel = sampler.rgbAtPixel(x, y); |
| 303 | var pattern = (Math.floor((x) / 10)) % 2; |
| 304 | switch (pattern) { |
| 305 | case 0: // fill |
| 306 | assert.deepEqual([ 0, 0, 255 ], drawnPixel, |
| 307 | "Unexpected filled grid-pattern color found at pixel: x: " + x + " y: " + y); |
| 308 | break; |
| 309 | case 1: // no fill |
| 310 | assert.deepEqual([ 0, 0, 0 ], drawnPixel, |
| 311 | "Unexpected empty grid-pattern color found at pixel: x: " + x + " y: " + y); |
| 312 | break; |
| 313 | } |
| 314 | } |
| 315 | } |
| 316 | }); |
| 317 | |
| 318 | }); |