Various fixes

SamsungInternet · Nov 14, 2017 · d0a0b38 · d0a0b38
1 parent 46435f4
commit d0a0b38
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 34 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -98,6 +98,10 @@ main {
   color: #59922b;
 }
 
+.arrow.same {
+  color: #efdf57;
+}
+
 .arrow.down {
   color: #d70206;
 }

diff --git a/index.html b/index.html
@@ -9,7 +9,10 @@
     <link rel="stylesheet" href="lib/chartist.css">
     <link rel="stylesheet" href="css/styles.css">
     <link rel="icon" href="images/favicon.png" type="image/png">
+    <script src="lib/papaparse.js"></script>
+    <script src="lib/moment.js"></script>
     <script src="lib/chartist.js"></script>
+    <script src="src/data-paths.js"></script>
   </head>
   <body>
     <header>
@@ -76,7 +79,7 @@ <h3>128</h3>
         <div>
           <h3>353</h3>
           <p>Facebook engagements (28 days)</p>
-          <p class="change"><span class="arrow up">↑</span> up</p>
+          <p class="change"><span class="arrow up">↑</span> 128</p>
         </div>
         <div>
           <h3>45.7K</h3>
@@ -85,7 +88,7 @@ <h3>45.7K</h3>
         </div>
       </div>
       <p class="summary">Total impressions/views: <strong>132.0K</strong></p>
-      <h2>Open Source (Github)</h2>
+      <h2>Open Source &amp; Support (Github)</h2>
       <div class="numbers">
         <div>
           <h3>33</h3>
@@ -99,17 +102,13 @@ <h3>183</h3>
           <h3>40</h3>
           <p>Forks</p>
         </div>        
-      </div>
-      <h2>Support (Github &amp; Stack Overflow)</h2>
-      <div class="numbers">
         <div>
           <h3>16</h3>
           <p>Open Issues</p>
         </div>
         <div>
           <h3>5</h3>
           <p>Time To Close Issues (months, avg)</p>
-          <p class="change"><span class="arrow "></span> N/A</p>
         </div>
       </div>
       <h2>Blogging (Medium)</h2>
@@ -124,26 +123,26 @@ <h2>SEO</h2>
         <div>
           <h4>WebVR</h4>
           <h3>48</h3>
-          <p>https://samsunginter.net/docs/webvr</p>
-          <p class="change"><span class="arrow "></span> N/A (34 days)</p>
+          <p><a href="https://samsunginter.net/docs/webvr">samsunginter.net/docs/webvr</a></p>
+          <p class="change"><span class="arrow same">‒</span> N/A (34 days)</p>
         </div>
         <div>
           <h4>Web Payments</h4>
           <h3>13</h3>
-          <p>https://samsunginter.net/docs/web-payments</p>
+          <p><a href="https://samsunginter.net/docs/web-payments">samsunginter.net/docs/web-p...</a></p>
           <p class="change"><span class="arrow up">↑</span> 14 (34 days)</p>
         </div>
         <div>
           <h4>Progressive Web Apps</h4>
           <h3>12</h3>
-          <p>https://medium.com/samsung-internet-dev/6-myths-of-progressive-web-apps-81e28ca9d2b1</p>
-          <p class="change"><span class="arrow "></span> <span id="seo-pwas-change"></span> (<span id="seo-pwas-change-label"></span>)</p>
+          <p><a href="https://medium.com/samsung-internet-dev/6-myths-of-progressive-web-apps-81e28ca9d2b1">medium.com/samsung-internet...</a></p>
+          <p class="change"><span class="arrow same">‒</span> N/A (34 days)</p>
         </div>
         <div>
           <h4>Physical Web</h4>
-          <h3 id="seo-physicalweb"></h3>
-          <p id="seo-physicalweb-link">Outside top 250</p>
-          <p class="change"><span class="arrow "></span> <span id="seo-physicalweb-change"></span> (<span id="seo-physicalweb-change-label"></span>)</p>
+          <h3>51</h3>
+          <p><a href="https://samsunginter.net/docs/physical-web">samsunginter.net/docs/physi...</a></p>
+          <p class="change"><span class="arrow same">‒</span> N/A (34 days)</p>
         </div>
       </div>
       <h2>Surveys</h2>

diff --git a/src/data-paths.js b/src/data-paths.js
@@ -0,0 +1,2 @@
+/* Exporting as variables to be used by both front-end and service worker */
+var mediumStatsCSVPath = 'data/medium/2017-11-13-medium-overview.csv';
diff --git a/src/index.js b/src/index.js
@@ -24,11 +24,6 @@ function setupSurveyChart(chartId, awarePercent) {
 function setupSurveyCharts() {
     setupSurveyChart('twitter', twitterSurveyAwarePercent);
     setupSurveyChart('event', eventSurveyAwarePercent);
-
-    window.addEventListener('resize', function(event) {
-        labelCount = 0;
-    });
-
 }
 
 function fetchMediumData() {
@@ -45,6 +40,7 @@ function setupMediumChart(mediumData) {
 
     // Date, Minutes Read, Views, Visitors
 
+    var labelCount = 0;
     var labels = [];
     var totalTimeReadMins = [];
     var views = [];
@@ -91,6 +87,7 @@ function setupMediumChart(mediumData) {
     };
 
     Chartist.Line('#medium-chart', data, options);
+    labelCount = 0;
 }
 
 if ('serviceWorker' in navigator) {
@@ -106,3 +103,6 @@ if ('serviceWorker' in navigator) {
 } else {
     console.log('Service workers not supported');
 }
+
+fetchMediumData();
+setupSurveyCharts();
diff --git a/src/template.html b/src/template.html
@@ -9,7 +9,10 @@
     <link rel="stylesheet" href="lib/chartist.css">
     <link rel="stylesheet" href="css/styles.css">
     <link rel="icon" href="images/favicon.png" type="image/png">
+    <script src="lib/papaparse.js"></script>
+    <script src="lib/moment.js"></script>
     <script src="lib/chartist.js"></script>
+    <script src="src/data-paths.js"></script>
   </head>
   <body>
     <header>
@@ -106,7 +109,6 @@ <h3>${github.issues.openIssues}</h3>
         <div>
           <h3>${github.issues.closeTimeAvg.count}</h3>
           <p>Time To Close Issues (months, avg)</p>
-          <p class="change"><span class="arrow ${github.issues.closeTimeAvg.changeDirection}">${github.issues.closeTimeAvg.changeArrow}</span> ${github.issues.closeTimeAvg.change}</p>
         </div>
       </div>
       <h2>Blogging (Medium)</h2>
@@ -121,26 +123,26 @@ <h2>SEO</h2>
         <div>
           <h4>WebVR</h4>
           <h3>${seo.webvr.count}</h3>
-          <p>${seo.webvr.link || 'Outside top 250'}</p>
+          <p>${seo.webvr.formattedlink || 'Outside top 250'}</p>
           <p class="change"><span class="arrow ${seo.webvr.changeDirection}">${seo.webvr.changeArrow}</span> ${seo.webvr.change} (${seo.webvr.changeLabel})</p>
         </div>
         <div>
           <h4>Web Payments</h4>
           <h3>${seo.webPayments.count}</h3>
-          <p>${seo.webPayments.link || 'Outside top 250'}</p>
+          <p>${seo.webPayments.formattedlink || 'Outside top 250'}</p>
           <p class="change"><span class="arrow ${seo.webPayments.changeDirection}">${seo.webPayments.changeArrow}</span> ${seo.webPayments.change} (${seo.webPayments.changeLabel})</p>
         </div>
         <div>
           <h4>Progressive Web Apps</h4>
           <h3>${seo.pwas.count}</h3>
-          <p>${seo.pwas.link || 'Outside top 250'}</p>
-          <p class="change"><span class="arrow ${seo.pwas.changeDirection}">${seo.pwas.changeArrow}</span> <span id="seo-pwas-change"></span> (<span id="seo-pwas-change-label"></span>)</p>
+          <p>${seo.pwas.formattedlink || 'Outside top 250'}</p>
+          <p class="change"><span class="arrow ${seo.pwas.changeDirection}">${seo.pwas.changeArrow}</span> ${seo.pwas.change} (${seo.pwas.changeLabel})</p>
         </div>
         <div>
           <h4>Physical Web</h4>
-          <h3 id="seo-physicalweb"></h3>
-          <p id="seo-physicalweb-link">Outside top 250</p>
-          <p class="change"><span class="arrow ${seo.physicalWeb.changeDirection}">${seo.physicalWeb.changeArrow}</span> <span id="seo-physicalweb-change"></span> (<span id="seo-physicalweb-change-label"></span>)</p>
+          <h3>${seo.physicalWeb.count}</h3>
+          <p>${seo.physicalWeb.formattedlink || 'Outside top 250'}</p>
+          <p class="change"><span class="arrow ${seo.physicalWeb.changeDirection}">${seo.physicalWeb.changeArrow}</span> ${seo.physicalWeb.change} (${seo.physicalWeb.changeLabel})</p>
         </div>
       </div>
       <h2>Surveys</h2>

diff --git a/sw.js b/sw.js
@@ -2,10 +2,8 @@
 
 var version = 18;
 
-// Remember to update this each time
-var mediumStatsCSVPath = 'data/medium/2017-11-13-medium-overview.csv';
-
 importScripts('lib/sw-toolbox.js');
+importScripts('src/data-paths.js');
 
 var precacheList = [
   'index.html',

diff --git a/update.js b/update.js
@@ -10,6 +10,7 @@ const GITHUB_API_REPOS_URL = 'https://api.github.com/search/repositories?q=org%3
 
 const upArrow = '↑';
 const downArrow = '↓';
+const noChangeArrow = '‒';
 
 const comparisonDaysDiff = utils.getDaysDiff(stats.updated, comparisonStats.updated);
 
@@ -29,17 +30,17 @@ function updateStatWithChange(data, comparisonData, pathToStat, lowerIsBetter) {
     stat.change = utils.formatChangeValue(count, comparisonCount, lowerIsBetter);
     stat.changeLabel = comparisonDaysDiff + ' days';
     stat.changeDirection = changeDirection;
-    stat.changeArrow = '';
 
     if (changeDirection === 'up') {
         stat.changeArrow = upArrow;
     } else if (changeDirection === 'down') {
         stat.changeArrow = downArrow;
     } else {
+        stat.changeArrow = noChangeArrow;
     }
 
     if (stat.link) {
-        stat.formattedlink = utils.formatDisplayUrl(stat.link);
+        stat.formattedlink = `<a href="${stat.link}">${utils.formatDisplayUrl(stat.link)}</a>`;
     }
 
 }
@@ -119,6 +120,8 @@ function updateWithGithubStats(processedStats, githubStats) {
 const templateHtml = fs.readFileSync('src/template.html', 'utf8');
 let processedStats = processStats(stats, comparisonStats);
 
+console.log('Fetching Github stats...');
+
 fetch(GITHUB_API_REPOS_URL)
     .then(function(response) {
       return response.json();

diff --git a/utils.js b/utils.js
@@ -75,7 +75,7 @@ const utils = {
     },
 
     /**
-     * Return 'up', 'down' or blank string
+     * Return 'up', 'down' or 'same'
      */
     getChangeDirection: function(count, comparisonCount, lowerIsBetter) {
 
@@ -84,7 +84,7 @@ const utils = {
         } else if (comparisonCount - count < 0) {
             return lowerIsBetter ? 'down' : 'up';
         } else {
-            return '';
+            return 'same';
         }
 
     }