[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

3 files changed, 100 insertions, 48 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(),
         });
diff --git a/addons/website/static/src/less/website.backendDashboard.less b/addons/website/static/src/less/website.backendDashboard.less
index c818704e175..2021761aa1c 100644
--- a/addons/website/static/src/less/website.backendDashboard.less
+++ b/addons/website/static/src/less/website.backendDashboard.less
@@ -8,7 +8,7 @@
             color: @odoo-main-color-muted;
             background-color: @odoo-view-background-color;
             background-size: cover;
-            margin-bottom: @odoo-horizontal-padding;
+            margin-top: @odoo-horizontal-padding;
             position: static;
             box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
 
@@ -20,7 +20,7 @@
 
             h4 { margin: 0 0 0 8px; }
 
-            .col-md-6, .col-md-12 {
+            .col-md-7, .col-xs-12 {
                 padding: 15px;
 
                 .js_field_selection {
@@ -36,7 +36,11 @@
 
                 table {
 
-                    tr:nth-child(even) {
+                    tr:first-child {
+                        background: white;
+                    }
+
+                    tr:nth-child(even):not(:hover) {
                         background: #f5f6f7;
                     }
 
@@ -53,6 +57,9 @@
                             text-align: left;
                         }
                     }
+                    .o_tooltip_key {
+                        text-align: left;
+                    }
                 }
 
                 /*------------------------------------------*/
@@ -75,23 +82,26 @@
                         opacity: 0 !important;
                     }
 
-                    [class*="nv-series-"] {
-                        stroke-width: 3 !important;
-                        fill: @odoo-main-color-muted !important;
-                    }
-
-                    .nv-groups .nv-point, g circle {
-                        fill: @odoo-brand-optional;
-                    }
-
-                    .nv-groups .nv-point {
-                        fill-opacity: 1 !important;
-                        stroke-opacity: 1 !important;
-                        stroke: @odoo-brand-optional;
-                    }
-
-                    .nv-groups .nv-point.hover, .nv-group.nv-noninteractive .nv-point.hover {
-                        stroke: darken(@odoo-brand-optional, 10%);
+                    .nv-groups {
+                        .nv-series-0 {
+                            stroke-width: 3 !important;
+                            .nv-point {
+                                stroke: @odoo-brand-optional;
+                                stroke-opacity: 1 !important;
+                                &.hover {
+                                    stroke: darken(@odoo-brand-optional, 10%);
+                                }
+                            }
+                        }
+                        .nv-series-1 {
+                            .nv-point {
+                                stroke: @odoo-main-color-muted !important;
+                                stroke-opacity: 1 !important;
+                                &.hover {
+                                    stroke: darken(@odoo-main-color-muted, 10%);
+                                }
+                            }
+                        }
                     }
                 }
 
@@ -118,7 +128,7 @@
                 display: flex;
                 flex-flow: row wrap;
                 justify-content: flex-start;
-                > .o_box_item {
+                > .o_inner_box {
                     @media (max-width: @screen-sm-min) {
                         flex: 1 1 200px;
                         display: block !important;
@@ -136,15 +146,12 @@
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
-                &.o_main {
-                    background-color: @odoo-brand-optional;
+                cursor: pointer;
+                color: white;
+                background-color: @odoo-brand-optional;
                     &:hover {
                         background-color: darken(@odoo-brand-optional, 10%);
                     }
-                    a {
-                        color: white;
-                    }
-                }
                 &.o_primary {
                     background-color: @odoo-brand-primary;
                     color: white;
@@ -158,6 +165,15 @@
             }
         }
 
+        .o_graph_sales {
+            .o_legend0 {
+                background-color: @odoo-brand-optional;
+            }
+            .o_legend1 {
+                background-color: @odoo-main-color-muted;
+            }
+        }
+
         .o_dashboard_visits {
 
             h2 {
diff --git a/addons/website/static/src/xml/website.backend.xml b/addons/website/static/src/xml/website.backend.xml
index bc7248bbcf4..cbddc2840b9 100644
--- a/addons/website/static/src/xml/website.backend.xml
+++ b/addons/website/static/src/xml/website.backend.xml
@@ -9,7 +9,7 @@
         <div class="o_dashboards">
             <div class="container-fluid o_website_dashboard">
                 <t t-call="website.dashboard_header"/>
-                <div class="o_website_dashboard_content"/>
+                <t t-call="website.dashboard_content"/>
             </div>
         </div>
     </t>
@@ -18,21 +18,23 @@
         <div class="row o_dashboard_common"/>
     </t>
 
-    <t t-name="website.dashboard_visits">
-        <div class="row o_dashboard_visits" t-if="widget.groups.website_designer">
-            <div class="col-xs-12 o_box">
-                <h2>Visits</h2>
-                <div t-if="widget.dashboards_data.visits &amp;&amp; widget.dashboards_data.visits.ga_client_id">
-                    <div class="row js_analytics_components"/>
-                    <a href="#" class="js_link_analytics_settings">Edit my Analytics Client ID</a>
-                </div>
-                <div t-if="!(widget.dashboards_data.visits &amp;&amp; widget.dashboards_data.visits.ga_client_id)" class="col-md-12">
-                    <div class="o_demo_background">
-                        <div class="o_layer">
-                        </div>
-                        <div class="o_buttons text-center">
-                            <h3>There is no data currently available.</h3>
-                            <button class="btn btn-sm btn-primary js_link_analytics_settings center-block mb8">Link my Analytics Account</button>
+    <t t-name="website.dashboard_content">
+        <div class="o_website_dashboard_content">
+            <div class="row o_dashboard_visits" t-if="widget.groups.website_designer">
+                <div class="col-xs-12 o_box">
+                    <h2>Visits</h2>
+                    <div t-if="widget.dashboards_data.visits &amp;&amp; widget.dashboards_data.visits.ga_client_id">
+                        <div class="row js_analytics_components"/>
+                        <a href="#" class="js_link_analytics_settings">Edit my Analytics Client ID</a>
+                    </div>
+                    <div t-if="!(widget.dashboards_data.visits &amp;&amp; widget.dashboards_data.visits.ga_client_id)" class="col-md-12">
+                        <div class="o_demo_background">
+                            <div class="o_layer">
+                            </div>
+                            <div class="o_buttons text-center">
+                                <h3>There is no data currently available.</h3>
+                                <button class="btn btn-sm btn-primary js_link_analytics_settings center-block mb8">Link my Analytics Account</button>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -66,4 +68,30 @@
         </div>
     </t>
 
+    <t t-name="website.SalesChartTooltip">
+        <table>
+            <thead>
+                <tr><td colspan="3"><strong><t t-esc="chartData.series[0].key"/></strong></td></tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td class="legend-color-guide"><div class="o_legend0"/></td>
+                    <td class="key o_tooltip_key"><t t-esc="format.date(moment(chartData.value))"/></td>
+                    <td class="value"><t t-esc="format.float(chartData.series[0].data[1])"/></td>
+                </tr>
+                <tr>
+                    <td class="legend-color-guide"><div class="o_legend1"/></td>
+                    <td class="key o_tooltip_key"><t t-esc="format.date(moment(chartData.value).subtract(1, dateRange))"/></td>
+                    <td class="value"><t t-esc="format.float(chartData.series[1].data[1])"/></td>
+                </tr>
+            </tbody>
+        </table>
+    </t>
+
+    <t t-name="website.GoToButtons">
+        <a href="/" class="btn btn-primary" title="Go to Website">
+            Go to Website
+        </a>
+    </t>
+
 </templates>