Merge pull request #2 from Packet-Clearing-House/dev-1

fix gap when at 50px tall per #1, add more exampels , update release history
Packet-Clearing-House · Nov 16, 2016 · b316845 · b316845
2 parents 4f1aa02 + 1459cb4
commit b316845
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -78,4 +78,7 @@ MIT
 
 ## Version History
 
+
+- 1.1 - 11/16/2016: Fix gap on Safari, add more examples
 - 1.0 - 10/24/2016: Initial release
+
diff --git a/dist/HappyHistogram.min.js b/dist/HappyHistogram.min.js
diff --git a/example/index.html b/example/index.html
@@ -8,10 +8,34 @@
 </head>
 <body>
 
-<h1>Happy Histogram</h1>
+<h1>Happy Histogram 1.1</h1>
+
+<h2> Commits made per day </h2>
+<div id="histogram2"></div>
+<script>
+    Year = [
+        [10,2,2,4,3,3,0,2,3,3,3,3,2,0,1,2,2,1,2,1,0,0,2,2,2,3,3,1,2,2,2],
+        [0,0,0,0,0,1,1,1,1,1,1,0,0,0,3,4,4,6,3,1,2,3,4,4,3,1,0,0,1],
+        [0,0,0,0,0,0,0,0,0,0,0,1,0,1,0,1,1,1,2,4,2,1,1,0,7,9,7,3,2,1,1],
+        [4,0,2,2,3,3,2,1,0,0,1,2,2,1,0,0,1,2,4,7,4,1,1,4,4,4,3,5,0,0],
+        [2,1,1,1,1,2,1,1,1,2,1,0,0,0,2,2,2,3,1,1,1,0,2,2,1,0,0,0,3,5,5],
+        [4,3,2,1,1,1,2,2,3,2,0,1,3,3,4,3,1,0,0,1,1,1,1,0,0,0,1,1,1,1],
+        [1,1,2,3,4,2,0,0,0,0,0,0,0,0,0,0,1,3,3,2,1,0,0,1,1,1,2,1,0,0,2],
+        [0,0,0,0,0,1,2,2,0,0,2,1,1,1,1,0,1,1,1,1,1,1,0,0,0,0,3,3,3,0,0],
+        [0,0,1,1,1,2,2,2,2,1,0,0,1,1,2,2,2,1,0,0,1,0,0,0,0,1,1,1,1,1],
+        [1,1,1,1,1,1,1,2,2,1,0,0,0,1,2,2,1,1,0,0,1,1,1,1,1,1,0,0,0,1,2],
+        [2,1,0,0,0,0,0,1,0,0,0,0,0,1,2,0,0,0,2,2,2,1,0,1,1,1,2,2,2,1],
+        [1,1,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
+    ];
+
+    HappyHistogram('histogram2', Year, 'aqua');
+</script>
+
+<p>Different color.</p>
+
 
 <h2> Widgets made per day </h2>
-<div id="histogram" style="heigth:50px"></div>
+<div id="histogram"></div>
 <script>
     var Year = [
         [1,0,0,0,0,0,0,0,0,0,0,1,0,1,0,1,1,1,2,4,2,1,1,0,7,9,7,3,2,1,1],
@@ -31,32 +55,46 @@ <h2> Widgets made per day </h2>
     HappyHistogram('histogram', Year, 'red');
 </script>
 
+<p>Hover effect on entire bar and different color.</p>
+
 <style>
     #histogram .yearHistogram .bar:hover {
-        background-color: #ddd;
+        background-color: darkgrey;
+    }
+    #histogram .yearHistogram  .filledBottom:hover {
+        background-color: darkred;
     }
 </style>
 
-<h2> Commits made per day </h2>
-<div id="histogram2"></div>
+<h2> Birds seen per month </h2>
+<div id="histogram3"></div>
 <script>
-    Year = [
-        [10,2,2,4,3,3,0,2,3,3,3,3,2,0,1,2,2,1,2,1,0,0,2,2,2,3,3,1,2,2,2],
-        [0,0,0,0,0,1,1,1,1,1,1,0,0,0,3,4,4,6,3,1,2,3,4,4,3,1,0,0,1],
-        [0,0,0,0,0,0,0,0,0,0,0,1,0,1,0,1,1,1,2,4,2,1,1,0,7,9,7,3,2,1,1],
-        [4,0,2,2,3,3,2,1,0,0,1,2,2,1,0,0,1,2,4,7,4,1,1,4,4,4,3,5,0,0],
-        [2,1,1,1,1,2,1,1,1,2,1,0,0,0,2,2,2,3,1,1,1,0,2,2,1,0,0,0,3,5,5],
-        [4,3,2,1,1,1,2,2,3,2,0,1,3,3,4,3,1,0,0,1,1,1,1,0,0,0,1,1,1,1],
-        [1,1,2,3,4,2,0,0,0,0,0,0,0,0,0,0,1,3,3,2,1,0,0,1,1,1,2,1,0,0,2],
-        [0,0,0,0,0,1,2,2,0,0,2,1,1,1,1,0,1,1,1,1,1,1,0,0,0,0,3,3,3,0,0],
-        [0,0,1,1,1,2,2,2,2,1,0,0,1,1,2,2,2,1,0,0,1,0,0,0,0,1,1,1,1,1],
-        [1,1,1,1,1,1,1,2,2,1,0,0,0,1,2,2,1,1,0,0,1,1,1,1,1,1,0,0,0,1,2],
-        [2,1,0,0,0,0,0,1,0,0,0,0,0,1,2,0,0,0,2,2,2,1,0,1,1,1,2,2,2,1],
-        [1,1,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
+    var Year = [
+        [100],
+        [200],
+        [400],
+        [350],
+        [600],
+        [100],
+        [800],
+        [100],
+        [200],
+        [900],
+        [300],
+        [700]
     ];
 
-    HappyHistogram('histogram2', Year, 'aqua');
+    HappyHistogram('histogram3', Year, 'green');
 </script>
 
+<p>1 value per month, hover effect on just data bar (bottom) and different color.</p>
+
+<style>
+    #histogram3 .yearHistogram .filledBottom:hover {
+        background-color: #ddd;
+    }
+</style>
+
 </body>
-</HTML>
+</HTML>
+
diff --git a/src/HappyHistogram.js b/src/HappyHistogram.js
@@ -1,6 +1,6 @@
 /**
  * Generate an entirely HTML based histogram for events across a year
- * Version 1.0
+ * Version 1.1
  * @param targetId - ID in DOM to render into
  * @param monthData array of arrays - with int per day
  * @param color string - CSS color
@@ -52,7 +52,8 @@ function HappyHistogram (targetId, monthData, color ) {
                 day = 0;
             }
             if (day > 0){
-                bottom = day / max * 100;
+                // round bottom to closest 2
+                bottom = Math.ceil((day / max * 100) / 2) * 2;
                 top = 100 - bottom ;
             } else {
                 bottom = 0;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -78,4 +78,7 @@ MIT

		## Version History


		- 1.1 - 11/16/2016: Fix gap on Safari, add more examples
		- 1.0 - 10/24/2016: Initial release