Enabled advanced tooltip text configuration and tooltip date format

JoabMendes · Oct 2, 2018 · 0527fff · 0527fff
1 parent 337b431
commit 0527fff
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 4 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.idea
diff --git a/README.md b/README.md
@@ -14,6 +14,9 @@ A [d3.js](https://d3js.org/) heatmap representing time series data. Inspired by
 | 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, can be object for pluralization control | 'contributions' | no |
+| tooltipTextEnabled | Allows use of tooltip texts object | false | no |
+| tooltipText | Specifies an object with 3 text properties to use on the tooltips: singular, plural and none. Each property should be a string containing the keys '{count}' and '{date}' to be replaced by the item count and the date string | `{plural: '{count} contributions on {date}', singular: '{count} contribution on {date}', none: 'No contributions on {date}'}` | no |
+| tooltipDateFormat | A valid [moment.js date string format](https://momentjs.com/docs/#/displaying/format/) to be displayed on the tooltips | 'ddd, MMM Do YYYY' | no |
 | legendEnabled | Option to render a legend | true | no |
 | onClick | callback function on day click events (see example below) | null | no |
 | locale | Object to translate every word used, except for tooltipUnit | see below | no |
@@ -80,6 +83,21 @@ var chart1 = calendarHeatmap()
 chart1();  // render the chart
 ```
 
+or using tooltipTextEnabled (Overwrites any configuration done for `tooltipUnit`):
+
+```javascript
+var chart1 = calendarHeatmap()
+     .data(chartData).
+     tooltipTextEnabled(true)
+     .tooltipText({
+        plural: 'You sold {count} items on {date}',
+        singular: 'You sold {count} item on {date}',
+        none: 'No item was sold on {date}'
+     })
+     .tooltipDateFormat('MM/DD/YYYY');
+chart1();  // render the chart
+```
+
 ## Pull Requests and issues
 
 ...are very welcome!
diff --git a/example/_v4.html b/example/_v4.html
@@ -24,7 +24,13 @@
     var heatmap = calendarHeatmap()
       .data(chartData)
       .selector('.container')
-      .tooltipEnabled(true)
+      .tooltipTextEnabled(true)
+       .tooltipText({
+           plural: 'You sold {count} items on {date}',
+           singular: 'You sold {count} item on {date}',
+           none: 'No item was sold on {date}'
+       })
+        .tooltipDateFormat('MM/DD/YYYY')
       .colorRange(['#f4f7f7', '#79a8a9'])
       .onClick(function (data) {
         console.log('data', data);

diff --git a/src/calendar-heatmap.js b/src/calendar-heatmap.js
@@ -28,6 +28,13 @@ function calendarHeatmap() {
     Less: 'Less',
     More: 'More'
   };
+  var tooltipTextEnabled = false;
+  var tooltipText = {
+     singular: '{count} ' + tooltipUnit + ' ' + locale.on + ' {date}',
+     plural: '{count} ' + tooltipUnit + 's ' + locale.on + ' {date}',
+     none: locale.No + ' ' + tooltipUnit + 's ' + locale.on + ' {date}',
+  };
+  var tooltipDateFormat = 'ddd, MMM Do YYYY';
   var v = Number(d3.version.split('.')[0]);
 
   // setters and getters
@@ -101,6 +108,35 @@ function calendarHeatmap() {
     return chart;
   };
 
+  chart.tooltipTextEnabled = function (value) {
+     if (!arguments.length) { return tooltipTextEnabled; }
+     tooltipTextEnabled = value;
+     return chart;
+  };
+
+  chart.tooltipText = function(value) {
+    if (!arguments.length) { return tooltipText; }
+    if (value.hasOwnProperty('singular') && value.hasOwnProperty('plural') && value.hasOwnProperty('none')) {
+      var singularHasKeys = (value.singular.indexOf('{count}') !== -1 && value.singular.indexOf('{date}') !== -1);
+      var pluralHasKeys = (value.plural.indexOf('{count}') !== -1 && value.plural.indexOf('{date}') !== -1);
+      if (singularHasKeys && pluralHasKeys) {
+        tooltipText = value;
+        return chart;
+      }
+      console.error('The plural and singular properties need two key as \'{count}\' and \'{date}\'');
+      return tooltipText;
+    } else {
+      console.error('tooltipText option needs 3 properties: \'plural\',\'singular\' and \'none\' texts');
+      return tooltipText;
+    }
+  };
+
+  chart.tooltipDateFormat = function (value) {
+    if (!arguments.length) { return tooltipDateFormat; }
+    tooltipDateFormat = value;
+    return chart;
+  };
+
   function chart() {
 
     d3.select(chart.selector()).selectAll('svg.calendar-heatmap').remove(); // remove the existing chart, if it exists
@@ -157,7 +193,7 @@ function calendarHeatmap() {
         });
       }
 
-      if (chart.tooltipEnabled()) {
+      if (chart.tooltipEnabled() || chart.tooltipTextEnabled()) {
         (v === 3 ? enterSelection : enterSelection.merge(dayRects)).on('mouseover', function(d, i) {
           tooltip = d3.select(chart.selector())
             .append('div')
@@ -252,9 +288,20 @@ function calendarHeatmap() {
     }
 
     function tooltipHTMLForDate(d) {
-      var dateStr = moment(d).format('ddd, MMM Do YYYY');
+      var dateStr = moment(d).format(tooltipDateFormat);
       var count = countForDate(d);
-      return '<span><strong>' + (count ? count : locale.No) + ' ' + pluralizedTooltipUnit(count) + '</strong> ' + locale.on + ' ' + dateStr + '</span>';
+      var text = '';
+      if (tooltipTextEnabled) {
+        if (count !== 0) {
+            text = count > 1 ? tooltipText.plural : tooltipText.singular;
+        } else {
+            text = tooltipText.none;
+        }
+        text = text.replace('{count}', count).replace('{date}', dateStr);
+      } else {
+        text = '<strong>' + (count ? count : locale.No) + ' ' + pluralizedTooltipUnit(count) + '</strong> ' + locale.on + ' ' + dateStr;
+      }
+      return '<span>' + text + '</span>';
     }
 
     function countForDate(d) {