examples.component.coronaGallery.CountryGallery: format the numbers #…

…5812
neomjs · Aug 20, 2024 · cad3e8b · cad3e8b
1 parent af18454
commit cad3e8b
Showing 1 changed file with 15 additions and 6 deletions.
diff --git a/examples/component/coronaGallery/CountryGallery.mjs b/examples/component/coronaGallery/CountryGallery.mjs
@@ -60,6 +60,7 @@ class CountryGallery extends Gallery {
     createItem(vdomItem, record, index) {
         let me    = this,
             cls   = ['neo-gallery-item', 'image-wrap', 'view', 'neo-transition-1000'],
+            fn    = CountryGallery.formatNumber,
             style = {height: (me.itemHeight - 70) + 'px', width: me.itemWidth  + 'px'};
 
         return {cls, id: me.getItemVnodeId(record[me.keyProperty]), tabIndex: '-1', cn: [
@@ -72,31 +73,39 @@ class CountryGallery extends Gallery {
                     {tag: 'table', cls: ['neo-content-table'], cn: [
                         {tag: 'tr', cn: [
                             {tag: 'td', html: 'Cases'},
-                            {tag: 'td', cls: ['neo-align-right'], html: record.cases},
+                            {tag: 'td', cls: ['neo-align-right'], html: fn(record.cases)},
                             {tag: 'td', style: {width: '100%'}},
                             {tag: 'td', html: 'Cases today'},
-                            {tag: 'td', cls: ['neo-align-right'], html: record.todayCases}
+                            {tag: 'td', cls: ['neo-align-right'], html: fn(record.todayCases)}
                         ]},
                         {tag: 'tr', cn: [
                             {tag: 'td', html: 'Deaths'},
-                            {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths'], html: record.deaths},
+                            {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths'], html: fn(record.deaths)},
                             {tag: 'td', style: {width: '100%'}},
                             {tag: 'td', html: 'Deaths today'},
-                            {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths'], html: record.todayDeaths}
+                            {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths'], html: fn(record.todayDeaths)}
                         ]},
                         {tag: 'tr', cn: [
                             {tag: 'td', html: 'Recovered'},
-                            {tag: 'td', cls: ['neo-align-right', 'neo-content-recovered'], html: record.recovered},
+                            {tag: 'td', cls: ['neo-align-right', 'neo-content-recovered'], html: fn(record.recovered)},
                             {tag: 'td', style: {width: '100%'}},
                             {tag: 'td', html: 'Critical'},
-                            {tag: 'td', cls: ['neo-align-right', 'neo-content-critical'], html: record.critical}
+                            {tag: 'td', cls: ['neo-align-right', 'neo-content-critical'], html: fn(record.critical)}
                         ]}
                     ]}
                 ]}
             ]}
         ]}
     }
 
+    /**
+     * @param {Number} value
+     * @returns {String}
+     */
+    static formatNumber(value) {
+        return value.toLocaleString()
+    }
+
     /**
      * @param {String} name
      * @returns {String} url