1 | define(["dojo/_base/declare", "dijit/_WidgetBase", "dojox/gfx","dojo/_base/array", "dojo/has", "dojo/has!dojo-bidi?../bidi/widget/Legend", |
---|
2 | "dojox/lang/functional", "dojo/dom", "dojo/dom-construct", "dojo/dom-class","dijit/registry"], |
---|
3 | function(declare, _WidgetBase, gfx, arr, has, BidiLegend, df, |
---|
4 | dom, domConstruct, domClass, registry){ |
---|
5 | |
---|
6 | var Legend = declare(has("dojo-bidi")? "dojox.charting.widget.NonBidiLegend" : "dojox.charting.widget.Legend", _WidgetBase, { |
---|
7 | // summary: |
---|
8 | // A legend for a chart. A legend contains summary labels for |
---|
9 | // each series of data contained in the chart. |
---|
10 | // |
---|
11 | // Set the horizontal attribute to boolean false to layout legend labels vertically. |
---|
12 | // Set the horizontal attribute to a number to layout legend labels in horizontal |
---|
13 | // rows each containing that number of labels (except possibly the last row). |
---|
14 | // |
---|
15 | // (Line or Scatter charts (colored lines with shape symbols) ) |
---|
16 | // -o- Series1 -X- Series2 -v- Series3 |
---|
17 | // |
---|
18 | // (Area/Bar/Pie charts (letters represent colors)) |
---|
19 | // [a] Series1 [b] Series2 [c] Series3 |
---|
20 | |
---|
21 | chartRef: "", |
---|
22 | horizontal: true, |
---|
23 | swatchSize: 18, |
---|
24 | |
---|
25 | legendBody: null, |
---|
26 | |
---|
27 | postCreate: function(){ |
---|
28 | if(!this.chart && this.chartRef){ |
---|
29 | this.chart = registry.byId(this.chartRef) || registry.byNode(dom.byId(this.chartRef)); |
---|
30 | if(!this.chart){ |
---|
31 | console.log("Could not find chart instance with id: " + this.chartRef); |
---|
32 | } |
---|
33 | } |
---|
34 | // we want original chart |
---|
35 | this.chart = this.chart.chart || this.chart; |
---|
36 | this.refresh(); |
---|
37 | }, |
---|
38 | buildRendering: function(){ |
---|
39 | this.domNode = domConstruct.create("table", |
---|
40 | {role: "group", "aria-label": "chart legend", "class": "dojoxLegendNode"}); |
---|
41 | this.legendBody = domConstruct.create("tbody", null, this.domNode); |
---|
42 | this.inherited(arguments); |
---|
43 | }, |
---|
44 | destroy: function(){ |
---|
45 | if(this._surfaces){ |
---|
46 | arr.forEach(this._surfaces, function(surface){ |
---|
47 | surface.destroy(); |
---|
48 | }); |
---|
49 | } |
---|
50 | this.inherited(arguments); |
---|
51 | }, |
---|
52 | refresh: function(){ |
---|
53 | // summary: |
---|
54 | // regenerates the legend to reflect changes to the chart |
---|
55 | |
---|
56 | // cleanup |
---|
57 | if(this._surfaces){ |
---|
58 | arr.forEach(this._surfaces, function(surface){ |
---|
59 | surface.destroy(); |
---|
60 | }); |
---|
61 | } |
---|
62 | this._surfaces = []; |
---|
63 | while(this.legendBody.lastChild){ |
---|
64 | domConstruct.destroy(this.legendBody.lastChild); |
---|
65 | } |
---|
66 | |
---|
67 | if(this.horizontal){ |
---|
68 | domClass.add(this.domNode, "dojoxLegendHorizontal"); |
---|
69 | // make a container <tr> |
---|
70 | this._tr = domConstruct.create("tr", null, this.legendBody); |
---|
71 | this._inrow = 0; |
---|
72 | } |
---|
73 | |
---|
74 | // keep trying to reach this.series for compatibility reasons in case the user set them, but could be removed |
---|
75 | var s = this.series || this.chart.series; |
---|
76 | if(s.length == 0){ |
---|
77 | return; |
---|
78 | } |
---|
79 | if(s[0].chart.stack[0].declaredClass == "dojox.charting.plot2d.Pie"){ |
---|
80 | var t = s[0].chart.stack[0]; |
---|
81 | if(typeof t.run.data[0] == "number"){ |
---|
82 | var filteredRun = df.map(t.run.data, "Math.max(x, 0)"); |
---|
83 | var slices = df.map(filteredRun, "/this", df.foldl(filteredRun, "+", 0)); |
---|
84 | arr.forEach(slices, function(x, i){ |
---|
85 | this._addLabel(t.dyn[i], t._getLabel(x * 100) + "%"); |
---|
86 | }, this); |
---|
87 | }else{ |
---|
88 | arr.forEach(t.run.data, function(x, i){ |
---|
89 | this._addLabel(t.dyn[i], x.legend || x.text || x.y); |
---|
90 | }, this); |
---|
91 | } |
---|
92 | }else{ |
---|
93 | arr.forEach(s, function(x){ |
---|
94 | this._addLabel(x.dyn, x.legend || x.name); |
---|
95 | }, this); |
---|
96 | } |
---|
97 | }, |
---|
98 | _addLabel: function(dyn, label){ |
---|
99 | // create necessary elements |
---|
100 | var wrapper = domConstruct.create("td"), |
---|
101 | icon = domConstruct.create("div", null, wrapper), |
---|
102 | text = domConstruct.create("label", null, wrapper), |
---|
103 | div = domConstruct.create("div", { |
---|
104 | style: { |
---|
105 | "width": this.swatchSize + "px", |
---|
106 | "height":this.swatchSize + "px", |
---|
107 | "float": "left" |
---|
108 | } |
---|
109 | }, icon); |
---|
110 | domClass.add(icon, "dojoxLegendIcon dijitInline"); |
---|
111 | domClass.add(text, "dojoxLegendText"); |
---|
112 | // create a skeleton |
---|
113 | if(this._tr){ |
---|
114 | // horizontal |
---|
115 | this._tr.appendChild(wrapper); |
---|
116 | if(++this._inrow === this.horizontal){ |
---|
117 | // make a fresh container <tr> |
---|
118 | this._tr = domConstruct.create("tr", null, this.legendBody); |
---|
119 | this._inrow = 0; |
---|
120 | } |
---|
121 | }else{ |
---|
122 | // vertical |
---|
123 | var tr = domConstruct.create("tr", null, this.legendBody); |
---|
124 | tr.appendChild(wrapper); |
---|
125 | } |
---|
126 | |
---|
127 | // populate the skeleton |
---|
128 | this._makeIcon(div, dyn); |
---|
129 | text.innerHTML = String(label); |
---|
130 | if(has("dojo-bidi")){ |
---|
131 | text.dir = this.getTextDir(label, text.dir); |
---|
132 | } |
---|
133 | }, |
---|
134 | _makeIcon: function(div, dyn){ |
---|
135 | var mb = { h: this.swatchSize, w: this.swatchSize }; |
---|
136 | var surface = gfx.createSurface(div, mb.w, mb.h); |
---|
137 | this._surfaces.push(surface); |
---|
138 | if(dyn.fill){ |
---|
139 | // regions |
---|
140 | surface.createRect({x: 2, y: 2, width: mb.w - 4, height: mb.h - 4}). |
---|
141 | setFill(dyn.fill).setStroke(dyn.stroke); |
---|
142 | }else if(dyn.stroke || dyn.marker){ |
---|
143 | // draw line |
---|
144 | var line = {x1: 0, y1: mb.h / 2, x2: mb.w, y2: mb.h / 2}; |
---|
145 | if(dyn.stroke){ |
---|
146 | surface.createLine(line).setStroke(dyn.stroke); |
---|
147 | } |
---|
148 | if(dyn.marker){ |
---|
149 | // draw marker on top |
---|
150 | var c = {x: mb.w / 2, y: mb.h / 2}; |
---|
151 | surface.createPath({path: "M" + c.x + " " + c.y + " " + dyn.marker}). |
---|
152 | setFill(dyn.markerFill).setStroke(dyn.markerStroke); |
---|
153 | } |
---|
154 | }else{ |
---|
155 | // nothing |
---|
156 | surface.createRect({x: 2, y: 2, width: mb.w - 4, height: mb.h - 4}). |
---|
157 | setStroke("black"); |
---|
158 | surface.createLine({x1: 2, y1: 2, x2: mb.w - 2, y2: mb.h - 2}).setStroke("black"); |
---|
159 | surface.createLine({x1: 2, y1: mb.h - 2, x2: mb.w - 2, y2: 2}).setStroke("black"); |
---|
160 | } |
---|
161 | } |
---|
162 | }); |
---|
163 | return has("dojo-bidi")? declare("dojox.charting.widget.Legend", [Legend, BidiLegend]) : Legend; |
---|
164 | |
---|
165 | }); |
---|