to_dom_coords.js

   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
 230 it('testChartLogarithmic_XAxis', function() {
 231   var opts = {
 232     rightGap: 0,
 233     valueRange: [1, 1000],
 234     dateWindow: [1, 1000],
 235     width: 400,
 236     height: 400,
 237     colors: ['#ff0000'],
 238     axes: {
 239       x: {
 240         drawGrid: false,
 241         drawAxis: false,
 242         logscale: true
 243       },
 244       y: {
 245         drawGrid: false,
 246         drawAxis: false
 247       }
 248     },
 249     labels: ['X', 'Y']
 250   }
 251
 252   var graph = document.getElementById("graph");
 253   var g = new Dygraph(graph, [ [1,1], [10, 10], [100,100], [1000,1000] ], opts);
 254
 255   var epsilon = 1e-8;
 256   assert.closeTo(1, g.toDataXCoord(0), epsilon);
 257   assert.closeTo(5.623413251903489, g.toDataXCoord(100), epsilon);
 258   assert.closeTo(31.62277660168378, g.toDataXCoord(200), epsilon);
 259   assert.closeTo(177.8279410038921, g.toDataXCoord(300), epsilon);
 260   assert.closeTo(1000, g.toDataXCoord(400), epsilon);
 261
 262   assert.closeTo(0, g.toDomXCoord(1), epsilon);
 263   assert.closeTo(3.6036036036036037, g.toDomXCoord(10), epsilon);
 264   assert.closeTo(39.63963963963964, g.toDomXCoord(100), epsilon);
 265   assert.closeTo(400, g.toDomXCoord(1000), epsilon);
 266
 267   assert.closeTo(0, g.toPercentXCoord(1), epsilon);
 268   assert.closeTo(0.3333333333, g.toPercentXCoord(10), epsilon);
 269   assert.closeTo(0.6666666666, g.toPercentXCoord(100), epsilon);
 270   assert.closeTo(1, g.toPercentXCoord(1000), epsilon);
 271
 272   // Now zoom in and ensure that the methods return reasonable values.
 273   g.updateOptions({dateWindow: [ 10, 100 ]});
 274
 275   assert.closeTo(10, g.toDataXCoord(0), epsilon);
 276   assert.closeTo(17.78279410038923, g.toDataXCoord(100), epsilon);
 277   assert.closeTo(31.62277660168379, g.toDataXCoord(200), epsilon);
 278   assert.closeTo(56.23413251903491, g.toDataXCoord(300), epsilon);
 279   assert.closeTo(100, g.toDataXCoord(400), epsilon);
 280
 281   assert.closeTo(-40, g.toDomXCoord(1), epsilon);
 282   assert.closeTo(0, g.toDomXCoord(10), epsilon);
 283   assert.closeTo(400, g.toDomXCoord(100), epsilon);
 284   assert.closeTo(4400, g.toDomXCoord(1000), epsilon);
 285
 286   assert.closeTo(-1, g.toPercentXCoord(1), epsilon);
 287   assert.closeTo(0, g.toPercentXCoord(10), epsilon);
 288   assert.closeTo(1, g.toPercentXCoord(100), epsilon);
 289   assert.closeTo(2, g.toPercentXCoord(1000), epsilon);
 290 });
 291
 292 });