Merge pull request #128 from stefanjudis/feature/109-better-loading-i…

…ndication #109 added loading indication
stefanjudis · Sep 5, 2014 · 6b9ca50 · 6b9ca50
2 parents c7f74db + 3321f8c
commit 6b9ca50
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 9 deletions.
diff --git a/tasks/assets/sass/_variables.scss b/tasks/assets/sass/_variables.scss
@@ -51,16 +51,17 @@ $d-baseWidth    : 98%;
 $z-filmstrip-time : 5;
 $z-header         : 6;
 
+
 /**
  * Configs for _graphs.scss
  */
 $description-height : 1.5em;
 $description-width  : 1.5em;
 
+
 /**
  * Table config stuff
  */
-
 $t-colorBody      : $c-white;
 $t-colorBorder    : $c-grayDarker;
 $t-colorDate      : $c-green;
@@ -88,6 +89,7 @@ $b-big : 1000px;
 $header-bg-color       : $c-grayDarker;
 $header-headline-color : $c-green;
 
+
 /**
  * Stuff that fits nowhere else
  */

diff --git a/tasks/assets/sass/components/_graphs.scss b/tasks/assets/sass/components/_graphs.scss
@@ -228,17 +228,56 @@
   }
 }
 
+.p--graphs--loading {
+  display : none;
+
+  position : absolute;
+  z-index : $z-loading;
+
+  top    : 0;
+  right  : 0;
+  bottom : 0;
+  left   : 0;
+
+  background : rgba( $c-black, 0.25 );
+
+  .spinner {
+    position : absolute;
+
+    top  : 40%;
+    left : 50%;
+
+    margin-left : -2em;
+
+    height   : 4em;
+    width    : 4em;
+
+    border : 0.5em solid $c-green;
+    border-top: 0.5em solid adjust-lightness( $c-green, 20 );
+
+    border-radius : 100%;
+
+    @include animation( rotator 2s infinite linear );
+  }
+
+  &.is-active {
+    display : block;
+  }
+}
+
 .p--graphs--svg {
   width  : 100%;
   height : 0;
 
   padding-top : calc( 40% + 80px );
-}
 
-.p--graphs--svg__initialized {
-  padding : 0;
+  &.is-initialized {
+    height : auto;
+    padding : 0;
+  }
 }
 
+
 .p--lineChart--area {
   fill: rgba( $c-gray, 0.5 );
 }

diff --git a/tasks/assets/sass/components/_keyframes.scss b/tasks/assets/sass/components/_keyframes.scss
@@ -0,0 +1,9 @@
+@include keyframes( rotator ) {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(359deg);
+  }
+}
diff --git a/tasks/assets/sass/phantomas.scss b/tasks/assets/sass/phantomas.scss
@@ -14,6 +14,7 @@
 @import "components/filmstrip";
 @import "components/footer";
 @import "components/graphs";
+@import "components/keyframes";
 @import "components/offenders";
 @import "components/table";
 

diff --git a/tasks/assets/scripts/phantomas.js b/tasks/assets/scripts/phantomas.js
@@ -266,10 +266,10 @@
         detailWidth  = 115,
 
         container   = d3.select( containerEl ),
-        svg         = container.select( 'svg' )
+        svg         = container.select( '.p--graphs--svg' )
                                 .attr( 'width', width )
                                 .attr( 'height', height + margin.top + margin.bottom )
-                                .attr( 'class', 'p--graphs--svg__initialized' ),
+                                .attr( 'class', 'p--graphs--svg is-initialized' ),
 
         x          = d3.time.scale().range( [ 0, width - detailWidth ] ),
         xAxis      = d3.svg.axis().scale( x )
@@ -297,6 +297,8 @@
                   .x( function( d ) { return x( d.date ) + detailWidth / 2; } )
                   .y( function( d ) { return y( d.value[ type ] ); } ),
 
+        loader = container.select( '.p--graphs--loading' ),
+
         assertionGroup,
         circleContainer,
         zoom;
@@ -317,9 +319,12 @@
       } )
     ] );
 
+    // hide loading spinner
+    loader.attr( 'class', 'p--graphs--loading' );
+
     // clean up time... :)
     if ( !svg.empty() ) {
-      svg.selectAll( 'g, path, line' ).remove();
+      svg.selectAll( 'g, path, rect, text, line' ).remove();
     }
 
     svg.append( 'g' )
@@ -709,6 +714,11 @@
    */
   function drawLineCharts( data, type ) {
     var lastMetric = data[ data.length - 1 ];
+    var loaders    = document.querySelectorAll( '.p--graphs--loading' );
+
+    for ( var i = 0; i < loaders.length; ++i ) {
+      loaders[ i ].classList.add( 'is-active' );
+    }
 
     type = type || 'median';
 

diff --git a/tasks/public/scripts/phantomas.min.js b/tasks/public/scripts/phantomas.min.js
diff --git a/tasks/public/styles/phantomas.css b/tasks/public/styles/phantomas.css
diff --git a/tasks/tpl/index.tpl b/tasks/tpl/index.tpl
@@ -34,6 +34,9 @@
             <% _.each( group[ key ], function( metric ) { %>
               <% if ( results[ results.length - 1 ].metrics[ metric ] ) { %>
                 <li id="graph--<%= metric %>" class="p--graphs--graph <%= ( _.indexOf( failedAssertions, metric ) !== -1 ) ? 'failed' : '' %>">
+                  <div class="p--graphs--loading is-active">
+                    <div class="spinner"></div>
+                  </div>
                   <h4><%= metric %></h4>
                   <button class="p--graphs--button__expand js-expand" type="button" data-metric="<%= metric %>">Table</button>
                   <% if ( results[ results.length - 1 ].offenders[ metric ] ) { %>