source: ether_statistics/web/project/statistics-script.jsp @ 663

Last change on this file since 663 was 663, checked in by vmipsl, 12 years ago

print ok pour mozilla & chrome
File size: 21.4 KB
Line 
1<%@ page import="com.ether.WebHelper" %>
2<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
3
4<script type="text/javascript">
5
6var InterfaceStatistics = Class.create( {
7    initialize: function()
8    {
9        /** *********** CONTAINERS *********** **/
10        this.parent = $( "#containerMiddle" );
11        this.containerMenu = $( "#menuCircle" );
12        this.containerErrors = $( "#errors" );
13
14        /** *********** VARIABLES *********** **/
15        this.language = '<spring:message code="language"/>';
16        this.webmaster = "<%=WebHelper.getProperty(request, "mail.webmaster")%>";
17        this.projectsPath = "resources/images/";
18        this.projectsArray = [
19            {id:"ETHER", img:"logo_Ether_50.jpg", top:"-16px", left:"125px"},
20            {id:"NDACC", img:"logo_Ndacc_50.jpg", top:"1.66667px", left:"46.3334px"},
21            {id:"ECCAD", img:"logo_ECCAD_50.gif", top:"39.3333px", left:"109.333px"},
22            {id:"IASI", img:"logo_iasi_50.jpg", top:"-78.6667px", left:"77.6666px"},
23            {id:"GOSAT", img:"logo_gosat_50.jpg", top:"-0.333328px", left:"200.667px"},
24            {id:"IAGOS", img:"logo_Iagos_50.jpg", top:"36px", left:"138px"},
25            {id:"TROPICO", img:"logo_tropico_50.jpg", top:"-74px", left:"45px"},
26            {id:"MEGAPOLI", img:"logo_Megapoli_50.png", top:"-74.3333px", left:"15.3333px"},
27            {id:"MIMOSA", img:"logo_mimosa_50.png", top:"-45.6667px", left:"76.3334px"},
28            {id:"REPROBUS", img:"logo_reprobus_50.png", top:"-48px", left:"161.667px"},
29            {id:"GEISA", img:"logo_geisa_50.jpg", top:"22px", left:"167.667px"},
30            {id:"TAPAS", img:"logo_tapas_50.png", top:"58.3333px", left:"125px"},
31            {id:"OUTREACH", img:"logo_acomida_50.jpg", top:"-77.3333px", left:"225px"},
32            {id:"OMER7A", img:"logo_omer7A_50.jpg", top:"22.6667px", left:"76.3334px"},
33            {id:"GIRAFE", img:"logo_girafe_50.JPG", top:"-79.6667px", left:"192.333px"},
34            {id:"ARLETTY", img:"logo_arletty_50.jpg", top:"-79px", left:"161.667px"}
35        ];
36        this.widthInitLogin = $( "#login_bg" ).width();
37        this.widthInitMentionsOrCredits = $( "#mentions" ).width();
38
39        this.xArray = ["2010-10", "2010-11", "2010-12", "2011-01", "2011-02"];
40        this.yArray = [0, 10, 30, 50, 100];
41
42
43        this.bindButtons();
44        this.createDraggableSlides();
45        this.createMenuCircle();
46
47        $( document ).ready( jQuery.proxy( function()
48        {
49            $( ".containerToDrag" ).draggable();
50            // Menu
51            this.animateMenuCircle();
52            this.bindMenuCircle();
53            // Slides
54//            this.onClickHelp();
55            this.selectedLogo = $( "#ETHER" )[0];
56            this.isSelectedLogoEther = true;
57            this.onClickLogo();
58
59            this.changeRightSlide();
60        }, this ) );
61    },
62
63
64    // CREATES AND BINDS ********************************************************
65    bindButtons: function()
66    {
67        $( "#home_button" ).bind( "dblclick", this.onClickHome );
68        $( "#language_button" ).bind( "dblclick", jQuery.proxy( this.onClickLanguage, this ) );
69        $( "#mail_button" ).bind( "dblclick", this.onClickMail );
70        $( "#login_button" ).bind( "dblclick", jQuery.proxy( this.onClickLogin, this ) );
71        $( "#help" ).bind( "click", jQuery.proxy( this.onClickHelp, this ) );
72        $( "#credits" ).bind( "dblclick", jQuery.proxy( this.onClickCredits, this ) );
73        $( "#mentions" ).bind( "dblclick", jQuery.proxy( this.onClickMentions, this ) );
74    },
75
76    createMenuCircle: function()
77    {
78        var menuSize = this.containerMenu.width();
79        var nbLogosForSize = (this.projectsArray.length / 2) + 1;
80        var divLogoSize = menuSize / nbLogosForSize;
81        this.logoSize = divLogoSize - 5;
82
83        var initTop = this.projectsArray[0].top;
84        var initLeft = this.projectsArray[0].left;
85
86        jQuery.each( this.projectsArray, jQuery.proxy( function( i, logo )
87        {
88            var divLogo = $( document.createElement( "div" ) );
89            divLogo.addClass( "divLogo containerToDrag" );
90            divLogo.attr( {id:logo.id, style:"position:absolute; top:" + initTop + "; left:" + initLeft} );
91            divLogo.html( '<img id="img_' + logo.id + '"src="' + this.projectsPath + '' + logo.img + '" width="' + this.logoSize + 'px" height="' + this.logoSize + 'px"/>' );
92            $( "#menuCircle" ).append( divLogo );
93        }, this ) );
94    },
95
96    createDraggableSlides: function()
97    {
98        this.leftTopSlide = new DragSlide( {id:"leftTop", parent:this.parent, width:"170", height:"200", top:"140px", left:"53px",
99            specificClass:"containerStatistics", specificTitleClass:"containerStatisticsTitle", specificContentClass:"containerStatisticsContent"} );
100
101        this.leftMiddleSlide = new DragSlide( {id:"leftMiddleSlide", parent:this.parent, width:"170", height:"100", top:"355px", left:"53px",
102            specificClass:"containerStatistics", specificTitleClass:"containerStatisticsTitle", specificContentClass:"containerStatisticsContent"} );
103        this.leftMiddleSlide.setTitle( '<spring:message code="statistics.data"/>' );
104
105        this.leftBottomSlide = new DragSlide( {id:"leftBottomSlide", parent:this.parent, width:"170", height:"100", top:"470px", left:"53px",
106            specificClass:"containerStatistics", specificTitleClass:"containerStatisticsTitle", specificContentClass:"containerStatisticsContent"} );
107        this.leftBottomSlide.setTitle( '<spring:message code="statistics.duration"/>' );
108
109        this.middleSlide = new DragSlide( {id:"middle", parent:this.parent, width:"430", height:"430", top:"140px", left:"245px",
110            specificClass:"containerStatistics", specificTitleClass:"containerStatisticsTitle", specificContentClass:"containerStatisticsContent"} );
111
112        this.rightSlide = new DragSlide( {id:"right", parent:this.parent, width:"200", height:"300", top:"180px", left:"698px",
113            specificClass:"containerStatistics", specificTitleClass:"containerStatisticsTitle", specificContentClass:"containerStatisticsContent"} );
114    },
115
116    // REQUESTS ********************************************************
117    requestChangeLocale: function()
118    {
119        $.ajax( {
120            url: "project?methodName=setLocale&language=<spring:message code="label.language.value.to.switch"/>",
121            success:function()
122            {
123                location.reload();
124            }
125        } );
126    },
127
128    requestDataByLogo: function()
129    {
130        if( !this.selectedLogo && !this.selectedLogo.id )
131            return;
132
133        $.ajax( {
134            url: "statistic?methodName=searchMainStatisticsByProject&name=" + this.selectedLogo.id,
135            success:jQuery.proxy( this.handleDataByLogo, this ),
136            error: jQuery.proxy( this.showErrors, [this] )
137        } );
138    },
139
140    // HANDLES ******************************************************** = retours ajax
141    handleDataByLogo: function( result )
142    {
143        this.changeLeftTopSlide();
144        this.changeLeftMiddleSlide();
145        this.changeLeftBottomSlide();
146        this.displayVisitEvolution();
147    },
148
149    // EVENTS ********************************************************
150    onClickHome: function()
151    {
152        location.reload();
153    },
154
155    onClickLanguage: function()
156    {
157        this.requestChangeLocale();
158    },
159
160    onClickMail: function()
161    {
162        document.location.href = "mailto:" + this.webmaster + "?subject=[STATISTICS]";
163    },
164
165    onClickLogin: function()
166    {
167        if( this.widthInitLogin == $( "#login_bg" ).width() )
168            this.enlargeLogin();
169        else
170            this.reduceLogin();
171    },
172
173    onClickMentions: function()
174    {
175        if( this.widthInitMentionsOrCredits == $( "#mentions" ).width() )
176            this.enlargeCreditsOrMentions( $( "#mentions" ), $( "#mentions_bg" ), $( "#mentions_text" ), $( "#mentions_title" ), "project/mentions_" + this.language + ".jsp" );
177        else
178            this.reduceCreditsOrMentions( $( "#mentions" ), $( "#mentions_bg" ), $( "#mentions_text" ), $( "#mentions_title" ), "project/mentions_" + this.language + ".jsp" );
179    },
180
181    onClickCredits: function()
182    {
183        if( this.widthInitMentionsOrCredits == $( "#credits" ).width() )
184            this.enlargeCreditsOrMentions( $( "#credits" ), $( "#credits_bg" ), $( "#credits_text" ), $( "#credits_title" ), "project/credits_" + this.language + ".jsp" );
185        else
186            this.reduceCreditsOrMentions( $( "#credits" ), $( "#credits_bg" ), $( "#credits_text" ), $( "#credits_title" ), "project/credits_" + this.language + ".jsp" );
187    },
188
189    onClickHelp: function()
190    {
191        this.rightSlide.setTitle( '<spring:message code="label.help"/>' );
192        this.rightSlide.setContent( "<spring:message code='label.help.content'/>" );
193        var backHelpButton = new Button( {value:"<spring:message code="label.display.actions"/>", parent:this.rightSlide.getDivContent(), className: "small positive back_button", onClick:jQuery.proxy( this.changeRightSlide, this )} );
194    },
195
196    onClickButtonLogin: function()
197    {
198        // TODO reduce cloud
199
200    },
201
202    onClickLogo: function()
203    {
204        this.isSelectedLogoEther = (this.selectedLogo == $( "#ETHER" )[0]);
205        this.requestDataByLogo();
206    },
207
208    onClickPrint: function()
209    {
210        var printContent = new PrintContent();
211        printContent.addContent( $( "#title" ).clone() );
212        printContent.addContent( this.leftTopSlide.getDivContainer().clone().animate( {'marginLeft' : "+=80px"} ) );
213        printContent.addContent( this.leftMiddleSlide.getDivContainer().clone().animate( {'marginLeft' : "+=80px"} ) );
214        printContent.addContent( this.leftBottomSlide.getDivContainer().clone().animate( {'marginLeft' : "+=80px"} ) );
215        printContent.addContent( this.middleSlide.getDivContainer().clone().animate( {'marginLeft' : "+=120px"} ) );
216        printContent.displayPrintPreview();
217    },
218
219    // OTHERS ********************************************************
220    showErrors: function( result )
221    {
222        var context = this[0] ? this[0] : this;
223        var text = this[1];
224        context.containerErrors.show();
225//        if( text )
226//            context.containerErrors.html( interfaceTexts[result.responseText] + " " + text );
227//        else if( interfaceTexts[result.responseText] )
228//            context.containerErrors.html( interfaceTexts[result.responseText] );
229        if( result.responseText )
230            context.containerErrors.html( result.responseText );
231        else
232            context.containerErrors.html( result );
233    },
234
235    reduceLogin: function()
236    {
237        $( "#login" ).css( { zIndex:0 } );
238        $( "#login_text" ).css( "visibility", "hidden" );
239        $( "#login_bg" ).animate( {
240            opacity: 1,
241            height:'60px',
242            width:'78px',
243            zIndex:'0'
244        }, 2000, function()
245        {
246        } );
247
248        $( "#login_button" ).animate( {
249            top:'16px',
250            left: '20px'
251        }, 2000, function()
252        {
253        } );
254    },
255
256    enlargeLogin: function()
257    {
258        $( "#login" ).css( { zIndex:1 } );
259        $( "#login_bg" ).animate( {
260            opacity: 0.45,
261            height:'500px',
262            width:'500px'
263        }, 2000, function()
264        {
265            $( "#login_text" ).css( "visibility", "visible" );
266        } );
267
268        $( "#login_button" ).animate( {
269            top:'82px',
270            left: '155px'
271        }, 2000, function()
272        {
273        } );
274    },
275
276    reduceCreditsOrMentions: function( div, div_bg, div_text, div_title )
277    {
278        div.css( { zIndex:0 } );
279        div_text.css( "visibility", "hidden" );
280        div.animate( {
281            left: '+=500',
282            top: '+=500'
283        }, 2000, function()
284        {
285        } );
286        div_bg.animate( {
287            opacity: 1,
288            height:'42px',
289            width:'59px',
290            zIndex:'0'
291        }, 2000, function()
292        {
293            div_title.css( "visibility", "visible" );
294        } );
295    },
296
297    enlargeCreditsOrMentions: function( div, div_bg, div_text, div_title, pageToLoad )
298    {
299        div_title.css( "visibility", "hidden" );
300        div.css( { zIndex:1 } );
301        div.animate( {
302            left: '-=500',
303            top: '-=500'
304        }, 2000, function()
305        {
306        } );
307
308        div_bg.animate( {
309            opacity: 0.95,
310            height:'500px',
311            width:'500px'
312        }, 2000, function()
313        {
314            div_text.css( "visibility", "visible" );
315            div_text.load( pageToLoad );
316        } );
317    },
318
319    animateMenuCircle: function()
320    {
321        jQuery.each( this.projectsArray, jQuery.proxy( function( i, logo )
322        {
323            $( "#" + logo.id ).animate( {
324                top:logo.top,
325                left:logo.left
326            }, 5000, function()
327            {
328            } );
329        }, this ) );
330    },
331
332    bindMenuCircle: function()
333    {
334        var gridimage;
335        $( '.divLogo' ).mouseover(
336                function()
337                {
338                    gridimage = $( this ).find( 'img' ); //Define target as a variable
339                    gridimage.stop().animate( {width: 50, height:50}, 150 );
340                } ).mouseout(
341                jQuery.proxy( function( element )
342                {
343                    this.selectedLogo = element.currentTarget;
344                    gridimage.stop().animate( {width: this.logoSize, height:this.logoSize}, 150 );
345                }, this ) ).dblclick(
346                jQuery.proxy( function()
347                {
348                    this.onClickLogo();
349                }, this ) );
350    },
351
352    changeLeftTopSlide: function()
353    {
354        this.leftTopSlide.setTitle( '<spring:message code="title"/> : ' + this.selectedLogo.id );
355        this.leftTopSlide.setContent(
356                "<spring:message code="statistics.online"/> : 2006/05/08<BR/>" +
357                        "<span class='text1'><spring:message code="statistics.since"/> : 2009/05/08<BR/><BR/></span>" +
358                        "<spring:message code="statistics.user.registered"/> : 1500<BR/>" +
359                        "<spring:message code="statistics.visit"/> : 150<BR/>" );
360    },
361
362    changeLeftMiddleSlide: function()
363    {
364        this.leftMiddleSlide.setContent( "<spring:message code="statistics.data.download"/> : 15001<BR/><spring:message code="statistics.data.download.size"/> : 50To<BR/>" );
365    },
366
367    changeLeftBottomSlide: function()
368    {
369        this.leftBottomSlide.setContent( "<spring:message code="statistics.duration.total"/> : 15001''<BR/><spring:message code="statistics.duration.average"/> : 50''<BR/>" );
370    },
371
372    changeRightSlide: function()
373    {
374        this.rightSlide.setTitle( '<spring:message code="label.actions"/>' );
375        this.rightSlide.getDivContent().empty();
376        new Button( {value:"<spring:message code="statistics.visit"/>", parent:this.rightSlide.getDivContent(), className: "positive action_button", onClick:jQuery.proxy( this.displayVisitEvolution, this )} );
377        new Button( {value:"<spring:message code="statistics.user.registered"/>", parent:this.rightSlide.getDivContent(), className: "positive action_button", onClick:jQuery.proxy( this.displayRegisteredUserEvolution, this )} );
378        new Button( {value:"<spring:message code="statistics.user.connected"/>", parent:this.rightSlide.getDivContent(), className: "positive action_button", onClick:jQuery.proxy( this.displayConnectedUserEvolution, this )} );
379        new Button( {value:"<spring:message code="statistics.data.download"/>", parent:this.rightSlide.getDivContent(), className: "positive action_button", onClick:jQuery.proxy( this.displayDownloadEvolution, this )} );
380        new Button( {value:"<spring:message code="statistics.map.distribution"/>", parent:this.rightSlide.getDivContent(), className: "positive action_button", onClick:jQuery.proxy( this.displayMapDistribution, this )} );
381        new Button( {value:"<spring:message code="label.export"/>", parent:this.rightSlide.getDivContent(), className: "blue export_button print-preview", onClick:jQuery.proxy( this.onClickPrint, this )} );
382    },
383
384    changeMiddleSlide: function( titleEvolution, titleDistribution )
385    {
386        if( this.isSelectedLogoEther )
387            this.middleSlide.setTitle( '<spring:message code="statistics.evolution.distribution"/> : ' + this.selectedLogo.id );
388        else
389            this.middleSlide.setTitle( '<spring:message code="statistics.evolution"/> : ' + this.selectedLogo.id );
390        this.middleSlide.getDivContent().empty();
391
392        var linechart = $( document.createElement( "div" ) );
393        linechart.addClass( "ui-widget ui-widget-content ui-corner-all statisticsEther" );
394        linechart.attr( {id:"wijlinechart"} );
395        this.middleSlide.getDivContent().append( linechart );
396
397        var donut = $( document.createElement( "div" ) );
398        donut.addClass( "ui-widget ui-widget-content ui-corner-all statisticsEther" );
399        donut.attr( {id:"wijpiechart"} );
400        this.middleSlide.getDivContent().append( donut );
401
402        this.createLinechart( titleEvolution );
403        if( this.isSelectedLogoEther )
404            this.createDonut( titleDistribution );
405    },
406
407    changeMiddleSlideForMap: function()
408    {
409        this.middleSlide.setTitle( '<spring:message code="statistics.map.distribution"/> : ' + this.selectedLogo.id );
410        this.middleSlide.getDivContent().empty();
411    },
412
413
414    // STATISTICS ********************************************************
415    createDonut: function( title )
416    {
417        $( "#wijpiechart" ).wijpiechart( {
418            height: 210,
419            width: 400,
420            radius: 140,
421            legend: { visible: true },
422            hint: {
423                content: function ()
424                {
425                    return this.data.label + " : " + Globalize.format( this.value / this.total, "p2" );
426                }
427            },
428            header: {
429                text: title
430            },
431            seriesList: [
432                {
433                    label: "MacBook Pro",
434                    legendEntry: true,
435                    data: 46.78,
436                    offset: 0
437                },
438                {
439                    label: "iMac",
440                    legendEntry: true,
441                    data: 23.18,
442                    offset: 0
443                },
444                {
445                    label: "MacBook",
446                    legendEntry: true,
447                    data: 20.25,
448                    offset: 0
449                },
450                {
451                    label: "Mac Pro",
452                    legendEntry: true,
453                    data: 5.41,
454                    offset: 0
455                },
456                {
457                    label: "Mac mini",
458                    legendEntry: true,
459                    data: 3.44,
460                    offset: 0
461                }
462            ],
463            seriesStyles: [
464                {
465                    fill: "180-rgb(195,255,0)-rgb(175,229,0)", stroke: "rgb(175,229,0)", "stroke-width": 1.5
466                },
467                {
468                    fill: "90-rgb(142,222,67)-rgb(127,199,60)", stroke: "rgb(127,199,60)", "stroke-width": 1.5
469                },
470                {
471                    fill: "90-rgb(106,171,167)-rgb(95,153,150)", stroke: "rgb(95,153,150)", "stroke-width": 1.5
472                },
473                {
474                    fill: "90-rgb(70,106,133)-rgb(62,95,119)", stroke: "rgb(62,95,119)", "stroke-width": 1.5
475                },
476                {
477                    fill: "90-rgb(166,166,166)-rgb(149,149,149)", stroke: "rgb(149,149,149)", "stroke-width": 1.5
478                }
479            ]
480        } );
481    },
482
483    createLinechart: function( title )
484    {
485        $( "#wijlinechart" ).wijlinechart( {
486            height: 200,
487            width: 400,
488            axis: {
489                y: {
490                    origin: 0
491                }
492            },
493            showChartLabels: false,
494            header: {
495                text: title
496            },
497            hint: {
498                content: function ()
499                {
500                    return this.data.lineSeries.label + '\n' + this.x + '\n' + this.y + '';
501                },
502                contentStyle: { "font-size": 10 },
503                offsetY: -10
504            },
505            legend: {
506                visible: false
507            },
508            seriesList: [
509                {
510                    label: "",
511                    legendEntry: true,
512                    data: {
513                        x: this.xArray,
514                        y: this.yArray
515                    },
516                    markers: {
517                        visible: true,
518                        type: "circle"
519                    }
520                }
521            ]
522        } );
523    },
524
525    displayVisitEvolution: function()
526    {
527        this.changeMiddleSlide( '<spring:message code="statistics.evolution.visit"/>', '<spring:message code="statistics.distribution.visit"/>' );
528    },
529
530    displayRegisteredUserEvolution: function()
531    {
532        this.changeMiddleSlide( '<spring:message code="statistics.evolution.user.registered"/>', '<spring:message code="statistics.distribution.user.registered"/>' );
533    },
534
535    displayConnectedUserEvolution: function()
536    {
537        this.changeMiddleSlide( '<spring:message code="statistics.evolution.user.connected"/>', '<spring:message code="statistics.distribution.user.connected"/>' );
538    },
539
540    displayDownloadEvolution: function()
541    {
542        this.changeMiddleSlide( '<spring:message code="statistics.evolution.download"/>', '<spring:message code="statistics.distribution.download"/>' );
543    },
544
545    displayMapDistribution: function()
546    {
547        this.changeMiddleSlideForMap();
548    }
549} );
550
551</script>
Note: See TracBrowser for help on using the repository browser.