Update docs: dom element as parent, heatmap today fix

README.md

@@ -65,7 +65,7 @@ const data = {
 }
 
 const chart = new Chart({
-    parent: '#chart',
+    parent: '#chart', // or a DOM element
     title: "My Awesome Chart",
     data: data,
     type: 'bar', // or 'line', 'scatter', 'pie', 'percentage'

dist/frappe-charts.min.cjs.js

@@ -633,9 +633,11 @@ var SvgTip = function () {
 	}, {
 		key: 'calc_position',
 		value: function calc_position() {
+			var width = this.container.offsetWidth;
+
 			this.top = this.y - this.container.offsetHeight;
-			this.left = this.x - this.container.offsetWidth / 2;
+			this.left = this.x - width / 2;
-			var max_left = this.parent.offsetWidth - this.container.offsetWidth;
+			var max_left = this.parent.offsetWidth - width;
 
 			var pointer = this.container.querySelector('.svg-pointer');
 
@@ -644,7 +646,9 @@ var SvgTip = function () {
 				this.left = 0;
 			} else if (this.left > max_left) {
 				var delta = this.left - max_left;
-				pointer.style.left = 'calc(50% + ' + delta + 'px)';
+				var pointer_offset = 'calc(50% + ' + delta + 'px)';
+				pointer.style.left = pointer_offset;
+
 				this.left = max_left;
 			} else {
 				pointer.style.left = '50%';
@@ -3024,6 +3028,7 @@ var Heatmap = function (_BaseChart) {
 			var square_side = 10;
 			var cell_padding = 2;
 			var step = 1;
+			var today_time = this.today.getTime();
 
 			var month_change = 0;
 			var week_col_change = 0;
@@ -3067,6 +3072,8 @@ var Heatmap = function (_BaseChart) {
 
 				var next_date = new Date(current_date);
 				this.add_days(next_date, 1);
+				if (next_date.getTime() > today_time) break;
+
 				if (next_date.getMonth() - current_date.getMonth()) {
 					month_change = 1;
 					if (this.discrete_domains) {
@@ -3235,14 +3242,6 @@ var Heatmap = function (_BaseChart) {
 	return Heatmap;
 }(BaseChart);
 
-// if ("development" !== 'production') {
-// 	// Enable LiveReload
-// 	document.write(
-// 		'<script src="http://' + (location.host || 'localhost').split(':')[0] +
-// 		':35729/livereload.js?snipver=1"></' + 'script>'
-// 	);
-// }
-
 var chartTypes = {
 	line: LineChart,
 	bar: BarChart,

dist/frappe-charts.min.esm.js

@@ -631,9 +631,11 @@ var SvgTip = function () {
 	}, {
 		key: 'calc_position',
 		value: function calc_position() {
+			var width = this.container.offsetWidth;
+
 			this.top = this.y - this.container.offsetHeight;
-			this.left = this.x - this.container.offsetWidth / 2;
+			this.left = this.x - width / 2;
-			var max_left = this.parent.offsetWidth - this.container.offsetWidth;
+			var max_left = this.parent.offsetWidth - width;
 
 			var pointer = this.container.querySelector('.svg-pointer');
 
@@ -642,7 +644,9 @@ var SvgTip = function () {
 				this.left = 0;
 			} else if (this.left > max_left) {
 				var delta = this.left - max_left;
-				pointer.style.left = 'calc(50% + ' + delta + 'px)';
+				var pointer_offset = 'calc(50% + ' + delta + 'px)';
+				pointer.style.left = pointer_offset;
+
 				this.left = max_left;
 			} else {
 				pointer.style.left = '50%';
@@ -3022,6 +3026,7 @@ var Heatmap = function (_BaseChart) {
 			var square_side = 10;
 			var cell_padding = 2;
 			var step = 1;
+			var today_time = this.today.getTime();
 
 			var month_change = 0;
 			var week_col_change = 0;
@@ -3065,6 +3070,8 @@ var Heatmap = function (_BaseChart) {
 
 				var next_date = new Date(current_date);
 				this.add_days(next_date, 1);
+				if (next_date.getTime() > today_time) break;
+
 				if (next_date.getMonth() - current_date.getMonth()) {
 					month_change = 1;
 					if (this.discrete_domains) {
@@ -3233,14 +3240,6 @@ var Heatmap = function (_BaseChart) {
 	return Heatmap;
 }(BaseChart);
 
-// if ("development" !== 'production') {
-// 	// Enable LiveReload
-// 	document.write(
-// 		'<script src="http://' + (location.host || 'localhost').split(':')[0] +
-// 		':35729/livereload.js?snipver=1"></' + 'script>'
-// 	);
-// }
-
 var chartTypes = {
 	line: LineChart,
 	bar: BarChart,

docs/assets/js/index.js

@@ -38,8 +38,11 @@ let more_line_data = {
 	10: {values: [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 0, 0]}
 };
 
+let c1 = document.querySelector("#chart-composite-1");
+let c2 = document.querySelector("#chart-composite-2");
+
 let bar_composite_chart = new Chart ({
-	parent: "#chart-composite-1",
+	parent: c1,
 	title: "Fireball/Bolide Events - Yearly (more than 5 reports)",
 	data: bar_composite_data,
 	type: 'bar',
@@ -50,7 +53,7 @@ let bar_composite_chart = new Chart ({
 });
 
 let line_composite_chart = new Chart ({
-	parent: "#chart-composite-2",
+	parent: c2,
 	data: line_composite_data,
 	type: 'line',
 	height: 180,

docs/index.html

@@ -79,7 +79,7 @@
   };
 
   let chart = new Chart({
-    parent: "#chart",
+    parent: "#chart", // or a DOM element
     title: "My Awesome Chart",
     data: data,
     type: 'bar', // or 'line', 'scatter', 'pie', 'percentage'

src/scripts/charts/Heatmap.js

@@ -111,6 +111,7 @@ export default class Heatmap extends BaseChart {
 		const square_side = 10;
 		const cell_padding = 2;
 		const step = 1;
+		const today_time = this.today.getTime();
 
 		let month_change = 0;
 		let week_col_change = 0;
@@ -154,6 +155,9 @@ export default class Heatmap extends BaseChart {
 
 			let next_date = new Date(current_date);
 			this.add_days(next_date, 1);
+			if(next_date.getTime() > today_time) break;
+
+
 			if(next_date.getMonth() - current_date.getMonth()) {
 				month_change = 1;
 				if(this.discrete_domains) {

src/scripts/objects/SvgTip.js

@@ -69,9 +69,11 @@ export default class SvgTip {
 	}
 
 	calc_position() {
+		let width = this.container.offsetWidth;
+
 		this.top = this.y - this.container.offsetHeight;
-		this.left = this.x - this.container.offsetWidth/2;
+		this.left = this.x - width/2;
-		let max_left = this.parent.offsetWidth - this.container.offsetWidth;
+		let max_left = this.parent.offsetWidth - width;
 
 		let pointer = this.container.querySelector('.svg-pointer');
 
@@ -80,7 +82,9 @@ export default class SvgTip {
 			this.left = 0;
 		} else if(this.left > max_left) {
 			let delta = this.left - max_left;
-			pointer.style.left = `calc(50% + ${delta}px)`;
+			let pointer_offset = `calc(50% + ${delta}px)`;
+			pointer.style.left = pointer_offset;
+
 			this.left = max_left;
 		} else {
 			pointer.style.left = `50%`;

src/styles/charts.less

@@ -45,6 +45,8 @@
 				color: #98d85b;
 			}
 		}
+
+
 	}
 	.axis, .chart-label {
 		font-size: 11px;
@@ -112,7 +114,6 @@
 		-o-transition: width .6s ease;
 		transition: width .6s ease;
 	}
-}
 
 	.graph-svg-tip {
 		position: absolute;
@@ -459,4 +460,6 @@
 	.stop-color.magenta {
 		stop-color: #ffa3ef;
 	}
+}
+