Free cookie consent management tool by TermsFeed Policy Generator

source: branches/OaaS/HeuristicLab.Services.Optimization.Web/Content/jqplot/src/jqplot.tableLegendRenderer.js @ 12209

Last change on this file since 12209 was 9062, checked in by fschoepp, 12 years ago

#1888:
Backend changes:

  • Simplified job state detection (only one hive call will be made to detect all states now, instead of one additional call per job)
  • Reorganized classes (moved model classes into Model folder)

Website changes:

  • Website now heavily uses JavaScript to achieve better user experience
  • JavaScript degrades gracefully, except for plots
  • Tables: Added jquery-datatable-plugin to extend tables (pagination + search functionality)
  • OaaS-Website now uses the design of the HL websites (found in WebApplication branch)
  • Added jqplot to render zoomable line plots for HL-Datatables
  • Styling.js: Plots will be generated by using an ajax call; additional jquery-styling occurs within this file.
  • Added jquery-ui-1.9.2 which is capable of handling/rendering tabs, accordions and resizers.
File size: 13.0 KB
Line 
1/**
2 * jqPlot
3 * Pure JavaScript plotting plugin using jQuery
4 *
5 * Version: @VERSION
6 *
7 * Copyright (c) 2009-2011 Chris Leonello
8 * jqPlot is currently available for use in all personal or commercial projects
9 * under both the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL
10 * version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html) licenses. This means that you can
11 * choose the license that best suits your project and use it accordingly.
12 *
13 * Although not required, the author would appreciate an email letting him
14 * know of any substantial use of jqPlot.  You can reach the author at:
15 * chris at jqplot dot com or see http://www.jqplot.com/info.php .
16 *
17 * If you are feeling kind and generous, consider supporting the project by
18 * making a donation at: http://www.jqplot.com/donate.php .
19 *
20 * sprintf functions contained in jqplot.sprintf.js by Ash Searle:
21 *
22 *     version 2007.04.27
23 *     author Ash Searle
24 *     http://hexmen.com/blog/2007/03/printf-sprintf/
25 *     http://hexmen.com/js/sprintf.js
26 *     The author (Ash Searle) has placed this code in the public domain:
27 *     "This code is unrestricted: you are free to use it however you like."
28 *
29 */
30(function($) {
31    // class $.jqplot.TableLegendRenderer
32    // The default legend renderer for jqPlot.
33    $.jqplot.TableLegendRenderer = function(){
34        //
35    };
36   
37    $.jqplot.TableLegendRenderer.prototype.init = function(options) {
38        $.extend(true, this, options);
39    };
40       
41    $.jqplot.TableLegendRenderer.prototype.addrow = function (label, color, pad, reverse) {
42        var rs = (pad) ? this.rowSpacing+'px' : '0px';
43        var tr;
44        var td;
45        var elem;
46        var div0;
47        var div1;
48        elem = document.createElement('tr');
49        tr = $(elem);
50        tr.addClass('jqplot-table-legend');
51        elem = null;
52
53        if (reverse){
54            tr.prependTo(this._elem);
55        }
56
57        else{
58            tr.appendTo(this._elem);
59        }
60
61        if (this.showSwatches) {
62            td = $(document.createElement('td'));
63            td.addClass('jqplot-table-legend');
64            td.css({textAlign: 'center', paddingTop: rs});
65
66            div0 = $(document.createElement('div'));
67            div1 = $(document.createElement('div'));
68            div1.addClass('jqplot-table-legend-swatch');
69            div1.css({backgroundColor: color, borderColor: color});
70
71            tr.append(td.append(div0.append(div1)));
72
73            // $('<td class="jqplot-table-legend" style="text-align:center;padding-top:'+rs+';">'+
74            // '<div><div class="jqplot-table-legend-swatch" style="background-color:'+color+';border-color:'+color+';"></div>'+
75            // '</div></td>').appendTo(tr);
76        }
77        if (this.showLabels) {
78            td = $(document.createElement('td'));
79            td.addClass('jqplot-table-legend');
80            td.css('paddingTop', rs);
81            tr.append(td);
82
83            // elem = $('<td class="jqplot-table-legend" style="padding-top:'+rs+';"></td>');
84            // elem.appendTo(tr);
85            if (this.escapeHtml) {
86                td.text(label);
87            }
88            else {
89                td.html(label);
90            }
91        }
92        td = null;
93        div0 = null;
94        div1 = null;
95        tr = null;
96        elem = null;
97    };
98   
99    // called with scope of legend
100    $.jqplot.TableLegendRenderer.prototype.draw = function() {
101        if (this._elem) {
102            this._elem.emptyForce();
103            this._elem = null;
104        }
105
106        if (this.show) {
107            var series = this._series;
108            // make a table.  one line label per row.
109            var elem = document.createElement('table');
110            this._elem = $(elem);
111            this._elem.addClass('jqplot-table-legend');
112
113            var ss = {position:'absolute'};
114            if (this.background) {
115                ss['background'] = this.background;
116            }
117            if (this.border) {
118                ss['border'] = this.border;
119            }
120            if (this.fontSize) {
121                ss['fontSize'] = this.fontSize;
122            }
123            if (this.fontFamily) {
124                ss['fontFamily'] = this.fontFamily;
125            }
126            if (this.textColor) {
127                ss['textColor'] = this.textColor;
128            }
129            if (this.marginTop != null) {
130                ss['marginTop'] = this.marginTop;
131            }
132            if (this.marginBottom != null) {
133                ss['marginBottom'] = this.marginBottom;
134            }
135            if (this.marginLeft != null) {
136                ss['marginLeft'] = this.marginLeft;
137            }
138            if (this.marginRight != null) {
139                ss['marginRight'] = this.marginRight;
140            }
141           
142       
143            var pad = false,
144                reverse = false,
145        s;
146            for (var i = 0; i< series.length; i++) {
147                s = series[i];
148                if (s._stack || s.renderer.constructor == $.jqplot.BezierCurveRenderer){
149                    reverse = true;
150                }
151                if (s.show && s.showLabel) {
152                    var lt = this.labels[i] || s.label.toString();
153                    if (lt) {
154                        var color = s.color;
155                        if (reverse && i < series.length - 1){
156                            pad = true;
157                        }
158                        else if (reverse && i == series.length - 1){
159                            pad = false;
160                        }
161                        this.renderer.addrow.call(this, lt, color, pad, reverse);
162                        pad = true;
163                    }
164                    // let plugins add more rows to legend.  Used by trend line plugin.
165                    for (var j=0; j<$.jqplot.addLegendRowHooks.length; j++) {
166                        var item = $.jqplot.addLegendRowHooks[j].call(this, s);
167                        if (item) {
168                            this.renderer.addrow.call(this, item.label, item.color, pad);
169                            pad = true;
170                        }
171                    }
172                    lt = null;
173                }
174            }
175        }
176        return this._elem;
177    };
178   
179    $.jqplot.TableLegendRenderer.prototype.pack = function(offsets) {
180        if (this.show) {       
181            if (this.placement == 'insideGrid') {
182                switch (this.location) {
183                    case 'nw':
184                        var a = offsets.left;
185                        var b = offsets.top;
186                        this._elem.css('left', a);
187                        this._elem.css('top', b);
188                        break;
189                    case 'n':
190                        var a = (offsets.left + (this._plotDimensions.width - offsets.right))/2 - this.getWidth()/2;
191                        var b = offsets.top;
192                        this._elem.css('left', a);
193                        this._elem.css('top', b);
194                        break;
195                    case 'ne':
196                        var a = offsets.right;
197                        var b = offsets.top;
198                        this._elem.css({right:a, top:b});
199                        break;
200                    case 'e':
201                        var a = offsets.right;
202                        var b = (offsets.top + (this._plotDimensions.height - offsets.bottom))/2 - this.getHeight()/2;
203                        this._elem.css({right:a, top:b});
204                        break;
205                    case 'se':
206                        var a = offsets.right;
207                        var b = offsets.bottom;
208                        this._elem.css({right:a, bottom:b});
209                        break;
210                    case 's':
211                        var a = (offsets.left + (this._plotDimensions.width - offsets.right))/2 - this.getWidth()/2;
212                        var b = offsets.bottom;
213                        this._elem.css({left:a, bottom:b});
214                        break;
215                    case 'sw':
216                        var a = offsets.left;
217                        var b = offsets.bottom;
218                        this._elem.css({left:a, bottom:b});
219                        break;
220                    case 'w':
221                        var a = offsets.left;
222                        var b = (offsets.top + (this._plotDimensions.height - offsets.bottom))/2 - this.getHeight()/2;
223                        this._elem.css({left:a, top:b});
224                        break;
225                    default:  // same as 'se'
226                        var a = offsets.right;
227                        var b = offsets.bottom;
228                        this._elem.css({right:a, bottom:b});
229                        break;
230                }
231               
232            }
233            else if (this.placement == 'outside'){
234                switch (this.location) {
235                    case 'nw':
236                        var a = this._plotDimensions.width - offsets.left;
237                        var b = offsets.top;
238                        this._elem.css('right', a);
239                        this._elem.css('top', b);
240                        break;
241                    case 'n':
242                        var a = (offsets.left + (this._plotDimensions.width - offsets.right))/2 - this.getWidth()/2;
243                        var b = this._plotDimensions.height - offsets.top;
244                        this._elem.css('left', a);
245                        this._elem.css('bottom', b);
246                        break;
247                    case 'ne':
248                        var a = this._plotDimensions.width - offsets.right;
249                        var b = offsets.top;
250                        this._elem.css({left:a, top:b});
251                        break;
252                    case 'e':
253                        var a = this._plotDimensions.width - offsets.right;
254                        var b = (offsets.top + (this._plotDimensions.height - offsets.bottom))/2 - this.getHeight()/2;
255                        this._elem.css({left:a, top:b});
256                        break;
257                    case 'se':
258                        var a = this._plotDimensions.width - offsets.right;
259                        var b = offsets.bottom;
260                        this._elem.css({left:a, bottom:b});
261                        break;
262                    case 's':
263                        var a = (offsets.left + (this._plotDimensions.width - offsets.right))/2 - this.getWidth()/2;
264                        var b = this._plotDimensions.height - offsets.bottom;
265                        this._elem.css({left:a, top:b});
266                        break;
267                    case 'sw':
268                        var a = this._plotDimensions.width - offsets.left;
269                        var b = offsets.bottom;
270                        this._elem.css({right:a, bottom:b});
271                        break;
272                    case 'w':
273                        var a = this._plotDimensions.width - offsets.left;
274                        var b = (offsets.top + (this._plotDimensions.height - offsets.bottom))/2 - this.getHeight()/2;
275                        this._elem.css({right:a, top:b});
276                        break;
277                    default:  // same as 'se'
278                        var a = offsets.right;
279                        var b = offsets.bottom;
280                        this._elem.css({right:a, bottom:b});
281                        break;
282                }
283            }
284            else {
285                switch (this.location) {
286                    case 'nw':
287                        this._elem.css({left:0, top:offsets.top});
288                        break;
289                    case 'n':
290                        var a = (offsets.left + (this._plotDimensions.width - offsets.right))/2 - this.getWidth()/2;
291                        this._elem.css({left: a, top:offsets.top});
292                        break;
293                    case 'ne':
294                        this._elem.css({right:0, top:offsets.top});
295                        break;
296                    case 'e':
297                        var b = (offsets.top + (this._plotDimensions.height - offsets.bottom))/2 - this.getHeight()/2;
298                        this._elem.css({right:offsets.right, top:b});
299                        break;
300                    case 'se':
301                        this._elem.css({right:offsets.right, bottom:offsets.bottom});
302                        break;
303                    case 's':
304                        var a = (offsets.left + (this._plotDimensions.width - offsets.right))/2 - this.getWidth()/2;
305                        this._elem.css({left: a, bottom:offsets.bottom});
306                        break;
307                    case 'sw':
308                        this._elem.css({left:offsets.left, bottom:offsets.bottom});
309                        break;
310                    case 'w':
311                        var b = (offsets.top + (this._plotDimensions.height - offsets.bottom))/2 - this.getHeight()/2;
312                        this._elem.css({left:offsets.left, top:b});
313                        break;
314                    default:  // same as 'se'
315                        this._elem.css({right:offsets.right, bottom:offsets.bottom});
316                        break;
317                }
318            }
319        }
320    };
321})(jQuery);
Note: See TracBrowser for help on using the repository browser.