[Heatmap] Localize Tooltip Dates

dist/frappe-charts.esm.js

@@ -298,10 +298,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));
 }
@@ -2704,6 +2700,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)
@@ -2838,17 +2835,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();
@@ -3677,7 +3675,6 @@ class AxisChart extends BaseChart {
 	// removeDataPoint(index = 0) {}
 }
 
-// import MultiAxisChart from './charts/MultiAxisChart';
 const chartTypes = {
 	bar: AxisChart,
 	line: AxisChart,

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,

src/js/charts/Heatmap.js

@@ -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();