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,351 +114,352 @@
 		-o-transition: width .6s ease;
 		transition: width .6s ease;
 	}
-}
 
-.graph-svg-tip {
+	.graph-svg-tip {
-	position: absolute;
-	z-index: 99999;
-	padding: 10px;
-	font-size: 12px;
-	color: #959da5;
-	text-align: center;
-	background: rgba(0, 0, 0, 0.8);
-	border-radius: 3px;
-	ul {
-		padding-left: 0;
-		display: flex;
-	}
-	ol {
-		padding-left: 0;
-		display: flex;
-	}
-	ul.data-point-list {
-		li {
-			min-width: 90px;
-			flex: 1;
-			font-weight: 600;
-		}
-	}
-	strong {
-		color: #dfe2e5;
-		font-weight: 600;
-	}
-	.svg-pointer {
 		position: absolute;
-		bottom: -10px;
+		z-index: 99999;
-		left: 50%;
+		padding: 10px;
-		width: 5px;
+		font-size: 12px;
-		height: 5px;
+		color: #959da5;
-		margin: 0 0 0 -5px;
+		text-align: center;
-		content: " ";
+		background: rgba(0, 0, 0, 0.8);
-		border: 5px solid transparent;
+		border-radius: 3px;
-		border-top-color: rgba(0, 0, 0, 0.8);
-	}
-	&.comparison {
-		padding: 0;
-		text-align: left;
-		pointer-events: none;
-		.title {
-			display: block;
-			padding: 10px;
-			margin: 0;
-			font-weight: 600;
-			line-height: 1;
-			pointer-events: none;
-		}
 		ul {
-			margin: 0;
+			padding-left: 0;
-			white-space: nowrap;
+			display: flex;
-			list-style: none;
 		}
-		li {
+		ol {
-			display: inline-block;
+			padding-left: 0;
-			padding: 5px 10px;
+			display: flex;
 		}
+		ul.data-point-list {
+			li {
+				min-width: 90px;
+				flex: 1;
+				font-weight: 600;
+			}
+		}
+		strong {
+			color: #dfe2e5;
+			font-weight: 600;
+		}
+		.svg-pointer {
+			position: absolute;
+			bottom: -10px;
+			left: 50%;
+			width: 5px;
+			height: 5px;
+			margin: 0 0 0 -5px;
+			content: " ";
+			border: 5px solid transparent;
+			border-top-color: rgba(0, 0, 0, 0.8);
+		}
+		&.comparison {
+			padding: 0;
+			text-align: left;
+			pointer-events: none;
+			.title {
+				display: block;
+				padding: 10px;
+				margin: 0;
+				font-weight: 600;
+				line-height: 1;
+				pointer-events: none;
+			}
+			ul {
+				margin: 0;
+				white-space: nowrap;
+				list-style: none;
+			}
+			li {
+				display: inline-block;
+				padding: 5px 10px;
+			}
+		}
+	}
+
+	/*Indicators*/
+	.indicator,
+	.indicator-right {
+		background: none;
+		font-size: 12px;
+		vertical-align: middle;
+		font-weight: bold;
+		color: #6c7680;
+	}
+	.indicator::before,
+	.indicator i ,
+	.indicator-right::after {
+		content: '';
+		display: inline-block;
+		height: 8px;
+		width: 8px;
+		border-radius: 8px;
+	}
+	.indicator::before,.indicator i {
+		margin: 0 4px 0 0px;
+	}
+	.indicator-right::after {
+		margin: 0 0 0 4px;
+	}
+
+	.background.grey,
+	.indicator.grey::before,
+	.indicator.grey i,
+	.indicator-right.grey::after {
+		background: #bdd3e6;
+	}
+	.background.light-grey,
+	.indicator.light-grey::before,
+	.indicator.light-grey i,
+	.indicator-right.light-grey::after {
+		background: #F0F4F7;
+	}
+	.background.blue,
+	.indicator.blue::before,
+	.indicator.blue i,
+	.indicator-right.blue::after {
+		background: #5e64ff;
+	}
+	.background.red,
+	.indicator.red::before,
+	.indicator.red i,
+	.indicator-right.red::after {
+		background: #ff5858;
+	}
+	.background.green,
+	.indicator.green::before,
+	.indicator.green i,
+	.indicator-right.green::after {
+		background: #28a745;
+	}
+	.background.light-green,
+	.indicator.light-green::before,
+	.indicator.light-green i,
+	.indicator-right.light-green::after {
+		background: #98d85b;
+	}
+	.background.orange,
+	.indicator.orange::before,
+	.indicator.orange i,
+	.indicator-right.orange::after {
+		background: #ffa00a;
+	}
+	.background.violet,
+	.indicator.violet::before,
+	.indicator.violet i,
+	.indicator-right.violet::after {
+		background: #743ee2;
+	}
+	.background.dark-grey,
+	.indicator.dark-grey::before,
+	.indicator.dark-grey i,
+	.indicator-right.dark-grey::after {
+		background: #b8c2cc;
+	}
+	.background.black,
+	.indicator.black::before,
+	.indicator.black i,
+	.indicator-right.black::after {
+		background: #36414C;
+	}
+	.background.yellow,
+	.indicator.yellow::before,
+	.indicator.yellow i,
+	.indicator-right.yellow::after {
+		background: #FEEF72;
+	}
+	.background.light-blue,
+	.indicator.light-blue::before,
+	.indicator.light-blue i,
+	.indicator-right.light-blue::after {
+		background: #7CD6FD;
+	}
+	.background.purple,
+	.indicator.purple::before,
+	.indicator.purple i,
+	.indicator-right.purple::after {
+		background: #b554ff;
+	}
+	.background.magenta,
+	.indicator.magenta::before,
+	.indicator.magenta i,
+	.indicator-right.magenta::after {
+		background: #ffa3ef;
+	}
+
+	/*Svg properties colors*/
+	.stroke.grey {
+		stroke: #bdd3e6;
+	}
+	.stroke.light-grey {
+		stroke: #F0F4F7;
+	}
+	.stroke.blue {
+		stroke: #5e64ff;
+	}
+	.stroke.red {
+		stroke: #ff5858;
+	}
+	.stroke.light-green {
+		stroke: #98d85b;
+	}
+	.stroke.green {
+		stroke: #28a745;
+	}
+	.stroke.orange {
+		stroke: #ffa00a;
+	}
+	.stroke.violet {
+		stroke: #743ee2;
+	}
+	.stroke.dark-grey {
+		stroke: #b8c2cc;
+	}
+	.stroke.black {
+		stroke: #36414C;
+	}
+	.stroke.yellow {
+		stroke: #FEEF72;
+	}
+	.stroke.light-blue {
+		stroke: #7CD6FD;
+	}
+	.stroke.purple {
+		stroke: #b554ff;
+	}
+	.stroke.magenta {
+		stroke: #ffa3ef;
+	}
+
+	.fill.grey {
+		fill: #bdd3e6;
+	}
+	.fill.light-grey {
+		fill: #F0F4F7;
+	}
+	.fill.blue {
+		fill: #5e64ff;
+	}
+	.fill.red {
+		fill: #ff5858;
+	}
+	.fill.light-green {
+		fill: #98d85b;
+	}
+	.fill.green {
+		fill: #28a745;
+	}
+	.fill.orange {
+		fill: #ffa00a;
+	}
+	.fill.violet {
+		fill: #743ee2;
+	}
+	.fill.dark-grey {
+		fill: #b8c2cc;
+	}
+	.fill.black {
+		fill: #36414C;
+	}
+	.fill.yellow {
+		fill: #FEEF72;
+	}
+	.fill.light-blue {
+		fill: #7CD6FD;
+	}
+	.fill.purple {
+		fill: #b554ff;
+	}
+	.fill.magenta {
+		fill: #ffa3ef;
+	}
+
+	.border-top.grey {
+		border-top: 3px solid #bdd3e6;
+	}
+	.border-top.light-grey {
+		border-top: 3px solid #F0F4F7;
+	}
+	.border-top.blue {
+		border-top: 3px solid #5e64ff;
+	}
+	.border-top.red {
+		border-top: 3px solid #ff5858;
+	}
+	.border-top.light-green {
+		border-top: 3px solid #98d85b;
+	}
+	.border-top.green {
+		border-top: 3px solid #28a745;
+	}
+	.border-top.orange {
+		border-top: 3px solid #ffa00a;
+	}
+	.border-top.violet {
+		border-top: 3px solid #743ee2;
+	}
+	.border-top.dark-grey {
+		border-top: 3px solid #b8c2cc;
+	}
+	.border-top.black {
+		border-top: 3px solid #36414C;
+	}
+	.border-top.yellow {
+		border-top: 3px solid #FEEF72;
+	}
+	.border-top.light-blue {
+		border-top: 3px solid #7CD6FD;
+	}
+	.border-top.purple {
+		border-top: 3px solid #b554ff;
+	}
+	.border-top.magenta {
+		border-top: 3px solid #ffa3ef;
+	}
+
+	.stop-color.grey {
+		stop-color: #bdd3e6;
+	}
+	.stop-color.light-grey {
+		stop-color: #F0F4F7;
+	}
+	.stop-color.blue {
+		stop-color: #5e64ff;
+	}
+	.stop-color.red {
+		stop-color: #ff5858;
+	}
+	.stop-color.light-green {
+		stop-color: #98d85b;
+	}
+	.stop-color.green {
+		stop-color: #28a745;
+	}
+	.stop-color.orange {
+		stop-color: #ffa00a;
+	}
+	.stop-color.violet {
+		stop-color: #743ee2;
+	}
+	.stop-color.dark-grey {
+		stop-color: #b8c2cc;
+	}
+	.stop-color.black {
+		stop-color: #36414C;
+	}
+	.stop-color.yellow {
+		stop-color: #FEEF72;
+	}
+	.stop-color.light-blue {
+		stop-color: #7CD6FD;
+	}
+	.stop-color.purple {
+		stop-color: #b554ff;
+	}
+	.stop-color.magenta {
+		stop-color: #ffa3ef;
 	}
 }
 
-/*Indicators*/
-.indicator,
-.indicator-right {
-  background: none;
-  font-size: 12px;
-  vertical-align: middle;
-  font-weight: bold;
-  color: #6c7680;
-}
-.indicator::before,
-.indicator i ,
-.indicator-right::after {
-  content: '';
-  display: inline-block;
-  height: 8px;
-  width: 8px;
-  border-radius: 8px;
-}
-.indicator::before,.indicator i {
-  margin: 0 4px 0 0px;
-}
-.indicator-right::after {
-  margin: 0 0 0 4px;
-}
-
-.background.grey,
-.indicator.grey::before,
-.indicator.grey i,
-.indicator-right.grey::after {
-  background: #bdd3e6;
-}
-.background.light-grey,
-.indicator.light-grey::before,
-.indicator.light-grey i,
-.indicator-right.light-grey::after {
-  background: #F0F4F7;
-}
-.background.blue,
-.indicator.blue::before,
-.indicator.blue i,
-.indicator-right.blue::after {
-  background: #5e64ff;
-}
-.background.red,
-.indicator.red::before,
-.indicator.red i,
-.indicator-right.red::after {
-  background: #ff5858;
-}
-.background.green,
-.indicator.green::before,
-.indicator.green i,
-.indicator-right.green::after {
-  background: #28a745;
-}
-.background.light-green,
-.indicator.light-green::before,
-.indicator.light-green i,
-.indicator-right.light-green::after {
-  background: #98d85b;
-}
-.background.orange,
-.indicator.orange::before,
-.indicator.orange i,
-.indicator-right.orange::after {
-  background: #ffa00a;
-}
-.background.violet,
-.indicator.violet::before,
-.indicator.violet i,
-.indicator-right.violet::after {
-  background: #743ee2;
-}
-.background.dark-grey,
-.indicator.dark-grey::before,
-.indicator.dark-grey i,
-.indicator-right.dark-grey::after {
-  background: #b8c2cc;
-}
-.background.black,
-.indicator.black::before,
-.indicator.black i,
-.indicator-right.black::after {
-  background: #36414C;
-}
-.background.yellow,
-.indicator.yellow::before,
-.indicator.yellow i,
-.indicator-right.yellow::after {
-  background: #FEEF72;
-}
-.background.light-blue,
-.indicator.light-blue::before,
-.indicator.light-blue i,
-.indicator-right.light-blue::after {
-  background: #7CD6FD;
-}
-.background.purple,
-.indicator.purple::before,
-.indicator.purple i,
-.indicator-right.purple::after {
-  background: #b554ff;
-}
-.background.magenta,
-.indicator.magenta::before,
-.indicator.magenta i,
-.indicator-right.magenta::after {
-  background: #ffa3ef;
-}
-
-/*Svg properties colors*/
-.stroke.grey {
-  stroke: #bdd3e6;
-}
-.stroke.light-grey {
-  stroke: #F0F4F7;
-}
-.stroke.blue {
-  stroke: #5e64ff;
-}
-.stroke.red {
-  stroke: #ff5858;
-}
-.stroke.light-green {
-  stroke: #98d85b;
-}
-.stroke.green {
-  stroke: #28a745;
-}
-.stroke.orange {
-  stroke: #ffa00a;
-}
-.stroke.violet {
-  stroke: #743ee2;
-}
-.stroke.dark-grey {
-  stroke: #b8c2cc;
-}
-.stroke.black {
-  stroke: #36414C;
-}
-.stroke.yellow {
-  stroke: #FEEF72;
-}
-.stroke.light-blue {
-  stroke: #7CD6FD;
-}
-.stroke.purple {
-  stroke: #b554ff;
-}
-.stroke.magenta {
-  stroke: #ffa3ef;
-}
-
-.fill.grey {
-  fill: #bdd3e6;
-}
-.fill.light-grey {
-  fill: #F0F4F7;
-}
-.fill.blue {
-  fill: #5e64ff;
-}
-.fill.red {
-  fill: #ff5858;
-}
-.fill.light-green {
-  fill: #98d85b;
-}
-.fill.green {
-  fill: #28a745;
-}
-.fill.orange {
-  fill: #ffa00a;
-}
-.fill.violet {
-  fill: #743ee2;
-}
-.fill.dark-grey {
-  fill: #b8c2cc;
-}
-.fill.black {
-  fill: #36414C;
-}
-.fill.yellow {
-  fill: #FEEF72;
-}
-.fill.light-blue {
-  fill: #7CD6FD;
-}
-.fill.purple {
-  fill: #b554ff;
-}
-.fill.magenta {
-  fill: #ffa3ef;
-}
-
-.border-top.grey {
-  border-top: 3px solid #bdd3e6;
-}
-.border-top.light-grey {
-  border-top: 3px solid #F0F4F7;
-}
-.border-top.blue {
-  border-top: 3px solid #5e64ff;
-}
-.border-top.red {
-  border-top: 3px solid #ff5858;
-}
-.border-top.light-green {
-  border-top: 3px solid #98d85b;
-}
-.border-top.green {
-  border-top: 3px solid #28a745;
-}
-.border-top.orange {
-  border-top: 3px solid #ffa00a;
-}
-.border-top.violet {
-  border-top: 3px solid #743ee2;
-}
-.border-top.dark-grey {
-  border-top: 3px solid #b8c2cc;
-}
-.border-top.black {
-  border-top: 3px solid #36414C;
-}
-.border-top.yellow {
-  border-top: 3px solid #FEEF72;
-}
-.border-top.light-blue {
-  border-top: 3px solid #7CD6FD;
-}
-.border-top.purple {
-  border-top: 3px solid #b554ff;
-}
-.border-top.magenta {
-  border-top: 3px solid #ffa3ef;
-}
-
-.stop-color.grey {
-  stop-color: #bdd3e6;
-}
-.stop-color.light-grey {
-  stop-color: #F0F4F7;
-}
-.stop-color.blue {
-  stop-color: #5e64ff;
-}
-.stop-color.red {
-  stop-color: #ff5858;
-}
-.stop-color.light-green {
-  stop-color: #98d85b;
-}
-.stop-color.green {
-  stop-color: #28a745;
-}
-.stop-color.orange {
-  stop-color: #ffa00a;
-}
-.stop-color.violet {
-  stop-color: #743ee2;
-}
-.stop-color.dark-grey {
-  stop-color: #b8c2cc;
-}
-.stop-color.black {
-  stop-color: #36414C;
-}
-.stop-color.yellow {
-  stop-color: #FEEF72;
-}
-.stop-color.light-blue {
-  stop-color: #7CD6FD;
-}
-.stop-color.purple {
-  stop-color: #b554ff;
-}
-.stop-color.magenta {
-  stop-color: #ffa3ef;
-}