Ability to categorize networks

assets/js/graph.js

@@ -0,0 +1,130 @@
+// Used by the individual server entries
+var smallChartOptions = {
+    series: {
+        shadowSize: 0
+    },
+    xaxis: {
+        font: {
+            color: "#E3E3E3"
+        },
+        show: false
+    },
+    yaxis: {
+        minTickSize: 75,
+        tickDecimals: 0,
+        show: true,
+        tickLength: 10,
+        tickFormatter: function(value) {
+            return formatNumber(value);
+        },
+        font: {
+            color: "#E3E3E3"
+        },
+        labelWidth: -10
+    },
+    grid: {
+        hoverable: true,
+        color: "#696969"
+    },
+    colors: [
+        "#E9E581"
+    ]
+};
+
+// Used by the one chart to rule them all
+var bigChartOptions = {
+    series: {
+        shadowSize: 0
+    },
+    xaxis: {
+        font: {
+            color: "#E3E3E3"
+        },
+        show: false
+    },
+    yaxis: {
+        show: true,
+        tickSize: 2000,
+        tickLength: 10,
+        tickFormatter: function(value) {
+            return formatNumber(value);
+        },
+        font: {
+            color: "#E3E3E3"
+        },
+        labelWidth: -5,
+        min: 0
+    },
+    grid: {
+        hoverable: true,
+        color: "#696969"
+    },
+    legend: {
+        show: false
+    }
+};
+
+function toggleControlsDrawer() {
+    var div = $('#big-graph-controls-drawer');
+
+    div.css('display', div.css('display') !== 'none' ? 'none' : 'block');
+}
+
+function saveGraphControls(displayedServers) {
+	if (typeof(localStorage) !== undefined) {
+		var json = JSON.stringify(displayedServers);
+
+		localStorage.setItem('displayedServers', json);
+	}
+}
+
+function loadGraphControls() {
+	if (typeof(localStorage) !== undefined) {
+		var item = localStorage.getItem('displayedServers');
+
+		if (item) {
+			return JSON.parse(item);
+		}
+	}
+}
+
+function resetGraphControls() {
+	if (typeof(localStorage) !== undefined) {
+		localStorage.removeItem('displayedServers');
+	}
+}
+
+// Called by flot.js when they hover over a data point.
+function handlePlotHover(event, pos, item) {
+    if (item) {
+        var text = getTimestamp(item.datapoint[0] / 1000) + '\
+            <br />\
+            ' + formatNumber(item.datapoint[1]) + ' Players';
+
+        if (item.series && item.series.label) {
+            text = item.series.label + '<br />' + text;
+        }
+
+        renderTooltip(item.pageX + 5, item.pageY + 5, text);
+    } else {
+        hideTooltip();
+    }
+}
+
+// Converts the backend data into the schema used by flot.js
+function convertGraphData(rawData) {
+    var data = [];
+
+    var keys = Object.keys(rawData);
+
+    for (var i = 0; i < keys.length; i++) {
+        data.push({
+            data: rawData[keys[i]],
+            yaxis: 1,
+            label: keys[i],
+            color: stringToColor(keys[i])
+        });
+    }
+
+    return data;
+}