Skip to content

Commit

Permalink
Display currently selected chart type details in settings and groups
Browse files Browse the repository at this point in the history
  • Loading branch information
@guerler
guerler committed Aug 22, 2016
1 parent 84e922c commit fbd8155
Show file tree
Hide file tree
Showing 9 changed files with 55 additions and 27 deletions.
14 changes: 14 additions & 0 deletions config/plugins/visualizations/charts/static/app.css
View file
Expand Up @@ -4,6 +4,20 @@
z-index: 100;
}

.charts-description {
margin-bottom: 20px;
}

.charts-description-image {
width: 50px;
height: 43px;
margin-right: 10px;
}

.charts-description-text {
font-weight: normal;
}

.charts-tooltip {
position: absolute;
text-align: center;
Expand Down
19 changes: 10 additions & 9 deletions config/plugins/visualizations/charts/static/app.js
View file
Expand Up @@ -35,19 +35,20 @@ define( [ 'mvc/ui/ui-modal', 'mvc/ui/ui-portlet', 'mvc/ui/ui-misc', 'utils/utils
this[ view_id ].show();
},

/** Returns root path */
chartPath: function( chart_type ) {
var path = chart_type.split( /_(.+)/ );
if ( path.length >= 2 ) {
return path[ 0 ] + '/' + path[ 1 ];
}
console.debug( 'FAILED app:chartPath() - Invalid format: ' + chart_type );
},

/** Message */
showModal: function( title, body ) {
var self = this;
this.modal.show( { title: title, body: body, buttons: { 'Close': function() { self.modal.hide() } } } );
},

/** Split chart type into path components */
split: function( chart_type ) {
var path = chart_type.split( /_(.+)/ );
if ( path.length >= 2 ) {
return path[ 0 ] + '/' + path[ 1 ];
} else {
return chart_type;
}
}
});
});
1 change: 1 addition & 0 deletions config/plugins/visualizations/charts/static/charts/others/example/config.js
View file
Expand Up @@ -5,6 +5,7 @@ define([], function() {
library : 'Custom',
tag : 'svg',
keywords : 'others',
description : 'This is a developer example which demonstrates how to implement and configure a basic d3-based plugin for charts.',
groups : {
x : { type : 'data_column', is_numeric : true, label : 'Bubble x-position' },
y : { type : 'data_column', is_numeric : true, label : 'Bubble y-position' },
Expand Down
Binary file modified config/plugins/visualizations/charts/static/charts/others/example/logo.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions config/plugins/visualizations/charts/static/components/model.js
View file
Expand Up @@ -15,6 +15,7 @@ define( [ 'utils/utils' ], function( Utils ) {
initialize: function( options ) {
this.groups = new Backbone.Collection();
this.settings = new Backbone.Model();
this.definition = {};
},

reset: function( options ) {
Expand Down
8 changes: 6 additions & 2 deletions config/plugins/visualizations/charts/static/views/groups.js
View file
@@ -1,5 +1,6 @@
/** This class renders the chart configuration form. */
define( [ 'utils/utils', 'mvc/ui/ui-misc', 'mvc/form/form-view', 'mvc/form/form-repeat', 'mvc/form/form-data' ], function( Utils, Ui, Form, Repeat, FormData ) {
define( [ 'utils/utils', 'mvc/ui/ui-misc', 'mvc/form/form-view', 'mvc/form/form-repeat', 'mvc/form/form-data', 'plugin/views/description' ],
function( Utils, Ui, Form, Repeat, FormData, Description ) {
var GroupView = Backbone.View.extend({
initialize: function( app, options ) {
var self = this;
Expand Down Expand Up @@ -72,8 +73,11 @@ define( [ 'utils/utils', 'mvc/ui/ui-misc', 'mvc/form/form-view', 'mvc/form/form-
min : 1,
onnew : function() { self.chart.groups.add( { id : Utils.uid() } ) }
});
this.description = new Description( this.app );
this.message = new Ui.Message( { message : 'There are no options for this chart type.', persistent : true, status : 'info' } );
this.setElement( $( '<div/>' ).append( this.repeat.$el.addClass( 'ui-margin-bottom' ) ).append( this.message.$el.addClass( 'ui-margin-bottom' ) ) );
this.setElement( $( '<div/>' ).append( this.description.$el )
.append( this.repeat.$el.addClass( 'ui-margin-bottom' ) )
.append( this.message.$el.addClass( 'ui-margin-bottom' ) ) );
this.listenTo( this.chart, 'change', function() { self.render() } );
this.listenTo( this.chart.groups, 'add remove reset', function() { self.chart.set( 'modified', true ) } );
this.listenTo( this.chart.groups, 'remove', function( group ) { self.repeat.del( group.id ) } );
Expand Down
35 changes: 21 additions & 14 deletions config/plugins/visualizations/charts/static/views/settings.js
View file
@@ -1,27 +1,34 @@
/** This class renders the chart configuration form. */
define( [ 'utils/utils', 'mvc/ui/ui-misc', 'mvc/form/form-view', 'mvc/form/form-data' ], function( Utils, Ui, Form, FormData ) {
define( [ 'utils/utils', 'mvc/ui/ui-misc', 'mvc/form/form-view', 'mvc/form/form-data', 'plugin/views/description' ], function( Utils, Ui, Form, FormData, Description ) {
return Backbone.View.extend({
initialize: function( app, options ) {
var self = this;
this.app = app;
this.chart = app.chart;
this.setElement( '<div/>' );
this.description = new Description( this.app );
this.message = new Ui.Message( { message: 'There are no options for this chart type.', persistent: true, status: 'info' } );
this.setElement( $( '<div/>' ).append( this.description.$el ).append( this.message.$el ).append( this.$form = $( '<div/>' ) ) );
this.listenTo( this.chart, 'change', function() { self.render() } );
},
render: function() {
var self = this;
var inputs = Utils.clone( this.chart.definition.settings );
FormData.visitInputs( inputs, function( input, name ) {
var model_value = self.chart.settings.get( name );
model_value !== undefined && !input.hidden && ( input.value = model_value );
});
this.form = new Form({
inputs : inputs,
cls : 'ui-portlet-plain',
onchange : function() { self.chart.settings.set( self.form.data.create() ); }
});
this.chart.settings.set( self.form.data.create() );
var view = _.size( inputs ) > 0 ? this.form : new Ui.Message( { message: 'There are no options for this chart type.', persistent: true, status: 'info' } );
this.$el.empty().append( view.$el.addClass( 'ui-margin-bottom' ) );
if ( _.size( inputs ) > 0 ) {
FormData.visitInputs( inputs, function( input, name ) {
var model_value = self.chart.settings.get( name );
model_value !== undefined && !input.hidden && ( input.value = model_value );
});
this.form = new Form({
inputs : inputs,
cls : 'ui-portlet-plain',
onchange : function() { self.chart.settings.set( self.form.data.create() ); }
});
this.$form.empty().append( this.form.$el );
this.message.$el.hide();
} else {
this.$form.empty();
this.message.$el.show();
}
}
});
});
2 changes: 1 addition & 1 deletion config/plugins/visualizations/charts/static/views/types.js
View file
Expand Up @@ -98,7 +98,7 @@ define( [ 'utils/utils', 'mvc/ui/ui-misc', 'plugin/charts/overview' ], function(
$el.append( this._template_item({
id : id,
title : title,
url : app_root + 'charts/' + this.app.chartPath( id ) + '/logo.png'
url : app_root + 'charts/' + this.app.split( id ) + '/logo.png'
}));
}
this.$el.append( $el );
Expand Down
2 changes: 1 addition & 1 deletion config/plugins/visualizations/charts/static/views/viewport.js
View file
Expand Up @@ -110,7 +110,7 @@ define( [ 'mvc/ui/ui-portlet', 'mvc/ui/ui-misc', 'utils/utils' ], function( Port
var n_panels = chart.settings.get( 'use_panels' ) === 'true' ? chart.groups.length : 1;
this._createContainer( chart.definition.tag, n_panels );
chart.state( 'wait', 'Please wait...' );
require( [ 'plugin/charts/' + this.app.chartPath( chart.get( 'type' ) ) + '/wrapper' ], function( ChartView ) {
require( [ 'plugin/charts/' + this.app.split( chart.get( 'type' ) ) + '/wrapper' ], function( ChartView ) {
new ChartView( self.app, { process : process, chart : chart, canvas_list : self.canvas_list } );
});
}
Expand Down

0 comments on commit fbd8155

Please sign in to comment.