Add graph tooltips showing point values.

1e92a142 · Vincent Pelletier · 21c24940 · 1e92a142
Commit 1e92a142 authored Apr 06, 2013 by Vincent Pelletier
Show whitespace changes
Inline Side-by-side

Showing with 47 additions and 8 deletions

apachedex/__init__.py apachedex/__init__.py +47 -8

No files found.
--- a/apachedex/__init__.py
+++ b/apachedex/__init__.py
@@ -147,7 +147,7 @@ def prepareDataForGraph(daily_data, date_format, placeholder_delta):
 def graphPair(daily_data, date_format, graph_period):
  date_list = [int(time.mktime(time.strptime(x[0], date_format)) * 1000)
    for x in daily_data]
-  timeformat = '%Y<br/>%m/%d<br/>%H:%M'
+  timeformat = '%Y/<br/>%m/%d<br/> %H:%M'
  # There is room for about 10 labels on the X axis.
  minTickSize = (max(1,
    (date_list[-1] - date_list[0]) / (60 * 60 * 1000 * 10)), 'hour')
@@ -155,7 +155,7 @@ def graphPair(daily_data, date_format, graph_period):
  yLabelWidth = max(int(math.log10(max(x[2] for x in daily_data))) + 1,
    3) * 6
  return graph('apdex',
-    [zip(date_list, (x[1] for x in daily_data))],
+    [zip(date_list, (round(x[1], 2) for x in daily_data))],
    {
      'xaxis': {
        'mode': 'time',
@@ -164,10 +164,13 @@ def graphPair(daily_data, date_format, graph_period):
      },
      'yaxis': {
        'max': 100,
-        'axisLabel': '%',
+        'axisLabel': 'apdex (%)',
        'labelWidth': yLabelWidth,
      },
      'lines': {'show': True},
+      'grid': {
+        'hoverable': True,
+      },
    },
  ) + graph('Hits (per %s)' % graph_period,
    [zip(date_list, (x[2] for x in daily_data))],
@@ -183,6 +186,9 @@ def graphPair(daily_data, date_format, graph_period):
        'tickDecimals': 0,
      },
      'lines': {'show': True},
+      'grid': {
+        'hoverable': True,
+      },
    },
  )

@@ -194,7 +200,9 @@ def graph(title, data, options={}):
  append(escape(json.dumps(data), quote=True))
  append('" data-options="')
  append(escape(json.dumps(options), quote=True))
-  append('"></div>')
+  append('"></div><div class="tooltip">'
+    '<span class="x"></span><br/>'
+    '<span class="y"></span></div>')
  return ''.join(result)

 class APDEXStats(object):
@@ -729,6 +737,9 @@ def main():
      'h2 { background-color: #eee; } '
      '.axisLabels { color: rgb(84,84,84) !important; }'
      '.flot-x-axis .tickLabel { text-align: center; } '
+      '.tooltip { position: absolute; display: none; padding: 0.1em; '
+        'border: 1px solid #000; background-color: #fff; opacity: 0.80; } '
+      '.tooltip .x br { display: none; }'
      '</style>')
    for script in ('jquery.js', 'jquery.flot.js', 'jquery.flot.time.js',
        'jquery.flot.axislabels.js'):
@@ -741,10 +752,38 @@ def main():
          args.js, script))
    out.write('<script type="text/javascript">$(function() {'
      '$(".graph").each(function (i){'
-        '$.plot('
-          'this,'
-          '$.parseJSON($(this).attr("data-points")),'
-          '$.parseJSON($(this).attr("data-options")));'
+        'var container = $(this);'
+        'var previousIndex = null;'
+        'var tooltip = container.next(".tooltip");'
+        'var plot = $.plot('
+          'container,'
+          '$.parseJSON(container.attr("data-points")),'
+          '$.parseJSON(container.attr("data-options")));'
+        'function formatValue(axis, value) {'
+          'var result = "";'
+          'if (axis.options.axisLabel) {'
+            'result = axis.options.axisLabel + " : ";'
+          '}'
+          'return result + axis.tickFormatter(value, axis);'
+        '}'
+        'container.bind("plothover", function (event, pos, item) {'
+          'if (item) {'
+            'if (previousIndex != item.dataIndex) {'
+              'previousIndex = item.dataIndex;'
+              'tooltip.css("left", item.pageX + 5 + "px");'
+              'tooltip.css("top", item.pageY + 5 + "px");'
+              'tooltip.find(".x").html(formatValue('
+                'item.series.xaxis, item.datapoint[0]));'
+              'tooltip.find(".y").text(item.datapoint[1]);'
+              'tooltip.show();'
+            '}'
+          '} else {'
+            'if (previousIndex != null) {'
+              'tooltip.hide();'
+              'previousIndex = null;'
+            '}'
+          '}'
+        '});'
      '});'
    '});</script>')
    out.write('</head><body><h1>Overall</h1><h2>Parameters</h2>'