Merge pull request #5 from Krypternite/master

Merging with upstream changes
Teamie · May 30, 2019 · 13c3fa3 · 13c3fa3
2 parents 6964155 + 1d9231d
commit 13c3fa3
Show file tree

Hide file tree

Showing 7 changed files with 235 additions and 70 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,4 @@
+
 # D3 Calendar Heatmap
 
 This repo is forked from [calendar-heatmap](https://github.com/DKirwan/calendar-heatmap), with a few additional features and modificaitons:
@@ -27,12 +28,30 @@ A [d3.js](https://d3js.org/) heatmap representing time series data. Inspired by
 | data | Chart data | none | yes |
 | dateRange | Array of continuous dates from start to end (see example below) | a year ago to now | no |
 | selector | DOM selector to attach the chart to | body | no |
+| 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, can be object for pluralization control | 'contributions' | no |
 | legendEnabled | Option to render a legend | true | no |
 | onClick | callback function on day click events (see example below) | null | no |
 | onMouseOver | callback function on day mouseover events (see example below) | null | no |
 | onMouseOut | callback function on day mouseout events (see example below) | null | no |
+| locale | Object to translate every word used, except for tooltipUnit | see below | no |
+
+### Default locale object
+
+```javascript
+{
+    months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    No: 'No',
+    on: 'on',
+    Less: 'Less',
+    More: 'More'
+}
+```
 
 ## Dependencies
 
@@ -77,6 +96,21 @@ var chart1 = calendarHeatmap()
 chart1();  // render the chart
 ```
 
+### control unit pluralization
+
+```javascript
+var chart1 = calendarHeatmap()
+              .data(chartData)
+              .tooltipUnit(
+                [
+                  {min: 0, unit: 'contribution'},
+                  {min: 1, max: 1, unit: 'contribution'},
+                  {min: 2, max: 'Infinity', unit: 'contributions'}
+                ]
+              );
+chart1();  // render the chart
+```
+
 ## Pull Requests and issues
 
 ...are very welcome!
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "calendar-heatmap",
-  "version": "0.3.3",
+  "version": "0.4.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/_v3.html b/example/_v3.html
@@ -0,0 +1,33 @@
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>D3.js Calendar Heatmap</title>
+    <link rel="stylesheet" type="text/css" href="../src/calendar-heatmap.css">
+  </head>
+  <body>
+    <div class="container"></div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js" charset="utf-8"></script>
+    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="../src/calendar-heatmap.js"></script>
+    <script type="text/javascript">
+      var now = moment().endOf('day').toDate();
+      var yearAgo = moment().startOf('day').subtract(1, 'year').toDate();
+      var chartData = d3.time.days(yearAgo, now).map(function (dateElement) {
+        return {
+          date: dateElement,
+          count: (dateElement.getDay() !== 0 && dateElement.getDay() !== 6) ? Math.floor(Math.random() * 60) : Math.floor(Math.random() * 10)
+        };
+      });
+
+      var heatmap = calendarHeatmap()
+                      .data(chartData)
+                      .selector('.container')
+                      .tooltipEnabled(true)
+                      .colorRange(['#f4f7f7', '#79a8a9'])
+                      .onClick(function (data) {
+                        console.log('data', data);
+                      });
+      heatmap();  // render the chart
+    </script>
+  </body>
+</html>
diff --git a/example/_v4.html b/example/_v4.html
@@ -0,0 +1,36 @@
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>D3.js v4 Calendar Heatmap</title>
+  <link rel="stylesheet" type="text/css" href="../src/calendar-heatmap.css">
+</head>
+
+<body>
+  <div class="container"></div>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js" charset="utf-8"></script>
+  <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+  <script src="../src/calendar-heatmap.js"></script>
+  <script type="text/javascript">
+    var now = moment().endOf('day').toDate();
+    var yearAgo = moment().startOf('day').subtract(1, 'year').toDate();
+    var chartData = d3.timeDays(yearAgo, now).map(function (dateElement) {
+      return {
+        date: dateElement,
+        count: (dateElement.getDay() !== 0 && dateElement.getDay() !== 6) ? Math.floor(Math.random() * 60) : Math.floor(Math.random() * 10)
+      };
+    });
+
+    var heatmap = calendarHeatmap()
+      .data(chartData)
+      .selector('.container')
+      .tooltipEnabled(true)
+      .colorRange(['#f4f7f7', '#79a8a9'])
+      .onClick(function (data) {
+        console.log('data', data);
+      });
+    heatmap();  // render the chart
+  </script>
+</body>
+
+</html>
diff --git a/example/index.html b/example/index.html
@@ -1,33 +1,16 @@
 <html>
-  <head>
-    <meta charset="utf-8">
-    <title>D3.js Calendar Heatmap</title>
-    <link rel="stylesheet" type="text/css" href="../src/calendar-heatmap.css">
-  </head>
-  <body>
-    <div class="container"></div>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js" charset="utf-8"></script>
-    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-    <script src="../src/calendar-heatmap.js"></script>
-    <script type="text/javascript">
-      var now = moment().endOf('day').toDate();
-      var yearAgo = moment().startOf('day').subtract(1, 'year').toDate();
-      var chartData = d3.time.days(yearAgo, now).map(function (dateElement) {
-        return {
-          date: dateElement,
-          count: (dateElement.getDay() !== 0 && dateElement.getDay() !== 6) ? Math.floor(Math.random() * 60) : Math.floor(Math.random() * 10)
-        };
-      });
 
-      var heatmap = calendarHeatmap()
-                      .data(chartData)
-                      .selector('.container')
-                      .tooltipEnabled(true)
-                      .colorRange(['#f4f7f7', '#79a8a9'])
-                      .onClick(function (data) {
-                        console.log('data', data);
-                      });
-      heatmap();  // render the chart
-    </script>
-  </body>
-</html>
+<head>
+  <meta charset="utf-8">
+  <title>D3.js Calendar Heatmap</title>
+  <link rel="stylesheet" type="text/css" href="../src/calendar-heatmap.css">
+</head>
+
+<body>
+  <h1>v3</h1>
+  <iframe src="_v3.html" frameborder="0" width="1000" height="200"></iframe>
+  <h1>v4</h1>
+  <iframe src="_v4.html" frameborder="0" width="1000" height="200"></iframe>
+</body>
+
+</html>
diff --git a/src/calendar-heatmap.css b/src/calendar-heatmap.css
@@ -38,3 +38,6 @@ rect.day-cell:hover {
 .day-cell-tooltip > span {
   font-family: Helvetica, arial, 'Open Sans', sans-serif
 }
+.calendar-heatmap {
+  box-sizing: initial;
+}