OLD | NEW |
| (Empty) |
1 /* | |
2 Copyright (c) 2012 The Chromium Authors. All rights reserved. | |
3 Use of this source code is governed by a BSD-style license that can be | |
4 found in the LICENSE file. | |
5 */ | |
6 | |
7 /** | |
8 * @fileoverview Class and functions to handle positioning of plot data points. | |
9 */ | |
10 | |
11 /** | |
12 * Class that handles plot data positioning. | |
13 * @constructor | |
14 * | |
15 * @param {Array} plotData Data that will be plotted. It is an array of lines, | |
16 * where each line is an array of points, and each point is a length-2 array | |
17 * representing an (x, y) pair. | |
18 */ | |
19 function Coordinates(plotData) { | |
20 this.plotData = plotData; | |
21 | |
22 height = window.innerHeight - 16; | |
23 width = window.innerWidth - 16; | |
24 | |
25 this.widthMax = width; | |
26 this.heightMax = Math.min(400, height - 85); | |
27 | |
28 this.processValues_('x'); | |
29 this.processValues_('y'); | |
30 } | |
31 | |
32 /** | |
33 * Determines the min/max x or y values in the plot, accounting for some extra | |
34 * buffer space. | |
35 * | |
36 * @param {string} type The type of value to process, either 'x' or 'y'. | |
37 */ | |
38 Coordinates.prototype.processValues_ = function (type) { | |
39 var merged = []; | |
40 for (var i = 0; i < this.plotData.length; i++) | |
41 for (var j = 0; j < this.plotData[i].length; j++) { | |
42 if (type == 'x') | |
43 merged.push(parseFloat(this.plotData[i][j][0])); // Index 0 is x value. | |
44 else | |
45 merged.push(parseFloat(this.plotData[i][j][1])); // Index 1 is y value. | |
46 } | |
47 | |
48 min = merged[0]; | |
49 max = merged[0]; | |
50 for (var i = 1; i < merged.length; ++i) { | |
51 if (isNaN(min) || merged[i] < min) | |
52 min = merged[i]; | |
53 if (isNaN(max) || merged[i] > max) | |
54 max = merged[i]; | |
55 } | |
56 | |
57 var bufferSpace = 0.02 * (max - min); | |
58 | |
59 if (type == 'x') { | |
60 this.xBufferSpace_ = bufferSpace; | |
61 this.xMinValue_ = min; | |
62 this.xMaxValue_ = max; | |
63 } else { | |
64 this.yBufferSpace_ = bufferSpace; | |
65 this.yMinValue_ = min; | |
66 this.yMaxValue_ = max; | |
67 } | |
68 }; | |
69 | |
70 /** | |
71 * Difference between horizontal upper and lower limit values. | |
72 * | |
73 * @return {number} The x value range. | |
74 */ | |
75 Coordinates.prototype.xValueRange = function() { | |
76 return this.xUpperLimitValue() - this.xLowerLimitValue(); | |
77 }; | |
78 | |
79 /** | |
80 * Difference between vertical upper and lower limit values. | |
81 * | |
82 * @return {number} The y value range. | |
83 */ | |
84 Coordinates.prototype.yValueRange = function() { | |
85 return this.yUpperLimitValue() - this.yLowerLimitValue(); | |
86 }; | |
87 | |
88 /** | |
89 * Converts horizontal data value to pixel value on canvas. | |
90 * | |
91 * @param {number} value The x data value. | |
92 * @return {number} The corresponding x pixel value on the canvas. | |
93 */ | |
94 Coordinates.prototype.xPixel = function(value) { | |
95 return this.widthMax * | |
96 ((value - this.xLowerLimitValue()) / this.xValueRange()); | |
97 }; | |
98 | |
99 /** | |
100 * Converts vertical data value to pixel value on canvas. | |
101 * | |
102 * @param {number} value The y data value. | |
103 * @return {number} The corresponding y pixel value on the canvas. | |
104 */ | |
105 Coordinates.prototype.yPixel = function(value) { | |
106 if (this.yValueRange() == 0) { | |
107 // Completely horizontal lines should be centered horizontally. | |
108 return this.heightMax / 2; | |
109 } else { | |
110 return this.heightMax - | |
111 (this.heightMax * | |
112 (value - this.yLowerLimitValue()) / this.yValueRange()); | |
113 } | |
114 }; | |
115 | |
116 /** | |
117 * Converts x point on canvas to data value it represents. | |
118 * | |
119 * @param {number} position The x pixel value on the canvas. | |
120 * @return {number} The corresponding x data value. | |
121 */ | |
122 Coordinates.prototype.xValue = function(position) { | |
123 return this.xLowerLimitValue() + | |
124 (position / this.widthMax * this.xValueRange()); | |
125 }; | |
126 | |
127 /** | |
128 * Converts y point on canvas to data value it represents. | |
129 * | |
130 * @param {number} position The y pixel value on the canvas. | |
131 * @return {number} The corresponding y data value. | |
132 */ | |
133 Coordinates.prototype.yValue = function(position) { | |
134 var ratio = this.heightMax / (this.heightMax - position); | |
135 return this.yLowerLimitValue() + (this.yValueRange() / ratio); | |
136 }; | |
137 | |
138 /** | |
139 * Returns the minimum x value of all the data points. | |
140 * | |
141 * @return {number} The minimum x value of all the data points. | |
142 */ | |
143 Coordinates.prototype.xMinValue = function() { | |
144 return this.xMinValue_; | |
145 }; | |
146 | |
147 /** | |
148 * Returns the maximum x value of all the data points. | |
149 * | |
150 * @return {number} The maximum x value of all the data points. | |
151 */ | |
152 Coordinates.prototype.xMaxValue = function() { | |
153 return this.xMaxValue_; | |
154 }; | |
155 | |
156 /** | |
157 * Returns the minimum y value of all the data points. | |
158 * | |
159 * @return {number} The minimum y value of all the data points. | |
160 */ | |
161 Coordinates.prototype.yMinValue = function() { | |
162 return this.yMinValue_; | |
163 }; | |
164 | |
165 /** | |
166 * Returns the maximum y value of all the data points. | |
167 * | |
168 * @return {number} The maximum y value of all the data points. | |
169 */ | |
170 Coordinates.prototype.yMaxValue = function() { | |
171 return this.yMaxValue_; | |
172 }; | |
173 | |
174 /** | |
175 * Returns the x value at the lower limit of the bounding box of the canvas. | |
176 * | |
177 * @return {number} The x value at the lower limit of the bounding box of | |
178 * the canvas. | |
179 */ | |
180 Coordinates.prototype.xLowerLimitValue = function() { | |
181 return this.xMinValue_ - this.xBufferSpace_; | |
182 }; | |
183 | |
184 /** | |
185 * Returns the x value at the upper limit of the bounding box of the canvas. | |
186 * | |
187 * @return {number} The x value at the upper limit of the bounding box of | |
188 * the canvas. | |
189 */ | |
190 Coordinates.prototype.xUpperLimitValue = function() { | |
191 return this.xMaxValue_ + this.xBufferSpace_; | |
192 }; | |
193 | |
194 /** | |
195 * Returns the y value at the lower limit of the bounding box of the canvas. | |
196 * | |
197 * @return {number} The y value at the lower limit of the bounding box of | |
198 * the canvas. | |
199 */ | |
200 Coordinates.prototype.yLowerLimitValue = function() { | |
201 return this.yMinValue_ - this.yBufferSpace_; | |
202 }; | |
203 | |
204 /** | |
205 * Returns the y value at the upper limit of the bounding box of the canvas. | |
206 * | |
207 * @return {number} The y value at the upper limit of the bounding box of | |
208 * the canvas. | |
209 */ | |
210 Coordinates.prototype.yUpperLimitValue = function() { | |
211 return this.yMaxValue_ + this.yBufferSpace_; | |
212 }; | |
OLD | NEW |