Merge pull request #132 from theodi/feature-tooltips

Tooltips
theodi · Jul 1, 2016 · cb31c97 · cb31c97
2 parents 80ae872 + 339c7c2
commit cb31c97
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 10 deletions.
diff --git a/lib/metrics-api.rb b/lib/metrics-api.rb
@@ -161,8 +161,8 @@ class MetricsApi < Sinatra::Base
     begin
       data = JSON.parse request.body.read
       @meta = MetricMetadata.find_or_create_by(name: params[:metric].parameterize)
-      @meta.type = data["type"]
-      @meta.datatype = data["datatype"]
+      @meta.type = data["type"].presence
+      @meta.datatype = data["datatype"].presence
       @meta.title.merge!(data["title"] || {})
       @meta.description.merge!(data["description"] || {})
       if @meta.save

diff --git a/lib/public/css/tooltip.css b/lib/public/css/tooltip.css
@@ -0,0 +1,23 @@
+[data-tip] {
+	position:relative;
+	cursor:help;
+}
+
+[data-tip]:after {
+	display:none;
+	content:attr(data-tip);
+	position:absolute;
+	bottom: 0px;
+	left: 0px;
+	right: 0px;
+	padding:5px 8px;
+	background:rgba(0,0,0,0.4);
+	color:#fff;
+	z-index:9;
+	font-size: 5vh;
+}
+
+[data-tip]:hover:before,
+[data-tip]:hover:after {
+  display:block;
+}
diff --git a/lib/public/javascripts/number.js b/lib/public/javascripts/number.js
@@ -1,5 +1,5 @@
-function applyNumber(title, date, number, element, datatype) {
-  var content = '<h1>' + title + '</h1>'
+function applyNumber(title, date, number, element, datatype, description) {
+  var content = '<h1 data-tip="'+ description +'">' + title + '</h1>'
   content += '<h2>' + number + '</h2>'
   content += '<small>Last updated: ' + date + '</small>'
 
@@ -26,7 +26,7 @@ function countUp(number, options, element) {
   countup.start();
 }
 
-function number(json, title, element, datatype) {
+function number(json, title, element, datatype, description) {
   if (json.values) {
     var last = json.values[json.values.length - 1]
     var date = moment(last['time']).format('YYYY-MM-DD HH:mm')
@@ -36,5 +36,5 @@ function number(json, title, element, datatype) {
     var date = moment(json.time).format('YYYY-MM-DD HH:mm')
   }
 
-  applyNumber(title, date, number, element, datatype)
+  applyNumber(title, date, number, element, datatype, description)
 }
diff --git a/lib/views/chart.erb b/lib/views/chart.erb
@@ -1,6 +1,8 @@
 <!-- PLOTLY -->
 <script src='//cdn.plot.ly/plotly-latest.min.js'></script>
 <style>
+  @import '/css/tooltip.css';
+
   @font-face {
     font-family: 'Open Sans';
     font-style: normal;
@@ -29,7 +31,7 @@
 </style>
 
 <div id="wrapper">
-  <h1><%= @title['en'] %></h1>
+  <h1 data-tip='<%= @description['en'] %>'><%= @title['en'] %></h1>
   <div id='chart'></div>
 </div>
 <script src='/javascripts/metrics.js'></script>

diff --git a/lib/views/number.erb b/lib/views/number.erb
@@ -17,6 +17,7 @@
   <style>
     @import '//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css';
     @import '/css/number.css';
+    @import '/css/tooltip.css';
 
     div {
       font-family: 'Open Sans', 'Calibri';
@@ -45,6 +46,6 @@ $.getJSON(document.URL, function (json) {
   t = document.querySelector('#number-template')
   root.innerHTML = t.innerHTML
   title = '<%= @title["en"] %>'
-  number(json, title, $(container.shadowRoot), '<%= @datatype %>')
+  number(json, title, $(container.shadowRoot), '<%= @datatype %>', '<%= @description['en'] %>')
 })
 </script>
diff --git a/lib/views/pie.erb b/lib/views/pie.erb
@@ -1,6 +1,8 @@
 <!-- PLOTLY -->
 <script src='//cdn.plot.ly/plotly-latest.min.js'></script>
 <style>
+  @import '/css/tooltip.css';
+
   @font-face {
     font-family: 'Open Sans';
     font-style: normal;
@@ -29,7 +31,7 @@
 </style>
 
 <div id="wrapper">
-  <h1><%= @title['en'] %></h1>
+  <h1 data-tip='<%= @description['en'] %>'><%= @title['en'] %></h1>
   <div id='chart'></div>
 </div>
 <script src='/javascripts/metrics.js'></script>

diff --git a/lib/views/target.erb b/lib/views/target.erb
@@ -15,6 +15,7 @@
   <style>
     @import '//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css';
     @import '/css/target.css';
+    @import '/css/tooltip.css';
 
     div {
       font-family: 'Open Sans', 'Calibri';
@@ -23,7 +24,7 @@
 
   <div id="widget">
       <div id='target-wrapper'>
-        <div id='caption'></div>
+        <div id='caption' data-tip='<%= @description['en'] %>'></div>
         <div id='target' class='col-md-12 hidden-xs hidden-sm'></div>
         <div id='target-little' class='col-md-12 hidden-md hidden-lg'></div>
       </div>