Working on adding charts to master GUI

master.js

@@ -93,6 +93,13 @@ app.get("/inventory", function(req, res) {
 		res.send(docs);
 	});
 });
+// endpoint for getting the chartjs library
+app.get("/chart.js", function(req, res) {
+	res.header("Access-Control-Allow-Origin", "*");
+	res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
+	// Check it and send it
+	res.end(fs.readFileSync("node_modules/chartjs/chart.js"));
+});
 
 var server = app.listen(config.masterPort || 8080, function () {
 	console.log("Listening on port %s...", server.address().port);

static/index.html

@@ -2,6 +2,7 @@
 <head>
 	<title>Clusterio</title>
 	<link rel="stylesheet" type="text/css" href="style.css">
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js" type="text/javascript"></script>
 	<script src="main.js"></script>
 </head>
 
@@ -25,6 +26,13 @@
 			<h2>Storage</h2>
 			<div id="contents">
 			</div>
+			<canvas id="contentGraph" width="200" height="200"></canvas>
+		</div>
+		<div id="production">
+			<h2>Production</h2>
+			<div id="legend">
+				
+			</div>
 		</div>
 	</div>
 </body>

static/main.js

@@ -1,10 +1,25 @@
 
-
 contents = {
 	"iron-plate":100,
 	"copper-plate":7312,
 }
 
+function djb2(str){
+  var hash = 5381;
+  for (var i = 0; i < str.length; i++) {
+    hash = ((hash << 5) + hash) + str.charCodeAt(i); /* hash * 33 + c */
+  }
+  return hash;
+}
+
+function hashColor(str) {
+  var hash = djb2(str);
+  var r = (hash & 0xFF0000) >> 16;
+  var g = (hash & 0x00FF00) >> 8;
+  var b = hash & 0x0000FF;
+  return "#" + ("0" + r.toString(16)).substr(-2) + ("0" + g.toString(16)).substr(-2) + ("0" + b.toString(16)).substr(-2);
+}
+
 function drawcontents(data) {
 	keys = Object.keys(data);
 	result = "<table>";
@@ -14,14 +29,43 @@ function drawcontents(data) {
 	result = result + "</table>"
 	document.getElementById("contents").innerHTML = result;
 }
+
 setInterval(function() {
 	var xmlhttp = new XMLHttpRequest();
 	xmlhttp.onreadystatechange = function() {
 		if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
 			data = JSON.parse(xmlhttp.responseText);
 			drawcontents(data);
+			// render our piechart with up to date information
+			piedata = [];
+			for(i=0;i<data.length;i++) {
+				piedata[piedata.length] = {
+					value: Number(data[i].count),
+					color: hashColor(data[i].name),
+					label: data[i].name,
+				}
+			}
+			PieChart.Pie(piedata, {
+				animation: false,
+				legend: {
+					display: true,
+					labels: {
+						fontColor: 'rgb(255, 99, 132)'
+					}
+				},
+				hover: {
+					mode: "label",
+				}
+			});
 		}
 	}
 	xmlhttp.open("GET", "inventory", true);
 	xmlhttp.send();
-}, 500)
+}, 500)
+
+// create chart of items in master storage
+// setTimeout is used to put this processing in the back of the queue, after the HTML canvas is done
+setTimeout(function(){
+	ctx = document.querySelector("#contentGraph").getContext('2d');
+    PieChart = new Chart(ctx);
+},10)

static/style.css

@@ -16,9 +16,15 @@
 #body {
 	margin-left:200px;
 }
+#contents {
+	width:300px;
+}
 #contents table {
 	border: 1px solid black;
 }
+#contentGraph {
+	float:left;
+}
 .button-black {
 	width:100%;
 	height:40px;