Merge branch 'hotfix/0.2.1' into develop

JoabMendes · Mar 22, 2016 · 63ce1ed · 63ce1ed
2 parents 3c905ee + 24e4ad4
commit 63ce1ed
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 9,570 deletions.
diff --git a/README.md b/README.md
@@ -3,9 +3,9 @@ A [d3.js](https://d3js.org/) heatmap representing time series data. Inspired by
 
 ![Reusable D3.js Calendar Heatmap chart](https://raw.githubusercontent.com/DKirwan/calendar-heatmap/develop/example/thumbnail.png)
 
-## TODO's
+## TODO
 
-* Enable/disable tooltip
+* ~~Enable/disable tooltip~~
 * Editing of tooltip text
 * ~~Editing of the cell gradient colours~~
 * Configuration of the start/end dates
@@ -20,6 +20,7 @@ A [d3.js](https://d3js.org/) heatmap representing time series data. Inspired by
 | data | Path to data to render on the chart | none | yes |
 | selector | DOM selector to attach the chart to | body | no |
 | colorRange | Array of colors to use as a gradient in the chart | ['#D8E6E7', '#218380'] | no |
+| tooltipEnabled | Whether it shows a tooltip or not | true | no |
 
 ## Dependencies
 
@@ -44,7 +45,8 @@ var chartData = [{
 var chart1 = calendarHeatmap()
               .data(chartData)
               .selector('#chart-one')
-              .colorRange(['#D8E6E7', '#218380']);
+              .colorRange(['#D8E6E7', '#218380'])
+              .tooltipEnabled(true);
 chart1();  // render the chart
 ```
 

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "calendar-heatmap",
-  "version": "0.1.6",
+  "version": "0.2.1",
   "homepage": "https://github.com/DKirwan/calendar-heatmap",
   "description": "A d3.js heatmap representing time series data. Inspired by Github's contribution chart",
   "authors": [

diff --git a/example/index.html b/example/index.html
@@ -23,7 +23,7 @@
       var heatmap = calendarHeatmap()
                       .data(chartData)
                       .selector('.container')
-                      .colorRange(['#FF3333', '#33FF77']);
+                      .tooltipEnabled(true);
       heatmap();  // render the chart
     </script>
   </body>

diff --git a/src/calendar-heatmap.js b/src/calendar-heatmap.js
@@ -13,6 +13,7 @@ function calendarHeatmap() {
   var yearAgo = moment().startOf('day').subtract(1, 'year').toDate();
   var data = [];
 	var colorRange = ['#D8E6E7', '#218380'];
+  var tooltipEnabled = true;
 
   // setters and getters
   chart.data = function (value) {
@@ -33,9 +34,15 @@ function calendarHeatmap() {
     return chart;
   };
 
+  chart.tooltipEnabled = function (value) {
+    if (!arguments.length) { return tooltipEnabled; }
+    tooltipEnabled = value;
+    return chart;
+  };
+
   function chart() {
 
-    d3.selectAll('.calendar-heatmap').remove(); // remove the existing chart, if it exists
+    d3.select(chart.selector()).selectAll('svg.calendar-heatmap').remove(); // remove the existing chart, if it exists
 
     var dateRange = d3.time.days(yearAgo, now);
     var monthRange = d3.time.months(moment(yearAgo).startOf('month').toDate(), now); // it ignores the first month if the 1st date is after the start of the month
@@ -73,18 +80,21 @@ function calendarHeatmap() {
           var result = cellDate.week() - firstDate.week() + (firstDate.weeksInYear() * (cellDate.weekYear() - firstDate.weekYear()));
           return result * (SQUARE_LENGTH + SQUARE_PADDING);
         })
-        .attr('y', function (d, i) { return MONTH_LABEL_PADDING + d.getDay() * (SQUARE_LENGTH + SQUARE_PADDING); })
-        .on('mouseover', function (d, i) {
-          tooltip = d3.select('body')
-            .append('div')
-            .attr('class', 'cell-tooltip')
-            .html(tooltipHTMLForDate(d))
-            .style('left', function () { return Math.floor(i / 7) * SQUARE_LENGTH; })
-            .style('top', function () { return d.getDay() * (SQUARE_LENGTH + SQUARE_PADDING) + MONTH_LABEL_PADDING * 3; });
+        .attr('y', function (d, i) { return MONTH_LABEL_PADDING + d.getDay() * (SQUARE_LENGTH + SQUARE_PADDING); });
+
+      if(tooltipEnabled) {
+        dayRects.on('mouseover', function (d, i) {
+            tooltip = d3.select('body')
+              .append('div')
+              .attr('class', 'cell-tooltip')
+              .html(tooltipHTMLForDate(d))
+              .style('left', function () { return Math.floor(i / 7) * SQUARE_LENGTH; })
+              .style('top', function () { return d.getDay() * (SQUARE_LENGTH + SQUARE_PADDING) + MONTH_LABEL_PADDING * 3; });
         })
         .on('mouseout', function (d, i) {
-          tooltip.remove();
+            tooltip.remove();
         });
+      }
 
       dayRects.exit().remove();
       var monthLabels = svg.selectAll('.month')
@@ -122,7 +132,7 @@ function calendarHeatmap() {
       var dateStr = moment(d).format('ddd, MMM Do YYYY');
       var count = 0;
       var match = chart.data().find(function (element, index) {
-        return moment(element.date).isSame(d);
+        return moment(element.date).isSame(d, 'day');
       });
       if (match) {
         count = match.count;