@fto-consult/expo-ui 2.21.0 → 2.21.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.21.0",
+  "version": "2.21.1",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -62,6 +62,7 @@
     "@expo/html-elements": "^0.2.0",
     "@expo/vector-icons": "^13.0.0",
     "@fto-consult/common": "^1.23.9",
+    "@fto-consult/expo-ui": "^2.21.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

@@ -1,6 +1,6 @@
 import React from '$react'
 import PropTypes from 'prop-types'
-import {defaultStr,defaultObj,uniqid,defaultNumber} from "$utils";
+import {defaultStr,defaultVal,extendObj,defaultObj,uniqid,defaultNumber} from "$utils";
 import {extend} from "./utils"
 import stableHash from 'stable-hash';
 import Chart from "./appexChart";
@@ -16,20 +16,15 @@ import Chart from "./appexChart";
  *  options {number} - les options supplémentaires au chart
  * 
 */
-const ChartComponent = React.forwardRef(({type, height,chartId, width, series, options,testID,webViewProps, ...props },ref)=>{
+const ChartComponent = React.forwardRef(({options,height,width,chartId,testID,webViewProps, ...props },ref)=>{
   const chartContext = React.useRef(null);
   options = defaultObj(options);
-  const chartIdRef = React.useRef(defaultStr(chartId,options.chart?.id,uniqid("chart-id")));
-  const config = extend(options,{
-    chart: {
-      type,
-      height,
-      width,
-      id : chartIdRef.current
-    },
-    series,
-  });
-  config.chart.id = chartIdRef.current;
+  const series = options.series;
+  options.chart = defaultObj(options.chart);
+  const chartIdRef = React.useRef(defaultStr(chartId,options.chart.id,uniqid("chart-id")));
+  width = options.chart.width = defaultVal(options.chart.width,width);
+  height = options.chart.height = defaultVal(options.chart.height,height)
+  options.chart.id = chartIdRef.current;
   testID = defaultStr(testID,"RN_ChartComponent");
   const prevWidth = React.usePrevious(width), prevHeight = React.usePrevious(height);
   const prevOptions = React.usePrevious(options,JSON.stringify);
@@ -40,21 +35,21 @@ const ChartComponent = React.forwardRef(({type, height,chartId, width, series, o
   options.xaxis.stroke.width = defaultNumber(options.xaxis.stroke.width,2);
   options.xaxis.stroke.height = defaultNumber(options.xaxis.height,1);
 
+  console.log(options,' is optssss');
   React.useEffect(()=>{
     if(chartContext.current && chartContext.current.updateOptions){
         if((prevSeries == series) || width != prevWidth || height != prevHeight){
-            chartContext.current.updateOptions(config);
+            chartContext.current.updateOptions(options);
         } else if(prevOptions != options){
             chartContext.current.updateSeries(series);
         } 
     }
-  },[stableHash({type,options,series,width,height})])
-  return <Chart {...props} options={config} chartId={chartIdRef.current} chartContext={chartContext} testID={testID} ref={ref}/>
+  },[stableHash({options,series,width,height})])
+  return <Chart {...props} options={options} chartId={chartIdRef.current} chartContext={chartContext} testID={testID} ref={ref}/>
 });
 
 
 ChartComponent.propTypes = {
-  type: PropTypes.string.isRequired,
   width: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number,
@@ -63,9 +58,12 @@ ChartComponent.propTypes = {
     PropTypes.string,
     PropTypes.number,
   ]),
-  series: PropTypes.array.isRequired,
   options: PropTypes.shape({
+    chart : PropTypes.shape({
+      type: PropTypes.string,
+    }),
     xaxis : PropTypes.object,
+    series: PropTypes.array.isRequired,
   }).isRequired,
   ///lorsque le chart est rendu en environnement native, les props du webView
   webViewProps : PropTypes.object,

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

@@ -339,8 +339,11 @@ const DatagridFactory = (Factory)=>{
                 backToTopProps,
                 testID,
                 renderEmpty,
+                chartContainerProps,
                 ...rest
             } = this.props
+            chartContainerProps = defaultObj(chartContainerProps);
+            const canRenderChart = this.canRenderChart();
             const hasData = this.state.data.length ? true : false;
             testID = defaultStr(testID,"RN_DatagridAccordion");
             backToTopProps = defaultObj(backToTopProps);
@@ -504,25 +507,25 @@ const DatagridFactory = (Factory)=>{
                                         icon : "refresh",
                                         onPress : this.refresh.bind(this)
                                     },
-                                    visibleColumns.length ? {
+                                    !canRenderChart && visibleColumns.length ? {
                                         text : 'colonnes',
                                         icon : "view-column",
                                         items : visibleColumns,
                                         closeOnPress : false,
                                     } : null,
-                                    hasFooterFields ? {
+                                    !canRenderChart && hasFooterFields ? {
                                         onPress :  ()=>{this.toggleFooters(!showFooters)}    
                                         ,icon :  showFooters?'view-column':'view-module'
                                         ,text : (showFooters?'Masquer/Ligne des totaux':'Afficher/Ligne des totaux')
                                     }:null,
                                     ...this.renderCustomMenu(),
                                     ...restItems,
-                                    this.canScrollTo() &&  {
+                                    !canRenderChart && this.canScrollTo() &&  {
                                         text : 'Retour en haut',
                                         icon : "arrow-up-bold",
                                         onPress : this.scrollToTop.bind(this)
                                     },
-                                    this.canScrollTo() && {
+                                    !canRenderChart && this.canScrollTo() && {
                                         text : 'Aller à la dernière ligne',
                                         icon : "arrow-down-bold",
                                         onPress : this.scrollToEnd.bind(this)
@@ -570,7 +573,7 @@ const DatagridFactory = (Factory)=>{
                         /> : null}
                         {datagridHeader}
                         {_progressBar}
-                        {showFooters ? (
+                        {!canRenderChart && showFooters ? (
                             <View  testID={testID+"_FooterContainer"} pointerEvents={pointerEvents} style={[{justifyContent:'center'}]}>
                                 <View  testID={testID+"_FooterContentContainer"} style={[styles.footersContainer]}>
                                     <ScrollView testID={testID+"_FooterScrollView"} horizontal contentContainerStyle={[styles.contentContainerStyle]}>
@@ -589,7 +592,7 @@ const DatagridFactory = (Factory)=>{
                             </View>
                         ) : null}
                     </View>
-                    {hasData ? <FlashList
+                    {hasData && !canRenderChart ? <FlashList
                         estimatedItemSize = {150}
                         prepareItems = {false}
                         {...rest}
@@ -609,11 +612,13 @@ const DatagridFactory = (Factory)=>{
                             return this.backToTopRef.current;
                         }:false}
                         keyExtractor = {this.getRowKey.bind(this)}
-                    /> : <View style={styles.hasNotData}>
+                    /> : canRenderChart    ?<View testID={testID+"_ChartContainer"} {...chartContainerProps} style={[theme.styles.w100,chartContainerProps.style]}>
+                        {this.renderChart()}
+                    </View> :  <View style={styles.hasNotData}>
                         {this.renderEmpty()}
                     </View>}
                 </View>}
-                {backToTopRef ? <BackToTop testID={testID+"_BackToTop"} {...backToTopProps} ref={this.backToTopRef} style={[styles.backToTop,backToTopProps.style]} onPress={this.scrollToTop.bind(this)}/>:null}
+                {!canRenderChart && backToTopRef ? <BackToTop testID={testID+"_BackToTop"} {...backToTopProps} ref={this.backToTopRef} style={[styles.backToTop,backToTopProps.style]} onPress={this.scrollToTop.bind(this)}/>:null}
                 <BottomSheet
                     testID = {testID+"_BottomSheet"}
                     renderMenuContent = {false}

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

@@ -39,33 +39,40 @@ import {Menu} from "$ecomponents/BottomSheet";
 import {styles as tableStyles} from "$ecomponents/Table";
 import {DialogProvider} from "$ecomponents/Form/FormData";
 import Chart from "$ecomponents/Chart";
+import { aggregatorFunctions} from "../Footer/Footer";
 
+const chart = "chart";
 export const displayTypes = {
     table : {
         code : "table",
+        isChart : false,
         label : 'Tableau',
         icon : "table",
         type : 'table',
     },
-    /*lineChart : {
-        code : 'lineChart',
+    lineChart : {
+        code : "lineChart",
+        isChart : true,
         label : 'Graphique|Linéaire',
         icon : "chart-areaspline",
         type : 'line',
     },
     areaChart : {
+        isChart : true,
         code : 'areaChart',
         label : 'Graphique|Surface',
         icon : "chart-areaspline-variant",
         type: 'area',
     },
     barChart : {
+        isChart : true,
         code : 'barChart',
         label : 'Graphique|Barres',
         icon : "chart-bar",
         type: 'bar'
     },
-    donutChar : {
+    /*donutChart : {
+        isChart : true,
         code : 'donutChart',
         label : 'Graphique|Circulaire',
         icon : "chart-donut",
@@ -200,8 +207,9 @@ export default class CommonDatagridComponent extends AppComponent {
         if(this.canHandleColumnResize()){
             this.state.columnsWidths = this.preparedColumns.widths;
         }
-        const dType = defaultStr(this.props.displayType,this.getSessionData("diplayType"),"table");
-        this.state.displayType = this.displayTypes[dType] ? this.displayTypes[dType].code : "table" in this.displayTypes ? "table" : Object.keys(this.displayTypes)[0];
+        this.state.chartConfig = defaultObj(this.props.chartConfig,this.getSessionData("chartConfig"));
+        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;
         extendObj(this.state,this.prepareData({data}));
         const {width:windowWidth,height:windowHeight} = Dimensions.get("window");
         this.state.layout = {
@@ -281,7 +289,7 @@ export default class CommonDatagridComponent extends AppComponent {
         let sessionName = this.props.sessionName;
         let isDatagrid = this.isDatagrid()
         if(!isNonNullString(sessionName)){
-            sessionName = 'datagrid';
+            //sessionName = 'datagrid';
         }
         let userCode = Auth.getLoggedUserCode();
         Object.defineProperties(this,{
@@ -1046,58 +1054,63 @@ export default class CommonDatagridComponent extends AppComponent {
         }
         return null;
    }
-   /*** configure la  */
-   configureSectionListColumn(column){
+   isSectionListColumnConfigurable(column){
         if(!isObj(column) || !isNonNullString(column.field) || !isObj(this.state.columns[column.field])){
-            return Promise.reject({message : 'type de colonne invalide, impossible de configurer la colonne, pour permettre qu\elle soit ajoutée dans les colonnes de groupe du tableau'})
-        }
-        const col = this.state.columns[column.field];
-        const type = defaultStr(col.jsType,col.type).toLowerCase();
-        if(type.contains("date") || type =='time'){
-            return new Promise((resolve,reject)=>{
-                DialogProvider.open({
-                    title : 'Format de date',
-                    fields : {
-                        dateFormat : {
-                            type : 'select_dateformat',
-                            required : true,
-                            text : 'Sélectionnez un format de date',
-                            defaultValue : defaultStr(this.configureSectionListSelectedValues[column.field],"dd/mm/yyyy"),
-                        }
-                    },
-                    onCancelButtonPress : ()=>{
+            return false;
+        }
+        const type = defaultStr(column.jsType,column.type).toLowerCase();
+        return type.contains("date") || type =='time' ? true : false;
+   }
+   /*** configure la  */
+   configureSectionListColumn(column,toggleSectionList){
+        if(!this.isSectionListColumnConfigurable(column)) return Promise.reject({message : 'type de colonne invalide, impossible de configurer la colonne, pour permettre qu\elle soit ajoutée dans les colonnes de groupe du tableau'});
+        const format = defaultStr(defaultObj(this.configureSectionListSelectedValues[column.field]).format,"dd/mm/yyyy")
+        return new Promise((resolve,reject)=>{
+            DialogProvider.open({
+                title : 'Format de date',
+                subtitle : false,
+                fields : {
+                    dateFormat : {
+                        type : 'select_dateformat',
+                        required : true,
+                        text : 'Sélectionnez un format de date',
+                        defaultValue : format,
+                    }
+                },
+                onCancelButtonPress : ()=>{
+                    DialogProvider.close();
+                    reject({msg:'aucun format sélectionné'})
+                },
+                actions : [{
+                    text : "Sélectionnez",
+                    icon : "check",
+                    onPress : ({data})=>{
+                        column.format = data.dateFormat;
+                        this.configureSectionListSelectedValues[column.field] = {format:column.format}
                         DialogProvider.close();
-                        reject({msg:'aucun format sélectionné'})
+                        setTimeout(()=>{
+                            resolve(column);
+                            if(toggleSectionList !== false){
+                                this.toggleColumnInSectionList(column.field,true);
+                            }
+                        },100)
                     },
-                    actions : [{
-                        text : "Sélectionnez",
-                        icon : "check",
-                        onPress : ({data})=>{
-                            column.format = data.dateFormat;
-                            this.configureSectionListSelectedValues[column.field] = data.dateFormat;
-                            DialogProvider.close();
-                            setTimeout(()=>{
-                                resolve(column);
-                            },100)
-                        },
-                    }]
-                })
+                }]
             })
-        }
-        return Promise.resolve(column);
+        })
    }
-   toggleColumnInSectionList(columnName){
+   toggleColumnInSectionList(columnName,enable){
         if(!isNonNullString(columnName) || !isObj(this.state.columns[columnName])) return;
         if(!isObj(this.state.sectionListColumns) || !Array.isArray(this.preparedColumns?.sectionListColumnsMenuItems))return;
         const menuItems = this.preparedColumns?.sectionListColumnsMenuItems;
         if(!menuItems.length) return;
         const sectionListColumns = {...this.state.sectionListColumns};
-        if(isObj(sectionListColumns[columnName])){
+        if(enable !== true && isObj(sectionListColumns[columnName])){
             delete sectionListColumns[columnName];
         } else {
             sectionListColumns[columnName] = {field:columnName};
         }
-        const cb =()=>{
+        setTimeout(() => {
             const {sectionListColumns:pSListColumns} = this.prepareColumns({sectionListColumns});
             this.setIsLoading(true,()=>{
                 this.prepareData({data:this.INITIAL_STATE.data,sectionListColumns:pSListColumns},(state)=>{
@@ -1107,12 +1120,6 @@ export default class CommonDatagridComponent extends AppComponent {
                     });
                 });
             },true);
-        }
-        setTimeout(() => {
-            if(!isObj(sectionListColumns[columnName])){
-                return cb();
-            }
-            return this.configureSectionListColumn(sectionListColumns[columnName]).then(cb).catch(notify.error)
         }, 100);
    }
    removeAllColumnsInSectionList(){
@@ -1131,34 +1138,162 @@ export default class CommonDatagridComponent extends AppComponent {
    }
    /*** si l'on peut rendre le contenu de type graphique */
    isChartRendable(){
-     return !this.isPivotDatagrid() && this.hasFooterFields()  && this.isSectionList();
+     return !this.isPivotDatagrid() && this.hasFooterFields();
+   }
+   isValidChartConfig(config){
+        config = defaultObj(config,this.state.chartConfig);
+        return isNonNullString(config.x) && isNonNullString(config.y);
    }
    canRenderChart(){
-        return this.isChartRendable() && this.state.displayType.toLowerCase().contains("chart");
+        return this.isChartRendable() && isNonNullString(this.state.displayType) && displayTypes[this.state.displayType]?.isChart === true ? true : false;
+   }
+   persistDisplayType(displayType){
+    this.setSessionData("displayType",displayType);
    }
    /***modifie le type de données d'affichage du tableau */
-   setDisplay(type){
+   setDisplayType(type){
         if(!isObj(type) || !isNonNullString(type.code) || !displayTypes[type.code]) return;
         const tt = displayTypes[type.code];
+        if(this.state.displayType == tt.code) return; 
+        const displayType = tt.code;
         if(tt.code == 'table'){
-            if(this.state.displayType == 'table') return;
             return this.setIsLoading(true,()=>{
-                this.setState({displayTypes:'table'},()=>{
+                this.setState({displayType},()=>{
                     this.setIsLoading(false,false);
+                    this.persistDisplayType(displayType);
                 });
             },true)
         } else {
+            const cb = (chartConfig)=>{
+                this.setIsLoading(true,()=>{
+                    this.setState({chartConfig,displayType},()=>{
+                        this.setIsLoading(false,false);
+                        this.persistDisplayType(displayType);
+                    })
+                },true);
+            }
+            if(!this.isValidChartConfig()){
+                return this.configureChart(false).then((chartConfig)=>{
+                    cb(chartConfig);
+                });
+            }
+            cb({...this.state.chartConfig});
+        }
+   }
+   configureChart(refreshChart){
+        if(!this.isChartRendable()){
+            return Promise.reject({message:'Impossible de configurer le graphe car le type de données ne permet pas de rendu de type graphe'});
+        }
+        const xItems = {},yItems = {},config = defaultObj(this.state.chartConfig);
+        const series = {};
+        let hasSeries = false;
+        const isValidConfig = this.isValidChartConfig();
+        Object.map(this.state.columns,(field,f)=>{
+            if(isObj(field) && !this.isSelectableColumn(field) && !this.isIndexColumn(field)){
+                xItems[f] = field;
+                const type = defaultStr(field.jsType,field.type).toLowerCase();
+                if(type === 'number' || type=='decimal'){
+                    yItems[f] = field;
+                    series[f] = field;
+                }
+            }
+        });
+        const onValidatorValid = ({context,value})=>{
+            if(context && value){
+                const name = context.getName();
+                const isHorizontal = name =="x";
+                const oContext = context.getField(isHorizontal ? "y" : "x");
+                if(!oContext) return;
+                const v2 = oContext.getValue()
+                if(v2 === value){
+                    return "la valeur du champ [{0}] doit être différent de celle du champ [{1}]".sprintf(context.getLabel(),oContext.getLabel())
+                }
+                oContext.validate({value:v2,context:oContext});
+            }
+        }
+        return new Promise((resolve,reject)=>{
             DialogProvider.open({
-                title : 'Configuration de la courbe'
+                title : 'Configuration des graphes',
+                subtitle : false,
+                fields : {
+                    x : {
+                        text : 'Axe des x[horizontal]',
+                        type : "select",
+                        required : true,
+                        items : xItems,
+                        defaultValue : config.x,
+                        onValidatorValid,
+                    },
+                    y :  {
+                        text : 'Axe des y[Vertical]',
+                        type : "select",
+                        required : true,
+                        items : yItems,
+                        defaultValue : config.y,
+                        onValidatorValid,
+                    },
+                    series : hasSeries && {
+                        text : 'Series',
+                        type : "select",
+                        items : series,
+                        multiple : true,
+                    },
+                    aggregatorFunction : {
+                        type  : 'select',
+                        text : "Foncton d'aggrégation",
+                        required : true, 
+                        multiple : false,
+                        defaultValue : "sum",
+                        items : aggregatorFunctions,
+                    }
+                },
+                actions : [
+                    {
+                        text : "Configurer",
+                        icon : "check",
+                        onPress : ({data})=>{
+                            const chartConfig = {...config,...data};
+                            this.setSessionData("chartConfig",chartConfig);
+                            DialogProvider.close();
+                            if(false && !isValidConfig && refreshChart !== false){
+                                return this.setState({chartConfig},()=>{
+                                    resolve(chartConfig)
+                                })
+                            }
+                            resolve(chartConfig);
+                        }
+                    }
+                ]
             })
-        }
+        })
+   }
+   getCharConfig(){
+      return defaultObj(this.state.chartConfig);
    }
    renderDisplayTypes(){
         const m = [];
-        let activeType = null;
+        let activeType = null,hasFoundChart = false,hasFoundTable = false;
+        const hasConfig = this.isValidChartConfig();
         Object.map(this.displayTypes,(type,k)=>{
-            let c = k.toLowerCase();
-            if(c.contains('chart') && !this.isChartRendable()) return null;
+            if(type.isChart === true ) {
+                if(!this.isChartRendable()){
+                    return null;
+                }
+                if(!hasFoundChart){
+                    if(hasFoundTable){
+                        m.push({divider:true});
+                    }
+                    hasFoundChart = true;
+                    m.push({
+                        divider : true,
+                        text : "Configurer les graphes",
+                        icon :"material-settings",
+                        onPress : this.configureChart.bind(this)
+                    });
+                }
+            } else if(k === 'table'){
+                hasFoundTable = true;
+            }
             const active = this.state.displayType === k;
             if(active){
                 activeType = type;
@@ -1166,10 +1301,14 @@ export default class CommonDatagridComponent extends AppComponent {
             m.push({
                 ...type,
                 labelStyle : active &&  {fontWeight:'bold',color:theme.colors.primaryOnSurface} || null,
+                right : <>
+                    {active ? <Icon color={theme.colors.primaryOnSurface} name="check"/>: null}
+                </>,
+                disabled : type.isChart && !hasConfig ? true : undefined,
                 onPress:()=>{
-                    this.setDisplay(type); 
+                    this.setDisplayType(type); 
                 }
-            })
+            });
         });
         if(m.length <= 1 || !activeType) return null;
         if(!isMobileOrTabletMedia()){
@@ -1187,17 +1326,117 @@ export default class CommonDatagridComponent extends AppComponent {
             }}
         />
    }
+   getEmptyDataValue(){
+        return "N/A";
+   }
    renderChart(){
         if(!this.canRenderChart()) return null;
+        if(!this.isValidChartConfig()) return null;
+        const chartType = displayTypes[this.state.displayType];
+        if(!isObj(chartType) || !isNonNullString(chartType.type)) return null;
+        const config = this.getCharConfig();
+        if(!this.state.columns[config.y]) return null;
+        const yaxis = this.state.columns[config.y];
+        const type = defaultStr(yaxis.jsType,yaxis.type).toLowerCase();
+        if(type !== 'number'&& type !== 'decimal') return null;
+        const isEmptyY = config.x === this.emptySectionListHeaderValue;
+        const seriesConfig = Array.isArray(config.series) && config.series.length ? config.series : [yaxis.field];
+        let xaxis = null;
+        if(!isEmptyY){
+            if(!this.state.columns[config.x]){
+                return null;
+            }
+            xaxis = this.state.columns[config.x];
+        }
+        let aggregatorFunction = typeof config.aggregatorFunction =='string' && aggregatorFunctions[config.aggregatorFunction]?aggregatorFunctions[config.aggregatorFunction] :aggregatorFunctions.sum;
+        if(isObj(aggregatorFunction) && typeof aggregatorFunction.eval =='function'){
+            aggregatorFunction = aggregatorFunction.eval;
+        } else {
+            aggregatorFunction = aggregatorFunctions.sum.eval;
+        }
+        if(this.isSectionList()){
+            return null;
+        }
+        const emptyValue = this.getEmptyDataValue();
+        const indexes = {}
+        let count = 0;
+        this.state.data.map((data,index)=>{
+            if(!isObj(data))return null;
+            const txt = this.renderRowCell({
+                data,
+                rowData : data,
+                rowCounterIndex : index,
+                rowIndex : index,
+                columnDef : xaxis,
+                renderRowCell : false,
+                columnField : xaxis.field,
+            });
+            const text = isNonNullString(txt)? txt : emptyValue;
+            Object.map(seriesConfig,(s,v)=>{
+                if(!isNonNullString(s) || !this.state.columns[s]) return null;
+                const col = this.state.columns[s];
+                if(!isObj(col)) return null;
+                const value = defaultNumber(data[col.field]);
+                indexes[s] = defaultObj(indexes[s]);
+                const current = indexes[s];
+                current[text] = typeof current[text] =="number"? current[text] : 0;
+                current[text] = aggregatorFunction(value,current[text],count);
+            })
+        });
+        const series = [];
+        Object.map(indexes,(values,serieName)=>{
+            const col = this.state.columns[serieName];
+            const name = defaultStr(col?.label,col?.text,serieName),data = [];
+            Object.map(values,(v,i)=>{
+                data.push({
+                    x : i,
+                    y : v,
+                })
+            })
+            series.push({
+                name,
+                type : chartType.type,
+                data,
+            })
+        })
+        const {width,height:winheight} = Dimensions.get("window");
+        const {layout} = this.state;
+        let maxHeight = winheight-100;
+        if(layout && typeof layout.windowHeight =='number' && layout.windowHeight){
+            const diff = winheight - Math.max(defaultNumber(layout.y,layout.top),100);
+            if(winheight<=350){
+                maxHeight = 350;
+            } else {
+                 maxHeight = diff;
+            }
+        }
+        const chartProps = defaultObj(chartProps);
+        return <Chart
+            options = {{
+                ...defaultObj(chartProps.options),
+                series,
+                chart : {
+                    height :350,
+                    maxHeight,
+                    ...defaultObj(chartProps.chart),
+                    type : chartType.type,
+                },
+                xaxis: {
+                    ...defaultObj(chartProps.xaxis),
+                    type: 'category'
+                }
+            }}
+        />
    }
    toggleDisplayOnlySectionListHeaders(){
         if(!this.canDisplayOnlySectionListHeaders()) return
         setTimeout(()=>{
+            const showFooters = true;
             const displayOnlySectionListHeaders = !!!this.state.displayOnlySectionListHeaders;
             this.setSessionData("displayOnlySectionListHeaders",displayOnlySectionListHeaders);
             if(!displayOnlySectionListHeaders){
                 return this.prepareData({data:this.INITIAL_STATE.data,displayOnlySectionListHeaders},(state)=>{
-                    this.setState(state)
+                    this.setState({...state,showFooters})
                 })
             } else {
                 this.setIsLoading(true,()=>{
@@ -1207,7 +1446,7 @@ export default class CommonDatagridComponent extends AppComponent {
                             data.push(d);
                         }
                     });
-                    this.setState({data,displayOnlySectionListHeaders},()=>{
+                    this.setState({data,displayOnlySectionListHeaders,showFooters},()=>{
                         this.setIsLoading(false),false;
                     });
                 },true)
@@ -1293,6 +1532,7 @@ export default class CommonDatagridComponent extends AppComponent {
             } = header;
             restCol = Object.clone(defaultObj(restCol));
             let colFilter = defaultVal(restCol.filter,true);
+            const format  = defaultStr(restCol.format).toLowerCase();
             field = header.field = defaultStr(header.field,field,headerIndex);
             delete restCol.filter;
             
@@ -1420,19 +1660,32 @@ export default class CommonDatagridComponent extends AppComponent {
                         ...header,
                          width,
                          type,
+                         ...defaultObj(this.configureSectionListSelectedValues[field]),
                         ...sListColumns[field],
                     };///les colonnes de sections
                     this.sectionListColumnsSize.current++;
                 }
-                sectionListColumnsMenuItems.push({
+                const mItem = {
                     field,
+                    type,
+                    format,
                     onPress : ()=>{
                         this.toggleColumnInSectionList(field);
                         return false;
                     },
                     title : title,
                     icon : isInSectionListHeader?CHECKED_ICON_NAME : null,
-                });
+                };
+                if(this.isSectionListColumnConfigurable(mItem)){
+                    mItem.right = (p)=>{
+                        return <Icon name="material-settings" {...p} onPress={(e)=>{
+                            React.stopEventPropagation(e);
+                            this.configureSectionListColumn(mItem);
+                            return false;
+                        }}/>
+                    }
+                }
+                sectionListColumnsMenuItems.push(mItem);
             }
             columnIndex++;
             visibleColumnIndex++;
@@ -2424,7 +2677,11 @@ export const ProgressBar = CommonDatagridComponent.LinesProgressBar;
 CommonDatagridComponent.getDefaultPreloader = (props)=>{
     return <Preloader {...defaultObj(props)}/>
 }
-const allDTypes = Object.keys(displayTypes);
+
+const chartDisplayType = PropTypes.oneOf(Object.keys(displayTypes).filter(type=>{
+    const x = displayTypes[type];
+    return typeof x =='object' && x && typeof x.disabled !== true && x.isChart === true && true || false;
+}));
 CommonDatagridComponent.propTypes = {
     canMakePhoneCall : PropTypes.bool,//si l'on peut faire un appel sur la données sélectionnées
     makePhoneCallProps : PropTypes.oneOfType([
@@ -2602,12 +2859,16 @@ CommonDatagridComponent.propTypes = {
     renderCustomPagination : PropTypes.func,
     getActionsArgs : PropTypes.func,//fonction permettant de récupérer les props supplémentaires à passer aux actions du datagrid
     displayOnlySectionListHeaders : PropTypes.bool,// si uniquement les entêtes des sections seront affichés, valides uniquement en affichage des sectionHeader 
-
-    /*** types d'affichage displayTypes */
-    /** les types d'affichage supportés */
-    displayType : PropTypes.oneOf(allDTypes),
+    /*** les options de configuration du graphe */
+    chartConfig : PropTypes.shape({
+        //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
+    }),
+    displayType : chartDisplayType,
     /*** les types d'afichates supportés par l'application */
-    displayTypes : PropTypes.arrayOf(PropTypes.oneOf(allDTypes)) 
+    displayTypes : PropTypes.arrayOf(chartDisplayType) 
 }
 
 const styles = StyleSheet.create({

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

@@ -14,6 +14,50 @@ let methods = {
     max : 'Maximum',
     count : "Nombre",
 }
+/*** les fonction d'aggreations */
+export const aggregatorFunctions = {
+    sum : {
+        code : "sum",
+        label : "Somme",
+        eval : (current,prev,count)=>{
+            current = typeof current =='number'?current : 0;
+            prev = typeof prev =='number'? prev : 0;
+            return current+prev;
+        }
+    },
+    /*average : {
+        code : "average",
+        label : "Moyenne",
+        eval : ()=>{
+
+        }
+    },*/
+    min : {
+        code : "min",
+        label : "Minimum",
+        eval : (current,prev,count)=>{
+            current = typeof current =='number'?current : 0;
+            prev = typeof prev =='number'? prev : 0;
+            return Math.min(current,prev);
+        },
+    },
+    max : {
+        code : "max",
+        label: 'Maximum',
+        eval : (current,prev,count)=>{
+            current = typeof current =='number'?current : 0;
+            prev = typeof prev =='number'? prev : 0;
+            return Math.max(current,prev);
+        },
+    },
+    count : {
+        code : "count",
+        label : "Nombre",
+        eval : (current,prev,count)=>{
+            return (typeof count =='number'? count : 0)+1;
+        }
+    },
+}
 const formatValue = ({value,format,method})=>{
     return (format === 'money' && method != 'count')? value.formatMoney():value.formatNumber();
 }

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

@@ -116,9 +116,12 @@ const DatagridFactory = (Factory)=>{
                 selectable,pagin,showPagination,
                 sessionName,onMount,onUnmount,onFetchData,dataSourceSelector,dataSourceSelectorProps,queryLimit,
                 filters,
+                chartContainerProps,
                 accordion, //pour le rendu du header en accordion
                 ...rest
             } = this.props;
+            const canRenderChart = this.canRenderChart();
+            chartContainerProps = defaultObj(chartContainerProps);
             testID = defaultStr(testID,'RN_DatagridTableComponent');
             rest = defaultObj(rest);
             let showDataSourceSelector = false;
@@ -168,7 +171,7 @@ const DatagridFactory = (Factory)=>{
             if(selectableMultiple && max){
                 max = max.formatNumber();
                 restItems = [
-                    ...(selectableMultiple ? [{
+                    ...(selectableMultiple && !canRenderChart ? [{
                         label : "Sélectionner "+max.formatNumber(),
                         icon : "select-all",
                         onPress : (x,event)=>{
@@ -188,9 +191,9 @@ const DatagridFactory = (Factory)=>{
             const {layout} = this.state;
             let maxHeight = winheight-100;
             if(layout && typeof layout.windowHeight =='number' && layout.windowHeight){
-                const diff = winheight - Math.max(defaultNumber(layout.y,layout.top),150);
-                if(winheight<=300){
-                    maxHeight = 300;
+                const diff = winheight - Math.max(defaultNumber(layout.y,layout.top),100);
+                if(winheight<=350){
+                    maxHeight = 350;
                 } else {
                     maxHeight = diff;
                 }
@@ -216,7 +219,7 @@ const DatagridFactory = (Factory)=>{
                                         {showFilters?'Masquer/Filtres':'Afficher/Filtres'}
                                 </Button>
                             )}
-                            {hasFooterFields ? <Button
+                            {hasFooterFields && !canRenderChart ? <Button
                                 normal
                                 style={styles.paginationItem}
                                 onPress =  {()=>{this.toggleFooters(!showFooters)} }   
@@ -326,20 +329,28 @@ const DatagridFactory = (Factory)=>{
                     {rPagination}
                     {_progressBar}  
                 </View>
-                <Table
+                {<Table
+                    renderListContent = {canRenderChart? false:true}
                     ref = {this.listRef}
                     {...rest}
                     onLayout = {(args)=>{
                         if(rest.onLayout){
                             rest.onLayout(args);
                         }
+                        if(canRenderChart){
+                            return;
+                        }
                         this.updateLayout(args);
                     }}
+                    children = {canRenderChart ? <View testID={testID+"_ChartContainer"} {...chartContainerProps} style={[theme.styles.w100,chartContainerProps.style]}>
+                        {this.renderChart()}
+                    </View> : null}
                     getItemType = {this.getFlashListItemType.bind(this)}
                     renderItem = {this.renderFlashListItem.bind(this)}
-                    hasFooters = {hasFooterFields}
+                    hasFooters = {hasFooterFields && !canRenderChart ? true : false}
                     showFilters = {showFilters}
-                    showFooters = {showFooters}
+                    showFooters = {showFooters && !canRenderChart ? true : false}
+                    showHeaders = { canRenderChart ? !!showFilters : true}
                     headerContainerProps = {{}}
                     headerCellContainerProps = {{
                         style : showFilters?{justifyContent:'flex-start'}:null
@@ -360,7 +371,7 @@ const DatagridFactory = (Factory)=>{
                     renderFilterCell={this.renderFilterCell.bind(this)}
                     renderFooterCell={this.renderFooterCell.bind(this)}
                     renderEmpty = {this.renderEmpty.bind(this)}
-                />
+                />}
             </View>
         }
     }

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

@@ -318,6 +318,9 @@ export default class Field extends AppComponent {
     getName (){
         return this.name;
     }
+    getLabel (){
+        return defaultStr(this.label,this.props.label,this.props.text,this.props.title,this.name);
+    }
     getFormName(){
         return this.formName;
     }

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

@@ -48,6 +48,7 @@ const FormDataDialogProvider = React.forwardRef((props,innerRef)=>{
     return <Dialog 
         responsive
         withScrollView
+        subtitle ={false}
         {...props} 
         {...state} 
         formProps = {formProps}

package/src/components/Menu/Item.js

@@ -9,7 +9,7 @@ import theme,{black,white,Colors,StylePropTypes,DISABLED_OPACITY} from "$theme";
 import PropTypes from "prop-types";
 import { Dimensions } from 'react-native';
 import View from "$ecomponents/View";
-import {defaultVal} from "$utils";
+import {defaultVal,isNonNullString,defaultStr,defaultObj} from "$utils";
 import Tooltip from "$ecomponents/Tooltip";
 import Label from "$ecomponents/Label";
 
@@ -34,8 +34,10 @@ const MenuItemComponent = React.forwardRef(({
   isBottomSheetItem,
   accessibilityLabel,
   right,
+  contentContainerProps,
   ...rest
 },ref) => {
+  contentContainerProps = defaultObj(contentContainerProps);
   title = defaultVal(label,text,title);
   const disabledColor = color(theme.dark ? white : black)
     .alpha(0.32)
@@ -64,6 +66,7 @@ const MenuItemComponent = React.forwardRef(({
   const maxWidthStyle = isBottomSheetItem ? {width:winW,maxWidth:null} : undefined;
   const maxWidthTextStyle = isBottomSheetItem ? {width:winW-50} : null;
   right = typeof right =='function'? right ({color:titleColor}) : right;
+  if(!React.isValidElement(right)) right = null;
   return (
     <Tooltip
       {...defaultObj(rest)}
@@ -85,28 +88,31 @@ const MenuItemComponent = React.forwardRef(({
           </View>
         ) : null}
         <View
-          testID={testID+"_LabelContainer"}
+          testID={testID+"_Right2LabelContainer"}
+          pointerEvents={!right?"none":"auto"}
+          {...contentContainerProps}
           style={[
             styles.item,
             styles.content,
             !maxWidthStyle && icon ? styles.widthWithIcon : null,
             contentStyle,
             !icon?styles.titleNoIcon:null,
-            maxWidthStyle
+            right && theme.styles.row,
+            maxWidthStyle,
+            contentContainerProps.style
           ]}
-          pointerEvents="none"
         >
           <Label
             testID={testID+"_Label"}
             selectable={false}
             numberOfLines={1}
             ellipsizeMode = {"tail"}
-            style={[styles.title, { color: titleColor }, labelStyle,styles.noMargin,maxWidthTextStyle]}
+            style={[styles.title, { color: titleColor }, labelStyle,styles.noMargin,!right ? maxWidthTextStyle : null]}
           >
             {title}
           </Label>
+          {right}
         </View>
-        {React.isValidElement(right) && right || null}
       </View>
     </Tooltip>
   );
@@ -157,6 +163,9 @@ const styles = StyleSheet.create({
   widthWithIcon: {
     maxWidth: maxWidth - iconWidth /*+ 48*/,
   },
+  widthWithRight: {
+    maxWidth: maxWidth - iconWidth /*+ 48*/,
+  },
   titleNoIcon : {
     marginHorizontal : 8
   }

package/src/components/Snackbar/index.js

@@ -124,7 +124,7 @@ const Snackbar = ({
       testID={testID+"_Container"}
       {...containerProps}
       pointerEvents="box-none"
-      style={[styles.wrapper, containerPaddings,containerProps.style]}
+      style={[styles.wrapper, containerPaddings,action && theme.styles.pr1,containerProps.style]}
     >
       <Surface
         pointerEvents="box-none"

package/src/components/Table/index.js

@@ -43,7 +43,7 @@ const getOnScrollCb = (refs,pos,cb2)=>{
     return isMobileNative()? cb : debounce(cb,200);
 }
 
-const TableComponent = React.forwardRef(({containerProps,renderEmpty,renderItem,isRowSelected,headerScrollViewProps,footerScrollViewProps,scrollViewProps,showFooters,renderFooterCell,footerCellContainerProps,filterCellContainerProps,headerContainerProps,headerCellContainerProps,headerProps,rowProps:customRowProps,renderCell,cellContainerProps,hasFooters,renderHeaderCell,renderFilterCell,columnProps,getRowKey,columnsWidths,colsWidths,footerContainerProps,showFilters,columns,data,testID,...props},tableRef)=>{
+const TableComponent = React.forwardRef(({containerProps,renderListContent,children,renderEmpty,renderItem,isRowSelected,headerScrollViewProps,footerScrollViewProps,scrollViewProps,showFooters,renderFooterCell,footerCellContainerProps,filterCellContainerProps,headerContainerProps,headerCellContainerProps,headerProps,rowProps:customRowProps,renderCell,cellContainerProps,hasFooters,renderHeaderCell,renderFilterCell,columnProps,getRowKey,columnsWidths,colsWidths,footerContainerProps,showHeaders,showFilters,columns,data,testID,...props},tableRef)=>{
     containerProps = defaultObj(containerProps);
     testID = defaultStr(testID,"RN_TableComponent");
     cellContainerProps = defaultObj(cellContainerProps);
@@ -138,7 +138,7 @@ const TableComponent = React.forwardRef(({containerProps,renderEmpty,renderItem,
     React.useEffect(()=>{
         setState({...state,...prepareState()});
     },[data,columns]);
-    const emptyData = typeof renderEmpty =='function' && !Object.size(data,true)? renderEmpty() : null;
+    const emptyData = renderListContent === false ?null : typeof renderEmpty =='function' && !Object.size(data,true)? renderEmpty() : null;
     const hasEmptyData = emptyData && React.isValidElement(emptyData);
     const {visibleColumns,columns:cols,headers,footers,filters} = state;
     headerContainerProps = defaultObj(headerContainerProps);
@@ -199,10 +199,11 @@ const TableComponent = React.forwardRef(({containerProps,renderEmpty,renderItem,
         get scrollViewContext(){ return scrollViewRef.current},
         get headerScrollViewContext(){return headerScrollViewRef.current},
     }
-    const hContent = h.length ? <View testID={testID+"_Header"}{...hProps} {...headerContainerProps} style={[styles.header,headerContainerProps.style,hProps.style,f.length]}>
+    const showTableHeaders = showHeaders !== false || showFilters ;
+    const hContent = showTableHeaders &&  h.length ? <View testID={testID+"_Header"}{...hProps} {...headerContainerProps} style={[styles.header,headerContainerProps.style,hProps.style,f.length]}>
         {h}
     </View> : null,
-    fContent = f.length ? <View testID={testID+"_Footer"} {...footerContainerProps} style={[styles.header,styles.footers,footerContainerProps.style,theme.styles.pt0,theme.styles.pb0,theme.styles.ml0,theme.styles.mr0]}>
+    fContent = showTableHeaders && f.length ? <View testID={testID+"_Footer"} {...footerContainerProps} style={[styles.header,styles.footers,footerContainerProps.style,theme.styles.pt0,theme.styles.pb0,theme.styles.ml0,theme.styles.mr0]}>
         {f}
     </View> : null,
     filtersContent = fFilters.length ? <View testID={testID+"_Filters"} style={[styles.header,styles.footers,theme.styles.pt0,theme.styles.pb0,theme.styles.ml0,theme.styles.mr0]}>
@@ -241,7 +242,8 @@ const TableComponent = React.forwardRef(({containerProps,renderEmpty,renderItem,
                     </View>
                 </ScrollView>
             </RNView>
-            {hasEmptyData ? <View testID={testID+"_Empty"} style={styles.hasNotData}>
+            {renderListContent === false ? (React.isValidElement(children)? children : null) :
+                hasEmptyData ? <View testID={testID+"_Empty"} style={styles.hasNotData}>
                     {emptyData}
             </View> : <ScrollView {...scrollViewProps} scrollEventThrottle = {scrollEventThrottle} horizontal contentContainerStyle={[scrollContentContainerStyle,scrollViewProps.contentContainerStyle]} showsVerticalScrollIndicator={false}  
                 onScroll = {getOnScrollCb([headerScrollViewRef,footerScrollViewRef],null,(args)=>{
@@ -379,7 +381,7 @@ export const styles = StyleSheet.create({
     container : {
         width : '100%',
         minHeight : 300,
-        paddingBottom : 50,
+        paddingBottom : 10,
         paddingLeft : 10,
         paddingRight : 0,
         flex : 1,
@@ -497,6 +499,7 @@ TableComponent.popTypes = {
       PropTypes.func,  
       PropTypes.object
     ]),
+    renderListContent : PropTypes.bool,//si l'on devra rendre le contenu de la FlashList
     renderItem : PropTypes.func,//la fonction permettant de gérer le rendu des item
     headerScrollViewProps : PropTypes.object,
     footerScrollViewProps : PropTypes.object,