[IMP] web: graph: add bar/line chart sorting

PURPOSE

Currently, reporting views such as the bar and line charts have
their x-axis sorted either alphabetically  or according to a
sequence. When reporting, the user would be interested in sorting
the x-axis values by their measure.

SPECIFICATIONS

Add 'ascending' and 'descending' options in graph view for bar and
line charts

Task 2070103

closes odoo/odoo#49970

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
Co-authored-by: Mohammed Shekha <msh@odoo.com>

4 files changed, 48 insertions, 0 deletions

diff --git a/addons/web/static/src/js/views/graph/graph_controller.js b/addons/web/static/src/js/views/graph/graph_controller.js
index eb5fd107081..f33db981667 100644
--- a/addons/web/static/src/js/views/graph/graph_controller.js
+++ b/addons/web/static/src/js/views/graph/graph_controller.js
@@ -184,6 +184,11 @@ var GraphController = AbstractController.extend({
             .data('stacked', state.stacked)
             .toggleClass('active', state.stacked)
             .toggleClass('o_hidden', state.mode !== 'bar');
+        this.$buttons
+            .find('.o_graph_button[data-order]')
+            .toggleClass('o_hidden', state.mode === 'pie' || !!Object.keys(state.timeRanges).length)
+            .filter('.o_graph_button[data-order="' + state.orderBy + '"]')
+            .toggleClass('active', !!state.orderBy);
     },
 
     //--------------------------------------------------------------------------
@@ -258,6 +263,10 @@ var GraphController = AbstractController.extend({
                 this.update({ mode: $target.data('mode') });
             } else if ($target.data('mode') === 'stack') {
                 this.update({ stacked: !$target.data('stacked') });
+            } else if (['asc', 'desc'].includes($target.data('order'))) {
+                const order = $target.data('order');
+                const state = this.model.get();
+                this.update({ orderBy: state.orderBy === order ? false : order });
             }
         }
     },
diff --git a/addons/web/static/src/js/views/graph/graph_model.js b/addons/web/static/src/js/views/graph/graph_model.js
index e1411324c77..6ee4d06651e 100644
--- a/addons/web/static/src/js/views/graph/graph_model.js
+++ b/addons/web/static/src/js/views/graph/graph_model.js
@@ -72,6 +72,7 @@ return AbstractModel.extend({
             origins: [],
             stacked: params.stacked,
             timeRanges: params.timeRanges,
+            orderBy: params.orderBy
         });
 
         this._computeDerivedParams();
@@ -126,6 +127,10 @@ return AbstractModel.extend({
             this.chart.stacked = params.stacked;
             return Promise.resolve();
         }
+        if ('orderBy' in params) {
+            this.chart.orderBy = params.orderBy;
+            return Promise.resolve();
+        }
         return this._loadGraph();
     },
 
diff --git a/addons/web/static/src/js/views/graph/graph_renderer.js b/addons/web/static/src/js/views/graph/graph_renderer.js
index 35e78690528..c179a08216e 100644
--- a/addons/web/static/src/js/views/graph/graph_renderer.js
+++ b/addons/web/static/src/js/views/graph/graph_renderer.js
@@ -769,6 +769,7 @@ return AbstractRenderer.extend({
             });
         }
         var dataPoints = this._filterDataPoints();
+        dataPoints = this._sortDataPoints(dataPoints);
         if (!dataPoints.length && this.state.mode !== 'pie') {
             this.$el.append(qweb.render('View.NoContentHelper'));
         } else if (this.isInDOM) {
@@ -1006,6 +1007,38 @@ return AbstractRenderer.extend({
         }
         return shortLabel;
     },
+    /**
+     * Sort datapoints according to the current order (ASC or DESC).
+     *
+     * Note: this should be moved to the model at some point.
+     *
+     * @private
+     * @param {Object[]} dataPoints
+     * @returns {Object[]} sorted dataPoints if orderby set on state
+     */
+    _sortDataPoints(dataPoints) {
+        if (!Object.keys(this.state.timeRanges).length && this.state.orderBy &&
+            ['bar', 'line'].includes(this.state.mode) && this.state.groupBy.length) {
+            // group data by their x-axis value, and then sort datapoints
+            // based on the sum of values by group in ascending/descending order
+            const groupByFieldName = this.state.groupBy[0].split(':')[0];
+            const groupedByMany2One = this.fields[groupByFieldName].type === 'many2one';
+            const groupedDataPoints = {};
+            dataPoints.forEach(function (dataPoint) {
+                const key = groupedByMany2One ? dataPoint.resId : dataPoint.labels[0];
+                groupedDataPoints[key] = groupedDataPoints[key] || [];
+                groupedDataPoints[key].push(dataPoint);
+            });
+            dataPoints = _.sortBy(groupedDataPoints, function (group) {
+                return group.reduce((sum, dataPoint) => sum + dataPoint.value, 0);
+            });
+            dataPoints = dataPoints.flat();
+            if (this.state.orderBy === 'desc') {
+                dataPoints = dataPoints.reverse('value');
+            }
+        }
+        return dataPoints;
+    },
 
     //--------------------------------------------------------------------------
     // Handlers
diff --git a/addons/web/static/src/js/views/graph/graph_view.js b/addons/web/static/src/js/views/graph/graph_view.js
index 5ae120343c6..dbfd9f0e211 100644
--- a/addons/web/static/src/js/views/graph/graph_view.js
+++ b/addons/web/static/src/js/views/graph/graph_view.js
@@ -134,6 +134,7 @@ var GraphView = AbstractView.extend({
         this.rendererParams.disableLinking = !!JSON.parse(this.arch.attrs.disable_linking || '0');
 
         this.loadParams.mode = this.arch.attrs.type || 'bar';
+        this.loadParams.orderBy = this.arch.attrs.order;
         this.loadParams.measure = measure || '__count__';
         this.loadParams.groupBys = groupBys;
         this.loadParams.fields = this.fields;