feat: Export chart option in desktop view

erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js

@@ -1,3 +1,4 @@
+import html2canvas from 'html2canvas';
 erpnext.HierarchyChart = class {
 	/* Options:
 		- doctype
@@ -11,16 +12,20 @@ erpnext.HierarchyChart = class {
 		this.method = method;
 		this.doctype = doctype;
 
+		this.setup_page_style();
+		this.page.main.addClass('frappe-card');
+
+		this.nodes = {};
+		this.setup_node_class();
+	}
+
+	setup_page_style() {
 		this.page.main.css({
 			'min-height': '300px',
 			'max-height': '600px',
 			'overflow': 'auto',
 			'position': 'relative'
 		});
-		this.page.main.addClass('frappe-card');
-
-		this.nodes = {};
-		this.setup_node_class();
 	}
 
 	setup_node_class() {
@@ -84,7 +89,7 @@ erpnext.HierarchyChart = class {
 
 					// svg for connectors
 					me.make_svg_markers();
-					me.setup_hierarchy()
+					me.setup_hierarchy();
 					me.render_root_nodes();
 					me.all_nodes_expanded = false;
 				}
@@ -97,6 +102,10 @@ erpnext.HierarchyChart = class {
 
 	setup_actions() {
 		let me = this;
+		this.page.add_inner_button(__('Export'), function() {
+			me.export_chart();
+		});
+
 		this.page.add_inner_button(__('Expand All'), function() {
 			me.load_children(me.root_node, true);
 			me.all_nodes_expanded = true;
@@ -113,6 +122,36 @@ erpnext.HierarchyChart = class {
 		});
 	}
 
+	export_chart() {
+		this.page.main.css({
+			'min-height': '',
+			'max-height': '',
+			'overflow': 'visible',
+			'position': 'fixed',
+			'left': '0',
+			'top': '0'
+		});
+
+		$('.node-card').addClass('exported');
+
+		html2canvas(document.querySelector('#hierarchy-chart-wrapper'), {
+			scrollY: -window.scrollY,
+			scrollX: 0
+		}).then(function(canvas) {
+			// Export the canvas to its data URI representation
+			let dataURL = canvas.toDataURL('image/png');
+
+			// download the image
+			let a = document.createElement('a');
+			a.href = dataURL;
+			a.download = 'hierarchy_chart';
+			a.click();
+		});
+
+		this.setup_page_style();
+		$('.node-card').removeClass('exported');
+	}
+
 	setup_hierarchy() {
 		if (this.$hierarchy)
 			this.$hierarchy.remove();
@@ -127,14 +166,17 @@ erpnext.HierarchyChart = class {
 				</li>
 			</ul>`);
 
-		this.page.main.append(this.$hierarchy);
+		this.page.main
+			.find('#hierarchy-chart-wrapper')
+			.append(this.$hierarchy);
 		this.nodes = {};
 	}
 
 	make_svg_markers() {
 		$('#arrows').remove();
 
-		this.page.main.prepend(`
+		this.page.main.append(`
+			<div id="hierarchy-chart-wrapper">
 				<svg id="arrows" width="100%" height="100%">
 					<defs>
 						<marker id="arrowhead-active" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="6" markerHeight="6" orient="auto" fill="var(--blue-500)">
@@ -153,7 +195,8 @@ erpnext.HierarchyChart = class {
 					</defs>
 					<g id="connectors" fill="none">
 					</g>
-			</svg>`);
+				</svg>
+			</div>`);
 	}
 
 	render_root_nodes(expanded_view=false) {
@@ -323,7 +366,7 @@ erpnext.HierarchyChart = class {
 	}
 
 	render_child_nodes_for_expanded_view(node, child_nodes) {
-		node.$children = $('<ul class="node-children"></ul>')
+		node.$children = $('<ul class="node-children"></ul>');
 
 		const last_level = this.$hierarchy.find('.level:last').index();
 		const node_level = $(`#${node.id}`).parent().parent().parent().index();

erpnext/public/scss/hierarchy_chart.scss

@@ -21,6 +21,10 @@
 	}
 }
 
+.node-card.exported {
+	box-shadow: none
+}
+
 .node-image {
 	width: 3.0rem;
 	height: 3.0rem;
@@ -178,9 +182,12 @@
 }
 
 // horizontal hierarchy tree view
+#hierarchy-chart-wrapper {
+	padding-top: 30px;
+}
+
 .hierarchy {
 	display: flex;
-	padding-top: 30px;
 }
 
 .hierarchy li {
@@ -200,6 +207,7 @@
 #arrows {
 	position: absolute;
 	overflow: visible;
+	margin-top: -80px;
 }
 
 .active-connector {

erpnext/utilities/hierarchy_chart.py

@@ -3,14 +3,16 @@
 
 from __future__ import unicode_literals
 import frappe
+import os
 from frappe import _
+from frappe.utils.pdf import get_pdf
 
 @frappe.whitelist()
 def get_all_nodes(parent, parent_name, method, company):
 	'''Recursively gets all data from nodes'''
 	method = frappe.get_attr(method)
 
-	if not method in frappe.whitelisted:
+	if method not in frappe.whitelisted:
 		frappe.throw(_('Not Permitted'), frappe.PermissionError)
 
 	data = method(parent, company)