covid19-dashboard
Version:
Dashboard App displaying COVID-19 numbers by country
261 lines (244 loc) • 8.91 kB
JavaScript
import BoxLabel from '../../../node_modules/neo.mjs/src/component/BoxLabel.mjs';
import Container from '../../../node_modules/neo.mjs/src/container/Base.mjs';
import Helix from './country/Helix.mjs';
import HelixContainerController from './HelixContainerController.mjs';
import Panel from '../../../node_modules/neo.mjs/src/container/Panel.mjs';
import RangeField from '../../../node_modules/neo.mjs/src/form/field/Range.mjs';
/**
* @class Covid.view.HelixContainer
* @extends Neo.container.Base
*/
class HelixContainer extends Container {
static getConfig() {return {
/**
* @member {String} className='Covid.view.HelixContainer'
* @protected
*/
className: 'Covid.view.HelixContainer',
/**
* @member {String[]} cls=['neo-helix-maincontainer', 'neo-viewport']
*/
cls: ['neo-helix-maincontainer', 'neo-viewport'],
/**
* @member {Neo.controller.Component|null} controller=HelixContainerController
*/
controller: HelixContainerController,
/**
* @member {Neo.component.Helix|null} helix=null
*/
helix: null,
/**
* @member {Object|null} helixConfig=null
*/
helixConfig: null,
/**
* @member {Object|null} layout={ntype: 'hbox', align: 'stretch'}
*/
layout: {ntype: 'hbox', align: 'stretch'},
/**
* @member {Object[]|null} items
*/
items: [{
ntype : 'container',
flex : 1,
items : [],
layout: 'fit'
}, {
module : Panel,
cls : ['neo-configuration-panel', 'neo-panel', 'neo-container'],
layout : {ntype: 'vbox', align: 'stretch'},
reference: 'controls-panel',
style : {backgroundColor: '#2b2b2b'},
width : 250,
containerConfig: {
style: {overflowY: 'scroll'}
},
headers: [{
dock : 'top',
items: [{
ntype : 'button',
handler: 'onCollapseButtonClick',
text : 'X'
}, {
ntype: 'label',
text : 'Helix Controls'
}]
}],
itemDefaults: {
ntype : 'rangefield',
flex : '0 1 auto',
labelWidth : '100px',
style : {padding: '10px'},
useInputEvent: true,
listeners : {
change: 'onRangefieldChange'
}
},
items: [{
labelText: 'Translate X',
maxValue : 2000,
minValue : -2000,
name : 'translateX',
value : 400
}, {
labelText: 'Translate Y',
maxValue : 2500,
minValue : -2500,
name : 'translateY',
value : -350
}, {
eventName: 'changeTranslateZ',
labelText: 'Translate Z',
maxValue : 4500,
minValue : -4500,
name : 'translateZ',
value : -1500,
listeners: {
change : 'onRangefieldChange',
mounted: 'onRangefieldMounted'
}
}, {
labelText : 'Delta Y',
labelAlign: 'top',
maxValue : 600,
minValue : -600,
name : 'deltaY',
value : 70
}, {
eventName: 'changeRotation',
labelText: 'Rotate',
minValue : -720,
maxValue : 720,
name : 'rotationAngle',
value : 0,
listeners: {
change : 'onRangefieldChange',
mounted: 'onRangefieldMounted'
}
}, {
labelText: 'Radius',
maxValue : 3500,
minValue : 900,
name : 'radius',
value : 1500
}, {
labelText: 'Perspective',
minValue : 50,
maxValue : 3000,
name : 'perspective',
value : 800
}, {
labelText: 'Item Angle',
minValue : 1,
maxValue : 36,
name : 'itemAngle',
value : 8
}, {
labelText: 'Max Opacity',
name : 'maxOpacity',
minValue : 0,
maxValue : 100,
value : 80 // todo: multi-thumb slider [30, 80]
}, {
labelText: 'Min Opacity',
name : 'minOpacity',
minValue : 0,
maxValue : 100,
value : 30
}, {
ntype : 'button',
handler : 'onFlipItemsButtonClick',
text : 'Flip Items',
listeners: {},
style : {margin: '20px'}
}, {
ntype: 'label',
text : 'Sort By:'
}, {
ntype : 'container',
layout: {ntype: 'hbox', align: 'stretch'},
style : {minHeight: '134px', padding: '0'},
items: [{
ntype : 'container',
layout: {ntype: 'vbox', align: 'stretch'},
itemDefaults: {
ntype : 'button',
handler: 'onSortButtonClick'
},
items: [{
field: 'cases',
text : 'Cases',
style: {margin: '10px', marginTop: '0'}
}, {
field: 'deaths',
text : 'Deaths',
style: {margin: '10px', marginBottom: '10px', marginTop: 0}
}, {
field: 'country',
text : 'Country',
style: {margin: '10px', marginTop: 0}
}, {
field: 'recovered',
text : 'Recovered',
style: {margin: '10px', marginTop: 0}
}]
}, {
ntype : 'container',
layout: {ntype: 'vbox', align: 'stretch'},
itemDefaults: {
ntype : 'button',
handler: 'onSortButtonClick'
},
items: [{
field: 'todayCases',
text : 'Cases today',
style: {margin: '10px', marginTop: '0'}
}, {
field: 'todayDeaths',
text : 'Deaths today',
style: {margin: '10px', marginBottom: '10px', marginTop: 0}
}, {
field: 'critical',
text : 'Critical',
style: {margin: '10px', marginBottom: '43px', marginTop: 0}
}]
}]
}, {
ntype : 'button',
handler : 'onFollowSelectionButtonClick',
iconCls : 'fa fa-square',
text : 'Follow Selection',
listeners: {},
style: {
margin : '20px',
marginBottom: '10px'
}
}, {
module: BoxLabel,
text : [
'<b>Navigation Concept</b>',
'<p>Click on an item to select it. Afterwards you can use the Arrow Keys to walk through the items.</p>',
'<p>Hit the Space Key to rotate the currently selected item to the front.</p>',
'<p>Hit the Enter Key to expand the currently selected item.</p>'
].join('')
}]
}]
}}
/**
* @param {Object} config
*/
construct(config) {
super.construct(config);
let me = this;
me.helix = Neo.create({
module : Helix,
appName : me.appName,
parentId : me.id,
reference: 'helix',
...me.helixConfig
});
me.items[0].items.push(me.helix);
}
}
Neo.applyClassConfig(HelixContainer);
export {HelixContainer as default};