Feature: Date range replace fixed date + formatted labels

server.py

@@ -491,31 +491,39 @@ def getLoginVSCOntribution():
 @app.route("/_getTrendingEvents")
 def getTrendingEvents():
     try:
-        date = datetime.datetime.fromtimestamp(float(request.args.get('date')))
+        dateS = datetime.datetime.fromtimestamp(float(request.args.get('dateS')))
+        dateE = datetime.datetime.fromtimestamp(float(request.args.get('dateE')))
     except:
-        date = datetime.datetime.now()
+        dateS = datetime.datetime.now() - datetime.timedelta(days=7)
+        dateE = datetime.datetime.now()
 
-    data = trendings_helper.getTrendingEvents(date)
+    data = trendings_helper.getTrendingEvents(dateS, dateE)
     return jsonify(data)
 
 @app.route("/_getTrendingCategs")
 def getTrendingCategs():
     try:
-        date = datetime.datetime.fromtimestamp(float(request.args.get('date')))
+        dateS = datetime.datetime.fromtimestamp(float(request.args.get('dateS')))
+        dateE = datetime.datetime.fromtimestamp(float(request.args.get('dateE')))
     except:
-        date = datetime.datetime.now()
+        dateS = datetime.datetime.now() - datetime.timedelta(days=7)
+        dateE = datetime.datetime.now()
 
-    data = trendings_helper.getTrendingCategs(date)
+
+    data = trendings_helper.getTrendingCategs(dateS, dateE)
     return jsonify(data)
 
 @app.route("/_getTrendingTags")
 def getTrendingTags():
     try:
-        date = datetime.datetime.fromtimestamp(float(request.args.get('date')))
+        dateS = datetime.datetime.fromtimestamp(float(request.args.get('dateS')))
+        dateE = datetime.datetime.fromtimestamp(float(request.args.get('dateE')))
     except:
-        date = datetime.datetime.now()
+        dateS = datetime.datetime.now() - datetime.timedelta(days=7)
+        dateE = datetime.datetime.now()
 
-    data = trendings_helper.getTrendingTags(date)
+
+    data = trendings_helper.getTrendingTags(dateS, dateE)
     return jsonify(data)
 
 

static/js/trendings.js

@@ -1,5 +1,6 @@
 /* VARS */
-var date;
+var dateStart;
+var dateEnd;
 var eventPie = ["#eventPie"];
 var eventLine = ["#eventLine"];
 var categPie = ["#categPie"];
@@ -36,10 +37,12 @@ var lineChartOption = {
 var pieChartOption = {
     series: {
         pie: {
-            innerRadius: 0.5,
+            innerRadius: 0.2,
             show: true,
             label: {
-                show: false,
+                show: true,
+                radius: 1,
+                formatter: innerPieLabelFormatter,
             }
         }
     },
@@ -50,6 +53,15 @@ var pieChartOption = {
 };
 
 /* FUNCTIONS */
+function innerPieLabelFormatter(label, series) {
+    var count = series.data[0][1];
+    return '<div '
+           + 'style="font-size:8pt;text-align:inherit;padding:2px;">'
+               + '<a class="tagElem" style="background-color: '+ 'white' + ';'
+               + 'color: ' + 'black' + ';"> ' + count + '</a>'
+           + '</div>';
+}
+
 function getTextColour(rgb) {
     var r = parseInt('0x'+rgb.substring(0,2));
     var g = parseInt('0x'+rgb.substring(2,4));
@@ -87,11 +99,26 @@ function updatePie(pie, data) {
     if (data === undefined || data.length == 0 || (data[0] == 0 && data[1] == 0)) {
         toPlot = [{ label: 'No data', data: 100 }];
     } else {
+        toPlot_obj = {}
+        for (var arr of data) {
+            var date = arr[0];
+            var items = arr[1]
+            for(var item_arr of items) {
+                var item = item_arr[0];
+                var count = item_arr[1];
+                if(toPlot_obj[item] === undefined)
+                    toPlot_obj[item] = 0;
+                toPlot_obj[item] += count;
+            }
+        }
         toPlot = [];
-        for (var item of data) {
+        for (var item in toPlot_obj) {
-            toPlot.push({label: item[0], data: item[1]});
+            if (toPlot_obj.hasOwnProperty(item)) {
+                toPlot.push({label: item, data: toPlot_obj[item]})
+            }
         }
     }
+
     if (!(pieWidget === undefined)) {
         pieWidget.setData(toPlot);
         pieWidget.setupGrid();
@@ -149,14 +176,15 @@ function updateLine(line, data) {
 }
 
 function updatePieLine(pie, line, url) {
-    $.getJSON( url+"?date="+parseInt(date.getTime()/1000), function( data ) {
+    $.getJSON( url+"?dateS="+parseInt(dateStart.getTime()/1000)+"&dateE="+parseInt(dateEnd.getTime()/1000), function( data ) {
-        updatePie(pie, data[0][1]);
+        updatePie(pie, data);
         updateLine(line, data);
     });
 }
 
 function dateChanged() {
-    date = datePickerWidget.datepicker( "getDate" );
+    dateStart = datePickerWidgetStart.datepicker( "getDate" );
+    dateEnd = datePickerWidgetEnd.datepicker( "getDate" );
     updatePieLine(eventPie, eventLine, url_getTrendingEvent)
     updatePieLine(categPie, categLine, url_getTrendingCateg)
     updatePieLine(tagPie, tagLine, url_getTrendingTag)
@@ -164,9 +192,14 @@ function dateChanged() {
 
 $(document).ready(function () {
 
-    datePickerWidget = $( "#datepicker" ).datepicker(datePickerOptions);
+    datePickerWidgetStart = $( "#datepickerStart" ).datepicker(datePickerOptions);
-    datePickerWidget.datepicker("setDate", new Date());
+    var lastWeekDate = new Date();
-    date = datePickerWidget.datepicker( "getDate" );
+    lastWeekDate.setDate(lastWeekDate.getDate()-7);
+    datePickerWidgetStart.datepicker("setDate", lastWeekDate);
+    dateStart = datePickerWidgetStart.datepicker( "getDate" );
+    datePickerWidgetEnd = $( "#datepickerEnd" ).datepicker(datePickerOptions);
+    datePickerWidgetEnd.datepicker("setDate", new Date());
+    dateEnd = datePickerWidgetEnd.datepicker( "getDate" );
 
     updatePieLine(eventPie, eventLine, url_getTrendingEvent)
     updatePieLine(categPie, categLine, url_getTrendingCateg)

templates/trendings.html

@@ -62,6 +62,10 @@
      margin-bottom: 10px;
  }
 
+ .panel-body {
+     padding: 0px;
+ }
+
 .col-lg-6 {
     padding-right: 5px;
     padding-left: 5px;
@@ -112,7 +116,11 @@ small {
                       <li><a href="{{ url_for('trendings') }}">MISP Trendings</a></li>
                     </ul>
                 <div class='leftSepa textTopHeader'>
-                    <strong>Date: <input type="text" id="datepicker" size="30" style="margin-bottom: 5px;"></strong>
+                    <strong>Date:
+                        <input type="text" id="datepickerStart" size="30" style="margin-bottom: 5px;">
+                        <strong> to </strong>
+                        <input type="text" id="datepickerEnd" size="30" style="margin-bottom: 5px;">
+                    </strong>
                 </div>
             </div>
             <!-- /.navbar-header -->
@@ -133,7 +141,6 @@ small {
                                 </div>
                                 <div id="panelbody" class="panel-body" style="">
                                     <div id="eventPie" style="width:100%; height: 15vh;"></div>
-                                    <div style="height: 10px;"></div>
                                     <div id="eventLine" style="width:100%; height: 20vh;"></div>
                                 </div>
                             </div><!-- /.panel-body -->
@@ -146,7 +153,6 @@ small {
                                 </div>
                                 <div id="panelbody" class="panel-body" style="">
                                     <div id="categPie" style="width:100%; height: 15vh;"></div>
-                                    <div style="height: 10px;"></div>
                                     <div id="categLine" style="width:100%; height: 20vh;"></div>
                                 </div>
                             </div><!-- /.panel-body -->
@@ -159,7 +165,6 @@ small {
                                 </div>
                                 <div id="panelbody" class="panel-body" style="">
                                     <div id="tagPie" style="width:100%; height: 15vh;"></div>
-                                    <div style="height: 10px;"></div>
                                     <div id="tagLine" style="width:100%; height: 20vh;"></div>
                                 </div>
                             </div><!-- /.panel-body -->