diff --git a/var/www/templates/crawler/crawler_splash/last_crawled.html b/var/www/templates/crawler/crawler_splash/last_crawled.html index 66641848..467fd1e6 100644 --- a/var/www/templates/crawler/crawler_splash/last_crawled.html +++ b/var/www/templates/crawler/crawler_splash/last_crawled.html @@ -148,10 +148,10 @@ $(document).ready(function(){ chart.stackBarChart = barchart_type_stack("{{ url_for('crawler_splash.crawlers_last_domains_json') }}?type={{type}}", '#barchart_type'); chart.stackBarChartMonth = barchart_type_stack("{{ url_for('crawler_splash.crawlers_last_domains_month_json') }}?type={{type}}", '#barchart_type_month'); - //chart.onResize(); - //$(window).on("resize", function() { - // chart.onResize(); - //}); + chart.onResize(); + $(window).on("resize", function() { + chart.onResize(); + }); $('[data-toggle="popover"]').popover({ placement: 'top', @@ -182,8 +182,8 @@ function toggle_sidebar(){ function barchart_type_stack(url, svg_id) { var margin = {top: 20, right: 90, bottom: 55, left: 0}, - width = parseInt(d3.select(svg_id).style('width'), 10); - width = 1000 - margin.left - margin.right, + width = $(svg_id).width() + width = width - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var x = d3.scaleBand().rangeRound([0, width]).padding(0.1); @@ -196,7 +196,7 @@ function barchart_type_stack(url, svg_id) { var color = d3.scaleOrdinal(d3.schemeSet3); var svg = d3.select(svg_id).append("svg") - .attr("id", "thesvg") + .attr("id", svg_id) .attr("viewBox", "0 0 "+width+" 500") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) @@ -291,7 +291,7 @@ function barchart_type_stack(url, svg_id) { .attr("transform", function (d, i) { return "translate(0," + i * 20 + ")"; }); legend.append("rect") - .attr("x", 943) + .attr("x", width) .attr("width", 10) .attr("height", 10) .style("fill", color) @@ -299,40 +299,42 @@ function barchart_type_stack(url, svg_id) { legend.append("text") .attr("class", "svgText") - .attr("x", 941) + .attr("x", width - 2) .attr("y", 6) .attr("dy", ".35em") .style("text-anchor", "end") .text(function (d) { return d; }); } + chart.onResize = function () { + //var aspect = width / height, chart = $("#thesvg"); + svg_g = $(svg_id) + var targetWidth = svg_g.parent().width(); + svg_g.attr("width", targetWidth); + svg_g.attr("height", targetWidth / 2); + } + + function removePopovers () { + $('.popover').each(function() { + $(this).remove(); + }); + } + + function showPopover (d) { + $(this).popover({ + title: d.name, + placement: 'top', + container: 'body', + trigger: 'manual', + html : true, + content: function() { + return d.label + + "
num: " + d3.format(",")(d.value ? d.value: d.y1 - d.y0); } + }); + $(this).popover('show') + } + } -function removePopovers () { - $('.popover').each(function() { - $(this).remove(); - }); - } - -function showPopover (d) { - $(this).popover({ - title: d.name, - placement: 'top', - container: 'body', - trigger: 'manual', - html : true, - content: function() { - return d.label + - "
num: " + d3.format(",")(d.value ? d.value: d.y1 - d.y0); } - }); - $(this).popover('show') -} - -chart.onResize = function () { - var aspect = width / height, chart = $("#thesvg"); - var targetWidth = chart.parent().width(); - chart.attr("width", targetWidth); - chart.attr("height", targetWidth / 2); -} window.chart = chart;