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