From 65628dca301d4442592ac7383010f500c114be40 Mon Sep 17 00:00:00 2001 From: Ths2-9Y-LqJt6 Date: Thu, 9 Apr 2020 12:11:48 -0700 Subject: [PATCH] enable classes, bump all version to 1.2, add git hub pages --- README.md | 54 +++++++++++++++++++++++++++----- dist/HappyHistogram.min.js | 2 +- example/index.html | 64 ++++++++++++++++++++++++++++++++++++-- src/HappyHistogram.js | 26 +++++++++++++--- 4 files changed, 130 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index cc5d292..e17f921 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ Happy Histogram (HH) is a simple JavaScript library for generating a client side histogram showing activity across a year. This JavaScript -library uses no 3rd party libraries (eg D3 or jQuery) and is barely over 900 _bytes_ in size. +library uses no 3rd party libraries (eg D3 or jQuery) and is barely over 1000 _bytes_ in size. The DOM elements used are only HTML (floating DIVs) and not any fancy Canvas or SVG. The final histogram is very fast to render and is 100% responsive, looking good on both mobile @@ -13,8 +13,10 @@ and desktop browsers. ## Example -PCH's [Calendar of Internet Governance Meetings](https://pch.net/meetings). This was -the inception page for this library: +This repo includes an example page which [you can view](https://packet-clearing-house.github.io/Happy-Histogram/example/). + +As well, see PCH's [Calendar of Internet Governance Meetings](https://pch.net/meetings). This was +the inception page for this library and looks like this: [![](./example/hh.png)](https://pch.net/meetings) @@ -40,20 +42,55 @@ So, I decided to roll my own! ``` 1. Define the HTML where you want to render your histogram (must be an ID): ``
`` -1. Declare your data set as a multi-dimentsional array, with one sub-array for each year. +1. Declare your data set as a multi-dimentsional array, with one sub-array for each month. ``` 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], - ... - [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] + [1,0,0,0,0,0,0,0,0,0,0,1,0,1,0], + [2,0,0,0,0,0,0,0,0,0,0,1,0,1,0], + [1,0,0,0,0,0,0,0,0,0,0,1,0,1,0], + [1,0,0,0,0,0,0,0,0,0,0,1,0,1,0], + [3,0,0,0,0,0,2,0,0,0,0,1,0,1,0], + [1,0,0,0,0,0,0,0,0,0,0,1,0,1,0], + [1,0,0,0,0,0,0,0,0,0,0,1,0,1,0], + [4,0,0,0,1,0,0,0,0,0,0,1,0,1,0], + [1,0,0,0,0,0,0,0,0,0,0,1,0,1,0], + [1,0,0,0,0,0,0,0,0,0,0,1,0,1,0], + [3,0,0,0,0,2,0,0,0,0,0,1,0,1,0], + [1,0,0,0,0,1,0,0,0,0,0,0,0,1,0] ]; ``` Careful! Garbage in, garbage out - HH will not validate any values, only accepts - ints (no floats!) and will not pad for missing or ``NULL`` days. + ints or floats and will not pad for missing or ``NULL`` days. 1. Call HH specifying target, data and CSS color: ``HappyHistogram('histogram', Year);`` . Your target must be an ID, not a class. +### Per Value Class + +If you want to be able to have different colors for different values, you can uses classes. +Instead of passing in a value, you pass in an array. The zeroth element is the value +and the first element is the class name. To get multiple class names, pass in the first element +as a string with spaces between each class: + +``` +var Year = [ + [[1,'foo'],[2,'bar'],[3,'bash']], + [[4,'bar'],[2,'bar'],[3,'bash']], + [[2,'bash'],[2,'bar'],[3,'bash']], + [[2,'bash'],[2,'bash'],[3,'bash']], + [[2,'foo'],[2,'foo'],[3,'foo']], + [[2,'bash'],[2,'foo'],[3,'foo']], + [[2,'foo'],[2,'bash'],[3,'foo']], + [[3,'bar'],[2,'foo'],[3,'bash']], + [[2,'foo'],[5,'bar extra-secret-class'],[3,'foo']], + [[2,'foo'],[2,'foo'],[3,'foo']], + [[4,'foo'],[3,'foo'],[3,'bar']], + [[2,'bar'],[2,'foo'],[3,'foo']], +]; +``` + +Note that HH does some limited validation to ensure that array elements are correctly populated. + ### Advanced **Bar Color** - Pass in the CSS value when you @@ -79,6 +116,7 @@ MIT ## Version History +- 1.2 - 04/09/2020: Enable values to be arrays so classes can passed for each value - 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 index 7703e48..87c2303 100644 --- a/dist/HappyHistogram.min.js +++ b/dist/HappyHistogram.min.js @@ -1 +1 @@ -function HappyHistogram(n,t,i){var o=0,h=100,c,f="",s=0,r=0,u=0,e=0,l="#043864",a=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];for(i!=undefined&&(l=i),f+="",r=0;rs&&(s=t[r][u]);for(f+='
'+s+'
 
',r=0;r
',u=0;u0?(o=Math.ceil(e/s*50)*2,h=100-o):(o=0,h=100),f+='
 
 
';f+='
'+a[r]+"
"}f+='

',document.getElementById(n).innerHTML=f}; \ No newline at end of file +/* HH v1.2 */ function HappyHistogram(i,l,s){var a,t,d=0,e="",v=0,r=0,o=0,n=0,c="#043864",y=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];for(null!=s&&(c=s),e+="",r=0;rv&&(v=val);for(e+='
'+v+'
 
',r=0;r
',o=0;o
 
 
';e+='
'+y[r]+"
"}e+='
',document.getElementById(i).innerHTML=e} \ No newline at end of file diff --git a/example/index.html b/example/index.html index 13fbd4e..6603c33 100644 --- a/example/index.html +++ b/example/index.html @@ -3,17 +3,17 @@ - + -

Happy Histogram 1.1

+

Happy Histogram 1.2

Commits made per day

+ +
+
Bash
+
Foo
+
Bar
+
Highest Value (Bar)
+
+ +

3 values of both floats and ints per month, hover effect on just data bar (bottom) and different color.

+ diff --git a/src/HappyHistogram.js b/src/HappyHistogram.js index 9030cf4..7a61400 100644 --- 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.1 + * Version 1.2 * @param targetId - ID in DOM to render into * @param monthData array of arrays - with int per day * @param color string - CSS color @@ -11,6 +11,7 @@ function HappyHistogram (targetId, monthData, color ) { var bottom = 0; var top = 100; var width; + var extraClass; var finalHTML = ''; var max = 0; var i = 0; @@ -28,7 +29,12 @@ function HappyHistogram (targetId, monthData, color ) { // figure max for (i = 0; i < monthData.length; i++) { for (i2 = 0; i2 < monthData[i].length; i2++) { - if (monthData[i][i2] > max) max = monthData[i][i2]; + if (Array.isArray(monthData[i][i2])){ + val = monthData[i][i2][0]; + } else { + val = monthData[i][i2]; + } + if (val > max) max = val; } } @@ -46,8 +52,20 @@ function HappyHistogram (targetId, monthData, color ) { '
'; for (i2 = 0; i2 < monthData[i].length; i2++) { + // init extra class to be empty at the start of each value + extraClass = ''; + // calculate day height percentages - day = monthData[i][i2]; + if (Array.isArray(monthData[i][i2])){ + if (monthData[i][i2][0] !== undefined) { + day = monthData[i][i2][0]; + if(monthData[i][i2][1] !== undefined) { + extraClass = monthData[i][i2][1]; + } + } + } else { + day = monthData[i][i2]; + } if (day < 0){ day = 0; } @@ -62,7 +80,7 @@ function HappyHistogram (targetId, monthData, color ) { finalHTML += '
' + '
 
' + - '
 
' + + '
 
' + '
'; }