From cad3e8b158348ecda7a7fafad1898edccd23fe25 Mon Sep 17 00:00:00 2001
From: tobiu <tobiasuhlig78@gmail.com>
Date: Tue, 20 Aug 2024 15:32:41 +0200
Subject: [PATCH] examples.component.coronaGallery.CountryGallery: format the
 numbers #5812

---
 .../coronaGallery/CountryGallery.mjs          | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/examples/component/coronaGallery/CountryGallery.mjs b/examples/component/coronaGallery/CountryGallery.mjs
index e260b982b..022e4e057 100644
--- 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,24 +73,24 @@ 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)}
                         ]}
                     ]}
                 ]}
@@ -97,6 +98,14 @@ class CountryGallery extends Gallery {
         ]}
     }
 
+    /**
+     * @param {Number} value
+     * @returns {String}
+     */
+    static formatNumber(value) {
+        return value.toLocaleString()
+    }
+
     /**
      * @param {String} name
      * @returns {String} url