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

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

statistics
File size: 21.3 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    onClickExport: function()
209    {
210        $( "#containerMiddle" ).printPreview();
211//        $("#containerMiddle").jqprint();
212
213//        var printContent =$( "#containerMiddle" );
214//        var windowUrl = 'about:blank';
215//        var windowName = 'Print';
216//        var printWindow = window.open( windowUrl, windowName, 'left=50000,top=50000,width=0,height=0' );
217//        printWindow.document.write( "slkdfjlsdkfjsdlf" );
218//        printWindow.document.close();
219//        printWindow.focus();
220//        printWindow.print();
221//        printWindow.close();
222//
223        // TODO export PDF
224    },
225
226    // OTHERS ********************************************************
227    showErrors: function( result )
228    {
229        var context = this[0] ? this[0] : this;
230        var text = this[1];
231        context.containerErrors.show();
232//        if( text )
233//            context.containerErrors.html( interfaceTexts[result.responseText] + " " + text );
234//        else if( interfaceTexts[result.responseText] )
235//            context.containerErrors.html( interfaceTexts[result.responseText] );
236        if( result.responseText )
237            context.containerErrors.html( result.responseText );
238        else
239            context.containerErrors.html( result );
240    },
241
242    reduceLogin: function()
243    {
244        $( "#login" ).css( { zIndex:0 } );
245        $( "#login_text" ).css( "visibility", "hidden" );
246        $( "#login_bg" ).animate( {
247            opacity: 1,
248            height:'60px',
249            width:'78px',
250            zIndex:'0'
251        }, 2000, function()
252        {
253        } );
254
255        $( "#login_button" ).animate( {
256            top:'16px',
257            left: '20px'
258        }, 2000, function()
259        {
260        } );
261    },
262
263    enlargeLogin: function()
264    {
265        $( "#login" ).css( { zIndex:1 } );
266        $( "#login_bg" ).animate( {
267            opacity: 0.45,
268            height:'500px',
269            width:'500px'
270        }, 2000, function()
271        {
272            $( "#login_text" ).css( "visibility", "visible" );
273        } );
274
275        $( "#login_button" ).animate( {
276            top:'82px',
277            left: '155px'
278        }, 2000, function()
279        {
280        } );
281    },
282
283    reduceCreditsOrMentions: function( div, div_bg, div_text, div_title )
284    {
285        div.css( { zIndex:0 } );
286        div_text.css( "visibility", "hidden" );
287        div.animate( {
288            left: '+=500',
289            top: '+=500'
290        }, 2000, function()
291        {
292        } );
293        div_bg.animate( {
294            opacity: 1,
295            height:'42px',
296            width:'59px',
297            zIndex:'0'
298        }, 2000, function()
299        {
300            div_title.css( "visibility", "visible" );
301        } );
302    },
303
304    enlargeCreditsOrMentions: function( div, div_bg, div_text, div_title, pageToLoad )
305    {
306        div_title.css( "visibility", "hidden" );
307        div.css( { zIndex:1 } );
308        div.animate( {
309            left: '-=500',
310            top: '-=500'
311        }, 2000, function()
312        {
313        } );
314
315        div_bg.animate( {
316            opacity: 0.95,
317            height:'500px',
318            width:'500px'
319        }, 2000, function()
320        {
321            div_text.css( "visibility", "visible" );
322            div_text.load( pageToLoad );
323        } );
324    },
325
326    animateMenuCircle: function()
327    {
328        jQuery.each( this.projectsArray, jQuery.proxy( function( i, logo )
329        {
330            $( "#" + logo.id ).animate( {
331                top:logo.top,
332                left:logo.left
333            }, 5000, function()
334            {
335            } );
336        }, this ) );
337    },
338
339    bindMenuCircle: function()
340    {
341        var gridimage;
342        $( '.divLogo' ).mouseover(
343                function()
344                {
345                    gridimage = $( this ).find( 'img' ); //Define target as a variable
346                    gridimage.stop().animate( {width: 50, height:50}, 150 );
347                } ).mouseout(
348                jQuery.proxy( function( element )
349                {
350                    this.selectedLogo = element.currentTarget;
351                    gridimage.stop().animate( {width: this.logoSize, height:this.logoSize}, 150 );
352                }, this ) ).dblclick(
353                jQuery.proxy( function()
354                {
355                    this.onClickLogo();
356                }, this ) );
357    },
358
359    changeLeftTopSlide: function()
360    {
361        this.leftTopSlide.setTitle( '<spring:message code="title"/> : ' + this.selectedLogo.id );
362        this.leftTopSlide.setContent(
363                "<spring:message code="statistics.online"/> : 2006/05/08<BR/>" +
364                        "<span class='text1'><spring:message code="statistics.since"/> : 2009/05/08<BR/><BR/></span>" +
365                        "<spring:message code="statistics.user.registered"/> : 1500<BR/>" +
366                        "<spring:message code="statistics.visit"/> : 150<BR/>" );
367    },
368
369    changeLeftMiddleSlide: function()
370    {
371        this.leftMiddleSlide.setContent( "<spring:message code="statistics.data.download"/> : 15001<BR/><spring:message code="statistics.data.download.size"/> : 50To<BR/>" );
372    },
373
374    changeLeftBottomSlide: function()
375    {
376        this.leftBottomSlide.setContent( "<spring:message code="statistics.duration.total"/> : 15001''<BR/><spring:message code="statistics.duration.average"/> : 50''<BR/>" );
377    },
378
379    changeRightSlide: function()
380    {
381        this.rightSlide.setTitle( '<spring:message code="label.actions"/>' );
382        this.rightSlide.getDivContent().empty();
383        new Button( {value:"<spring:message code="statistics.visit"/>", parent:this.rightSlide.getDivContent(), className: "positive action_button", onClick:jQuery.proxy( this.displayVisitEvolution, this )} );
384        new Button( {value:"<spring:message code="statistics.user.registered"/>", parent:this.rightSlide.getDivContent(), className: "positive action_button", onClick:jQuery.proxy( this.displayRegisteredUserEvolution, this )} );
385        new Button( {value:"<spring:message code="statistics.user.connected"/>", parent:this.rightSlide.getDivContent(), className: "positive action_button", onClick:jQuery.proxy( this.displayConnectedUserEvolution, this )} );
386        new Button( {value:"<spring:message code="statistics.data.download"/>", parent:this.rightSlide.getDivContent(), className: "positive action_button", onClick:jQuery.proxy( this.displayDownloadEvolution, this )} );
387        new Button( {value:"<spring:message code="statistics.map.distribution"/>", parent:this.rightSlide.getDivContent(), className: "positive action_button", onClick:jQuery.proxy( this.displayMapDistribution, this )} );
388        new Button( {value:"<spring:message code="label.export"/>", parent:this.rightSlide.getDivContent(), className: "blue export_button", onClick:jQuery.proxy( this.onClickExport, this )} );
389    },
390
391    changeMiddleSlide: function( titleEvolution, titleDistribution )
392    {
393        if( this.isSelectedLogoEther )
394            this.middleSlide.setTitle( '<spring:message code="statistics.evolution.distribution"/> : ' + this.selectedLogo.id );
395        else
396            this.middleSlide.setTitle( '<spring:message code="statistics.evolution"/> : ' + this.selectedLogo.id );
397        this.middleSlide.getDivContent().empty();
398
399        var linechart = $( document.createElement( "div" ) );
400        linechart.addClass( "ui-widget ui-widget-content ui-corner-all statisticsEther" );
401        linechart.attr( {id:"wijlinechart"} );
402        this.middleSlide.getDivContent().append( linechart );
403
404        var donut = $( document.createElement( "div" ) );
405        donut.addClass( "ui-widget ui-widget-content ui-corner-all statisticsEther" );
406        donut.attr( {id:"wijpiechart"} );
407        this.middleSlide.getDivContent().append( donut );
408
409        this.createLinechart( titleEvolution );
410        if( this.isSelectedLogoEther )
411            this.createDonut( titleDistribution );
412    },
413
414    changeMiddleSlideForMap: function()
415    {
416        this.middleSlide.setTitle( '<spring:message code="statistics.map.distribution"/> : ' + this.selectedLogo.id );
417        this.middleSlide.getDivContent().empty();
418    },
419
420
421    // STATISTICS ********************************************************
422    createDonut: function( title )
423    {
424        $( "#wijpiechart" ).wijpiechart( {
425            height: 210,
426            width: 400,
427            radius: 140,
428            legend: { visible: true },
429            hint: {
430                content: function ()
431                {
432                    return this.data.label + " : " + Globalize.format( this.value / this.total, "p2" );
433                }
434            },
435            header: {
436                text: title
437            },
438            seriesList: [
439                {
440                    label: "MacBook Pro",
441                    legendEntry: true,
442                    data: 46.78,
443                    offset: 0
444                },
445                {
446                    label: "iMac",
447                    legendEntry: true,
448                    data: 23.18,
449                    offset: 0
450                },
451                {
452                    label: "MacBook",
453                    legendEntry: true,
454                    data: 20.25,
455                    offset: 0
456                },
457                {
458                    label: "Mac Pro",
459                    legendEntry: true,
460                    data: 5.41,
461                    offset: 0
462                },
463                {
464                    label: "Mac mini",
465                    legendEntry: true,
466                    data: 3.44,
467                    offset: 0
468                }
469            ],
470            seriesStyles: [
471                {
472                    fill: "180-rgb(195,255,0)-rgb(175,229,0)", stroke: "rgb(175,229,0)", "stroke-width": 1.5
473                },
474                {
475                    fill: "90-rgb(142,222,67)-rgb(127,199,60)", stroke: "rgb(127,199,60)", "stroke-width": 1.5
476                },
477                {
478                    fill: "90-rgb(106,171,167)-rgb(95,153,150)", stroke: "rgb(95,153,150)", "stroke-width": 1.5
479                },
480                {
481                    fill: "90-rgb(70,106,133)-rgb(62,95,119)", stroke: "rgb(62,95,119)", "stroke-width": 1.5
482                },
483                {
484                    fill: "90-rgb(166,166,166)-rgb(149,149,149)", stroke: "rgb(149,149,149)", "stroke-width": 1.5
485                }
486            ]
487        } );
488    },
489
490    createLinechart: function( title )
491    {
492        $( "#wijlinechart" ).wijlinechart( {
493            height: 200,
494            width: 400,
495            axis: {
496                y: {
497                    origin: 0
498                }
499            },
500            showChartLabels: false,
501            header: {
502                text: title
503            },
504            hint: {
505                content: function ()
506                {
507                    return this.data.lineSeries.label + '\n' + this.x + '\n' + this.y + '';
508                },
509                contentStyle: { "font-size": 10 },
510                offsetY: -10
511            },
512            legend: {
513                visible: false
514            },
515            seriesList: [
516                {
517                    label: "",
518                    legendEntry: true,
519                    data: {
520                        x: this.xArray,
521                        y: this.yArray
522                    },
523                    markers: {
524                        visible: true,
525                        type: "circle"
526                    }
527                }
528            ]
529        } );
530    },
531
532    displayVisitEvolution: function()
533    {
534        this.changeMiddleSlide( '<spring:message code="statistics.evolution.visit"/>', '<spring:message code="statistics.distribution.visit"/>' );
535    },
536
537    displayRegisteredUserEvolution: function()
538    {
539        this.changeMiddleSlide( '<spring:message code="statistics.evolution.user.registered"/>', '<spring:message code="statistics.distribution.user.registered"/>' );
540    },
541
542    displayConnectedUserEvolution: function()
543    {
544        this.changeMiddleSlide( '<spring:message code="statistics.evolution.user.connected"/>', '<spring:message code="statistics.distribution.user.connected"/>' );
545    },
546
547    displayDownloadEvolution: function()
548    {
549        this.changeMiddleSlide( '<spring:message code="statistics.evolution.download"/>', '<spring:message code="statistics.distribution.download"/>' );
550    },
551
552    displayMapDistribution: function()
553    {
554        this.changeMiddleSlideForMap();
555    }
556
557} );
558
559</script>
Note: See TracBrowser for help on using the repository browser.