/*global define */
define(['jquery', 'underscore', 'backbone', 'views/MetricModalView'],
function($, _, Backbone, MetricModalView) {
'use strict';
/**
* @class MetricView
* @classdesc the display of the dataset citation and usage metrics on the dataset landing page
* @classcategory Views
* @screenshot views/MetricView.png
* @extends Backbone.View
*/
var MetricView = Backbone.View.extend(
/** @lends MetricView.prototype */{
tagName: 'a',
// id: 'metrics-button',
/**
* Class name to be applied to the metric buttons
* @type {string}
*/
className: 'btn metrics',
/**
* Attribute to indicate the type of metric
* @type {string}
*/
metricName: null,
/**
* The Metric Model associated with this view
* @type {MetricsModel}
*/
model: null,
//Templates
metricButtonTemplate: _.template( "<span class='metric-icon'> <i class='icon" +
" <%=metricIcon%>'></i> </span>" +
"<span class='metric-name'> <%=metricName%> </span>" +
"<span class='metric-value'> <i class='icon metric-icon icon-spinner icon-spin'>" +
"</i> </span>"),
events: {
"click" : "showMetricModal",
},
/**
* @param {Object} options - A literal object with options to pass to the view
* @property {MetricsModel} options.model - The MetricsModel object associated with this view
* @property {string} options.metricName - The name of the metric view
* @property {string} options.pid - Associated dataset identifier with this view
*/
initialize: function(options){
if((typeof options == "undefined")){
var options = {};
}
this.metricName = options.metricName;
this.model = options.model;
this.pid = options.pid;
},
/**
* Renders the apprpriate metric view on the UI
*/
render: function () {
// Generating the Button view for the given metric
if (this.metricName == 'Citations') {
this.$el.html(this.metricButtonTemplate({metricValue:'', metricIcon:'icon-quote-right', metricName:this.metricName}));
} else if (this.metricName == 'Downloads') {
this.$el.html(this.metricButtonTemplate({metricValue:'', metricIcon:'icon-cloud-download', metricName:this.metricName}));
} else if (this.metricName == 'Views') {
this.$el.html(this.metricButtonTemplate({metricValue:'', metricIcon:'icon-eye-open', metricName:this.metricName}));
} else {
this.$el.html('');
};
// Adding tool-tip for the buttons
// TODO: Change to 'Show metricName', once you've the modals working.
if (MetacatUI.appModel.get("displayDatasetMetricsTooltip")) {
this.$el.addClass("tooltip-this")
.attr("data-placement", "top")
.attr("data-trigger", "hover")
.attr("data-delay", "700")
.attr("data-container", "body");
if (this.metricName == 'Citations') {
this.$el.attr("data-title", "For all the versions of this dataset, the number of times that all or part of this dataset was cited.");
} else if (this.metricName == 'Downloads') {
this.$el.attr("data-title", "For all the versions of this dataset, the number of times that all or part of this dataset was downloaded.");
} else if (this.metricName == 'Views') {
this.$el.attr("data-title", "For all the versions of this dataset, the number of times that all or part of this dataset was viewed.");
} else {
this.$el.attr("data-title", "");
}
};
// waiting for the fetch() call to succeed.
this.listenTo(this.model, "sync", this.renderResults);
// in case when there is an error for the fetch call.
this.listenTo(this.model, "error", this.renderError);
return this;
},
/**
* Handles the click functions and displays appropriate modals on click events
*/
showMetricModal: function(e) {
if (MetacatUI.appModel.get("displayMetricModals") ) {
var modalView = new MetricModalView({metricName: this.metricName, metricsModel: this.model, pid: this.pid});
modalView.render();
this.modalView = modalView;
if( Array.isArray(this.subviews) ){
this.subviews.push(modalView);
}
else{
this.subviews = [modalView];
}
//Track this event
MetacatUI.analytics?.trackEvent("metrics", "Click metric", this.metricName);
}
},
/**
* Displays the metrics count and badge on the landing page
*/
renderResults: function() {
var total = this.model.get("total"+this.metricName);
// Check if the metric object exists in results obtained from the service
// If it does, get its total value else set the total count to 0
// Replacing the metric total count with the spinning icon.
this.$('.metric-value').text(MetacatUI.appView.numberAbbreviator(total, 1));
this.$('.metric-value').addClass("badge");
},
/**
* Manages error handling in case Metrics Service does not responsd
*/
renderError: function() {
// Replacing the spinning icon with a question-mark
// when the metrics are not loaded
var iconEl = this.$('.metric-value').find('.metric-icon');
iconEl.removeClass('icon-spinner');
iconEl.removeClass('icon-spin');
iconEl.addClass("icon-exclamation-sign more-info");
// Setting the error tool-tip
this.$el.removeAttr("data-title");
this.$el.addClass("metrics-button-disabled");
this.$el.attr("data-title", "The number of " + this.metricName + " could not be retreived at this time.");
},
/**
* Cleans up listeners from this view
*/
onClose: function(){
_.each(this.subviews, function(view){
if( view.onClose ){
view.onClose();
}
}, this);
}
});
return MetricView;
});