src/third_party/trace-viewer/third_party/tvcm/src/tvcm/ui/line_chart_test.html

   1 <!DOCTYPE html>
   2 <!--
   3 Copyright (c) 2014 The Chromium Authors. All rights reserved.
   4 Use of this source code is governed by a BSD-style license that can be
   5 found in the LICENSE file.
   6 -->
   7 <link rel="import" href="/tvcm/ui/line_chart.html">
   8 <script>
   9 'use strict';
  10
  11 tvcm.unittest.testSuite(function() {
  12   test('singleSeries', function() {
  13     var chart = new tvcm.ui.LineChart();
  14     chart.width = 400;
  15     chart.height = 200;
  16     chart.chartTitle = 'Chart title';
  17     var data = [
  18       {x: 10, y: 100},
  19       {x: 20, y: 110},
  20       {x: 30, y: 100},
  21       {x: 40, y: 50}
  22     ];
  23     chart.data = data;
  24     this.addHTMLOutput(chart);
  25   });
  26
  27   test('twoSeries', function() {
  28     var chart = new tvcm.ui.LineChart();
  29
  30     chart.width = 400;
  31     chart.height = 200;
  32     chart.chartTitle = 'Chart title';
  33     var data = [
  34       {x: 10, value1: 100, value2: 50},
  35       {x: 20, value1: 110, value2: 75},
  36       {x: 30, value1: 100, value2: 125},
  37       {x: 40, value1: 50, value2: 125}
  38     ];
  39     chart.data = data;
  40
  41     var r = new tvcm.Range();
  42     r.addValue(20);
  43     r.addValue(40);
  44     chart.brushedRange = r;
  45
  46     this.addHTMLOutput(chart);
  47   });
  48
  49   test('brushRangeFromIndices', function() {
  50     var chart = new tvcm.ui.LineChart();
  51     var data = [
  52       {x: 10, value: 50},
  53       {x: 30, value: 60},
  54       {x: 70, value: 70},
  55       {x: 80, value: 80},
  56       {x: 120, value: 90}
  57     ];
  58     chart.data = data;
  59     var r = new tvcm.Range();
  60
  61     // Range min should be 10.
  62     r = chart.computeBrushRangeFromIndices(-2, 1);
  63     assertEquals(10, r.min);
  64
  65     // Range max should be 120.
  66     r = chart.computeBrushRangeFromIndices(3, 10);
  67     assertEquals(120, r.max);
  68
  69     // Range should be [10, 120]
  70     r = chart.computeBrushRangeFromIndices(-2, 10);
  71     assertEquals(10, r.min);
  72     assertEquals(120, r.max);
  73
  74     // Range should be [20, 100]
  75     r = chart.computeBrushRangeFromIndices(1, 3);
  76     assertEquals(20, r.min);
  77     assertEquals(100, r.max);
  78   });
  79
  80   test('interactiveBrushing', function() {
  81     var chart = new tvcm.ui.LineChart();
  82     chart.width = 400;
  83     chart.height = 200;
  84     chart.chartTitle = 'Chart title';
  85     var data = [
  86       {x: 10, value: 50},
  87       {x: 20, value: 60},
  88       {x: 30, value: 80},
  89       {x: 40, value: 20},
  90       {x: 50, value: 30},
  91       {x: 60, value: 20},
  92       {x: 70, value: 15},
  93       {x: 80, value: 20}
  94     ];
  95     chart.data = data;
  96
  97     var mouseDownIndex = undefined;
  98     var curMouseIndex = undefined;
  99
 100     function updateBrushedRange() {
 101       if (mouseDownIndex === undefined) {
 102         chart.brushedRange = new tvcm.Range();
 103         return;
 104       }
 105       chart.brushedRange = chart.computeBrushRangeFromIndices(
 106           mouseDownIndex, curMouseIndex);
 107     }
 108
 109     chart.addEventListener('item-mousedown', function(e) {
 110       mouseDownIndex = e.index;
 111       curMouseIndex = e.index;
 112       updateBrushedRange();
 113     });
 114     chart.addEventListener('item-mousemove', function(e) {
 115       if (e.button == undefined)
 116         return;
 117       curMouseIndex = e.index;
 118       updateBrushedRange();
 119     });
 120     chart.addEventListener('item-mouseup', function(e) {
 121       curMouseIndex = e.index;
 122       updateBrushedRange();
 123     });
 124     this.addHTMLOutput(chart);
 125   });
 126 });
 127 </script>