[IMP] web: use Chart.js in graph view

It has been decided to use Chart.js instead of nvd3 to render charts.
In this commit the graph view has been largely rewritten to benefit
from the options offered by Chart.js.

Task ID: 1946138

1 files changed, 33 insertions, 6 deletions

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 33b8896b29d..0ab8d4c0570 100644
--- a/addons/web/static/src/js/views/graph/graph_model.js
+++ b/addons/web/static/src/js/views/graph/graph_model.js
@@ -25,12 +25,18 @@ return AbstractModel.extend({
     //--------------------------------------------------------------------------
 
     /**
-     * override
      *
+     * We defend against outside modifications by extending the chart data. It
+     * may be overkill.
+     *
+     * @override
      * @returns {Object}
      */
     get: function () {
-        return this.chart;
+        var self = this;
+        return _.extend({}, this.chart, {
+            comparisonFieldIndex: self._getComparisonFieldIndex(),
+        });
     },
     /**
      * Initial loading.
@@ -44,7 +50,9 @@ return AbstractModel.extend({
      * @param {Object} params.fields
      * @param {string[]} params.comparisonTimeRange
      * @param {string[]} params.domain
-     * @param {string[]} params.groupBy a list of valid field names
+     * @param {string[]} params.groupBys a list of valid field names
+     * @param {string[]} params.groupedBy a list of valid field names
+     * @param {boolean} params.stacked
      * @param {string[]} params.timeRange
      * @param {string} params.comparisonField
      * @param {string} params.comparisonTimeRangeDescription
@@ -72,6 +80,7 @@ return AbstractModel.extend({
             measure: params.context.graph_measure || params.measure,
             mode: params.context.graph_mode || params.mode,
             origins: [],
+            stacked: params.stacked,
             timeRange: params.timeRange,
             timeRangeDescription: params.timeRangeDescription,
         };
@@ -86,6 +95,7 @@ return AbstractModel.extend({
      *
      * @param {any} handle ignored!
      * @param {Object} params
+     * @param {boolean} [params.stacked]
      * @param {Object} [params.context]
      * @param {string[]} [params.domain]
      * @param {string[]} [params.groupBy]
@@ -129,6 +139,10 @@ return AbstractModel.extend({
             this.chart.mode = params.mode;
             return Promise.resolve();
         }
+        if ('stacked' in params) {
+            this.chart.stacked = params.stacked;
+            return Promise.resolve();
+        }
         return this._loadGraph(this._getDomains());
     },
 
@@ -137,24 +151,35 @@ return AbstractModel.extend({
     //--------------------------------------------------------------------------
 
     /**
-     * @returns {Object[]}
+     * @private
+     * @returns {number}
+     */
+    _getComparisonFieldIndex: function () {
+        var groupBys = this.chart.groupBy.map(function (gb) {
+            return gb.split(":")[0];
+        });
+        return groupBys.indexOf(this.chart.comparisonField);
+    },
+    /**
+     * @private
+     * @returns {Array[]}
      */
     _getDomains: function () {
         var domains = [this.chart.domain.concat(this.chart.timeRange)];
-        this.chart.origins = [this.chart.timeRangeDescription];
+        this.chart.origins = [this.chart.timeRangeDescription || ""];
         if (this.chart.compare) {
             domains.push(this.chart.domain.concat(this.chart.comparisonTimeRange));
             this.chart.origins.push(this.chart.comparisonTimeRangeDescription);
         }
         return domains;
     },
-
     /**
      * Fetch and process graph data.  It is basically a(some) read_group(s)
      * with correct fields for each domain.  We have to do some light processing
      * to separate date groups in the field list, because they can be defined
      * with an aggregation function, such as my_date:week.
      *
+     * @private
      * @param {Array[]} domains
      * @returns {Promise}
      */
@@ -200,6 +225,7 @@ return AbstractModel.extend({
      *  the object this.chart in argument, or an array or something. We want to
      *  avoid writing on a this.chart object modified by a subsequent read_group
      *
+     * @private
      * @param {number} originIndex
      * @param {any} rawData result from the read_group
      */
@@ -239,6 +265,7 @@ return AbstractModel.extend({
      * Helper function (for _processData), turns various values in a usable
      * string form, that we can display in the interface.
      *
+     * @private
      * @param {any} value value for the field fieldName received by the read_group rpc
      * @param {string} fieldName
      * @returns {string}