[Heatmap] Localize Tooltip Date formatting

README.md

@@ -44,7 +44,7 @@
 
   and include in your project:
   ```js
-  import Chart from "frappe-charts/dist/frappe-charts.min.esm"
+  import Chart from "frappe-charts"
   ```
 
 * ...or include within your HTML
@@ -63,11 +63,11 @@ const data = {
     ],
     datasets: [
         {
-            title: "Some Data", type: "bar",
+            name: "Some Data", type: "bar",
             values: [25, 40, 30, 35, 8, 52, 17, -4]
         },
         {
-            title: "Another Set", type: "line",
+            name: "Another Set", type: "line",
             values: [25, 50, -10, 15, 18, 32, 27, 14]
         }
     ]

dist/frappe-charts.esm.js

@@ -288,10 +288,6 @@ class SvgTip {
 	}
 }
 
-/**
- * Returns the value of a number upto 2 decimal places.
- * @param {Number} d Any number
- */
 function floatTwo(d) {
 	return parseFloat(d.toFixed(2));
 }
@@ -2656,6 +2652,7 @@ class Heatmap extends BaseChart {
 		this.type = 'heatmap';
 
 		this.countLabel = options.countLabel || '';
+		this.dateFormat = options.dateFormat || { year: 'numeric', month: 'short', day: 'numeric' };
 
 		let validStarts = ['Sunday', 'Monday'];
 		let startSubDomain = validStarts.includes(options.startSubDomain)
@@ -2790,17 +2787,18 @@ class Heatmap extends BaseChart {
 				if(daySquares.includes(daySquare)) {
 
 					let count = daySquare.getAttribute('data-value');
-					let dateParts = daySquare.getAttribute('data-date').split('-');
-
-					let month = getMonthName(parseInt(dateParts[1])-1, true);
+					let date = new Date(daySquare.getAttribute('data-date'));
 
 					let gOff = this.container.getBoundingClientRect(), pOff = daySquare.getBoundingClientRect();
 
 					let width = parseInt(e.target.getAttribute('width'));
 					let x = pOff.left - gOff.left + width/2;
 					let y = pOff.top - gOff.top;
 					let value = count + ' ' + this.countLabel;
-					let name = ' on ' + month + ' ' + dateParts[0] + ', ' + dateParts[2];
+					let name = ' on ' + date.toLocaleDateString(
+						window.navigator.location || 'en-US',
+						this.dateFormat
+					);
 
 					this.tip.setValues(x, y, {name: name, value: value, valueFirst: 1}, []);
 					this.tip.showTip();

docs/assets/js/index.js

@@ -295,6 +295,7 @@ let heatmapArgs = {
 	discreteDomains: 1,
 	countLabel: 'Level',
 	colors: HEATMAP_COLORS_BLUE,
+	dateFormat: { month: 'numeric', day: '2-digit' },
 	legendScale: [0, 1, 2, 4, 5]
 };
 let heatmapChart = new Chart("#chart-heatmap", heatmapArgs);

docs/index.html

@@ -221,6 +221,11 @@ <h6 class="margin-vertical-rem">
       end: endDate      // Date objects
     },
     countLabel: 'Level',
+    dateFormat: { month: '2-digit', day: '2-digit' },
+                  // Formats date in tooltip based on the end user's browser language and locale
+                  // This value is used as the options parameter in Date.prototype.toLocaleDateString() 
+                  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
+                  // default: { year: 'numeric', month: 'short', day: 'numeric' }
     discreteDomains: 0  // default: 1
     colors: ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'],
                   // Set of five incremental colors,
@@ -315,7 +320,7 @@ <h6 class="margin-vertical-rem">Install</h6>
               <p class="step-explain">And include it in your project</p>
               <pre><code class="hljs javascript">  import { Chart } from "frappe-charts"</code></pre>
               <p class="step-explain">... or include it directly in your HTML</p>
-              <pre><code class="hljs html">  &lt;script src="https://unpkg.com/frappe-charts@1.0.0"&gt;&lt;/script&gt;</code></pre>
+              <pre><code class="hljs html">  &lt;script src="https://unpkg.com/frappe-charts@1.1.0"&gt;&lt;/script&gt;</code></pre>
 
             </div>
           </div>

src/js/charts/Heatmap.js

@@ -1,7 +1,7 @@
 import BaseChart from './BaseChart';
 import { getComponent } from '../objects/ChartComponents';
 import { makeText, heatSquare } from '../utils/draw';
-import { DAY_NAMES_SHORT, addDays, areInSameMonth, getLastDateInMonth, setDayToSunday, getYyyyMmDd, getWeeksBetween, getMonthName, clone,
+import { DAY_NAMES_SHORT, addDays, areInSameMonth, getLastDateInMonth, setDayToSunday, getYyyyMmDd, getWeeksBetween, clone,
 	NO_OF_MILLIS, NO_OF_YEAR_MONTHS, NO_OF_DAYS_IN_WEEK } from '../utils/date-utils';
 import { calcDistribution, getMaxCheckpoint } from '../utils/intervals';
 import { getExtraHeight, getExtraWidth, HEATMAP_DISTRIBUTION_SIZE, HEATMAP_SQUARE_SIZE,
@@ -17,6 +17,7 @@ export default class Heatmap extends BaseChart {
 		this.type = 'heatmap';
 
 		this.countLabel = options.countLabel || '';
+		this.dateFormat = options.dateFormat || { year: 'numeric', month: 'short', day: 'numeric' };
 
 		let validStarts = ['Sunday', 'Monday'];
 		let startSubDomain = validStarts.includes(options.startSubDomain)
@@ -151,17 +152,18 @@ export default class Heatmap extends BaseChart {
 				if(daySquares.includes(daySquare)) {
 
 					let count = daySquare.getAttribute('data-value');
-					let dateParts = daySquare.getAttribute('data-date').split('-');
-
-					let month = getMonthName(parseInt(dateParts[1])-1, true);
+					let date = new Date(daySquare.getAttribute('data-date'));
 
 					let gOff = this.container.getBoundingClientRect(), pOff = daySquare.getBoundingClientRect();
 
 					let width = parseInt(e.target.getAttribute('width'));
 					let x = pOff.left - gOff.left + width/2;
 					let y = pOff.top - gOff.top;
 					let value = count + ' ' + this.countLabel;
-					let name = ' on ' + month + ' ' + dateParts[0] + ', ' + dateParts[2];
+					let name = ' on ' + date.toLocaleDateString(
+						window.navigator.location || 'en-US',
+						this.dateFormat
+					);
 
 					this.tip.setValues(x, y, {name: name, value: value, valueFirst: 1}, []);
 					this.tip.showTip();