Merge pull request DKirwan#25 from peterdesmet/startdate-and-max

Fix tooltip position, allow to set max and startDate
JoabMendes · Jan 30, 2017 · ea699b6 · ea699b6
2 parents 391d81d + 09e24a8
commit ea699b6
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -18,6 +18,8 @@ A [d3.js](https://d3js.org/) heatmap representing time series data. Inspired by
 |:------------- |:-------------|:-----:|:-----:|
 | data | Chart data | none | yes |
 | selector | DOM selector to attach the chart to | body | no |
+| max | Maximum count | max found in data | no |
+| startDate | Date to start heatmap at | 1 year ago | no |
 | colorRange | Minimum and maximum chart gradient colors | ['#D8E6E7', '#218380'] | no |
 | tooltipEnabled | Option to render a tooltip | true | no |
 | tooltipUnit | Unit to render on the tooltip | 'contributions' | no |

diff --git a/src/calendar-heatmap.css b/src/calendar-heatmap.css
@@ -2,11 +2,8 @@ text.month-name,
 text.calendar-heatmap-legend-text,
 text.day-initial {
   font-size: 10px;
-  fill: #aaaaaa;
-  font-family: Helvetica, arial, 'Open Sans', sans-serif
-}
-.day-cell {
-  border: 1px solid gray;
+  fill: inherit;
+  font-family: Helvetica, arial, 'Open Sans', sans-serif;
 }
 rect.day-cell:hover {
   stroke: #555555;

diff --git a/src/calendar-heatmap.js b/src/calendar-heatmap.js
@@ -12,7 +12,9 @@ function calendarHeatmap() {
   var MONTH_LABEL_PADDING = 6;
   var now = moment().endOf('day').toDate();
   var yearAgo = moment().startOf('day').subtract(1, 'year').toDate();
+  var startDate = null;
   var data = [];
+  var max = null;
   var colorRange = ['#D8E6E7', '#218380'];
   var tooltipEnabled = true;
   var tooltipUnit = 'contribution';
@@ -27,12 +29,25 @@ function calendarHeatmap() {
     return chart;
   };
 
+  chart.max = function (value) {
+    if (!arguments.length) { return max; }
+    max = value;
+    return chart;
+  };
+
   chart.selector = function (value) {
     if (!arguments.length) { return selector; }
     selector = value;
     return chart;
   };
 
+  chart.startDate = function (value) {
+    if (!arguments.length) { return startDate; }
+    yearAgo = value;
+    now = moment(value).endOf('day').add(1, 'year').toDate();
+    return chart;
+  };
+
   chart.colorRange = function (value) {
     if (!arguments.length) { return colorRange; }
     colorRange = value;
@@ -70,7 +85,7 @@ function calendarHeatmap() {
     var dateRange = d3.time.days(yearAgo, now); // generates an array of date objects within the specified range
     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
     var firstDate = moment(dateRange[0]);
-    var max = d3.max(chart.data(), function (d) { return d.count; }); // max data value
+    if (max === null) { max = d3.max(chart.data(), function (d) { return d.count; }); } // max data value
 
     // color range
     var color = d3.scale.linear()
@@ -84,6 +99,7 @@ function calendarHeatmap() {
 
     function drawChart() {
       var svg = d3.select(chart.selector())
+        .style('position', 'relative')
         .append('svg')
         .attr('width', width)
         .attr('class', 'calendar-heatmap')
@@ -122,7 +138,7 @@ function calendarHeatmap() {
             .html(tooltipHTMLForDate(d))
             .style('left', function () { return Math.floor(i / 7) * SQUARE_LENGTH + 'px'; })
             .style('top', function () {
-              return formatWeekday(d.getDay()) * (SQUARE_LENGTH + SQUARE_PADDING) + MONTH_LABEL_PADDING * 3 + 'px';
+              return formatWeekday(d.getDay()) * (SQUARE_LENGTH + SQUARE_PADDING) + MONTH_LABEL_PADDING * 2 + 'px';
             });
         })
         .on('mouseout', function (d, i) {