[IMP] web: graph view: design improvements

This commit improves UI of charts:

- Reduce margins of svg
- Put ticks label on right of y axis
- Bigger lines (line chart only)
- ligther area color (line chart only)
- Hide y axis line
- Force charts to begin at y=0
- Hide zero tick on y axes

There is no test because these changes only concerns visual effects.

Task ID: 1877588

addons/web/static/src/js/views/graph/graph_renderer.js

@@ -308,8 +308,8 @@ return AbstractRenderer.extend({
         this.state.data.forEach(self._sanitizeLabel);
 
         var data = [];
-        var tickValues;
-        var tickFormat;
+        var ticksLabels = [];
+        var tickValues = [];
         var measure = this.state.fields[this.state.measure].string;
         var values;
 
@@ -345,7 +345,6 @@ return AbstractRenderer.extend({
                 });
             }
 
-            var ticksLabels = [];
             for (i = 0; i < graphData.length; i++) {
                 ticksLabels.push(graphData[i].labels);
             }
@@ -363,22 +362,17 @@ return AbstractRenderer.extend({
                     }
                 }
             }
-
-            tickFormat = function (d) {
-                return ticksLabels[d];
-            };
         } else if (this.state.groupedBy.length > 1) {
             var data_dict = {};
             var tick = 0;
-            var tickLabels = [];
             var serie, tickLabel;
             var identity = function (p) {return p;};
-            tickValues = [];
+
             for (var i = 0; i < this.state.data.length; i++) {
                 if (graphData[i].labels[0] !== tickLabel) {
                     tickLabel = this.state.data[i].labels[0];
                     tickValues.push(tick);
-                    tickLabels.push(tickLabel);
+                    ticksLabels.push(tickLabel);
                     tick++;
                 }
                 serie = graphData[i].labels[1];
@@ -393,8 +387,8 @@ return AbstractRenderer.extend({
                 });
                 data = _.map(data_dict, identity);
             }
-            tickFormat = function (d) {return tickLabels[d];};
         }
+
         var $svgContainer = $('<div/>', {class: 'o_graph_svg_container'});
         this.$el.append($svgContainer);
         var svg = d3.select($svgContainer[0]).append('svg');
@@ -404,22 +398,34 @@ return AbstractRenderer.extend({
 
         var chart = nv.models.lineChart();
         chart.options({
-          margin: {left: 80, bottom: 100, top: 80, right: 80},
+          margin: {left: 0, bottom: 20, top: 0, right: 0},
           useInteractiveGuideline: true,
           showLegend: _.size(data) <= MAX_LEGEND_LENGTH,
           showXAxis: true,
           showYAxis: true,
           wrapLabels: true,
         });
-        chart.xAxis.tickValues(tickValues)
-            .tickFormat(tickFormat);
-        chart.yAxis.tickFormat(function (d) {
-            return field_utils.format.float(d, {
-                digits : self.state.fields[self.state.measure] && self.state.fields[self.state.measure].digits || [69, 2],
+        chart.forceY([0]);
+        chart.xAxis
+            .tickValues(tickValues)
+            .tickFormat(function (d) {
+                return ticksLabels[d];
             });
-        });
+        chart.yAxis
+            .showMaxMin(false)
+            .tickFormat(function (d) {
+                return field_utils.format.float(d, {
+                    digits : self.state.fields[self.state.measure] && self.state.fields[self.state.measure].digits || [69, 2],
+                });
+            });
+        chart.yAxis.tickPadding(5);
+        chart.yAxis.orient("right");
 
         chart(svg);
+
+        // Bigger line (stroke-width 1.5 is hardcoded in nv.d3)
+        $svgContainer.find('.nvd3 .nv-groups g.nv-group').css('stroke-width', '3px')
+
         return chart;
     },
     /**
@@ -441,6 +447,14 @@ return AbstractRenderer.extend({
             }
         }
         var chart1 = this['_render' + _.str.capitalize(this.state.mode) + 'Chart'](this.state.data);
+
+        // FIXME: When 'orient' is right for Y axis, horizontal lines aren't displayed correctly
+        chart1.dispatch.on('renderEnd', function () {
+            $('.nv-y .tick > line').attr('x2', function (i, value) {
+                return Math.abs(value);
+            });
+        })
+
         chartResize(chart1);
         if (this.state.mode === 'pie' && this.isComparison) {
             var chart2 = this['_render' + _.str.capitalize(this.state.mode) + 'Chart'](this.state.comparisonData);

addons/web/static/src/scss/graph_view.scss

@@ -8,6 +8,16 @@
             overflow: auto;
             svg {
                 background-color: $o-view-background-color;
+                .nv-y {
+                    path.domain, g.tick.zero {
+                        // Hide y axis line and zero tick label
+                        display: none;
+                    }
+                }
+                .nv-groups path.nv-area {
+                    // ligther area color
+                    fill-opacity: 0.1;
+                }
             }
         }
     }