Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(294)

Side by Side Diff: static/js/plotkit/SweetCanvas.js

Issue 22969002: Add stats js files to static dir (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/tools/chromium-build
Patch Set: Created 7 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « static/js/plotkit/README.chromium ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 /*
2 =======
3 PlotKit is a collection of Javascript classes that allows
4 you to quickly visualise data using different types of charts.
5
6 http://www.liquidx.net/plotkit/
7
8 See LICENSE file for copyright information.
9
10 Canvas Renderer for PlotKit which looks pretty!
11 */
12
13 // -------------------------------------------------------------------------
14 // Check required components
15 // -------------------------------------------------------------------------
16
17 try {
18 if (typeof(PlotKit.CanvasRenderer) == 'undefined')
19 {
20 throw "";
21 }
22 }
23 catch (e) {
24 throw "SweetCanvas depends on MochiKit.{Base,Color,DOM,Format} and PlotKit.{ Layout, Canvas}"
25 }
26
27
28 if (typeof(PlotKit.SweetCanvasRenderer) == 'undefined') {
29 PlotKit.SweetCanvasRenderer = {};
30 }
31
32 PlotKit.SweetCanvasRenderer = function(element, layout, options) {
33 if (arguments.length > 0) {
34 this.__init__(element, layout, options);
35 }
36 };
37
38 PlotKit.SweetCanvasRenderer.NAME = "PlotKit.SweetCanvasRenderer";
39 PlotKit.SweetCanvasRenderer.VERSION = PlotKit.VERSION;
40
41 PlotKit.SweetCanvasRenderer.__repr__ = function() {
42 return "[" + this.NAME + " " + this.VERSION + "]";
43 };
44
45 PlotKit.SweetCanvasRenderer.toString = function() {
46 return this.__repr__();
47 };
48
49 // ---------------------------------------------------------------------
50 // Subclassing Magic
51 // ---------------------------------------------------------------------
52
53 PlotKit.SweetCanvasRenderer.prototype = new PlotKit.CanvasRenderer();
54 PlotKit.SweetCanvasRenderer.prototype.constructor = PlotKit.SweetCanvasRenderer;
55 PlotKit.SweetCanvasRenderer.__super__ = PlotKit.CanvasRenderer.prototype;
56
57 // ---------------------------------------------------------------------
58 // Constructor
59 // ---------------------------------------------------------------------
60
61 PlotKit.SweetCanvasRenderer.prototype.__init__ = function(el, layout, opts) {
62 var moreOpts = PlotKit.Base.officeBlue();
63 MochiKit.Base.update(moreOpts, opts);
64 PlotKit.SweetCanvasRenderer.__super__.__init__.call(this, el, layout, moreOp ts);
65 };
66
67 // ---------------------------------------------------------------------
68 // Extended Plotting Functions
69 // ---------------------------------------------------------------------
70
71 PlotKit.SweetCanvasRenderer.prototype._renderBarChart = function() {
72 var bind = MochiKit.Base.bind;
73 var shadowColor = Color.blackColor().colorWithAlpha(0.1).toRGBString();
74
75 var prepareFakeShadow = function(context, x, y, w, h) {
76 context.fillStyle = shadowColor;
77 context.fillRect(x-2, y-2, w+4, h+2);
78 context.fillStyle = shadowColor;
79 context.fillRect(x-1, y-1, w+2, h+1);
80 };
81
82 var colorCount = this.options.colorScheme.length;
83 var colorScheme = this.options.colorScheme;
84 var setNames = PlotKit.Base.keys(this.layout.datasets);
85 var setCount = setNames.length;
86
87 var chooseColor = function(name) {
88 for (var i = 0; i < setCount; i++) {
89 if (name == setNames[i])
90 return colorScheme[i%colorCount];
91 }
92 return colorScheme[0];
93 };
94
95 var drawRect = function(context, bar) {
96 var x = this.area.w * bar.x + this.area.x;
97 var y = this.area.h * bar.y + this.area.y;
98 var w = this.area.w * bar.w;
99 var h = this.area.h * bar.h;
100
101 if ((w < 1) || (h < 1))
102 return;
103
104 context.save();
105
106 context.shadowBlur = 5.0;
107 context.shadowColor = Color.fromHexString("#888888").toRGBString();
108
109 if (this.isIE) {
110 context.save();
111 context.fillStyle = "#cccccc";
112 context.fillRect(x-2, y-2, w+4, h+2);
113 context.restore();
114 }
115 else {
116 prepareFakeShadow(context, x, y, w, h);
117 }
118
119 if (this.options.shouldFill) {
120 context.fillStyle = chooseColor(bar.name).toRGBString();
121 context.fillRect(x, y, w, h);
122 }
123
124 context.shadowBlur = 0;
125 context.strokeStyle = Color.whiteColor().toRGBString();
126 context.lineWidth = 2.0;
127
128 if (this.options.shouldStroke) {
129 context.strokeRect(x, y, w, h);
130 }
131
132 context.restore();
133
134 };
135 this._renderBarChartWrap(this.layout.bars, bind(drawRect, this));
136 };
137
138 PlotKit.SweetCanvasRenderer.prototype._renderLineChart = function() {
139 var context = this.element.getContext("2d");
140 var colorCount = this.options.colorScheme.length;
141 var colorScheme = this.options.colorScheme;
142 var setNames = PlotKit.Base.keys(this.layout.datasets);
143 var setCount = setNames.length;
144 var bind = MochiKit.Base.bind;
145
146
147 for (var i = 0; i < setCount; i++) {
148 var setName = setNames[i];
149 var color = colorScheme[i%colorCount];
150 var strokeX = this.options.strokeColorTransform;
151
152 // setup graphics context
153 context.save();
154
155 // create paths
156 var makePath = function(ctx) {
157 ctx.beginPath();
158 ctx.moveTo(this.area.x, this.area.y + this.area.h);
159 var addPoint = function(ctx_, point) {
160 if (point.name == setName)
161 ctx_.lineTo(this.area.w * point.x + this.area.x,
162 this.area.h * point.y + this.area.y);
163 };
164 MochiKit.Iter.forEach(this.layout.points, partial(addPoint, ctx), th is);
165 ctx.lineTo(this.area.w + this.area.x,
166 this.area.h + this.area.y);
167 ctx.lineTo(this.area.x, this.area.y + this.area.h);
168 ctx.closePath();
169 };
170
171 // faux shadow for firefox
172 if (this.options.shouldFill) {
173 context.save();
174 if (this.isIE) {
175 context.fillStyle = "#cccccc";
176 }
177 else {
178 context.fillStyle = Color.blackColor().colorWithAlpha(0.2).toRGB String();
179 }
180 context.translate(-1, -2);
181 bind(makePath, this)(context);
182 if (this.options.shouldFill) {
183 context.fill();
184 }
185 context.restore();
186 }
187
188 context.shadowBlur = 5.0;
189 context.shadowColor = Color.fromHexString("#888888").toRGBString();
190 context.fillStyle = color.toRGBString();
191 context.lineWidth = 2.0;
192 context.strokeStyle = Color.whiteColor().toRGBString();
193
194 if (this.options.shouldFill) {
195 bind(makePath, this)(context);
196 context.fill();
197 }
198 if (this.options.shouldStroke) {
199 bind(makePath, this)(context);
200 context.stroke();
201 }
202 context.restore();
203 }
204 };
205
206 PlotKit.SweetCanvasRenderer.prototype._renderPieChart = function() {
207 var context = this.element.getContext("2d");
208
209 var colorCount = this.options.colorScheme.length;
210 var slices = this.layout.slices;
211
212 var centerx = this.area.x + this.area.w * 0.5;
213 var centery = this.area.y + this.area.h * 0.5;
214 var radius = Math.min(this.area.w * this.options.pieRadius,
215 this.area.h * this.options.pieRadius);
216
217 if (this.isIE) {
218 centerx = parseInt(centerx);
219 centery = parseInt(centery);
220 radius = parseInt(radius);
221 }
222
223 // NOTE NOTE!! Canvas Tag draws the circle clockwise from the y = 0, x = 1
224 // so we have to subtract 90 degrees to make it start at y = 1, x = 0
225
226 if (!this.isIE) {
227 context.save();
228 var shadowColor = Color.blackColor().colorWithAlpha(0.2);
229 context.fillStyle = shadowColor.toRGBString();
230 context.shadowBlur = 5.0;
231 context.shadowColor = Color.fromHexString("#888888").toRGBString();
232 context.translate(1, 1);
233 context.beginPath();
234 context.moveTo(centerx, centery);
235 context.arc(centerx, centery, radius + 2, 0, Math.PI*2, false);
236 context.closePath();
237 context.fill();
238 context.restore();
239 }
240
241 context.save();
242 context.strokeStyle = Color.whiteColor().toRGBString();
243 context.lineWidth = 2.0;
244 for (var i = 0; i < slices.length; i++) {
245 var color = this.options.colorScheme[i%colorCount];
246 context.fillStyle = color.toRGBString();
247
248 var makePath = function() {
249 context.beginPath();
250 context.moveTo(centerx, centery);
251 context.arc(centerx, centery, radius,
252 slices[i].startAngle - Math.PI/2,
253 slices[i].endAngle - Math.PI/2,
254 false);
255 context.lineTo(centerx, centery);
256 context.closePath();
257 };
258
259 if (Math.abs(slices[i].startAngle - slices[i].endAngle) > 0.0001) {
260 if (this.options.shouldFill) {
261 makePath();
262 context.fill();
263 }
264 if (this.options.shouldStroke) {
265 makePath();
266 context.stroke();
267 }
268 }
269 }
270 context.restore();
271 };
272
273 PlotKit.SweetCanvasRenderer.prototype._renderBackground = function() {
274 var context = this.element.getContext("2d");
275
276 if (this.layout.style == "bar" || this.layout.style == "line") {
277 context.save();
278 context.fillStyle = this.options.backgroundColor.toRGBString();
279 context.fillRect(this.area.x, this.area.y, this.area.w, this.area.h);
280 context.strokeStyle = this.options.axisLineColor.toRGBString();
281 context.lineWidth = 1.0;
282
283 var ticks = this.layout.yticks;
284 var horiz = false;
285 if (this.layout.style == "bar" &&
286 this.layout.options.barOrientation == "horizontal") {
287 ticks = this.layout.xticks;
288 horiz = true;
289 }
290
291 for (var i = 0; i < ticks.length; i++) {
292 var x1 = 0;
293 var y1 = 0;
294 var x2 = 0;
295 var y2 = 0;
296
297 if (horiz) {
298 x1 = ticks[i][0] * this.area.w + this.area.x;
299 y1 = this.area.y;
300 x2 = x1;
301 y2 = y1 + this.area.h;
302 }
303 else {
304 x1 = this.area.x;
305 y1 = ticks[i][0] * this.area.h + this.area.y;
306 x2 = x1 + this.area.w;
307 y2 = y1;
308 }
309
310 context.beginPath();
311 context.moveTo(x1, y1);
312 context.lineTo(x2, y2);
313 context.closePath();
314 context.stroke();
315 }
316 context.restore();
317 }
318 else {
319 PlotKit.SweetCanvasRenderer.__super__._renderBackground.call(this);
320 }
321 };
322
323 // Namespace Iniitialisation
324
325 PlotKit.SweetCanvas = {}
326 PlotKit.SweetCanvas.SweetCanvasRenderer = PlotKit.SweetCanvasRenderer;
327
328 PlotKit.SweetCanvas.EXPORT = [
329 "SweetCanvasRenderer"
330 ];
331
332 PlotKit.SweetCanvas.EXPORT_OK = [
333 "SweetCanvasRenderer"
334 ];
335
336 PlotKit.SweetCanvas.__new__ = function() {
337 var m = MochiKit.Base;
338
339 m.nameFunctions(this);
340
341 this.EXPORT_TAGS = {
342 ":common": this.EXPORT,
343 ":all": m.concat(this.EXPORT, this.EXPORT_OK)
344 };
345 };
346
347 PlotKit.SweetCanvas.__new__();
348 MochiKit.Base._exportSymbols(this, PlotKit.SweetCanvas);
OLDNEW
« no previous file with comments | « static/js/plotkit/README.chromium ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698