Completed LuCI Livestats
[project/luci.git] / applications / luci-livestats / htdocs / luci-static / resources / livestats / Legend.js
1 /*
2     PlotKit Legend
3     ==============
4
5     Handles laying out legend into a DIV element.
6     Design taken from comments of Julien Wajsberg (http://
7 groups.google.com/group/plotkit/browse_thread/thread/2494bd88e6e9956d)
8     and Niel Domingo (http://nieldomingo.blogspot.com/2007/03/legend-
9 for-plotkit-bar-charts.html).
10
11     Copyright
12     ---------
13     Copyright 2007 (c) Ashley Martens <ashleym_72^yahoo.com>
14     For use under the BSD license. <http://www.liquidx.net/plotkit>
15
16 */
17
18 try {
19     if (typeof(MochiKit.Base) == 'undefined'   ||
20         typeof(MochiKit.DOM) == 'undefined'    ||
21         typeof(MochiKit.Color) == 'undefined'  ||
22         typeof(MochiKit.Format) == 'undefined' ||
23         typeof(PlotKit.Layout) == 'undefined'  ||
24         typeof(PlotKit.Base) == 'undefined')
25     {
26         throw "";
27     }
28 }
29 catch (e) {
30     throw "PlotKit depends on MochiKit.{Base,Color,DOM,Format}"
31 }
32
33 if (typeof(PlotKit.LegendRenderer) == 'undefined') {
34     PlotKit.LegendRenderer = {};
35 }
36
37 PlotKit.LegendRenderer = function(element, layout, options) {
38     if (arguments.length  > 0)
39         this.__init__(element, layout, options);
40 };
41
42
43 PlotKit.LegendRenderer.NAME = "PlotKit.LegendRenderer";
44 PlotKit.LegendRenderer.VERSION = PlotKit.VERSION;
45
46 PlotKit.LegendRenderer.__repr__ = function() {
47     return "[" + this.NAME + " " + this.VERSION + "]";
48 };
49
50 PlotKit.LegendRenderer.toString = function() {
51     return this.__repr__();
52 }
53
54 PlotKit.LegendRenderer.prototype.__init__ = function(element, layout,
55 options) {
56     var isNil = MochiKit.Base.isUndefinedOrNull;
57     var Color = MochiKit.Color.Color;
58
59     this.options = {
60         "colorScheme": PlotKit.Base.palette(PlotKit.Base.baseColors()
61 [0]),
62         "legendStyle": "table",
63         "tableColumns": 1
64     };
65     MochiKit.Base.update(this.options, options ? options : {});
66
67     this.layout = layout;
68     this.element = MochiKit.DOM.getElement(element);
69     // --- check whether everything is ok before we return
70
71     if (isNil(this.element))
72         throw "CRILegend() - passed legend is not found";
73 };
74
75 PlotKit.LegendRenderer.prototype.render = function() {
76     var colorScheme = this.options.colorScheme;
77     var setNames = PlotKit.Base.keys(this.layout.datasets);
78     
79         MochiKit.DOM.updateNodeAttributes(this.element,
80         {"style":
81       {"margin":"0"
82       ,"padding":"0"
83       }
84     });
85
86
87     var ul = null;
88     if (this.options.legendStyle == "table")
89         ul = this._renderListTable(colorScheme, setNames);
90     else
91         ul = this._renderList(colorScheme, setNames);
92     MochiKit.DOM.appendChildNodes(this.element, ul);
93  
94 };
95
96 PlotKit.LegendRenderer.prototype._renderList = function(colorScheme,
97 setNames) {
98     var ul = document.createElement("ul");
99     ul.style.listStyle="none";
100     ul.style.margin="0";
101     ul.style.padding="0";
102
103     var colorCount = colorScheme.length;
104     var setCount = setNames.length;
105
106     for (var i = 0; i < setCount; i++) {
107         var setName = setNames[i];
108         var color = colorScheme[i%colorCount];
109         var le = this._renderElement(setName, color.toRGBString());
110         ul.appendChild(le);
111     }
112
113     return ul;
114 };
115
116 PlotKit.LegendRenderer.prototype._renderElement = function(title,
117 color) {
118     var le = MochiKit.DOM.createDOM("li");
119     le.style.listStyle="none";
120     le.style.margin="0 0 5px 0";
121     le.style.padding="0";
122
123     var box = MochiKit.DOM.createDOM("div");
124     box.style.backgroundColor=color;
125     box.style.width="2em";
126     box.style.height=".9em";
127     box.style.border="1px solid black";
128     box.style.margin="0 5px 0 0";
129     box.style.padding="0";
130     box.style.float="left";
131     box.style.cssFloat="left";
132     box.style.clear="left";
133     box.style.cssClear="left";
134
135     var span = MochiKit.DOM.createDOM("span");
136     MochiKit.DOM.appendChildNodes(span,
137 document.createTextNode(title));
138
139     MochiKit.DOM.appendChildNodes(le, box, span);
140
141     return le;
142 };
143
144 PlotKit.LegendRenderer.prototype._renderListTable =
145 function(colorScheme, setNames) {
146         var tabhead = THEAD(null);
147         var tabfoot = TFOOT(null);
148
149         var tabbody = partial(TBODY, null);
150         var i = 0;
151         var colorcount = colorScheme.length;
152         var tabrow;
153         var columns = this.options.tableColumns;
154         for (var label in setNames)
155         {
156                 var legendcolor = colorScheme[i%colorcount];
157                 var legendbox = DIV({'class': 'legendbox', 'className':
158 'legendbox'});
159                 legendbox.style.width = "10px";
160                 legendbox.style.height = "10px";
161                 legendbox.style.backgroundColor = legendcolor.toHexString();
162                 legendbox.style.borderWidth = "1px";
163                 legendbox.style.borderStyle = "solid";
164                 legendbox.style.borderColor = "#000000";
165                 var boxcell = TD(null, legendbox);
166
167                 var labelcell = TD({'class': 'legendlabel', 'className':
168 'legendlabel'}, setNames[i]);
169                 labelcell.style.font = 'normal 10pt arial';
170
171                 if (!(i % columns))
172                 {
173                     tabrow = partial(TR, null);
174                 }
175                 tabrow = partial(tabrow, boxcell, labelcell);
176                 if (i % columns)
177                 {
178                     tabrow = tabrow(null);
179                     tabbody = partial(tabbody, tabrow);
180                 }
181                 i++;
182         }
183         if ((setNames % columns))
184         {
185                 tabrow = tabrow(TD(null), TD(null));
186                 tabbody = partial(tabbody, tabrow);
187         }
188         tabbody = tabbody(null);
189
190         tab = TABLE({'class': 'legendcontainer', 'className':
191 'legendcontainer'}, tabhead, tabfoot, tabbody);
192         tab.style.marginTop = '1em';
193         tab.style.marginLeft = '1.5em';
194         tab.style.marginBottom = '1em';
195         tab.style.borderWidth = '1px';
196         tab.style.borderStyle = 'solid';
197         tab.style.borderColor = '#000000';
198
199         return tab;
200 };
201
202 // Namespace Iniitialisation
203
204 PlotKit.Legend = {}
205 PlotKit.Legend.LegendRenderer = PlotKit.LegendRenderer;
206
207
208 PlotKit.Legend.EXPORT = [
209     "LegendRenderer"
210 ];
211
212 PlotKit.Legend.EXPORT_OK = [
213     "LegendRenderer"
214 ];
215
216 PlotKit.Legend.__new__ = function() {
217     var m = MochiKit.Base;
218
219     m.nameFunctions(this);
220
221     this.EXPORT_TAGS = {
222         ":common": this.EXPORT,
223         ":all": m.concat(this.EXPORT, this.EXPORT_OK)
224     };
225 };
226
227 PlotKit.Legend.__new__();
228 MochiKit.Base._exportSymbols(this, PlotKit.Legend);