# HG changeset patch # User Arthur Lutz # Date 1309259769 -7200 # Node ID d6366de1d0dc55989000e25384176dce1fae5ae8 # Parent be2fe6fff7346a34696c25e2010819a89425c4ab Display proper date in plot/flot (closes #1725589) diff -r be2fe6fff734 -r d6366de1d0dc web/data/cubicweb.flot.js --- a/web/data/cubicweb.flot.js Tue Jun 28 11:20:33 2011 +0200 +++ b/web/data/cubicweb.flot.js Tue Jun 28 13:16:09 2011 +0200 @@ -13,16 +13,25 @@ var previousPoint = null; function onPlotHover(event, pos, item) { + var $fig = $(event.target); if (item) { if (previousPoint != item.datapoint) { previousPoint = item.datapoint; $("#tooltip").remove(); var x = item.datapoint[0].toFixed(2), - y = item.datapoint[1].toFixed(2); - if (item.datapoint.length == 3) { - x = new Date(item.datapoint[2]); - x = x.toLocaleDateString() + ' ' + x.toLocaleTimeString(); + y = item.datapoint[1].toFixed(2); + if ($fig.data('mode') == 'time') { + x = new Date(item.datapoint[0]); + var dateformat = $fig.data('dateformat'); + if (dateformat) { + x = x.strftime(dateformat); + } else { + x = x.toLocaleDateString() + ' ' + x.toLocaleTimeString(); + } } else if (item.datapoint.length == 4) { + // NOTE: this has no chance to work with jquery flot >= 0.6 because + // jquery flot normalizes datapoints and only keeps 2 columns. Either + // use processRawData hook or use the 'dateformat' option. x = new Date(item.datapoint[2]); x = x.strftime(item.datapoint[3]); } diff -r be2fe6fff734 -r d6366de1d0dc web/views/plots.py --- a/web/views/plots.py Tue Jun 28 11:20:33 2011 +0200 +++ b/web/views/plots.py Tue Jun 28 13:16:09 2011 +0200 @@ -82,15 +82,17 @@ class FlotPlotWidget(PlotWidget): """PlotRenderer widget using Flot""" onload = u""" -var fig = jQuery("#%(figid)s"); +var fig = jQuery('#%(figid)s'); if (fig.attr('cubicweb:type') != 'prepared-plot') { %(plotdefs)s - jQuery.plot(jQuery("#%(figid)s"), [%(plotdata)s], + jQuery.plot(jQuery('#%(figid)s'), [%(plotdata)s], {points: {show: true}, lines: {show: true}, grid: {hoverable: true}, + /*yaxis : {tickFormatter : suffixFormatter},*/ xaxis: {mode: %(mode)s}}); - jQuery("#%(figid)s").bind("plothover", onPlotHover); + jQuery('#%(figid)s').data({mode: %(mode)s, dateformat: %(dateformat)s}); + jQuery('#%(figid)s').bind('plothover', onPlotHover); fig.attr('cubicweb:type','prepared-plot'); } """ @@ -101,11 +103,8 @@ self.timemode = timemode def dump_plot(self, plot): - # XXX for now, the only way that we have to customize properly - # datetime labels on tooltips is to insert an additional column - # cf. function onPlotHover in cubicweb.flot.js if self.timemode: - plot = [(datetime2ticks(x), y, datetime2ticks(x)) for x, y in plot] + plot = [(datetime2ticks(x), y) for x, y in plot] return json_dumps(plot) def _render(self, req, width=500, height=400): @@ -122,11 +121,14 @@ plotdefs.append('var %s = %s;' % (plotid, self.dump_plot(plot))) # XXX ugly but required in order to not crash my demo plotdata.append("{label: '%s', data: %s}" % (label.replace(u'&', u''), plotid)) + fmt = req.property_value('ui.date-format') # XXX datetime-format + # XXX TODO make plot options customizable req.html_headers.add_onload(self.onload % {'plotdefs': '\n'.join(plotdefs), 'figid': figid, 'plotdata': ','.join(plotdata), - 'mode': self.timemode and "'time'" or 'null'}) + 'mode': self.timemode and "'time'" or 'null', + 'dateformat': '"%s"' % fmt}) class PlotView(baseviews.AnyRsetView):