mirror of
https://github.com/clusterio/clusterio.git
synced 2026-11-11 23:04:52 +09:00
Production chart partially added and hidden
This commit is contained in:
Danielv123 committed
1 parent
b66df4d233
commit
afb00ab3fb
4 files changed
+132
-100
No files matched your search
@@ -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",
|
||||
|
||||
+4
-4
@@ -2,7 +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="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.js" type="text/javascript"></script>
|
||||
<script src="main.js"></script>
|
||||
</head>
|
||||
|
||||
@@ -31,13 +31,13 @@
|
||||
</div>
|
||||
<canvas id="contentGraph" width="200" height="200"></canvas>
|
||||
</div>
|
||||
<div id="production">
|
||||
<!--<div id="production">
|
||||
<h2>Production</h2>
|
||||
<div id="legend">
|
||||
|
||||
</div>
|
||||
<canvas id="productionChart" width="400" height="150"></canvas>
|
||||
</div>
|
||||
<div id="productionChart" style="height: 300px; width: 100%;"></div>
|
||||
</div>-->
|
||||
<div id="slaves">
|
||||
<h2>Slaves</h2>
|
||||
<div id="display">
|
||||
|
||||
+124
-96
@@ -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 = "<table>";
|
||||
@@ -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);
|
||||
|
||||
@@ -19,6 +19,9 @@
|
||||
#body > div {
|
||||
display:none;
|
||||
}
|
||||
#body > #production {
|
||||
display:block;
|
||||
}
|
||||
#contents {
|
||||
width:300px;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user