@fto-consult/expo-ui 2.31.5 → 2.33.0

package/appConfig.txt

@@ -11,4 +11,9 @@
 
     /***les fonctions d'aggregations du datagrid**/
     datagridAggregatorFunctions : {objectOf({code:{string},label:{string},eval:{function}})|| arrayOf({code:{string},label:{string},eval:{function}})}
+    /**l'ensemble des selectors à appliquer au champs de type hashtag, permettant de faire des liens vers d'autres tables**/
+    sprintfSelectors : {
+         "&libele&" : selectLabel,
+    }
+    getTableData : {function(tableName)=>table} retourne l'ojet table data
  }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.31.5",
+  "version": "2.33.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -61,7 +61,7 @@
     "@emotion/native": "^11.10.0",
     "@expo/html-elements": "^0.2.0",
     "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^1.25.24",
+    "@fto-consult/common": "^1.26.0",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.5.2",

package/src/components/Chart/index.js

@@ -41,7 +41,11 @@ const ChartComponent = React.forwardRef(({options,style,height,width,chartId:cus
         destroyChart(chartContext.current);
       }
   },[])
-  return <Chart {...props} ref={ref} chartId={chartId} style={[theme.styles.pb1,style]} options={options} chartContext={chartContext} testID={testID}/>
+  if(theme.isDark()){
+     options.tooltip = defaultObj(options.tooltip);
+     options.tooltip.theme = 'dark';
+  }
+  return <Chart {...props} ref={ref} chartId={chartId} style={[options.chart.height && {minHeight:options.chart.height},options.chart.width && {minWidth:options.chart.width},theme.styles.p1,style]} options={options} chartContext={chartContext} testID={testID}/>
 });
 
 

package/src/components/Datagrid/Common/Common.js

@@ -41,6 +41,7 @@ import {DialogProvider} from "$ecomponents/Form/FormData";
 import Chart,{getMaxSupportedSeriesSize} from "$ecomponents/Chart";
 import notify from "$cnotify";
 import FileSystem from "$file-system";
+import sprintf from "$cutils/sprintf";
 
 export const donutChart = {
     isChart : true,
@@ -245,6 +246,7 @@ export default class CommonDatagridComponent extends AppComponent {
             dateFields : {value : {}},
             sectionListColumnsSize : {value : {current:0}}, //la taille du nombre d'éléments de section dans les colonnes
             chartRef : {value : {current:null}},
+            chartSeriesNamesColumnsMapping : {value : {}},//le mappage entre les index des series et les colonnes coorespondantes
         }) 
         const sessionAggregator = defaultStr(this.getSessionData("aggregatorFunction")).trim();
         const aggregatorProps = defaultStr(this.props.aggregatorFunction).trim();
@@ -290,7 +292,7 @@ export default class CommonDatagridComponent extends AppComponent {
         if(this.canHandleColumnResize()){
             this.state.columnsWidths = this.preparedColumns.widths;
         }
-        this.state.chartConfig = extendObj({},this.getSessionData("chartConfig"),this.props.chartConfig);
+        this.state.chartConfig = extendObj(true,{},this.getSessionData("chartConfig"),this.props.chartConfig);
         if(!("sparkline" in this.state.chartConfig) && this.isDashboard()){
             this.state.chartConfig.sparkline = true;
         }
@@ -1265,8 +1267,8 @@ export default class CommonDatagridComponent extends AppComponent {
    isChartRendable(){
      return !this.isPivotDatagrid() && this.hasFootersFields();
    }
-   isValidChartConfig(config){
-        config = defaultObj(config,this.state.chartConfig);
+   isValidChartConfig(){
+        const config = this.state.chartConfig;
         return isNonNullString(config.x) && isNonNullString(config.y);
    }
    canRenderChart(){
@@ -1402,10 +1404,11 @@ export default class CommonDatagridComponent extends AppComponent {
             }
         }
         return new Promise((resolve,reject)=>{
+            const data = this.getChartConfig();
             DialogProvider.open({
                 title : 'Configuration des graphes',
                 subtitle : false,
-                data : this.getCharConfig(),
+                data,
                 fields : {
                     x : {
                         text : 'Axe des x[horizontal]',
@@ -1435,6 +1438,50 @@ export default class CommonDatagridComponent extends AppComponent {
                         items : yItems,
                         multiple : true,
                     },
+                    dataLabels : {
+                        type : 'switch',
+                        label : "Affich les valeurs",
+                        checkedTooltip : "Les étiquettes de valeurs seront affichées sur le graphe",
+                        checkedValue : true,
+                        uncheckedValue : false,
+                        defaultValue : this.isDashboard()? true : false,
+                    },
+                    showXaxis : {
+                        type : "switch",
+                        text : "Afficher l'axe des X",
+                        type : "switch",
+                        checkedValue : true,
+                        uncheckedValue : false,
+                        defaultValue : !this.isDashboard(),
+                    },
+                    showYaxis : {
+                        type : "switch",
+                        text : "Afficher l'axe des Y",
+                        type : "switch",
+                        checkedValue : true,
+                        uncheckedValue : false,
+                        defaultValue : !this.isDashboard(),
+                    },
+                    showLegend : {
+                        type : "switch",
+                        text : "Afficher la legende",
+                        type : "switch",
+                        checkedValue : true,
+                        uncheckedValue : false,
+                        defaultValue : !this.isDashboard(),
+                    },
+                    width : {
+                        type : "number",
+                        text : "Largeur du graphe",
+                        tooltip : "Définissez la valeur 0 si vous voulez que le graphe occupe toute la largeur de con contenueur",
+                        defaultValue : this.getDefaultChartWidth(),
+                    },
+                    height : {
+                        type : "number",
+                        text : "Hauteur du graphe",
+                        validType : "numberGreaterThan[0]",
+                        defaultValue : this.getDefaultChartHeight(),
+                    },
                     stacked : stackSettings,
                     sparkline : {
                         type : 'switch',
@@ -1451,6 +1498,12 @@ export default class CommonDatagridComponent extends AppComponent {
                     titleColor: {
                         text : "Couleur de titre",
                         type :"color",
+                        format : "hashtag"
+                    },
+                    fileName : {
+                        text : "Nom fichier en téléchargement",
+                        format : "hashtag",
+                        tooltip : "Veuillez spécifier le nom du fichier du graphe qui sera utilisée lors du téléchargement"
                     },
                 },
                 actions : [
@@ -1473,7 +1526,7 @@ export default class CommonDatagridComponent extends AppComponent {
             })
         })
    }
-   getCharConfig(){
+   getChartConfig(){
       return defaultObj(this.state.chartConfig);
    }
    getChartIsRendableArgs(){
@@ -1490,7 +1543,9 @@ export default class CommonDatagridComponent extends AppComponent {
    downloadChart(){
         if(!this.chartRef.current || !this.chartRef.current.dataURI) return Promise.reject({message:'Référence du graphique non valide'});
         return this.chartRef.current.dataURI().then(({ imgURI, blob })=>{
-            FileSystem.write({content:imgURI,fileName:"graphe.png",contentType:"image/png"})
+            const config = this.getChartConfig();
+            const fileName = sprintf(defaultStr(config.fileName,config.title,"graphe"));
+            FileSystem.write({content:imgURI,fileName})
         });
     }
    ///reoturne les options de menus à appliquer sur le char
@@ -1582,8 +1637,8 @@ export default class CommonDatagridComponent extends AppComponent {
             }}
         />
    }
-   getEmptyDataValue(){
-        return "N/A";
+   getEmptySectionListHeaderValue(){
+        return defaultStr(this.props.sectionListHeaderEmptyValue,"N/A");
    }
    /*** retourne les sectionHeaderSeries par défautt */
    getDefaultSectionHeadersSeries(){
@@ -1596,6 +1651,7 @@ export default class CommonDatagridComponent extends AppComponent {
             if(!isObj(footer)) continue;
             if(counter >= max) break;
             r.push(i);
+            counter ++;
       }
       return r;
    }
@@ -1622,13 +1678,12 @@ export default class CommonDatagridComponent extends AppComponent {
                 
         const code = aggregatorFunction.code;
         const isDonut = chartType.isDonut || chartType.isRadial;
-        const config = this.getCharConfig();
+        const config = this.getChartConfig();
         //@see : https://apexcharts.com/docs/series/
         ///lorsqu'on affiche uniquement les totaux des sections, alors la visualition se fait sur uniquement sur la base des valeurs
         ///on parcoure uniquement les entêtes des sectionLis
         const dataIndexes={},dataInexesNames = {};
         //la variable sectionListHeaderSeries, permet de récupérer les colonnes de type montant à utiliser pour le rendu du chart
-        let serieName = "";
         const tableFooters = this.getFootersFields();
         const defaultSectionListHeadersSeries = this.getDefaultSectionHeadersSeries();
         let seriesConfig = isDonut ? [] : Array.isArray(config.sectionListHeadersSeries) && config.sectionListHeadersSeries.length ? config.sectionListHeadersSeries : [];
@@ -1645,6 +1700,7 @@ export default class CommonDatagridComponent extends AppComponent {
                 seriesConfig = defaultSectionListHeadersSeries;
             }
         }
+        const seriesNamesMapping = {};
         /**** boucle sur chaque éléments trouvée dans le tableau des données sectionListData */
         const loopForFooter = ({column,serieName,footers,header})=>{
             if(!isObj(column) || !isObj(footers)) return null;
@@ -1652,6 +1708,9 @@ export default class CommonDatagridComponent extends AppComponent {
             const footer = footers[column.field];
             if(typeof footer[code] !== 'number') return null;
             if(typeof footer[code] !== 'number') return null;
+            if(header === this.emptySectionListHeaderValue){
+                header = this.getEmptySectionListHeaderValue();
+            }
             if(isDonut){
                 dataIndexes[header] = footer[code];
             } else {
@@ -1663,12 +1722,13 @@ export default class CommonDatagridComponent extends AppComponent {
             if(!isObj(this.sectionListHeaderFooters[header])) return null;
             const footers = this.sectionListHeaderFooters[header];
             if(isDonut){
-                loopForFooter({footers,header,column:yAxisColumn})
+                loopForFooter({footers,header,column:yAxisColumn,columnField:yAxisColumn.field})
             } else {
                 seriesConfig.map((s)=>{
                     const serie = this.state.columns[s];
                     const serieName = defaultStr(serie.label,serie.text,s);
-                    loopForFooter({footers,serie,serieName,header,column:tableFooters[s]})
+                    this.chartSeriesNamesColumnsMapping[serieName] =  serie;
+                    loopForFooter({footers,serie,columnField:s,serieName,header,column:tableFooters[s]})
                 })
             }
         });
@@ -1693,6 +1753,12 @@ export default class CommonDatagridComponent extends AppComponent {
             }
         }
    }
+   getDefaultChartHeight(){
+        return defaultNumber(this.props.chartProps?.height,this.isDashboard()?80:350);
+   }
+   getDefaultChartWidth(){
+        return defaultNumber(this.props.chartProps?.width);
+   }
    /*** permet de formatter les valeurs de la courbe en fonction du type passé en paramètre */
    chartValueFormattter(value,columnType){
         
@@ -1707,7 +1773,7 @@ export default class CommonDatagridComponent extends AppComponent {
             return null;
         }
         const isDonut = chartType.isDonut || chartType.isRadial;
-        const config = this.getCharConfig();
+        const config = this.getChartConfig();
         if(!this.state.columns[config.y]) return null;
         const yAxisColumn = this.state.columns[config.y];
         const type = defaultStr(yAxisColumn.jsType,yAxisColumn.type).toLowerCase();
@@ -1728,10 +1794,14 @@ export default class CommonDatagridComponent extends AppComponent {
             xAxisColumn = this.state.columns[config.x];
         }
         const aggregatorFunction = this.getActiveAggregatorFunction().eval;
-        const emptyValue = this.getEmptyDataValue();
+        const emptyValue = this.getEmptySectionListHeaderValue();
         const indexes = {};
         let series = [],xaxis = {},customConfig = {},seriesNamesToColumns={};
         let count = 0;
+        //on réinitialise le mappage entre les index
+        Object.map(this.chartSeriesNamesColumnsMapping,(_,k)=>{
+            delete this.chartSeriesNamesColumnsMapping[k];
+        });
         if(!this.isSectionList()){
             this.state.data.map((data,index)=>{
                 if(!isObj(data))return null;
@@ -1771,6 +1841,7 @@ export default class CommonDatagridComponent extends AppComponent {
                     type : chartType.type,
                     data,
                 })
+                this.chartSeriesNamesColumnsMapping[name] = col;
             })
         } else {
             const configs = this.getSectionListHeadersChartOptions({chartType,aggregatorFunction,xAxisColumn,yAxisColumn});
@@ -1793,8 +1864,25 @@ export default class CommonDatagridComponent extends AppComponent {
             chartProps[settingKey] = defaultObj(chartProps[settingKey]);
             chartProps[settingKey][key] = config[key];
         });
+        const dataLabelFormatter = typeof chartProps.dataLabels?.formatter =="function"? chartProps.dataLabels.formatter : undefined;
         const chartOptions = {
             ...chartProps,
+            dataLabels : extendObj(true,{enabled:!this.isDashboard()},chartProps.dataLabels,{
+                formatter : (value, { seriesIndex, dataPointIndex, w })=> {
+                    const serie = w.config.series[seriesIndex];
+                    const serieName = serie.name;
+                    const column = isDonut ? defaultObj((this.state.columns[yAxisColumn.field],yAxisColumn)): defaultObj(this.chartSeriesNamesColumnsMapping[serieName]);
+                    const columnField = defaultStr(column.field, isDonut? config.y : undefined);
+                    if(dataLabelFormatter){
+                        return dataLabelFormatter({value,column,columnDef:column,columnField,serie,serieName,seriesIndex})
+                    }
+                    if(typeof value !=='number') return value;
+                    if(defaultStr(column.format).toLowerCase() ==='money'){
+                        return value.formatMoney();
+                    }
+                    return value.formatNumber();
+                }
+            }),
             title :extendObj(true,{}, {
                 text: defaultStr(config.title,chartProps.title),
                 align: 'left',
@@ -1812,8 +1900,12 @@ export default class CommonDatagridComponent extends AppComponent {
             series,
             chart : extendObj(true,{},
                 {toolbar : {show : false}},
-                {height :this.isDashboard()?80:350},chartProps.chart,
-                {type : chartType.type}
+                chartProps.chart,
+                {
+                    height : defaultNumber(config.height,this.getDefaultChartHeight()),
+                    width : defaultNumber(config.width) || this.getDefaultChartWidth() || undefined,
+                    type : chartType.type
+                },
             )
         }
         const labelColor = theme.Colors.isValid(config.labelColor)? config.labelColor : theme.colors.text; 
@@ -1826,13 +1918,35 @@ export default class CommonDatagridComponent extends AppComponent {
             delete chartOptions.xaxis;
             //delete chartOptions.yaxis;
         }
-        chartOptions.yaxis = extendObj(true,{},{type: 'category'},chartProps.yaxis);
+        chartOptions.yaxis = extendObj(true,{},{type: 'category'},defaultObj(chartProps.yaxis));
         const yLabels = chartOptions.yaxis.labels = defaultObj(chartOptions.yaxis.labels);
         yLabels.style = defaultObj(yLabels.style)
         yLabels.style.colors = (Array.isArray(yLabels.style.colors) && yLabels.style.colors.length || theme.Colors.isValid(yLabels.style.colors)) ? yLabels.style.colors : labelColor;
+        const yLabelsSerieName = series?.length == 1 && series[0] && series[0].name ? series[0].name : undefined;
+        const yLabelsColumn = yLabelsSerieName ? this.chartSeriesNamesColumnsMapping[yLabelsSerieName] : undefined;
+        let yLabelFormat = null;
+        if(!isDonut && !yLabelFormat){
+            for(let i in series){
+                const v = series[i];
+                if(!isObj(v) || !isNonNullString(v.name) || !this.chartSeriesNamesColumnsMapping[v.name]) break;
+                if(yLabelFormat && this.chartSeriesNamesColumnsMapping[v.name]?.format !=yLabelFormat) {
+                    yLabelFormat = null;
+                    break;
+                }
+                if(!yLabelFormat){
+                    yLabelFormat = this.chartSeriesNamesColumnsMapping[v.name]?.format;
+                }
+            }
+        }
         yLabels.formatter = (value)=>{
-            if(typeof value =="number") return value.formatNumber();
-            return value;
+            if(typeof value !='number') return value;
+            if(yLabelFormat =='money' || (isDonut && yAxisColumn.format =="money")){
+                return value.formatMoney();
+            }
+            if(yLabelsColumn && yLabelsColumn.format =='money'){
+                return value.formatMoney();
+            }
+            return value.formatNumber();
         }
         chartOptions.chart.id = this.chartIdPrefix+"-"+defaultStr(chartType.key,"no-key");
         if(!chartType.isDonut){
@@ -1844,16 +1958,19 @@ export default class CommonDatagridComponent extends AppComponent {
         if(chartOptions.chart.sparkline){
             chartOptions.chart.sparkline = {enabled: true}
         } else delete chartOptions.chart.sparkline;
-        if(chartOptions.chart.sparkline && chartOptions.chart.sparkline.enabled){
-            chartOptions.xaxis = defaultObj(chartOptions.xaxis);
-            chartOptions.xaxis.labels = defaultObj(chartOptions.xaxis.labels);
-            chartOptions.xaxis.labels.show = false;
+        //const spackLine = chartOptions.chart.sparkline;
+        chartOptions.xaxis = defaultObj(chartOptions.xaxis);
+        chartOptions.xaxis.labels = defaultObj(chartOptions.xaxis.labels);
+        chartOptions.xaxis.labels.show  = ("showXaxis" in config) ? !!config.showXaxis : !this.isDashboard();
+        
+        chartOptions.yaxis.labels = defaultObj(chartOptions.yaxis.labels);
+        chartOptions.yaxis.labels.show = ("showYaxis" in config) ? !!config.showYaxis : !this.isDashboard();
+        
+        chartOptions.legend = defaultObj(chartOptions.legend);
+        chartOptions.legend.show = ("showLegend" in config) ? !!config.showLegend : !this.isDashboard();
 
-            chartOptions.yaxis = defaultObj(chartOptions.yaxis);
-            chartOptions.yaxis.labels = defaultObj(chartOptions.yaxis.labels);
-            chartOptions.yaxis.labels.show = false;
-            chartOptions.legend = defaultObj(chartOptions.legend);
-            chartOptions.legend.show = false;
+        if("dataLabels" in config){
+            chartOptions.dataLabels.enabled = !!config.dataLabels;
         }
         return <Chart
             options = {chartOptions}
@@ -1951,7 +2068,7 @@ export default class CommonDatagridComponent extends AppComponent {
        const columns = args.columns || this.state.columns;
        const currentSortedColumn = isObj(args.sortedColumn) && args.sortedColumn.column? args.sortedColumn : defaultObj(this.sortRef.current);
        const visibleColumns = [],headerFilters = [],visibleColumnsNames={};
-       const sectionListColumnsMenuItems = [];
+       const sectionListColumnsMenuItems = [],filterableColumnsNames = [];
        const sortable = defaultBool(this.props.sortable,true);
        const sortedColumns = {};
        let sortedColumnsLength = 0;
@@ -2054,6 +2171,7 @@ export default class CommonDatagridComponent extends AppComponent {
             if(colFilter){
                 const fCol = defaultObj(this.filters[header.field]);
                 this.filters[header.field] = fCol;
+                filterableColumnsNames.push(header.field);
                 delete restCol.sortable;
                 filterProps = {
                     ...restCol,
@@ -2154,6 +2272,7 @@ export default class CommonDatagridComponent extends AppComponent {
         this.preparedColumns.totalWidths = totalWidths;
         this.preparedColumns.sectionListColumns = sectionListColumns;
         this.preparedColumns.sectionListColumnsMenuItems = sectionListColumnsMenuItems;
+        this.preparedColumns.filterableColumnsNames = filterableColumnsNames;
         return this.preparedColumns;
    }
    getPaginatedSelectedRows(data){
@@ -2359,7 +2478,7 @@ export default class CommonDatagridComponent extends AppComponent {
         args.columns = this.preparedColumns.visibleColumns;
         args.columnsNames = this.preparedColumns.visibleColumnsNames;
         const key = item.sectionListHeaderKey;
-        const label = key === this.emptySectionListHeaderValue ? defaultStr(this.props.sectionListHeaderEmptyValue,"N/A") : key;
+        const label = key === this.emptySectionListHeaderValue ? this.getEmptySectionListHeaderValue() : key;
         const style = typeof this.props.getSectionListHeaderStyle =='function' ? this.props.getSectionListHeaderStyle(args) : null;
         const cStyle = typeof this.props.getSectionListHeaderContentContainerStyle =="function" ?this.props.getSectionListHeaderContentContainerStyle(args) : undefined;
         const lStyle = typeof this.props.getSectionListHeaderLabelStyle =='function' ? this.props.getSectionListHeaderLabelStyle(args) : null;
@@ -2543,6 +2662,11 @@ export default class CommonDatagridComponent extends AppComponent {
     willConvertFiltersToSQL(){
         return !!defaultVal(this.props.convertFiltersToSQL,willConvertFiltersToSQL());;
     }
+    /*** retourne la liste des colonnes sur lesquelles on peut effectuer un filtre*/
+    getFilterableColumnsNames(){ 
+        const {filterableColumnsNames} = defaultObj(this.preparedColumns);
+        return Array.isArray(filterableColumnsNames)? filterableColumnsNames : [];
+    }
     /*** récupère les filtres en cours du datagrid
      * @param {boolean} prepare si les filtres seront apprêtés grace à la méthode prepareFilters de $cFilters 
      * @param {boolean} convertFiltersToSQL si les filtres seront convertis au formatSQL
@@ -3380,9 +3504,9 @@ CommonDatagridComponent.propTypes = {
         //type : PropTypes.oneOfType(chartDisplayType).isRequired,//le type de graphe : l'une des valeurs parmis les éléments cités plus haut
         x : PropTypes.string.isRequired, //l'axe horizontal
         y : PropTypes.string.isRequired, //l'axe des y, les colonnes de type nombre
-        series : PropTypes.arrayOf([PropTypes.string]), //les séries, le nombre de courbe a afficher sur le graphe, en fonction du type
+        series : PropTypes.arrayOf(PropTypes.string), //les séries, le nombre de courbe a afficher sur le graphe, en fonction du type
         /**** les series à utiliser pour l'affichage des données lorsque les colonnes sont groupées, ie les montant de totalisation sont utilisés */
-        sectionListHeadersSeries : PropTypes.arrayOf([PropTypes.string]),
+        sectionListHeadersSeries : PropTypes.arrayOf(PropTypes.string),
     }),
     displayType : chartDisplayType,
     /*** les types d'afichates supportés par l'application */

package/src/components/Datagrid/Common/TableData.js

@@ -98,6 +98,7 @@ export default class CommonTableDatagrid extends CommonDatagrid{
                 fetchOptions = extendObj(true,true,{},fetchOptions,{selector : fetchFilters});
                 fetchOptions.dataSources = this.currentDataSources;
                 fetchOptions.sort = this.getSort();
+                fetchOptions.fields = this.getFilterableColumnsNames();
                 let limit = this.getQueryLimit();
                 if(limit > 0 && !this.isPivotDatagrid()){
                     fetchOptions.limit = limit;

package/src/components/Form/Fields/CurrencyFormat.js

@@ -0,0 +1,18 @@
+import Format from "$ecomponents/SelectCurrency/Format";
+import TextField  from"./TextField";
+export default class CurrencyFormatField extends TextField{
+    _render(props,setRef){
+        props.onChange = (args)=>{
+            this.validate(args);
+        }
+        return <Format
+            {...props}
+            setRef = {setRef}
+        />
+    }
+}
+
+
+CurrencyFormatField.propTypes = {
+    ...TextField.propTypes,
+}

package/src/components/Form/Fields/Field.js

@@ -505,9 +505,9 @@ export default class Field extends AppComponent {
     }
     sprintf(){
         if(this.isDisabled() || this.isReadOnly()) return this;
-        sprintf({value:this.getValue(),cb:(val)=>{
+        sprintf({context:this,value:this.getValue(),formatter:this.props.sprintfResultFormatter}).then((val)=>{
             this.setValue(APP.sprintf(val),true);
-        }});
+        });
     }
     /**** met le focus sur le prochain cham */
     focusNextField (){
@@ -915,7 +915,7 @@ export default class Field extends AppComponent {
                     right = <Icon color={theme.colors.primary} {...props} tooltip = {tooltip} style={[styles.icon,props.style]} icon="information"/>;
                 }
                 if(canRenderHashtag && !rest.disabled && !rest.readOnly){
-                    const nRight = <Icon {...props} icon={"format-header-pound"} style={[right||cRight?{marginLeft:-5}:null,props.style]} title={"Cliquer insérer un hashtag, ie faire référence à une données de ventes, d'achas, de stocks, de règlement..."} onPress={this.sprintf.bind(this)}/>;
+                    const nRight = <Icon {...props} icon={"format-header-pound"} style={[right||cRight?{marginLeft:-5}:null,props.style]} title={"Cliquer insérer un hashtag, ie faire référence à une données externe"} onPress={this.sprintf.bind(this)}/>;
                     right = right ? <>{right}{nRight}</> : nRight;
                 }
                 return (cRight)? <>{cRight}{right}</> : right;
@@ -988,6 +988,8 @@ Field.propTypes = {
         PropTypes.node,
         PropTypes.func,
     ]),
+    /**** la fonction utilisée pour le formattage des valeurs de type sprintf */
+    sprintfResultFormatter : PropTypes.func,
     jsType : PropTypes.string,
     usePlaceholderWhenEmpty : PropTypes.bool,//si la valeur du placeholder sera utilée, lorsque la valeur du champ de type formatable est nulle ou égale à la valeur vide
     responsive : PropTypes.bool,

package/src/components/Form/Fields/SelectCurrency.js

@@ -1,39 +1,15 @@
 import SelectField from "./SelectField";
 import {selectCurrencyFieldProps} from "$ecomponents/SelectCurrency";
-import appConfig from "$app/config";
-import {defaultStr} from "$utils";
 
 export default class FormFieldSelectCurrency extends SelectField{
     constructor(props){
         super(props);
-        Object.defineProperties(this,{
-            currencyFormatRef : {value : {current:defaultStr(appConfig.currencyFormat)}}
-        });
-    }
-    onValidate(args){
-        const {context} = args;
-        if(context && context.getField){
-            const field = context.getField("currencyFormat");
-            if(field && field.setValue){
-                field.setValue(defaultStr(this.currencyFormatRef.current));
-            }
-        }
-        super.onValidate(args);
     }
     getComponentProps(props){
-        this.currencyFormatRef.current = defaultStr(props.currencyFormat,this.currencyFormatRef.current,appConfig.currencyFormat)
-        return {...selectCurrencyFieldProps({...props,onChange:(args)=>{
-            this.currencyFormatRef.current = defaultStr(args.currencyFormat);
-            if(this.props.onChange){
-                this.props.onChange(args);
-            }
-        }})}
-    }
-    getValidValue(data){
-        data.currencyFormat = this.currencyFormatRef.current;
-        return super.getValidValue(data);
+        return {...selectCurrencyFieldProps(props)}
     }
 }
+
 FormFieldSelectCurrency.propTypes = {
     ...SelectField.propTypes,
 }

package/src/components/Form/Fields/SelectTableData/Component.js

@@ -11,6 +11,7 @@ import {getFetchOptions,prepareFilters} from "$cutils/filters";
 import fetch from "$capi"
 import {willConvertFiltersToSQL} from "$ecomponents/Datagrid/utils";
 import React from "$react";
+import appConfig from "$appConfig";
 
 /*** la tabledataSelectField permet de faire des requêtes distantes pour rechercher les données
  *  Elle doit prendre en paramètre et de manière requis : les props suivante : 
@@ -24,7 +25,8 @@ const TableDataSelectField = React.forwardRef((_props,ref)=>{
     props.data = defaultObj(props.data);
     foreignKeyColumn = foreignKeyColumn.trim();
     convertFiltersToSQL = defaultVal(convertFiltersToSQL,willConvertFiltersToSQL());
-    const fKeyTable = getForeignKeyTable(foreignKeyTable,props)
+    getForeignKeyTable = getForeignKeyTable || appConfig.get("getTableData");
+    const fKeyTable = typeof getForeignKeyTable =='function' ? getForeignKeyTable(foreignKeyTable,props) : undefined
     if(!isObj(fKeyTable) || !(defaultStr(fKeyTable.tableName,fKeyTable.table))){
         console.error("type de données invalide pour la fKeyTable ",fKeyTable," composant SelectTableData",_props);
         return null;
@@ -224,7 +226,7 @@ TableDataSelectField.propTypes = {
         PropTypes.string,
         PropTypes.func, //s'il s'agit d'une fonciton qui sera appelée
     ]),
-    getForeignKeyTable : PropTypes.func.isRequired, //la fonction permettant de récupérer la fKeyTable data dont fait référence le champ
+    getForeignKeyTable : PropTypes.func, //la fonction permettant de récupérer la fKeyTable data dont fait référence le champ
     foreignKeyTable : PropTypes.string, //le nom de la fKeyTable data à laquelle se reporte le champ
     onFetchItems : PropTypes.func,
     fetchDataOpts : PropTypes.shape({

package/src/components/Form/Fields/index.js

@@ -20,7 +20,7 @@ import * as eFormFields from "$extendFormFields";
 import "$utils";
 import React from "$react";
 import SelectDateFormat from "./SelectDateFormat";
-
+import CurrencyFormat from "./CurrencyFormat";
 export * from "$extendFormFields";
 
 const defFormFields = {
@@ -30,6 +30,7 @@ const defFormFields = {
     SelectTableData,
     SelectCountry,
     SelectCurrency
+    ,CurrencyFormat
     ,Switch
     ,Checkbox
     //,IdField
@@ -61,6 +62,7 @@ export {
     SelectTableData,
     SelectCountry
     ,SelectCurrency
+    ,CurrencyFormat
     ,Switch
     ,Checkbox
     //,IdField

package/src/components/Form/Fields/sprintf.js

@@ -1,7 +1,7 @@
 import selectors from "./sprintfSelectors";
-import {isNonNullString,defaultFunc} from "$utils";
+import {isNonNullString,defaultFunc,isObj,isPromise} from "$utils";
 
-export default  ({value,val,cb,success})=>{
+export default  ({value,val,formatter,cb,success})=>{
     val = defaultStr(value,val)
     if(!isNonNullString(val)){
         return null;
@@ -16,27 +16,59 @@ export default  ({value,val,cb,success})=>{
             keys.push(i.toUpperCase())
         }
     }
-    let results = {};
+    const results = {};
     let length = keys.length;
     let index = length;
     let key = undefined
-    const next = ()=>{
-        index -=1;
-        if(index < 0){
-            for(let i in results){
-                let t = selectors[i.toLowerCase()];
-                let replace = results[i];
-                let dbName = defaultStr(t.dbName).toLowerCase(), type = defaultStr(t.type).toLowerCase();
-                if( dbName !== 'struct_data' && type !== 'field' && type !== 'form'){
-                    replace = " #"+defaultStr(t.dbName)+"["+i.ltrim("&").rtrim("&")+"-"+replace+"]".toUpperCase();
+    const sKeys = {};
+    return new Promise((resolve)=>{
+        const next = ()=>{
+            index -=1;
+            if(index < 0){
+                for(let i in results){
+                    let indexName = i.toLowerCase();
+                    let selector = selectors[indexName];
+                    if(!selector){
+                        indexName = i.toUpperCase();
+                        selector = selectors[indexName];
+                    }
+                    const replace = results[i];
+                    if(typeof formatter =='function'){
+                        val = formatter({selectors,selector,value:val,replace,result:results[i],results,indexName,selectorIndex:indexName,selectorName:indexName})
+                    }
+                    if(typeof val =='string' && typeof replace =='string'){
+                        val = val.replaceAll(i,replace);
+                    }
                 }
-                val = val.replaceAll(i,replace.toUpperCase());
+                val = defaultStr(val);
+                cb(val);
+                resolve(val);
+            } else {
+                key = keys[index];
+                if(!isNonNullString(key)) {return next();}
+                let indexName = i.toLowerCase();
+                let selector = selectors[indexName];
+                if(!selector){
+                    indexName = i.toUpperCase();
+                    selector = selectors[indexName];
+                }
+                sKeys[i] = indexName;
+                const select = isObj(selector)? selector.select : selector;
+                if(typeof cb =='function'){
+                    const v = select({...rest,selector,selectors,indexName,selectorIndex:indexName,selectorName:indexName,results,index:key,keys,key,value:val});
+                    if(isPromise(v)){
+                        return v.then((r)=>{
+                            if(typeof r ==='string'){
+                                results[key] = r;
+                            }
+                        }).finally(next);
+                    } else if(typeof v =='string' || typeof v =='number'){
+                        results[key] = v.toString();
+                    }
+                }
+                next();
             }
-            cb(val);
-        } else {
-            key = keys[index];
-            if(!isNonNullString(key)) {return next();}
         }
-    }
-    next();
+        next();
+    })
 }

package/src/components/Form/Fields/sprintfSelectors.js

@@ -1,116 +1,19 @@
 import Date from "$lib/date";
-const selectLabel = {
-    title : 'Sélectionner un libelé',
-    table : 'labels',
-    dbName : 'struct_data',
-    itemValue : ({item})=>defaultStr(item.label,item.code)
-}
+import {defaultObj} from "$utils";
+import appConfig from "$capp/config";
+const sprintfSelectors = defaultObj(appConfig.get("sprintfSelectors"));
 export default  {
-    "&libele&" : selectLabel,
-    "&vente&" : {
-        title : 'Sélectionner une vente',
-        table : 'sales',
-    },
-    "&achat&" : {
-        title : 'Sélectionner un achat',
-        table : 'purchases',
-    },
-    "&stock&" : {
-        title : 'Sélectionner stock',
-        table : 'stocks',
-    },
-    "&transfert&" : {
-        title : 'Sélectionner mouvement de transfert',
-        table : 'stocks_transfers',
-    },
-    "&reglement&" : {
-        title : 'Sélectionner un règlement',
-        table : 'payments',
-    },
-    "&tiers&" : {
-        title : 'Sélectionner un tier',
-        table : 'third_parties',
-        dbName : 'third_parties',
-    },
-    "&projet&" : {
-        title : 'Sélectionner un projet',
-        table : 'projects',
-        dbName : 'projects',
-    },
-    "&tache&" : {
-        title : 'Sélectionner une tâche',
-        table : 'tasks',
-        dbName : 'projects',
-    },
-    "&commercial&" : {
-        title : 'Sélectionner commercial',
-        table : 'users',
-        dbName : 'users',
-        fetchDataOpts:{
-            selector : {$and:[{isSeller:1}]}
-        }
-    },
-    "&client&" : {
-        title : 'Sélectionner client',
-        table : 'third_parties',
-        dbName : 'third_parties',
-        fetchDataOpts:{
-            selector : {$and:[{type:{$in:["customer"]}}]}
-        }
-    },
-    "&fournisseur&" : {
-        title : 'Sélectionner Fournisseur',
-        table : 'third_parties',
-        dbName : 'third_parties',
-        fetchDataOpts:{
-            selector : {$and:[{type:{$in:["provider"]}}]}
-        }
-    },
-    "&utilisateur&" : {
-        title : 'Sélectionner un utilisateur',
-        table : 'users',
-        dbName : 'users',
-    },
-    "&caisse&" : {
-        title : 'Sélectionner une caisse',
-        table : 'checkouts',
-        dbName : 'common',
-    },
-    "&produit&" : {
-        title : 'Sélectionner un produit/article',
-        table : 'products',
-        dbName : 'products',
-    },
-    "&categorie&" : {
-        title : 'Sélectionner une catégorie de produit',
-        table : 'products_categories',
-        dbName : 'products',
-    },
-    "&taxe&" : {
-        title : 'Sélectionner une taxe',
-        table : 'taxes',
-        dbName : 'common',
-    },
-    "&depot&" : {
-        title : 'Sélectionner un dépôt',
-        table : 'warehouses',
-        dbName : 'common',
-    },
-    "&contact&" : {
-        title : 'Sélectionner un contact',
-        table : 'contacts',
-        dbName : 'common',
-    },
+    ...sprintfSelectors,
     "&sdate&" : {
         title : 'Sélectionner une date',
         type : 'field',
         field : {
-            type : 'date',
-            text : 'Sélectionner une date',
-            format : Date.defaultDateFormat
+              type : 'date',
+              text : 'Sélectionner une date',
+              format : Date.defaultDateFormat
         },
         desc : "remplace le motif par la date qui sera sélectionnée par l'utilisateur au format jj/mm/aaaa",
-    },
+     },
     "&date&" : "remplace le motif par la date actuelle au format : jj/mm/aaaa",
     "&heure&" : "remplace le motif par l'heure actuelle au format hh:mm:ss",
     "&dateheure&" : "remplace le motif par la date et l'heure actuelle au format : jj/mm/aaaa hh:mm:ss",

package/src/components/Form/FormData/componentsTypes.js

@@ -16,6 +16,8 @@ const componentTypes =  {
     selectcountry : Fields.SelectCountry,
     selectdateformat : Fields.SelectDateFormat,
     selectcurrency : Fields.SelectCurrency,
+    currencyformat : Fields.CurrencyFormat,
+    currencyFormat : Fields.CurrencyFormat,
     dateformat : Fields.SelectDateFormat,
     date : Fields.Date,
     time : Fields.Time,

package/src/components/SelectCurrency/Format.js

@@ -0,0 +1,27 @@
+// Copyright 2022 @fto-consult/Boris Fouomene. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+import React from "$react";
+import TextField from "$components/TextField";
+import appConfig from "$capp/config";
+import {isNonNullString,defaultStr} from "$cutils";
+
+const CurrencyFormat = React.forwardRef((props,ref)=>{
+    const defaultValue = isNonNullString(props.defaultValue) && props.defaultValue.contains("v" && props.defaultValue || defaultStr(appConfig.currencyFormat,"%v %s"))
+    return <TextField      
+        affix = {false}
+        enableCopy = {false}
+        {...props}
+        defaultValue = {defaultValue}
+        ref = {ref}
+        title="Format d'affichage des valeurs numériques : de la forme %v%s ou %v représente la valeur du montant et %s représente la devise : exemple %s%v => $10 et %s %v => 10 $"
+    />  
+});
+
+CurrencyFormat.displayName = "CurrencyFormatComponent";
+
+export default CurrencyFormat;
+
+CurrencyFormat.propTypes = {
+    ...TextField.propTypes
+}

package/src/components/SelectCurrency/index.js

@@ -2,32 +2,25 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 import React from "$react";
-import {defaultObj,defaultStr,isNonNullString} from "$utils";
+import {defaultStr} from "$utils";
 import SimpleSelect from "$ecomponents/SimpleSelect";
-import TextField from "$ecomponents/TextField";
-import Icon from "$ecomponents/Icon";
 import {currencies} from "$ccurrency";
-import { Pressable } from "react-native";
-import {styles} from "$theme";
 import appConfig from "$app/config";
-import PropTypes from "prop-types";
+import Format from "./Format";
 
 const CurrencySelector = React.forwardRef((props,ref)=>{
     return <SimpleSelect ref={ref} {...selectCurrencyFieldProps(props)}/>
 });
 
+export {Format};
 CurrencySelector.displayName = "CurrencySelector";
+CurrencySelector.Format = Format;
 
 export default CurrencySelector;
 
-export const currencyFormatRef = React.createRef(null);
-
-/*** onAdd est appelé lorsqu'on ajoute un format personalisé */
-export const selectCurrencyFieldProps = ({right,disabled,readOnly,onFormatChange,isFilter,onChange,onBlur,editable,...props})=>{
+export const selectCurrencyFieldProps = ({disabled,readOnly,isFilter,editable,...props})=>{
     const isEditable = disabled !== true && readOnly !== true && editable !== false;
     const currency = appConfig.currency;
-    currencyFormatRef.current = defaultStr(currencyFormatRef.current,appConfig.currencyFormat,"%v %s");
-    const iconSize = 25;
     return {
         items : currencies,
         getItemValue : ({item})=>item.code,
@@ -37,69 +30,12 @@ export const selectCurrencyFieldProps = ({right,disabled,readOnly,onFormatChange
         enableCopy : false,
         ...props,
         isFilter,
-        onChange : (args)=>{
-            args.currencyFormat = args.format = defaultStr(currencyFormatRef.current)
-            if(onChange){
-                onChange(args);
-            }
-        },
-        onBlur : (args)=>{
-            args.currencyFormat = args.format = defaultStr(currencyFormatRef.current);
-            if(onBlur){
-                onBlur(args);
-            }
-        },
         disabled : !isEditable,
         editable : isEditable,
-        right : !isEditable || isFilter ? right : (rP)=>{
-            const r = typeof right =='function'? right(rP) : right;
-            return <>
-                <Pressable style={{width:80}}
-                    onPress = {(e)=>{
-                        React.stopEventPropagation(e);
-                    }}
-                >
-                    <TextField
-                        {...rP}
-                        affix = {false}
-                        editable = {isEditable}
-                        disabled = {disabled}
-                        readOnly = {readOnly}
-                        enableCopy = {false}
-                        contentContainerProps = {{
-                            style:{height:37,paddingVertical:0,paddingHorizontal:0},
-                        }}
-                        mode = {'flat'}
-                        left = {(p)=>{
-                            return <Icon
-                                {...rP}
-                                {...p}
-                                size = {iconSize}
-                                style = {[styles.ml0,styles.mr0,{width:iconSize,height:iconSize}]}
-                                icon = "alpha-f-box"
-                                title="Format d'affichage des valeurs numériques : de la forme %v%s ou %v représente la valeur du montant et %s représente la devise : exemple %s%v => $10 et %s %v => 10 $"
-                            />
-                        }}
-                        defaultValue = {currencyFormatRef.current}
-                        containerProps = {{
-                            width:70,
-                        }}
-                        onChange = {(args)=>{
-                            currencyFormatRef.current = args.value;
-                            if(typeof onFormatChange =="function"){
-                                onFormatChange(args)
-                            }
-                        }}
-                    />  
-                </Pressable>
-                {React.isValidElement(r) && r || null}
-            </>
-        },
         type : 'select',
     }
 }
 
 CurrencySelector.propTypes = {
     ...SimpleSelect.propTypes,
-    onFormatChange : PropTypes.func,//lorsque le format de la currency change
 }

package/src/layouts/DatabaseStatistics/DatabaseStatistic.js

@@ -16,7 +16,7 @@ import {Menu} from "$ecomponents/BottomSheet";
 import Dashboard from "$ecomponents/Datagrid/Dashboard";
 import fetch from "$capi/fetch";
 import Auth from "$auth";
-import Footer from "$ecomponents/Datagrid/Footer/Footer";
+import Icon from "$ecomponents/Icon";
 
 export default function DatabaseStatisticContainer ({dashboardProps,fetchDataProps,table,fetchCount,index,testID,title,icon,onPress:customOnPress,columns,fetchData,withDashboard,...props}){
     dashboardProps = defaultObj(dashboardProps);
@@ -27,7 +27,7 @@ export default function DatabaseStatisticContainer ({dashboardProps,fetchDataPro
     table = defaultObj(table);
     const dbStatistics = defaultObj(table.databaseStatistics,table.databaseStatisticsProps);
     const databaseStatisticsFields = defaultObj(table.databaseStatisticsFields);
-    const hasDFields = Object.size(databaseStatisticsFields,true);
+    const hasDFields = table.databaseStatistics !== false && Object.size(databaseStatisticsFields,true);
     if(!withDashboard && hasDFields){
         withDashboard = true;
     }
@@ -39,7 +39,9 @@ export default function DatabaseStatisticContainer ({dashboardProps,fetchDataPro
     columns = Object.size(columns,true)? columns : Object.size(dFields,true)? dFields : table.fields;
     const tableName = defaultStr(table.tableName,table.table).toUpperCase();
     fetchCount = typeof table.fetchCount =='function'? table.fetchCount : typeof fetchCount =='function'? fetchCount : undefined;
-    if((!fetchCount && !withDashboard) || !tableName) return null;
+    if((!fetchCount && !withDashboard) || !tableName) {
+        return null
+    }
     const refreshingRef = React.useRef(null);
     const isMounted = React.useIsMounted();
     
@@ -76,7 +78,7 @@ export default function DatabaseStatisticContainer ({dashboardProps,fetchDataPro
             }
         }
     },[]);
-    const progressBar = <View style={[theme.styles.justifyContentFlexStart,theme.styles.alignItemsFlexStart]}>
+    const progressBar = <View style={[theme.styles.justifyContentFlexStart,theme.styles.p1,theme.styles.alignItemsFlexStart]}>
         <ActivityIndicator color={theme.colors.primary}/>
     </View>;
     const isDatagridLoading = datagridRef.current && datagridRef.current.isLoading && datagridRef.current.isLoading();
@@ -90,7 +92,7 @@ export default function DatabaseStatisticContainer ({dashboardProps,fetchDataPro
     const fetchFields = React.useCallback(()=>{
         const fetchFields = [];
         Object.map(columns,(field,f)=>{
-            const ff = defaultStr(isObj(field)? field.field: undefined,f);
+            const ff = defaultStr(isObj(field) && field.filter !== false? field.field: undefined,f);
             if(ff){
                 fetchFields.push(ff);
             }
@@ -112,7 +114,7 @@ export default function DatabaseStatisticContainer ({dashboardProps,fetchDataPro
         sessionName = {tableName+"-database-statistics"}
         {...props}
         {...dbStatistics}
-        style = {[theme.styles.ph1,props.style]}
+        style = {[theme.styles.pr1,props.style]}
         columns = {columns}
         ref = {datagridRef}
         progressBar = {isLoading?<View/>:<View style={[theme.styles.w100,theme.styles.alignItemsCenter,theme.styles.justifyContentCenter]}>{progressBar}</View>}
@@ -138,6 +140,7 @@ export default function DatabaseStatisticContainer ({dashboardProps,fetchDataPro
             return <Pressable onPress={onPress} testID={testID+"_TitleContainer"} style={[theme.styles.w100]}>
                 <View testID={testID+"_TitleCountUp"} style={[theme.styles.w100]}>
                     <View style={[theme.styles.w100,theme.styles.row,theme.styles.alignItemsCenter]}>
+                        <Icon style={[theme.styles.noPadding,theme.styles.noMargin]} suffix={index} icon= {icon} size={20} label={title}/>
                         {title}
                         {typeof dataSize =='number' && dataSize && <Label>
                             {dataSize.formatNumber()}
@@ -146,7 +149,7 @@ export default function DatabaseStatisticContainer ({dashboardProps,fetchDataPro
                     <Menu
                         testID={testID+"_Menu"}
                         items = {context.renderMenu()}
-                        anchor = {(p)=><Pressable {...p} testID={testID+"_MenuAnchor"}>
+                        anchor = {(p)=><Pressable {...p} style={[theme.styles.pl1]} testID={testID+"_MenuAnchor"}>
                             <Label
                                 textCenter
                                 style = {counUpStyle}

package/src/layouts/DatabaseStatistics/index.js

@@ -20,31 +20,31 @@ export default function DatabaseStatisticScreen ({withScreen,fetchDataProps,tabl
         let content = [];
         tableFilter = typeof tableFilter ==="function"? tableFilter : x=>true;
         Object.map(tables,(table,index,suffix)=>{
-            const t = typeof getTable =='function'?getTable(defaultStr(table?.tableName,table?.table,index)) : null;
+            if(!isObj(table)) return null;
+            let tableName = defaultStr(table.tableName,table.table);
+            if(!tableName || tableFilter({table,tableName}) === false) return null;
+            const t = typeof getTable =='function'?getTable(defaultStr(table?.tableName,table?.table,index),table) :null;
             if(isObj(t) && defaultStr(t.table,t.tableName)){
-                table = t;
-            }
-            if(isObj(table) && table.databaseStatistic !== false && table.databaseStatistics !== false && tableFilter(table) !== false){
-                content.push(
-                    <Cell elevation = {5} withSurface mobileSize={12} desktopSize={3} tabletSize={4} {...contentProps} key = {index} >
-                        <DatabaseStatistic
-                            icon = {table.icon}
-                            key = {index}
-                            table = {table}
-                            fetchData = {fetchData}
-                            fetchDataProps = {fetchDataProps}
-                            index = {suffix}
-                            title = {defaultStr(table.text,table.label,table.title)}
-                            fetchCount = {table.fetchCount|| typeof fetchCount =='function'? (a,b)=>{
-                                return fetchCount({table,tableName:defaultStr(table.tableName,table.table)})
-                            }:undefined}
-                        ></DatabaseStatistic>
-                    </Cell>
-                )
+               table = t;
             }
+            if(table.databaseStatistic === false || table.databaseStatistics === false) return null;
+            content.push(<Cell elevation = {5} withSurface mobileSize={12} desktopSize={3} tabletSize={4} {...contentProps} key = {index} >
+                <DatabaseStatistic
+                    icon = {table.icon}
+                    key = {index}
+                    table = {table}
+                    fetchData = {fetchData}
+                    fetchDataProps = {fetchDataProps}
+                    index = {suffix}
+                    title = {defaultStr(table.text,table.label,table.title)}
+                    fetchCount = {table.fetchCount|| typeof fetchCount =='function'? (a,b)=>{
+                        return fetchCount({table,tableName})
+                    }:undefined}
+                ></DatabaseStatistic>
+            </Cell>
+            )
         });
         if(!content.length) {
-            Auth.showError();
             return null;
         }
         content = <Component  {...containerProps} style={[containerProps.style,theme.styles.mr1,theme.styles.ml1]}>