From 962aecd1d274d45c64579caff1e69b11ce374a33 Mon Sep 17 00:00:00 2001
From: Rsl1122 <djrapitops@hotmail.com>
Date: Wed, 27 Sep 2017 21:13:37 +0300
Subject: [PATCH] Split the Performance graphs back to 3 graphs

---
 Plan/src/main/resources/html/player.html    |  4 ---
 Plan/src/main/resources/html/server.html    | 38 +++++++++++++++------
 Plan/src/main/resources/js/resourceGraph.js | 26 ++------------
 Plan/src/main/resources/js/tpsGraph.js      | 25 ++------------
 Plan/src/main/resources/js/worldGraph.js    | 26 ++------------
 5 files changed, 37 insertions(+), 82 deletions(-)
diff --git a/Plan/src/main/resources/html/player.html b/Plan/src/main/resources/html/player.html
index 1445581a1..f066fc35c 100644
--- a/Plan/src/main/resources/html/player.html
+++ b/Plan/src/main/resources/html/player.html
@@ -272,10 +272,6 @@
                     x.style.transform = "translate3d(" + value + "%,0px,0)";
                 };
             }
-
-
-
-
     </script>
 </div>
 </body>
diff --git a/Plan/src/main/resources/html/server.html b/Plan/src/main/resources/html/server.html
index 3b3ad6265..95e59093b 100644
--- a/Plan/src/main/resources/html/server.html
+++ b/Plan/src/main/resources/html/server.html
@@ -9,6 +9,8 @@
     <link rel="stylesheet" href="./main.css">
     <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400" rel="stylesheet">
     <script src="https://use.fontawesome.com/df48eb908b.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 </head>
 <body>
 <header>
@@ -221,8 +223,23 @@
                             <div class="box-header">
                                 <h2><i class="fa fa-cogs"></i> Performance</h2>
                             </div>
-                            <div class="box-footer">
-                                <div id="tpsGraph" style="width: 100%; height: 600px;"></div>
+                            <div class="box-footer" style="height: 640px;">
+                                <div id="tabs">
+                                    <ul style="list-style: none; padding: 0; float: left; position: relative; top: 0; white-space: nowrap;">
+                                        <li style="display: inline;"><a class="button" href="#tabs-1">TPS</a></li>
+                                        <li style="display: inline;"><a class="button" href="#tabs-2">CPU & RAM</a></li>
+                                        <li style="display: inline;"><a class="button" href="#tabs-3">World Load</a></li>
+                                    </ul>
+                                    <div id="tabs-1">
+                                        <div id="tpsGraph" style="width: 100%; height: 550px;"></div>
+                                    </div>
+                                    <div id="tabs-2">
+                                        <div id="resourceGraph" style="width: 100%; height: 550px;"></div>
+                                    </div>
+                                    <div id="tabs-3">
+                                        <div id="worldGraph" style="width: 100%; height: 550px;"></div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                         <div class="column">
@@ -448,10 +465,11 @@
             color: '#222',
             data: ${punchCardSeries}
         };
-
-
-
-
+    </script>
+    <script>
+        $( function() {
+            $( "#tabs" ).tabs();
+        });
     </script>
     <script>
             var navButtons = document.getElementsByClassName("nav-button");
@@ -473,10 +491,10 @@
             worldPie('worldPie', worldSeries, gmSeries);
             playersChart('playerChartDay', playersOnlineSeries, 1);
             playersChart('playerChartMonth', playersOnlineSeries, 4);
-            performanceChart('tpsGraph', playersOnlineSeries, tpsSeries, cpuSeries, ramSeries, entitySeries, chunkSeries);
-            <!--tpsChart('tpsGraph', tpsSeries, playersOnlineSeries);-->
-            <!--resourceChart('resourceGraph', cpuSeries, ramSeries);-->
-            <!--worldChart('worldGraph', entitySeries, chunkSeries);-->
+            <!--performanceChart('tpsGraph', playersOnlineSeries, tpsSeries, cpuSeries, ramSeries, entitySeries, chunkSeries);-->
+            tpsChart('tpsGraph', tpsSeries, playersOnlineSeries);
+            resourceChart('resourceGraph', cpuSeries, ramSeries);
+            worldChart('worldGraph', entitySeries, chunkSeries);
             worldMap('choropleth', '#EEFFEE', '#267f00', mapSeries);
             punchCard('punchcard', punchcardSeries);
             /*countUpTimer();*/
diff --git a/Plan/src/main/resources/js/resourceGraph.js b/Plan/src/main/resources/js/resourceGraph.js
index b5dd87582..0572b2578 100644
--- a/Plan/src/main/resources/js/resourceGraph.js
+++ b/Plan/src/main/resources/js/resourceGraph.js
@@ -23,29 +23,6 @@ function resourceChart(id, cpuSeries, ramSeries) {
 				text: 'All'
 			}]
 		},
-		yAxis: [{
-			labels: {
-				align: 'right',
-				x: -3
-			},
-			title: {
-				text: 'CPU / %'
-			},
-			height: '55%',
-			lineWidth: 2
-		}, {
-			labels: {
-				align: 'right',
-				x: -3
-			},
-			title: {
-				text: 'RAM / MB'
-			},
-			top: '55%',
-			height: '40%',
-			offset: 0,
-			lineWidth: 2
-		}],
 		tooltip: {
 			split: true
 		},
@@ -55,6 +32,9 @@ function resourceChart(id, cpuSeries, ramSeries) {
 				fillOpacity: 0.4
 			}
 		},
+		legend: {
+            enabled: true,
+        },
 		series: [cpuSeries, ramSeries]
 	});
 }
\ No newline at end of file
diff --git a/Plan/src/main/resources/js/tpsGraph.js b/Plan/src/main/resources/js/tpsGraph.js
index d1a2f110e..5ecb4dd7a 100644
--- a/Plan/src/main/resources/js/tpsGraph.js
+++ b/Plan/src/main/resources/js/tpsGraph.js
@@ -23,28 +23,6 @@ function tpsChart(id, tpsSeries, playersOnlineSeries) {
 				text: 'All'
 			}]
 		},
-		yAxis: [{
-			labels: {
-				align: 'right',
-				x: -3
-			},
-			title: {
-				text: 'Players'
-			},
-			height: '30%'
-		}, {
-			lineWidth: 2,
-			labels: {
-				align: 'right',
-				x: -3
-			},
-			title: {
-				text: 'TPS'
-			},
-			height: '70%',
-			top: '30%',
-			offset: 0
-		}],
 		tooltip: {
 			split: true
 		},
@@ -54,6 +32,9 @@ function tpsChart(id, tpsSeries, playersOnlineSeries) {
 				fillOpacity: 0.4
 			}
 		},
+		legend: {
+            enabled: true,
+        },
 		series: [tpsSeries, playersOnlineSeries]
 	});
 }
\ No newline at end of file
diff --git a/Plan/src/main/resources/js/worldGraph.js b/Plan/src/main/resources/js/worldGraph.js
index 765f447fd..1e9ee06c9 100644
--- a/Plan/src/main/resources/js/worldGraph.js
+++ b/Plan/src/main/resources/js/worldGraph.js
@@ -23,29 +23,6 @@ function worldChart(id, entitySeries, chunkSeries) {
 				text: 'All'
 			}]
 		},
-		yAxis: [{
-			labels: {
-				align: 'right',
-				x: -3
-			},
-			title: {
-				text: 'Chunks'
-			},
-			height: '50%',
-			lineWidth: 2
-		}, {
-			labels: {
-				align: 'right',
-				x: -3
-			},
-			title: {
-				text: 'Entities'
-			},
-			top: '50%',
-			height: '40%',
-			offset: 0,
-			lineWidth: 2
-		}],
 		tooltip: {
 			split: true
 		},
@@ -55,6 +32,9 @@ function worldChart(id, entitySeries, chunkSeries) {
 				fillOpacity: 0.4
 			}
 		},
+		legend: {
+            enabled: true,
+        },
 		series: [entitySeries, chunkSeries]
 	});
 }
\ No newline at end of file
