diff --git a/global.css b/global.css
index 72837d3..e1a9e70 100644
--- a/global.css
+++ b/global.css
@@ -77,6 +77,24 @@ header {
font-weight: bold;
}
+.lmc-graph canvas {
+ width: 100%;
+}
+
+.lmc-graph h4 {
+ text-align: center;
+}
+
+.lmc-graph table {
+ width: 100%;
+}
+
+.lmc-graph-color {
+ height: 15px;
+ display: inline-block;
+ width: 15px;
+}
+
.lmc-table {
background-color: #CECECE;
width: 100%;
diff --git a/global.js b/global.js
index 378a3aa..d895aec 100644
--- a/global.js
+++ b/global.js
@@ -452,6 +452,63 @@ function displayUser(response)
profilePic.style = "display: initial;";
}
+// Draw timeseries data with the given canvas in the given color and fill
+// series is an array of objects, with each object containing the color/fill settings and an array of data points
+function drawSeries(series, canvas)
+{
+ // Compute scale and totals
+ var xMin = series[0].points[0][0];
+ var xMax = series[0].points[series[0].points.length - 1][0];
+ var yMax = 0;
+ for (var i = 0; i < series.length; i++) {
+ xMin = Math.min(xMin, series[i].points[0][0]);
+ xMax = Math.max(xMax, series[i].points[series[i].points.length - 1][0]);
+ series[i].max = 0, series[i].avg = 0;
+ for (var j = 0; j < series[i].points.length; j++) {
+ series[i].max = Math.max(series[i].max, series[i].points[j][1]);
+ series[i].avg += series[i].points[j][1];
+ }
+ series[i].avg /= series[i].points.length;
+ yMax = Math.max(yMax, series[i].max);
+ }
+ xMax -= xMin;
+
+ // Setup drawing context
+ var ctx = canvas.getContext("2d");
+ ctx.lineWidth = 1;
+
+ // Clear the canvas
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ for (var i = 0; i < series.length; i++) {
+ ctx.fillStyle = series[i].color;
+ ctx.strokeStyle = series[i].color;
+
+ // Draw data
+ ctx.beginPath();
+ ctx.moveTo((series[i].points[0][0] - xMin) / xMax * canvas.width, canvas.height - (series[i].points[0][1] / yMax * canvas.height));
+ for (var j = 1; j < series[i].points.length; j++)
+ ctx.lineTo((series[i].points[j][0] - xMin) / xMax * canvas.width, canvas.height - (series[i].points[j][1] / yMax * canvas.height));
+ if (series[i].fill) {
+ ctx.lineTo((series[i].points[series[i].points.length-1][0] - xMin) / xMax * canvas.width, canvas.height);
+ ctx.lineTo((series[i].points[0][0] - xMin) / xMax * canvas.width, canvas.height);
+ ctx.closePath();
+ ctx.fill();
+ } else {
+ ctx.stroke();
+ }
+ }
+
+ // Draw axis lines
+ ctx.strokeStyle = "black";
+ ctx.lineWidth = 2.5;
+ ctx.beginPath();
+ ctx.moveTo(0, 0);
+ ctx.lineTo(0, canvas.height);
+ ctx.lineTo(canvas.width, canvas.height);
+ ctx.stroke();
+}
+
// Return an MD5 hash of the given string
function md5(str, binary)
{
@@ -793,4 +850,4 @@ function translateKernel(slug, element)
apiGet("/linode/kernels/" + slug, callback, null);
}
-export { settings, elements, regionNames, apiDelete, apiGet, apiPost, apiPut, md5, migrateETA, oauthPost, oauthScopes, objPut, parseParams, setupHeader, eventTitles, timeString, translateKernel };
+export { settings, elements, regionNames, apiDelete, apiGet, apiPost, apiPut, drawSeries, md5, migrateETA, oauthPost, oauthScopes, objPut, parseParams, setupHeader, eventTitles, timeString, translateKernel };
diff --git a/include/linode_subnav.html b/include/linode_subnav.html
index ab72d4f..8f41a98 100644
--- a/include/linode_subnav.html
+++ b/include/linode_subnav.html
@@ -6,7 +6,6 @@
Rescue
Resize
Clone
- Graphs
Backups
Settings
diff --git a/linodes/dashboard/dashboard.css b/linodes/dashboard/dashboard.css
index 8655485..01af940 100644
--- a/linodes/dashboard/dashboard.css
+++ b/linodes/dashboard/dashboard.css
@@ -25,10 +25,18 @@
margin-top: 5px;
}
+canvas {
+ height: 250px;
+}
+
#config-table tr:last-of-type {
border-bottom: 1px solid #E8E8E8;
}
+#cpu-color {
+ background-color: #03C;
+}
+
.disk-icon {
height: 24px;
width: 26px;
@@ -42,12 +50,51 @@
display: none;
}
+#graph-range {
+ font-size: 18px;
+}
+
h3 {
border-bottom: 1px solid #E8E8E8;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: lighter;
- margin-bottom: 50px;
+}
+
+#io-rate-color {
+ background-color: #FFD04B;
+}
+
+#ipv4-in-color {
+ background-color: #03C;
+}
+
+#ipv4-out-color {
+ background-color: #32CD32;
+}
+
+#ipv4-privin-color {
+ background-color: #C09;
+}
+
+#ipv4-privout-color {
+ background-color: #FF9;
+}
+
+#ipv6-in-color {
+ background-color: #03C;
+}
+
+#ipv6-out-color {
+ background-color: #32CD32;
+}
+
+#ipv6-privin-color {
+ background-color: #C09;
+}
+
+#ipv6-privout-color {
+ background-color: #FF9;
}
.job-failed {
@@ -202,6 +249,10 @@ h3 {
float: right;
}
+#swap-rate-color {
+ background-color: #FA373E;
+}
+
#upgrade {
background-color: #F0F0F0;
display: none;
diff --git a/linodes/dashboard/dashboard.js b/linodes/dashboard/dashboard.js
index 7655746..806ae56 100644
--- a/linodes/dashboard/dashboard.js
+++ b/linodes/dashboard/dashboard.js
@@ -15,7 +15,7 @@
* along with Linode Manager Classic. If not, see Graphs
+
+ Last 24 Hours
+
+
+
CPU (%)
+
+
+
+
+ Max
+ Avg
+ Last
+
+
+
+
+
CPU %
+
+
+
Disk I/O (blocks/s)
+
+
+
+
+ Max
+ Avg
+ Last
+
+
+
+
+
I/O Rate
+
+
Swap Rate
+
+
+
Network - IPv4 (bits/s)
+
+
+
+
+ Max
+ Avg
+ Last
+
+
+
+
+
Private Out
+
+
Private In
+
+
Public Out
+
+
+
Public In
+
+ Total Traffic
+ In:
+ Out:
+ Combined:
+
+
+
+
Network - IPv6 (bits/s)
+
+
+
+
+ Max
+ Avg
+ Last
+
+
+
+
+
Private Out
+
+
Private In
+
+
Public Out
+
+
+
Public In
+
+ Total Traffic
+ In:
+ Out:
+ Combined:
+
+
+
+