@fto-consult/expo-ui 2.32.0 → 2.33.0

package/appConfig.txt

@@ -15,5 +15,5 @@
     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.32.0",
+  "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.25",
+    "@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

@@ -292,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;
         }
@@ -1267,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(){
@@ -1404,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.getChartConfig(),
+                data,
                 fields : {
                     x : {
                         text : 'Axe des x[horizontal]',
@@ -1445,6 +1446,42 @@ export default class CommonDatagridComponent extends AppComponent {
                         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',
@@ -1600,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(){
@@ -1614,6 +1651,7 @@ export default class CommonDatagridComponent extends AppComponent {
             if(!isObj(footer)) continue;
             if(counter >= max) break;
             r.push(i);
+            counter ++;
       }
       return r;
    }
@@ -1646,7 +1684,6 @@ export default class CommonDatagridComponent extends AppComponent {
         ///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 : [];
@@ -1671,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 {
@@ -1713,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){
         
@@ -1748,7 +1794,7 @@ 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;
@@ -1854,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; 
@@ -1868,7 +1918,7 @@ 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;
@@ -1879,7 +1929,7 @@ export default class CommonDatagridComponent extends AppComponent {
             for(let i in series){
                 const v = series[i];
                 if(!isObj(v) || !isNonNullString(v.name) || !this.chartSeriesNamesColumnsMapping[v.name]) break;
-                if(yLabelFormat && typeof this.chartSeriesNamesColumnsMapping[v.name]?.format !=yLabelFormat) {
+                if(yLabelFormat && this.chartSeriesNamesColumnsMapping[v.name]?.format !=yLabelFormat) {
                     yLabelFormat = null;
                     break;
                 }
@@ -1908,17 +1958,17 @@ 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;
         }
@@ -2018,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;
@@ -2121,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,
@@ -2221,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){
@@ -2426,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;
@@ -2610,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
@@ -3447,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/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/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]}>