From 36f1cd727f35e85357f32ddd2152732bbb881c4e Mon Sep 17 00:00:00 2001 From: Sami Mokaddem Date: Tue, 31 Oct 2017 12:35:05 +0100 Subject: [PATCH] Continuation of contrib webpage UI --- server.py | 9 ++ static/css/ranking.css | 74 +++++++++++++ templates/contrib.html | 230 ++++++++++++++++++++++++++++++++--------- 3 files changed, 264 insertions(+), 49 deletions(-) create mode 100644 static/css/ranking.css diff --git a/server.py b/server.py index 012f302..03fc056 100755 --- a/server.py +++ b/server.py @@ -169,6 +169,15 @@ def getTop5Overtime(): data = [{'label': 'CIRCL', 'data': [[0, 4], [1, 7], [2,14]]}, {'label': 'CASES', 'data': [[0, 1], [1, 5], [2,2]]}] return jsonify(data) +@app.route("/_getCategPerContrib") +def getCategPerContrib(): + data = [["", "", "CIRCL", 723, 21, 32], +["", "", "CASES", 32, 435, 2], +["", "", "SMILE", 65, 231, 3], +["", "", "ORG4", 34, 21, 7], +["", "", "ORG5", 45, 211, 9]] + return jsonify(data) + @app.route("/_getTopCoord") def getTopCoord(): try: diff --git a/static/css/ranking.css b/static/css/ranking.css new file mode 100644 index 0000000..031f46e --- /dev/null +++ b/static/css/ranking.css @@ -0,0 +1,74 @@ + +.ranking { + position: relative; + height: auto; +} + +.table > tbody > tr > td.centerCell { + text-align: center; + min-width: 45px; +} + + +.table > tbody > tr > td.centerCellPic { + padding: 5px; +} + +.star1-1{ + +} + +.star2-1 { + +} +.star2-2 { + left: 0px; +} + +.star3-1 { + top: 6px; + left: 5px; +} +.star3-2 { + top: -8px; + left: 0px; +} +.star3-3 { + top: 6px; + left: -5px; +} + +.star4-1 { + +} +.star4-2 { + left: -6px; +} +.star4-3 { + left: -36px; + top: -10px; +} +.star4-4 { + left: -42px; + top: -10px; +} + +.star5-1 { + top: 7px; +} +.star5-2 { + left: -3px; + top: 7px; +} +.star5-3 { + left: -37px; + top: -7px; +} +.star5-4 { + left: -47px; + top: -0px; +} +.star5-5 { + left: -57px; + top: -7px; +} diff --git a/templates/contrib.html b/templates/contrib.html index b7ff665..7155820 100644 --- a/templates/contrib.html +++ b/templates/contrib.html @@ -65,6 +65,11 @@ padding-left: 5px; } +.col-lg-12 { + padding-right: 5px; + padding-left: 5px; +} + .leftSepa { border-left-color: rgb(221, 221, 221); border-left-style: solid; @@ -119,30 +124,117 @@ small {
-
-
- Contributor Ranking -
-
- -
- - - - - - - - - - - -
LogoOrganization name
+
+
+
+ Contributor Ranking
+
-
- -
+
+ + + + + + + + + + + +
LogoOrganization name
+
+ +
+ +
+
+ +
+
+
+ Top progression +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
LogoOrganization name
+
+
+ +
+
+ +
+
+
+ Contributors and Categories +
+
+ +
+ + + + + + + + + + + + + +
LogoOrganization nameNetwork ActivityPayload deliveryOthers
+
+ +
+ +
+
@@ -152,7 +244,7 @@ small {
- Hall Of Fame + Hall Of Fame
@@ -179,7 +271,7 @@ small { Top 5 Contributor overtime
-
+
@@ -240,11 +332,32 @@ small { var datatableTop; var datatableFame; - var optionDatatable = { + + var optionsLineChart = { + series: { + shadowSize: 0 , + lines: { + fill: true, + fillColor: { + colors: [ { opacity: 1 }, { opacity: 0.1 } ] + } + } + }, + points: { show: true }, + lines: { show: true, fill: true }, + grid: { + tickColor: "#dddddd", + borderWidth: 0 + }, + legend: { + show: true, + position: "nw" + } + }; + var optionDatatable_light = { responsive: true, searching: false, ordering: false, - order: [[0, "asc"]], scrollY: '50vh', scrollCollapse: true, paging: false, @@ -259,10 +372,50 @@ small { { className: "centerCell", "targets": [ 0 ] } ] }; + var optionDatatable_light2 = { + responsive: true, + searching: false, + ordering: false, + scrollY: '50vh', + scrollCollapse: true, + paging: false, + "language": { + "lengthMenu": "", + "info": "", + "infoFiltered": "", + "infoEmpty": "", + }, + "info": false, + "columnDefs": [ + { className: "centerCellPic", "targets": [ 0 ] } + ] + }; + + var optionDatatable_Categ = { + ajax: { + url: "{{ url_for('getCategPerContrib') }}", + dataSrc: '' + }, + responsive: true, + searching: false, + scrollY: '50vh', + scrollCollapse: true, + paging: false, + "info": false, + "columnDefs": [ + { className: "centerCell", "targets": [ 0 ] } + ] + }; + + $.getJSON( "{{ url_for('getCategPerContrib') }}", function( data ) { + console.log(data); + }); $(document).ready(function() { - datatableTop = $('#topContribTable').DataTable(optionDatatable); - datatableFame = $('#fameTable').DataTable(optionDatatable); + datatableTop = $('#topContribTable').DataTable(optionDatatable_light); + datatableFame = $('#fameTable').DataTable(optionDatatable_light); + datatableCateg = $('#categTable').DataTable(optionDatatable_Categ); + datatableProgress = $('#topProgressTable').DataTable(optionDatatable_light2); // top contributors $.getJSON( "{{ url_for('getTopContributor') }}", function( data ) { for (i in data) { @@ -300,27 +453,6 @@ small { }); }); - var optionsLineChart = { - series: { - shadowSize: 0 , - lines: { - fill: true, - fillColor: { - colors: [ { opacity: 1 }, { opacity: 0.1 } ] - } - } - }, - points: { show: true }, - lines: { show: true, fill: true }, - grid: { - tickColor: "#dddddd", - borderWidth: 0 - }, - legend: { - show: true, - position: "nw" - } - };