| 1 | /** |
| 2 | * @fileoverview Test cases for toDomCoords/toDataCoords |
| 3 | * |
| 4 | * @author danvk@google.com (Dan Vanderkam) |
| 5 | */ |
| 6 | |
| 7 | describe("to-dom-coords", function() { |
| 8 | |
| 9 | var origFunc = Dygraph.getContext; |
| 10 | beforeEach(function() { |
| 11 | document.body.innerHTML = "<div id='graph'></div>"; |
| 12 | Dygraph.getContext = function(canvas) { |
| 13 | return new Proxy(origFunc(canvas)); |
| 14 | } |
| 15 | }); |
| 16 | |
| 17 | afterEach(function() { |
| 18 | Dygraph.getContext = origFunc; |
| 19 | }); |
| 20 | |
| 21 | // Checks that toDomCoords and toDataCoords are inverses of one another. |
| 22 | var checkForInverses = function(g) { |
| 23 | var x_range = g.xAxisRange(); |
| 24 | var y_range = g.yAxisRange(); |
| 25 | for (var i = 0; i <= 10; i++) { |
| 26 | var x = x_range[0] + i / 10.0 * (x_range[1] - x_range[0]); |
| 27 | for (var j = 0; j <= 10; j++) { |
| 28 | var y = y_range[0] + j / 10.0 * (y_range[1] - y_range[0]); |
| 29 | assert.equal(x, g.toDataXCoord(g.toDomXCoord(x))); |
| 30 | assert.equal(y, g.toDataYCoord(g.toDomYCoord(y))); |
| 31 | } |
| 32 | } |
| 33 | }; |
| 34 | |
| 35 | it('testPlainChart', function() { |
| 36 | var opts = { |
| 37 | axes: { |
| 38 | x: { |
| 39 | drawAxis : false, |
| 40 | drawGrid : false |
| 41 | }, |
| 42 | y: { |
| 43 | drawAxis : false, |
| 44 | drawGrid : false |
| 45 | } |
| 46 | }, |
| 47 | rightGap: 0, |
| 48 | valueRange: [0, 100], |
| 49 | dateWindow: [0, 100], |
| 50 | width: 400, |
| 51 | height: 400, |
| 52 | colors: ['#ff0000'], |
| 53 | labels: ['X', 'Y'] |
| 54 | } |
| 55 | |
| 56 | var graph = document.getElementById("graph"); |
| 57 | var g = new Dygraph(graph, [ [0,0], [100,100] ], opts); |
| 58 | |
| 59 | assert.deepEqual([0, 100], g.toDataCoords(0, 0)); |
| 60 | assert.deepEqual([0, 0], g.toDataCoords(0, 400)); |
| 61 | assert.deepEqual([100, 100], g.toDataCoords(400, 0)); |
| 62 | assert.deepEqual([100, 0], g.toDataCoords(400, 400)); |
| 63 | |
| 64 | checkForInverses(g); |
| 65 | |
| 66 | // TODO(konigsberg): This doesn't really belong here. Move to its own test. |
| 67 | var htx = g.hidden_ctx_; |
| 68 | assert.equal(1, CanvasAssertions.numLinesDrawn(htx, '#ff0000')); |
| 69 | }); |
| 70 | |
| 71 | it('testChartWithAxes', function() { |
| 72 | var opts = { |
| 73 | axes: { |
| 74 | x: { |
| 75 | drawGrid: false, |
| 76 | drawAxis: true, |
| 77 | }, |
| 78 | y: { |
| 79 | drawGrid: false, |
| 80 | drawAxis: true, |
| 81 | axisLabelWidth: 100 |
| 82 | } |
| 83 | }, |
| 84 | xAxisHeight: 50, |
| 85 | axisTickSize: 0, |
| 86 | rightGap: 0, |
| 87 | valueRange: [0, 100], |
| 88 | dateWindow: [0, 100], |
| 89 | width: 500, |
| 90 | height: 450, |
| 91 | colors: ['#ff0000'], |
| 92 | labels: ['X', 'Y'] |
| 93 | } |
| 94 | |
| 95 | var graph = document.getElementById("graph"); |
| 96 | var g = new Dygraph(graph, [ [0,0], [100,100] ], opts); |
| 97 | |
| 98 | assert.deepEqual([0, 100], g.toDataCoords(100, 0)); |
| 99 | assert.deepEqual([0, 0], g.toDataCoords(100, 400)); |
| 100 | assert.deepEqual([100, 100], g.toDataCoords(500, 0)); |
| 101 | assert.deepEqual([100, 0], g.toDataCoords(500, 400)); |
| 102 | |
| 103 | checkForInverses(g); |
| 104 | }); |
| 105 | |
| 106 | it('testChartWithAxesAndLabels', function() { |
| 107 | var opts = { |
| 108 | axes: { |
| 109 | x: { |
| 110 | drawGrid: false, |
| 111 | drawAxis: true, |
| 112 | }, |
| 113 | y: { |
| 114 | drawGrid: false, |
| 115 | drawAxis: true, |
| 116 | axisLabelWidth: 100 |
| 117 | }, |
| 118 | }, |
| 119 | xAxisHeight: 50, |
| 120 | axisTickSize: 0, |
| 121 | rightGap: 0, |
| 122 | valueRange: [0, 100], |
| 123 | dateWindow: [0, 100], |
| 124 | width: 500, |
| 125 | height: 500, |
| 126 | colors: ['#ff0000'], |
| 127 | ylabel: 'This is the y-axis', |
| 128 | xlabel: 'This is the x-axis', |
| 129 | xLabelHeight: 25, |
| 130 | title: 'This is the title of the chart', |
| 131 | titleHeight: 25, |
| 132 | labels: ['X', 'Y'] |
| 133 | } |
| 134 | |
| 135 | var graph = document.getElementById("graph"); |
| 136 | var g = new Dygraph(graph, [ [0,0], [100,100] ], opts); |
| 137 | |
| 138 | assert.deepEqual([0, 100], g.toDataCoords(100, 25)); |
| 139 | assert.deepEqual([0, 0], g.toDataCoords(100, 425)); |
| 140 | assert.deepEqual([100, 100], g.toDataCoords(500, 25)); |
| 141 | assert.deepEqual([100, 0], g.toDataCoords(500, 425)); |
| 142 | |
| 143 | checkForInverses(g); |
| 144 | }); |
| 145 | |
| 146 | it('testYAxisLabelWidth', function() { |
| 147 | var opts = { |
| 148 | axes: { y: { axisLabelWidth: 100 } }, |
| 149 | axisTickSize: 0, |
| 150 | rightGap: 0, |
| 151 | valueRange: [0, 100], |
| 152 | dateWindow: [0, 100], |
| 153 | width: 500, |
| 154 | height: 500, |
| 155 | labels: ['X', 'Y'] |
| 156 | } |
| 157 | |
| 158 | var graph = document.getElementById("graph"); |
| 159 | var g = new Dygraph(graph, [ [0,0], [100,100] ], opts); |
| 160 | |
| 161 | assert.deepEqual([100, 0], g.toDomCoords(0, 100)); |
| 162 | assert.deepEqual([500, 486], g.toDomCoords(100, 0)); |
| 163 | |
| 164 | g.updateOptions({ |
| 165 | axes: { y: { axisLabelWidth: 50 }}, |
| 166 | }); |
| 167 | assert.deepEqual([50, 0], g.toDomCoords(0, 100)); |
| 168 | assert.deepEqual([500, 486], g.toDomCoords(100, 0)); |
| 169 | }); |
| 170 | |
| 171 | it('testAxisTickSize', function() { |
| 172 | var opts = { |
| 173 | axes: { y: { axisLabelWidth: 100 } }, |
| 174 | axisTickSize: 0, |
| 175 | rightGap: 0, |
| 176 | valueRange: [0, 100], |
| 177 | dateWindow: [0, 100], |
| 178 | width: 500, |
| 179 | height: 500, |
| 180 | labels: ['X', 'Y'] |
| 181 | } |
| 182 | |
| 183 | var graph = document.getElementById("graph"); |
| 184 | var g = new Dygraph(graph, [ [0,0], [100,100] ], opts); |
| 185 | |
| 186 | assert.deepEqual([100, 0], g.toDomCoords(0, 100)); |
| 187 | assert.deepEqual([500, 486], g.toDomCoords(100, 0)); |
| 188 | |
| 189 | g.updateOptions({ axisTickSize : 50 }); |
| 190 | assert.deepEqual([200, 0], g.toDomCoords(0, 100)); |
| 191 | assert.deepEqual([500, 386], g.toDomCoords(100, 0)); |
| 192 | }); |
| 193 | |
| 194 | it('testChartLogarithmic_YAxis', function() { |
| 195 | var opts = { |
| 196 | rightGap: 0, |
| 197 | valueRange: [1, 4], |
| 198 | dateWindow: [0, 10], |
| 199 | width: 400, |
| 200 | height: 400, |
| 201 | colors: ['#ff0000'], |
| 202 | axes: { |
| 203 | x: { |
| 204 | drawGrid: false, |
| 205 | drawAxis: false |
| 206 | }, |
| 207 | y: { |
| 208 | drawGrid: false, |
| 209 | drawAxis: false, |
| 210 | logscale: true |
| 211 | } |
| 212 | }, |
| 213 | labels: ['X', 'Y'] |
| 214 | } |
| 215 | |
| 216 | var graph = document.getElementById("graph"); |
| 217 | var g = new Dygraph(graph, [ [1,1], [4,4] ], opts); |
| 218 | |
| 219 | var epsilon = 1e-8; |
| 220 | assertDeepCloseTo([0, 4], g.toDataCoords(0, 0), epsilon); |
| 221 | assertDeepCloseTo([0, 1], g.toDataCoords(0, 400), epsilon); |
| 222 | assertDeepCloseTo([10, 4], g.toDataCoords(400, 0), epsilon); |
| 223 | assertDeepCloseTo([10, 1], g.toDataCoords(400, 400), epsilon); |
| 224 | assertDeepCloseTo([10, 2], g.toDataCoords(400, 200), epsilon); |
| 225 | |
| 226 | assert.deepEqual([0, 0], g.toDomCoords(0, 4)); |
| 227 | assert.deepEqual([0, 400], g.toDomCoords(0, 1)); |
| 228 | assert.deepEqual([400, 0], g.toDomCoords(10, 4)); |
| 229 | assert.deepEqual([400, 400], g.toDomCoords(10, 1)); |
| 230 | assert.deepEqual([400, 200], g.toDomCoords(10, 2)); |
| 231 | }); |
| 232 | |
| 233 | it('testChartLogarithmic_XAxis', function() { |
| 234 | var opts = { |
| 235 | rightGap: 0, |
| 236 | valueRange: [1, 1000], |
| 237 | dateWindow: [1, 1000], |
| 238 | width: 400, |
| 239 | height: 400, |
| 240 | colors: ['#ff0000'], |
| 241 | axes: { |
| 242 | x: { |
| 243 | drawGrid: false, |
| 244 | drawAxis: false, |
| 245 | logscale: true |
| 246 | }, |
| 247 | y: { |
| 248 | drawGrid: false, |
| 249 | drawAxis: false |
| 250 | } |
| 251 | }, |
| 252 | labels: ['X', 'Y'] |
| 253 | } |
| 254 | |
| 255 | var graph = document.getElementById("graph"); |
| 256 | var g = new Dygraph(graph, [ [1,1], [10, 10], [100,100], [1000,1000] ], opts); |
| 257 | |
| 258 | var epsilon = 1e-8; |
| 259 | assert.closeTo(1, g.toDataXCoord(0), epsilon); |
| 260 | assert.closeTo(5.623413251903489, g.toDataXCoord(100), epsilon); |
| 261 | assert.closeTo(31.62277660168378, g.toDataXCoord(200), epsilon); |
| 262 | assert.closeTo(177.8279410038921, g.toDataXCoord(300), epsilon); |
| 263 | assert.closeTo(1000, g.toDataXCoord(400), epsilon); |
| 264 | |
| 265 | assert.closeTo(0, g.toDomXCoord(1), epsilon); |
| 266 | assert.closeTo(3.6036036036036037, g.toDomXCoord(10), epsilon); |
| 267 | assert.closeTo(39.63963963963964, g.toDomXCoord(100), epsilon); |
| 268 | assert.closeTo(400, g.toDomXCoord(1000), epsilon); |
| 269 | |
| 270 | assert.closeTo(0, g.toPercentXCoord(1), epsilon); |
| 271 | assert.closeTo(0.3333333333, g.toPercentXCoord(10), epsilon); |
| 272 | assert.closeTo(0.6666666666, g.toPercentXCoord(100), epsilon); |
| 273 | assert.closeTo(1, g.toPercentXCoord(1000), epsilon); |
| 274 | |
| 275 | // Now zoom in and ensure that the methods return reasonable values. |
| 276 | g.updateOptions({dateWindow: [ 10, 100 ]}); |
| 277 | |
| 278 | assert.closeTo(10, g.toDataXCoord(0), epsilon); |
| 279 | assert.closeTo(17.78279410038923, g.toDataXCoord(100), epsilon); |
| 280 | assert.closeTo(31.62277660168379, g.toDataXCoord(200), epsilon); |
| 281 | assert.closeTo(56.23413251903491, g.toDataXCoord(300), epsilon); |
| 282 | assert.closeTo(100, g.toDataXCoord(400), epsilon); |
| 283 | |
| 284 | assert.closeTo(-40, g.toDomXCoord(1), epsilon); |
| 285 | assert.closeTo(0, g.toDomXCoord(10), epsilon); |
| 286 | assert.closeTo(400, g.toDomXCoord(100), epsilon); |
| 287 | assert.closeTo(4400, g.toDomXCoord(1000), epsilon); |
| 288 | |
| 289 | assert.closeTo(-1, g.toPercentXCoord(1), epsilon); |
| 290 | assert.closeTo(0, g.toPercentXCoord(10), epsilon); |
| 291 | assert.closeTo(1, g.toPercentXCoord(100), epsilon); |
| 292 | assert.closeTo(2, g.toPercentXCoord(1000), epsilon); |
| 293 | }); |
| 294 | |
| 295 | }); |