From f2666ef76721057228b34b0e77f6b5b6b8845932 Mon Sep 17 00:00:00 2001
From: Sami Mokaddem <mokaddem.sami@gmail.com>
Date: Mon, 11 Dec 2017 14:21:33 +0100
Subject: [PATCH] update: Added grouping of elements in the timeline. It allows
 to see more easily of an element appeared multiple times.

---
 helpers/trendings_helper.py |  4 ++--
 static/js/trendings.js      | 22 ++++++++++++++++------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/helpers/trendings_helper.py b/helpers/trendings_helper.py
index 06951bb..61e6250 100644
--- a/helpers/trendings_helper.py
+++ b/helpers/trendings_helper.py
@@ -1,6 +1,7 @@
 import math, random
 import os
 import json
+import copy
 import datetime, time
 import logging
 from collections import OrderedDict
@@ -190,11 +191,10 @@ class Trendings_helper:
             obj = {'name': item, 'start': timestamps[0]-ONEDAY, 'end': timestamps[0]}
             for t in timestamps:
                 if t-obj['end'] > ONEDAY: #new entry
-                    to_ret.append(obj)
+                    to_ret.append(copy.deepcopy(obj))
                     obj['start'] = t-ONEDAY
                     obj['end'] = t
                 else: # contrinue entry
                     obj['end'] = t
             to_ret.append(obj)
-
         return to_ret
diff --git a/static/js/trendings.js b/static/js/trendings.js
index 7d38216..ac8f1c6 100644
--- a/static/js/trendings.js
+++ b/static/js/trendings.js
@@ -104,7 +104,7 @@ var typeaheadOption_tag = {
         updateLineForLabel(tagLine, tag, undefined, url_getTrendingTag);
     }
 }
-var timeline_option = {};
+var timeline_option = {groupOrder: 'content'};
 
 
 /* FUNCTIONS */
@@ -402,23 +402,33 @@ function updateDisc() {
 function updateTimeline() {
     $.getJSON( url_getGenericTrendingOvertime+"?dateS="+parseInt(dateStart.getTime()/1000)+"&dateE="+parseInt(dateEnd.getTime()/1000), function( data ) {
         var items = [];
+        var groups = new vis.DataSet();
+        var dico_groups = {};
         var i = 1;
+        var g = 1;
         for (var obj of data) {
-            if (obj.end == obj.start) { console.log(obj);}
+            var index = dico_groups[obj.name];
+            if (index == undefined) { // new group
+                index = groups.add({id: g, content: obj.name});
+                dico_groups[obj.name] = g;
+                g++;
+            }
             items.push({
                 id: i,
                 content: obj.name,
                 start: obj.start*1000,
-                end: obj.end*1000
+                end: obj.end*1000,
+                group: dico_groups[obj.name]
             });
             i++;
         }
         items = new vis.DataSet(items);
         if (timeline === undefined) { // create timeline
-            timeline = new vis.Timeline(document.getElementById('timeline'), items, timeline_option);
-        } else { // update
-            timeline.setItems(items);
+            timeline = new vis.Timeline(document.getElementById('timeline'));
+            timeline.setOptions(timeline_option);
         }
+        timeline.setGroups(groups);
+        timeline.setItems(items);
     });
 }