Add statistics tooltips

3 files changed, 46 insertions, 19 deletions

diff --git a/omaha_server/omaha/static/statistics/css/statistics.css b/omaha_server/omaha/static/statistics/css/statistics.css
index 5d8ab77..40c5e59 100644
--- a/omaha_server/omaha/static/statistics/css/statistics.css
+++ b/omaha_server/omaha/static/statistics/css/statistics.css
@@ -8,6 +8,10 @@
     height: 400px;
 }
 
+.stacked-chart svg{
+    width: 100%;
+    height: 400px;
+}
 
 .datatable{
     margin: 10px 18px;
diff --git a/omaha_server/omaha/templates/admin/omaha/live_statistics.html b/omaha_server/omaha/templates/admin/omaha/live_statistics.html
index 8889cdf..5f874ec 100644
--- a/omaha_server/omaha/templates/admin/omaha/live_statistics.html
+++ b/omaha_server/omaha/templates/admin/omaha/live_statistics.html
@@ -29,6 +29,8 @@
           rel="stylesheet"/>
     <link rel="stylesheet" type="text/css" media="screen"
           href="https://cdn.rawgit.com/tarruda/bootstrap-datetimepicker/c26217db8840e5aa8f56e343ce307581960543c9/build/css/bootstrap-datetimepicker.min.css">
+    <link rel="stylesheet" type="text/css" media="screen"
+          href='{% static "statistics/css/statistics.css" %}'>
 {% endblock %}
 
 {% block extrajs %}
@@ -55,43 +57,50 @@
             endDate: new Date()
         });
     </script>
+    <script>
+    $(document).ready(function(){
+        $('[data-toggle="popover"]').popover();
+    });
+    </script>
 
 {% endblock %}
 
 {% block content %}
     <h1 data-name='{{ app.name }}' id="app_name">{{ app.name|title }}</h1>
 
-    <div style="display: table">
-        Filter live statistics by range:
-        <p id='range-start' class="datetimepicker input-append date"
-           style="display: table-cell; vertical-align: middle; padding: 0 10px">
+    <h2 style="display: inline">Live Statistics</h2>
+    <span data-toggle="popover" data-content="This shows how many users are active during a particular hour. The data is stored only for the last 7 days. These statistics are based on update check requests.">
+        <i class="icon-question-sign"></i>
+    </span>
+
+    <div id="month-statistics" class="form-inline center">
+        Filter live statistics:
+        <span id='range-start' class="datetimepicker input-append date">
             <input type="text" placeholder="Start">
           <span class="add-on">
             <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
           </span>
-        </p>
+        </span>
         -
-        <p id='range-end' class="datetimepicker input-append date"
-           style="display: table-cell; vertical-align: middle; padding: 0 10px">
+        <span id='range-end' class="datetimepicker input-append date">
             <input type="text" placeholder="End">
           <span class="add-on">
             <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
           </span>
-        </p>
-
+        </span>
         <button id="btn-apply" class="btn">
             <span id="ajax-completed">Apply</span>
             <img id="ajax-loading" src="{% static "statistics/gif/ajax_loader.gif" %}" hidden/>
         </button>
     </div>
 
-    <h2>Windows users</h2>
-    <div id="win-chart">
-        <svg style="width:1200px;height:400px;"></svg>
+    <h2 align="center">Windows users</h2>
+    <div class="stacked-chart" id="win-chart">
+        <svg></svg>
     </div>
 
-    <h2>Mac users</h2>
-    <div id="mac-chart">
-        <svg style="width:1200px;height:400px;"></svg>
+    <h2 align="center">Mac users</h2>
+    <div class="stacked-chart" id="mac-chart">
+        <svg></svg>
     </div>
 {% endblock %}
diff --git a/omaha_server/omaha/templates/admin/omaha/statistics_detail.html b/omaha_server/omaha/templates/admin/omaha/statistics_detail.html
index 019c62f..cfc51eb 100644
--- a/omaha_server/omaha/templates/admin/omaha/statistics_detail.html
+++ b/omaha_server/omaha/templates/admin/omaha/statistics_detail.html
@@ -33,7 +33,6 @@
 
 {% block extrajs %}
     {{ block.super }}
-    <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
     <script type="text/javascript"
             src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js" type="text/javascript" charset="utf-8"></script>
@@ -52,6 +51,11 @@
         autoclose: true
     });
     </script>
+    <script>
+    $(document).ready(function(){
+        $('[data-toggle="popover"]').popover();
+    });
+    </script>
 {% endblock %}
 
 {% block content %}
@@ -63,7 +67,10 @@
 
     <hr/>
 
-    <h2>Monthly Statistics</h2>
+    <h2 style="display: inline;">Monthly Statistics</h2>
+    <span data-toggle="popover" data-content="Two charts for Windows and Mac platforms showing aggregated information about users’ actions (installs, updates, uninstalls) per month. A special feature of them is the fact that they show installs and uninstalls separately and all actions are unique. It means that if a user installs the application in a particular month and updates it in the same month, the charts show only one action and in this case it will be an install. So it allows us to see the number of new users per month. But if a user does an install and right after that deletes the application, the charts show one install and one uninstall action.">
+        <i class="icon-question-sign"></i>
+    </span>
 
     <form id="month-statistics" class="form-inline center" action="">
         Filter months:
@@ -88,7 +95,11 @@
 
     <hr/>
 
-    <h2>Versions</h2>
+    <h2 style="display: inline">Versions</h2>
+    <span data-toggle="popover" data-content="Two pie charts for Windows and Mac platforms showing the number of active users per month for each version of the application.">
+        <i class="icon-question-sign"></i>
+    </span>
+
     <form id="version-statistics" class="form-inline center" action="">
         Choose a month:
         <input type="text" class="input-small input-datepicker" placeholder="Month" name="date">
@@ -134,7 +145,10 @@
         </div>
     <hr/>
 
-    <h2>Channels</h2>
+    <h2 style="display: inline">Channels</h2>
+    <span data-toggle="popover" data-content="This pie chart shows the number of active users per distribution channel per month.">
+        <i class="icon-question-sign"></i>
+    </span>
 
     <form id="channel-statistics" class="form-inline center" action="">
         Choose a month: