マウスオーバー時に表示するツールチップをつけた

titleをつけていないところに、view_complexと同様に追加

public/css/site.css

@@ -1,3 +1,13 @@
 .highlight {
   text-decoration: underline;
 }
+
+#tooltip {
+    display: none;
+    position: absolute;
+    padding: 5px;
+    background: white;
+    border: solid thin black;
+    z-index: 1000;
+    opacity: 0.8;
+}

public/js/site.js

@@ -69,6 +69,12 @@ function loadGraphsLater () {
 function loadGraphs () {
   var gdiv = $(this);
   var limit = 8;
+  var tooltip = $('#tooltip');
+  if (tooltip.size() == 0) {
+    tooltip = $('<div id="tooltip"><span class="xval"></span><br/><span class="yval"></span><br/><span class="total"></span></div>');
+    $(document.body).append(tooltip);
+  }
+
   $('#'+'label-'+gdiv.data('index')).removeClass('dygraph-closest-legend');
   $('#'+'label-'+gdiv.data('index')).removeClass('dygraph-highlighted-legend');
   if ( gdiv.data('colors').length > limit ) {
@@ -110,7 +116,7 @@ function loadGraphs () {
           }
       },
       axisLabelFontSize: 12,
-      highlightCallback: function(e, x, pts, row){
+      highlightCallback: function(e, x, pts, row, name){
           var total = 0;
           $('#onmouse-'+gdiv.data('index')).show();
           $('#label-'+gdiv.data('index')).hide();
@@ -119,12 +125,23 @@ function loadGraphs () {
           });
           if ( gdiv.data('stack') ) {
               $('#total-'+gdiv.data('index')).html('<br /><strong>TOTAL</strong>:'+addFigureVal(total));
+              $('#tooltip .total').text("TOTAL: " + addFigureVal(total));
+          }
+          $('#tooltip').show();
+          $('#tooltip').css({left:e.pageX, top:e.pageY});
+          var date = new Date(x)
+          $('#tooltip .xval').text(date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate() + ':');
+          for (var i in pts) {
+              if (pts[i].name == name) {
+                  $('#tooltip .yval').text(name + ': ' + addFigureVal(pts[i].yval));
+              }
           }
       },
       unhighlightCallback: function(e) {
           $('#onmouse-'+gdiv.data('index')).hide();
           $('#label-'+gdiv.data('index')).show();
           $('#total-'+gdiv.data('index')).html('');
+          $('#tooltip').hide();
       }
     }
   );

views/ifr.tx

@@ -58,7 +58,7 @@ body {
 : if $valid.valid('graphlabel') != 0 {
     <div style="position:absolute;width:198px;right:0px;top:<: ($valid.valid('graphheader') == 0) ? '0px' : '45px' :>;word-wrap:break-word;">
     <span id="label-0">
-    <a href="<: $c.req.uri_for('/view/'~$metrics.service_name~'/'~$metrics.section_name~'/'~$metrics.graph_name,$metrics_params) :>" style="color:<: $metrics.color :>">
+    <a href="<: $c.req.uri_for('/view/'~$metrics.service_name~'/'~$metrics.section_name~'/'~$metrics.graph_name,$metrics_params) :>" style="color:<: $metrics.color :>" title="<: $metrics.description :>">
     <span style="font-weight:bold"><: '/'~$metrics.service_name~'/'~$metrics.section_name~'/'~$metrics.graph_name :></span>
     </a>
     </span>

views/ifr_complex.tx

@@ -59,7 +59,7 @@ body {
     <div style="position:absolute;width:198px;right:0px;top:<: ($valid.valid('graphheader') == 0) ? '0px' : '45px' :>;word-wrap:break-word;">
     <span id="label-0">
     : for $metrics.metricses ->  $i_metrics {
-      <a href="<: $c.req.uri_for('/view/'~$i_metrics.service_name~'/'~$i_metrics.section_name~'/'~$i_metrics.graph_name,$metrics_params) :>" style="color:<: $i_metrics.color :>">
+      <a href="<: $c.req.uri_for('/view/'~$i_metrics.service_name~'/'~$i_metrics.section_name~'/'~$i_metrics.graph_name,$metrics_params) :>" style="color:<: $i_metrics.color :>" title="<: $i_metrics.description :>">
       <span style="font-weight:bold"><: '/'~$i_metrics.service_name~'/'~$i_metrics.section_name~'/'~$i_metrics.graph_name :></span>
       </a><br />
     : }

views/pifr.tx

@@ -19,7 +19,7 @@ body {
 <div style="position:absolute;width:198px;right:0px;top:5px;word-wrap:break-word;">
 <span id="label-0">
 : for $metricses ->  $i_metrics {
-  <a href="<: $c.req.uri_for('/view/'~$i_metrics.service_name~'/'~$i_metrics.section_name~'/'~$i_metrics.graph_name,$metrics_params) :>" style="color:<: $i_metrics.color :>">
+  <a href="<: $c.req.uri_for('/view/'~$i_metrics.service_name~'/'~$i_metrics.section_name~'/'~$i_metrics.graph_name,$metrics_params) :>" style="color:<: $i_metrics.color :>" title="<: $i_metrics.description :>">
   <span style="font-weight:bold"><: '/'~$i_metrics.service_name~'/'~$i_metrics.section_name~'/'~$i_metrics.graph_name :></span>
   </a><br />
 : }

views/view.tx

@@ -53,7 +53,7 @@
 <div style="position:relative">
   <div style="position:absolute;width:198px;right:0px;top:0px;word-wrap:break-word;">
     <span id="label-<: $index :>">
-    <a href="<: $c.req.uri_for('/view/'~$metrics.service_name~'/'~$metrics.section_name~'/'~$metrics.graph_name,$metrics_params) :>" style="color:<: $metrics.color :>">
+    <a href="<: $c.req.uri_for('/view/'~$metrics.service_name~'/'~$metrics.section_name~'/'~$metrics.graph_name,$metrics_params) :>" style="color:<: $metrics.color :>" title="<: $metrics.description :>">
     <span style="font-weight:bold"><: '/'~$metrics.service_name~'/'~$metrics.section_name~'/'~$metrics.graph_name :></span>
     </a>
     </span>

views/view_complex.tx

@@ -54,7 +54,7 @@
   <div style="position:absolute;width:198px;right:0px;top:0px;word-wrap:break-word;">
     <span id="label-<: $index :>">
     : for $metrics.metricses ->  $i_metrics {
-      <a href="<: $c.req.uri_for('/view/'~$i_metrics.service_name~'/'~$i_metrics.section_name~'/'~$i_metrics.graph_name,$metrics_params) :>" style="color:<: $i_metrics.color :>">
+      <a href="<: $c.req.uri_for('/view/'~$i_metrics.service_name~'/'~$i_metrics.section_name~'/'~$i_metrics.graph_name,$metrics_params) :>" style="color:<: $i_metrics.color :>" title="<: $i_metrics.description :>">
       <span style="font-weight:bold"><: '/'~$i_metrics.service_name~'/'~$i_metrics.section_name~'/'~$i_metrics.graph_name :></span>
       </a><br />
     : }