diff --git a/config/plugins/visualizations/charts/static/app.js b/config/plugins/visualizations/charts/static/app.js index 9b032411817..7ff88eab906 100644 --- a/config/plugins/visualizations/charts/static/app.js +++ b/config/plugins/visualizations/charts/static/app.js @@ -40,7 +40,7 @@ return Backbone.View.extend( // create portlet if (!this.options.config.widget) { - this.portlet = new Portlet.View({icon : 'fa-bar-chart-o', title : 'Charts'}); + this.portlet = new Portlet.View({icon : 'fa-bar-chart-o'}); } else { this.portlet = $('
'); } @@ -64,6 +64,22 @@ return Backbone.View.extend( this.config.on('change:current_view', function() { self._showCurrent(); }); + this.config.on('change:title', function() { + self._refreshTitle(); + }); + + // render + this.render(); + }, + + // render + render: function() { + this._refreshTitle(); + }, + + // refresh title + _refreshTitle: function() { + this.portlet.title('Charts - ' + this.config.get('title')); }, // current view diff --git a/config/plugins/visualizations/charts/static/models/config.js b/config/plugins/visualizations/charts/static/models/config.js index 2ac90f096ac..d77d99e6a7e 100644 --- a/config/plugins/visualizations/charts/static/models/config.js +++ b/config/plugins/visualizations/charts/static/models/config.js @@ -9,7 +9,8 @@ return Backbone.Model.extend( defaults : { query_limit : 20, query_pace : 1000, - query_max : 5 + query_max : 5, + title : 'Create a new chart' } }); diff --git a/config/plugins/visualizations/charts/static/views/chart.js b/config/plugins/visualizations/charts/static/views/chart.js index cd8165f29bf..ac48f83e2f9 100644 --- a/config/plugins/visualizations/charts/static/views/chart.js +++ b/config/plugins/visualizations/charts/static/views/chart.js @@ -23,11 +23,6 @@ return Backbone.View.extend( // configure options this.options = Utils.merge(options, this.optionsDefault); - // main elements - this.message = new Ui.Message(); - this.title = new Ui.Input({placeholder: 'Chart title'}); - this.dataset = new Ui.Input({value : app.options.dataset.id, disabled: true, visible: false}); - // // table with chart types // @@ -115,9 +110,21 @@ return Backbone.View.extend( } }); - // construct element + // + // main/default tab + // + + // construct elements + this.title = new Ui.Input({ + placeholder: 'Chart title', + onchange: function() { + self.app.config.set('title', self.title.value()); + } + }); + this.dataset = new Ui.Input({value : app.options.dataset.id, disabled: true, visible: false}); + + // append element var $settings = $('
'); - $settings.append(Utils.wrap(this.message.$el)); $settings.append(Utils.wrap((new Ui.Label({ title : 'Provide a chart title:'})).$el)); $settings.append(Utils.wrap(this.title.$el)); $settings.append(Utils.wrap((new Ui.Label({ title : 'Select a chart type:'})).$el)); @@ -140,6 +147,7 @@ return Backbone.View.extend( var self = this; this.chart.on('change:title', function(chart) { self.title.value(chart.get('title')); + self.app.config.set('title', chart.get('title')); }); this.chart.on('change:type', function(chart) { self.table.value(chart.get('type')); diff --git a/config/plugins/visualizations/charts/static/views/charts.js b/config/plugins/visualizations/charts/static/views/charts.js index 7475bab2a1c..6014bf1ec9e 100644 --- a/config/plugins/visualizations/charts/static/views/charts.js +++ b/config/plugins/visualizations/charts/static/views/charts.js @@ -25,6 +25,13 @@ return Backbone.View.extend( self.app.chart_view.$el.show(); }, onchange : function(chart_id) { + // get chart + var chart = self.app.charts.get(chart_id); + + // update main title + self.app.config.set('title', chart.get('title')); + + // show viewport self.app.viewport_view.show(chart_id); } }); diff --git a/config/plugins/visualizations/charts/static/views/viewport.js b/config/plugins/visualizations/charts/static/views/viewport.js index e954dd160ff..8f21f31e1fd 100644 --- a/config/plugins/visualizations/charts/static/views/viewport.js +++ b/config/plugins/visualizations/charts/static/views/viewport.js @@ -25,8 +25,7 @@ return Backbone.View.extend( // add table to portlet this.portlet = new Portlet.View({ - title : '', - icon : 'fa-signal', + title : 'title', height : this.options.height, overflow : 'hidden', operations : { diff --git a/static/scripts/mvc/ui/ui-portlet.js b/static/scripts/mvc/ui/ui-portlet.js index b362f17454b..4045e4b063f 100644 --- a/static/scripts/mvc/ui/ui-portlet.js +++ b/static/scripts/mvc/ui/ui-portlet.js @@ -10,7 +10,7 @@ var View = Backbone.View.extend( // defaults options optionsDefault: { title : '', - icon : 'fa-tasks', + icon : '', buttons : null, body : null, height : null, @@ -20,6 +20,7 @@ var View = Backbone.View.extend( }, // elements + $title : null, $content : null, $buttons : null, $operations : null, @@ -35,6 +36,9 @@ var View = Backbone.View.extend( // link content this.$content = this.$el.find('#content'); + // link title + this.$title = this.$el.find('#title-text'); + // set content height if (this.options.height) { this.$el.find('#body').css('height', this.options.height); @@ -128,7 +132,7 @@ var View = Backbone.View.extend( // title title: function(new_title) { - var $el = this.$el.find('#title'); + var $el = this.$title; if (new_title) { $el.html(new_title); } @@ -147,7 +151,7 @@ var View = Backbone.View.extend( if (options.icon) tmpl += ' '; - tmpl += '
' + options.title + '
'; + tmpl += '
' + options.title + '
'; tmpl += '
' + ''; diff --git a/static/scripts/packed/mvc/ui/ui-portlet.js b/static/scripts/packed/mvc/ui/ui-portlet.js index f6d763e4d24..25e8e0777ec 100644 --- a/static/scripts/packed/mvc/ui/ui-portlet.js +++ b/static/scripts/packed/mvc/ui/ui-portlet.js @@ -1 +1 @@ -define(["utils/utils"],function(a){var b=Backbone.View.extend({visible:false,optionsDefault:{title:"",icon:"fa-tasks",buttons:null,body:null,height:null,operations:null,placement:"bottom",overflow:"auto"},$content:null,$buttons:null,$operations:null,initialize:function(d){this.options=a.merge(d,this.optionsDefault);this.setElement(this._template(this.options));this.$content=this.$el.find("#content");if(this.options.height){this.$el.find("#body").css("height",this.options.height);this.$el.find("#content").css("overflow",this.options.overflow)}this.$buttons=$(this.el).find("#buttons");if(this.options.buttons){var c=this;$.each(this.options.buttons,function(e,f){f.$el.prop("id",e);c.$buttons.append(f.$el)})}else{this.$buttons.remove()}this.$operations=$(this.el).find("#operations");if(this.options.operations){var c=this;$.each(this.options.operations,function(e,f){f.$el.prop("id",e);c.$operations.append(f.$el)})}if(this.options.body){this.append(this.options.body)}},append:function(c){this.$content.append(a.wrap(c))},content:function(){return this.$content},show:function(){this.$el.fadeIn("fast");this.visible=true},hide:function(){this.$el.fadeOut("fast");this.visible=false},enableButton:function(c){this.$buttons.find("#"+c).prop("disabled",false)},disableButton:function(c){this.$buttons.find("#"+c).prop("disabled",true)},hideOperation:function(c){this.$operations.find("#"+c).hide()},showOperation:function(c){this.$operations.find("#"+c).show()},setOperation:function(e,d){var c=this.$operations.find("#"+e);c.off("click");c.on("click",d)},title:function(d){var c=this.$el.find("#title");if(d){c.html(d)}return c.html()},_template:function(d){var c='
';if(d.title||d.icon){c+='
';if(d.icon){c+=' '}c+='
'+d.title+"
";c+="
"}c+='
';if(d.placement=="top"){c+='
'}c+='
';if(d.placement=="bottom"){c+='
'}c+="
";return c}});return{View:b}}); \ No newline at end of file +define(["utils/utils"],function(a){var b=Backbone.View.extend({visible:false,optionsDefault:{title:"",icon:"",buttons:null,body:null,height:null,operations:null,placement:"bottom",overflow:"auto"},$title:null,$content:null,$buttons:null,$operations:null,initialize:function(d){this.options=a.merge(d,this.optionsDefault);this.setElement(this._template(this.options));this.$content=this.$el.find("#content");this.$title=this.$el.find("#title-text");if(this.options.height){this.$el.find("#body").css("height",this.options.height);this.$el.find("#content").css("overflow",this.options.overflow)}this.$buttons=$(this.el).find("#buttons");if(this.options.buttons){var c=this;$.each(this.options.buttons,function(e,f){f.$el.prop("id",e);c.$buttons.append(f.$el)})}else{this.$buttons.remove()}this.$operations=$(this.el).find("#operations");if(this.options.operations){var c=this;$.each(this.options.operations,function(e,f){f.$el.prop("id",e);c.$operations.append(f.$el)})}if(this.options.body){this.append(this.options.body)}},append:function(c){this.$content.append(a.wrap(c))},content:function(){return this.$content},show:function(){this.$el.fadeIn("fast");this.visible=true},hide:function(){this.$el.fadeOut("fast");this.visible=false},enableButton:function(c){this.$buttons.find("#"+c).prop("disabled",false)},disableButton:function(c){this.$buttons.find("#"+c).prop("disabled",true)},hideOperation:function(c){this.$operations.find("#"+c).hide()},showOperation:function(c){this.$operations.find("#"+c).show()},setOperation:function(e,d){var c=this.$operations.find("#"+e);c.off("click");c.on("click",d)},title:function(d){var c=this.$title;if(d){c.html(d)}return c.html()},_template:function(d){var c='
';if(d.title||d.icon){c+='
';if(d.icon){c+=' '}c+='
'+d.title+"
";c+="
"}c+='
';if(d.placement=="top"){c+='
'}c+='
';if(d.placement=="bottom"){c+='
'}c+="
";return c}});return{View:b}}); \ No newline at end of file