@fto-consult/expo-ui 2.21.3 → 2.23.0

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

@@ -24,7 +24,7 @@ import { StyleSheet,Dimensions,useWindowDimensions} from "react-native";
 import Preloader from "$ecomponents/Preloader";
 import Checkbox from "../Checkbox";
 import { TouchableRipple } from "react-native-paper";
-import { evalSingleValue,Footer } from "../Footer";
+import { evalSingleValue,Footer,getFooterColumnValue,isValidAggregator,extendAggreagatorFunctions} from "../Footer";
 import i18n from "$i18n";
 import { makePhoneCall,canMakePhoneCall as canMakeCall} from "$makePhoneCall";
 import copyToClipboard from "$capp/clipboard";
@@ -38,10 +38,19 @@ import View from "$ecomponents/View";
 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";
+import Chart,{getMaxSupportedSeriesSize} from "$ecomponents/Chart";
 
 const chart = "chart";
+export const donutChart = {
+    isChart : true,
+    code : 'donutChart',
+    label : 'Graphique|Circulaire',
+    icon : "chart-donut",
+    type: 'donut',
+    isDonut : true,
+    isRendable : ({displayOnlySectionListHeaders,isSectionList})=>false,//isSectionList && displayOnlySectionListHeaders,
+    tooltip : "Pour pouvoir visulaiser ce type de graphe, vous devez : grouper les données du tableau selon le criètre de votre choix, puis afficher uniquement les totaux des données groupées"
+}
 export const displayTypes = {
     table : {
         code : "table",
@@ -69,14 +78,31 @@ export const displayTypes = {
         code : 'barChart',
         label : 'Graphique|Barres',
         icon : "chart-bar",
-        type: 'bar'
+        type: 'bar',
+        isBar : true,
     },
-    /*donutChart : {
+    donutChart,
+    /*rangeChart : {
+        code : "rangeChart",
+        isChart : true,
+        label : 'Graphique|Bar Interval',
+        icon : "chart-timeline",
+        type: 'boxPlot'
+    },*/
+   /*chartBoxPlot : {
+        code : "chartBoxPlot",
+        isChart : true,
+        label : 'Graphique|Box plot',
+        icon : "chart-waterfall",
+        type: 'boxPlot'
+    },*/
+    //@see : https://apexcharts.com/docs/chart-types/treemap-chart/
+    /*treeMap : {
+        code : "treeMap",
         isChart : true,
-        code : 'donutChart',
-        label : 'Graphique|Circulaire',
-        icon : "chart-donut",
-        type: 'donut'
+        label : 'Graphique|Aborescente',
+        icon : "chart-tree",
+        type: 'treemap'
     },*/
 }
 
@@ -122,7 +148,7 @@ export default class CommonDatagridComponent extends AppComponent {
         sData.fixedTable = defaultBool(sData.fixedTable,false);
         extendObj(this.state, {
             data,
-            showFilters : this.isFilterable() && defaultBool(props.showFilters,(sData.showFilter? true : this.isPivotDatagrid())) || false,
+            showFilters : this.isFilterable() && defaultBool(props.showFilters,(sData.showFilters? true : this.isPivotDatagrid())) || false,
             showFooters : defaultBool(props.showFooters,(sData.showFooters? true : false)),
             fixedTable : sData.fixedTable
         });
@@ -171,10 +197,15 @@ export default class CommonDatagridComponent extends AppComponent {
             sectionListDataSize : {value : {current : 0}},
             enablePointerEventsRef : {value : {current:false}},
             configureSectionListSelectedValues : {value : {}},
+            ///la liste des fonctions d'aggregations supportées
+            aggregatorFunctions : {value : extendAggreagatorFunctions(this.props.aggregatorFunctions)},
             ///les types d'affichage
             displayTypes : {value : hasFoundDisplayTypes ? disTypes : Object.clone(displayTypes)},
             sectionListColumnsSize : {value : {current:0}}, //la taille du nombre d'éléments de section dans les colonnes
         }) 
+        const sessionAggregator = defaultStr(this.getSessionData("aggregatorFunction")).trim();
+        const aggregatorProps = defaultStr(this.props.aggregatorFunction).trim();
+        this.state.aggregatorFunction= aggregatorProps && isValidAggregator(this.aggregatorFunctions[aggregatorProps]) ? aggregatorProps ? isNonNullString(sessionAggregator) && isValidAggregator(this.aggregatorFunctions[sessionAggregator]) : sessionAggregator : Object.keys(this.aggregatorFunctions)[0];
         this.isLoading = this.isLoading.bind(this);
         this.getProgressBar = this.getProgressBar.bind(this);
         this.sortRef.current.dir = defaultStr(this.sortRef.current.dir,this.sortRef.current.column == "date"?"desc":'asc')
@@ -204,12 +235,17 @@ export default class CommonDatagridComponent extends AppComponent {
         this.state.filteredColumns = defaultObj(this.getSessionData("filteredColumns"+this.getSessionNameKey()),this.props.filters);
         this.filtersSelectors = {selector:this.getFilters()};
         const {sectionListColumns} = this.prepareColumns();
+        this.state.sectionListColumns = sectionListColumns;
         if(this.canHandleColumnResize()){
             this.state.columnsWidths = this.preparedColumns.widths;
         }
-        this.state.chartConfig = defaultObj(this.props.chartConfig,this.getSessionData("chartConfig"));
+        this.state.chartConfig = extendObj({},this.getSessionData("chartConfig"),this.props.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;
+        this.state.displayOnlySectionListHeaders = defaultBool(this.getSessionData("displayOnlySectionListHeaders"),this.props.displayOnlySectionListHeaders,false)
+        if(this.state.displayOnlySectionListHeaders){
+            this.state.showFooters = true;
+        }
         extendObj(this.state,this.prepareData({data}));
         const {width:windowWidth,height:windowHeight} = Dimensions.get("window");
         this.state.layout = {
@@ -254,8 +290,6 @@ export default class CommonDatagridComponent extends AppComponent {
         } else {
             this.currentDataSources = Object.toArray(this.currentDataSources);
         }
-        this.state.sectionListColumns = sectionListColumns;
-        this.state.displayOnlySectionListHeaders = defaultBool(this.getSessionData("displayOnlySectionListHeaders"),this.props.displayOnlySectionListHeaders,false)
     }
 
     /*** si une ligne peut être selectionable */
@@ -606,7 +640,7 @@ export default class CommonDatagridComponent extends AppComponent {
                 }
             }
         }
-        let footers = this.getFooterFields(true);
+        const footers = this.getFootersFields(true);
         let isAccordion = this.isAccordion();
         Object.mapToArray(columns,(headerCol1,headerIndex)=>{
             if(!isObj(headerCol1)) return;
@@ -614,6 +648,7 @@ export default class CommonDatagridComponent extends AppComponent {
             if(isAccordion && headerCol.accordion === false) return null;
             let header = {...headerCol};
             header.field = defaultStr(header.field, headerIndex)
+            header.type = defaultStr(header.jsType,header.type,"text").toLowerCase();
             /**** pour ignorer une colonne du datagrid, il suffit de passer le paramètre datagrid à false */
             if(!isNonNullString(header.field) || header.datagrid === false) {
                 return;
@@ -624,7 +659,7 @@ export default class CommonDatagridComponent extends AppComponent {
             this.state.columns[header.field] = header;
             /*** les pieds de pages sont les données de type decimal, où qu'on peut compter */
             if(header.footer !== false && ((arrayValueExists(['decimal','number','money'],header.type) && header.format) || header.format == 'money' || header.format =='number')){
-                footers[header.field] = header;
+                footers[header.field] = Object.clone(header);
             }
             if(!this.hasColumnsHalreadyInitialized){
                 this.initColumnsCallback({...header,colIndex,columnField:header.field});
@@ -632,12 +667,12 @@ export default class CommonDatagridComponent extends AppComponent {
         })
         return footers;
     }
-    getFooterFields(init){
+    getFootersFields(init){
         this[this.footerFieldName] = init === true ? {} : defaultObj(this[this.footerFieldName]);
         return this[this.footerFieldName];
     }
-    hasFooterFields(){
-        return Object.size(this.getFooterFields(),true) ? true : false;
+    hasFootersFields(){
+        return Object.size(this.getFootersFields(),true) ? true : false;
     }
     getActionsArgs(selected){
         const r = isObj(selected)? selected : {};
@@ -948,7 +983,7 @@ export default class CommonDatagridComponent extends AppComponent {
        this.isUpdating = true;
        this.setState( {showFilters:true},()=>{
            this.isUpdating = false;
-           this.setSessionData({showFilter:true});
+           this.setSessionData({showFilters:true});
        })
    }
   hideFilters (){
@@ -959,12 +994,12 @@ export default class CommonDatagridComponent extends AppComponent {
        if(this.isUpdating) return false;
        this.setState({showFilters:false},()=>{
             this.isUpdating = false;
-            this.setSessionData({showFilter:false})
+            this.setSessionData({showFilters:false})
        })
    }
 
     toggleFooters(showOrHide){
-        if(typeof showOrHide !=='boolean' || this.state.showFooters === showOrHide) return;
+        if(typeof showOrHide !=='boolean' || this.canShowFooters() === showOrHide) return;
         if(!this._isMounted()) {
             this.isUpdating = false;
             return;
@@ -1030,7 +1065,7 @@ export default class CommonDatagridComponent extends AppComponent {
         if(!isNonNullString(field)) return;
         let columns = {...this.state.columns};
         columns[field].visible = !columns[field].visible;
-        let footers = this.getFooterFields();
+        let footers = this.getFootersFields();
         if(isObj(footers[field])){
             footers[field].visible = columns[field].visible;
         }
@@ -1039,6 +1074,10 @@ export default class CommonDatagridComponent extends AppComponent {
             if(removeFocus) document.body.click();
         });
    }
+   /****le nombre maximum de courbes supportées */
+   getMaxSeriesSize(){
+        return getMaxSupportedSeriesSize();
+   }
    prepareFilter(props,filteredColumns){
         filteredColumns.push(props);
    }
@@ -1064,7 +1103,7 @@ export default class CommonDatagridComponent extends AppComponent {
    /*** 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")
+        const format = defaultStr(defaultObj(this.configureSectionListSelectedValues[column.field]).format,column.format,"dd/mm/yyyy")
         return new Promise((resolve,reject)=>{
             DialogProvider.open({
                 title : 'Format de date',
@@ -1126,19 +1165,20 @@ export default class CommonDatagridComponent extends AppComponent {
         const {sectionListColumns} = this.prepareColumns({sectionListColumns:{}});
         this.setIsLoading(true,()=>{
             this.prepareData({data:this.INITIAL_STATE.data,sectionListColumns},(state)=>{
-                this.setState({...state,sectionListColumns},()=>{
+                this.setState({...state,sectionListColumns,displayOnlySectionListHeaders:false},()=>{
                     this.setIsLoading(false,false);
                     this.setSessionData("sectionListColumns",null);
+                    this.setSessionData("displayOnlySectionListHeaders",false);
                 });
             });
         },true);
    }
    canDisplayOnlySectionListHeaders(){
-        return this.hasFooterFields() && this.isSectionList() && this.hasSectionListData();
+        return this.hasFootersFields() && this.isSectionList() && this.hasSectionListData();
    }
    /*** si l'on peut rendre le contenu de type graphique */
    isChartRendable(){
-     return !this.isPivotDatagrid() && this.hasFooterFields();
+     return !this.isPivotDatagrid() && this.hasFootersFields();
    }
    isValidChartConfig(config){
         config = defaultObj(config,this.state.chartConfig);
@@ -1165,12 +1205,14 @@ export default class CommonDatagridComponent extends AppComponent {
             },true)
         } else {
             const cb = (chartConfig)=>{
-                this.setIsLoading(true,()=>{
-                    this.setState({chartConfig,displayType},()=>{
-                        this.setIsLoading(false,false);
-                        this.persistDisplayType(displayType);
-                    })
-                },true);
+                setTimeout(()=>{
+                    this.setIsLoading(true,()=>{
+                        this.setState({chartConfig,displayType},()=>{
+                            this.setIsLoading(false,false);
+                            this.persistDisplayType(displayType);
+                        })
+                    },true);
+                },200);
             }
             if(!this.isValidChartConfig()){
                 return this.configureChart(false).then((chartConfig)=>{
@@ -1180,21 +1222,79 @@ export default class CommonDatagridComponent extends AppComponent {
             cb({...this.state.chartConfig});
         }
    }
+   getActiveAggregatorFunction(){
+        if(isNonNullString(this.state.aggregatorFunction) && this.aggregatorFunctions[this.state.aggregatorFunction]){
+            return this.aggregatorFunctions[this.state.aggregatorFunction]
+        }
+        return this.aggregatorFunctions[Object.keys(this.aggregatorFunctions)[0]];
+   }
+   /**** récupère l'item de menu permettant lié à la sélection de la fonction d'aggggrégation */
+   getAggregatorFunctionsMenuItems(withDivider){
+        if(!this.hasFootersFields()) return [];
+        const m = [];
+        const aggregatorFunction = this.getActiveAggregatorFunction().code;
+        Object.map(this.aggregatorFunctions,(ag)=>{
+            const active = ag.code == aggregatorFunction;
+            m.push({
+                ...ag,
+                icon : active?"check":null,
+                onPress : active ? undefined : ()=>{
+                    this.toggleActiveAggregatorFunction(ag);
+                }
+            })
+        });
+        if(m.length){
+            m.unshift({
+                text : "Fonctions d'aggrégation",
+                icon : "material-functions",
+                divider : true,
+            });
+            if(withDivider !== false){
+                m.unshift({divider:true});
+            }
+            if(withDivider !== false){
+                m[m.length-1].divider = true;
+            }
+        }
+        return m;
+   }
+   toggleActiveAggregatorFunction(ag){
+        if(!isValidAggregator(ag) || ag.code == this.state.aggregatorFunction) return null;
+        setTimeout(()=>{
+            this.setIsLoading(true,()=>{
+                this.prepareData({data:this.INITIAL_STATE.data},(state)=>{
+                    this.setState({...state,aggregatorFunction:ag.code},()=>{
+                        this.setSessionData("aggregatorFunction",ag.code);
+                        this.setIsLoading(false,false);
+                    })
+                })
+            },true);
+        },200);
+   }
+   renderAggregatorFunctionsMenu(){
+        const m = this.getAggregatorFunctionsMenuItems(false,false);
+        if(!m.length) return null;
+        return <Menu
+            items = {m}
+            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 = {(p)=><Icon name="material-functions" {...p}/>}
+        />
+   }
    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;
+                } else {
+                    xItems[f] = field;
                 }
             }
         });
@@ -1215,6 +1315,7 @@ export default class CommonDatagridComponent extends AppComponent {
             DialogProvider.open({
                 title : 'Configuration des graphes',
                 subtitle : false,
+                data : this.getCharConfig(),
                 fields : {
                     x : {
                         text : 'Axe des x[horizontal]',
@@ -1232,20 +1333,33 @@ export default class CommonDatagridComponent extends AppComponent {
                         defaultValue : config.y,
                         onValidatorValid,
                     },
-                    series : hasSeries && {
+                    series : {
                         text : 'Series',
                         type : "select",
                         items : series,
                         multiple : true,
                     },
-                    aggregatorFunction : {
-                        type  : 'select',
-                        text : "Foncton d'aggrégation",
-                        required : true, 
-                        multiple : false,
-                        defaultValue : "sum",
-                        items : aggregatorFunctions,
-                    }
+                    sectionListHeadersSeries : {
+                        text : "Series des données groupées",
+                        type : "select",
+                        items : yItems,
+                        multiple : true,
+                    },
+                    stacked : {
+                        type : 'switch',
+                        text : "Graphe empilé?",
+                        disabled : this.state.displayType !== "barChart",
+                        checkedValue : true,
+                        uncheckedValue : false,
+                    },
+                    title : {
+                        text : "Titre du graphe",
+                        format :'hashtag',
+                    },
+                    titleColor: {
+                        text : "Couleur de titre",
+                        type :"color",
+                    },
                 },
                 actions : [
                     {
@@ -1270,15 +1384,24 @@ export default class CommonDatagridComponent extends AppComponent {
    getCharConfig(){
       return defaultObj(this.state.chartConfig);
    }
+   getChartIsRendableArgs(){
+        return {
+            context:this,isSectionList:this.isSectionList(),hasSectionListData:this.hasSectionListData(),
+            data : this.state.data,
+            displayOnlySectionListHeaders : this.canDisplayOnlySectionListHeaders(),
+        };
+   }
    renderDisplayTypes(){
         const m = [];
         let activeType = null,hasFoundChart = false,hasFoundTable = false;
         const hasConfig = this.isValidChartConfig();
         Object.map(this.displayTypes,(type,k)=>{
+            let isChartDisabled = false;
             if(type.isChart === true ) {
                 if(!this.isChartRendable()){
                     return null;
                 }
+                isChartDisabled = typeof type.isRendable =='function' && type.isRendable(this.getChartIsRendableArgs()) === false ? true : false;
                 if(!hasFoundChart){
                     if(hasFoundTable){
                         m.push({divider:true});
@@ -1288,7 +1411,16 @@ export default class CommonDatagridComponent extends AppComponent {
                         divider : true,
                         text : "Configurer les graphes",
                         icon :"material-settings",
-                        onPress : this.configureChart.bind(this)
+                        onPress : ()=>{
+                            this.configureChart(false).then((chartConfig)=>{
+                                this.setIsLoading(true,()=>{
+                                    this.setState({chartConfig},()=>{
+                                        this.setSessionData("chartConfig",chartConfig);
+                                        this.setIsLoading(false,false);
+                                    });
+                                },true)
+                            })
+                        }
                     });
                 }
             } else if(k === 'table'){
@@ -1304,7 +1436,7 @@ export default class CommonDatagridComponent extends AppComponent {
                 right : <>
                     {active ? <Icon color={theme.colors.primaryOnSurface} name="check"/>: null}
                 </>,
-                disabled : type.isChart && !hasConfig ? true : undefined,
+                disabled : isChartDisabled || type.isChart && !hasConfig ? true : undefined,
                 onPress:()=>{
                     this.setDisplayType(type); 
                 }
@@ -1329,105 +1461,242 @@ export default class CommonDatagridComponent extends AppComponent {
    getEmptyDataValue(){
         return "N/A";
    }
+   /*** retourne les sectionHeaderSeries par défautt */
+   getDefaultSectionHeadersSeries(){
+      if(!this.isSectionList() || !this.hasFootersFields()) return [];
+      const footersFields = this.getFootersFields();
+      const r = [],max = this.getMaxSeriesSize();
+      let counter = 0;
+      for(let i in footersFields){
+            const footer = footersFields[i];
+            if(!isObj(footer)) continue;
+            if(counter >= max) break;
+            r.push(i);
+      }
+      return r;
+   }
+   formatChartDataValue({value,column,options}){
+        return value;
+   }
+   /***** 
+    *   retourne les paramètres à passer au chart, lorsque les données sont groupées, ie les sectionsListColumns est non nulle
+    *   @param {object} de la forme suivante : 
+    *       @param {object} chartType le type de chart, l'un des types du tableau displayTypes en haut du présent fichier
+    *       @param {object} yAxisColumn la colonne de l'axe vertical y
+    *       @param {object} xAxisColumn la colonne de l'axe des x de la courbe, pris dans les configurations du chart, chartConfig
+    *       @param {object} la fonction d'aggrégation, l'une des fonctions issues des fonctions d'aggrégations aggregatorsFuncions, @see : dans $components/Datagrid/Footer
+    *   en affichage des tableaux de type sectionList, seul les colonnes de totalisation sont utilisées pour l'affichage du graphe
+    *   Le nombre de graphes (series) à afficher est valable pour tous les graphes sauf les graphes de type pie/donut. 
+    *   il est récupéré dans la variable chartConfig des configuration du chart, où par défaut le nombre de colonnes de totalisation des tableau (inférieur au nombre maximum de courbes surpportées par appexchart)
+    */
+   getSectionListHeadersChartOptions({chartType,yAxisColumn,xAxisColumn,aggregatorFunction}){
+        if(!this.isSectionList()) return null;
+        if(!isObj(chartType) || !isObj(yAxisColumn) || !yAxisColumn.field) return null;
+        if(!isValidAggregator(aggregatorFunction)){
+            aggregatorFunction = this.getActiveAggregatorFunction();
+        }
+        const code = aggregatorFunction.code;
+        const isDonut = chartType.isDonut || chartType.isRadial;
+        const config = this.getCharConfig();
+        //@see : https://apexcharts.com/docs/series/
+        ///lorsqu'on affiche uniquement les totaux des sections, alors la visualition se fait sur uniquement sur la base des valeurs
+        ///on parcoure uniquement les entêtes des sectionLis
+        const dataIndexes={},dataInexesNames = {};
+        //la variable sectionListHeaderSeries, permet de récupérer les colonnes de type montant à utiliser pour le rendu du chart
+        let serieName = "";
+        const tableFooters = this.getFootersFields();
+        const defaultSectionListHeadersSeries = this.getDefaultSectionHeadersSeries();
+        let seriesConfig = isDonut ? [] : Array.isArray(config.sectionListHeadersSeries) && config.sectionListHeadersSeries.length ? config.sectionListHeadersSeries : [];
+        if(!isDonut){
+            if(seriesConfig.length){
+                const ss = [];
+                seriesConfig.map((s)=>{
+                    if(!isNonNullString(s) || !tableFooters[s]) return null;
+                    ss.push(s);
+                });
+                seriesConfig = ss;
+            }
+            if(!seriesConfig.length){
+                seriesConfig = defaultSectionListHeadersSeries;
+            }
+        }
+        /**** boucle sur chaque éléments trouvée dans le tableau des données sectionListData */
+        const loopForFooter = ({column,serieName,footers,header})=>{
+            if(!isObj(column) || !isObj(footers)) return null;
+            if(!isObj(footers[column.field])) return null;
+            const footer = footers[column.field]
+            if(typeof footer[code] !== 'number') return null;
+            const label = defaultStr(footer.label,footer.text,footer.field);
+            if(typeof footer[code] !== 'number') return null;
+            if(isDonut){
+                serieName = label;
+                dataIndexes[header] = footer[code];
+            } else {
+                dataIndexes[serieName] = defaultArray(dataIndexes[serieName]);
+                dataIndexes[serieName].push({x:header,y:footer[code]});
+            }
+        }
+        Object.map(this.sectionListData,(data,header)=>{
+            if(!isObj(this.sectionListHeaderFooters[header])) return null;
+            const footers = this.sectionListHeaderFooters[header];
+            if(isDonut){
+                loopForFooter({footers,header,column:yAxisColumn})
+            } else {
+                seriesConfig.map((s)=>{
+                    const serie = this.state.columns[s];
+                    const serieName = defaultStr(s.label,s.text,s);
+                    loopForFooter({footers,serie,serieName,header,column:tableFooters[s]})
+                })
+            }
+        });
+        if(isDonut){
+            const series = [],labels = [];
+            Object.map(dataIndexes,(serie,index)=>{
+                series.push(serie);
+                labels.push(index);
+            });
+            return {
+                series,
+                labels,
+            }
+        } else {
+            const series = [];
+            Object.map(dataIndexes,(data,name)=>{
+                series.push({name,data});
+            });
+            return {
+                series
+            }
+        }
+   }
    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;
+        if(typeof chartType.isRendable =='function' && chartType.isRendable(this.getChartIsRendableArgs()) === false) {
+            console.warn("impossible d'afficher le graphe de type ",chartType.label," car le type de données requis pour le rendu de ce graphe est invalide")
+            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();
+        const yAxisColumn = this.state.columns[config.y];
+        const type = defaultStr(yAxisColumn.jsType,yAxisColumn.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;
+        let seriesConfig = Array.isArray(config.series) && config.series.length ? config.series : [yAxisColumn.field];
+        const snConfig = [];
+        Object.map(seriesConfig,(s,v)=>{
+            if(!isNonNullString(s) || !this.state.columns[s]) return null;
+            snConfig.push(s);
+        });
+        seriesConfig = snConfig.length> 0 ? snConfig : [yAxisColumn.field];
+        let xAxisColumn = 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;
+            xAxisColumn = this.state.columns[config.x];
         }
+        const aggregatorFunction = this.getActiveAggregatorFunction().eval;
         const emptyValue = this.getEmptyDataValue();
-        const indexes = {}
+        const indexes = {};
+        let series = [],xaxis = {},customConfig = {};
         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,
+        if(!this.isSectionList()){
+            this.state.data.map((data,index)=>{
+                if(!isObj(data))return null;
+                const txt = this.renderRowCell({
+                    data,
+                    rowData : data,
+                    rowCounterIndex : index,
+                    rowIndex : index,
+                    columnDef : xAxisColumn,
+                    renderRowCell : false,
+                    columnField : xAxisColumn.field,
+                });
+                const text = isNonNullString(txt)? txt : emptyValue;
+                Object.map(seriesConfig,(s,v)=>{
+                    if(!isNonNullString(s) || !this.state.columns[s]) return null;
+                    const columnDef = this.state.columns[s];
+                    if(!isObj(columnDef)) return null;
+                    indexes[s] = defaultObj(indexes[s]);
+                    const current = indexes[s];
+                    current[text] =  typeof current[text] =="number"? current[text] : 0;
+                    const value = getFooterColumnValue({data,columnDef,columnField:columnDef.field});
+                    const rArgs = aggregatorFunction =='average'?{sum:current[text]+value,count:count+1} : {};
+                    current[text] = aggregatorFunction({value,total:current[text],data,columnDef,columnField:columnDef.field,count,...rArgs});
+                });
             });
-            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,
+            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,
                 })
             })
-            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 {
+            const configs = this.getSectionListHeadersChartOptions({chartType,aggregatorFunction,xAxisColumn,yAxisColumn});
+            if(isObj(configs)){
+                const {series :customSeries,xaxis:customXaxis,...rest} = configs;
+                series = Array.isArray(customSeries) ? customSeries : series;
+                xaxis = isObj(customXaxis)? customXaxis : xaxis;
+                customConfig = rest;
             } else {
-                 maxHeight = diff;
+                return null;
             }
         }
-        const chartProps = defaultObj(chartProps);
+        customConfig = defaultObj(customConfig);
+        customConfig.chart = defaultObj(customConfig.chart);
+        const chartProps = extendObj(true,{},this.props.chartProps,customConfig);
+        if(chartType.isBar){
+            chartProps.chart.stacked = !!config.stacked;
+        } else chartProps.chart.stacked = undefined;
         return <Chart
             options = {{
-                ...defaultObj(chartProps.options),
+                ...chartProps,
+                title : {
+                    text: defaultStr(config.title,chartProps.title),
+                    align: 'left',
+                    //margin: 10,
+                    //offsetX: 0,
+                    //offsetY: 0,
+                    //floating: false,
+                    style: {
+                      //fontSize:  '14px',
+                      //fontWeight:  'bold',
+                      //fontFamily:  undefined,
+                      color: theme.Colors.isValid(config.titleColor)?config.titleColor : undefined,
+                    },
+                },
                 series,
                 chart : {
                     height :350,
-                    maxHeight,
                     ...defaultObj(chartProps.chart),
                     type : chartType.type,
                 },
                 xaxis: {
                     ...defaultObj(chartProps.xaxis),
-                    type: 'category'
+                    type: 'category',
+                    ...defaultObj(xaxis)
                 }
             }}
         />
    }
+   canShowFooters(){
+      return this.state.showFooters || this.hasSectionListData() && this.state.displayOnlySectionListHeaders;
+   }
+   canShowFilters(){
+        return this.state.showFilters
+   }
    toggleDisplayOnlySectionListHeaders(){
         if(!this.canDisplayOnlySectionListHeaders()) return
         setTimeout(()=>{
@@ -1532,7 +1801,6 @@ 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;
             
@@ -1588,9 +1856,13 @@ export default class CommonDatagridComponent extends AppComponent {
                     sortedColumn.header = header;
                     sortedColumn.label = restCol.label;
                     const isDesc = currentSortedColumn.dir === "desc";
+                    const sortDir = isDesc ? "descending" : "ascending";
                     const prefix = (sortType =='number' || sortType == 'decimal') ? "numeric" : sortType =='boolean'?'bool' : sortType.contains('date') ? 'calendar': sortType =='time'? 'clock' : 'alphabetical'; 
-                    sortedColumn.icon = 'sort-'+prefix+'-'+(isDesc ? "descending" : "ascending");
+                    sortedColumn.icon = 'sort-'+prefix+'-'+sortDir;
                     sortedColumn.title = (isDesc ? "Trié par ordre décroissant":"Trié par ordre croissant ")+ " du champ ["+restCol.label+"]";
+                    if(sortType.contains('date') || sortType.contains("time")){
+                        sortedColumn.title = "le champ {0} est actuellement trié du plus {1} au plus {2}".sprintf(restCol.label,isDesc?"récent":"ancien",isDesc?"ancien":"récent")
+                    } 
                 }      
                 sortedColumns[field] = restCol.label;
                 sortedColumnsLength++;
@@ -1660,15 +1932,15 @@ export default class CommonDatagridComponent extends AppComponent {
                         ...header,
                          width,
                          type,
+                         ...sListColumns[field],
                          ...defaultObj(this.configureSectionListSelectedValues[field]),
-                        ...sListColumns[field],
                     };///les colonnes de sections
                     this.sectionListColumnsSize.current++;
                 }
                 const mItem = {
+                    ...header,
                     field,
                     type,
-                    format,
                     onPress : ()=>{
                         this.toggleColumnInSectionList(field);
                         return false;
@@ -1679,9 +1951,9 @@ export default class CommonDatagridComponent extends AppComponent {
                 if(this.isSectionListColumnConfigurable(mItem)){
                     mItem.right = (p)=>{
                         return <Icon name="material-settings" {...p} onPress={(e)=>{
-                            React.stopEventPropagation(e);
+                            //React.stopEventPropagation(e);
                             this.configureSectionListColumn(mItem);
-                            return false;
+                            //return false;
                         }}/>
                     }
                 }
@@ -1748,11 +2020,25 @@ export default class CommonDatagridComponent extends AppComponent {
         let isArr = Array.isArray(data);
         //let push = (d,index) => isArr ? newData.push(d) : newData[index] = d;
         const hasLocalFilter = this.props.filters !== false && this.hasLocalFilters;
-        let footersColumns = this.getFooterFields(),hasFooterFields = this.hasFooterFields();
-        const canUpdateFooters = !!(updateFooters !== false && hasFooterFields);
+        const footersColumns = this.getFootersFields(),hasFootersFields = this.hasFootersFields();
+        const canUpdateFooters = !!(updateFooters !== false && hasFootersFields);
         this.hasFoundSectionData.current = false;
         this.sectionListDataSize.current = 0;
         const isSList = this.isSectionList(sectionListColumns);
+        if(this.canAutoSort() && isNonNullString(this.sortRef.current.column)){
+            if(isObj(this.state.columns) && this.state.columns[this.sortRef.current.column]){
+                let field = this.state.columns[this.sortRef.current.column];
+                const sortConfig = Object.assign({},this.sortRef.current);
+                sortConfig.getItem = (item,columnName,{getItem})=>{
+                    if(isObj(item) && (field.type =='decimal' || field.type =="number")){
+                        const v = item[columnName];
+                        return isDecimal(v)? v : isNonNullString(v)? parseDecimal(v) : 0;
+                    }
+                    return getItem(item,columnName);
+                }
+                data = sortBy(data,sortConfig);//on trie tout d'abord les données
+            }
+        }
         if(hasLocalFilter || !isArr || canUpdateFooters || isSList) {
             if(canUpdateFooters){
                 this.___evaluatedFootersValues = {}
@@ -1765,10 +2051,12 @@ export default class CommonDatagridComponent extends AppComponent {
                 Object.map(this.sectionListData,(v,i)=>{
                     delete this.sectionListData[i];
                 });
-                //on réinnitialise tous les footes
-                Object.map(this.sectionListHeaderFooters,(v,i)=>{
-                    delete this.sectionListHeaderFooters[i];
-                })
+                if(canUpdateFooters){
+                    //on réinnitialise tous les footes
+                    Object.map(this.sectionListHeaderFooters,(v,i)=>{
+                        delete this.sectionListHeaderFooters[i];
+                    })
+                }
             }
             let currentSectionListFooter = null;
             const sectionListData = this.sectionListData;//l'ensemble des données de sectionList
@@ -1791,6 +2079,7 @@ export default class CommonDatagridComponent extends AppComponent {
                     }
                     sectionListData[r].push(d); 
                     if(canUpdateFooters){
+                        ///garde pour chaque éléments de groue, la valeur des champs de son footer
                         this.sectionListHeaderFooters[r] = defaultObj(this.sectionListHeaderFooters[r]);
                         currentSectionListFooter = this.sectionListHeaderFooters[r];
                     }
@@ -1802,7 +2091,7 @@ export default class CommonDatagridComponent extends AppComponent {
                         result.push(currentSectionListFooter);
                     }
                     Object.map(footersColumns,(columnDef,field)=>{
-                        evalSingleValue({data:d,columnDef,field,result,displayLabel:false})
+                        evalSingleValue({data:d,aggregatorFunction:this.getActiveAggregatorFunction(),aggregatorFunctions:this.aggregatorFunctions,columnDef,field,result,displayLabel:false})
                     });
                 }
                 newData.push(d);
@@ -1810,20 +2099,6 @@ export default class CommonDatagridComponent extends AppComponent {
             });
             data = newData;
         } 
-        if(this.canAutoSort() && isNonNullString(this.sortRef.current.column)){
-            if(isObj(this.state.columns) && this.state.columns[this.sortRef.current.column]){
-                let field = this.state.columns[this.sortRef.current.column];
-                const sortConfig = Object.assign({},this.sortRef.current);
-                sortConfig.getItem = (item,columnName,{getItem})=>{
-                    if(isObj(item) && (field.type =='decimal' || field.type =="number")){
-                        const v = item[columnName];
-                        return isDecimal(v)? v : isNonNullString(v)? parseDecimal(v) : 0;
-                    }
-                    return getItem(item,columnName);
-                }
-                data = sortBy(data,sortConfig);//on trie tout d'abord les données
-            }
-        }
         this.INITIAL_STATE.data = data;
         if(this.hasFoundSectionData.current){
             data = [];
@@ -1905,7 +2180,7 @@ export default class CommonDatagridComponent extends AppComponent {
             }
         }
         let cells = null;
-        if(this.state.showFooters && isObj(this.sectionListHeaderFooters[key])){
+        if(this.canShowFooters() && isObj(this.sectionListHeaderFooters[key])){
             const {visibleColumnsNames,widths} = defaultObj(this.preparedColumns);
             if(isObj(visibleColumnsNames) &&isObj(widths)){
                 cells = [];
@@ -1927,6 +2202,8 @@ export default class CommonDatagridComponent extends AppComponent {
                                 key = {key}
                                 testID={testID+"_FooterItem_"+key}
                                 {...footer}
+                                aggregatorFunction = {this.getActiveAggregatorFunction().code}
+                                aggregatorFunctions = {this.aggregatorFunctions}
                                 displayLabel = {false}
                                 //anchorProps = {{style:[theme.styles.ph1,theme.styles.mh05]}}
                             />  
@@ -2258,10 +2535,18 @@ export default class CommonDatagridComponent extends AppComponent {
     getMaxSelectedRows(){
         return 0;
     }
+    ///retourne la longueur réelle du nombre d'éléments du tableau en excluant les valerus d'entêtes de section
+    getStateDataSize(includeSectionListDataSize){
+        const dSize = defaultNumber(this.state.data.length);
+        if(!dSize) return 0;
+        if(includeSectionListDataSize === false) return dSize;
+        return Math.max(dSize - this.getSectionListDataSize(),0);
+    }
     getMaxSelectableRows(){
         let max = this.getMaxSelectedRows();
-        if(this.state.data && typeof this.state.data.length ==='number'){
-            max = max ? Math.min(max,this.state.data.length,max) : this.state.data.length;
+        const dataSize = this.getStateDataSize();
+        if(dataSize){
+            max = max ? Math.min(max,dataSize,max) : dataSize;
         }
         return Math.max(max-this.getSectionListDataSize(),0);
     }
@@ -2865,10 +3150,14 @@ CommonDatagridComponent.propTypes = {
         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
+        /**** les series à utiliser pour l'affichage des données lorsque les colonnes sont groupées, ie les montant de totalisation sont utilisés */
+        sectionListHeadersSeries : PropTypes.arrayOf([PropTypes.string]),
     }),
     displayType : chartDisplayType,
     /*** les types d'afichates supportés par l'application */
-    displayTypes : PropTypes.arrayOf(chartDisplayType) 
+    displayTypes : PropTypes.arrayOf(chartDisplayType),
+    /***le code de la fonction d'aggregation à utilier par défaut, dans la liste des fonctions d'aggrégations du composant */
+    aggregatorFunction : PropTypes.string,
 }
 
 const styles = StyleSheet.create({