Hide real time data for datasets without that info

CityofSantaMonica · Jun 15, 2017 · 5e3bc59 · 5e3bc59
1 parent 12ecf73
commit 5e3bc59
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 35 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -134,7 +134,7 @@ <h1>
       </div>
     </header>
 
-    <main>
+    <main id="app">
       <!--
       JavaScript block hooks look for any element with both data-block and
       data-source attributes:
@@ -248,42 +248,35 @@ <h4>Windows</h4>
             </section>
           </div>
 
-          <section class="section_headline">
-            <h3>Visitor Locations Right Now</h3>
-          </section>
-
-          <div class="row">
-            <section id="cities" class="small-column column-third"
-              data-block="cities"
-              data-report="top-cities-realtime.json"
-              data-source="{{ data_url }}/top-cities-realtime.json">
-              <h4>Cities</h4>
-              <figure id="chart_top-cities-90-days">
-                <div class="data bar-chart">
-                </div>
-              </figure>
+          <div id="active_locations">
+            <section class="section_headline">
+              <h3>Visitor Locations Right Now</h3>
             </section>
 
-            <section id="countries" class="small-column column-third">
-              <h4>Countries</h4>
+            <div class="row">
+              <section id="cities" class="small-column column-third" data-block="cities" data-report="top-cities-realtime.json" data-source="{{ data_url }}/top-cities-realtime.json">
+                <h4>Cities</h4>
+                <figure id="chart_top-cities-90-days">
+                  <div class="data bar-chart">
+                  </div>
+                </figure>
+              </section>
 
-              <figure id="chart_us"
-                data-block="countries"
-                data-report="top-countries-realtime.json"
-                data-source="{{ data_url }}/top-countries-realtime.json">
-                <div class="data bar-chart">
-                </div>
-              </figure>
+              <section id="countries" class="small-column column-third">
+                <h4>Countries</h4>
 
-              <figure id="chart_countries"
-                data-block="international_visits"
-                data-report="top-countries-realtime.json"
-                data-source="{{ data_url }}/top-countries-realtime.json">
-                <h4>International</h4>
-                <div class="data bar-chart">
-                </div>
-              </figure>
-            </section>
+                <figure id="chart_us" data-block="countries" data-report="top-countries-realtime.json" data-source="{{ data_url }}/top-countries-realtime.json">
+                  <div class="data bar-chart">
+                  </div>
+                </figure>
+
+                <figure id="chart_countries" data-block="international_visits" data-report="top-countries-realtime.json" data-source="{{ data_url }}/top-countries-realtime.json">
+                  <h4>International</h4>
+                  <div class="data bar-chart">
+                  </div>
+                </figure>
+              </section>
+            </div>
           </div>
         </div>
 

diff --git a/css/public_analytics.scss b/css/public_analytics.scss
@@ -156,6 +156,22 @@ h5 {
   font-weight: 400;
 }
 
+.no-realtime {
+  #realtime,
+  #active_locations {
+    display: none;
+  }
+
+  .pills {
+    li {
+      width: 50%;
+
+      &:first-child {
+        display: none;
+      }
+    }
+  }
+}
 
 /*
 * utility classes for layout & display

diff --git a/js/index.js b/js/index.js
@@ -62,7 +62,31 @@
         var domain = split_urls[split_urls.length-1];
         return domain.replace(new RegExp("%20", "g"), " ");
       },
-      TRANSITION_DURATION = 500;
+      TRANSITION_DURATION = 500,
+      realTimeDisabled = false;
+
+  function simulateClick(selector) {
+    var e = document.createEvent('UIEvents');
+    e.initUIEvent('click', true, true, window, 1);
+
+    d3.select(selector)
+      .node()
+      .dispatchEvent(e);
+  }
+
+  function realTime(disable) {
+    if (realTimeDisabled == disable) {
+      return;
+    }
+
+    d3.select('#app')
+      .classed('no-realtime', disable);
+
+    var pillTarget = (disable) ? '#top-pages-7-days' : '#top-pages-realtime';
+    simulateClick('*[href="' + pillTarget + '"]');
+
+    realTimeDisabled = disable;
+  }
 
   /*
    * Define block renderers for each of the different data types.
@@ -71,7 +95,13 @@
 
     // the realtime block is just `data.totals.active_visitors` formatted with commas
     "realtime": renderBlock()
-      .render(function(selection, data) {
+      .render(function (selection, data) {
+        if (data.data.length == 0) {
+          realTime(true);
+          return;
+        }
+
+        realTime(false);
         var totals = data.data[0];
         selection.text(formatCommas(+totals.active_visitors));
       }),