From f87f61e6d74f4554f79dde29863453d00a8848ce Mon Sep 17 00:00:00 2001
From: prssanna <prssud@gmail.com>
Date: Fri, 1 May 2020 11:45:58 +0530
Subject: [PATCH] fix: add qualifier for card stats

---
 .../js/frappe/widgets/number_card_widget.js   | 18 +++++++++++++--
 frappe/public/less/dashboard_view.less        |  2 +-
 frappe/public/less/desktop.less               | 22 ++++++++++++++-----
 3 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/frappe/public/js/frappe/widgets/number_card_widget.js b/frappe/public/js/frappe/widgets/number_card_widget.js
index ba96a1959e..00728a66d9 100644
--- a/frappe/public/js/frappe/widgets/number_card_widget.js
+++ b/frappe/public/js/frappe/widgets/number_card_widget.js
@@ -59,6 +59,7 @@ export default class NumberCardWidget extends Widget {
 			}
 		).then(doc => {
 			this.name = doc.name;
+			this.card_doc.stats_time_interval = doc.stats_time_interval;
 			this.card_doc.name = this.name;
 			this.widget.attr('data-widget-name', this.name);
 		});
@@ -152,9 +153,22 @@ export default class NumberCardWidget extends Widget {
 				color_class = 'red-stat';
 			}
 
+			const stats_qualifier_map = {
+				'Daily': __('since yesterday'),
+				'Weekly': __('since last week'),
+				'Monthly': __('since last month'),
+				'Yearly': __('since last year')
+			}
+			const stats_qualifier = stats_qualifier_map[this.card_doc.stats_time_interval];
+
 			$(this.body).find('.widget-content').append(`<div class="card-stats ${color_class}">
-				${caret_html}
-				<span class="percentage-stat">${Math.abs(this.percentage_stat)} %</span>
+				<span class="percentage-stat">
+					${caret_html}
+					${Math.abs(this.percentage_stat)} %
+				</span>
+				<span class="stat-period text-muted">
+					${stats_qualifier}
+				</span>
 			</div>`);
 		});
 	}
diff --git a/frappe/public/less/dashboard_view.less b/frappe/public/less/dashboard_view.less
index 2b3d642cfb..c26045c21b 100644
--- a/frappe/public/less/dashboard_view.less
+++ b/frappe/public/less/dashboard_view.less
@@ -12,7 +12,7 @@
         }
 
         .new-number-card-widget {
-            min-height: 100px;
+            min-height: 110px;
         }
     }
 
diff --git a/frappe/public/less/desktop.less b/frappe/public/less/desktop.less
index fd24ec02bb..47d19f50e6 100644
--- a/frappe/public/less/desktop.less
+++ b/frappe/public/less/desktop.less
@@ -395,7 +395,7 @@
 
 	&.number-widget-box {
 		cursor: pointer;
-		height: 100px;
+		height: 110px;
 		padding: 10px;
 
 		&:hover {
@@ -428,13 +428,13 @@
 			}
 
 			.widget-content {
-				padding-top: 20px;
+				padding-top: 30px;
 				display: flex;
 				justify-content: space-between;
 
 				.number {
-					font-size: 26px;
-					font-weight: bold;
+					font-size: 25px;
+					line-height: 2em;
 				}
 
 				.number-text {
@@ -444,7 +444,19 @@
 				}
 
 				.card-stats {
-					padding-top: 15px;
+					padding-top: 5px;
+				}
+
+				.percentage-stat {
+					float: right;
+					clear: right;
+					font-size: 12px;
+				}
+
+				.stat-period {
+					float: right;
+					clear: right;
+					font-size: 11px;
 				}
 
 				.green-stat {