[IMP] website(_sale): Improve UX for the website dashboard

Purpose
=======

There are some usability issues in the website dashboard

Specification
=============

1/ Move button 'Go to Website' in the header
2/ Hide the action button bar if there's nothing in it
3/ Align the labels in the graph's legend
4/ Make the legend labels and display more obvious
5/ Modify the graph colors to be more readable
6/ Remove margins around todo buttons

1 files changed, 13 insertions, 5 deletions

diff --git a/addons/website/static/src/js/backend/dashboard.js b/addons/website/static/src/js/backend/dashboard.js
index a4c69885d62..9aae072e155 100644
--- a/addons/website/static/src/js/backend/dashboard.js
+++ b/addons/website/static/src/js/backend/dashboard.js
@@ -36,7 +36,7 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
         this.date_from = moment().subtract(1, 'week');
         this.date_to = moment();
 
-        this.dashboards_templates = ['website.dashboard_visits'];
+        this.dashboards_templates = ['website.dashboard_header', 'website.dashboard_content'];
         this.graphs = [];
     },
 
@@ -51,7 +51,6 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
         var self = this;
         return this._super().then(function() {
             self.update_cp();
-            self.render_dashboards();
             self.render_graphs();
             self.$el.parent().addClass('oe_background_grey');
         });
@@ -126,7 +125,7 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
     render_dashboards: function() {
         var self = this;
         _.each(this.dashboards_templates, function(template) {
-            self.$('.o_website_dashboard_content').append(QWeb.render(template, {widget: self}));
+            self.$('.o_website_dashboard').append(QWeb.render(template, {widget: self}));
         });
     },
 
@@ -152,6 +151,14 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
                 .tickValues(_.map(tick_values, function(d) { return self.getDate(d); }))
                 .rotateLabels(-45);
 
+            chart.interactiveLayer.tooltip.contentGenerator(function(data) {
+                return QWeb.render('website.SalesChartTooltip', {
+                    format: field_utils.format,
+                    chartData: data,
+                    dateRange: self.date_range
+                });
+            });
+
             chart.yAxis
                 .tickFormat(d3.format('.02f'));
 
@@ -172,7 +179,7 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
         var self = this;
         _.each(this.graphs, function(e) {
             if (self.groups[e.group]) {
-                self.render_graph('#o_graph_' + e.name, self.dashboards_data[e.name].graph);
+                self.render_graph('.o_graph_' + e.name, self.dashboards_data[e.name].graph);
             }
         });
         this.render_graph_analytics(this.dashboards_data.visits.ga_client_id);
@@ -230,7 +237,7 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
 
         var self = this;
         $.when(this.fetch_data()).then(function() {
-            self.$('.o_website_dashboard_content').empty();
+            self.$('.o_website_dashboard').empty();
             self.render_dashboards();
             self.render_graphs();
         });
@@ -294,6 +301,7 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
         this.update_control_panel({
             cp_content: {
                 $searchview: this.$searchview,
+                $buttons: QWeb.render("website.GoToButtons"),
             },
             breadcrumbs: this.getParent().get_breadcrumbs(),
         });