Download as
Browse Code »

Commit 57068da68c1287585e86fb0f8b549a1e4c687294

Authored by Felipe Bormann
1 parent 8e27d414
Exists in master and in 2 other branches amadeus_univasf, refactoring

finished tag cloud, started styling most accessed left bottom lists

Showing 6 changed files with 97 additions and 19 deletions   Show diff stats
analytics/static/.sass-cache/9bdb779ec82a4a96f72be09b83b7c997addd0129/general.sassc
View file @57068da
No preview for this file type
analytics/static/analytics/general.css
  Diff comments   View file @57068da
@@ -34,12 +34,33 @@ @@ -34,12 +34,33 @@
34 border-radius: 10px; 34 border-radius: 10px;
35 color: #ffffff; } 35 color: #ffffff; }
36 36
  37 +.data-container {
  38 + width: 80px;
  39 + height: 40px; }
  40 +
37 .tag-cloud { 41 .tag-cloud {
38 - width: 10%;  
39 border-radius: 25px; 42 border-radius: 25px;
40 - color: #ffffff; } 43 + color: #ffffff;
  44 + width: 80px; }
41 45
42 .tag-name { 46 .tag-name {
43 - color: #ffffff; } 47 + color: #ffffff;
  48 + font-size: 10px; }
  49 +
  50 +#left-data-selector {
  51 + background: linear-gradient(#0e8999, #6bf0ce);
  52 + width: 30%; }
  53 +
  54 +.middle-chart {
  55 + width: 30%;
  56 + float: left; }
  57 + .middle-chart h4 {
  58 + color: #009688; }
  59 +
  60 +.right-chart {
  61 + width: 30%;
  62 + float: left; }
  63 + .right-chart h4 {
  64 + color: #009688; }
44 65
45 /*# sourceMappingURL=general.css.map */ 66 /*# sourceMappingURL=general.css.map */
analytics/static/analytics/general.css.map
  Diff comments   View file @57068da
1 { 1 {
2 "version": 3, 2 "version": 3,
3 -"mappings": "AAAA,YAAY;EACX,MAAM,EAAE,iBAAiB;EACzB,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,IAAI;;AAGd,sBAAsB;EACrB,MAAM,EAAE,GAAG;EACX,OAAO,EAAE,KAAK;EACd,yBAAE;IACD,KAAK,EAAE,OAAO;EAEf,yBAAE;IACD,KAAK,EAAE,KAAK;IACZ,OAAO,EAAE,WAAW;IACpB,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,GAAG;IAEX,4BAAE;MACD,YAAY,EAAE,EAAE;MAChB,KAAK,EAAE,GAAG;MACV,KAAK,EAAE,KAAK;MAEZ,yCAAY;QACX,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,IAAI;QACX,UAAU,EAAE,MAAM;QAClB,aAAa,EAAE,IAAI;MAEpB,gCAAG;QACF,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,IAAI;QACX,UAAU,EAAE,MAAM;QAClB,aAAa,EAAE,IAAI;;AAIvB,sBAAsB;EACrB,UAAU,EAAE,2CAA2C;EACvD,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,OAAO;;AAEf,UAAU;EACT,KAAK,EAAE,GAAG;EACV,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,OAAO;;AAGf,SAAS;EACR,KAAK,EAAE,OAAO", 3 +"mappings": "AAEA,YAAY;EACX,MAAM,EAAE,iBAAiB;EACzB,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,IAAI;;AAGd,sBAAsB;EACrB,MAAM,EAAE,GAAG;EACX,OAAO,EAAE,KAAK;EACd,yBAAE;IACD,KAAK,EAZO,OAAO;EAcpB,yBAAE;IACD,KAAK,EAAE,KAAK;IACZ,OAAO,EAAE,WAAW;IACpB,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,GAAG;IAEX,4BAAE;MACD,YAAY,EAAE,EAAE;MAChB,KAAK,EAAE,GAAG;MACV,KAAK,EAAE,KAAK;MAEZ,yCAAY;QACX,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,IAAI;QACX,UAAU,EAAE,MAAM;QAClB,aAAa,EAAE,IAAI;MAEpB,gCAAG;QACF,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,IAAI;QACX,UAAU,EAAE,MAAM;QAClB,aAAa,EAAE,IAAI;;AAIvB,sBAAsB;EACrB,UAAU,EAAE,2CAA2C;EACvD,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,OAAO;;AAEf,eAAe;EACd,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;;AAEb,UAAU;EACT,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,OAAO;EACd,KAAK,EAAE,IAAI;;AAIZ,SAAS;EACR,KAAK,EAAE,OAAO;EACd,SAAS,EAAE,IAAI;;AAGhB,mBAAmB;EAClB,UAAU,EAAE,iCAAmC;EAC/C,KAAK,EAAE,GAAG;;AAGX,aAAa;EACZ,KAAK,EAAE,GAAG;EACV,KAAK,EAAE,IAAI;EACX,gBAAE;IACD,KAAK,EAtEO,OAAO;;AAwErB,YAAY;EACX,KAAK,EAAE,GAAG;EACV,KAAK,EAAE,IAAI;EACX,eAAE;IACD,KAAK,EA5EO,OAAO",
4 "sources": ["general.sass"], 4 "sources": ["general.sass"],
5 "names": [], 5 "names": [],
6 "file": "general.css" 6 "file": "general.css"
analytics/static/analytics/general.sass
  Diff comments   View file @57068da
  1 +$title-color: #009688
  2 +
1 .report-body 3 .report-body
2 border: 1px solid #3ebeb4 4 border: 1px solid #3ebeb4
3 border-radius: 20px 5 border-radius: 20px
@@ -8,7 +10,7 @@ @@ -8,7 +10,7 @@
8 height: 10% 10 height: 10%
9 display: block 11 display: block
10 h3 12 h3
11 - color: #009688 13 + color: $title-color
12 14
13 ul 15 ul
14 float: right 16 float: right
@@ -41,11 +43,35 @@ @@ -41,11 +43,35 @@
41 border-radius: 10px 43 border-radius: 10px
42 color: #ffffff 44 color: #ffffff
43 45
  46 +.data-container
  47 + width: 80px
  48 + height: 40px
  49 +
44 .tag-cloud 50 .tag-cloud
45 - width: 10%  
46 border-radius: 25px 51 border-radius: 25px
47 color: #ffffff 52 color: #ffffff
  53 + width: 80px
  54 +
48 55
49 56
50 .tag-name 57 .tag-name
51 - color: #ffffff  
52 \ No newline at end of file 58 \ No newline at end of file
  59 + color: #ffffff
  60 + font-size: 10px
  61 +
  62 +
  63 +#left-data-selector
  64 + background: linear-gradient( #0e8999, #6bf0ce )
  65 + width: 30%
  66 +
  67 +
  68 +.middle-chart
  69 + width: 30%
  70 + float: left
  71 + h4
  72 + color: $title-color
  73 +
  74 +.right-chart
  75 + width: 30%
  76 + float: left
  77 + h4
  78 + color: $title-color
53 \ No newline at end of file 79 \ No newline at end of file
analytics/static/analytics/js/charts.js
  Diff comments   View file @57068da
@@ -353,28 +353,34 @@ var charts = { @@ -353,28 +353,34 @@ var charts = {
353 353
354 354
355 var color = d3.scaleLinear() 355 var color = d3.scaleLinear()
356 - .domain([min(), max()]) 356 + .domain([0,1,2])
357 .range(['#bdbdbd','#52b7bd', '#149e91']); 357 .range(['#bdbdbd','#52b7bd', '#149e91']);
  358 + //this function is to support the mapping for possible colors
  359 + function getRandomInt(min, max) {
  360 + min = Math.ceil(min);
  361 + max = Math.floor(max);
  362 + return Math.floor(Math.random() * (max - min)) + min;
  363 + }
358 364
359 var xScale = d3.scaleSqrt().domain([min(), max()]).range([10,50]); 365 var xScale = d3.scaleSqrt().domain([min(), max()]).range([10,50]);
360 var tag_cloud = svg.selectAll('.tag-cloud-div') 366 var tag_cloud = svg.selectAll('.tag-cloud-div')
361 .data(dataset) 367 .data(dataset)
362 .enter() 368 .enter()
363 .append('g') 369 .append('g')
364 - .attr("class", "data-container")  
365 - .attr("width", 100)  
366 - .attr("height", 50); 370 + .attr("class", "data-container");
367 371
368 372
369 var tag_rects = tag_cloud 373 var tag_rects = tag_cloud
370 .append('rect') 374 .append('rect')
371 .attr('class', 'tag-cloud') 375 .attr('class', 'tag-cloud')
372 .attr("width", function(d){ 376 .attr("width", function(d){
373 - return xScale(d['count']); 377 + return xScale(d['count'])*1.2;
  378 + })
  379 + .attr("height", function(d){
  380 + return xScale(d["count"])*0.8;
374 }) 381 })
375 - .attr("height", 25)  
376 .attr("fill", function(d, i) { 382 .attr("fill", function(d, i) {
377 - return color(xScale[d["count"]]); 383 + return color(getRandomInt(0,3));
378 }) 384 })
379 .attr("rx", 20) 385 .attr("rx", 20)
380 .attr("ry", 20); 386 .attr("ry", 20);
@@ -384,8 +390,8 @@ var charts = { @@ -384,8 +390,8 @@ var charts = {
384 .text(function(d){ 390 .text(function(d){
385 return d['name']; 391 return d['name'];
386 }) 392 })
387 - .attr("x", 15)  
388 - .attr("y", 20) 393 + .attr("x", 20)
  394 + .attr("y", 25)
389 .attr("class", "tag-name") 395 .attr("class", "tag-name")
390 .attr("fill", "#ffffff"); 396 .attr("fill", "#ffffff");
391 397
@@ -394,7 +400,7 @@ var charts = { @@ -394,7 +400,7 @@ var charts = {
394 .force("x", d3.forceX(width/2).strength(0.05)) 400 .force("x", d3.forceX(width/2).strength(0.05))
395 .force("y", d3.forceY(height/2).strength(0.05)) 401 .force("y", d3.forceY(height/2).strength(0.05))
396 .force("collide", d3.forceCollide(function(d){ 402 .force("collide", d3.forceCollide(function(d){
397 - return 25; 403 + return 30;
398 })); 404 }));
399 405
400 //simulation 406 //simulation
analytics/templates/analytics/general.html
  Diff comments   View file @57068da
@@ -61,8 +61,33 @@ @@ -61,8 +61,33 @@
61 </div> 61 </div>
62 </div> 62 </div>
63 <div class="bottom-section"> 63 <div class="bottom-section">
64 - <div class="left-chart"></div>  
65 - <div class="middle-chart"></div> 64 + <div class="left-chart">
  65 + <div id="date-selector">
  66 + <p>{% trans "Between" %}</p>
  67 + <p>20-20-17</p>
  68 + <p>{% trans "and" %}</p>
  69 + <p>20-20-17</p>
  70 + </div>
  71 +
  72 + <div id="left-data-selector">
  73 + <ul>
  74 + <li>
  75 + {% trans "most accessed categories" %}
  76 + </li>
  77 + <li>
  78 + {% trans "most accessed subjects" %}
  79 + </li>
  80 + <li>
  81 + {% trans "most accessed resource" %}
  82 + </li>
  83 + </ul>
  84 +
  85 + </div>
  86 +
  87 + </div>
  88 + <div class="middle-chart">
  89 + <h4>{% trans "most active users" %}</h4>
  90 + </div>
66 <div class="right-chart"></div> 91 <div class="right-chart"></div>
67 </div> 92 </div>
68 93