From 5f477232b9963c314c054552ca99c7338d2e947d Mon Sep 17 00:00:00 2001 From: Felipe Bormann Date: Mon, 8 May 2017 16:43:14 -0300 Subject: [PATCH] eased animations, improved tooltip of user bubble chart and worked on tag bubble chart --- analytics/static/.sass-cache/01cecb7b42e56765f6ed49ed3c70281ebdc742c7/general.sassc | Bin 0 -> 31372 bytes analytics/static/analytics/general.css | 36 ++++++++++++++++++++++++++---------- analytics/static/analytics/general.css.map | 2 +- analytics/static/analytics/general.sass | 33 ++++++++++++++++++++++++++------- analytics/static/analytics/js/behavior.js | 11 ++--------- analytics/static/analytics/js/charts.js | 22 ++++++++++++---------- analytics/templates/analytics/category.html | 25 +++++++++++++++++++++++++ analytics/templates/analytics/general.html | 20 +++++++++++--------- analytics/views.py | 12 ++++++++++-- 9 files changed, 113 insertions(+), 48 deletions(-) create mode 100644 analytics/static/.sass-cache/01cecb7b42e56765f6ed49ed3c70281ebdc742c7/general.sassc create mode 100644 analytics/templates/analytics/category.html diff --git a/analytics/static/.sass-cache/01cecb7b42e56765f6ed49ed3c70281ebdc742c7/general.sassc b/analytics/static/.sass-cache/01cecb7b42e56765f6ed49ed3c70281ebdc742c7/general.sassc new file mode 100644 index 0000000..b11b85c Binary files /dev/null and b/analytics/static/.sass-cache/01cecb7b42e56765f6ed49ed3c70281ebdc742c7/general.sassc differ diff --git a/analytics/static/analytics/general.css b/analytics/static/analytics/general.css index 1bcc627..b3423d4 100644 --- a/analytics/static/analytics/general.css +++ b/analytics/static/analytics/general.css @@ -40,21 +40,19 @@ #most-used-tags-header h4 { margin-left: 1%; } -.data-container { - width: 80px; - height: 40px; } - .tag-cloud { border-radius: 25px; - color: #ffffff; - width: 80px; } + color: #ffffff; } .tag-name { color: #ffffff; font-size: 10px; } #left-data-selector { - background: linear-gradient(#0e8999, #6bf0ce); } + background: linear-gradient(#0e8999, #6bf0ce); + margin-top: 5%; + padding-top: 3%; + padding-bottom: 2%; } .chart { width: 30%; @@ -64,11 +62,11 @@ .selector { width: 90%; - height: 20%; + height: 40px; color: white; padding-left: 5px; background-color: #009688; - margin-top: 10px; + margin-top: 5px; border-radius: 0px 20px 20px 0px; } .selector p { padding-top: 10px; @@ -87,13 +85,31 @@ background-color: #52b7bd; width: 80%; margin-left: 2%; - margin-top: 2%; + margin-top: 4%; + position: relative; padding-left: 0; color: white; + border: 2px solid #52b7bd; transition: width 2s, height 2s, background-color 2s, transform 2s; } .most-accessed-list li { padding-left: 1%; } +.most-accessed-list:after, .most-accessed-list:before { + bottom: 100%; + left: 50%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; } + +.most-accessed-list:before { + border-width: 12px; + margin-left: -50%; + border-color: rgba(136, 183, 213, 0); + border-bottom-color: #52b7bd; } + .most-accessed-item:hover { background-color: #3aa7ad; } diff --git a/analytics/static/analytics/general.css.map b/analytics/static/analytics/general.css.map index 8e59cf6..cfdba6f 100644 --- a/analytics/static/analytics/general.css.map +++ b/analytics/static/analytics/general.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "AAEA,YAAY;EACR,MAAM,EAAE,iBAAiB;EACzB,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,IAAI;EACd,KAAK,EAAE,IAAI;;AAEf,sBAAsB;EAClB,MAAM,EAAE,GAAG;EACX,OAAO,EAAE,KAAK;EACd,yBAAE;IACE,KAAK,EAbC,OAAO;EAejB,yBAAE;IACE,KAAK,EAAE,KAAK;IACZ,OAAO,EAAE,WAAW;IACpB,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,GAAG;IAEX,4BAAE;MACE,YAAY,EAAE,EAAE;MAChB,KAAK,EAAE,GAAG;MACV,KAAK,EAAE,KAAK;MAEZ,yCAAY;QACR,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,IAAI;QACX,UAAU,EAAE,MAAM;QAClB,aAAa,EAAE,IAAI;MAEvB,gCAAG;QACC,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,IAAI;QACX,UAAU,EAAE,MAAM;QAClB,aAAa,EAAE,IAAI;;AAInC,sBAAsB;EAClB,UAAU,EAAE,2CAA2C;EACvD,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,OAAO;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;EAEhB,yBAAE;IACE,WAAW,EAAE,EAAE;;AAEvB,eAAe;EACX,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;;AAEhB,UAAU;EACN,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,OAAO;EACd,KAAK,EAAE,IAAI;;AAIf,SAAS;EACL,KAAK,EAAE,OAAO;EACd,SAAS,EAAE,IAAI;;AAGnB,mBAAmB;EACf,UAAU,EAAE,iCAAmC;;AAEnD,MAAM;EACF,KAAK,EAAE,GAAG;EACV,KAAK,EAAE,IAAI;EACX,SAAE;IACE,KAAK,EA1EC,OAAO;;AA4ErB,SAAS;EACL,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,KAAK;EACZ,YAAY,EAAE,GAAG;EACjB,gBAAgB,EAAE,OAAO;EACzB,UAAU,EAAE,IAAI;EAChB,aAAa,EAAE,iBAAiB;EAChC,WAAC;IACG,WAAW,EAAE,IAAI;IACjB,SAAS,EAAE,IAAI;;AAInB,qBAAO;EACH,UAAU,EAAE,MAAM;;AAE1B,aAAa;EACT,UAAU,EAAE,iCAAkC;EAC9C,KAAK,EAAE,KAAK;EACZ,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,GAAG;;AAEhB,mBAAmB;EACf,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAE,GAAG;EACV,WAAW,EAAE,EAAE;EACf,UAAU,EAAE,EAAE;EACd,YAAY,EAAE,CAAC;EACf,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,sDAAsD;EAElE,sBAAE;IACE,YAAY,EAAE,EAAE;;AAExB,yBAAyB;EACrB,gBAAgB,EAAE,OAAO", +"mappings": "AAEA,YAAY;EACR,MAAM,EAAE,iBAAiB;EACzB,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,IAAI;EACd,KAAK,EAAE,IAAI;;AAEf,sBAAsB;EAClB,MAAM,EAAE,GAAG;EACX,OAAO,EAAE,KAAK;EACd,yBAAE;IACE,KAAK,EAbC,OAAO;EAejB,yBAAE;IACE,KAAK,EAAE,KAAK;IACZ,OAAO,EAAE,WAAW;IACpB,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,GAAG;IAEX,4BAAE;MACE,YAAY,EAAE,EAAE;MAChB,KAAK,EAAE,GAAG;MACV,KAAK,EAAE,KAAK;MAEZ,yCAAY;QACR,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,IAAI;QACX,UAAU,EAAE,MAAM;QAClB,aAAa,EAAE,IAAI;MAEvB,gCAAG;QACC,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,IAAI;QACX,UAAU,EAAE,MAAM;QAClB,aAAa,EAAE,IAAI;;AAInC,sBAAsB;EAClB,UAAU,EAAE,2CAA2C;EACvD,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,OAAO;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;EAEhB,yBAAE;IACE,WAAW,EAAE,EAAE;;AAGvB,UAAU;EACN,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,OAAO;;AAKlB,SAAS;EACL,KAAK,EAAE,OAAO;EACd,SAAS,EAAE,IAAI;;AAGnB,mBAAmB;EACf,UAAU,EAAE,iCAAmC;EAC/C,UAAU,EAAE,EAAE;EACd,WAAW,EAAE,EAAE;EACf,cAAc,EAAE,EAAE;;AAEtB,MAAM;EACF,KAAK,EAAE,GAAG;EACV,KAAK,EAAE,IAAI;EACX,SAAE;IACE,KAAK,EA1EC,OAAO;;AA4ErB,SAAS;EACL,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,KAAK;EACZ,YAAY,EAAE,GAAG;EACjB,gBAAgB,EAAE,OAAO;EACzB,UAAU,EAAE,GAAG;EACf,aAAa,EAAE,iBAAiB;EAChC,WAAC;IACG,WAAW,EAAE,IAAI;IACjB,SAAS,EAAE,IAAI;;AAInB,qBAAO;EACH,UAAU,EAAE,MAAM;;AAE1B,aAAa;EACT,UAAU,EAAE,iCAAkC;EAC9C,KAAK,EAAE,KAAK;EACZ,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,GAAG;;AAEhB,mBAAmB;EACf,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAE,GAAG;EACV,WAAW,EAAE,EAAE;EACf,UAAU,EAAE,EAAE;EACd,QAAQ,EAAE,QAAQ;EAClB,YAAY,EAAE,CAAC;EACf,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,iBAAiB;EACzB,UAAU,EAAE,sDAAsD;EAElE,sBAAE;IACE,YAAY,EAAE,EAAE;;AAExB,qDAAqD;EACjD,MAAM,EAAE,IAAI;EACZ,IAAI,EAAE,GAAG;EACT,MAAM,EAAE,iBAAiB;EACzB,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,CAAC;EACT,KAAK,EAAE,CAAC;EACR,QAAQ,EAAE,QAAQ;EAClB,cAAc,EAAE,IAAI;;AAGxB,0BAA0B;EACtB,YAAY,EAAE,IAAI;EAClB,WAAW,EAAE,IAAI;EACjB,YAAY,EAAE,sBAAsB;EACpC,mBAAmB,EAAE,OAAO;;AAEhC,yBAAyB;EACrB,gBAAgB,EAAE,OAAO", "sources": ["general.sass"], "names": [], "file": "general.css" diff --git a/analytics/static/analytics/general.sass b/analytics/static/analytics/general.sass index f521cb2..f13b55f 100644 --- a/analytics/static/analytics/general.sass +++ b/analytics/static/analytics/general.sass @@ -49,14 +49,11 @@ $title-color: #009688 h4 margin-left: 1% -.data-container - width: 80px - height: 40px .tag-cloud border-radius: 25px color: #ffffff - width: 80px + @@ -67,6 +64,9 @@ $title-color: #009688 #left-data-selector background: linear-gradient( #0e8999, #6bf0ce ) + margin-top: 5% + padding-top: 3% + padding-bottom: 2% .chart width: 30% @@ -76,11 +76,11 @@ $title-color: #009688 .selector width: 90% - height: 20% + height: 40px color: white padding-left: 5px background-color: #009688 - margin-top: 10px + margin-top: 5px border-radius: 0px 20px 20px 0px p padding-top: 10px @@ -101,13 +101,32 @@ $title-color: #009688 background-color: #52b7bd width: 80% margin-left: 2% - margin-top: 2% + margin-top: 4% + position: relative padding-left: 0 color: white + border: 2px solid #52b7bd transition: width 2s, height 2s, background-color 2s, transform 2s li padding-left: 1% +.most-accessed-list:after, .most-accessed-list:before + bottom: 100% + left: 50% + border: solid transparent + content: " " + height: 0 + width: 0 + position: absolute + pointer-events: none + + +.most-accessed-list:before + border-width: 12px + margin-left: -50% + border-color: rgba(136, 183, 213, 0) + border-bottom-color: #52b7bd + .most-accessed-item:hover background-color: #3aa7ad \ No newline at end of file diff --git a/analytics/static/analytics/js/behavior.js b/analytics/static/analytics/js/behavior.js index 6277473..970f890 100644 --- a/analytics/static/analytics/js/behavior.js +++ b/analytics/static/analytics/js/behavior.js @@ -56,20 +56,13 @@ var selectors_options = { $(e).after(string_build); var new_elem = $(e).next(); - new_elem.slideDown(); + new_elem.slideDown({easing: 'easeInOutSine'}, 5000); $(e).attr("opened", true); }, deleteChildren: function(e){ - console.log("delete children"); var most_accessed_list = $(e).next(); - $(most_accessed_list).animate( - {height: 0, - opacity: 0.1 - }, 1000, function(){ - $(this).remove(); //remove list from UI - }); - + $(most_accessed_list).slideUp({easing: 'easeInOutSine'}, 1200); $(e).removeAttr("opened"); //remove attribute so it can call API again }, }; diff --git a/analytics/static/analytics/js/charts.js b/analytics/static/analytics/js/charts.js index 4f9e2cd..d73d82b 100644 --- a/analytics/static/analytics/js/charts.js +++ b/analytics/static/analytics/js/charts.js @@ -208,17 +208,17 @@ var charts = { groups.on("mouseover", function(d){ //$("#"+"user_tooltip_"+d['user_id']).show(); - tooltip_div.transition().duration(200).style("opacity", .9); + tooltip_div.transition().duration(500).style("opacity", .9); tooltip_div.html(d['user'] + '
' + d['count'] + ' acessos') .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); - console.log(d3.event.pageX); - console.log(d3.event.pageY); }); groups.on("mouseout", function(d){ //$("#"+"user_tooltip_"+d['user_id']).hide(); + tooltip_div.transition().duration(500).style("opacity", 0); + }); @@ -253,7 +253,6 @@ var charts = { simulation.nodes(dataset) .on('tick', ticked); //so all data points are attached to it - console.log("finished simulation"); function ticked(){ groups.attr("transform", function(d){ return "translate(" + d.x + "," + d.y + ")"; @@ -371,7 +370,6 @@ var charts = { return maximum } - console.log(dataset); var container_div = d3.select("#most-used-tags-body"); var svg = container_div.append("svg").attr("width", "100%").attr("height", height) @@ -394,7 +392,7 @@ var charts = { return Math.floor(Math.random() * (max - min)) + min; } - var xScale = d3.scaleSqrt().domain([min(), max()]).range([10,50]); + var xScale = d3.scaleSqrt().domain([min(), max()]).range([10,80]); var tag_cloud = svg.selectAll('.tag-cloud-div') .data(dataset) .enter() @@ -409,7 +407,7 @@ var charts = { return xScale(d['count'])*1.2; }) .attr("height", function(d){ - return xScale(d["count"])*0.8; + return xScale(d["count"])*0.4; }) .attr("fill", function(d, i) { return color(getRandomInt(0,3)); @@ -422,8 +420,12 @@ var charts = { .text(function(d){ return d['name']; }) - .attr("x", 20) - .attr("y", 25) + .attr("x", function(d){ + return xScale(d['count'])*0.2; + }) + .attr("y", function(d){ + return xScale(d["count"])*0.2; + }) .attr("class", "tag-name") .attr("fill", "#ffffff"); @@ -432,7 +434,7 @@ var charts = { .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(function(d){ - return 30; + return xScale(d['count'])*0.4; })); //simulation diff --git a/analytics/templates/analytics/category.html b/analytics/templates/analytics/category.html new file mode 100644 index 0000000..456bdb0 --- /dev/null +++ b/analytics/templates/analytics/category.html @@ -0,0 +1,25 @@ +{% extends 'base.html' %} + +{% load static i18n pagination %} +{% load django_bootstrap_breadcrumbs %} +{% block style %} + +{% endblock style %} + +{% block javascript %} + + +{% endblock javascript %} + +{% block breadcrumbs %} + {{ block.super }} + + {% trans 'Analytics Category' as category %} + + {% breadcrumb category 'dashboard:view_general' %} +{% endblock %} + + +{% block content %} + test +{% endblock content %} \ No newline at end of file diff --git a/analytics/templates/analytics/general.html b/analytics/templates/analytics/general.html index a892f88..cca6761 100644 --- a/analytics/templates/analytics/general.html +++ b/analytics/templates/analytics/general.html @@ -24,15 +24,17 @@
diff --git a/analytics/views.py b/analytics/views.py index a996a0a..8e07503 100644 --- a/analytics/views.py +++ b/analytics/views.py @@ -1,8 +1,8 @@ from django.shortcuts import render -# Create your views here. from django.views import generic from django.db.models import Count +from django.core.urlresolvers import reverse_lazy from subjects.models import Tag, Subject from topics.models import Resource @@ -11,11 +11,19 @@ from django.http import HttpResponse, JsonResponse from log.models import Log import operator from django.utils.translation import ugettext_lazy as _ +from django.shortcuts import render, get_object_or_404, redirect class GeneralView(generic.TemplateView): template_name = "analytics/general.html" + def dispatch(self, request, *args, **kwargs): + + if not request.user.is_staff: + self.template_name = "analytics/category.html" + return super(GeneralView, self).dispatch(request, *args, **kwargs) + + def get_context_data(self, **kwargs): context = {} @@ -72,7 +80,7 @@ def most_accessed_subjects(request): #order the values of the dictionary by the count in descendent order subjects = sorted(subjects.values(), key = lambda x: x['count'], reverse=True ) - subjects = subjects[:30] + subjects = subjects[:5] return JsonResponse(subjects, safe=False) -- libgit2 0.21.2