fix: [UI v0.3] add sensor link, fix #19

server/web/templates/index.html

@@ -32,6 +32,10 @@
     }
 		.bar{
     fill:#eaeaea;
+    }
+		.bars:hover{
+    fill: aqua;
+		cursor: pointer;
     }
     text.label{
     fill: #777777;
@@ -42,6 +46,10 @@
 		text.category{
     fill: #666666;
     font-size: 18px;
+    }
+		text.categorys:hover{
+		fill: black;
+		cursor: pointer;
     }
   </style>
 
@@ -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,6 +172,16 @@ var redrawChart = function(targetID, newdata) {
 	  .attr("class", "chartRow")
 	  .attr("transform", "translate(0," + height + margin.top + margin.bottom + ")");
 
+	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")
@@ -171,6 +189,7 @@ var redrawChart = function(targetID, newdata) {
 		  .attr("opacity",0)
 		  .attr("height", y.bandwidth())
 		  .attr("width", function(d) { return x(d.value);})
+	}
 
 	//labels
 	newRow.append("text")
@@ -182,6 +201,19 @@ var redrawChart = function(targetID, newdata) {
 	  .attr("dx","0.5em")
 	  .text(function(d){return d.value;});
 
+	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")
@@ -192,7 +224,7 @@ var redrawChart = function(targetID, newdata) {
 		  .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);
 ////