diff --git a/erpnext/public/css/erpnext.css b/erpnext/public/css/erpnext.css
index 13fdcf15010..460efbfe9fe 100644
--- a/erpnext/public/css/erpnext.css
+++ b/erpnext/public/css/erpnext.css
@@ -356,3 +356,12 @@ body[data-route="pos"] .collapse-btn {
border-radius: 3px;
color: #fff;
}
+.leaderboard .result {
+ border-top: 1px solid #d1d8dd;
+}
+.leaderboard .list-item {
+ padding-left: 45px;
+}
+.leaderboard .list-item_content {
+ padding-right: 45px;
+}
diff --git a/erpnext/public/less/erpnext.less b/erpnext/public/less/erpnext.less
index de46c53df88..d0c4841cc4f 100644
--- a/erpnext/public/less/erpnext.less
+++ b/erpnext/public/less/erpnext.less
@@ -423,4 +423,19 @@ body[data-route="pos"] {
padding: 5px 9px;
border-radius: 3px;
color: #fff;
+
+}
+
+// Leaderboard
+
+.leaderboard {
+ .result {
+ border-top: 1px solid #d1d8dd;
+ }
+ .list-item {
+ padding-left: 45px;
+ }
+ .list-item_content {
+ padding-right: 45px;
+ }
}
\ No newline at end of file
diff --git a/erpnext/utilities/page/leaderboard/leaderboard.html b/erpnext/utilities/page/leaderboard/leaderboard.html
deleted file mode 100644
index 8df224750cb..00000000000
--- a/erpnext/utilities/page/leaderboard/leaderboard.html
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-
-
-
- {% for (var i=0; i < doctypes.length; i++) { %}
- {{ doctypes[i] }}
- {% } %}
-
-
-
-
-
- {% for (var i=0; i < timelines.length; i++) { %}
- {{ timelines[i] }}
- {% } %}
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/erpnext/utilities/page/leaderboard/leaderboard.js b/erpnext/utilities/page/leaderboard/leaderboard.js
index eed9bd18657..0d16ab0ad0a 100644
--- a/erpnext/utilities/page/leaderboard/leaderboard.js
+++ b/erpnext/utilities/page/leaderboard/leaderboard.js
@@ -1,114 +1,166 @@
+frappe.pages["leaderboard"].on_page_load = function (wrapper) {
+ frappe.leaderboard = new frappe.Leaderboard(wrapper);
+}
frappe.Leaderboard = Class.extend({
init: function (parent) {
- this.page = frappe.ui.make_app_page({
+ frappe.ui.make_app_page({
parent: parent,
title: "Leaderboard",
- single_column: true
+ single_column: false
});
+ this.parent = parent;
+ this.page = this.parent.page;
+ this.page.sidebar.html(``);
+ this.$sidebar_list = this.page.sidebar.find('ul');
+
// const list of doctypes
this.doctypes = ["Customer", "Item", "Supplier", "Sales Partner"];
- this.timelines = ["Week", "Month", "Quarter", "Year"];
+ this.timespans = ["Week", "Month", "Quarter", "Year"];
this.desc_fields = ["total_amount", "total_request", "annual_billing", "commission_rate"];
this.filters = {
- "Customer": this.map_array(["title", "total_amount", "total_item_purchased", "modified"]),
- "Item": this.map_array(["title", "total_request", "total_purchase", "avg_price", "modified"]),
- "Supplier": this.map_array(["title", "annual_billing", "total_unpaid", "modified"]),
- "Sales Partner": this.map_array(["title", "commission_rate", "target_qty", "target_amount", "modified"]),
+ "Customer": ["total_amount", "total_item_purchased"],
+ "Item": ["total_request", "total_purchase", "avg_price"],
+ "Supplier": ["annual_billing", "total_unpaid"],
+ "Sales Partner": ["commission_rate", "target_qty", "target_amount"],
};
// for saving current selected filters
- const _selected_filter = this.filters[this.doctypes[0]];
+ // TODO: revert to 0 index for doctype and timespan, and remove preset down
+ const _initial_doctype = this.doctypes[0];
+ const _initial_timespan = this.timespans[0];
+ const _initial_filter = this.filters[_initial_doctype];
+
this.options = {
- selected_doctype: this.doctypes[0],
- selected_filter: _selected_filter,
- selected_filter_item: _selected_filter[1],
- selected_timeline: this.timelines[0],
+ selected_doctype: _initial_doctype,
+ selected_filter: _initial_filter,
+ selected_filter_item: _initial_filter[0],
+ selected_timespan: _initial_timespan,
};
this.message = null;
this.make();
},
-
-
make: function () {
var me = this;
- var $leaderboard = $(frappe.render_template("leaderboard", this)).appendTo(this.page.main);
+ var $container = $(``).appendTo(this.page.main);
- // events
- $leaderboard.find(".select-doctype")
- .on("change", function () {
- me.options.selected_doctype = this.value;
- me.options.selected_filter = me.filters[this.value];
- me.options.selected_filter_item = me.filters[this.value][1];
- me.make_request($leaderboard);
- });
+ this.$graph_area = $container.find('.leaderboard-graph');
- $leaderboard.find(".select-time")
- .on("change", function () {
- me.options.selected_timeline = this.value;
- me.make_request($leaderboard);
- });
+ this.doctypes.map(doctype => {
+ this.get_sidebar_item(doctype).appendTo(this.$sidebar_list);
+ });
+
+ this.timespan_select = this.page.add_select(__("Timespan"),
+ this.timespans.map(d => {
+ return {"label": __(d), value: d }
+ })
+ );
+
+ // this.timespan_select.val(this.timespans[1]);
+
+ this.type_select = this.page.add_select(__("Type"),
+ me.options.selected_filter.map(d => {
+ return {"label": __(frappe.model.unscrub(d)), value: d }
+ })
+ );
+
+ this.$sidebar_list.on('click', 'li', function(e) {
+ let $li = $(this);
+ let doctype = $li.find('span').html();
+
+ me.options.selected_doctype = doctype;
+ me.options.selected_filter = me.filters[doctype];
+ me.options.selected_filter_item = me.filters[doctype][0];
+
+ me.type_select.empty().add_options(
+ me.options.selected_filter.map(d => {
+ return {"label": __(frappe.model.unscrub(d)), value: d }
+ })
+ );
+
+ me.$sidebar_list.find('li').removeClass('active');
+ $li.addClass('active');
+
+ me.make_request($container);
+ });
+
+ this.timespan_select.on("change", function() {
+ me.options.selected_timespan = this.value;
+ me.make_request($container);
+ });
+
+ this.type_select.on("change", function() {
+ me.options.selected_filter_item = this.value
+ me.make_request($container);
+ });
// now get leaderboard
- me.make_request($leaderboard);
+ this.$sidebar_list.find('li:first').trigger('click');
},
- make_request: function ($leaderboard) {
+ make_request: function ($container) {
var me = this;
frappe.model.with_doctype(me.options.selected_doctype, function () {
- me.get_leaderboard(me.get_leaderboard_data, $leaderboard);
+ me.get_leaderboard(me.get_leaderboard_data, $container);
});
},
- get_leaderboard: function (notify, $leaderboard) {
+ get_leaderboard: function (notify, $container, start=0) {
var me = this;
frappe.call({
method: "erpnext.utilities.page.leaderboard.leaderboard.get_leaderboard",
args: {
- obj: JSON.stringify(me.options)
+ doctype: me.options.selected_doctype,
+ timespan: me.options.selected_timespan,
+ field: me.options.selected_filter_item,
+ start: start
},
- callback: function (res) {
- console.log(res)
- notify(me, res, $leaderboard);
+ callback: function (r) {
+ let results = r.message || [];
+
+ let graph_items = results.slice(0, 10);
+
+ me.$graph_area.show().empty();
+ let args = {
+ parent: me.$graph_area,
+ y: [
+ {
+ color: 'light-green',
+ values: graph_items.map(d=>d.value),
+ formatted: graph_items.map(d=>d[me.options.selected_filter_item])
+ }
+ ],
+ x: {
+ values: graph_items.map(d=>d.name)
+ },
+ mode: 'bar',
+ height: 140
+ };
+ new frappe.ui.Graph(args);
+
+ notify(me, r, $container);
}
});
},
- get_leaderboard_data: function (me, res, $leaderboard) {
+ get_leaderboard_data: function (me, res, $container) {
if (res && res.message) {
me.message = null;
- $leaderboard.find(".leaderboard").html(me.render_list_view(res.message));
-
- // event to change arrow
- $leaderboard.find(".leaderboard-item")
- .click(function () {
- const field = this.innerText.trim().toLowerCase().replace(new RegExp(" ", "g"), "_");
- if (field && field !== "title") {
- const _selected_filter_item = me.options.selected_filter
- .filter(i => i.field === field);
- if (_selected_filter_item.length > 0) {
- me.options.selected_filter_item = _selected_filter_item[0];
- me.options.selected_filter_item.value = _selected_filter_item[0].value === "ASC" ? "DESC" : "ASC";
-
- const new_class_name = `icon-${me.options.selected_filter_item.field} fa fa-chevron-${me.options.selected_filter_item.value === "ASC" ? "up" : "down"}`;
- $leaderboard.find(`.icon-${me.options.selected_filter_item.field}`)
- .attr("class", new_class_name);
-
- // now make request to web
- me.make_request($leaderboard);
- }
- }
- });
+ $container.find(".leaderboard-list").html(me.render_list_view(res.message));
} else {
+ me.$graph_area.hide();
me.message = "No items found.";
- $leaderboard.find(".leaderboard").html(me.render_list_view());
+ $container.find(".leaderboard-list").html(me.render_list_view());
}
},
@@ -129,7 +181,7 @@ frappe.Leaderboard = Class.extend({
var html =
`${me.render_list_header()}
- ${me.render_list_result(items)}`;
+ ${me.render_list_result(items)}`;
return html;
},
@@ -137,23 +189,21 @@ frappe.Leaderboard = Class.extend({
render_list_header: function () {
var me = this;
const _selected_filter = me.options.selected_filter
- .map(i => me.map_field(i.field)).slice(1);
+ .map(i => frappe.model.unscrub(i));
+ const fields = ['name', me.options.selected_filter_item];
const html =
`