Default.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376
  1. define("dojox/charting/plot2d/Default", ["dojo/_base/lang", "dojo/_base/declare", "dojo/_base/array",
  2. "./Base", "./common", "dojox/lang/functional", "dojox/lang/functional/reversed", "dojox/lang/utils", "dojox/gfx/fx"],
  3. function(lang, declare, arr, Base, dc, df, dfr, du, fx){
  4. /*=====
  5. dojo.declare("dojox.charting.plot2d.__DefaultCtorArgs", dojox.charting.plot2d.__PlotCtorArgs, {
  6. // summary:
  7. // The arguments used for any/most plots.
  8. // hAxis: String?
  9. // The horizontal axis name.
  10. hAxis: "x",
  11. // vAxis: String?
  12. // The vertical axis name
  13. vAxis: "y",
  14. // lines: Boolean?
  15. // Whether or not to draw lines on this plot. Defaults to true.
  16. lines: true,
  17. // areas: Boolean?
  18. // Whether or not to draw areas on this plot. Defaults to false.
  19. areas: false,
  20. // markers: Boolean?
  21. // Whether or not to draw markers at data points on this plot. Default is false.
  22. markers: false,
  23. // tension: Number|String?
  24. // Whether or not to apply 'tensioning' to the lines on this chart.
  25. // Options include a number, "X", "x", or "S"; if a number is used, the
  26. // simpler bezier curve calculations are used to draw the lines. If X, x or S
  27. // is used, the more accurate smoothing algorithm is used.
  28. tension: "",
  29. // animate: Boolean?
  30. // Whether or not to animate the chart to place.
  31. animate: false,
  32. // stroke: dojox.gfx.Stroke?
  33. // An optional stroke to use for any series on the plot.
  34. stroke: {},
  35. // outline: dojox.gfx.Stroke?
  36. // An optional stroke used to outline any series on the plot.
  37. outline: {},
  38. // shadow: dojox.gfx.Stroke?
  39. // An optional stroke to use to draw any shadows for a series on a plot.
  40. shadow: {},
  41. // fill: dojox.gfx.Fill?
  42. // Any fill to be used for elements on the plot (such as areas).
  43. fill: {},
  44. // font: String?
  45. // A font definition to be used for labels and other text-based elements on the plot.
  46. font: "",
  47. // fontColor: String|dojo.Color?
  48. // The color to be used for any text-based elements on the plot.
  49. fontColor: "",
  50. // markerStroke: dojo.gfx.Stroke?
  51. // An optional stroke to use for any markers on the plot.
  52. markerStroke: {},
  53. // markerOutline: dojo.gfx.Stroke?
  54. // An optional outline to use for any markers on the plot.
  55. markerOutline: {},
  56. // markerShadow: dojo.gfx.Stroke?
  57. // An optional shadow to use for any markers on the plot.
  58. markerShadow: {},
  59. // markerFill: dojo.gfx.Fill?
  60. // An optional fill to use for any markers on the plot.
  61. markerFill: {},
  62. // markerFont: String?
  63. // An optional font definition to use for any markers on the plot.
  64. markerFont: "",
  65. // markerFontColor: String|dojo.Color?
  66. // An optional color to use for any marker text on the plot.
  67. markerFontColor: "",
  68. // enableCache: Boolean?
  69. // Whether the markers are cached from one rendering to another. This improves the rendering performance of
  70. // successive rendering but penalize the first rendering. Default false.
  71. enableCache: false
  72. });
  73. var Base = dojox.charting.plot2d.Base;
  74. =====*/
  75. var purgeGroup = dfr.lambda("item.purgeGroup()");
  76. var DEFAULT_ANIMATION_LENGTH = 1200; // in ms
  77. return declare("dojox.charting.plot2d.Default", Base, {
  78. defaultParams: {
  79. hAxis: "x", // use a horizontal axis named "x"
  80. vAxis: "y", // use a vertical axis named "y"
  81. lines: true, // draw lines
  82. areas: false, // draw areas
  83. markers: false, // draw markers
  84. tension: "", // draw curved lines (tension is "X", "x", or "S")
  85. animate: false, // animate chart to place
  86. enableCache: false
  87. },
  88. optionalParams: {
  89. // theme component
  90. stroke: {},
  91. outline: {},
  92. shadow: {},
  93. fill: {},
  94. font: "",
  95. fontColor: "",
  96. markerStroke: {},
  97. markerOutline: {},
  98. markerShadow: {},
  99. markerFill: {},
  100. markerFont: "",
  101. markerFontColor: ""
  102. },
  103. constructor: function(chart, kwArgs){
  104. // summary:
  105. // Return a new plot.
  106. // chart: dojox.charting.Chart
  107. // The chart this plot belongs to.
  108. // kwArgs: dojox.charting.plot2d.__DefaultCtorArgs?
  109. // An optional arguments object to help define this plot.
  110. this.opt = lang.clone(this.defaultParams);
  111. du.updateWithObject(this.opt, kwArgs);
  112. du.updateWithPattern(this.opt, kwArgs, this.optionalParams);
  113. this.series = [];
  114. this.hAxis = this.opt.hAxis;
  115. this.vAxis = this.opt.vAxis;
  116. // animation properties
  117. this.animate = this.opt.animate;
  118. },
  119. createPath: function(run, creator, params){
  120. var path;
  121. if(this.opt.enableCache && run._pathFreePool.length > 0){
  122. path = run._pathFreePool.pop();
  123. path.setShape(params);
  124. // was cleared, add it back
  125. creator.add(path);
  126. }else{
  127. path = creator.createPath(params);
  128. }
  129. if(this.opt.enableCache){
  130. run._pathUsePool.push(path);
  131. }
  132. return path;
  133. },
  134. render: function(dim, offsets){
  135. // summary:
  136. // Render/draw everything on this plot.
  137. // dim: Object
  138. // An object of the form { width, height }
  139. // offsets: Object
  140. // An object of the form { l, r, t, b }
  141. // returns: dojox.charting.plot2d.Default
  142. // A reference to this plot for functional chaining.
  143. // make sure all the series is not modified
  144. if(this.zoom && !this.isDataDirty()){
  145. return this.performZoom(dim, offsets);
  146. }
  147. this.resetEvents();
  148. this.dirty = this.isDirty();
  149. if(this.dirty){
  150. arr.forEach(this.series, purgeGroup);
  151. this._eventSeries = {};
  152. this.cleanGroup();
  153. this.group.setTransform(null);
  154. var s = this.group;
  155. df.forEachRev(this.series, function(item){ item.cleanGroup(s); });
  156. }
  157. var t = this.chart.theme, stroke, outline, marker, events = this.events();
  158. for(var i = this.series.length - 1; i >= 0; --i){
  159. var run = this.series[i];
  160. if(!this.dirty && !run.dirty){
  161. t.skip();
  162. this._reconnectEvents(run.name);
  163. continue;
  164. }
  165. run.cleanGroup();
  166. if(this.opt.enableCache){
  167. run._pathFreePool = (run._pathFreePool?run._pathFreePool:[]).concat(run._pathUsePool?run._pathUsePool:[]);
  168. run._pathUsePool = [];
  169. }
  170. if(!run.data.length){
  171. run.dirty = false;
  172. t.skip();
  173. continue;
  174. }
  175. var theme = t.next(this.opt.areas ? "area" : "line", [this.opt, run], true),
  176. s = run.group, rsegments = [], startindexes = [], rseg = null, lpoly,
  177. ht = this._hScaler.scaler.getTransformerFromModel(this._hScaler),
  178. vt = this._vScaler.scaler.getTransformerFromModel(this._vScaler),
  179. eventSeries = this._eventSeries[run.name] = new Array(run.data.length);
  180. // optim works only for index based case
  181. var indexed = typeof run.data[0] == "number";
  182. var min = indexed?Math.max(0, Math.floor(this._hScaler.bounds.from - 1)):0,
  183. max = indexed?Math.min(run.data.length, Math.ceil(this._hScaler.bounds.to)):run.data.length;
  184. // split the run data into dense segments (each containing no nulls)
  185. for(var j = min; j < max; j++){
  186. if(run.data[j] != null){
  187. if(!rseg){
  188. rseg = [];
  189. startindexes.push(j);
  190. rsegments.push(rseg);
  191. }
  192. rseg.push(run.data[j]);
  193. }else{
  194. rseg = null;
  195. }
  196. }
  197. for(var seg = 0; seg < rsegments.length; seg++){
  198. if(typeof rsegments[seg][0] == "number"){
  199. lpoly = arr.map(rsegments[seg], function(v, i){
  200. return {
  201. x: ht(i + startindexes[seg] + 1) + offsets.l,
  202. y: dim.height - offsets.b - vt(v)
  203. };
  204. }, this);
  205. }else{
  206. lpoly = arr.map(rsegments[seg], function(v, i){
  207. return {
  208. x: ht(v.x) + offsets.l,
  209. y: dim.height - offsets.b - vt(v.y)
  210. };
  211. }, this);
  212. }
  213. var lpath = this.opt.tension ? dc.curve(lpoly, this.opt.tension) : "";
  214. if(this.opt.areas && lpoly.length > 1){
  215. var fill = theme.series.fill;
  216. var apoly = lang.clone(lpoly);
  217. if(this.opt.tension){
  218. var apath = "L" + apoly[apoly.length-1].x + "," + (dim.height - offsets.b) +
  219. " L" + apoly[0].x + "," + (dim.height - offsets.b) +
  220. " L" + apoly[0].x + "," + apoly[0].y;
  221. run.dyn.fill = s.createPath(lpath + " " + apath).setFill(fill).getFill();
  222. } else {
  223. apoly.push({x: lpoly[lpoly.length - 1].x, y: dim.height - offsets.b});
  224. apoly.push({x: lpoly[0].x, y: dim.height - offsets.b});
  225. apoly.push(lpoly[0]);
  226. run.dyn.fill = s.createPolyline(apoly).setFill(fill).getFill();
  227. }
  228. }
  229. if(this.opt.lines || this.opt.markers){
  230. // need a stroke
  231. stroke = theme.series.stroke;
  232. if(theme.series.outline){
  233. outline = run.dyn.outline = dc.makeStroke(theme.series.outline);
  234. outline.width = 2 * outline.width + stroke.width;
  235. }
  236. }
  237. if(this.opt.markers){
  238. run.dyn.marker = theme.symbol;
  239. }
  240. var frontMarkers = null, outlineMarkers = null, shadowMarkers = null;
  241. if(stroke && theme.series.shadow && lpoly.length > 1){
  242. var shadow = theme.series.shadow,
  243. spoly = arr.map(lpoly, function(c){
  244. return {x: c.x + shadow.dx, y: c.y + shadow.dy};
  245. });
  246. if(this.opt.lines){
  247. if(this.opt.tension){
  248. run.dyn.shadow = s.createPath(dc.curve(spoly, this.opt.tension)).setStroke(shadow).getStroke();
  249. } else {
  250. run.dyn.shadow = s.createPolyline(spoly).setStroke(shadow).getStroke();
  251. }
  252. }
  253. if(this.opt.markers && theme.marker.shadow){
  254. shadow = theme.marker.shadow;
  255. shadowMarkers = arr.map(spoly, function(c){
  256. return this.createPath(run, s, "M" + c.x + " " + c.y + " " + theme.symbol).
  257. setStroke(shadow).setFill(shadow.color);
  258. }, this);
  259. }
  260. }
  261. if(this.opt.lines && lpoly.length > 1){
  262. if(outline){
  263. if(this.opt.tension){
  264. run.dyn.outline = s.createPath(lpath).setStroke(outline).getStroke();
  265. } else {
  266. run.dyn.outline = s.createPolyline(lpoly).setStroke(outline).getStroke();
  267. }
  268. }
  269. if(this.opt.tension){
  270. run.dyn.stroke = s.createPath(lpath).setStroke(stroke).getStroke();
  271. } else {
  272. run.dyn.stroke = s.createPolyline(lpoly).setStroke(stroke).getStroke();
  273. }
  274. }
  275. if(this.opt.markers){
  276. frontMarkers = new Array(lpoly.length);
  277. outlineMarkers = new Array(lpoly.length);
  278. outline = null;
  279. if(theme.marker.outline){
  280. outline = dc.makeStroke(theme.marker.outline);
  281. outline.width = 2 * outline.width + (theme.marker.stroke ? theme.marker.stroke.width : 0);
  282. }
  283. arr.forEach(lpoly, function(c, i){
  284. var path = "M" + c.x + " " + c.y + " " + theme.symbol;
  285. if(outline){
  286. outlineMarkers[i] = this.createPath(run, s, path).setStroke(outline);
  287. }
  288. frontMarkers[i] = this.createPath(run, s, path).setStroke(theme.marker.stroke).setFill(theme.marker.fill);
  289. }, this);
  290. run.dyn.markerFill = theme.marker.fill;
  291. run.dyn.markerStroke = theme.marker.stroke;
  292. if(events){
  293. arr.forEach(frontMarkers, function(s, i){
  294. var o = {
  295. element: "marker",
  296. index: i + startindexes[seg],
  297. run: run,
  298. shape: s,
  299. outline: outlineMarkers[i] || null,
  300. shadow: shadowMarkers && shadowMarkers[i] || null,
  301. cx: lpoly[i].x,
  302. cy: lpoly[i].y
  303. };
  304. if(typeof rsegments[seg][0] == "number"){
  305. o.x = i + startindexes[seg] + 1;
  306. o.y = rsegments[seg][i];
  307. }else{
  308. o.x = rsegments[seg][i].x;
  309. o.y = rsegments[seg][i].y;
  310. }
  311. this._connectEvents(o);
  312. eventSeries[i + startindexes[seg]] = o;
  313. }, this);
  314. }else{
  315. delete this._eventSeries[run.name];
  316. }
  317. }
  318. }
  319. run.dirty = false;
  320. }
  321. if(this.animate){
  322. // grow from the bottom
  323. var plotGroup = this.group;
  324. fx.animateTransform(lang.delegate({
  325. shape: plotGroup,
  326. duration: DEFAULT_ANIMATION_LENGTH,
  327. transform:[
  328. {name:"translate", start: [0, dim.height - offsets.b], end: [0, 0]},
  329. {name:"scale", start: [1, 0], end:[1, 1]},
  330. {name:"original"}
  331. ]
  332. }, this.animate)).play();
  333. }
  334. this.dirty = false;
  335. return this; // dojox.charting.plot2d.Default
  336. }
  337. });
  338. });