From afb00ab3fbfcd0340875ce0dcea032005490dce9 Mon Sep 17 00:00:00 2001 From: Danielv123 Date: Mon, 7 Nov 2016 09:26:58 +0100 Subject: [PATCH] Production chart partially added and hidden --- package.json | 1 + static/index.html | 8 +- static/main.js | 220 ++++++++++++++++++++++++++-------------------- static/style.css | 3 + 4 files changed, 132 insertions(+), 100 deletions(-) diff --git a/package.json b/package.json index cb9a0d13..9d8c3ff9 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "license": "ISC", "dependencies": { "body-parser": "^1.15.2", + "canvasjs": "^1.8.1", "child_process": "^1.0.2", "express": "^4.14.0", "fs": "0.0.2", diff --git a/static/index.html b/static/index.html index 4386f494..c959ca84 100644 --- a/static/index.html +++ b/static/index.html @@ -2,7 +2,7 @@ Clusterio - + @@ -31,13 +31,13 @@ -
+

Slaves

diff --git a/static/main.js b/static/main.js index 86b02406..0b2591b4 100644 --- a/static/main.js +++ b/static/main.js @@ -4,6 +4,7 @@ contents = { "copper-plate":7312, } // nice functions +// hash a string to a hash function djb2(str){ var hash = 5381; for (var i = 0; i < str.length; i++) { @@ -11,7 +12,7 @@ function djb2(str){ } return hash; } - +// hash a string to a color function hashColor(str) { var hash = djb2(str); var r = (hash & 0xFF0000) >> 16; @@ -19,21 +20,23 @@ function hashColor(str) { var b = hash & 0x0000FF; return "#" + ("0" + r.toString(16)).substr(-2) + ("0" + g.toString(16)).substr(-2) + ("0" + b.toString(16)).substr(-2); } - +// exactly what you would expect it to, returns String function capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1); } -// function to draw data we recieve from ajax requests +// hide the HTML object passed as argument #1 function hideThis(object) { object.style.visibility = "hidden"; } +// function to sort arrays of objects after a keys value function sortByKey(array, key) { return array.sort(function(a, b) { var x = Number(a[key]); var y = Number(b[key]); return ((x < y) ? 1 : ((x > y) ? -1 : 0)); }); } +// function to draw data we recieve from ajax requests function drawcontents(data) { var data = sortByKey(data, "count"); result = ""; @@ -65,88 +68,125 @@ function display(page) { } } -// Function to redraw charts in case they bug out -function drawcharts() { - // create chart of items in master storage - ctx = document.querySelector("#contentGraph").getContext('2d'); - PieChart = new Chart(ctx); - - // production chart - // https://codepen.io/statuswoe/pen/hyldD - var count = 20; - var data = { - labels : ["1","2","3","4","5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"], - datasets : [ - { - fillColor : "rgba(220,220,220,0.5)", - strokeColor : "rgba(220,220,220,1)", - pointColor : "rgba(220,220,220,1)", - pointStrokeColor : "#fff", - title:"one", - data : [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1] - }, - { - fillColor : "rgba(151,187,205,0.5)", - strokeColor : "rgba(151,187,205,1)", - pointColor : "rgba(151,187,205,1)", - pointStrokeColor : "#fff", - title:"two", - data : [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1] - } - ] - } - // this is ugly, don't judge me - var updateData = function(oldData){ - if(piedataOld[0]){ - //console.log(piedata) - var labels = oldData["labels"]; - var dataSetA = oldData["datasets"][0]["data"]; - var dataSetB = oldData["datasets"][1]["data"]; - - labels.shift(); - count++; - labels.push(count.toString()); - // this is where we generate new data - var newDataA = piedata[0].value - piedataOld[0].value; - var newDataB = piedata[1].value - piedataOld[1].value; - // not quite sure how this works, where is dataSetA placed in data/the graph? - dataSetA.push(newDataA); - dataSetB.push(newDataB); - dataSetA.shift(); - dataSetB.shift(); - } - }; - - // Not sure why the scaleOverride isn't working... - var optionsNoAnimation = { - animation : false, - //Boolean - If we want to override with a hard coded scale - scaleOverride : true, - //** Required if scaleOverride is true ** - //Number - The number of steps in a hard coded scale - scaleSteps : 20, - //Number - The value jump in the hard coded scale - scaleStepWidth : 10, - //Number - The scale starting value - scaleStartValue : 0 - } - - //Get the context of the canvas element we want to select - var ctx = document.getElementById("productionChart").getContext("2d"); - var optionsNoAnimation = {animation : false} - productionChart = new Chart(ctx); - productionChart.Line(data, optionsNoAnimation); - - setInterval(function(){ - updateData(data); - productionChart.Line(data, optionsNoAnimation); - },1000); -} - // setTimeout is used to put this processing in the back of the queue, after the HTML canvas is done -setTimeout(function(){ - drawcharts(); -},10) +window.onload = function () { + // dataPoints + var dataPoints1 = []; + var dataPoints2 = []; + + var chart = new CanvasJS.Chart("productionChart",{ + zoomEnabled: true, + title: { + text: "Production" + }, + toolTip: { + shared: true + }, + legend: { + verticalAlign: "top", + horizontalAlign: "center", + fontSize: 14, + fontWeight: "bold", + fontFamily: "calibri", + fontColor: "dimGrey" + }, + axisX: { + title: "Shows items in network" + }, + axisY:{ + prefix: '', + includeZero: true + }, + data: [{ + // dataSeries1 + type: "line", + xValueType: "dateTime", + showInLegend: true, + name: "Company A", + dataPoints: dataPoints1 + }, + { + // dataSeries2 + type: "line", + xValueType: "dateTime", + showInLegend: true, + name: "Company B" , + dataPoints: dataPoints2 + }], + legend:{ + cursor:"pointer", + itemclick : function(e) { + if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) { + e.dataSeries.visible = false; + } + else { + e.dataSeries.visible = true; + } + chart.render(); + } + } + }); + + + + var updateInterval = 10000; + // initial value + var yValue1 = 640; + var yValue2 = 604; + + var time = new Date; + time.setHours(9); + time.setMinutes(30); + time.setSeconds(00); + time.setMilliseconds(00); + // starting at 9.30 am + + var updateChart = function (count) { + count = count || 1; + + // count is number of times loop runs to generate random dataPoints. + + for (var i = 0; i < count; i++) { + + // add interval duration to time + time.setTime(time.getTime()+ updateInterval); + + + // generating random values + var deltaY1 = .5 + Math.random() *(-.5-.5); + var deltaY2 = .5 + Math.random() *(-.5-.5); + + // adding random value and rounding it to two digits. + yValue1 = Math.round((yValue1 + deltaY1)*100)/100; + yValue2 = Math.round((yValue2 + deltaY2)*100)/100; + + // pushing the new values + dataPoints1.push({ + x: time.getTime(), + y: yValue1 + }); + dataPoints2.push({ + x: time.getTime(), + y: yValue2 + }); + + + }; + + // updating legend text with updated with y Value + chart.options.data[0].legendText = " Company A $" + yValue1; + chart.options.data[1].legendText = " Company B $" + yValue2; + + chart.render(); + + }; + + // generates first set of dataPoints + updateChart(3000); + + // update chart after specified interval + setInterval(function(){updateChart()}, updateInterval); +} var piedata = {}; var piedataOld = {}; @@ -172,18 +212,6 @@ setInterval(function() { 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); diff --git a/static/style.css b/static/style.css index d2a2fc76..13e5a73c 100644 --- a/static/style.css +++ b/static/style.css @@ -19,6 +19,9 @@ #body > div { display:none; } +#body > #production { + display:block; +} #contents { width:300px; }