diff --git a/amadeus/static/css/base/amadeus.css b/amadeus/static/css/base/amadeus.css index 008b484..1139c9e 100755 --- a/amadeus/static/css/base/amadeus.css +++ b/amadeus/static/css/base/amadeus.css @@ -1125,4 +1125,25 @@ li.item .notify_badge { .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { outline: none; -} \ No newline at end of file +} + + +/* CHART APP */ +.pie-tooltip{ + background: #eee; + box-shadow: 0 0 5px #999999; + color: #333; + display: none; + font-size: 30px; + left: 130px; + padding: 10px; + position: absolute; + text-align: center; + top: 95px; + width: 80px; + z-index: 10; +} + + + +/**/ \ No newline at end of file diff --git a/amadeus/static/js/charts/home.js b/amadeus/static/js/charts/home.js index 52ea3c1..9ae6020 100644 --- a/amadeus/static/js/charts/home.js +++ b/amadeus/static/js/charts/home.js @@ -17,10 +17,11 @@ var resource_donut_chart = { $.get(url, function(dataset){ - var width = 360; - var height = 400; - var radius = Math.min(width, height) / 2; - + var width = 600; + var height = 480; + var padding = 30; + var radius = Math.min(width, height) / 2 - padding; + var color = d3.scaleOrdinal(d3.schemeCategory20c); var new_div = d3.select(".carousel-inner").append("div").attr("class","item"); var svg = new_div.append("svg").attr("width", width).attr("height", height) @@ -28,8 +29,9 @@ var resource_donut_chart = { .style("display","block") .append('g') .attr('transform', 'translate(' + (width / 2) + - ',' + (height / 2) + ')'); + ',' + (height / 2 ) + ')'); + var donutInner = 50; var arc = d3.arc() @@ -37,16 +39,19 @@ var resource_donut_chart = { .outerRadius(radius); svg.append("text") - .attr("x", (width / 2)) - .attr("y", 0 - (height / 2)) - .attr("text-anchor", "middle") - .style("font-size", "16px") - .text("Recurso mais utilizado"); + .attr("text-anchor", "middle") + .attr("x",0 ) + .attr("y", -height/2 + padding) + .style("font-size", "30px") + .text("Recursos mais utilizados"); + var pie = d3.pie() .value(function(d) { return d[1]; }) .sort(null); + + var path = svg.selectAll('path') .data(pie(dataset)) .enter() @@ -55,6 +60,28 @@ var resource_donut_chart = { .attr('fill', function(d, i) { return color(i); }); + + + svg.selectAll("text.pie-tooltip") + .data(dataset) + .enter() + .append("text") + .text(function(d){ + return d[0]; + }) + .attr("id", function(d){ + return d[0]; + }) + .attr("class","pie-tooltip"); + + path.on('mouseover', function(d) { //When the mouse is over the path + $('#'+d.data[0]).css("display", "block"); + }); + + path.on('mouseout', function(d) { //When the mouse "leaves" the path + t = $('#'+d.data[0]).css("display", "none"); + }); + }) // end of the get method } } diff --git a/topics/views.py b/topics/views.py index 0041874..bd76a57 100644 --- a/topics/views.py +++ b/topics/views.py @@ -274,8 +274,6 @@ def getResourceCount(request): else: data[key] = 1 - data["test"] = 30 - data["azul"] = 20 real_data = [] for item in data.items(): real_data.append(item) -- libgit2 0.21.2