\
Hey there!
\
@@ -2490,7 +1744,7 @@ my.Flotr2 = Backbone.View.extend({
this.graphColors = ["#edc240", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"];
this.el = $(this.el);
- _.bindAll(this, 'render', 'redraw');
+ _.bindAll(this, 'render', 'redraw', '_toolTip', '_xaxisLabel');
this.needToRedraw = false;
this.model.bind('change', this.render);
this.model.fields.bind('reset', this.render);
@@ -2506,7 +1760,8 @@ my.Flotr2 = Backbone.View.extend({
options.state
);
this.state = new recline.Model.ObjectState(stateData);
- this.editor = new my.Flotr2Controls({
+ this.previousTooltipPoint = {x: null, y: null};
+ this.editor = new my.FlotControls({
model: this.model,
state: this.state.toJSON()
});
@@ -2523,16 +1778,15 @@ my.Flotr2 = Backbone.View.extend({
var htmls = Mustache.render(this.template, tmplData);
$(this.el).html(htmls);
this.$graph = this.el.find('.panel.graph');
+ this.$graph.on("plothover", this._toolTip);
return this;
},
redraw: function() {
- // There appear to be issues generating a Flotr2 graph if either:
-
- // * The relevant div that graph attaches to his hidden at the moment of creating the plot -- Flotr2 will complain with
- //
+ // There are issues generating a Flot graph if either:
+ // * The relevant div that graph attaches to his hidden at the moment of creating the plot -- Flot will complain with
// Uncaught Invalid dimensions for plot, width = 0, height = 0
- // * There is no data for the plot -- either same error or may have issues later with errors like 'non-existent node-value'
+ // * There is no data for the plot -- either same error or may have issues later with errors like 'non-existent node-value'
var areWeVisible = !jQuery.expr.filters.hidden(this.el[0]);
if ((!areWeVisible || this.model.records.length === 0)) {
this.needToRedraw = true;
@@ -2541,11 +1795,9 @@ my.Flotr2 = Backbone.View.extend({
// check we have something to plot
if (this.state.get('group') && this.state.get('series')) {
- // faff around with width because flot draws axes *outside* of the element width which means graph can get push down as it hits element next to it
- this.$graph.width(this.el.width() - 20);
var series = this.createSeries();
- var options = this.getGraphOptions(this.state.attributes.graphType);
- this.plot = Flotr.draw(this.$graph.get(0), series, options);
+ var options = this.getGraphOptions(this.state.attributes.graphType, series[0].data.length);
+ this.plot = $.plot(this.$graph, series, options);
}
},
@@ -2556,85 +1808,143 @@ my.Flotr2 = Backbone.View.extend({
}
},
+ // infoboxes on mouse hover on points/bars etc
+ _toolTip: function (event, pos, item) {
+ if (item) {
+ if (this.previousTooltipPoint.x !== item.dataIndex ||
+ this.previousTooltipPoint.y !== item.seriesIndex) {
+ this.previousTooltipPoint.x = item.dataIndex;
+ this.previousTooltipPoint.y = item.seriesIndex;
+ $("#recline-flot-tooltip").remove();
+
+ var x = item.datapoint[0].toFixed(2),
+ y = item.datapoint[1].toFixed(2);
+
+ if (this.state.attributes.graphType === 'bars') {
+ x = item.datapoint[1].toFixed(2),
+ y = item.datapoint[0].toFixed(2);
+ }
+
+ var content = _.template('<%= group %> = <%= x %>, <%= series %> = <%= y %>', {
+ group: this.state.attributes.group,
+ x: this._xaxisLabel(x),
+ series: item.series.label,
+ y: y
+ });
+
+ // use a different tooltip location offset for bar charts
+ var xLocation, yLocation;
+ if (this.state.attributes.graphType === 'bars') {
+ xLocation = item.pageX + 15;
+ yLocation = item.pageY - 10;
+ } else if (this.state.attributes.graphType === 'columns') {
+ xLocation = item.pageX + 15;
+ yLocation = item.pageY;
+ } else {
+ xLocation = item.pageX + 10;
+ yLocation = item.pageY - 20;
+ }
+
+ $('
' + content + '
').css({
+ top: yLocation,
+ left: xLocation
+ }).appendTo("body").fadeIn(200);
+ }
+ } else {
+ $("#recline-flot-tooltip").remove();
+ this.previousTooltipPoint.x = null;
+ this.previousTooltipPoint.y = null;
+ }
+ },
+
+ _xaxisLabel: function (x) {
+ var xfield = this.model.fields.get(this.state.attributes.group);
+
+ // time series
+ var xtype = xfield.get('type');
+ var isDateTime = (xtype === 'date' || xtype === 'date-time' || xtype === 'time');
+
+ if (this.xvaluesAreIndex) {
+ x = parseInt(x, 10);
+ // HACK: deal with bar graph style cases where x-axis items were strings
+ // In this case x at this point is the index of the item in the list of
+ // records not its actual x-axis value
+ x = this.model.records.models[x].get(this.state.attributes.group);
+ }
+ if (isDateTime) {
+ x = new Date(x).toLocaleDateString();
+ }
+ // } else if (isDateTime) {
+ // x = new Date(parseInt(x, 10)).toLocaleDateString();
+ // }
+
+ return x;
+ },
+
// ### getGraphOptions
//
- // Get options for Flotr2 Graph
+ // Get options for Flot Graph
//
// needs to be function as can depend on state
//
// @param typeId graphType id (lines, lines-and-points etc)
- getGraphOptions: function(typeId) {
+ // @param numPoints the number of points that will be plotted
+ getGraphOptions: function(typeId, numPoints) {
var self = this;
var tickFormatter = function (x) {
- return getFormattedX(x);
- };
-
- // infoboxes on mouse hover on points/bars etc
- var trackFormatter = function (obj) {
- var x = obj.x;
- var y = obj.y;
- // it's horizontal so we have to flip
- if (self.state.attributes.graphType === 'bars') {
- var _tmp = x;
- x = y;
- y = _tmp;
+ // convert x to a string and make sure that it is not too long or the
+ // tick labels will overlap
+ // TODO: find a more accurate way of calculating the size of tick labels
+ var label = self._xaxisLabel(x) || "";
+
+ if (typeof label !== 'string') {
+ label = label.toString();
+ }
+ if (self.state.attributes.graphType !== 'bars' && label.length > 10) {
+ label = label.slice(0, 10) + "...";
}
-
- x = getFormattedX(x);
- var content = _.template('<%= group %> = <%= x %>, <%= series %> = <%= y %>', {
- group: self.state.attributes.group,
- x: x,
- series: obj.series.label,
- y: y
- });
-
- return content;
+ return label;
};
-
- var getFormattedX = function (x) {
- var xfield = self.model.fields.get(self.state.attributes.group);
- // time series
- var xtype = xfield.get('type');
- var isDateTime = (xtype === 'date' || xtype === 'date-time' || xtype === 'time');
+ var xaxis = {};
+ xaxis.tickFormatter = tickFormatter;
- if (self.model.records.models[parseInt(x)]) {
- x = self.model.records.models[parseInt(x)].get(self.state.attributes.group);
- if (isDateTime) {
- x = new Date(x).toLocaleDateString();
- }
- } else if (isDateTime) {
- x = new Date(parseInt(x)).toLocaleDateString();
+ // for labels case we only want ticks at the label intervals
+ // HACK: however we also get this case with Date fields. In that case we
+ // could have a lot of values and so we limit to max 15 (we assume)
+ if (this.xvaluesAreIndex) {
+ var numTicks = Math.min(this.model.records.length, 15);
+ var increment = this.model.records.length / numTicks;
+ var ticks = [];
+ for (i=0; i
\
@@ -2910,7 +2203,6 @@ my.Flotr2Controls = Backbone.View.extend({
});
})(jQuery, recline.View);
-
this.recline = this.recline || {};
this.recline.View = this.recline.View || {};
this.recline.View.Graph = this.recline.View.Flot;
@@ -4003,12 +3295,6 @@ my.MultiView = Backbone.View.extend({
model: this.model,
state: this.state.get('view-timeline')
})
- }, {
- id: 'transform',
- label: 'Transform',
- view: new my.Transform({
- model: this.model
- })
}];
}
// Hashes of sidebar elements
@@ -4947,138 +4233,6 @@ my.Timeline = Backbone.View.extend({
this.recline = this.recline || {};
this.recline.View = this.recline.View || {};
-// Views module following classic module pattern
-(function($, my) {
-
-// ## ColumnTransform
-//
-// View (Dialog) for doing data transformations
-my.Transform = Backbone.View.extend({
- template: ' \
- \
- ',
-
- events: {
- 'click .okButton': 'onSubmit',
- 'keydown .expression-preview-code': 'onEditorKeydown'
- },
-
- initialize: function(options) {
- this.el = $(this.el);
- },
-
- render: function() {
- var htmls = Mustache.render(this.template);
- this.el.html(htmls);
- // Put in the basic (identity) transform script
- // TODO: put this into the template?
- var editor = this.el.find('.expression-preview-code');
- if (this.model.fields.length > 0) {
- var col = this.model.fields.models[0].id;
- } else {
- var col = 'unknown';
- }
- editor.val("function(doc) {\n doc['"+ col +"'] = doc['"+ col +"'];\n return doc;\n}");
- editor.keydown();
- },
-
- onSubmit: function(e) {
- var self = this;
- var funcText = this.el.find('.expression-preview-code').val();
- var editFunc = recline.Data.Transform.evalFunction(funcText);
- if (editFunc.errorMessage) {
- this.trigger('recline:flash', {message: "Error with function! " + editFunc.errorMessage});
- return;
- }
- this.model.transform(editFunc);
- },
-
- editPreviewTemplate: ' \
- \
- \
- \
- | Field | \
- Before | \
- After | \
-
\
- \
- \
- {{#row}} \
- \
- | \
- {{field}} \
- | \
- \
- {{before}} \
- | \
- \
- {{after}} \
- | \
-
\
- {{/row}} \
- \
-
\
- ',
-
- onEditorKeydown: function(e) {
- var self = this;
- // if you don't setTimeout it won't grab the latest character if you call e.target.value
- window.setTimeout( function() {
- var errors = self.el.find('.expression-preview-parsing-status');
- var editFunc = recline.Data.Transform.evalFunction(e.target.value);
- if (!editFunc.errorMessage) {
- errors.text('No syntax error.');
- var docs = self.model.records.map(function(doc) {
- return doc.toJSON();
- });
- var previewData = recline.Data.Transform.previewTransform(docs, editFunc);
- var $el = self.el.find('.expression-preview-container');
- var fields = self.model.fields.toJSON();
- var rows = _.map(previewData.slice(0,4), function(row) {
- return _.map(fields, function(field) {
- return {
- field: field.id,
- before: row.before[field.id],
- after: row.after[field.id],
- different: !_.isEqual(row.before[field.id], row.after[field.id])
- }
- });
- });
- $el.html('');
- _.each(rows, function(row) {
- var templated = Mustache.render(self.editPreviewTemplate, {
- row: row
- });
- $el.append(templated);
- });
- } else {
- errors.text(editFunc.errorMessage);
- }
- }, 1, true);
- }
-});
-
-})(jQuery, recline.View);
-/*jshint multistr:true */
-
-this.recline = this.recline || {};
-this.recline.View = this.recline.View || {};
-
(function($, my) {
// ## FacetViewer