2ed8892a.patch

git show 2ed8892a
commit 2ed8892a62ddf750924c2cb3ebfa50047ae7b2f4
Author: byte <[filtered]>
Date:   Fri May 3 02:10:12 2019 -0400

    convert sparklines to svg

diff --git a/app/assets/stylesheets/common/barline.scss b/app/assets/stylesheets/common/barline.scss
index 3a3be5828..58b4292b0 100644
--- a/app/assets/stylesheets/common/barline.scss
+++ b/app/assets/stylesheets/common/barline.scss
@@ -4,52 +4,10 @@
   border-bottom: 1px solid $sparkline_color;
 }
 
-.sparkline .hint {
-  display: flex;
-  height: 100%;
-  flex: 1 0 auto;
-  align-items: flex-end;
-}
-
-.sparkline .bar {
-  width: 100%;
-  background-color: $sparkline_color;
-}
-
-.sparkline .hint:hover .bar {
-  background-color: #ff0000;
-}
-
-[data-hint] {
-  position: relative;
-  display: inline-block;
-}
-
-[data-hint]::after {
-  position: absolute;
-
-  // HACK: visibility is set to hidden because IE & Opera don't support
-  // pointer-events on HTML content yet because of which hovering a hidden tooltip
-  // shows the tooltip.
-  visibility: hidden;
-  opacity: 0;
-  z-index: 999;
-  // shouldn't receive pointer events, otherwise even hovering tooltip will make it appear
-  pointer-events: none;
-
-  content: attr(data-hint); // The magic!
-  background: rgba(0, 0, 0, 0.5);
-  color: white;
-  border: 1px solid white;
-  padding: 5px;
-  font-size: 10px;
-  line-height: 10px; // Vertical centering.
-  white-space: nowrap; // Prevent breaking to new line.
-  bottom: 100%;
-  left: 100%;
+.barline__bar {
+  fill: $sparkline_color;
 }
 
-[data-hint]:hover::after {
-  visibility: visible;
-  opacity: 1;
+.barline__bar:hover {
+  fill: red;
 }
diff --git a/app/helpers/users_helper.rb b/app/helpers/users_helper.rb
index 7d175e889..f0eb25572 100644
--- a/app/helpers/users_helper.rb
+++ b/app/helpers/users_helper.rb
@@ -2,18 +2,24 @@
 
 module UsersHelper
   def sparkline_data(data)
-    max = data.max
+    max = [data.max, 0].max
     min = [data.min, 0].max
 
-    s = data.map do |val|
-      # Filter out negative values.
-      calc = [val, 0].max.to_f
+    content_tag :svg, preserveAspectRatio: 'none', viewBox: '0 0 90 20' do
+      data.each_with_index do |val, i|
+        # Filter out negative values.
+        calc = [val, 0].max
 
-      # Simple linear interpolation, or 0 if NaN.
-      height = (calc - min) * 100.0 / (max - min) rescue 0
-      %(<div class="hint" data-hint="#{val.to_i}"><div class="bar" style="height:#{height.round(3)}%"></div></div>)
-    end
+        # Simple linear interpolation, or 0 if none present.
+        height = (calc - min) * 20.0 / (max - min)
+        height = 0 if height.nan?
+        height = height.to_i
+
+        # In SVG coordinates, y grows down.
+        y      = 20 - height
 
-    s.join('').html_safe
+        concat content_tag(:rect, content_tag(:title, val), class: 'barline__bar', x: i, y: y, width: 1, height: height)
+      end
+    end
   end
 end