Nav

pikesley · Dec 31, 2015 · 719f597 · 719f597
1 parent c5dafea
commit 719f597
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 35 deletions.
diff --git a/config/lookups.yml b/config/lookups.yml
@@ -1,10 +1,18 @@
+catface:
+  url: /catface
+  title: Catface
+
 snake-data:
-  length:
+  url: /snake
+  title: Snake
+
+  datasets:
+    length:
 #    title: Length Measurement
-    type: graph
+      type: graph
 
-  weight:
-    type: graph
+    weight:
+      type: graph
 
-  sheds:
-    date-field: Shed completed
+    sheds:
+      date-field: Shed completed
diff --git a/lib/dashboard.rb b/lib/dashboard.rb
@@ -24,7 +24,7 @@ class App < Sinatra::Base
 
     get '/' do
       @content = '<h1>Home Dashboard</h1>'
-      @title = 'Dashboard'
+      title = 'Dashboard'
       erb :index, layout: :default
     end
 

diff --git a/lib/dashboard/cleaner.rb b/lib/dashboard/cleaner.rb
@@ -27,8 +27,9 @@ def self.sanitized_data url
       j['title'] = titleise(d)
       j['name'] = d['name']
       j['id'] = trim d['name']
-      j['date-field'] = lookups.dig(d['repo'], trim(d['name']), 'date-field') || 'Date' 
-      j['type'] = lookups.dig(d['repo'], trim(d['name']), 'type') || 'latest'
+      j['date-field'] = lookups.dig(d['repo'], 'datasets', trim(d['name']), 'date-field') || 'Date'
+  #    require "pry" ; binding.pry
+      j['type'] = lookups.dig(d['repo'], 'datasets', trim(d['name']), 'type') || 'latest'
       j['url'] = d['_links']['html']
       j['data'] = jsonise d['data']
 

diff --git a/lib/views/default.erb b/lib/views/default.erb
@@ -30,6 +30,10 @@
   </head>
 
   <body>
+
+    <%= erb :'includes/nav' %>
+    <%= erb :'includes/github-corner' %>
+
     <div class='container'>
       <div class='row'>
         <div class='col-md-2'></div>

diff --git a/lib/views/grid.erb b/lib/views/grid.erb
@@ -1,6 +1,4 @@
-<h2><a href='/'>Home</a></h2>
-<h1><%= @title %></h1>
-<hr />
+
 <div class='row' id='numbers'></div>
 
 <div class='row' id='charts'></div>
@@ -14,33 +12,43 @@
           latestCell(j)
         )
       } else if (j['type'] === 'graph') {
-        ecks = Object.keys(j['data'][0])[0]
-        why = Object.keys(j['data'][0])[1]
-        var points = [
-          {
-            x: j['data'].map(function(item){ return item[ecks] }),
-            y: j['data'].map(function(item){ return item[why] }),
-            type: 'scatter'
-          }
-        ]
-
-        var layout = {
-          title: j['title'],
-          yaxis: {
-            title: why,
-            titlefont: {
-              size: 14,
-              color: '#7f7f7f'
-            }
-          }
-        }
-
-        $('#charts').append("<div id='" + j['id'] + "' class='col-md-6' style='height: 400px'></div>")
-        Plotly.newPlot(j['id'], points, layout)
+        graph(j)
       }
     })
   })
 
+  function graph(json) {
+    ecks = Object.keys(json['data'][0])[0]
+    why = Object.keys(json['data'][0])[1]
+    var points = [
+      {
+        x: json['data'].map(function(item){ return item[ecks] }),
+        y: json['data'].map(function(item){ return item[why] }),
+        type: 'scatter'
+      }
+    ]
+
+    var layout = {
+      title: json['title'],
+      xaxis: {
+        tickformat: "%b %Y"
+      },
+      yaxis: {
+        title: why,
+        titlefont: {
+          size: 14,
+          color: '#7f7f7f'
+        }
+      },
+      margin: {                           // update the left, bottom, right, top margin
+       l: 40, r: 10
+     }
+    }
+
+    $('#charts').append("<div id='" + json['id'] + "' class='col-md-6' style='height: 400px'></div>")
+    Plotly.newPlot(json['id'], points, layout)
+  }
+
   function latestCell(json) {
     d = json['data'][json['data'].length -1][json['date-field']]
     fixedDate = moment(d, 'YYYY-MM-DD').format('dddd Do MMMM')

diff --git a/lib/views/includes/github-corner.erb b/lib/views/includes/github-corner.erb
@@ -0,0 +1,8 @@
+<a href='https://github.com/pikesley/home-dashboard' class='github-corner' title='Fork me on Github'>
+  <svg width="80" height="80" viewBox="0 0 250 250" style="fill:black; color:white; position: absolute; top: 0; border: 0; right: 0;">
+    <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+    <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
+    <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
+  </svg>
+</a>
+<style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
diff --git a/lib/views/includes/nav.erb b/lib/views/includes/nav.erb
@@ -0,0 +1,28 @@
+<nav class="navbar navbar-default">
+  <div class="container-fluid">
+    <!-- Brand and toggle get grouped for better mobile display -->
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <a class="navbar-brand" href="/">Home</a>
+    </div>
+
+    <!-- Collect the nav links, forms, and other content for toggling -->
+    <div class="collapse navbar-collapse" id="navbar-collapse">
+      <ul class="nav navbar-nav">
+        <% lookups = Dashboard::Cleaner.lookups %>
+        <% lookups.keys.each do |dashboard| %>
+        <li
+        <% if lookups[dashboard]['url'] ==  request.env['REQUEST_URI']%>
+          class="active"
+        <% end %>
+        ><a href="<%= lookups[dashboard]['url'] %>"><%= lookups[dashboard]['title'] %></a></li>
+        <% end %>
+      </ul>
+    </div><!-- /.navbar-collapse -->
+  </div><!-- /.container-fluid -->
+</nav>