plot improvements.

index.py

@@ -75,12 +75,15 @@ def conf_overview(conf_id):
         'conf_details.html',
         conf_info=db.get_conf_info(conf_id))
 
-@app.route('/overview/user/<user_id>')
+@app.route('/overview/user/<user_id>', methods=['GET'])
 def user_overview(user_id):
-
+    plot_type = request.args.get('plot_type', default='bar', type=str)
+    if plot_type not in ["bar", "scatter"]:
+        plot_type = "bar"
     return render_template(
         'user.html',
-        user_info=db.get_user_info(user_id))
+        user_info=db.get_user_info(user_id),
+        plot_type=plot_type)
 
 
 def get_threads(board):
@@ -144,13 +147,14 @@ def data():
     action = request.args.get('action', default=None, type=str)
     if action == 'user_word_count':
         user_id = request.args.get('user', default=None, type=str)
+        plot_type = request.args.get('plot_type', default='scatter', type=str)
         if user_id == None:
             return jsonify([])
         raw = db.get_user_word_count_per_day(user_id)
         js = [
             {
-                'type': 'scatter',
+                'type': plot_type,
-                'mode': 'lines+markers',
+                'mode': 'lines',
                 'name': 'Words',
                 'x': [],
                 'y': []
@@ -161,13 +165,14 @@ def data():
             js[0]['y'].append(day[0])
     elif action == 'user_message_count':
         user_id = request.args.get('user', default=None, type=str)
+        plot_type = request.args.get('plot_type', default='scatter', type=str)
         if user_id == None:
             return jsonify([])
         raw = db.get_user_message_count_per_day(user_id)
         js = [
             {
-                'type': 'scatter',
+                'type': plot_type,
-                'mode': 'lines+markers',
+                'mode': 'lines',
                 'name': 'Messages',
                 'x': [],
                 'y': []

templates/base.html

@@ -8,9 +8,8 @@
     <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
         crossorigin="anonymous">
-        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-    
+        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
     <link rel="stylesheet" type="text/css" href="../static/css/style.css">
     <title>libOpenAnal appliance</title>
     {% endblock %}

templates/user.html

@@ -115,39 +115,69 @@
     </div>
 
 </div>
-<div class="card text-center">
+<div class="card">
     <div class="card-body">
         <h5 class="card-title">Charts</h5>
+
+        <span class="badge {% if 'bar' == plot_type %} badge-primary {% endif %}" id="bar" onclick="plot_type_changer(this.id)">Bars</span>
+        <span class="badge {% if 'scatter' == plot_type %} badge-primary {% endif %}" id="scatter" onclick="plot_type_changer(this.id)">Lines</span>
         <div id="words_chart">
         </div>
-        <div id="messages_chart">
-        </div>
         <script>
+            function plot_type_changer(type="bar") {
+                location.href = URL_add_parameter(location.href, 'plot_type', type);
+            }
+            function URL_add_parameter(url, param, value) {
+                var hash = {};
+                var parser = document.createElement('a');
+
+                parser.href = url;
+
+                var parameters = parser.search.split(/\?|&/);
+
+                for (var i = 0; i < parameters.length; i++) {
+                    if (!parameters[i])
+                        continue;
+
+                    var ary = parameters[i].split('=');
+                    hash[ary[0]] = ary[1];
+                }
+
+                hash[param] = value;
+
+                var list = [];
+                Object.keys(hash).forEach(function (key) {
+                    list.push(key + '=' + hash[key]);
+                });
+
+                parser.search = '?' + list.join('&');
+                return parser.href;
+            }
             var user_id = {{ user_info.id }};
             var plot_data = [];
             $.ajax({
                 type: 'GET',
                 url: '/data',
-                data: { action: 'user_word_count', user: user_id },
+                data: { action: 'user_word_count', user: user_id, plot_type: "{{ plot_type }}" },
                 dataType: 'json',
                 success: function (data) {
                     plot_data[0] = data[0];
-                    write_plot()
+                    _write_plot();
                 }
             });
             $.ajax({
                 type: 'GET',
                 url: '/data',
-                data: { action: 'user_message_count', user: user_id },
+                data: { action: 'user_message_count', user: user_id, plot_type: "{{ plot_type }}" },
                 dataType: 'json',
                 success: function (data) {
                     plot_data[1] = data[0];
-                    write_plot()
+                    _write_plot();
                 }
             });
-            function write_plot() {
+            function _write_plot() {
                 var layout = {
-                    title: 'Words per day',
+                    title: 'Daily plot',
                     showlegend: false,
                     //autosize: false,
                     //width: 500,