From 453e762f8cb680c69c31b0f08b190448760a2b65 Mon Sep 17 00:00:00 2001
From: Kyle Drake <kyle@kyledrake.net>
Date: Thu, 4 Jun 2015 03:08:39 -0700
Subject: [PATCH] more work on stats view

---
 sass/_project-sass/_project-Main.scss | 180 +++++++++++++-------------
 views/site/stats.erb                  | 123 +++++++++++-------
 2 files changed, 169 insertions(+), 134 deletions(-)

diff --git a/sass/_project-sass/_project-Main.scss b/sass/_project-sass/_project-Main.scss
index f0beca13..ba29b86d 100644
--- a/sass/_project-sass/_project-Main.scss
+++ b/sass/_project-sass/_project-Main.scss
@@ -7,18 +7,18 @@
   background:#f6f0e6;
 	min-height:500px;
 	padding-bottom:50px;
-	
+
 	h1, h2, h3, h4, h5, h6{
   	color:#e93250
 	}
 }
 .content, .footer-Content {
 	padding: 20px 3%;
-  
+
   @media (max-device-width:480px), screen and (max-width:800px) {
     padding: 20px 7%;
   }
-  
+
   @media screen and (min-width:1300px){
     padding: 20px 0;
   }
@@ -34,7 +34,7 @@
 .interior .header-Outro {
   padding-top: 30px;
   overflow: hidden;
-  
+
   @media (max-device-width:480px), screen and (max-width:800px) {
     padding-top: 15px;
   }
@@ -47,13 +47,13 @@
   @media (max-device-width:480px), screen and (max-width:800px) {
     float: right;
     width: 35%;
-    
+
     .col-50 {
       width:100%;
       margin-bottom: 1em!important;
     }
   }
-  
+
 }
 .site-url {
   font-size:18px;
@@ -78,11 +78,11 @@
   -webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.10);
   box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.10);
   padding: 25px 3% 40px 3%;
-  
+
   @media (max-device-width:480px), screen and (max-width:800px) {
     padding: 22px 7% 40px 7%;
   }
-  
+
   h1, h2, h3, h4, h5, h6 {
     margin-top: 1em;
     &:first-child {
@@ -122,19 +122,19 @@
   }
   .site-url {
     margin-top: -9px;
-  } 
+  }
   .btn-Action {
     font-weight: normal;
     font-size: 12px;
     padding: 7px 15px;
-    
+
     @media (max-device-width:480px), screen and (max-width:800px) {
       margin: 6px 0px 8px;
     }
   }
   .row.content {
     margin-left: 6%;
-    margin-right: 6%; 
+    margin-right: 6%;
   }
 }
 .interior .header-Outro a {color:#E93250}
@@ -151,7 +151,7 @@
   -webkit-box-shadow: 1px 2px 5px 2px rgba(0,0,0,0.10);
   box-shadow: 1px 2px 5px 2px rgba(0,0,0,0.10);
   border: 4px solid white;
-  
+
   @media (max-device-width:480px), screen and (max-width:800px) {
     margin: 0 auto;
   }
@@ -165,7 +165,7 @@
   -webkit-background-size:cover;
   background-size:cover;
   background-position: center top;
-  
+
   @media (max-device-width:480px), screen and (max-width:800px) {
     width: 100%;
     height: 300px;
@@ -203,7 +203,7 @@
 }
 .interior .header-Outro.dashboard .col-50:nth-of-type(2) {
   float: left;
-  
+
   @media (max-device-width: 480px), screen and (max-width: 800px) {
     margin-left: 22px;
     margin-top: 18px;
@@ -215,7 +215,7 @@
   background-size: 77px 81px;
   padding: 20px 20px 20px 111px;
   margin-bottom: 13px;
-  
+
   @media (max-device-width: 480px), screen and (max-width: 800px) {
     padding: 111px 20px 20px 20px;
     background-position: center 20px;
@@ -262,7 +262,7 @@
 }
 .files .btn-Action {
   margin-left: 8px;
-  
+
   @media (max-device-width:480px), screen and (max-width:800px) {
     margin: 4px 8px 4px 0;
   }
@@ -283,7 +283,7 @@
 }
 .files .list .upload-Boundary.with-instruction {
   background: url(/img/drag-drop.png) no-repeat center center;
-  
+
   @media (max-device-width:480px), screen and (max-width:800px) {
     background: 0;
   }
@@ -312,7 +312,7 @@
   margin-bottom: 2px;
 }
 .files .progress-bar {
- background:#CCCCCC; 
+ background:#CCCCCC;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
@@ -472,7 +472,7 @@
   position: relative;
   clear: both;
   width: 100%;
-  
+
   h2:first-of-type, h3:first-of-type {
     margin-top: 0;
   }
@@ -516,7 +516,7 @@
   width: 66.95%;
   left: 33.05%;
   background: white;
-  
+
   @media (max-device-width:480px), screen and (max-width:800px) {
     width: 100%;
     border-bottom: 1px solid #ddd;
@@ -526,14 +526,14 @@
 .site-profile .content.misc-page.columns .col-66 {
   padding: 0;
   min-height: 38em;
-  
+
   @media (max-device-width:480px), screen and (max-width:800px) {
     min-height: 0px;
   }
 }
 .news-feed .content.misc-page.columns .col-66 {
   min-height: 56em;
-  
+
   @media (max-device-width:480px), screen and (max-width:800px) {
     min-height: 0;
   }
@@ -542,14 +542,14 @@
   width: 33%;
   left: 33%;
   float: right;
-  
+
   @media (max-device-width:480px), screen and (max-width:800px) {
     width: 100%;
   }
 }
 .interior .header-Outro.with-columns {
     padding-top: 22px;
-} 
+}
 .interior .header-Outro.with-columns h3 {
   float: left;
   margin-bottom: 0;
@@ -560,14 +560,14 @@
 }
 .interior .header-Outro.with-columns .col {
   padding: 25px 0 8px 30px;
-  
+
   @media (max-device-width:480px), screen and (max-width:800px) {
     padding: 10px 0 0 27px;
   }
 }
 .interior .header-Outro.with-columns .col-32 {
   width: 33%;
-  
+
   h3 {
     @media (max-device-width:480px), screen and (max-width:800px) {
       display: none;
@@ -583,10 +583,10 @@
 .interior .header-Outro.with-columns .col-66 {
   width: 67%;
   border-right: 1px solid #0B0F11;
-  
+
   @media (max-device-width:480px), screen and (max-width:800px) {
    border-right: 0;
-   padding: 15px 0 27px 30px; 
+   padding: 15px 0 27px 30px;
   }
 }
 .interior .header-Outro.with-columns .col-32 .edit {
@@ -600,7 +600,7 @@
   margin-top: 1.4em;
   font-size: 0.8em;
   margin-left: 1.5em;
-  
+
   @media (max-device-width:480px), screen and (max-width:800px) {
     margin: 0;
     clear: left;
@@ -635,7 +635,7 @@
   background-size: cover;
   float: left;
   margin-bottom: 20px;
-  
+
   @media (max-device-width:480px), screen and (max-width:800px) {
     width: 60%;
   }
@@ -661,11 +661,11 @@
   clear: both;
   margin: 20px auto 2em auto;
   text-align: center;
-  
+
   .btn-Action:last-child {
     margin-left: 10px;
   }
-  
+
   @media (max-device-width:480px), screen and (max-width:800px) {
     text-align: left;
   }
@@ -750,7 +750,7 @@ a.tag:hover {
   background-repeat: no-repeat;
 }
 .news-item .icon-mini {
-  
+
 }
 .news-item.update .icon {
   background: #E93250;
@@ -797,7 +797,7 @@ a.tag:hover {
   float: left;
   width: 100%;
 }
-.news-item .file a:hover { 
+.news-item .file a:hover {
   text-decoration: none;
 }
 .news-item .html-thumbnail {
@@ -863,7 +863,7 @@ a.tag:hover {
 .signup-Area.large {
   width: 418px;
   height: 236px;
-  
+
   @media (max-device-width:480px), screen and (max-width:800px) {
     height: auto;
   }
@@ -894,14 +894,14 @@ a.tag:hover {
   a:first-of-type {
     margin-left: 0;
   }
-  
+
 }
 .interior .header-Outro .stats {
   margin-bottom: 1.3em;
   float: left;
   width: 100%;
   margin-top: 1.9em;
-  
+
   @media (max-device-width:480px), screen and (max-width:800px) {
     float: none;
     width: 270px;
@@ -925,7 +925,7 @@ a.tag:hover {
   text-align: center;
   margin-right: 28px;
   color: #84997E;
-  
+
   @media (max-device-width:480px), screen and (max-width:800px) {
     margin: 0;
     width: 90px;
@@ -941,21 +941,21 @@ a.tag:hover {
   .following {
     display: none;
   }
-  .unfollow { 
+  .unfollow {
     display: none;
   }
 }
 #followLink.is-following {
-  
-  
+
+
   .follow {
     display: none;
   }
-  .following { 
+  .following {
     display: block;
     width: 5.9em;
   }
-  .unfollow { 
+  .unfollow {
     display: none;
   }
 }
@@ -963,10 +963,10 @@ a.tag:hover {
   .follow {
     display: none;
   }
-  .following { 
+  .following {
     display: none;
   }
-  .unfollow { 
+  .unfollow {
     display: block;
     width: 5.9em;
   }
@@ -997,7 +997,7 @@ a.tag:hover {
   border: 3px solid white;
   -webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3);
   -moz-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3);
-  box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3); 
+  box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3);
   width: 72px;
 }
 .archives img {
@@ -1014,11 +1014,11 @@ a.tag:hover {
   width: 100%;
   padding: 20px 0 15px 30px;
   margin: 0 0 3px 0;
-  
+
   input {
     width: 86%;
     float: left;
-    
+
     @media (max-width:950px) {
       width: 82%;
     }
@@ -1031,7 +1031,7 @@ a.tag:hover {
 .comment-policy {
   font-style: italic;
   font-size: .8em;
-  margin-right: 45px;  
+  margin-right: 45px;
   clear: both;
   margin-top: 2em;
 }
@@ -1096,11 +1096,11 @@ a.tag:hover {
   .row {
     margin: 5.5em 10%;
     padding: 0;
-    
+
     @media (max-device-width:480px), screen and (max-width:800px){
       margin: 4em 5%;
     }
-    
+
     &:first-of-type {
       margin-top: 3.5em;
     }
@@ -1114,7 +1114,7 @@ a.tag:hover {
         padding-top: 2em;
         float: left;
       }
-      
+
       @media (max-device-width:480px), screen and (max-width:800px){
         width: 100%;
         padding-right: 0px;
@@ -1129,7 +1129,7 @@ a.tag:hover {
       background-repeat: no-repeat;
       border: 13px solid #4f7d88;
       @include box-shadow(1px 1px 2px 0px rgba(0, 0, 0, 0.18));
-      
+
     }
     &:nth-child(3) .screenshot {
       border: 13px solid $c-Brand-1;
@@ -1160,7 +1160,7 @@ a.tag:hover {
   border-bottom: 1px solid #801629;
   padding: 30px 0;
   position: relative;
-  
+
   h2.delta {
     color: white;
     margin: 0;
@@ -1195,7 +1195,7 @@ a.tag:hover {
 }
 .section.instructor-quotes {
   background: #971D31;
-  
+
   h2, h3, p {
     color: #fff;
     text-align: left;
@@ -1218,7 +1218,7 @@ a.tag:hover {
 .section.features {
   background: #4F7E89;
   text-align: center;
-  
+
   .row:first-of-type {
     margin-bottom: 0;
   }
@@ -1231,7 +1231,7 @@ a.tag:hover {
 }
 .section.features .col {
   padding-left: 40px;
-  
+
   @media (max-device-width:480px), screen and (max-width:800px){
     padding-left: 20px;
     width: 100%;
@@ -1265,7 +1265,7 @@ a.tag:hover {
   clear: both;
   margin-top: 30px;
   margin-bottom: 0px;
-  
+
   @media (max-device-width:480px), screen and (max-width:800px){
     margin-top: 0;
   }
@@ -1275,10 +1275,10 @@ a.tag:hover {
   background-repeat: no-repeat;
   margin-right: 30px;
   background-size: 100%;
-  
+
   @media (max-width:1170px) and (min-width:900px){
     margin-right: 25px!important;
-    
+
     &:last-child {
       margin-right: 0!important;
     }
@@ -1292,11 +1292,11 @@ a.tag:hover {
 }
 .section .logo.wired {
   width: 211px;
-  height: 44px;  
+  height: 44px;
   background-image: url(/img/wired-logo.png);
   margin-top: 6px;
   margin-right: 38px;
-  
+
   @media (max-width:1170px) and (min-width:900px){
     width: 170px;
   }
@@ -1306,7 +1306,7 @@ a.tag:hover {
 }
 .section .logo.fastco {
   width: 262px;
-  height: 39px;  
+  height: 39px;
   background-image: url(/img/fastcompany-logo.png);
   margin-top: 7px;
   @media (max-width:1170px) and (min-width:900px){
@@ -1315,7 +1315,7 @@ a.tag:hover {
 }
 .section .logo.vice {
   width: 160px;
-  height: 50px;  
+  height: 50px;
   background-image: url(/img/vice-logo.png);
   @media (max-width:1170px) and (min-width:900px){
     width: 120px;
@@ -1323,7 +1323,7 @@ a.tag:hover {
   }
 }
 .section .logo.ars {
-  width: 187px;  
+  width: 187px;
   height: 62px;
   background-image: url(/img/ars-logo.png);
   margin-top: -4px;
@@ -1341,7 +1341,7 @@ a.tag:hover {
 .section .quote {
   width: 70%;
   margin: 0 auto .5em auto;
-  
+
   h3 {
     margin-top: .5em;
     text-align: center;
@@ -1498,12 +1498,12 @@ a.tag:hover {
   border: 0;
   background: 0;
   padding-right: 15px;
-  
+
   span {
     border-bottom: 1px dotted #bbb;
     cursor: help;
   }
-  
+
   @media(max-device-width:480px), screen and (max-width:800px) {
     width: 26%;
   }
@@ -1521,7 +1521,7 @@ a.tag:hover {
 }
 .section.plans.welcome {
   padding: 63px 3% 0 3%;
-  
+
   h3 {
     color: #5e95a1;
   }
@@ -1529,7 +1529,7 @@ a.tag:hover {
     width: 68%;
     margin-left: auto;
     margin-right: auto;
-    
+
     @media(max-device-width:480px), screen and (max-width:550px) {
       width: 100%;
     }
@@ -1539,18 +1539,18 @@ a.tag:hover {
     margin-right: auto;
     max-width: 990px;
     min-width: 900px;
-    
+
     @media(max-device-width:480px), screen and (max-width:550px) {
       min-width: 0;
     }
   }
   >.row >.col {
     padding-left: 40px;
-  
+
     &:first-child {
       padding-left: 0;
     }
-    
+
     @media(max-device-width:480px), screen and (max-width:550px) {
       padding-left: 0;
       width: 100%;
@@ -1568,10 +1568,10 @@ a.tag:hover {
       float: left;
       background: 0;
       padding-bottom: 0;
-      
+
       ul {
         clear: both;
-        
+
         &.main-features {
           font-size: 140%;
           margin-bottom: .7em;
@@ -1607,7 +1607,7 @@ a.tag:hover {
       border-right-width: 0;
       margin-top: 15px;
       margin-bottom: 15px;
-      
+
       .main-features {
         margin-bottom: 76px;
       }
@@ -1618,7 +1618,7 @@ a.tag:hover {
       border: 1px solid #E0E0E0;
       @include box-shadow(-1px 1px 5px 0px rgba(0,0,0,0.1));
       margin-bottom: 1.2em!important;
-      
+
       .col:first-child {
         width: 38%;
       }
@@ -1642,7 +1642,7 @@ a.tag:hover {
         margin-right: 3px;
       }
     }
-    @media(max-device-width:480px), screen and (max-width:550px) { 
+    @media(max-device-width:480px), screen and (max-width:550px) {
       .col.free, .col.supporter, .col.supporter .col {
         width: 100%!important;
       }
@@ -1661,11 +1661,11 @@ a.tag:hover {
 .section.bottom-signup {
 //  padding-top: 1em;
 //  padding-bottom: 6.5em;
-  
+
   padding-top: 0;
   background: #4F7E89;
   padding-bottom: 7em;
-  
+
   a {
     color: white;
     text-decoration: underline;
@@ -1771,7 +1771,7 @@ a.tag:hover {
   width: 100%;
   margin-top: 22px;
   font-size: 15px;
-  
+
   a, a:visited {
     color: white;
   }
@@ -1790,17 +1790,17 @@ a.tag:hover {
   .tools {
     color: #8099A7;
     float: right;
-    
+
     .theme {
       font-size: .9em;
       display: inline;
-      
+
       select#theme {
         vertical-align: baseline;
         background: #25333c;
         color: #8099A7;
-      } 
-      
+      }
+
       @media (max-device-width:480px), screen and (max-width:800px) {
         display: none;
       }
@@ -1808,7 +1808,7 @@ a.tag:hover {
     #saveButton {
       margin-top: 0;
     }
-    .tooltip {    
+    .tooltip {
       &.bottom .tooltip-arrow {
         border-bottom-color: #971D31;
       }
@@ -1848,7 +1848,7 @@ a.tag:hover {
   background: rgba(228, 228, 228, 0.42);
   width: 100%;
   text-align: center;
-  padding: 26px 0 5px;  
+  padding: 26px 0 5px;
   p {
     margin-top: 10px;
   }
@@ -1885,7 +1885,7 @@ table#latest-visitors {
   width: 100%;
   color: #777;
   font-size: .8em;
-  
+
   td {
     white-space: nowrap;
     max-width: 0;
@@ -1908,11 +1908,11 @@ table#latest-visitors {
   height: 400px;
 }
 .content.misc-page.columns .col.globe {
-  padding-right: 0; 
+  padding-right: 0;
   padding-top: 4px;
 }
 .news-feed .content.misc-page .col-50 {
   @media (max-device-width:480px), screen and (max-width:800px) {
     width: 100%;
   }
-}
\ No newline at end of file
+}
diff --git a/views/site/stats.erb b/views/site/stats.erb
index 4da0f995..1014c6cc 100644
--- a/views/site/stats.erb
+++ b/views/site/stats.erb
@@ -7,7 +7,6 @@
         <a href="/" <% if params[:activity].nil? %>class="selected"<% end %>>All</a>
         <a href="/?activity=mine" <% if params[:activity] == 'mine' %>class="selected"<% end %>>Profile Activity</a>
         <% end %>
-        <a href="/activity">Global Activity</a>
       </div>
     </div>
     <div class="col col-32">
@@ -23,10 +22,11 @@
       <div class="col col-66">
         <div class="row">
 
-          <div class="col col-50 globe">
-            <h2>Latest Visitors</h2>
+          <div class="col col-100 globe">
+            <h2>Most popular locations (this week)</h2>
             <div id="earth_div"></div>
           </div>
+          <!--
           <div class="col col-50" style="padding-right: 0;">
             <table class="table table-striped" id="latest-visitors">
               <tbody>
@@ -133,16 +133,24 @@
               </tbody>
             </table>
           </div>
+          -->
         </div>
 
-        <h2>Last 7 Days</h2>
-        <p>(<a href="/plan">Upgrade</a> to see up to see stats for all time)</p>
-        <ul class="nav h-Nav">
-          <li><a href="">Month</a></li>
-          <li><a href="">3 months</a></li>
-          <li><a href="">1 Year</a></li>
-          <li><a href="">All time</a></li>
-        </ul>
+        <h2>Total Visitors (last 7 days)</h2>
+
+        <% if current_site && current_site.id == @site.id %>
+
+          <% if current_site.supporter? %>
+            <ul class="nav h-Nav">
+              <li><a href="">1 month</a></li>
+              <li><a href="">3 months</a></li>
+              <li><a href="">1 year</a></li>
+              <li><a href="">All time</a></li>
+            </ul>
+          <% else %>
+            <p>(<a href="/plan">Upgrade</a> to see up to see stats for all time)</p>
+          <% end %>
+        <% end %>
 
         <canvas id="myChart" style="width:100%;height:300px;display:block"></canvas>
 
@@ -165,7 +173,8 @@
                 <% end %>
               </tbody>
             </table>
-
+          </div>
+          <div class="col col-50">
             <h2>Top Locations</h2>
             <table class="table table-striped">
               <thead>
@@ -186,28 +195,33 @@
               </tbody>
             </table>
           </div>
-
-          <div class="col col-50">
-
-            <h2>Top Referrers</h2>
-            <table class="table table-striped">
-              <thead>
-                <tr>
-                  <th>Referrer</th>
-                  <th>Visits</th>
-                </tr>
-              </thead>
-              <tbody>
-                <% @stats[:referrers].each do |referrer| %>
-                  <tr>
-                    <td><%= referrer.url %></td>
-                    <td><%= referrer.views %></td>
-                  </tr>
-                <% end %>
-              </tbody>
-            </table>
-          </div>
         </div>
+
+        <% if current_site && current_site.id == @site.id %>
+
+          <div class="row">
+            <div class="col col-100">
+              <h2>Top Referrers</h2>
+              <table class="table table-striped">
+                <thead>
+                  <tr>
+                    <th>Referrer</th>
+                    <th>Visits</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <% @stats[:referrers].each do |referrer| %>
+                    <tr>
+                      <td><%= referrer.url %></td>
+                      <td><%= referrer.views %></td>
+                    </tr>
+                  <% end %>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+        <% end %>
       </div>
 
       <div class="col col-33">
@@ -244,11 +258,32 @@
 <script>
   //OpenGL globe
   $(document).ready(function() {
-    var earth = new WE.map('earth_div');
-    earth.setView([20, -100], 2.07);
+    var options = {
+      sky: true,
+      atmosphere: false,
+      dragging: true,
+      tilting: true,
+      center: [46.8011, 8.2266],
+      zoom: 2
+    }
+
+    var earth = new WE.map('earth_div', options)
+    earth.setView([20, -100], 2.07)
+
+    /*
     WE.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
       attribution: '© OpenStreetMap'
     }).addTo(earth);
+    */
+
+    WE.tileLayer('http://data.webglearth.com/natural-earth-color/{z}/{x}/{y}.jpg', {
+      tileSize: 256,
+      bounds: [[-85, -180], [85, 180]],
+      minZoom: 0,
+      maxZoom: 16,
+      attribution: 'WebGL Earth Tiles',
+      tms: true
+    }).addTo(earth)
 
     <% @stats[:locations].each do |location| %>
       var marker = WE.marker([<%= location[:latitude] %>, <%= location[:longitude] %>]).addTo(earth);
@@ -258,13 +293,13 @@
 
 
     // Start a simple rotation animation
-    var before = null;
+    var before = null
     requestAnimationFrame(function animate(now) {
-        var c = earth.getPosition();
-        var elapsed = before? now - before: 0;
-        before = now;
-        earth.setCenter([c[0], c[1] + 0.1*(elapsed/30)]);
-        requestAnimationFrame(animate);
+        var c = earth.getPosition()
+        var elapsed = before? now - before: 0
+        before = now
+        earth.setCenter([c[0], c[1] + 0.1*(elapsed/30)])
+        requestAnimationFrame(animate)
     });
 
     //chart.js
@@ -292,14 +327,14 @@
           data: <%== @stats[:stat_days].collect {|s| s.views}.to_json %>
         }
       ]
-    };
+    }
     // Get context with jQuery - using jQuery's .get() method.
-    var ctx = $("#myChart").get(0).getContext("2d");
+    var ctx = $("#myChart").get(0).getContext("2d")
     // This will get the first returned node in the jQuery collection.
     //var myNewChart = new Chart(ctx);
     var myLineChart = new Chart(ctx).Line(data, {
       bezierCurve: false,
       multiTooltipTemplate: "<%== @multi_tooltip_template %>"
-    });
+    })
   })
 </script>