@fto-consult/expo-ui 2.29.3 → 2.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.29.3",
+  "version": "2.30.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.9",
+    "@fto-consult/common": "^1.25.10",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.5.2",

package/src/components/BackToTop/index.js

@@ -2,6 +2,7 @@ import Fab from "$ecomponents/Fab";
 import {isObj,defaultStr,defaultVal,defaultObj} from "$utils";
 import React from "$react";
 import PropTypes from "prop-types";
+import theme from "$theme";
 
 const SCREEN_INDENT = 20;
 export const isNativeScrollEvent = (nativeEvent)=>!isObj(nativeEvent) || !isObj(nativeEvent.layoutMeasurement) || !isObj(nativeEvent.contentOffset) ? false : true;
@@ -49,7 +50,7 @@ const BackToTopComponent = React.forwardRef((props,ref)=>{
         }
     },[visible])
     const style = defaultStr(position).toLowerCase() =='right' ? {
-        right: 0
+        right: 0,
     }  : {left : 0};
     React.setRef(ref,context);
     React.useEffect(()=>{
@@ -67,7 +68,7 @@ const BackToTopComponent = React.forwardRef((props,ref)=>{
             }
         }}
         icon = {defaultVal(icon,'arrow-up')}
-        style = {[rest.style,style]}
+        style = {[theme.styles.ph1,rest.style,style]}
     />
 });
 

package/src/components/BottomSheet/Menu.js

@@ -72,12 +72,7 @@ const BottomSheetMenuComponent = React.forwardRef((props,ref)=>{
             open();
             return false;
         }
-        if(typeof children ==='function'){
-            if(!visible) children = null;
-            else {
-                children = children({open,close});
-            }
-        }
+        
     }
     React.useEffect(()=>{
         const closeModal = ()=>{
@@ -92,7 +87,12 @@ const BottomSheetMenuComponent = React.forwardRef((props,ref)=>{
             APP.off(APP.EVENTS.RESIZE_PAGE,closeModal);
         }
     },[]);
-    
+    if(typeof children ==='function'){
+        if(!visible) children = null;
+        else {
+            children = children({open,close});
+        }
+    }
     return <>
         {isMob && React.isValidElement(anchor)? anchor : null}
         <Component

package/src/components/CountUp/index.js

@@ -18,7 +18,14 @@ const CountUpComponent = ({from,to,format,type,duration,step,formatter,interval,
     const isNegative = end < 0 ? true : false;
     const intervalRef = React.useRef(null);
     const increment = (isNegative ? (-1):(1))* Math.abs(defaultNumber(step,getDefaultStep(to)));
-    const [current, setCurrent] = React.useState(from);
+    const [current, _setCurrent] = React.useState(from);
+    const setCurrent = (current)=>{
+        if(typeof current !=='number') return;
+        if(current > end){
+            current = end;
+        } 
+        _setCurrent(current);
+    }
     const isMounted = React.useIsMounted();
     const formatValue = typeof formatter =="function"? formatter : (number)=>{
         return isCurrency ? number.formatMoney() : number.formatNumber();

package/src/components/Datagrid/Accordion/FilterContent.js

@@ -0,0 +1,24 @@
+// 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 Filter from "$ecomponents/Filter";
+
+export default function FilterAccordionComponent({onChange,...props}){
+    const valuesRefs = React.useRef({});
+    console.log("rendering ",valuesRefs);
+    return  <Filter
+        {...props}
+        {...valuesRefs.current}
+        onChange = {(args)=>{
+            ["action","operator","defaultValue","ignoreCase","manualRun"].map((k)=>{
+                valuesRefs.current[k] = args[k];
+            })
+            console.log(valuesRefs," is changeddd");
+            if(onChange){
+                onChange(args);
+            }
+        }}
+    />
+}

package/src/components/Datagrid/Accordion/Filters.js

@@ -2,7 +2,7 @@ import {Content} from "$ecomponents/BottomSheet";
 import Icon from "$ecomponents/Icon";
 import React from "$react";
 import {defaultStr,defaultBool,defaultObj} from "$utils";
-import Filter,{canHandleFilter,getFilterStateValues} from "$ecomponents/Filter";
+import Filter, {canHandleFilter,getFilterStateValues} from "$ecomponents/Filter";
 import PropTypes from "prop-types";
 import { StyleSheet,View } from "react-native";
 import Menu from "$ecomponents/Menu";
@@ -11,17 +11,20 @@ import theme from "$theme"
 import Expandable from "$ecomponents/Expandable";
 import { Dimensions } from "react-native";
 import Grid from "$components/Grid";
+import { Pressable } from "react-native";
+import Tooltip from "$ecomponents/Tooltip";
 
 const MIN_WIDTH = 250;
 let windowWidth = Dimensions.get("window").width;
 
 const FiltersAccordionComponent = React.forwardRef((props,ref)=>{
-    const {filters,isLoading,filteredColumns,children,filterTitle:customFilterTitle,visible:customVisible,orOperator,andOperator,onToggleFilters,context:customContext,...restProps} = props;
+    const {filters,isLoading,filteredColumns,children,label,filterTitle:customFilterTitle,visible:customVisible,orOperator,andOperator,onToggleFilters,context:customContext,...restProps} = props;
     const context = defaultObj(customContext);
     const [state,setState] = React.useState({
         visible : defaultBool(customVisible,false),
         visibleColumns : defaultObj(filteredColumns),
     });
+    const valuesRefs = React.useRef({});
     windowWidth = Dimensions.get("window").width;
     const innerRef = React.useRef(null);
     const {visible,visibleColumns} = state;
@@ -35,10 +38,11 @@ const FiltersAccordionComponent = React.forwardRef((props,ref)=>{
         phoneSize : 12, 
         style : [theme.styles.ph1],
     }
-    const prepareContent = (filters)=>{
+    const prepareContent = (filters,renderMenusOnly)=>{
         const content = []
         const colMenus = [];
         let mainFilterTitle = defaultStr(filterTitle);
+        let counter = 0;
         const containerProps = {
             style : [styles.filter,{minWidth : Math.min(windowWidth,MIN_WIDTH)}]
         };
@@ -60,28 +64,26 @@ const FiltersAccordionComponent = React.forwardRef((props,ref)=>{
                         setState({...state,visibleColumns:{...visibleColumns,[key]:!visible}})
                     }}
                 />)
-                if(!visible) return;
-                let defVal = filter.defaultValue;
-                if(typeof defVal !== 'string' && typeof defVal !=='boolean'){
-                    if(Array.isArray(defVal)){
-                        defVal = "["+defVal.join(",")+"]";
-                    } else {
-                        if(defVal && defVal.toString){
-                            defVal = defVal.toString();
-                        } else defVal = "";
-                    }
+                if(!visible) {
+                    return null;
                 }
-                mainFilterTitle +=(content.length?",":"")+"\n"+defaultStr(filter.label,filter.text,filter.field)+" : "+defVal+""
+                mainFilterTitle +=(counter?",":" :\n")+defaultStr(filter.label,filter.text,filter.field)//+" : "+defVal+""
+                counter++;
+                if(renderMenusOnly) return null;
                 content.push(
                     <Grid.Cell {...cellProps} key={key}>
                     <Filter
                         {...filter}
+                        {...(isObj(valuesRefs.current[key]) ? valuesRefs.current[key] : {})}
                         dynamicRendered
                         isLoading = {isLoading && filteredRef.current[key] ? true : false}
                         orOperator = {defaultBool(orOperator,filter.orOperator,true)}
                         andOperator = {defaultBool(andOperator,filter.andOperator,true)}
                         onChange = {(arg)=>{
+                            if(!arg.action && !arg.operator || !arg.field) return;
+                            //console.log("calling on change dddd",arg);
                             const canHandle = canHandleFilter(arg);
+                            valuesRefs.current[key] = arg;
                             if(filteredRef.current[key] !== canHandle){
                                 if(canHandle){
                                     canHandlerFilterRef.current++;
@@ -101,12 +103,12 @@ const FiltersAccordionComponent = React.forwardRef((props,ref)=>{
             }
         })
         return {content,mainFilterTitle,colMenus}
-    }/*,[filters])*/
+    }
     if(typeof children ==='function'){
-        const ct = children({content,menus:colMenus});
+        const ct = children({});
         return React.isValidElement(ct)? ct : null;
     }
-    const {content,mainFilterTitle,colMenus} = prepareContent(filters);
+    const {mainFilterTitle} = prepareContent(filters,true);
     const hasFilters = canHandlerFilterRef.current > 0 ? true : false;
     return <Content
         animateOnClose
@@ -116,35 +118,40 @@ const FiltersAccordionComponent = React.forwardRef((props,ref)=>{
         onDissmiss = {()=>{
             setState({...state,visible:false})
         }}
-        anchor = {(props)=><Icon 
-            name={hasFilters?"filter-menu":"filter-plus"} 
-            color = {hasFilters?theme.colors.primaryOnSurface:undefined}
-            {...props}
-            title = {mainFilterTitle}
-        />}
+        anchor = {(props)=><Tooltip title = {mainFilterTitle}Component={Pressable} {...props} style={[theme.styles.row]}>
+             <Icon 
+                name={hasFilters?"filter-menu":"filter-plus"} 
+                {...props}
+                color = {hasFilters?theme.colors.primaryOnSurface:undefined}
+            />
+            {React.isValidElement(label,true)?<Label  style={[hasFilters && {color:theme.colors.primaryOnSurface}]} fontSize={16} textBold>{label}</Label>:null}
+        </Tooltip>}
         ref = {(el)=>{
             innerRef.current = el;
             React.setRef(ref,el);
         }}
     >
-        <View style={[styles.wrapper]}>
-            <View style = {[styles.menuWrapper]}>
-                <Expandable
-                    left = {(props)=><Icon {...props} icon={content.length?'filter-plus':'filter-menu'}/>}
-                    style = {styles.expandable}
-                    title = {<Label>{filterTitle}</Label>}
-                >
-                    <View style={[styles.menuContent]}>
-                        {colMenus}
-                    </View>
-                </Expandable>
+         {({open,close})=>{
+            const {content,colMenus} = prepareContent(filters);
+            return <View style={[styles.wrapper]}>
+                <View style = {[styles.menuWrapper]}>
+                    <Expandable
+                        left = {(props)=><Icon {...props} icon={content.length?'filter-plus':'filter-menu'}/>}
+                        style = {styles.expandable}
+                        title = {<Label>{filterTitle}</Label>}
+                    >
+                        <View style={[styles.menuContent]}>
+                            {colMenus}
+                        </View>
+                    </Expandable>
+                </View>
+                {content.length ? <View style={[theme.styles.w100]}>
+                    <Grid style={theme.styles.w100}>
+                        {content}
+                    </Grid>
+                </View> : null}
             </View>
-            {content.length ? <View style={[theme.styles.w100]}>
-                <Grid style={theme.styles.w100}>
-                    {content}
-                </Grid>
-            </View> : null}
-        </View>
+         }}
     </Content>
 })
 

package/src/components/Datagrid/Accordion/index.js

@@ -303,6 +303,9 @@ const DatagridFactory = (Factory)=>{
             }
             return super.renderEmpty();
         }
+        getTestID(){
+            return defaultStr(this.props.testID,"RN_DatagridAccordion");
+        }
         render (){
             let {
                 filters:customFilters,
@@ -333,7 +336,7 @@ const DatagridFactory = (Factory)=>{
             chartContainerProps = defaultObj(chartContainerProps);
             const canRenderChart = this.canRenderChart();
             const hasData = this.getStateDataSize(false) ? true : false;
-            testID = defaultStr(testID,"RN_DatagridAccordion");
+            testID = this.getTestID();
             backToTopProps = defaultObj(backToTopProps);
             accordionProps = defaultObj(accordionProps);
             this.renderingItemsProps = {};

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

@@ -138,6 +138,14 @@ export const displayTypes = {
     },*/
 }
 
+export const chartTypes = {};
+
+Object.map(displayTypes,(c,k)=>{
+    if(c && c.isChart){
+        chartTypes[k] = c;
+    }
+})
+
 export const arrayValueSeparator = ", ";
 
 const dataSourceArgs = {};
@@ -233,6 +241,7 @@ export default class CommonDatagridComponent extends AppComponent {
             aggregatorFunctions : {value : extendAggreagatorFunctions(this.props.aggregatorFunctions)},
             ///les types d'affichage
             displayTypes : {value : hasFoundDisplayTypes ? disTypes : Object.clone(displayTypes)},
+            dateFields : {value : {}},
             sectionListColumnsSize : {value : {current:0}}, //la taille du nombre d'éléments de section dans les colonnes
         }) 
         const sessionAggregator = defaultStr(this.getSessionData("aggregatorFunction")).trim();
@@ -262,16 +271,16 @@ export default class CommonDatagridComponent extends AppComponent {
         this.filters =  {}
         Object.map(this.getFiltersProps(),(f,v)=>{
             if(isPlainObject(f)){
-                this.filters[v] = f;
+                this.filters[v] = {...f};
                 this.filters[v].field = defaultStr(f.field,v);
-                this.filters[v].originValue = defaultVal(this.filters[v].originValue,f.defaultValue,f.value)
+                this.filters[v].originValue = defaultVal(f.originValue,f.defaultValue,f.value)
             } else {
                 this.filters[v] = {
                     originValue : f,
                     field : v
                 }
             }
-        })
+        });
         this.state.filteredColumns = defaultObj(this.getSessionData("filteredColumns"+this.getSessionNameKey()),this.props.filters);
         this.filtersSelectors = {selector:this.getFilters()};
         const {sectionListColumns} = this.prepareColumns();
@@ -280,6 +289,9 @@ export default class CommonDatagridComponent extends AppComponent {
             this.state.columnsWidths = this.preparedColumns.widths;
         }
         this.state.chartConfig = extendObj({},this.getSessionData("chartConfig"),this.props.chartConfig);
+        if(!("sparkline" in this.state.chartConfig) && this.isDashboard()){
+            this.state.chartConfig.sparkline = true;
+        }
         const dType = defaultStr(this.props.displayType,this.getSessionData("displayType"),"table");
         this.state.displayType = this.displayTypes[dType] ? this.displayTypes[dType].code : "table" in this.displayTypes ? "table" : Object.keys(this.displayTypes)[0]?.code;
         this.state.displayOnlySectionListHeaders = defaultBool(this.getSessionData("displayOnlySectionListHeaders"),this.props.displayOnlySectionListHeaders,false)
@@ -330,6 +342,7 @@ export default class CommonDatagridComponent extends AppComponent {
         } else {
             this.currentDataSources = Object.toArray(this.currentDataSources);
         }
+        this.persistDisplayType(this.state.displayType);
     }
 
     /*** si une ligne peut être selectionable */
@@ -648,6 +661,14 @@ export default class CommonDatagridComponent extends AppComponent {
     isIndexColumn(columnDef,columnField){
         return isObj(columnDef) && defaultStr(columnDef.field,columnField) === this.getIndexColumnName();
     }
+    isDateField(column){
+        const field = isObj(column)? defaultStr(column.field,column.name) : defaultStr(column);
+        return field && field in this.dateFields ? true : false;
+    }
+    isFooterField(column){
+        const field = isObj(column)? defaultStr(column.field,column.name) : defaultStr(column);
+        return field && isObj(this.state.footers) &&  field in this.state.footers ? true : false;
+    }
     initColumnsCallback(){}
     initColumns (columns){
         this.state.columns = {};
@@ -689,6 +710,9 @@ export default class CommonDatagridComponent extends AppComponent {
             let header = {...headerCol};
             header.field = defaultStr(header.field, headerIndex)
             header.type = defaultStr(header.jsType,header.type,"text").toLowerCase();
+            if(header.type.contains("date")){
+                this.dateFields[header.field] = header;
+            }
             /**** pour ignorer une colonne du datagrid, il suffit de passer le paramètre datagrid à false */
             if(!isNonNullString(header.field) || header.datagrid === false) {
                 return;
@@ -714,6 +738,9 @@ export default class CommonDatagridComponent extends AppComponent {
     hasFootersFields(){
         return Object.size(this.getFootersFields(),true) ? true : false;
     }
+    getFooters(){
+        return this.getFootersFields();
+    }
     getActionsArgs(selected){
         const r = isObj(selected)? selected : {};
         const ret = {
@@ -1333,9 +1360,12 @@ export default class CommonDatagridComponent extends AppComponent {
         if(!m.length) return null;
         return <Menu
             items = {m}
-            anchor = {(p)=><Icon name="material-functions" {...p}
-                title = "Fonctions d'aggrégations. Veuillez sélectionner la fonction à utiliser par défaut pour la totalisation des données des colonnes de type nombre"
-            />}
+            anchor = {(props)=>{
+                return <Pressable {...props} style={[theme.styles.row]}>
+                    <Icon {...props} name="material-functions" title = "Fonctions d'aggrégations. Veuillez sélectionner la fonction à utiliser par défaut pour la totalisation des données des colonnes de type nombre"></Icon>
+                    {this.isDashboard() && <Label splitText numberOfLines={1} textBold>Fonction d'aggrégation</Label>||null}
+                 </Pressable>
+            }}
         />
    }
    configureChart(refreshChart){
@@ -1404,6 +1434,14 @@ export default class CommonDatagridComponent extends AppComponent {
                         multiple : true,
                     },
                     stacked : stackSettings,
+                    sparkline : {
+                        type : 'switch',
+                        text : "Sparkline",
+                        checkedTooltip : "Le graphe a été définit pour être affiché dans un environnement petite surface",
+                        checkedValue : true,
+                        uncheckedValue : false,
+                        settingKey : "chart",
+                    },
                     title : {
                         text : "Titre du graphe",
                         format :'hashtag',
@@ -1443,6 +1481,9 @@ export default class CommonDatagridComponent extends AppComponent {
             displayOnlySectionListHeaders : this.canDisplayOnlySectionListHeaders(),
         };
    }
+   isDashboard(){
+     return false;
+   }
    renderDisplayTypes(){
         const m = [];
         let activeType = null,hasFoundChart = false,hasFoundTable = false;
@@ -1501,11 +1542,14 @@ export default class CommonDatagridComponent extends AppComponent {
             title = "Type d'affichage"
             items = {m}
             anchor = {(p)=>{
-                return <Icon
-                    {...p}
-                    name = {activeType.icon}
-                    title = {"Les données s'affichent actuellement en {0}. Cliquez pour modifier le type d'affichage".sprintf(activeType.label)}
-                />
+                return <Pressable {...p} style={[theme.styles.row]}>
+                    <Icon
+                        {...p}
+                        name = {activeType.icon}
+                        title = {"Les données s'affichent actuellement en {0}. Cliquez pour modifier le type d'affichage".sprintf(activeType.label)}
+                    />
+                    {this.isDashboard() && <Label textBold>Type d'affichage</Label>||null}
+                </Pressable>
             }}
         />
    }
@@ -1720,7 +1764,6 @@ export default class CommonDatagridComponent extends AppComponent {
             chartProps[settingKey] = defaultObj(chartProps[settingKey]);
             chartProps[settingKey][key] = config[key];
         });
-        
         const chartOptions = {
             ...chartProps,
             title :extendObj(true,{}, {
@@ -1738,7 +1781,7 @@ export default class CommonDatagridComponent extends AppComponent {
                 },
             },chartProps.title),
             series,
-            chart : extendObj(true,{},{height :350},chartProps.chart,{
+            chart : extendObj(true,{},{height :this.isDashboard()?80:350},chartProps.chart,{
                 type : chartType.type,
             })
         }
@@ -1765,9 +1808,26 @@ export default class CommonDatagridComponent extends AppComponent {
         if(!chartType.isDonut){
             delete chartOptions.labels;
         }
+        if(this.isDashboard() && typeof chartOptions.chart.sparkline !=='boolean'){
+            chartOptions.chart.sparkline = true;
+        }
+        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;
+
+            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;
+        }
         return <Chart
             options = {chartOptions}
-            key = {chartOptions.chart.id}
+            key = {chartOptions.chart.id+"-"+this.state.displayType}
         />
    }
    canShowFooters(){
@@ -1819,7 +1879,10 @@ export default class CommonDatagridComponent extends AppComponent {
             title = {"Grouper les données du tableau"}
             testID = {"RN_DatagridSectionListMenu"}
             anchor = {(props)=>{
-                return <Icon {...props} name='format-list-group' title={"Grouper les éléments du tableau"}></Icon>
+                return <Pressable {...props} style={[theme.styles.row]}>
+                    <Icon {...props} color={hasList?theme.colors.primaryOnSurface:undefined} name='format-list-group' title={"Grouper les éléments du tableau"}></Icon>
+                    {this.isDashboard() && <Label style={[hasList && {color:theme.colors.primaryOnSurface}]} textBold>Grouper par</Label>||null}
+                 </Pressable>
             }}
             items = {[
                 {
@@ -1829,7 +1892,7 @@ export default class CommonDatagridComponent extends AppComponent {
                     divider : true,
                     style : theme.styles.bold,
                 },
-                this.canDisplayOnlySectionListHeaders() && {
+                this.canDisplayOnlySectionListHeaders() && this.state.displayType =='table' && {
                     text : "Afficher uniquement totaux",
                     icon : this.state.displayOnlySectionListHeaders?"check":null,
                     onPress : this.toggleDisplayOnlySectionListHeaders.bind(this)
@@ -2190,6 +2253,10 @@ export default class CommonDatagridComponent extends AppComponent {
                     this.sectionListData[k] = sectionListData[k];
                     return k;
                 });
+            } else {
+                Object.map(sectionListData,(v,k)=>{
+                    this.sectionListData[k] = v;
+                })
             }
             data = newData;
         } 
@@ -2829,6 +2896,23 @@ export default class CommonDatagridComponent extends AppComponent {
     /**** permet d'afficher le menu item lié aux champs triables */
     getSortableMenuMenuItem(){
 
+    }
+    getTestID(){
+        return defaultStr(this.props.testID,'RN_DatagridComponent');
+    }
+    renderTitle (){
+        const testID = this.getTestID();
+        const title = typeof this.props.title =="function"? this.props.title({context:this}) : this.props.title;
+        const titleProps = defaultObj(this.props.titleProps);
+        return React.isValidElement(title) ? <Label testID={testID+"_Title"} {...titleProps} style={[theme.styles.w100,titleProps.style]}>
+            {title}
+        </Label> : null
+    }
+    getInitialData (){
+        return this.INITIAL_STATE.data;
+    }
+    getData(){
+        return this.state.data;
     }
     renderSelectableCheckboxCell(props){
         const {containerProps} = props;
@@ -3071,6 +3155,12 @@ const chartDisplayType = PropTypes.oneOf(Object.keys(displayTypes).filter(type=>
     return typeof x =='object' && x && typeof x.disabled !== true && x.isChart === true && true || false;
 }));
 CommonDatagridComponent.propTypes = {
+    title : PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.string,
+        PropTypes.node,
+        PropTypes.element,
+    ]),
     canMakePhoneCall : PropTypes.bool,//si l'on peut faire un appel sur la données sélectionnées
     makePhoneCallProps : PropTypes.oneOfType([
         PropTypes.object,

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

@@ -96,6 +96,7 @@ export default class CommonTableDatagrid extends CommonDatagrid{
                 fetchOptions.selector = defaultObj(fetchOptions.selector);
                 fetchOptions.dataSources = this.currentDataSources;
                 fetchOptions = extendObj(true,true,{},fetchOptions,{selector : fetchFilters});
+                console.log(fetchOptions," is fetchOptions ",this.getFiltersProps(),fetchFilters)
                 fetchOptions.dataSources = this.currentDataSources;
                 fetchOptions.sort = this.getSort();
                 let limit = this.getQueryLimit();

package/src/components/Datagrid/Dashboard/index.js

@@ -0,0 +1,143 @@
+import {TableData} from "../Common";
+import {defaultObj,defaultArray,defaultStr,defaultDecimal,isNonNullString} from "$utils";
+import View from "$ecomponents/View";
+import { StyleSheet,Dimensions,Pressable } from "react-native";
+import Icon,{MENU_ICON} from "$ecomponents/Icon";
+import React from "$react";
+import {Menu as BottomSheetMenu} from "$ecomponents/BottomSheet";
+import { chartTypes } from "../Common/Common";
+import theme from "$theme";
+import FiltersAccordionComponent from "../Accordion/Filters";
+
+export default class DatagridDashboard extends TableData {
+    constructor(props){
+        super(props);
+        Object.map(this.displayTypes,(t,i)=>{
+            if(!t || !t.isChart) delete this.displayTypes[i];
+        });
+        if(!this.state.displayType.toLowerCase().contains("chart")){
+            this.state.displayType = chartTypes[Object.keys(chartTypes)[0]].code
+        }
+        this.persistDisplayType(this.state.displayType);
+     }
+    isDatagrid(){
+        return true;
+    }
+    canPaginateData(){
+        return false;
+    }
+    bindResizeEvents(){
+        return false;
+    }
+    isDashboard(){
+        return true;
+    }
+    renderMenu(){
+        const testID = this.getTestID();
+        const {filterOrOperator,filterAndOperator,} = this.props;
+        const {
+            visibleColumnsNames,
+            filteredColumns,
+            filters :headerFilters,
+        } = this.preparedColumns;
+        const menus = [
+            {
+                text : 'Rafraichir',
+                icon : "refresh",
+                onPress : this.refresh.bind(this)
+            },
+            this.isFilterable() ?<FiltersAccordionComponent
+                testID={testID+"_HeaderFilters"}
+                isLoading = {this.isLoading()}
+                filters = {headerFilters}
+                visibleColumns = {visibleColumnsNames}
+                filteredColumns = {filteredColumns}
+                orOperator = {filterOrOperator}
+                andOperator = {filterAndOperator}
+                context = {this}
+                label = {"Filtres"}
+            /> : null,
+            ...this.renderCustomMenu(),
+            this.renderDisplayTypes(),
+            this.renderSectionListMenu(),
+            this.renderAggregatorFunctionsMenu(),
+        ]
+        return menus;
+    }
+    getTestID(){
+        return defaultStr(this.props.testID,"RN_DatagridDashboard");
+    }
+    canHandleQueryLimit(){
+        return false;
+    }
+    render(){
+        let {
+            title,
+            testID,actions,
+            selectableMultiple,
+            sortable,
+            titleProps,
+            autoSort,
+            exportable,
+            selectable,pagin,showPagination,
+            sessionName,onMount,onUnmount,onFetchData,dataSourceSelector,dataSourceSelectorProps,queryLimit,
+            filters,
+            filterOrOperator,
+            filterAndOperator,
+            chartContainerProps,
+            accordion, //pour le rendu du header en accordion
+            ...rest
+        } = this.props;
+        const canRenderChart = this.canRenderChart();
+        if(!canRenderChart) return null;
+        chartContainerProps = defaultObj(chartContainerProps);
+        titleProps = Object.assign({},titleProps);
+        testID = this.getTestID();
+        rest = defaultObj(rest);
+        const _progressBar = this.getProgressBar();
+        const pointerEvents = this.getPointerEvents();
+        const maxHeight = 300;
+        return <View {...rest} testID={testID} style={[styles.container,{maxHeight},rest.style]} pointerEvents={pointerEvents}>
+            {this.renderTitle()}
+            {showPagination ? <View style={[styles.paginationContainer]}>
+                <BottomSheetMenu
+                    anchor = {(props)=>{
+                        return <Icon {...props} title={isMobile?"Actions":"Colonnes"} name={isMobile?MENU_ICON:'view-column'}></Icon>
+                    }}
+                    closeOnPress = {isMobile?undefined:false}
+                    items = {this.renderMenu()}
+                />
+            </View> : null}
+            {<View testID={testID+"_ChartContainer"} {...chartContainerProps} style={[theme.styles.w100,chartContainerProps.style]}>
+                {_progressBar}
+                {this.renderChart()}
+            </View>}
+        </View>
+    }
+}
+
+DatagridDashboard.displayName = "DatagridDashboardComponent";
+
+DatagridDashboard.propTypes = {
+    ...defaultObj(TableData.propTypes),
+}
+
+
+const styles = StyleSheet.create({
+    paginationContainer : {
+        flexDirection : 'row',
+        width : '100%'
+    },
+    paginationContent : {
+        flex : 1,
+        flexDirection : 'row',
+        width : '100%',
+        justifyContent : 'flex-end',
+        alignItems : 'center',
+        paddingHorizontal : 10,
+    },
+    container : {
+        width : '100%',
+        flex:1,
+    },
+})

package/src/components/Datagrid/Footer/Footer.js

@@ -83,13 +83,13 @@ const formatValue = ({value,format,aggregatorFunction})=>{
     return (format === 'money' && aggregatorFunction != 'count')? value.formatMoney():value.formatNumber();
 }
 export default function DGGridFooterValue (props){
-    let {label,text,displayLabel,style,aggregatorFunctions,aggregatorFunction,format,testID,anchorProps} = props;
+    let {label,text,displayLabel,withLabel,style,aggregatorFunctions,aggregatorFunction,format,testID,anchorProps} = props;
     aggregatorFunctions = defaultObj(aggregatorFunctions);
     anchorProps = defaultObj(anchorProps);
     testID = defaultStr(testID,"RN_DatagridFooterComponent");
     label = defaultVal(label,text);
     const defLabel = label;
-    if(displayLabel !== false){
+    if(displayLabel !== false && withLabel !== false){
         if(!label || !React.isValidElement(label,true)) return null;
     } else label = undefined;
     const [active,setActive] = React.useState(isNonNullString(aggregatorFunction) && aggregatorFunction in aggregatorFunctions ? aggregatorFunction : aggregatorFunctions[Object.keys(aggregatorFunctions)[0]]?.code)

package/src/components/Datagrid/IndexComponent.js

@@ -3,6 +3,7 @@
 // license that can be found in the LICENSE file.
 
 import Accordion,{ TableData as TableDataAccordion} from "./Accordion";
+import Dashboard  from "./Dashboard";
 import Table,{TableData as DatagridTableData} from "./Table";
 import {isDesktopMedia,isMobileMedia} from "$cplatform/dimensions";
 import {isFunction,defaultVal} from "$utils";
@@ -19,7 +20,10 @@ const DatagridMainComponent = React.forwardRef((props,ref)=>{
     let Component = TableComponent;
     const canRenderAccordion = (isFunction(props.accordion) || (isObj(props.accordionProps) && isFunction(props.accordionProps.accordion)) || props.accordion === true);
     let renderType = defaultStr(getRenderType(),isDesk? "table":'accordion').trim().toLowerCase()
-    if(renderType == 'accordion' && canRenderAccordion){
+    if(false && (renderType ==="dashboard" || props.dashobard === true)){
+        Component = Dashboard;
+        delete props.dashobard;
+    } else if(renderType == 'accordion' && canRenderAccordion){
         Component = AccordionComponent;
     } else if(renderType =='table'){
         Component = TableComponent;

package/src/components/Datagrid/Table/index.js

@@ -108,6 +108,9 @@ const DatagridFactory = (Factory)=>{
                 this.listRef.current.scrollToIndex({index});
             }
         }
+        getTestID(){
+            return defaultStr(this.props.testID,"RN_DatagridTable");
+        }
         render(){
             let {title,testID,actions,
                 selectableMultiple,
@@ -123,7 +126,7 @@ const DatagridFactory = (Factory)=>{
             } = this.props;
             const canRenderChart = this.canRenderChart();
             chartContainerProps = defaultObj(chartContainerProps);
-            testID = defaultStr(testID,'RN_DatagridTableComponent');
+            testID = this.getTestID();
             rest = defaultObj(rest);
             let showDataSourceSelector = false;
             if(dataSourceSelector === true){

package/src/components/Datagrid/index.js

@@ -6,4 +6,5 @@ export * from "./Common";
 
 export {default} from "./IndexComponent";
 
-export {default as SWRDatagrid} from "./SWRDatagrid";
+export {default as SWRDatagrid} from "./SWRDatagrid";
+export {default as Dashboard} from "./Dashboard";

package/src/components/Filter/index.js

@@ -600,7 +600,6 @@ export default class Filter extends AppComponent {
      </>
      const containerProps = defaultObj(this.props.containerProps,rest.containerProps);
      delete rest.containerProps;
-     rest.onValidate = this.onFilterValidate.bind(this);
      const Component = isBetweenAction ? FilterBetweenComponent : this.Component;
      const responsiveProps = Object.assign({},responsiveProps);
      responsiveProps.style = [theme.styles.w100,responsiveProps.style]
@@ -615,6 +614,8 @@ export default class Filter extends AppComponent {
           isFilter
           name = {this.name}
           testID = {testID}
+          onValidate = {this.onFilterValidate.bind(this)}
+          onChange = {x=>null}
           ref = {React.mergeRefs(this.searchFilter,ref)}
       /> 
      </View>

package/src/components/Menu/Item.js

@@ -70,7 +70,7 @@ const MenuItemComponent = React.forwardRef(({
   const pointerEvents = disabled ? 'none' : 'auto';
   const disabledStyle = disabled ? {opacity:DISABLED_OPACITY} : null;
   const winW = Dimensions.get("window").width-30;
-  const maxWidthStyle = isBottomSheetItem ? {width:winW,maxWidth:null} : undefined;
+  const maxWidthStyle = isBottomSheetItem ? {maxWidth:winW,paddingRight:10} : undefined;
   const maxWidthTextStyle = isBottomSheetItem ? {width:winW-50} : null;
   right = typeof right =='function'? right ({color:titleColor}) : right;
   if(!React.isValidElement(right)) right = null;
@@ -113,7 +113,7 @@ const MenuItemComponent = React.forwardRef(({
             testID={testID+"_Label"}
             selectable={false}
             numberOfLines={1}
-            ellipsizeMode = {"tail"}
+            splitText
             {...labelProps}
             style={[styles.title, { color: titleColor }, labelStyle,styles.noMargin,!right ? maxWidthTextStyle : null]}
           >

package/src/components/Menu/utils.js

@@ -16,7 +16,11 @@ export const renderItems = (props)=>{
     testID = defaultStr(testID,"RN_MenuComponents.Items")
     filter = defaultFunc(filter,x=> true);
     Object.map(items,(item,index,_index)=>{
-        if(!isObj(item) || React.isValidElement(item) || !filter({items,item,_index,index})) return null;
+        if(!isObj(item)|| !filter({items,item,_index,index})) return null;
+        if(React.isValidElement(item)) {
+            _items.push(<React.Fragment key={index+"_"+_index}>{item}</React.Fragment>);
+            return
+        }
         if(item.divider === true && !item.title && !item.text && !item.label && !item.icon){
             _items.push(<Divider testID={testID+"_Divider"+index} {...item} key={index}/>);
             return

package/src/layouts/DatabaseStatistics/DatabaseStatistic.js

@@ -1,8 +1,9 @@
-import {defaultStr,isNonNullString} from "$utils";
+import {defaultStr,defaultVal,isNonNullString,defaultNumber,defaultObj} from "$utils";
 import React from "$react";
 import CountUp from "$ecomponents/CountUp";
 import Avatar from "$ecomponents/Avatar";
-import { ActivityIndicator } from "react-native-paper";
+import { Pressable } from "react-native";
+import {ActivityIndicator} from "react-native-paper";
 import Item from "$ecomponents/Expandable/Item";
 import {navigateToTableDataList} from "$enavigation/utils";
 import theme from "$theme";
@@ -11,66 +12,174 @@ import PropTypes from "prop-types";
 import APP from "$capp/instance"
 import cActions from "$cactions";
 import {View} from "react-native";
+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";
 
-export default function DatabaseStatisticContainer (props){
+export default function DatabaseStatisticContainer ({dashboardProps,fetchDataProps,table,fetchCount,index,testID,title,icon,onPress:customOnPress,columns,fetchData,withDashboard,...props}){
+    dashboardProps = defaultObj(dashboardProps);
     const [count,setCount] = React.useState(0);
-    const [isLoading,setIsLoading] = React.useState(true);
-    let {table,fetchCount,index,testID,title,icon,onPress} = props;
+    const datagridRef = React.useRef(null);
+    let {} = props;
     title = defaultStr(title)
     table = defaultObj(table);
+    const dbStatistics = defaultObj(table.databaseStatistics,table.databaseStatisticsProps);
+    const databaseStatisticsFields = defaultObj(table.databaseStatisticsFields);
+    const hasDFields = Object.size(databaseStatisticsFields,true);
+    if(!withDashboard && hasDFields){
+        withDashboard = true;
+    }
+    const dFields = hasDFields ? databaseStatisticsFields : defaultObj(dbStatistics.fields,dbStatistics.columns);
+    if(typeof fetchData !=='function'){
+        fetchData = typeof dbStatistics.fetchData =='function'? dbStatistics.fetchData : undefined;
+    }
+    withDashboard = withDashboard && typeof fetchData == 'function'? true : false;
+    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 || !tableName) return null;
+    if((!fetchCount && !withDashboard) || !tableName) return null;
     const refreshingRef = React.useRef(null);
     const isMounted = React.useIsMounted();
+    
+    const [isLoading,setIsLoading] = React.useState(withDashboard?false:true);
     const refresh = ()=>{
         if(refreshingRef.current || !isMounted()) return;
+        if(!fetchCount){
+            return;
+        }
         refreshingRef.current = true;
         setIsLoading(true);
         setTimeout(()=>{
-           fetchCount().then((count)=>{
-                setCount(count);
-                setIsLoading(false);
-                refreshingRef.current = false;
-            }).catch((e)=>{
-                setIsLoading(false);
-                refreshingRef.current = false;
-            });
-        },100);
+            fetchCount({table,tableName}).then((count)=>{
+                    setCount(count);
+                    setIsLoading(false);
+                    refreshingRef.current = false;
+                }).catch((e)=>{
+                    setIsLoading(false);
+                    refreshingRef.current = false;
+                });
+            },100);
     }
 
     React.useEffect(()=>{
-        APP.on(cActions.upsert(tableName),refresh);
-        APP.on(cActions.remove(tableName),refresh);
-        refresh();
+        if(!withDashboard){
+            APP.on(cActions.upsert(tableName),refresh);
+            APP.on(cActions.remove(tableName),refresh);
+            refresh();
+        }
         return ()=>{
-            APP.off(cActions.upsert(tableName),refresh);
-            APP.off(cActions.remove(tableName),refresh);
+            if(!withDashboard){
+                APP.off(cActions.upsert(tableName),refresh);
+                APP.off(cActions.remove(tableName),refresh);
+            }
         }
     },[]);
-    return <Item
-        testID = {defaultStr(testID,"RN_DatabaseStatistic_"+table)}
-        onPress = {(args)=>{
-            if(onPress && onPress(args) === false) return;
-            navigateToTableDataList(tableName,{
-                tableName
-            })
+    const progressBar = <View style={[theme.styles.justifyContentFlexStart,theme.styles.alignItemsFlexStart]}>
+        <ActivityIndicator color={theme.colors.primary}/>
+    </View>;
+    const isDatagridLoading = datagridRef.current && datagridRef.current.isLoading && datagridRef.current.isLoading();
+    testID = defaultStr(testID,"RN_DatabaseStatistic_"+table);
+    const onPress = (args)=>{
+        if(customOnPress && customOnPress(args) === false) return;
+        navigateToTableDataList(tableName,{
+            tableName
+        })
+    };
+    const fetchFields = React.useCallback(()=>{
+        const fetchFields = [];
+        Object.map(columns,(field,f)=>{
+            const ff = defaultStr(isObj(field)? field.field: undefined,f);
+            if(ff){
+                fetchFields.push(ff);
+            }
+        });
+        return fetchFields;
+    },[columns])();
+    const counUpStyle = {fontSize:20,fontWeight:'bold',color:theme.colors.secondaryOnSurface};
+    title =  React.isValidElement(title,true)?<Label splitText numberOfLines={1} color={theme.colors.primaryOnSurface} style={[{fontSize:15}]}>{title}</Label>: null;
+    return withDashboard ? <Dashboard
+        chartProps = {{
+            stroke: {
+                curve: 'straight'
+            },
+            fill: {
+                type: 'solid',
+                opacity: 1,
+            },
         }}
-        left = {(aProps)=>{
-            return <Avatar suffix={index} {...aProps} icon= {icon} size={40} label={title}/>
+        sessionName = {tableName+"-database-statistics"}
+        {...props}
+        {...dbStatistics}
+        style = {[theme.styles.ph1,props.style]}
+        columns = {columns}
+        ref = {datagridRef}
+        progressBar = {isLoading?<View/>:<View style={[theme.styles.w100,theme.styles.alignItemsCenter,theme.styles.justifyContentCenter]}>{progressBar}</View>}
+        tableName = {tableName}
+        table = {table}
+        fetchData = {(options)=>{
+            return fetchData({...defaultObj(fetchDataProps),fields:fetchFields,table,tableName,fetch,Auth,...options});
         }}
-        title = {<Label splitText numberOfLines={1} color={theme.colors.primaryOnSurface} style={[{fontSize:15}]}>{title}</Label>}
-        titleProps = {{primary : true}}
-        description = {isLoading?<View style={[theme.styles.justifyContentFlexStart,theme.styles.alignItemsFlexStart]}>
-            <ActivityIndicator color={theme.colors.primary}/>
-        </View>:<CountUp 
+        title = {({context})=>{
+            if(!context || !context.state) return null;
+            const {state} = context;
+            const footers = context.getFooters && context.getFooters() || {};
+            const dataSize = context.getStateDataSize && context.getStateDataSize() || 0;
+            const footersValues = context.getFooterValues && context.getFooterValues() || {};
+            const y = defaultStr(state.chartConfig?.y);
+            const footerValue = y && isObj(footersValues) && footersValues[y] || null;
+            const format = defaultStr(isObj(footerValue) && isNonNullString(footerValue.format) && footerValue.format || undefined).toLowerCase();
+            const aggregatorFunction = isNonNullString(state.aggregatorFunction)? state.aggregatorFunction : undefined;
+            let value = isObj(footerValue) && aggregatorFunction && aggregatorFunction in footerValue ? footerValue[aggregatorFunction] : undefined;
+            if(typeof value !=='number'){
+                value = isObj(footerValue) && typeof footerValue.sum =='number'? footerValue.sum : 0;
+            }
+            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]}>
+                        {title}
+                        {typeof dataSize =='number' && dataSize && <Label>
+                            {dataSize.formatNumber()}
+                        </Label> || null}
+                    </View>
+                    <Menu
+                        testID={testID+"_Menu"}
+                        items = {context.renderMenu()}
+                        anchor = {(p)=><Pressable {...p} testID={testID+"_MenuAnchor"}>
+                            <Label
+                                textCenter
+                                style = {counUpStyle}
+                            >{format =='money'?value.formatMoney():value.formatNumber()}</Label>
+                        </Pressable>}
+                    />
+                </View>
+            </Pressable>
+        }}
+    /> : <Item
+        onPress = {onPress}
+        title = {title}
+        //style = {[theme.styles.pv1]}
+        description = {isLoading || isDatagridLoading?progressBar:<CountUp 
             from={0} 
             to={count}
-            style = {{fontSize:20,color:theme.colors.secondaryOnSurface}}
+            style = {counUpStyle}
         />}
-    >
-
-    </Item>
+        titleProps ={{primary : true}}
+        left = {(aProps)=>{
+            return <Menu
+                testID={testID+"_Menu"}
+                items = {[
+                    {
+                        icon : "refresh",
+                        onPress : refresh,
+                        text : "Actualiser"
+                    }
+                ]}
+                anchor = {(p)=><Avatar suffix={index} {...aProps} {...p} icon= {icon} size={40} label={title}/>}
+            />
+        }}
+    />;
 }
 
 /*** DBSTAT, prend en paramètre le nom de la bd ainsi que celui de la table et affiche en statistic,: 
@@ -78,6 +187,10 @@ export default function DatabaseStatisticContainer (props){
  */
  DatabaseStatisticContainer.propTypes = {
     ...Item.propTypes,
+    /*** les props supplémentaires à passer à la fonction fetchData */
+    fetchDataProps : PropTypes.oneOfType([
+        PropTypes.object,
+    ]),
     /*** La méthode fetchCount doit retourner une promèsse qui lorsqu'elle est résolue, résoue le nombre d'éléments de la table de données en bd */
     fetchCount : PropTypes.func,//la fonction permettant de counter les éléments de la table data
     table : PropTypes.shape({

package/src/layouts/DatabaseStatistics/index.js

@@ -7,7 +7,7 @@ import theme from "$theme";
 import PropTypes from "prop-types";
 
 export const title = 'Statistiques en BD';
-export default function DatabaseStatisticScreen ({withScreen,tableFilter,fetchCount,title:customTitle,contentProps,containerProps,tables,Component,...props}){
+export default function DatabaseStatisticScreen ({withScreen,fetchDataProps,tableFilter,getTable,fetchCount,fetchData,title:customTitle,contentProps,containerProps,tables,Component,...props}){
         Component = React.isComponent(Component)? Component : Grid;
         containerProps = defaultObj(containerProps);
         const title = containerProps.title = defaultStr(containerProps.title,DatabaseStatisticScreen.title);
@@ -20,6 +20,10 @@ export default function DatabaseStatisticScreen ({withScreen,tableFilter,fetchCo
         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(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} >
@@ -27,6 +31,8 @@ export default function DatabaseStatisticScreen ({withScreen,tableFilter,fetchCo
                             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)=>{
@@ -51,6 +57,11 @@ export const screenName = DatabaseStatisticScreen.screenName = "DatabaseStatisti
 DatabaseStatisticScreen.title = title;
 
 DatabaseStatisticScreen.propTypes = {
+    /*** les props supplémentaires à passer à la fonction fetchData */
+    fetchDataProps : PropTypes.oneOfType([
+        PropTypes.object,
+    ]),
+    getTable : PropTypes.func,//la fonction permettant de récupérer la table à partir du nom
     tables : PropTypes.oneOfType([
         PropTypes.arrayOf(PropTypes.object),
         PropTypes.objectOf(PropTypes.object)