[Heatmap] Adjusting grid calcualtion for consistent grid layout

dist/frappe-charts.esm.js

@@ -2,8 +2,6 @@ function $(expr, con) {
 	return typeof expr === "string"? (con || document).querySelector(expr) : expr || null;
 }
 
-
-
 $.create = (tag, o) => {
 	var element = document.createElement(tag);
 
@@ -66,10 +64,6 @@ function getElementContentWidth(element) {
 	return element.clientWidth - padding;
 }
 
-
-
-
-
 function fire(target, type, properties) {
 	var evt = document.createEvent("HTMLEvents");
 
@@ -82,8 +76,6 @@ function fire(target, type, properties) {
 	return target.dispatchEvent(evt);
 }
 
-// https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/
-
 const BASE_MEASURES = {
 	margins: {
 		top: 10,
@@ -159,8 +151,6 @@ const DEFAULT_CHART_COLORS = ['light-blue', 'blue', 'violet', 'red', 'orange',
 	'yellow', 'green', 'light-green', 'purple', 'magenta', 'light-grey', 'dark-grey'];
 const HEATMAP_COLORS_GREEN = ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127'];
 
-
-
 const DEFAULT_COLORS = {
 	bar: DEFAULT_CHART_COLORS,
 	line: DEFAULT_CHART_COLORS,
@@ -298,27 +288,10 @@ 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));
 }
 
-/**
- * Returns whether or not two given arrays are equal.
- * @param {Array} arr1 First array
- * @param {Array} arr2 Second array
- */
-
-
-/**
- * Shuffles array in place. ES6 version
- * @param {Array} array An array containing the items.
- */
-
-
 /**
  * Fill an array with extra points
  * @param {Array} array Array
@@ -344,11 +317,6 @@ function getStringWidth(string, charWidth) {
 	return (string+"").length * charWidth;
 }
 
-
-
-// https://stackoverflow.com/a/29325222
-
-
 function getPositionByAngle(angle, radius) {
 	return {
 		x: Math.sin(angle * ANGLE_RATIO) * radius,
@@ -514,8 +482,6 @@ function makeSVGGroup(className, transform='', parent=undefined) {
 	return createSVG('g', args);
 }
 
-
-
 function makePath(pathStr, className='', stroke='none', fill='none') {
 	return createSVG('path', {
 		className: className,
@@ -1737,24 +1703,27 @@ class AggregationChart extends BaseChart {
 
 const NO_OF_YEAR_MONTHS = 12;
 const NO_OF_DAYS_IN_WEEK = 7;
-
 const NO_OF_MILLIS = 1000;
 const SEC_IN_DAY = 86400;
 
 const MONTH_NAMES = ["January", "February", "March", "April", "May",
 	"June", "July", "August", "September", "October", "November", "December"];
 
-
 const DAY_NAMES_SHORT = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 
-
 // https://stackoverflow.com/a/11252167/6495043
 function treatAsUtc(date) {
 	let result = new Date(date);
 	result.setMinutes(result.getMinutes() - result.getTimezoneOffset());
 	return result;
 }
 
+function toMidnightUTC(date) {
+	let result = new Date(date);
+	result.setUTCHours(0, result.getTimezoneOffset(), 0, 0);
+	return result;
+}
+
 function getYyyyMmDd(date) {
 	let dd = date.getDate();
 	let mm = date.getMonth() + 1; // getMonth() is zero-based
@@ -1769,10 +1738,6 @@ function clone(date) {
 	return new Date(date.getTime());
 }
 
-
-
-
-
 // export function getMonthsBetween(startDate, endDate) {}
 
 function getWeeksBetween(startDate, endDate) {
@@ -2623,7 +2588,7 @@ function calcChartIntervals(values, withMinimum=false) {
 		intervals = intervals.reverse().map(d => d * (-1));
 	}
 
-	return intervals;
+	return intervals.sort((a, b) => (a - b));
 }
 
 function getZeroIndex(yPts) {
@@ -2647,8 +2612,6 @@ function getZeroIndex(yPts) {
 	return zeroIndex;
 }
 
-
-
 function getIntervalSize(orderedArray) {
 	return orderedArray[1] - orderedArray[0];
 }
@@ -2661,10 +2624,6 @@ function scale(val, yAxis) {
 	return floatTwo(yAxis.zeroLine - val * yAxis.scaleMultiplier);
 }
 
-
-
-
-
 function getClosestInArray(goal, arr, index = false) {
 	let closest = arr.reduce(function(prev, curr) {
 		return (Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev);
@@ -2745,7 +2704,13 @@ class Heatmap extends BaseChart {
 			data.start = new Date();
 			data.start.setFullYear( data.start.getFullYear() - 1 );
 		}
-		if(!data.end) { data.end = new Date(); }
+		data.start = toMidnightUTC(data.start);
+
+		if(!data.end) {
+			data.end = new Date();
+		}
+		data.end = toMidnightUTC(data.end);
+
 		data.dataPoints = data.dataPoints || {};
 
 		if(parseInt(Object.keys(data.dataPoints)[0]) > 100000) {
@@ -2914,8 +2879,8 @@ class Heatmap extends BaseChart {
 
 	getDomainConfig(startDate, endDate='') {
 		let [month, year] = [startDate.getMonth(), startDate.getFullYear()];
-		let startOfWeek = setDayToSunday(startDate); // TODO: Monday as well
-		endDate = clone(endDate) || getLastDateInMonth(month, year);
+		let startOfWeek = toMidnightUTC(setDayToSunday(startDate)); // TODO: Monday as well
+		endDate = toMidnightUTC(clone(endDate) || getLastDateInMonth(month, year));
 
 		let domainConfig = {
 			index: month,
@@ -2930,7 +2895,7 @@ class Heatmap extends BaseChart {
 			col = this.getCol(startOfWeek, month);
 			cols.push(col);
 
-			startOfWeek = new Date(col[NO_OF_DAYS_IN_WEEK - 1].yyyyMmDd);
+			startOfWeek = toMidnightUTC(new Date(col[NO_OF_DAYS_IN_WEEK - 1].yyyyMmDd));
 			addDays(startOfWeek, 1);
 		}
 
@@ -2948,7 +2913,7 @@ class Heatmap extends BaseChart {
 		let s = this.state;
 
 		// startDate is the start of week
-		let currentDate = clone(startDate);
+		let currentDate = clone(toMidnightUTC(startDate));
 		let col = [];
 
 		for(var i = 0; i < NO_OF_DAYS_IN_WEEK; i++, addDays(currentDate, 1)) {
@@ -3017,7 +2982,7 @@ function dataPrep(data, type) {
 
 		// Set type
 		if(!d.chartType ) {
-			if(!AXIS_DATASET_CHART_TYPES.includes(type)) type === DEFAULT_AXIS_CHART_TYPE;
+			if(!AXIS_DATASET_CHART_TYPES.includes(type)) type = DEFAULT_AXIS_CHART_TYPE;
 			d.chartType = type;
 		}
 
@@ -3677,7 +3642,6 @@ class AxisChart extends BaseChart {
 	// removeDataPoint(index = 0) {}
 }
 
-// import MultiAxisChart from './charts/MultiAxisChart';
 const chartTypes = {
 	bar: AxisChart,
 	line: AxisChart,

docs/assets/js/data.js

@@ -150,7 +150,7 @@ export const moonData = {
 	names: ["Ganymede", "Callisto", "Io", "Europa"],
 	masses: [14819000, 10759000, 8931900, 4800000],
 	distances: [1070.412, 1882.709, 421.700, 671.034],
-	diameters: [5262.4, 4820.6, 3637.4, 3121.6],
+	diameters: [5262.4, 4820.6, 3637.4, 3121.6],
 };
 
 // const jupiterMoons = {