neo.mjs 4.0.94 → 4.1.0

package/examples/table/covid/MainContainer.mjs

@@ -0,0 +1,36 @@
+import TableContainer from './TableContainer.mjs';
+import Viewport       from '../../../src/container/Viewport.mjs';
+
+/**
+ * @class Neo.examples.table.covid.MainContainer
+ * @extends Neo.container.Viewport
+ */
+class MainContainer extends Viewport {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.table.covid.MainContainer'
+         * @protected
+         */
+        className: 'Neo.examples.table.covid.MainContainer',
+        /**
+         * @member {Boolean} autoMount=true
+         */
+        autoMount: true,
+        /**
+         * @member {Object[]} items=[TableContainer]
+         */
+        items: [TableContainer],
+        /**
+         * @member {Object} layout={ntype:'fit'}
+         */
+        layout: {ntype: 'fit'},
+        /**
+         * @member {Object} style={padding:'20px'}
+         */
+        style: {padding: '20px'}
+    }}
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;

package/examples/table/covid/Model.mjs

@@ -0,0 +1,65 @@
+import BaseModel from '../../../src/data/Model.mjs';
+
+/**
+ * @class Neo.examples.table.covid.Model
+ * @extends Neo.data.Model
+ */
+class Model extends BaseModel {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.table.covid.Model'
+         * @protected
+         */
+        className: 'Neo.examples.table.covid.Model',
+        /**
+         * @member {Object[]} fields
+         */
+        fields: [{
+            name: 'active',
+            type: 'Integer'
+        }, {
+            name: 'cases',
+            type: 'Integer'
+        }, {
+            name: 'casesPerOneMillion',
+            type: 'Integer'
+        }, {
+            name: 'country',
+            type: 'String'
+        }, {
+            name: 'countryInfo',
+            type: 'Object' // _id, flag, iso2, iso3, lat, long
+        }, {
+            name: 'critical',
+            type: 'Integer'
+        }, {
+            name: 'deaths',
+            type: 'Integer'
+        }, {
+            name: 'index',
+            type: 'Integer'
+        }, {
+            name: 'infected', // renderer parses to % of population
+            type: 'Integer'
+        }, {
+            name: 'recovered',
+            type: 'Integer'
+        }, {
+            name: 'tests',
+            type: 'Integer'
+        }, {
+            name: 'testsPerOneMillion',
+            type: 'Integer'
+        }, {
+            name: 'todayCases',
+            type: 'Integer'
+        }, {
+            name: 'todayDeaths',
+            type: 'Integer'
+        }]
+    }}
+}
+
+Neo.applyClassConfig(Model);
+
+export default Model;

package/examples/table/covid/Store.mjs

@@ -0,0 +1,35 @@
+import BaseStore from '../../../src/data/Store.mjs';
+import Model     from './Model.mjs';
+
+/**
+ * @class Neo.examples.table.covid.Store
+ * @extends Neo.data.Store
+ */
+class Store extends BaseStore {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.table.covid.Store'
+         * @protected
+         */
+        className: 'Neo.examples.table.covid.Store',
+        /**
+         * @member {String} keyProperty='country'
+         */
+        keyProperty: 'country',
+        /**
+         * @member {Neo.data.Model} model=Model
+         */
+        model: Model,
+        /**
+         * @member {Object[]} sorters
+         */
+        sorters: [{
+            property : 'active',
+            direction: 'DESC'
+        }]
+    }}
+}
+
+Neo.applyClassConfig(Store);
+
+export default Store;

package/examples/table/covid/TableContainer.mjs

@@ -0,0 +1,112 @@
+import BaseTableContainer       from '../../../src/table/Container.mjs';
+import Store                    from './Store.mjs';
+import TableContainerController from './TableContainerController.mjs';
+import Util                     from './Util.mjs';
+
+/**
+ * @class Neo.examples.table.covid.TableContainer
+ * @extends Neo.table.Container
+ */
+class TableContainer extends BaseTableContainer {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.table.covid.TableContainer'
+         * @protected
+         */
+        className: 'Neo.examples.table.covid.TableContainer',
+        /**
+         * @member {String[]} cls=['covid-country-table', 'neo-table-container']
+         */
+        cls: ['covid-country-table', 'neo-table-container'],
+        /**
+         * Default configs for each column
+         * @member {Object} columnDefaults
+         */
+        columnDefaults: {
+            align               : 'right',
+            defaultSortDirection: 'DESC',
+            renderer            : Util.formatNumber
+        },
+        /**
+         * @member {Object[]} columns
+         */
+        columns: [{
+            cls      : ['neo-index-column', 'neo-table-header-button'],
+            dataField: 'index',
+            dock     : 'left',
+            minWidth : 40,
+            text     : '#',
+            renderer : Util.indexRenderer,
+            width    : 40
+        }, {
+            align               : 'left',
+            dataField           : 'country',
+            defaultSortDirection: 'ASC',
+            dock                : 'left',
+            text                : 'Country',
+            width               : 200,
+
+            renderer: data => {
+                return {
+                    cls : ['neo-country-column', 'neo-table-cell'],
+                    html: [
+                        '<div style="display: flex; align-items: center">',
+                        '<img style="height:20px; margin-right:10px; width:20px;" src="' + Util.getCountryFlagUrl(data.value) + '">' + data.value,
+                        '</div>'
+                    ].join('')
+                };
+            }
+        }, {
+            dataField: 'cases',
+            text     : 'Cases'
+        }, {
+            dataField: 'casesPerOneMillion',
+            text     : 'Cases / 1M'
+        }, {
+            dataField: 'infected',
+            text     : 'Infected',
+            renderer : data => Util.formatInfected(data)
+        }, {
+            dataField: 'active',
+            text     : 'Active',
+            renderer : data => Util.formatNumber(data, '#64B5F6')
+        },  {
+            dataField: 'recovered',
+            text     : 'Recovered',
+            renderer : data => Util.formatNumber(data, '#28ca68')
+        }, {
+            dataField: 'critical',
+            text     : 'Critical',
+            renderer : data => Util.formatNumber(data, 'orange')
+        }, {
+            dataField: 'deaths',
+            text     : 'Deaths',
+            renderer : data => Util.formatNumber(data, '#fb6767')
+        }, {
+            dataField: 'todayCases',
+            text     : 'Cases today'
+        }, {
+            dataField: 'todayDeaths',
+            text     : 'Deaths today',
+            renderer : data => Util.formatNumber(data, '#fb6767')
+        }, {
+            dataField: 'tests',
+            text     : 'Tests'
+        }, {
+            dataField: 'testsPerOneMillion',
+            text     : 'Tests / 1M'
+        }],
+        /**
+         * @member {Neo.controller.Component} controller=TableContainerController
+         */
+        controller: TableContainerController,
+        /**
+         * @member {Object[]} store=MainStore
+         */
+        store: Store
+    }}
+}
+
+Neo.applyClassConfig(TableContainer);
+
+export default TableContainer;

package/examples/table/covid/TableContainerController.mjs

@@ -0,0 +1,62 @@
+import Controller from '../../../src/controller/Component.mjs';
+
+/**
+ * @class Neo.examples.table.covid.TableContainerController
+ * @extends Neo.controller.Component
+ */
+class TableContainerController extends Controller {
+    /**
+     * @member {String} apiUrl='https://disease.sh/v3/covid-19/countries'
+     */
+    apiUrl = 'https://disease.sh/v3/covid-19/countries'
+
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.table.covid.TableContainerController'
+         * @protected
+         */
+        className: 'Neo.examples.table.covid.TableContainerController'
+    }}
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+        this.loadData();
+    }
+
+    /**
+     * @param {Object[]} data
+     */
+    addStoreItems(data) {
+        let store = this.component.store;
+
+        data.forEach(item => {
+            if (item.country.includes('"')) {
+                item.country = item.country.replace('"', "\'");
+            }
+
+            item.casesPerOneMillion = item.casesPerOneMillion > item.cases ? 'N/A' : item.casesPerOneMillion || 0;
+            item.infected           = item.casesPerOneMillion;
+        });
+
+        store.data = data;
+    }
+
+    /**
+     *
+     */
+    loadData() {
+        let me = this;
+
+        fetch(me.apiUrl)
+            .then(response => response.json())
+            .catch(err => console.log('Can’t access ' + me.apiUrl, err))
+            .then(data => me.addStoreItems(data));
+    }
+}
+
+Neo.applyClassConfig(TableContainerController);
+
+export default TableContainerController;

package/examples/table/covid/Util.mjs

@@ -0,0 +1,165 @@
+import Base from '../../../src/core/Base.mjs';
+
+/**
+ * Static utility class
+ * @class Neo.examples.table.covid.Util
+ * @extends Neo.core.Base
+ */
+class Util extends Base {
+    static getStaticConfig() {return {
+        /**
+         * A regex to replace blank chars
+         * @member {RegExp} flagRegEx=/ /gi
+         * @protected
+         * @static
+         */
+        flagRegEx: / /gi,
+        /**
+         * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
+         * Change this config to enforce a county specific formatting (e.g. 'de-DE')
+         * @member {String} locales='default'
+         * @protected
+         * @static
+         */
+        locales: 'default'
+    }}
+
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.table.covid.Util'
+         * @protected
+         */
+        className: 'Neo.examples.table.covid.Util'
+    }}
+
+    /**
+     * Used for the casesPerOneMillion column to show % of population
+     * @param {Object} data
+     * @param {Number} data.value
+     * @returns {String}
+     */
+    static formatInfected(data) {
+        let value = data.value;
+
+        if (!Neo.isNumber(value)) {
+            return value || 'N/A';
+        }
+
+        value = Math.round(value / 100);
+        value /= 100;
+
+        value = value.toFixed(2) + ' %';
+
+        return value.toLocaleString(Util.locales);
+    }
+
+    /**
+     * This method will get used as a grid renderer, so the 2nd param is an overload (would be {Object} record)
+     * @param {Object} data
+     * @param {Number} data.value
+     * @param {String} [color]
+     * @returns {String}
+     */
+    static formatNumber(data, color) {
+        let value = data.value;
+
+        if (!Neo.isNumber(value)) {
+            return value || 'N/A';
+        }
+
+        value = value.toLocaleString(Util.locales);
+
+        return typeof color !== 'string' ? value : `<span style="color:${color};">${value}</span>`;
+    }
+
+    /**
+     * @param {String} name
+     * @returns {String} url
+     */
+    static getCountryFlagUrl(name) {
+        const map = {
+            'bosnia'                               : 'bosnia-and-herzegovina',
+            'cabo-verde'                           : 'cape-verde',
+            'car'                                  : 'central-african-republic',
+            'caribbean-netherlands'                : 'netherlands',
+            'channel-islands'                      : 'jersey',
+            'côte-d\'ivoire'                       : 'ivory-coast',
+            'congo'                                : 'republic-of-the-congo',
+            'congo,-the-democratic-republic-of-the': 'democratic-republic-of-congo',
+            'curaçao'                              : 'curacao',
+            'czechia'                              : 'czech-republic',
+            'diamond-princess'                     : 'japan', // cruise ship
+            'drc'                                  : 'democratic-republic-of-congo',
+            'el-salvador'                          : 'salvador',
+            'eswatini'                             : 'swaziland',
+            'faeroe-islands'                       : 'faroe-islands',
+            'falkland-islands-(malvinas)'          : 'falkland-islands',
+            'french-guiana'                        : 'france', // ?
+            'guadeloupe'                           : 'france', // ?
+            'holy-see-(vatican-city-state)'        : 'vatican-city',
+            'iran,-islamic-republic-of'            : 'iran',
+            'lao-people\'s-democratic-republic'    : 'laos',
+            'libyan-arab-jamahiriya'               : 'libya',
+            'macedonia'                            : 'republic-of-macedonia',
+            'marshall-islands'                     : 'marshall-island',
+            'mayotte'                              : 'france', // ?
+            'moldova,-republic-of'                 : 'moldova',
+            'ms-zaandam'                           : 'netherlands', // cruise ship
+            'new-caledonia'                        : 'france',
+            'palestinian-territory,-occupied'      : 'palestine',
+            'poland'                               : 'republic-of-poland',
+            'réunion'                              : 'france',
+            's.-korea'                             : 'south-korea',
+            'st.-barth'                            : 'st-barts',
+            'saint-helena'                         : 'united-kingdom', // sorry, icon not included
+            'saint-lucia'                          : 'st-lucia',
+            'saint-martin'                         : 'sint-maarten',
+            'saint-pierre-miquelon'                : 'france',
+            'saint-vincent-and-the-grenadines'     : 'st-vincent-and-the-grenadines',
+            'syrian-arab-republic'                 : 'syria',
+            'tanzania,-united-republic-of'         : 'tanzania',
+            'timor-leste'                          : 'east-timor',
+            'turks-and-caicos-islands'             : 'turks-and-caicos',
+            'u.s.-virgin-islands'                  : 'virgin-islands',
+            'uae'                                  : 'united-arab-emirates',
+            'uk'                                   : 'united-kingdom',
+            'usa'                                  : 'united-states-of-america',
+            'uzbekistan'                           : 'uzbekistn',
+            'venezuela,-bolivarian-republic-of'    : 'venezuela',
+            'viet-nam'                             : 'vietnam',
+            'wallis-and-futuna'                    : 'france'
+        };
+
+        let imageName = name.toLowerCase().replace(Util.flagRegEx, '-');
+
+        imageName = map[imageName] || imageName;
+
+        if (Neo.config.isGitHubPages) {
+            let path = `../../../../resources/images/flaticon/country_flags/png/${imageName}.png`;
+
+            if (Neo.config.environment !== 'development') {
+                path = `../../${path}`;
+            }
+
+            return path;
+        }
+
+        return `https://raw.githubusercontent.com/neomjs/pages/master/resources/images/flaticon/country_flags/png/${imageName}.png`;
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Number} data.index
+     * @returns {Object}
+     */
+    static indexRenderer(data) {
+        return {
+            cls : ['neo-index-column', 'neo-table-cell'],
+            html: data.index + 1
+        };
+    }
+}
+
+Neo.applyClassConfig(Util);
+
+export default Util;

package/examples/table/covid/app.mjs

@@ -0,0 +1,6 @@
+import MainContainer from './MainContainer.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: MainContainer,
+    name    : 'Neo.examples.table.covid'
+});

package/examples/table/covid/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo CovidTable</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/table/covid/neo-config.json

@@ -0,0 +1,8 @@
+{
+    "appPath"         : "examples/table/covid/app.mjs",
+    "basePath"        : "../../../",
+    "environment"     : "development",
+    "mainPath"        : "./Main.mjs",
+    "mainThreadAddons": ["DragDrop", "Stylesheet"],
+    "themes"          : ["neo-theme-dark", "neo-theme-light"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.0.94",
+    "version": "4.1.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -54,10 +54,10 @@
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.4",
         "postcss": "^8.4.16",
-        "sass": "^1.54.5",
+        "sass": "^1.54.6",
         "webpack": "^5.74.0",
         "webpack-cli": "^4.10.0",
-        "webpack-dev-server": "4.10.0",
+        "webpack-dev-server": "4.10.1",
         "webpack-hook-plugin": "^1.0.7",
         "webpack-node-externals": "^3.0.0"
     },

package/resources/scss/src/examples/table/covid/TableContainer.scss

@@ -0,0 +1,21 @@
+.neo-table-wrapper {
+    width: 100%
+}
+
+.neo-table-container.covid-country-table {
+    .neo-country-column {
+        min-width: 200px;
+        width    : initial;
+    }
+
+    .neo-index-column {
+        max-width: 40px;
+        min-width: 40px;
+        width    : 40px;
+    }
+
+    td, th {
+        min-width: 100px;
+        width    : 300px;
+    }
+}

package/src/grid/README.md

@@ -1,2 +1,3 @@
 The grid implementation using div tags is currently on hold in favor for the table implementation using a table tag.
-Depending on how buffering works out for a real table, this one might get continued.
+
+The BufferedGrid implementation is currently scoped for neo v5.