| 1 | define([ |
|---|
| 2 | "dojo/_base/array", |
|---|
| 3 | "dojo/_base/declare", |
|---|
| 4 | "dojo/_base/lang", |
|---|
| 5 | "dojox/mvc/at" |
|---|
| 6 | ], function(darray, declare, lang, at){ |
|---|
| 7 | return declare("dojox.mvc.StatefulSeries", null, { |
|---|
| 8 | // summary: |
|---|
| 9 | // Chart data plugin ("series") that watches for properties specified in dojox/mvc/at handles in the given data. |
|---|
| 10 | // At initialization, and when the properties are updated, creates the data from data given and updates the chart. |
|---|
| 11 | // example: |
|---|
| 12 | // Two seconds later, the chart changes from 25%/25%/50% to 10%/10%/80%, as the data model changes: |
|---|
| 13 | // | <html> |
|---|
| 14 | // | <head> |
|---|
| 15 | // | <script type="text/javascript" src="/path/to/dojo/dojo.js"></script> |
|---|
| 16 | // | <script> |
|---|
| 17 | // | require([ |
|---|
| 18 | // | "dojo/Stateful", "dojox/mvc/at", "dojox/mvc/StatefulSeries", |
|---|
| 19 | // | "dojox/charting/Chart", "dojox/charting/themes/PlotKit/blue", "dojox/charting/plot2d/Pie", |
|---|
| 20 | // | "dojo/domReady!" |
|---|
| 21 | // | ], function(Stateful, at, StatefulSeries, Chart, blue){ |
|---|
| 22 | // | var model = new Stateful({First: 25, Second: 25, Third: 50}); |
|---|
| 23 | // | new Chart("chart") |
|---|
| 24 | // | .setTheme(blue) |
|---|
| 25 | // | .addPlot("default", {type: "Pie"}) |
|---|
| 26 | // | .addSeries("default", new StatefulSeries([at(model, "First"), at(model, "Second"), at(model, "Third")])).render(); |
|---|
| 27 | // | setTimeout(function(){ model.set("First", 10); model.set("Second", 10); model.set("Third", 80); }, 2000); |
|---|
| 28 | // | }); |
|---|
| 29 | // | </script> |
|---|
| 30 | // | </head> |
|---|
| 31 | // | <body> |
|---|
| 32 | // | <div id="chart"></div> |
|---|
| 33 | // | </body> |
|---|
| 34 | // | </html> |
|---|
| 35 | |
|---|
| 36 | constructor: function(/*Anything[]*/ items){ |
|---|
| 37 | var _self = this; |
|---|
| 38 | function pushDataChanges(){ |
|---|
| 39 | if(_self.series){ |
|---|
| 40 | _self.series.chart.updateSeries(_self.series.name, _self); |
|---|
| 41 | _self.series.chart.delayedRender(); |
|---|
| 42 | } |
|---|
| 43 | } |
|---|
| 44 | this._handles = []; |
|---|
| 45 | this.data = darray.map(items, function(item, idx){ |
|---|
| 46 | if((item || {}).atsignature == "dojox.mvc.at"){ |
|---|
| 47 | var target = item.target, targetProp = item.targetProp; |
|---|
| 48 | if(lang.isString(target)){ |
|---|
| 49 | throw new Error("Literal-based dojox/mvc/at is not supported in dojox/mvc/StatefulSeries."); |
|---|
| 50 | } |
|---|
| 51 | if(item.bindDirection && !(item.bindDirection & at.from)){ |
|---|
| 52 | console.warn("Data binding bindDirection option is ignored in dojox/mvc/StatefulSeries."); |
|---|
| 53 | } |
|---|
| 54 | if(targetProp && lang.isFunction(target.set) && lang.isFunction(target.watch)){ |
|---|
| 55 | var converter = item.converter, formatFunc = (converter || {}).format && lang.hitch({target: target, source: this}, converter.format); |
|---|
| 56 | this._handles.push(target.watch(targetProp, function(name, old, current){ |
|---|
| 57 | _self.data[idx] = formatFunc ? formatFunc(current) : current; |
|---|
| 58 | pushDataChanges(); |
|---|
| 59 | })); |
|---|
| 60 | } |
|---|
| 61 | return !targetProp ? target : lang.isFunction(target.get) ? target.get(targetProp) : target[targetProp]; |
|---|
| 62 | }else{ |
|---|
| 63 | return item; |
|---|
| 64 | } |
|---|
| 65 | }, this); |
|---|
| 66 | pushDataChanges(); |
|---|
| 67 | }, |
|---|
| 68 | |
|---|
| 69 | destroy: function(){ |
|---|
| 70 | for(var h = null; h = this._handles.pop();){ |
|---|
| 71 | h.unwatch(); |
|---|
| 72 | } |
|---|
| 73 | }, |
|---|
| 74 | |
|---|
| 75 | setSeriesObject: function(series){ |
|---|
| 76 | this.series = series; |
|---|
| 77 | } |
|---|
| 78 | }); |
|---|
| 79 | }); |
|---|
