Context Navigation

← Previous Changeset
Next Changeset →

Changeset 13715

Timestamp:

05/13/08 00:55:02 (8 weeks ago)

Author:

elazutkin

Message:

dojox.charting: major refactor (see below)
- splitting geometry and rendering procedures in Chart2D,
- adding windowing to axes,
- refactoring the linear scaler,
- adding a "primitive" scaler,
- updating all plots to use the new scalers
!strict

Location:

dojox/trunk/charting

Files:

: 1 added
: 15 modified

axis2d/Default.js (modified) (1 diff)
Chart2D.js (modified) (9 diffs)
plot2d/Bars.js (modified) (2 diffs)
plot2d/Base.js (modified) (3 diffs)
plot2d/Bubble.js (modified) (1 diff)
plot2d/ClusteredBars.js (modified) (2 diffs)
plot2d/ClusteredColumns.js (modified) (2 diffs)
plot2d/Columns.js (modified) (2 diffs)
plot2d/Default.js (modified) (5 diffs)
plot2d/Grid.js (modified) (5 diffs)
plot2d/Stacked.js (modified) (5 diffs)
plot2d/StackedBars.js (modified) (2 diffs)
plot2d/StackedColumns.js (modified) (2 diffs)
scaler/linear.js (modified) (7 diffs)
scaler/primitive.js (added)
tests/test_chart2d.html (modified) (1 diff)

Legend:

: Unmodified
: Added
: Removed

dojox/trunk/charting/axis2d/Default.js

r13714	r13715
70	70	return "scaler" in this && !(this.dirty && this.dependOnData());
71	71	},
	72	setWindow: function(scale, offset){
	73	this.scale = scale;
	74	this.offset = offset;
	75	return this.clear();
	76	},
72	77	calculate: function(min, max, span, labels){
73	78	if(this.initialized()){ return this; }
74		~~this.min = min;~~
75		~~this.max = max;~~
76	79	this.labels = "labels" in this.opt ? this.opt.labels : labels;
77	80	this.scaler = lin.buildScaler(min, max, span, this.opt);
78		var minMinorStep = 0, ta = this.chart.theme.axis,
	81	if("scale" in this){
	82	// calculate new range
	83	this.opt.from = this.scaler.bounds.lower + this.offset;
	84	this.opt.to = (this.scaler.bounds.upper - this.scaler.bounds.lower) / scale + this.opt.from;
	85	// make sure that bounds are correct
	86	if(isInfinite(this.opt.from) \|\| isNaN(this.opt.from) \|\| isInfinite(this.opt.to) \|\| isNaN(this.opt.to) \|\|
	87	this.opt.to - this.from.to >= this.scaler.bounds.upper - this.scaler.bounds.lower){
	88	// any error --- remove from/to bounds
	89	delete this.opt.from;
	90	delete this.opt.to;
	91	delete this.scale;
	92	delete this.offset;
	93	}else{
	94	// shift the window, if we are out of bounds
	95	if(this.opt.from < this.scaler.bounds.lower){
	96	this.opt.to += this.scaler.bounds.lower - this.opt.from;
	97	this.opt.from = this.scaler.bounds.lower;
	98	}else if(this.opt.to > this.scaler.bounds.upper){
	99	this.opt.from += this.scaler.bounds.upper - this.opt.to;
	100	this.opt.to = this.scaler.bounds.upper;
	101	}
	102	// update the offset
	103	this.offset = this.opt.from - this.scaler.bounds.lower;
	104	}
	105	// re-calculate the scaler
	106	this.scaler = lin.buildScaler(min, max, span, this.opt);
	107	}
	108	var minMinorStep = 0, ta = this.chart.theme.axis,
79	109	taFont = "font" in this.opt ? this.opt.font : ta.font,
80	110	size = taFont ? g.normalizedLength(g.splitFontString(taFont).size) : 0;

dojox/trunk/charting/Chart2D.js

r13563	r13715
93	93	this.dirty = true;
94	94	return this;
	95	},
	96	getAxis: function(name){
	97	return this.axes[name];
95	98	},
96	99	addPlot: function(name, kwArgs){
…	…
187	190	return this.render();
188	191	},
189		render: function(){
	192	getGeometry: function(){
	193	var ret = {};
	194	df.forIn(this.axes, function(axis){
	195	if(axis.initialized()){
	196	ret[axis.name] = {
	197	name: axis.name,
	198	vertical: axis.vertical,
	199	scaler: axis.scaler,
	200	ticks: axis.ticks
	201	};
	202	}
	203	});
	204	return ret;
	205	},
	206	setAxisWindow: function(name, scale, offset){
	207	var axis = this.axes[name];
	208	if(axis){
	209	axis.setWindow(scale, offset);
	210	}
	211	return this;
	212	},
	213	setWindow: function(sx, sy, dx, dy){
	214	if(!("plotArea" in this)){
	215	this.calculateGeometry();
	216	}
	217	df.forIn(this.axes, function(axis){
	218	var scale, offset, bounds = axis.scaler.bounds,
	219	s = bounds.span / (bounds.upper - bounds.lower);
	220	if(axis.vertical){
	221	scale = sy;
	222	offset = ("offset" in axis ? axis.offset : 0) + dy / s / scale;
	223	}else{
	224	scale = sx;
	225	offset = ("offset" in axis ? axis.offset : 0) + dx / s / scale;
	226	}
	227	axis.setWindow(scale, offset);
	228	});
	229	return this;
	230	},
	231	calculateGeometry: function(){
190	232	if(this.dirty){
191		return this.full~~Render~~();
	233	return this.fullGeometry();
192	234	}
193	235
…	…
199	241	}
200	242	}, this);
201
202		// go over the stack backwards
203		df.forEachRev(this.stack, function(plot){ plot.render(this.dim, this.offsets); }, this);
204
205		// go over axes
206		df.forIn(this.axes, function(axis){ axis.render(this.dim, this.offsets); }, this);
207
208		this._makeClean();
209
210		// BEGIN FOR HTML CANVAS
211		if(this.surface.render){ this.surface.render(); };
212		// END FOR HTML CANVAS
213
214		return this;
215		},
216		fullRender: function(){
	243
	244	return this;
	245	},
	246	fullGeometry: function(){
217	247	this._makeDirty();
218	248
219	249	// clear old values
220	250	dojo.forEach(this.stack, clear);
221		~~dojo.forEach(this.series, purge);~~
222		~~df.forIn(this.axes, purge);~~
223		~~dojo.forEach(this.stack, purge);~~
224		~~this.surface.clear();~~
225	251
226	252	// rebuild new connections, and add defaults
	253
	254	// set up a theme
	255	if(!this.theme){
	256	this.theme = new dojox.charting.Theme(dojox.charting._def);
	257	}
227	258
228	259	// assign series
…	…
245	276	}
246	277	}, this);
247		~~// set up a theme~~
248		~~if(!this.theme){~~
249		~~this.theme = new dojox.charting.Theme(dojox.charting._def);~~
250		}
251		~~var requiredColors = df.foldl(this.stack, "z + plot.getRequiredColors()", 0);~~
252		~~this.theme.defineColors({num: requiredColors, cache: false});~~
253	278
254	279	// calculate geometry
…	…
273	298	df.forIn(this.axes, clear);
274	299	dojo.forEach(this.stack, function(plot){ plot.calculateAxes(this.plotArea); }, this);
	300
	301	return this;
	302	},
	303	render: function(){
	304	if(this.dirty){
	305	return this.fullRender();
	306	}
	307
	308	this.calculateGeometry();
	309
	310	// go over the stack backwards
	311	df.forEachRev(this.stack, function(plot){ plot.render(this.dim, this.offsets); }, this);
	312
	313	// go over axes
	314	df.forIn(this.axes, function(axis){ axis.render(this.dim, this.offsets); }, this);
	315
	316	this._makeClean();
	317
	318	// BEGIN FOR HTML CANVAS
	319	if(this.surface.render){ this.surface.render(); };
	320	// END FOR HTML CANVAS
	321
	322	return this;
	323	},
	324	fullRender: function(){
	325	// calculate geometry
	326	this.fullGeometry();
	327	var offsets = this.offsets, dim = this.dim;
	328
	329	// get required colors
	330	var requiredColors = df.foldl(this.stack, "z + plot.getRequiredColors()", 0);
	331	this.theme.defineColors({num: requiredColors, cache: false});
	332
	333	// clear old shapes
	334	dojo.forEach(this.series, purge);
	335	df.forIn(this.axes, purge);
	336	dojo.forEach(this.stack, purge);
	337	this.surface.clear();
275	338
276	339	// generate shapes
…	…
305	368	this.surface.createRect({
306	369	width: offsets.l,
307		height: dim.height
	370	height: dim.height + 1
308	371	}).setFill(fill);
309	372	}
…	…
311	374	this.surface.createRect({
312	375	x: dim.width - offsets.r,
313		width: offsets.r,
314		height: dim.height
	376	width: offsets.r + 1,
	377	height: dim.height + 1
315	378	}).setFill(fill);
316	379	}
317	380	if(offsets.t){ // top
318	381	this.surface.createRect({
319		width: dim.width,
	382	width: dim.width + 1,
320	383	height: offsets.t
321	384	}).setFill(fill);
…	…
324	387	this.surface.createRect({
325	388	y: dim.height - offsets.b,
326		width: dim.width,
327		height: offsets.b
	389	width: dim.width + 1,
	390	height: offsets.b + 2
328	391	}).setFill(fill);
329	392	}
…	…
340	403
341	404	this._makeClean();
	405
	406	// BEGIN FOR HTML CANVAS
	407	if(this.surface.render){ this.surface.render(); };
	408	// END FOR HTML CANVAS
342	409
343	410	return this;

dojox/trunk/charting/plot2d/Bars.js

r11761	r13715
47	47	}
48	48	var t = this.chart.theme, color, stroke, fill, f,
49		gap = this.opt.gap < this._vScaler.scale / 3 ? this.opt.gap : 0;
	49	ht = this._hScaler.scaler.getTransformerFromModel(this._hScaler),
	50	vt = this._vScaler.scaler.getTransformerFromModel(this._vScaler);
	51	gap = this.opt.gap < this._vScaler.bounds.scale / 3 ? this.opt.gap : 0,
	52	baseline = Math.max(0, this._hScaler.bounds.lower),
	53	baselineWidth = ht(baseline),
	54	height = this._vScaler.bounds.scale - 2 * gap;
50	55	for(var i = this.series.length - 1; i >= 0; --i){
51	56	var run = this.series[i];
…	…
59	64	stroke = run.stroke ? run.stroke : dc.augmentStroke(t.series.stroke, color);
60	65	fill = run.fill ? run.fill : dc.augmentFill(t.series.fill, color);
61		~~var baseline = Math.max(0, this._hScaler.bounds.lower),~~
62		~~xoff = offsets.l + this._hScaler.scale * (baseline - this._hScaler.bounds.lower),~~
63		~~yoff = dim.height - offsets.b - this._vScaler.scale * (1.5 - this._vScaler.bounds.lower) + gap;~~
64	66	for(var j = 0; j < run.data.length; ++j){
65	67	var v = run.data[j],
66		~~width = this._hScaler.scale * (v - baseline~~),
67		~~height = this._vScaler.scale - 2 * gap~~,
	68	hv = ht(v),
	69	width = hv - baselineWidth,
68	70	w = Math.abs(width);
69	71	if(w >= 1 && height >= 1){
70	72	var shape = s.createRect({
71		x: ~~xoff + (width < 0 ? width : 0~~),
72		y: ~~yoff - this._vScaler.scale * j~~,
	73	x: offsets.l + (v < baseline ? hv : baselineWidth),
	74	y: dim.height - offsets.b - vt(j + 1.5) + gap,
73	75	width: w, height: height
74	76	}).setFill(fill).setStroke(stroke);

dojox/trunk/charting/plot2d/Base.js

r11315	r13715
1	1	dojo.provide("dojox.charting.plot2d.Base");
2	2
	3	dojo.require("dojox.charting.scaler.primitive");
3	4	dojo.require("dojox.charting.Element");
4	5	dojo.require("dojox.charting.plot2d.common");
…	…
41	42	this._hScaler = this._hAxis.getScaler();
42	43	}else{
43		this._hScaler = {bounds: {lower: stats.hmin, upper: stats.hmax},
44		scale: dim.width / (stats.hmax - stats.hmin)};
	44	this._hScaler = dojox.charting.scaler.primitive.buildScaler(stats.hmin, stats.hmax, dim.width);
45	45	}
46	46	if(this._vAxis){
…	…
50	50	this._vScaler = this._vAxis.getScaler();
51	51	}else{
52		this._vScaler = {bounds: {lower: stats.vmin, upper: stats.vmax},
53		scale: dim.height / (stats.vmax - stats.vmin)};
	52	this._vScaler = dojox.charting.scaler.primitive.buildScaler(stats.vmin, stats.vmax, dim.height);
54	53	}
55	54	}

dojox/trunk/charting/plot2d/Bubble.js

r13647	r13715
39	39	}
40	40
41		var s = run.group, points = dojo.map(run.data, function(v, i){
42		return {
43		x: this._hScaler.scale * (v.x - this._hScaler.bounds.lower) + offsets.l,
44		y: dim.height - offsets.b - this._vScaler.scale * (v.y - this._vScaler.bounds.lower),
45		radius: this._vScaler.scale * (v.size / 2)
46		};
47		}, this);
	41	var s = run.group,
	42	ht = this._hScaler.scaler.getTransformerFromModel(this._hScaler),
	43	vt = this._vScaler.scaler.getTransformerFromModel(this._vScaler);
	44	points = dojo.map(run.data, function(v, i){
	45	return {
	46	x: ht(v.x) + offsets.l,
	47	y: dim.height - offsets.b - vt(v.y),
	48	radius: this._vScaler.bounds.scale * (v.size / 2)
	49	};
	50	}, this);
48	51
49	52	if(run.fill){

dojox/trunk/charting/plot2d/ClusteredBars.js

r11761	r13715
20	20	}
21	21	var t = this.chart.theme, color, stroke, fill, f,
22		gap = this.opt.gap < this._vScaler.scale / 3 ? this.opt.gap : 0,
23		thickness = (this._vScaler.scale - 2 * gap) / this.series.length;
	22	ht = this._hScaler.scaler.getTransformerFromModel(this._hScaler),
	23	vt = this._vScaler.scaler.getTransformerFromModel(this._vScaler);
	24	gap = this.opt.gap < this._vScaler.bounds.scale / 3 ? this.opt.gap : 0,
	25	thickness = (this._vScaler.bounds.scale - 2 * gap) / this.series.length,
	26	baseline = Math.max(0, this._hScaler.bounds.lower),
	27	baselineWidth = ht(baseline),
	28	height = thickness;
24	29	for(var i = this.series.length - 1; i >= 0; --i){
25		var run = this.series[i];
	30	var run = this.series[i], shift = thickness * (this.series.length - i - 1);
26	31	if(!this.dirty && !run.dirty){ continue; }
27	32	run.cleanGroup();
…	…
33	38	stroke = run.stroke ? run.stroke : dc.augmentStroke(t.series.stroke, color);
34	39	fill = run.fill ? run.fill : dc.augmentFill(t.series.fill, color);
35		~~var baseline = Math.max(0, this._hScaler.bounds.lower),~~
36		~~xoff = offsets.l + this._hScaler.scale * (baseline - this._hScaler.bounds.lower),~~
37		~~yoff = dim.height - offsets.b - this._vScaler.scale * (1.5 - this._vScaler.bounds.lower) +~~
38		~~gap + thickness * (this.series.length - i - 1);~~
39	40	for(var j = 0; j < run.data.length; ++j){
40	41	var v = run.data[j],
41		width = this._hScaler.scale * (v - baseline),
42		height = thickness, w = Math.abs(width);
	42	hv = ht(v),
	43	width = hv - baselineWidth,
	44	w = Math.abs(width);
43	45	if(w >= 1 && height >= 1){
44	46	var shape = s.createRect({
45		x: ~~xoff + (width < 0 ? width : 0~~),
46		y: ~~yoff - this._vScaler.scale * j~~,
	47	x: offsets.l + (v < baseline ? hv : baselineWidth),
	48	y: dim.height - offsets.b - vt(j + 1.5) + gap + shift,
47	49	width: w, height: height
48	50	}).setFill(fill).setStroke(stroke);

dojox/trunk/charting/plot2d/ClusteredColumns.js

r11761	r13715
20	20	}
21	21	var t = this.chart.theme, color, stroke, fill, f,
22		gap = this.opt.gap < this._hScaler.scale / 3 ? this.opt.gap : 0,
23		thickness = (this._hScaler.scale - 2 * gap) / this.series.length;
	22	ht = this._hScaler.scaler.getTransformerFromModel(this._hScaler),
	23	vt = this._vScaler.scaler.getTransformerFromModel(this._vScaler),
	24	gap = this.opt.gap < this._hScaler.bounds.scale / 3 ? this.opt.gap : 0,
	25	thickness = (this._hScaler.bounds.scale - 2 * gap) / this.series.length,
	26	baseline = Math.max(0, this._vScaler.bounds.lower),
	27	baselineHeight = vt(baseline),
	28	width = thickness;
24	29	for(var i = 0; i < this.series.length; ++i){
25		var run = this.series[i];
	30	var run = this.series[i], shift = thickness * i;
26	31	if(!this.dirty && !run.dirty){ continue; }
27	32	run.cleanGroup();
…	…
33	38	stroke = run.stroke ? run.stroke : dc.augmentStroke(t.series.stroke, color);
34	39	fill = run.fill ? run.fill : dc.augmentFill(t.series.fill, color);
35		~~var baseline = Math.max(0, this._vScaler.bounds.lower),~~
36		~~xoff = offsets.l + this._hScaler.scale * (0.5 - this._hScaler.bounds.lower) + gap + thickness * i,~~
37		~~yoff = dim.height - offsets.b - this._vScaler.scale * (baseline - this._vScaler.bounds.lower);~~
38	40	for(var j = 0; j < run.data.length; ++j){
39	41	var v = run.data[j],
40		~~width = thickness~~,
41		height = ~~this._vScaler.scale * (v - baseline)~~,
	42	vv = vt(v),
	43	height = vv - baselineHeight,
42	44	h = Math.abs(height);
43	45	if(width >= 1 && h >= 1){
44	46	var shape = s.createRect({
45		x: ~~xoff + this._hScaler.scale * j~~,
46		y: ~~yoff - (height < 0 ? 0 : h~~eight),
	47	x: offsets.l + ht(j + 0.5) + gap + shift,
	48	y: dim.height - offsets.b - (v > baseline ? vv : baselineHeight),
47	49	width: width, height: h
48	50	}).setFill(fill).setStroke(stroke);

dojox/trunk/charting/plot2d/Columns.js

r11761	r13715
45	45	}
46	46	var t = this.chart.theme, color, stroke, fill, f,
47		gap = this.opt.gap < this._hScaler.scale / 3 ? this.opt.gap : 0;
	47	ht = this._hScaler.scaler.getTransformerFromModel(this._hScaler),
	48	vt = this._vScaler.scaler.getTransformerFromModel(this._vScaler),
	49	gap = this.opt.gap < this._hScaler.bounds.scale / 3 ? this.opt.gap : 0,
	50	baseline = Math.max(0, this._vScaler.bounds.lower),
	51	baselineHeight = vt(baseline),
	52	xoff = offsets.l + this._hScaler.bounds.scale * (0.5 - this._hScaler.bounds.lower) + gap,
	53	yoff = dim.height - offsets.b - this._vScaler.bounds.scale * (baseline - this._vScaler.bounds.lower),
	54	width = this._hScaler.bounds.scale - 2 * gap;
48	55	for(var i = this.series.length - 1; i >= 0; --i){
49	56	var run = this.series[i];
…	…
57	64	stroke = run.stroke ? run.stroke : dc.augmentStroke(t.series.stroke, color);
58	65	fill = run.fill ? run.fill : dc.augmentFill(t.series.fill, color);
59		~~var baseline = Math.max(0, this._vScaler.bounds.lower),~~
60		~~xoff = offsets.l + this._hScaler.scale * (0.5 - this._hScaler.bounds.lower) + gap,~~
61		~~yoff = dim.height - offsets.b - this._vScaler.scale * (baseline - this._vScaler.bounds.lower);~~
62	66	for(var j = 0; j < run.data.length; ++j){
63	67