From e0e644820e908e9a535776fafb3b63bd9bfd209b Mon Sep 17 00:00:00 2001
From: Anatoliy Guskov <anatoliy.guskov@gmail.com>
Date: Wed, 23 Sep 2015 11:01:28 +0300
Subject: [PATCH] Fixed graphs tooltip

---
 instances/templates/instance.html | 69 ++++++++++++++++---------------
 1 file changed, 36 insertions(+), 33 deletions(-)

diff --git a/instances/templates/instance.html b/instances/templates/instance.html
index fddb6a6..356d63f 100644
--- a/instances/templates/instance.html
+++ b/instances/templates/instance.html
@@ -955,80 +955,83 @@
             labels : [0, 0, 0, 0, 0],
             datasets : [
                 {
-                    fillColor: "rgba(241,72,70,0.5)",
-                    strokeColor: "rgba(241,72,70,1)",
-                    pointColor : "rgba(241,72,70,1)",
-                    pointStrokeColor : "#fff",
-                    pointHighlightFill : "#fff",
-                    pointHighlightStroke : "rgba(220,220,220,1)",
-                    data : [0, 0, 0, 0, 0]
+                    fillColor: "rgba(44,127,184,0.5)",
+                    strokeColor: "rgba(44,127,184,1)",
+                    pointColor: "rgba(44,127,184,1)",
+                    pointStrokeColor: "#fff",
+                    data: [0, 0, 0, 0, 0]
                 }
             ]
         };
-
         var diskLineData = {
             labels : [0, 0, 0, 0, 0],
             datasets : [
                 {
-                    "fillColor": "rgba(220,220,220,0.5)",
-                    "strokeColor": "rgba(220,220,220,1)",
-                    "pointColor": "rgba(220,220,220,1)",
-                    "pointStrokeColor": "#fff",
-                    "data": [0, 0, 0, 0, 0]
+                    fillColor: "rgba(127,205,187,0.5)",
+                    strokeColor: "rgba(127,205,187,1)",
+                    pointColor: "rgba(127,205,187,1)",
+                    pointStrokeColor: "#fff",
+                    data: [0, 0, 0, 0, 0],
+                    label: "Read"
                 },
                 {
-                    "fillColor": "rgba(249,134,33,0.5)",
-                    "strokeColor": "rgba(249,134,33,1)",
-                    "pointColor": "rgba(249,134,33,1)",
-                    "pointStrokeColor": "#fff",
-                    "data": [0, 0, 0, 0, 0]
+                    fillColor: "rgba(44,127,184,0.5)",
+                    strokeColor: "rgba(44,127,184,1)",
+                    pointColor: "rgba(44,127,184,1)",
+                    pointStrokeColor: "#fff",
+                    data: [0, 0, 0, 0, 0],
+                    label: "Write"
                 },
             ]
         };
-
         var netLineData = {
             labels : [0, 0, 0, 0, 0],
             datasets : [
                {
-                    "fillColor": "rgba(83,191,189,0.5)",
-                    "strokeColor": "rgba(83,191,189,1)",
-                    "pointColor": "rgba(83,191,189,1)",
-                    "pointStrokeColor": "#fff",
-                    "data": [0, 0, 0, 0, 0]
+                    fillColor: "rgba(127,205,187,0.5)",
+                    strokeColor: "rgba(127,205,187,1)",
+                    pointColor: "rgba(127,205,187,1)",
+                    pointStrokeColor: "#fff",
+                    data: [0, 0, 0, 0, 0],
+                    label: "Inbound"
                },
                {
-                    "fillColor": "rgba(151,187,205,0.5)",
-                    "strokeColor": "rgba(151,187,205,1)",
-                    "pointColor": "rgba(151,187,205,1)",
-                    "pointStrokeColor": "#fff",
-                    "data": [0, 0, 0, 0, 0]
+                    fillColor: "rgba(44,127,184,0.5)",
+                    strokeColor: "rgba(44,127,184,1)",
+                    pointColor: "rgba(44,127,184,1)",
+                    pointStrokeColor: "#fff",
+                    data: [0, 0, 0, 0, 0],
+                    label: "Outbound"
                },
             ]
         };
-
         var cpuOpt = {
             animation: false,
             pointDotRadius: 2,
             scaleLabel: "<%=value%> %",
+            tooltipTemplate: "<%=value%> %",
+            scaleShowGridLines : false,
             scaleOverride: true,
             scaleSteps: 5,
             scaleStepWidth: 20,
             scaleStartValue: 0,
             responsive: true
         };
-
         var diskOpt = {
             animation: false,
             pointDotRadius: 2,
             scaleLabel: "<%=value%> Mb/s",
+            multiTooltipTemplate: "<%=datasetLabel%> - <%=value%> Mb/s",
+            scaleShowGridLines : false,
             responsive: true
         };
-
         var netOpt = {
             animation: false,
             pointDotRadius: 2,
             scaleLabel: "<%=value%> Mbps",
-            responsive: true
+            multiTooltipTemplate: "<%=datasetLabel%> - <%=value%> Mbps",
+            scaleShowGridLines : false,
+            responsive: true,
         };
 
         var cpu_ctx = $("#cpuChart").get(0).getContext("2d");