Skip to content

A
apachedex
Commit 1e92a142 authored by Vincent Pelletier's avatar Vincent Pelletier
Browse files
Options

Add graph tooltips showing point values.

parent 21c24940
Hide whitespace changes
Inline Side-by-side
Showing with 47 additions and 8 deletions
apachedex/__init__.py
View file @ 1e92a142
...@@ -147,7 +147,7 @@ def prepareDataForGraph(daily_data, date_format, placeholder_delta): ...@@ -147,7 +147,7 @@ def prepareDataForGraph(daily_data, date_format, placeholder_delta):
def graphPair(daily_data, date_format, graph_period): def graphPair(daily_data, date_format, graph_period):
date_list = [int(time.mktime(time.strptime(x[0], date_format)) * 1000) date_list = [int(time.mktime(time.strptime(x[0], date_format)) * 1000)
for x in daily_data] 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. # There is room for about 10 labels on the X axis.
minTickSize = (max(1, minTickSize = (max(1,
(date_list[-1] - date_list[0]) / (60 * 60 * 1000 * 10)), 'hour') (date_list[-1] - date_list[0]) / (60 * 60 * 1000 * 10)), 'hour')
...@@ -155,7 +155,7 @@ def graphPair(daily_data, date_format, graph_period): ...@@ -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, yLabelWidth = max(int(math.log10(max(x[2] for x in daily_data))) + 1,
3) * 6 3) * 6
return graph('apdex', 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': { 'xaxis': {
'mode': 'time', 'mode': 'time',
...@@ -164,10 +164,13 @@ def graphPair(daily_data, date_format, graph_period): ...@@ -164,10 +164,13 @@ def graphPair(daily_data, date_format, graph_period):
}, },
'yaxis': { 'yaxis': {
'max': 100, 'max': 100,
'axisLabel': '%', 'axisLabel': 'apdex (%)',
'labelWidth': yLabelWidth, 'labelWidth': yLabelWidth,
}, },
'lines': {'show': True}, 'lines': {'show': True},
'grid': {
'hoverable': True,
},
}, },
) + graph('Hits (per %s)' % graph_period, ) + graph('Hits (per %s)' % graph_period,
[zip(date_list, (x[2] for x in daily_data))], [zip(date_list, (x[2] for x in daily_data))],
...@@ -183,6 +186,9 @@ def graphPair(daily_data, date_format, graph_period): ...@@ -183,6 +186,9 @@ def graphPair(daily_data, date_format, graph_period):
'tickDecimals': 0, 'tickDecimals': 0,
}, },
'lines': {'show': True}, 'lines': {'show': True},
'grid': {
'hoverable': True,
},
}, },
) )
...@@ -194,7 +200,9 @@ def graph(title, data, options={}): ...@@ -194,7 +200,9 @@ def graph(title, data, options={}):
append(escape(json.dumps(data), quote=True)) append(escape(json.dumps(data), quote=True))
append('" data-options="') append('" data-options="')
append(escape(json.dumps(options), quote=True)) 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) return ''.join(result)
class APDEXStats(object): class APDEXStats(object):
...@@ -729,6 +737,9 @@ def main(): ...@@ -729,6 +737,9 @@ def main():
'h2 { background-color: #eee; } ' 'h2 { background-color: #eee; } '
'.axisLabels { color: rgb(84,84,84) !important; }' '.axisLabels { color: rgb(84,84,84) !important; }'
'.flot-x-axis .tickLabel { text-align: center; } ' '.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>') '</style>')
for script in ('jquery.js', 'jquery.flot.js', 'jquery.flot.time.js', for script in ('jquery.js', 'jquery.flot.js', 'jquery.flot.time.js',
'jquery.flot.axislabels.js'): 'jquery.flot.axislabels.js'):
...@@ -741,10 +752,38 @@ def main(): ...@@ -741,10 +752,38 @@ def main():
args.js, script)) args.js, script))
out.write('<script type="text/javascript">$(function() {' out.write('<script type="text/javascript">$(function() {'
'$(".graph").each(function (i){' '$(".graph").each(function (i){'
'$.plot(' 'var container = $(this);'
'this,' 'var previousIndex = null;'
'$.parseJSON($(this).attr("data-points")),' 'var tooltip = container.next(".tooltip");'
'$.parseJSON($(this).attr("data-options")));' '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>') '});</script>')
out.write('</head><body><h1>Overall</h1><h2>Parameters</h2>' out.write('</head><body><h1>Overall</h1><h2>Parameters</h2>'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7