1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
|
//>>built
define("dojox/gauges/BarGauge", ["dojo/_base/declare","dojo/_base/lang","dojo/_base/array","dojo/_base/html","dojo/_base/event","dojox/gfx",
"./_Gauge","./BarLineIndicator", "dojo/dom-geometry"],
function(declare, lang, arr, html, event, gfx, Gauge, BarLineIndicator, domGeometry) {
/*=====
Gauge = dojox.gauges._Gauge;
=====*/
return declare("dojox.gauges.BarGauge", Gauge, {
// summary:
// a bar graph built using the dojox.gfx package.
//
// description:
// using dojo.gfx (and thus either SVG or VML based on what is supported), this widget
// builds a bar graph component, used to display numerical data in a familiar format.
//
// usage:
// <script type="text/javascript">
// require(["dojox/gauges/BarGauge"]);
// </script>
// ...
// <div dojoType="dojox.gauges.BarGauge"
// id="testBarGauge"
// barGaugeHeight="55"
// dataY="25"
// dataHeight="25"
// dataWidth="225">
// </div>
// dataX: Number
// x position of data area (default 5)
dataX: 5,
// dataY: Number
// y position of data area (default 5)
dataY: 5,
// dataWidth: Number
// width of data area (default is bar graph width - 10)
dataWidth: 0,
// dataHeight: Number
// height of data area (default is bar graph width - 10)
dataHeight: 0,
// _defaultIndicator: Object
// override of dojox.gauges._Gauge._defaultIndicator
_defaultIndicator: BarLineIndicator,
startup: function(){
// handle settings from HTML by making sure all the options are
// converted correctly to numbers
//
// also connects mouse handling events
if(this.getChildren){
arr.forEach(this.getChildren(), function(child){ child.startup(); });
}
if(!this.dataWidth){this.dataWidth = this.gaugeWidth - 10;}
if(!this.dataHeight){this.dataHeight = this.gaugeHeight - 10;}
this.inherited(arguments);
},
_getPosition: function(/*Number*/value){
// summary:
// This is a helper function used to determine the position that represents
// a given value on the bar graph
// value: Number
// A value to be converted to a position for this bar graph.
return this.dataX + Math.floor((value - this.min)/(this.max - this.min)*this.dataWidth);
},
_getValueForPosition: function(/*Number*/pos){
// summary:
// This is a helper function used to determine the value represented by
// a position on the bar graph
// pos: Number
// A position to be converted to a value.
return (pos - this.dataX)*(this.max - this.min)/this.dataWidth + this.min;
},
drawRange: function(/*dojox.gfx.Group*/ group, /*Object*/range){
// summary:
// This function is used to draw (or redraw) a range
// description:
// Draws a range (colored area on the background of the gauge)
// based on the given arguments.
// group:
// The GFX group where the range must be drawn.
// range:
// A range is either a dojox.gauges.Range or an object
// with similar parameters (low, high, hover, etc.).
if(range.shape){
range.shape.parent.remove(range.shape);
range.shape = null;
}
var x1 = this._getPosition(range.low);
var x2 = this._getPosition(range.high);
var path = group.createRect({
x: x1,
y: this.dataY,
width: x2 - x1,
height: this.dataHeight
});
if(lang.isArray(range.color) || lang.isString(range.color)){
path.setStroke({color: range.color});
path.setFill(range.color);
}else if(range.color.type){
// Color is a gradient
var y = this.dataY + this.dataHeight/2;
range.color.x1 = x1;
range.color.x2 = x2;
range.color.y1 = y;
range.color.y2 = y;
path.setFill(range.color);
path.setStroke({color: range.color.colors[0].color});
}else if (gfx.svg){
// We've defined a style rather than an explicit color
path.setStroke({color: "green"}); // Arbitrary color, just have to indicate
path.setFill("green"); // that we want it filled
path.getEventSource().setAttribute("class", range.color.style);
}
path.connect("onmouseover", lang.hitch(this, this._handleMouseOverRange, range));
path.connect("onmouseout", lang.hitch(this, this._handleMouseOutRange, range));
range.shape = path;
},
getRangeUnderMouse: function(/*Object*/e){
// summary:
// Determines which range the mouse is currently over
// e: Object
// The event object as received by the mouse handling functions below.
var range = null;
var pos = domGeometry.getContentBox(this.gaugeContent);
var x = e.clientX - pos.x;
var value = this._getValueForPosition(x);
if(this._rangeData){
for(var i=0; (i<this._rangeData.length) && !range; i++){
if((Number(this._rangeData[i].low) <= value) && (Number(this._rangeData[i].high) >= value)){
range = this._rangeData[i];
}
}
}
return range;
},
_dragIndicator: function(/*Object*/widget, /*Object*/ e){
// summary:
// Handles the dragging of an indicator to the event position, including moving/re-drawing
// get angle for mouse position
this._dragIndicatorAt(widget, e.pageX, e.pageY);
event.stop(e);
},
_dragIndicatorAt: function(/*Object*/ widget, x, y){
// summary:
// Handles the dragging of an indicator, including moving/re-drawing
// get new value based on mouse position
var pos = domGeometry.position(widget.gaugeContent, true);
var xl = x - pos.x;
var value = widget._getValueForPosition(xl);
if(value < widget.min){value = widget.min;}
if(value > widget.max){value = widget.max;}
// update the indicator
widget._drag.value = value;
// callback
widget._drag.onDragMove(widget._drag);
// redraw/move indicator(s)
widget._drag.draw(this._indicatorsGroup, true);
widget._drag.valueChanged();
}
});
});
|
