[heatmap] render domains

dist/frappe-charts.esm.js

@@ -1854,13 +1854,15 @@ let componentConfigs = {
 
 			data.cols.map(week => {
 				week.map((day, i) => {
-					let data = {
-						'data-date': day.YyyyMmDd,
-						'data-value': day.dataValue,
-						'data-day': i
-					};
-					let square = heatSquare('day', x, y, squareSize, day.fill, data);
-					this.serializedSubDomains.push(square);
+					if(day.fill) {
+						let data = {
+							'data-date': day.yyyyMmDd,
+							'data-value': day.dataValue,
+							'data-day': i
+						};
+						let square = heatSquare('day', x, y, squareSize, day.fill, data);
+						this.serializedSubDomains.push(square);
+					}
 					y += rowHeight;
 				});
 				y = 0;
@@ -2514,7 +2516,6 @@ class Heatmap extends BaseChart {
 			data.start = new Date();
 			data.start.setFullYear( data.start.getFullYear() - 1 );
 		}
-		console.log(data.start);
 		if(!data.end) { data.end = new Date(); }
 		data.dataPoints = data.dataPoints || {};
 
@@ -2547,8 +2548,6 @@ class Heatmap extends BaseChart {
 	setupComponents() {
 		let s = this.state;
 
-		console.log(s.domainConfigs);
-
 		let componentConfigs = s.domainConfigs.map((config, i) => [
 			'heatDomain',
 			{
@@ -2558,19 +2557,22 @@ class Heatmap extends BaseChart {
 				squareSize: HEATMAP_SQUARE_SIZE,
 				xTranslate: s.domainConfigs
 					.filter((config, j) => j < i)
-					.map(config => config.cols.length)
+					.map(config => config.cols.length - 1)
 					.reduce((a, b) => a + b, 0)
 					* COL_WIDTH
 			},
 			function() {
 				return s.domainConfigs[i];
 			}.bind(this)
+
 		]);
 
+		// console.log(s.domainConfigs)
+
 		this.components = new Map(componentConfigs
-			.map(args => {
+			.map((args, i) => {
 				let component = getComponent(...args);
-				return [args[0], component];
+				return [args[0] + '-' + i, component];
 			}));
 	}
 
@@ -2649,12 +2651,13 @@ class Heatmap extends BaseChart {
 			const col = this.getCol(startOfWeek, month);
 			cols.push(col);
 
-			startOfWeek = new Date(col[NO_OF_DAYS_IN_WEEK - 1].dateStr);
+			startOfWeek = new Date(col[NO_OF_DAYS_IN_WEEK - 1].yyyyMmDd);
 			addDays(startOfWeek, 1);
 		}
 
 		if(startOfWeek.getDay() === this.startSubDomainIndex) {
-			cols.push(new Array(NO_OF_DAYS_IN_WEEK).fill(0));
+			addDays(startOfWeek, 1);
+			cols.push(this.getCol(startOfWeek, month, true));
 		}
 
 		domainConfig.cols = cols;
@@ -2662,14 +2665,16 @@ class Heatmap extends BaseChart {
 		return domainConfig;
 	}
 
-	getCol(startDate, month) {
+	getCol(startDate, month, empty = false) {
 		// startDate is the start of week
 		let currentDate = clone(startDate);
 		let col = [];
 
 		for(var i = 0; i < NO_OF_DAYS_IN_WEEK; i++, addDays(currentDate, 1)) {
-			let config = 0;
-			if(currentDate.getMonth() === month) {
+			let config = {};
+			if(empty || currentDate.getMonth() !== month) {
+				config.yyyyMmDd = getYyyyMmDd(currentDate);
+			} else {
 				config = this.getSubDomainConfig(currentDate);
 			}
 			col.push(config);
@@ -2679,10 +2684,10 @@ class Heatmap extends BaseChart {
 	}
 
 	getSubDomainConfig(date) {
-		let YyyyMmDd = getYyyyMmDd(date);
-		let dataValue = this.data.dataPoints[YyyyMmDd];
+		let yyyyMmDd = getYyyyMmDd(date);
+		let dataValue = this.data.dataPoints[yyyyMmDd];
 		let config = {
-			YyyyMmDd: YyyyMmDd,
+			yyyyMmDd: yyyyMmDd,
 			dataValue: dataValue || 0,
 			fill: this.colors[getMaxCheckpoint(dataValue, this.state.distribution)]
 		};

docs/assets/js/index.js

@@ -270,7 +270,7 @@ let heatmap = new Chart("#chart-heatmap", {
 	colors: ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c']
 });
 
-console.log('heatmapData', Object.assign({}, heatmapData), heatmap);
+console.log('heatmapData', Object.assign({}, heatmapData));
 
 Array.prototype.slice.call(
 	document.querySelectorAll('.heatmap-mode-buttons button')

docs/assets/js/index.min.js

@@ -88,6 +88,7 @@ var SEC_IN_DAY = 86400;
 
 var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 
+// https://stackoverflow.com/a/11252167/6495043
 
 
 function clone(date) {
@@ -263,6 +264,8 @@ var heatmapData = {
 	end: end
 };
 
+// ================================================================================
+
 var c1 = document.querySelector("#chart-composite-1");
 var c2 = document.querySelector("#chart-composite-2");
 
@@ -519,7 +522,7 @@ var heatmap = new Chart("#chart-heatmap", {
 	colors: ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c']
 });
 
-console.log('heatmapData', Object.assign({}, heatmapData), heatmap);
+console.log('heatmapData', Object.assign({}, heatmapData));
 
 Array.prototype.slice.call(document.querySelectorAll('.heatmap-mode-buttons button')).map(function (el) {
 	el.addEventListener('click', function (e) {

src/js/charts/Heatmap.js

@@ -44,7 +44,6 @@ export default class Heatmap extends BaseChart {
 			data.start = new Date();
 			data.start.setFullYear( data.start.getFullYear() - 1 );
 		}
-		console.log(data.start);
 		if(!data.end) { data.end = new Date(); }
 		data.dataPoints = data.dataPoints || {};
 
@@ -77,8 +76,6 @@ export default class Heatmap extends BaseChart {
 	setupComponents() {
 		let s = this.state;
 
-		console.log(s.domainConfigs);
-
 		let componentConfigs = s.domainConfigs.map((config, i) => [
 			'heatDomain',
 			{
@@ -88,19 +85,22 @@ export default class Heatmap extends BaseChart {
 				squareSize: HEATMAP_SQUARE_SIZE,
 				xTranslate: s.domainConfigs
 					.filter((config, j) => j < i)
-					.map(config => config.cols.length)
+					.map(config => config.cols.length - 1)
 					.reduce((a, b) => a + b, 0)
 					* COL_WIDTH
 			},
 			function() {
 				return s.domainConfigs[i];
 			}.bind(this)
+
 		])
 
+		// console.log(s.domainConfigs)
+
 		this.components = new Map(componentConfigs
-			.map(args => {
+			.map((args, i) => {
 				let component = getComponent(...args);
-				return [args[0], component];
+				return [args[0] + '-' + i, component];
 			}));
 	}
 
@@ -180,12 +180,13 @@ export default class Heatmap extends BaseChart {
 			const col = this.getCol(startOfWeek, month);
 			cols.push(col);
 
-			startOfWeek = new Date(col[NO_OF_DAYS_IN_WEEK - 1].dateStr);
+			startOfWeek = new Date(col[NO_OF_DAYS_IN_WEEK - 1].yyyyMmDd);
 			addDays(startOfWeek, 1);
 		}
 
 		if(startOfWeek.getDay() === this.startSubDomainIndex) {
-			cols.push(new Array(NO_OF_DAYS_IN_WEEK).fill(0));
+			addDays(startOfWeek, 1);
+			cols.push(this.getCol(startOfWeek, month, true));
 		}
 
 		domainConfig.cols = cols;
@@ -193,14 +194,16 @@ export default class Heatmap extends BaseChart {
 		return domainConfig;
 	}
 
-	getCol(startDate, month) {
+	getCol(startDate, month, empty = false) {
 		// startDate is the start of week
 		let currentDate = clone(startDate);
 		let col = [];
 
 		for(var i = 0; i < NO_OF_DAYS_IN_WEEK; i++, addDays(currentDate, 1)) {
-			let config = 0;
-			if(currentDate.getMonth() === month) {
+			let config = {};
+			if(empty || currentDate.getMonth() !== month) {
+				config.yyyyMmDd = getYyyyMmDd(currentDate);
+			} else {
 				config = this.getSubDomainConfig(currentDate);
 			}
 			col.push(config);
@@ -210,10 +213,10 @@ export default class Heatmap extends BaseChart {
 	}
 
 	getSubDomainConfig(date) {
-		let YyyyMmDd = getYyyyMmDd(date);
-		let dataValue = this.data.dataPoints[YyyyMmDd];
+		let yyyyMmDd = getYyyyMmDd(date);
+		let dataValue = this.data.dataPoints[yyyyMmDd];
 		let config = {
-			YyyyMmDd: YyyyMmDd,
+			yyyyMmDd: yyyyMmDd,
 			dataValue: dataValue || 0,
 			fill: this.colors[getMaxCheckpoint(dataValue, this.state.distribution)]
 		}

src/js/objects/ChartComponents.js

@@ -237,18 +237,20 @@ let componentConfigs = {
 
 			data.cols.map(week => {
 				week.map((day, i) => {
-					let data = {
-						'data-date': day.YyyyMmDd,
-						'data-value': day.dataValue,
-						'data-day': i
-					};
-					let square = heatSquare('day', x, y, squareSize, day.fill, data);
-					this.serializedSubDomains.push(square);
+					if(day.fill) {
+						let data = {
+							'data-date': day.yyyyMmDd,
+							'data-value': day.dataValue,
+							'data-day': i
+						};
+						let square = heatSquare('day', x, y, squareSize, day.fill, data);
+						this.serializedSubDomains.push(square);
+					}
 					y += rowHeight;
 				})
 				y = 0;
 				x += colWidth;
-			})
+			});
 
 			return this.serializedSubDomains;
 		},