Merge pull request #7227 from rmehta/dashboard-fixes

fix: dashboard loading state and caching

frappe/core/page/dashboard/dashboard.css

@@ -1,14 +1,29 @@
-.chart-container {
+.chart-wrapper {
     border: 1px solid #d1d8dd;
     border-radius: 4px;
+    height: 340px;
     margin: 15px 0;
+}
+
+.chart-container {
     padding: 15px;
 }
 
+.chart-container > .title {
+    margin: 0px;
+    font-size: 14px;
+}
+
+.chart-loading-state {
+    height: 100%;
+    margin-top: 160px;
+    text-align: center;
+}
+
 .chart-actions {
     position: absolute;
     right: 30px;
-    top: 54px;
+    top: 26px;
 }
 
 .chart-column-container {
@@ -17,7 +32,7 @@
 
 .last-synced-text {
     position: absolute;
-    top: 56px;
+    top: 28px;
     right: 60px;
     font-size: 12px;
 }

frappe/core/page/dashboard/dashboard.js

@@ -3,7 +3,7 @@
 
 
 frappe.pages['dashboard'].on_page_load = function(wrapper) {
-	frappe.ui.make_app_page({
+	var page = frappe.ui.make_app_page({
 		parent: wrapper,
 		title: __("Dashboard"),
 		single_column: true
@@ -62,6 +62,11 @@ class Dashboard {
 
 	set_dropdown() {
 		this.page.clear_menu();
+
+		this.page.add_menu_item('Edit...', () => {
+			frappe.set_route('Form', 'Dashboard', frappe.dashboard.dashboard_name);
+		})
+
 		frappe.db.get_list("Dashboard").then(dashboards => {
 			dashboards.map(dashboard => {
 				let name = dashboard.name;
@@ -99,7 +104,9 @@ class DashboardChart {
 		};
 		let columns = column_width_map[this.chart_doc.width];
 		this.chart_container = $(`<div class="col-sm-${columns} chart-column-container">
-			<div class="chart-wrapper"></div>
+			<div class="chart-wrapper">
+				<div class="chart-loading-state text-muted">${__("Loading...")}</div>
+			</div>
 		</div>`);
 		this.chart_container.appendTo(this.container);
 
@@ -148,6 +155,7 @@ class DashboardChart {
 	}
 
 	fetch(filters, refresh=false) {
+		this.chart_container.find('.chart-loading-status').removeClass('hide');
 		return frappe.xcall(
 			this.settings.method_path,
 			{
@@ -172,6 +180,8 @@ class DashboardChart {
 				xIsSeries: this.settings.is_time_series
 			},
 		};
+		this.chart_container.find('.chart-loading-status').addClass('hide');
+
 		if(!this.chart) {
 			this.chart = new Chart(this.chart_container.find(".chart-wrapper")[0], chart_args);
 		} else {

frappe/core/page/dashboard/dashboard.py

@@ -9,11 +9,8 @@ def cache_source(function):
 	def wrapper(*args, **kwargs):
 		filters = json.loads(kwargs.get("filters", "{}"))
 		chart_name = kwargs.get("chart_name")
-		cache_key = json.dumps({
-			"name": chart_name,
-			"filters": filters
-		}, default=str)
-		if kwargs.get("refresh"):
+		cache_key = 'chart-data:{}:{}'.format(chart_name, json.dumps(filters))
+		if int(kwargs.get("refresh") or 0):
 			results = generate_and_cache_results(chart_name, function, filters, cache_key)
 		else:
 			cached_results = frappe.cache().get_value(cache_key)
@@ -24,7 +21,6 @@ def cache_source(function):
 		return results
 	return wrapper
 
-
 def generate_and_cache_results(chart_name, function, filters, cache_key):
 	results = function(frappe._dict(filters))
 	frappe.cache().set_value(cache_key, json.dumps(results, default=str))