[483] | 1 | define(["dojo/_base/lang", "dojo/_base/array", "dojo/_base/declare", "dojo/has", "./CartesianBase", "./_PlotEvents", "./common", |
---|
| 2 | "dojox/lang/functional", "dojox/lang/functional/reversed", "dojox/lang/utils", "dojox/gfx/fx", "dojox/gfx/gradutils"], |
---|
| 3 | function(lang, arr, declare, has, CartesianBase, _PlotEvents, dc, df, dfr, du, fx, gradutils){ |
---|
| 4 | |
---|
| 5 | var purgeGroup = dfr.lambda("item.purgeGroup()"); |
---|
| 6 | |
---|
| 7 | return declare("dojox.charting.plot2d.Scatter", [CartesianBase, _PlotEvents], { |
---|
| 8 | // summary: |
---|
| 9 | // A plot object representing a typical scatter chart. |
---|
| 10 | defaultParams: { |
---|
| 11 | shadows: null, // draw shadows |
---|
| 12 | animate: null // animate chart to place |
---|
| 13 | }, |
---|
| 14 | optionalParams: { |
---|
| 15 | // theme component |
---|
| 16 | markerStroke: {}, |
---|
| 17 | markerOutline: {}, |
---|
| 18 | markerShadow: {}, |
---|
| 19 | markerFill: {}, |
---|
| 20 | markerFont: "", |
---|
| 21 | markerFontColor: "", |
---|
| 22 | styleFunc: null |
---|
| 23 | }, |
---|
| 24 | |
---|
| 25 | constructor: function(chart, kwArgs){ |
---|
| 26 | // summary: |
---|
| 27 | // Create the scatter plot. |
---|
| 28 | // chart: dojox/charting/Chart |
---|
| 29 | // The chart this plot belongs to. |
---|
| 30 | // kwArgs: dojox.charting.plot2d.__DefaultCtorArgs? |
---|
| 31 | // An optional keyword arguments object to help define this plot's parameters. |
---|
| 32 | this.opt = lang.clone(lang.mixin(this.opt, this.defaultParams)); |
---|
| 33 | du.updateWithObject(this.opt, kwArgs); |
---|
| 34 | du.updateWithPattern(this.opt, kwArgs, this.optionalParams); |
---|
| 35 | this.animate = this.opt.animate; |
---|
| 36 | }, |
---|
| 37 | |
---|
| 38 | render: function(dim, offsets){ |
---|
| 39 | // summary: |
---|
| 40 | // Run the calculations for any axes for this plot. |
---|
| 41 | // dim: Object |
---|
| 42 | // An object in the form of { width, height } |
---|
| 43 | // offsets: Object |
---|
| 44 | // An object of the form { l, r, t, b}. |
---|
| 45 | // returns: dojox/charting/plot2d/Scatter |
---|
| 46 | // A reference to this plot for functional chaining. |
---|
| 47 | if(this.zoom && !this.isDataDirty()){ |
---|
| 48 | return this.performZoom(dim, offsets); |
---|
| 49 | } |
---|
| 50 | this.resetEvents(); |
---|
| 51 | this.dirty = this.isDirty(); |
---|
| 52 | var s; |
---|
| 53 | if(this.dirty){ |
---|
| 54 | arr.forEach(this.series, purgeGroup); |
---|
| 55 | this._eventSeries = {}; |
---|
| 56 | this.cleanGroup(); |
---|
| 57 | s = this.getGroup(); |
---|
| 58 | df.forEachRev(this.series, function(item){ item.cleanGroup(s); }); |
---|
| 59 | } |
---|
| 60 | var t = this.chart.theme, events = this.events(); |
---|
| 61 | for(var i = this.series.length - 1; i >= 0; --i){ |
---|
| 62 | var run = this.series[i]; |
---|
| 63 | if(!this.dirty && !run.dirty){ |
---|
| 64 | t.skip(); |
---|
| 65 | this._reconnectEvents(run.name); |
---|
| 66 | continue; |
---|
| 67 | } |
---|
| 68 | run.cleanGroup(); |
---|
| 69 | if(!run.data.length){ |
---|
| 70 | run.dirty = false; |
---|
| 71 | t.skip(); |
---|
| 72 | continue; |
---|
| 73 | } |
---|
| 74 | |
---|
| 75 | var theme = t.next("marker", [this.opt, run]), lpoly, |
---|
| 76 | ht = this._hScaler.scaler.getTransformerFromModel(this._hScaler), |
---|
| 77 | vt = this._vScaler.scaler.getTransformerFromModel(this._vScaler); |
---|
| 78 | s = run.group; |
---|
| 79 | if(typeof run.data[0] == "number"){ |
---|
| 80 | lpoly = arr.map(run.data, function(v, i){ |
---|
| 81 | return { |
---|
| 82 | x: ht(i + 1) + offsets.l, |
---|
| 83 | y: dim.height - offsets.b - vt(v) |
---|
| 84 | }; |
---|
| 85 | }, this); |
---|
| 86 | }else{ |
---|
| 87 | lpoly = arr.map(run.data, function(v, i){ |
---|
| 88 | return { |
---|
| 89 | x: ht(v.x) + offsets.l, |
---|
| 90 | y: dim.height - offsets.b - vt(v.y) |
---|
| 91 | }; |
---|
| 92 | }, this); |
---|
| 93 | } |
---|
| 94 | |
---|
| 95 | var shadowMarkers = new Array(lpoly.length), |
---|
| 96 | frontMarkers = new Array(lpoly.length), |
---|
| 97 | outlineMarkers = new Array(lpoly.length); |
---|
| 98 | |
---|
| 99 | arr.forEach(lpoly, function(c, i){ |
---|
| 100 | var value = run.data[i], finalTheme; |
---|
| 101 | if(this.opt.styleFunc || typeof value != "number"){ |
---|
| 102 | var tMixin = typeof value != "number" ? [value] : []; |
---|
| 103 | if(this.opt.styleFunc){ |
---|
| 104 | tMixin.push(this.opt.styleFunc(value)); |
---|
| 105 | } |
---|
| 106 | finalTheme = t.addMixin(theme, "marker", tMixin, true); |
---|
| 107 | }else{ |
---|
| 108 | finalTheme = t.post(theme, "marker"); |
---|
| 109 | } |
---|
| 110 | var path = "M" + c.x + " " + c.y + " " + finalTheme.symbol; |
---|
| 111 | if(finalTheme.marker.shadow){ |
---|
| 112 | shadowMarkers[i] = s.createPath("M" + (c.x + finalTheme.marker.shadow.dx) + " " + |
---|
| 113 | (c.y + finalTheme.marker.shadow.dy) + " " + finalTheme.symbol). |
---|
| 114 | setStroke(finalTheme.marker.shadow).setFill(finalTheme.marker.shadow.color); |
---|
| 115 | if(this.animate){ |
---|
| 116 | this._animateScatter(shadowMarkers[i], dim.height - offsets.b); |
---|
| 117 | } |
---|
| 118 | } |
---|
| 119 | if(finalTheme.marker.outline){ |
---|
| 120 | var outline = dc.makeStroke(finalTheme.marker.outline); |
---|
| 121 | outline.width = 2 * outline.width + finalTheme.marker.stroke.width; |
---|
| 122 | outlineMarkers[i] = s.createPath(path).setStroke(outline); |
---|
| 123 | if(this.animate){ |
---|
| 124 | this._animateScatter(outlineMarkers[i], dim.height - offsets.b); |
---|
| 125 | } |
---|
| 126 | } |
---|
| 127 | var stroke = dc.makeStroke(finalTheme.marker.stroke), |
---|
| 128 | fill = this._plotFill(finalTheme.marker.fill, dim, offsets); |
---|
| 129 | if(fill && (fill.type === "linear" || fill.type == "radial")){ |
---|
| 130 | var color = gradutils.getColor(fill, {x: c.x, y: c.y}); |
---|
| 131 | if(stroke){ |
---|
| 132 | stroke.color = color; |
---|
| 133 | } |
---|
| 134 | frontMarkers[i] = s.createPath(path).setStroke(stroke).setFill(color); |
---|
| 135 | }else{ |
---|
| 136 | frontMarkers[i] = s.createPath(path).setStroke(stroke).setFill(fill); |
---|
| 137 | } |
---|
| 138 | if(this.opt.labels){ |
---|
| 139 | var markerBox = frontMarkers[i].getBoundingBox(); |
---|
| 140 | this.createLabel(s, value, markerBox, finalTheme); |
---|
| 141 | } |
---|
| 142 | if(this.animate){ |
---|
| 143 | this._animateScatter(frontMarkers[i], dim.height - offsets.b); |
---|
| 144 | } |
---|
| 145 | }, this); |
---|
| 146 | if(frontMarkers.length){ |
---|
| 147 | run.dyn.marker = theme.symbol; |
---|
| 148 | run.dyn.markerStroke = frontMarkers[frontMarkers.length - 1].getStroke(); |
---|
| 149 | run.dyn.markerFill = frontMarkers[frontMarkers.length - 1].getFill(); |
---|
| 150 | } |
---|
| 151 | |
---|
| 152 | if(events){ |
---|
| 153 | var eventSeries = new Array(frontMarkers.length); |
---|
| 154 | arr.forEach(frontMarkers, function(s, i){ |
---|
| 155 | var o = { |
---|
| 156 | element: "marker", |
---|
| 157 | index: i, |
---|
| 158 | run: run, |
---|
| 159 | shape: s, |
---|
| 160 | outline: outlineMarkers && outlineMarkers[i] || null, |
---|
| 161 | shadow: shadowMarkers && shadowMarkers[i] || null, |
---|
| 162 | cx: lpoly[i].x, |
---|
| 163 | cy: lpoly[i].y |
---|
| 164 | }; |
---|
| 165 | if(typeof run.data[0] == "number"){ |
---|
| 166 | o.x = i + 1; |
---|
| 167 | o.y = run.data[i]; |
---|
| 168 | }else{ |
---|
| 169 | o.x = run.data[i].x; |
---|
| 170 | o.y = run.data[i].y; |
---|
| 171 | } |
---|
| 172 | this._connectEvents(o); |
---|
| 173 | eventSeries[i] = o; |
---|
| 174 | }, this); |
---|
| 175 | this._eventSeries[run.name] = eventSeries; |
---|
| 176 | }else{ |
---|
| 177 | delete this._eventSeries[run.name]; |
---|
| 178 | } |
---|
| 179 | run.dirty = false; |
---|
| 180 | } |
---|
| 181 | this.dirty = false; |
---|
| 182 | // chart mirroring starts |
---|
| 183 | if(has("dojo-bidi")){ |
---|
| 184 | this._checkOrientation(this.group, dim, offsets); |
---|
| 185 | } |
---|
| 186 | // chart mirroring ends |
---|
| 187 | return this; // dojox/charting/plot2d/Scatter |
---|
| 188 | }, |
---|
| 189 | _animateScatter: function(shape, offset){ |
---|
| 190 | fx.animateTransform(lang.delegate({ |
---|
| 191 | shape: shape, |
---|
| 192 | duration: 1200, |
---|
| 193 | transform: [ |
---|
| 194 | {name: "translate", start: [0, offset], end: [0, 0]}, |
---|
| 195 | {name: "scale", start: [0, 0], end: [1, 1]}, |
---|
| 196 | {name: "original"} |
---|
| 197 | ] |
---|
| 198 | }, this.animate)).play(); |
---|
| 199 | } |
---|
| 200 | }); |
---|
| 201 | }); |
---|