Changeset 596 for ether_statistics/web/project/statistics-script.jsp

Timestamp:

10/25/12 17:21:33 (12 years ago)

Author:

vmipsl

Message:

wijmo (linechart, barchart), credits, mentions

File:

• ether_statistics/web/project/statistics-script.jsp (modified) (7 diffs)

ether_statistics/web/project/statistics-script.jsp

@@ -32 +32 @@
             {id:"GIRAFE", img:"logo_girafe_50.JPG", top:"-79.6667px", left:"192.333px"},
             {id:"ARLETTY", img:"logo_arletty_50.jpg", top:"-79px", left:"161.667px"}
-        ]
-        this.selectedLogo = false;
+        ];
+        this.widthInitLogin = $( "#login_bg" ).width();
+        this.widthInitMentionsOrCredits = $( "#mentions" ).width();
 
         this.bindButtons();
-        this.createDivs();
-        this.animateMenuCircle();
+        this.createDraggableSlides();
+        this.createMenuCircle();
+
         $( document ).ready( jQuery.proxy( function()
         {
             $( ".containerToDrag" ).draggable();
+            // Menu
+            this.animateMenuCircle();
             this.bindMenuCircle();
+            // Slides
+            this.onClickHelp();
+            this.selectedLogo = $( "#ETHER" )[0];
+            this.onClickLogo();
+//            this.hideHelp();
         }, this ) );
     },
@@ -53 +62 @@
         $( "#mail_button" ).bind( "dblclick", this.onClickMail );
         $( "#login_button" ).bind( "dblclick", jQuery.proxy( this.onClickLogin, this ) );
-    },
-
-    createDivs: function()
-    {
-        this.leftTopSlide = new DragSlide( {id:"leftTop", parent:this.parent, width:"150", height:"200", top:"140px", left:"53px",
-            specificClass:"containerStatistics", specificTitleClass:"containerStatisticsTitle", specificContentClass:"containerStatisticsContent",
-            title:"Main statistics", contentSlide:"leftTop"} );
-
-        this.leftBottomSlide = new DragSlide( {id:"leftBottom", parent:this.parent, width:"430", height:"430", top:"140px", left:"230px",
-            specificClass:"containerStatistics", specificTitleClass:"containerStatisticsTitle", specificContentClass:"containerStatisticsContent",
-            title:"MEGAPOLI statistics", contentSlide:"leftBottom"} );
-
-        this.middleSlide = new DragSlide( {id:"middle", parent:this.parent, width:"200", height:"300", top:"180px", left:"700px",
-            specificClass:"containerStatistics", specificTitleClass:"containerStatisticsTitle", specificContentClass:"containerStatisticsContent",
-            title:"TAPAS statistics", contentSlide:"middle"} );
-
-        this.rightSlide = new DragSlide( {id:"right", parent:this.parent, width:"150", height:"200", top:"370px", left:"53px",
-            specificClass:"containerStatistics", specificTitleClass:"containerStatisticsTitle", specificContentClass:"containerStatisticsContent",
-            title:"Hop hop hop", contentSlide:"right"} );
-
-    },
-
-    createDiv: function( id, width, height, top, left, title, content )
-    {
-        var divContainer = $( document.createElement( "div" ) );
-        divContainer.addClass( "containerStatistics containerToDrag" );
-        divContainer.attr( {id:id, style:"width:" + width + "px; height:" + height + "px; top:" + top + "px; left:" + left + "px"} );
-        var divTitle = $( document.createElement( "div" ) );
-        divTitle.addClass( "containerStatisticsTitle" );
-        divTitle.html( title );
-        divTitle.attr( {style:"width:" + (this.width - 7) + "px"} );
-        divContainer.append( divTitle );
-        var divContent = $( document.createElement( "div" ) );
-        divContent.addClass( "containerStatisticsContent" );
-        divContent.html( content );
-        divContainer.append( divContent );
-        return divContainer;
+        $( "#help" ).bind( "click", jQuery.proxy( this.onClickHelp, this ) );
+        $( "#credits" ).bind( "dblclick", jQuery.proxy( this.onClickCredits, this ) );
+        $( "#mentions" ).bind( "dblclick", jQuery.proxy( this.onClickMentions, this ) );
+    },
+
+    createMenuCircle: function()
+    {
+        var menuSize = this.containerMenu.width();
+        var nbLogosForSize = (this.projectsArray.length / 2) + 1;
+        var divLogoSize = menuSize / nbLogosForSize;
+        this.logoSize = divLogoSize - 5;
+
+        var initTop = this.projectsArray[0].top;
+        var initLeft = this.projectsArray[0].left;
+
+        jQuery.each( this.projectsArray, jQuery.proxy( function( i, logo )
+        {
+            var divLogo = $( document.createElement( "div" ) );
+            divLogo.addClass( "divLogo containerToDrag" );
+            divLogo.attr( {id:logo.id, style:"position:absolute; top:" + initTop + "; left:" + initLeft} );
+            divLogo.html( '<img id="img_' + logo.id + '"src="' + this.projectsPath + '' + logo.img + '" width="' + this.logoSize + 'px" height="' + this.logoSize + 'px"/>' );
+            $( "#menuCircle" ).append( divLogo );
+        }, this ) );
+    },
+
+    createDraggableSlides: function()
+    {
+        this.leftTopSlide = new DragSlide( {id:"leftTop", parent:this.parent, width:"170", height:"200", top:"140px", left:"53px",
+            specificClass:"containerStatistics", specificTitleClass:"containerStatisticsTitle", specificContentClass:"containerStatisticsContent"} );
+
+        this.leftMiddleSlide = new DragSlide( {id:"leftMiddleSlide", parent:this.parent, width:"170", height:"100", top:"355px", left:"53px",
+            specificClass:"containerStatistics", specificTitleClass:"containerStatisticsTitle", specificContentClass:"containerStatisticsContent"} );
+        this.leftMiddleSlide.setTitle( '<spring:message code="statistics.data"/>' );
+
+        this.leftBottomSlide = new DragSlide( {id:"leftBottomSlide", parent:this.parent, width:"170", height:"100", top:"470px", left:"53px",
+            specificClass:"containerStatistics", specificTitleClass:"containerStatisticsTitle", specificContentClass:"containerStatisticsContent"} );
+        this.leftBottomSlide.setTitle( '<spring:message code="statistics.duration"/>' );
+
+        this.middleSlide = new DragSlide( {id:"middle", parent:this.parent, width:"430", height:"430", top:"140px", left:"245px",
+            specificClass:"containerStatistics", specificTitleClass:"containerStatisticsTitle", specificContentClass:"containerStatisticsContent"} );
+        this.middleSlide.setTitle( '<spring:message code="statistics.evolution"/>' );
+
+        this.rightSlide = new DragSlide( {id:"right", parent:this.parent, width:"200", height:"300", top:"180px", left:"698px",
+            specificClass:"containerStatistics", specificTitleClass:"containerStatisticsTitle", specificContentClass:"containerStatisticsContent"} );
+
+        var linechart = $( document.createElement( "div" ) );
+        linechart.addClass( "ui-widget ui-widget-content ui-corner-all statisticsEther" );
+        linechart.attr( {id:"wijlinechart"} );
+        this.middleSlide.getDivContent().append( linechart );
+
+        var barchart = $( document.createElement( "div" ) );
+        barchart.addClass( "ui-widget ui-widget-content ui-corner-all statisticsEther" );
+        barchart.attr( {id:"wijbarchart"} );
+        this.middleSlide.getDivContent().append( barchart );
+
+        this.createLinechart();
+//        this.createBarchart();
     },
 
@@ -133 +162 @@
     onClickLogin: function()
     {
-        if( 88 == $( "#login_bg" ).width() )
+        if( this.widthInitLogin == $( "#login_bg" ).width() )
             this.enlargeLogin();
         else
@@ -139 +168 @@
     },
 
+    onClickMentions: function()
+    {
+        if( this.widthInitMentionsOrCredits == $( "#mentions" ).width() )
+            this.enlargeCreditsOrMentions( $( "#mentions" ), $( "#mentions_bg" ), $( "#mentions_text" ), $( "#mentions_title" ), "project/mentions_" + this.language + ".jsp" );
+        else
+            this.reduceCreditsOrMentions( $( "#mentions" ), $( "#mentions_bg" ), $( "#mentions_text" ), $( "#mentions_title" ), "project/mentions_" + this.language + ".jsp" );
+    },
+
+    onClickCredits: function()
+    {
+        if( this.widthInitMentionsOrCredits == $( "#credits" ).width() )
+            this.enlargeCreditsOrMentions( $( "#credits" ), $( "#credits_bg" ), $( "#credits_text" ), $( "#credits_title" ), "project/credits_" + this.language + ".jsp" );
+        else
+            this.reduceCreditsOrMentions( $( "#credits" ), $( "#credits_bg" ), $( "#credits_text" ), $( "#credits_title" ), "project/credits_" + this.language + ".jsp" );
+    },
+
+    onClickHelp: function()
+    {
+        this.rightSlide.setTitle( '<spring:message code="label.help"/>' );
+        this.rightSlide.setContent( "<spring:message code='label.help.content'/>" );
+        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 )} );
+    },
+
     onClickButtonLogin: function()
     {
@@ -150 +202 @@
             return;
 
-        this.leftTopSlide.html( this.selectedLogo.id );
+        this.changeLeftTopSlide();
+        this.changeLeftMiddleSlide();
+        this.changeLeftBottomSlide();
     },
 
@@ -195 +249 @@
     },
 
+    reduceCreditsOrMentions: function( div, div_bg, div_text, div_title )
+    {
+        div.css( { zIndex:0 } );
+        div_text.css( "visibility", "hidden" );
+        div.animate( {
+            left: '+=500',
+            top: '+=500'
+        }, 2000, function()
+        {
+        } );
+        div_bg.animate( {
+            opacity: 1,
+            height:'42px',
+            width:'59px',
+            zIndex:'0'
+        }, 2000, function()
+        {
+            div_title.css( "visibility", "visible" );
+        } );
+    },
+
+    enlargeCreditsOrMentions: function( div, div_bg, div_text, div_title, pageToLoad )
+    {
+        div_title.css( "visibility", "hidden" );
+        div.css( { zIndex:1 } );
+        div.animate( {
+            left: '-=500',
+            top: '-=500'
+        }, 2000, function()
+        {
+        } );
+
+        div_bg.animate( {
+            opacity: 0.95,
+            height:'500px',
+            width:'500px'
+        }, 2000, function()
+        {
+            div_text.css( "visibility", "visible" );
+            div_text.load( pageToLoad );
+        } );
+    },
+
     animateMenuCircle: function()
     {
-        var menuSize = this.containerMenu.width();
-        var nbLogosForSize = (this.projectsArray.length / 2) + 1;
-        var divLogoSize = menuSize / nbLogosForSize;
-        this.logoSize = divLogoSize - 5;
-
-        var initTop = this.projectsArray[0].top;
-        var initLeft = this.projectsArray[0].left;
-
-        jQuery.each( this.projectsArray, jQuery.proxy( function( i, logo )
-        {
-            var divLogo = $( document.createElement( "div" ) );
-            divLogo.addClass( "divLogo containerToDrag" );
-            divLogo.attr( {id:logo.id, style:"position:absolute; top:" + initTop + "; left:" + initLeft} );
-            divLogo.html( '<img id="img_' + logo.id + '"src="' + this.projectsPath + '' + logo.img + '" width="' + this.logoSize + 'px" height="' + this.logoSize + 'px"/>' );
-            $( "#menuCircle" ).append( divLogo );
-        }, this ) );
-
         jQuery.each( this.projectsArray, jQuery.proxy( function( i, logo )
         {
@@ -243 +323 @@
                     this.onClickLogo();
                 }, this ) );
+    },
+
+//    hideHelp: function()
+//    {
+//        this.rightSlide.getDivContent().animate(
+//        {
+//            opacity: 0
+//        }, 10000, jQuery.proxy( function()
+//        {
+//            this.changeRightSlide();
+//            this.rightSlide.getDivContent().attr( {style:"opacity:1"} );
+//        }, this ) );
+//    },
+//
+    changeLeftTopSlide: function()
+    {
+        this.leftTopSlide.setTitle( this.selectedLogo.id + ' <spring:message code="title"/>' );
+        this.leftTopSlide.setContent(
+                "<spring:message code="statistics.online"/> : 2006/05/08<BR/>" +
+                        "<span class='text1'><spring:message code="statistics.since"/> : 2009/05/08<BR/></span>" +
+                        "<spring:message code="statistics.user.registered"/> : 1500<BR/>" +
+                        "<spring:message code="statistics.user.connected"/> : 17<BR/>" +
+                        "<spring:message code="statistics.visit"/> : 150<BR/>" +
+                        "<spring:message code="statistics.email"/> : 15<BR/>" );
+    },
+
+    changeLeftMiddleSlide: function()
+    {
+        this.leftMiddleSlide.setContent( "<spring:message code="statistics.data.download"/> : 15001<BR/><spring:message code="statistics.data.download.size"/> : 50To<BR/>" );
+    },
+
+    changeLeftBottomSlide: function()
+    {
+        this.leftBottomSlide.setContent( "<spring:message code="statistics.duration.total"/> : 15001''<BR/><spring:message code="statistics.duration.average"/> : 50''<BR/>" );
+    },
+
+    changeRightSlide: function()
+    {
+        this.rightSlide.setTitle( '<spring:message code="label.actions"/>' );
+        this.rightSlide.setContent( "pouif" );
+    },
+
+    // STATISTICS ********************************************************
+    createBarchart: function()
+    {
+        $( "#wijbarchart" ).wijbarchart( {
+            axis: {
+                y: {
+                    text: "Total Hardware"
+                },
+                x: {
+                    text: "",
+                    labels: {
+                        style: {
+                            rotation: -45
+                        }
+                    }
+                }
+            },
+            hint: {
+                content: function ()
+                {
+                    return this.data.label + '\n ' + this.y + '';
+                }
+            },
+            header: {
+                text: "Console Wars"
+            },
+            seriesList: [
+                {
+                    label: "US",
+                    legendEntry: true,
+                    data: { x: ['PS3', 'XBOX360', 'Wii'], y: [12.35, 21.50, 30.56] }
+                }
+            ],
+            seriesStyles: [
+                {
+                    fill: "#8ede43", stroke: "#7fc73c", opacity: 0.8
+                }
+            ],
+            seriesHoverStyles: [
+                {
+                    "stroke-width": "1.5", opacity: 1
+                }
+            ]
+        } );
+    },
+
+    createLinechart: function()
+    {
+        var xArray = ["2010-10", "2010-11", "2010-12", "2011-01", "2011-02"];
+        var yArray = [0, 10, 30, 50, 100];
+        $( "#wijlinechart" ).wijlinechart( {
+            height: 200,
+            width: 400,
+            axis: {
+                y: {
+                    origin: 0
+                }
+            },
+            showChartLabels: false,
+            header: {
+                text: "<spring:message code="statistics.evolution.visit"/>"
+            },
+            hint: {
+                content: function ()
+                {
+                    return this.data.lineSeries.label + '\n' + this.x + '\n' + this.y + '';
+                },
+                contentStyle: { "font-size": 10 },
+                offsetY: -10
+            },
+            legend: {
+                visible: false
+            },
+            seriesList: [
+                {
+                    label: "<spring:message code="statistics.visit"/>",
+                    legendEntry: true,
+                    data: {
+                        x: xArray,
+                        y: yArray
+                    },
+                    markers: {
+                        visible: true,
+                        type: "circle"
+                    }
+                }
+            ]
+        } );
     }