diff --git a/server/web/templates/index.html b/server/web/templates/index.html index a5f9c13..20d88bf 100644 --- a/server/web/templates/index.html +++ b/server/web/templates/index.html @@ -30,8 +30,12 @@ width:600px; height:500px; } - .bar{ + .bar{ fill:#eaeaea; + } + .bars:hover{ + fill: aqua; + cursor: pointer; } text.label{ fill: #777777; @@ -39,9 +43,13 @@ font-size: 20px; font-weight: bold; } - text.category{ + text.category{ fill: #666666; font-size: 18px; + } + text.categorys:hover{ + fill: black; + cursor: pointer; } @@ -130,12 +138,12 @@ var setup = function(targetID){ var settings = { margin:margin, width:width, height:height, categoryIndent:categoryIndent, - svg:svg, x:x, y:y + svg:svg, x:x, y:y, myid:targetID } return settings; } -var redrawChart = function(targetID, newdata) { +var redrawChart = function(div_id, targetID, newdata) { //Import settings var margin=targetID.margin, width=targetID.width, height=targetID.height, categoryIndent=targetID.categoryIndent, @@ -164,13 +172,24 @@ var redrawChart = function(targetID, newdata) { .attr("class", "chartRow") .attr("transform", "translate(0," + height + margin.top + margin.bottom + ")"); - //bars - newRow.insert("rect") - .attr("class","bar") - .attr("x", 0) - .attr("opacity",0) - .attr("height", y.bandwidth()) - .attr("width", function(d) { return x(d.value);}) + if (div_id=='chart_uuid'){ + //bars + newRow.insert("rect") + .on("click", function (d) { window.location.href = "{{ url_for('uuid_management') }}?uuid="+d.key }) + .attr("class","bar bars") + .attr("x", 0) + .attr("opacity",0) + .attr("height", y.bandwidth()) + .attr("width", function(d) { return x(d.value);}) + } else { + //bars + newRow.insert("rect") + .attr("class","bar") + .attr("x", 0) + .attr("opacity",0) + .attr("height", y.bandwidth()) + .attr("width", function(d) { return x(d.value);}) + } //labels newRow.append("text") @@ -182,17 +201,30 @@ var redrawChart = function(targetID, newdata) { .attr("dx","0.5em") .text(function(d){return d.value;}); - //text - newRow.append("text") - .attr("class","category") - .attr("text-overflow","ellipsis") - .attr("y", y.bandwidth()/2) - .attr("x",categoryIndent) - .attr("opacity",0) - .attr("dy",".35em") - .attr("dx","5em") - .text(function(d){return d.key}); - + if (div_id=='chart_uuid'){ + //text + newRow.append("text") + .on("click", function (d) { window.location.href = "{{ url_for('uuid_management') }}?uuid="+d.key }) + .attr("class","category categorys") + .attr("text-overflow","ellipsis") + .attr("y", y.bandwidth()/2) + .attr("x",categoryIndent) + .attr("opacity",0) + .attr("dy",".35em") + .attr("dx","5em") + .text(function(d){return d.key}); + } else { + //text + newRow.append("text") + .attr("class","category") + .attr("text-overflow","ellipsis") + .attr("y", y.bandwidth()/2) + .attr("x",categoryIndent) + .attr("opacity",0) + .attr("dy",".35em") + .attr("dx","5em") + .text(function(d){return d.key}); + } ////////// //UPDATE// @@ -244,10 +276,10 @@ var redrawChart = function(targetID, newdata) { .attr("transform", function(d){ return "translate(0," + y(d.key) + ")"; }); }; -var pullData = function(json_url,settings,callback){ +var pullData = function(div_id,json_url,settings,callback){ d3.json(json_url, function (err, data){ if (err) return console.warn(err); - callback(settings,data); + callback(div_id,settings,data); }) } @@ -259,8 +291,8 @@ var formatData = function(data){ .slice(0, 15); // linit to 15 items } -var redraw = function(json_url,settings){ - pullData(json_url,settings,redrawChart) +var redraw = function(div_id,json_url,settings){ + pullData(div_id,json_url,settings,redrawChart) } json_url_uuid = "{{ url_for('_json_daily_uuid_stats') }}" @@ -268,17 +300,17 @@ json_url_type = "{{ url_for('_json_daily_type_stats') }}" //setup var settings = setup('#chart_uuid'); -redraw(json_url_uuid,settings) -redraw(json_url_uuid,settings) +redraw('chart_uuid',json_url_uuid,settings) +redraw('chart_uuid',json_url_uuid,settings) var settings_type = setup('#chart_type'); -redraw(json_url_type,settings_type) -redraw(json_url_type,settings_type) +redraw('chart_type',json_url_type,settings_type) +redraw('chart_type',json_url_type,settings_type) //Interval setInterval(function(){ - redraw(json_url_uuid,settings) - redraw(json_url_type,settings_type) + redraw('chart_uuid',json_url_uuid,settings) + redraw('chart_type',json_url_type,settings_type) }, 4000); ////