covid19-dashboard/apps/covid/view/country/Helix.mjs

Dashboard App displaying COVID-19 numbers by country

import CountryStore from '../../store/Countries.mjs';
import Helix        from '../../../../node_modules/neo.mjs/src/component/Helix.mjs';
import Util         from '../../Util.mjs';

/**
 * @class Covid.view.country.Helix
 * @extends Neo.component.Helix
 */
class CountryHelix extends Helix {
    static getConfig() {return {
        /**
         * @member {String} className='Covid.view.country.Helix'
         * @protected
         */
        className: 'Covid.view.country.Helix',
        /**
         * @member {Object} bind
         */
        bind: {
            country: {twoWay: true, value: data => data.country}
        },
        /**
         * @member {String[]} cls=['covid-country-helix', 'neo-helix']
         */
        cls: ['covid-country-helix', 'neo-helix'],
        /**
         * @member {String|null} country_=null
         */
        country_: null,
        /**
         * The vertical delta between each helix item (increasing this value will create a spiral)
         * @member {Number} deltaY=1.2
         */
        deltaY: 1.2,
        /**
         * @member {Object} itemTpl_
         */
        itemTpl:
        {cls: ['surface', 'neo-helix-item'], style: {}, tabIndex: '-1', cn: [
            {cls: ['neo-item-wrapper'], style: {}, cn: [
                {tag: 'div', cls: ['neo-country-helix-item'], style: {}, cn: [
                    {cls: ['neo-item-header'], cn: [
                        {tag: 'img', cls: ['neo-flag']},
                        {}
                    ]},
                    {tag: 'table', cls: ['neo-content-table'], cn: [
                        {tag: 'tr', cn: [
                            {tag: 'td', html: 'Cases'},
                            {tag: 'td', cls: ['neo-align-right']},
                            {tag: 'td', style: {width: '100%'}},
                            {tag: 'td', html: 'Cases today'},
                            {tag: 'td', cls: ['neo-align-right']}
                        ]},
                        {tag: 'tr', cn: [
                            {tag: 'td', html: 'Deaths'},
                            {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths']},
                            {tag: 'td', style: {width: '100%'}},
                            {tag: 'td', html: 'Deaths today'},
                            {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths']}
                        ]},
                        {tag: 'tr', cn: [
                            {tag: 'td', html: 'Recovered'},
                            {tag: 'td', cls: ['neo-align-right', 'neo-content-recovered']},
                            {tag: 'td', style: {width: '100%'}},
                            {tag: 'td', html: 'Critical'},
                            {tag: 'td', cls: ['neo-align-right', 'neo-content-critical']}
                        ]}
                    ]}
                ]}
            ]}
        ]},
        /**
         * The unique record field containing the id.
         * @member {String} keyProperty='id'
         */
        keyProperty: 'country',
        /**
         * The radius of the Helix in px
         * @member {Number} radius=2500
         */
        radius: 2500,
        /**
         * The rotationAngle of the Helix in degrees
         * @member {Number} rotationAngle=720
         */
        rotationAngle: 720,
        /**
         * True displays the first & last name record fields below an expanded item
         * @member {Boolean} showCloneInfo=false
         */
        showCloneInfo: false,
        /**
         * @member {Neo.data.Store} store=CountryStore
         */
        store: CountryStore,
        /**
         * The translateX value gets included into each helix item
         * @member {Number} translateY=500
         */
        translateY: 500,
        /**
         * The translateX value gets included into each helix item
         * @member {Number} translateZ_=-2300
         */
        translateZ: -2300
    }}

    /**
     * Triggered after the country config got changed
     * @param {String|null} value
     * @param {String|null} oldValue
     * @protected
     */
    afterSetCountry(value, oldValue) {
        if (oldValue !== undefined) {
            let me             = this,
                selectionModel = me.selectionModel;

            if (value && !selectionModel.isSelected(value)) {
                selectionModel.select(value, false);
                me.onKeyDownSpace(null);
            }
        }
    }

    /**
     * @param {Object} vdomItem
     * @param {Object} record
     * @param {Number} index
     * @returns {Object} vdomItem
     */
    createItem(vdomItem, record, index) {
        let me         = this,
            firstChild = vdomItem.cn[0].cn[0],
            fN         = Util.formatNumber,
            table      = firstChild.cn[1];

        vdomItem.id = me.getItemVnodeId(record[me.keyProperty]);

        firstChild.cn[0].cn[0].src  = Util.getCountryFlagUrl(record.country);
        firstChild.cn[0].cn[1].html = record.country;

        table.cn[0].cn[1].html = fN({value: record.cases});
        table.cn[1].cn[1].html = fN({value: record.deaths});
        table.cn[2].cn[1].html = fN({value: record.recovered});

        table.cn[0].cn[4].html = fN({value: record.todayCases});
        table.cn[1].cn[4].html = fN({value: record.todayDeaths});
        table.cn[2].cn[4].html = fN({value: record.critical});

        return vdomItem;
    }
    /**
     * @returns {String}
     */
    getCloneTransform() {
        let me         = this,
            translateX = (me.offsetWidth  - 2800) / 6,
            translateY = (me.offsetHeight - 2700) / 6,
            translateZ = 100400 + me.perspective / 1.5;

        return 'matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,'+translateX+','+translateY+','+translateZ+',1)';
    }

    /**
     * @param {String} vnodeId
     * @returns {String}
     */
    getItemId(vnodeId) {
        return vnodeId.split('__')[1];
    }

    /**
     * Gets triggered from selection.Model: select()
     * @param {String[]} items
     */
    onSelect(items) {
        this.country = items[0] || null;
    }
}

Neo.applyClassConfig(CountryHelix);

export {CountryHelix as default};