fire events only if chart visible, specifics in the prop

docs/assets/js/index.js

@@ -1,3 +1,5 @@
+// Data
+// ================================================================================
 let bar_composite_data = {
 	"labels": ["Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"],
 	"datasets": [{
@@ -64,7 +66,6 @@ let type_data = {
 		{
 			"color": "blue",
 			"values": [15, 20, -3, -15, 58, 12, -17]
-
 		}
 	]
 };
@@ -75,6 +76,13 @@ let update_data = {
 			"color": "red",
 			"values": [25, 40, 30, 35, 48, 52, 17]
 		}
+	],
+	"specific_values": [
+		{
+			title: "Altitude",
+			line_type: "dashed",	// "dashed" or "solid"
+			value: 43
+		},
 	]
 };
 
@@ -115,6 +123,9 @@ let heatmap_data = {
 	1506277800.0: 2
 };
 
+
+// Charts
+// ================================================================================
 let bar_composite_chart = new frappe.chart.FrappeChart ({
 	parent: "#chart-composite-1",
 	data: bar_composite_data,
@@ -174,3 +185,6 @@ let heatmap = new frappe.chart.FrappeChart({
 	height: 100,
 	// discrete_domains: 1
 });
+
+// Events
+// ================================================================================

docs/index.html

@@ -66,7 +66,7 @@
               </h6>
               <div id="chart-update" class="graphics-container"></div>
               <div class="mt-1 mx-auto" role="group">
-                <button type="button" class="btn btn-sm btn-secondary">Random Reset</button>
+                <button type="button" class="btn btn-sm btn-secondary">Random Data</button>
                 <button type="button" class="btn btn-sm btn-secondary">Add Value</button>
                 <button type="button" class="btn btn-sm btn-secondary">Remove Value</button>
               </div>
@@ -101,7 +101,7 @@
           <div class="col-sm-10 push-sm-1">
             <div class="dashboard-section">
               <h6 class="margin-vertical-rem">
-                Oh, and a complementary annual Heatmap
+                Oh, and an Annual Heatmap
               </h6>
               <div id="chart-heatmap" class="graphics-container"
                 style="overflow: scroll; text-align: center; padding: 20px;"></div>

src/charts.js

@@ -4,6 +4,7 @@
 // 		line_type: "dashed",	// "dashed" or "solid"
 // 		value: 10
 // 	},
+// ]
 
 // summary = [
 // 	{
@@ -29,7 +30,6 @@ frappe.chart.FrappeChart = class {
 		data = {},
 		format_lambdas = {},
 
-		specific_values = [],
 		summary = [],
 
 		is_navigable = 0,
@@ -57,7 +57,7 @@ frappe.chart.FrappeChart = class {
 		this.data = data;
 		this.format_lambdas = format_lambdas;
 
-		this.specific_values = specific_values;
+		this.specific_values = data.specific_values || [];
 		this.summary = summary;
 
 		this.is_navigable = is_navigable;
@@ -189,21 +189,23 @@ frappe.chart.FrappeChart = class {
 	setup_navigation() {
 		this.make_overlay();
 		this.bind_overlay();
-		document.onkeydown = (e) => {
+		document.addEventListener('keydown', (e) => {
-			e = e || window.event;
+			if($$.isElementInViewport(this.chart_wrapper)) {
+				e = e || window.event;
 
-			if (e.keyCode == '37') {
+				if (e.keyCode == '37') {
-				this.on_left_arrow();
+					this.on_left_arrow();
-			} else if (e.keyCode == '39') {
+				} else if (e.keyCode == '39') {
-				this.on_right_arrow();
+					this.on_right_arrow();
-			} else if (e.keyCode == '38') {
+				} else if (e.keyCode == '38') {
-				this.on_up_arrow();
+					this.on_up_arrow();
-			} else if (e.keyCode == '40') {
+				} else if (e.keyCode == '40') {
-				this.on_down_arrow();
+					this.on_down_arrow();
-			} else if (e.keyCode == '13') {
+				} else if (e.keyCode == '13') {
-				this.on_enter_key();
+					this.on_enter_key();
+				}
 			}
-		};
+		});
 	}
 
 	make_overlay() {}
@@ -463,7 +465,9 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
 					d.title.toUpperCase(),
 					'specific-value',
 					'specific-value',
-					this.zero_line - d.value * this.multiplier
+					this.zero_line - d.value * this.multiplier,
+					false,
+					d.line_type
 				)
 			);
 		});
@@ -847,8 +851,9 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
 		return x_level;
 	}
 
-	make_y_line(start_at, width, text_end_at, point, label_class, axis_line_class, y_pos, darker=false) {
+	make_y_line(start_at, width, text_end_at, point, label_class, axis_line_class, y_pos, darker=false, line_type="") {
 		let line = $$.createSVG('line', {
+			className: line_type === "dashed" ? "dashed": "",
 			x1: start_at,
 			x2: width,
 			y1: 0,
@@ -1964,7 +1969,7 @@ $$.animateSVG = (element, props, dur, easing_type="linear", type=undefined, old_
 	return [anim_element, new_element];
 }
 
-$$.offset = function(element) {
+$$.offset = (element) => {
 	let rect = element.getBoundingClientRect();
 	return {
 		// https://stackoverflow.com/a/7436602/6495043
@@ -1975,6 +1980,18 @@ $$.offset = function(element) {
 	}
 };
 
+$$.isElementInViewport = (el) => {
+	// Although straightforward: https://stackoverflow.com/a/7557433/6495043
+    var rect = el.getBoundingClientRect();
+
+    return (
+        rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
+        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
+    );
+}
+
 $$.bind = function(element, o) {
 	if (element) {
 		for (var event in o) {