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 34 border-radius: 10px;
35 35 color: #ffffff; }
36 36  
  37 +.data-container {
  38 + width: 80px;
  39 + height: 40px; }
  40 +
37 41 .tag-cloud {
38   - width: 10%;
39 42 border-radius: 25px;
40   - color: #ffffff; }
  43 + color: #ffffff;
  44 + width: 80px; }
41 45  
42 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 66 /*# sourceMappingURL=general.css.map */
... ...
analytics/static/analytics/general.css.map
  Diff comments   View file @57068da
1 1 {
2 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 4 "sources": ["general.sass"],
5 5 "names": [],
6 6 "file": "general.css"
... ...
analytics/static/analytics/general.sass
  Diff comments   View file @57068da
  1 +$title-color: #009688
  2 +
1 3 .report-body
2 4 border: 1px solid #3ebeb4
3 5 border-radius: 20px
... ... @@ -8,7 +10,7 @@
8 10 height: 10%
9 11 display: block
10 12 h3
11   - color: #009688
  13 + color: $title-color
12 14  
13 15 ul
14 16 float: right
... ... @@ -41,11 +43,35 @@
41 43 border-radius: 10px
42 44 color: #ffffff
43 45  
  46 +.data-container
  47 + width: 80px
  48 + height: 40px
  49 +
44 50 .tag-cloud
45   - width: 10%
46 51 border-radius: 25px
47 52 color: #ffffff
  53 + width: 80px
  54 +
48 55  
49 56  
50 57 .tag-name
51   - color: #ffffff
52 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 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 353  
354 354  
355 355 var color = d3.scaleLinear()
356   - .domain([min(), max()])
  356 + .domain([0,1,2])
357 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 365 var xScale = d3.scaleSqrt().domain([min(), max()]).range([10,50]);
360 366 var tag_cloud = svg.selectAll('.tag-cloud-div')
361 367 .data(dataset)
362 368 .enter()
363 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 373 var tag_rects = tag_cloud
370 374 .append('rect')
371 375 .attr('class', 'tag-cloud')
372 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 382 .attr("fill", function(d, i) {
377   - return color(xScale[d["count"]]);
  383 + return color(getRandomInt(0,3));
378 384 })
379 385 .attr("rx", 20)
380 386 .attr("ry", 20);
... ... @@ -384,8 +390,8 @@ var charts = {
384 390 .text(function(d){
385 391 return d['name'];
386 392 })
387   - .attr("x", 15)
388   - .attr("y", 20)
  393 + .attr("x", 20)
  394 + .attr("y", 25)
389 395 .attr("class", "tag-name")
390 396 .attr("fill", "#ffffff");
391 397  
... ... @@ -394,7 +400,7 @@ var charts = {
394 400 .force("x", d3.forceX(width/2).strength(0.05))
395 401 .force("y", d3.forceY(height/2).strength(0.05))
396 402 .force("collide", d3.forceCollide(function(d){
397   - return 25;
  403 + return 30;
398 404 }));
399 405  
400 406 //simulation
... ...
analytics/templates/analytics/general.html
  Diff comments   View file @57068da
... ... @@ -61,8 +61,33 @@
61 61 </div>
62 62 </div>
63 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 91 <div class="right-chart"></div>
67 92 </div>
68 93  
... ...