fix: [crawler] fix monthly crawled domains stats svg size

This commit is contained in:
terrtia 2024-02-27 16:18:06 +01:00
parent e6d70e4f7b
commit 311e6f4bd8
No known key found for this signature in database
GPG key ID: 1E1B1F50D84613D0

View file

@ -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.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.stackBarChartMonth = barchart_type_stack("{{ url_for('crawler_splash.crawlers_last_domains_month_json') }}?type={{type}}", '#barchart_type_month');
//chart.onResize(); chart.onResize();
//$(window).on("resize", function() { $(window).on("resize", function() {
// chart.onResize(); chart.onResize();
//}); });
$('[data-toggle="popover"]').popover({ $('[data-toggle="popover"]').popover({
placement: 'top', placement: 'top',
@ -182,8 +182,8 @@ function toggle_sidebar(){
function barchart_type_stack(url, svg_id) { function barchart_type_stack(url, svg_id) {
var margin = {top: 20, right: 90, bottom: 55, left: 0}, var margin = {top: 20, right: 90, bottom: 55, left: 0},
width = parseInt(d3.select(svg_id).style('width'), 10); width = $(svg_id).width()
width = 1000 - margin.left - margin.right, width = width - margin.left - margin.right,
height = 500 - margin.top - margin.bottom; height = 500 - margin.top - margin.bottom;
var x = d3.scaleBand().rangeRound([0, width]).padding(0.1); 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 color = d3.scaleOrdinal(d3.schemeSet3);
var svg = d3.select(svg_id).append("svg") var svg = d3.select(svg_id).append("svg")
.attr("id", "thesvg") .attr("id", svg_id)
.attr("viewBox", "0 0 "+width+" 500") .attr("viewBox", "0 0 "+width+" 500")
.attr("width", width + margin.left + margin.right) .attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom) .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 + ")"; }); .attr("transform", function (d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect") legend.append("rect")
.attr("x", 943) .attr("x", width)
.attr("width", 10) .attr("width", 10)
.attr("height", 10) .attr("height", 10)
.style("fill", color) .style("fill", color)
@ -299,40 +299,42 @@ function barchart_type_stack(url, svg_id) {
legend.append("text") legend.append("text")
.attr("class", "svgText") .attr("class", "svgText")
.attr("x", 941) .attr("x", width - 2)
.attr("y", 6) .attr("y", 6)
.attr("dy", ".35em") .attr("dy", ".35em")
.style("text-anchor", "end") .style("text-anchor", "end")
.text(function (d) { return d; }); .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 +
"<br/>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 +
"<br/>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; window.chart = chart;