XplainUX Cookbook
This cookbook provides a list of different examples for the XplainUX package. If you are not yet familiar with XplainDB, we highly recommend to start with the XplainDB Cookbook first…
Basics
XplainUX serves as a package that helps you to visualize data from the Xplain backend. The easiest way to fetch data from the Xplain Data backend is using the XplainDB package. Thus, in most cases, you will use something like this:
// define a query...
var query1 = new Xplain.Db.Query({
aggregation: {
type: 'COUNT',
measure: 'Patient'
},
groupBy: {
attribute: "Patient.DoB.Age"
}
});
// execute or open this query
query1.open({
error: function(d) {
alert('Oops... Something went wrong');
},
success: function(d) {
// okay, query has been opened.
// Now visualize the results
var w = Ext.create('xplain.ux.attribute.Window', {
forQuery: query1,
x: 100,
y: 100,
parentComponent: 'winContainer'
});
}
});
This simple examples executes a query and visualizes the results using an instance of xplain.ux.attribute.Window, i.e. an xgrid. The forQuery parameter takes an instance of Xplain.Db.Query as input. x and y parameters are being used to define the position within the parentComponent. The parentComponent is the id of the panel in which the xgrid is to be displayed.
xgrid: Query not yet executed / opened
Usually, you will execute or open a query and than create an instance of an xgrid to visualize it. However, you may also use a different approach: create an instance of an xgrid first and then execute / open the query. In this case, an empty xgrid is shown until the underlying query returns some data, i.e. is being executed or opened.:
// define the query
var query1 = new Xplain.Db.Query({
aggregation: {
type: 'COUNT',
measure: 'Patient'
},
groupBy: {
attribute: "Patient.DoB.Age"
}
});
// Define how the results will be visualized
var w = Ext.create('xplain.ux.attribute.Window', {
forQuery: query1,
x: 100,
y: 100,
parentComponent: 'winContainer'
});
// execute or open this query
query1.open({
error: function(d) {
alert('Oops... Something went wrong');
},
success: function(d) {
console.log('data fetched... xgrid should have been updated');
}
});
xgrid: Using a function as input
If you define a xgrid window you will most likely use an instance of Xplain.Db.Query as value for the forQuery parameter. However, you may also use a function as input. The corresponding xgrid will wait until this function returns an instance of Xplain.Db.Query. This is particularly useful if you want to build a query programmatically.:
// Define how the results will be visualized
var w = Ext.create('xplain.ux.attribute.Window', {
forQuery: function() {
var q = new Xplain.Db.Query({
aggregation: {
type: 'COUNT',
measure: 'Patient'
},
groupBy: {
attribute: "Patient.DoB.Age"
}
});
return q;
},
x: 100,
y: 100,
parentComponent: 'winContainer'
});
xgrid: Using properties to define an xgrid
You may of course also define an xgrid as a property of an ExtJS container or panel. For instance, you may define your xgrid like this:
Ext.define('MyApp.view.Dashboard',{
extend: 'Ext.panel.Panel',
controller: 'dashboard-controller',
layout: "vbox",
items: [
{
xtype:'xgrid',
x: 1,
y: 10,
forQuery: new Xplain.Db.Query({
id: 'myDashboardQuery',
aggregation: {
type: 'COUNT',
measure: 'Patient'
},
groupBy: {
attribute: "Patient.DoB.Age"
}
}),
winTitle: 'Age',
}
];
});
Don’t forget to execute or open the corresponding query. For instance, this could be done in the constructor of the corresponding controller:
// somewhere in your controller...
var s = new Xplain.Db.Session();
var query = s.findQuery('myDashboardQuery');
query.open({
error: function(d) {
alert('Oops... Something went wrong');
},
success: function(d) {
console.log('data fetched... xgrid should have been updated');
}
});
xtable
An xgrid may be used to depict queries with up to two groupBys. If you have more groupBys and do not want to implement your own way to depict the results using a library like D3, you may use an xtable. An xtable is basically a simple tabular representation of a query result.:
var q = new Xplain.Db.Query({
// your querie definition goes here
});
// open the query and depict it using an xtable
q.open({
success: function() {
var t = Ext.create('xplain.ux.table.Window', {
forQuery: q
});
t.show();
}
});
You may also want to use the queryCanBeRendered() method to check, if a query can be rendered using an xgrid or not:
// check if query is depictable using xgrid
var s = new Xplain.Db.Session();
var q = s.findQuery('MyQueryID');
var b = xplain.ux.utils.Tools.queryCanBeRendered(q);
if (b)
// use xgrid to depict query
else
// use xtable instead
xgridcombo
An xgridcombo is a combobox whose elements are states from an attribute. For instance, if you have an attribute Patient.Residence.State you could use this attribute to enable users to select a state. As it usually is not neccessary to show the number of patients in the list of states, this combobox does not show any measure on startup. However, the user may at any point in time load and depict the corresponding measures. The usage is pretty straight formward:
// simple xgridcombo example
items: [{
xtype: 'xgridcombo',
attribute: 'Patients.Residence.State',
listConfig: {
// optionally pass some config parameters like width, etc.
}
}
]
xtagcombo
Where an xgridcombo enables a user to select a single state frome a list of available states, an xtagcombo enables a user to select multiple states. Again, the usage is pretty straight forward:
// simple xgridcombo example
items: [{
xtype: 'xtagcombo',
attribute: 'Patients.Residence.State',
listConfig: {
// optionally pass some config parameters like width, etc.
}
}
]
I18N / Internationalization
By default, XplainUX uses English for all tooltips, button texts, etc. You may however change this by overwriting the xplainUxTranslations variable before the XplainUX package is being loaded. For instance, you might want to put the following lines in your index.html to switch to German:
xplainUxTranslations = {
generic_allNode: 'Wurzel',
chart_over: 'über',
chart_barmenu_drilldown: 'Drill-Down',
chart_barmenu_hidecolumn : 'Säule verstecken',
chart_barmenu_showhiddencolumns : 'Versteckte Säulen einblenden',
chart_barmenu_nodata : 'Keine Daten für diese Ebene gefunden...',
tree_error_txt_changeAggregation : 'Während dem Ändern der Aggregatfunktion trat ein Fehler auf.',
tree_error_title_changeAggregation : 'Aggregation ändern',
tree_error_txt_oneGroupByOnly: 'Der Object Explorer kann leider nur ein Group-By pro Fenster darstellen.',
tree_error_title_oneGroupByOnly: 'Group By',
tree_totalName: ' Total',
window_btn_tooltip_clearSelections: 'Selektionen für dieses Attribut aufheben',
window_btn_tooltip_select: 'Alle markierten Zustände selektieren',
window_menu_clearSelections: 'Selektionen löschen',
window_menu_selection: 'Selektion',
window_menu_chartOptions: 'Diagramm Optionen',
window_menu_toggleFullstack: 'Fullstack Modus umschalten',
window_menu_measures: 'Diagramm Kennzahlen',
window_menu_showValues: 'Kennzahlen anzeigen...',
window_menu_showValues_referenceSelections: 'Referenzwerte anzeigen',
window_menu_showValues_zAxis: 'z-Achsen Werte anzeigen',
window_menu_restrictTo: 'Einschränken auf...',
window_menu_exportExcel: 'Export nach MS Excel',
window_menu_searchStates: 'Zustände finden...',
window_menu_addAggregation: 'Aggregation hinzufügen',
window_menu_searchFieldEmptyTxt: 'Zustönde suchen',
window_notApplicable_text: 'nicht zutreffend',
tableWindow_modelName: 'Modell Name',
}
The default values used are the following:
xplainUxTranslations = {
generic_allNode: 'All',
chart_over: 'by',
chart_barmenu_drilldown: 'Drill-Down',
chart_barmenu_hidecolumn : 'Hide column',
chart_barmenu_showhiddencolumns : 'Show hidden columns',
chart_barmenu_nodata : 'No data found on selected level...',
tree_error_txt_changeAggregation : 'An error occurred while changing the aggregation function.',
tree_error_title_changeAggregation : 'Change aggregation',
tree_error_txt_oneGroupByOnly: 'Sorry, but unfortunately the Object Explorer is currently only able to depict one group-by.',
tree_error_title_oneGroupByOnly: 'Group By',
tree_totalName: ' Total',
window_btn_tooltip_clearSelections: 'Clear selections for this attribute',
window_btn_tooltip_select: 'Select all marked states',
window_menu_clearSelections: 'Clear selections',
window_menu_selection: 'Selection',
window_menu_chartOptions: 'Chart options',
window_menu_toggleFullstack: 'Toggle fullstack mode',
window_menu_measures: 'Diagram measures',
window_menu_showValues: 'Show values...',
window_menu_showValues_referenceSelections: 'Show reference selections',
window_menu_showValues_zAxis: 'Show z-Axis values',
window_menu_restrictTo: 'Restrict to...',
window_menu_exportExcel: 'Export to MS Excel',
window_menu_searchStates: 'Find states...',
window_menu_addAggregation: 'Add Aggregation',
window_menu_searchFieldEmptyTxt: 'Search states',
window_notApplicable_text: 'not applicable',
tableWindow_modelName: 'Model name',
}