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(`
- ${caret_html}
- ${Math.abs(this.percentage_stat)} %
+
+ ${caret_html}
+ ${Math.abs(this.percentage_stat)} %
+
+
+ ${stats_qualifier}
+
`);
});
}
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 {