@fto-consult/expo-ui 2.21.3 → 2.23.0

package/appConfig.txt

@@ -0,0 +1,14 @@
+// Copyright 2022 @fto-consult/Boris Fouomene. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+/**** l'ENSEMBLE DES CONFIGURATIONS SUPPORTES, fichier appConfig***/
+
+ {
+
+    /*** le nombre maximal de courbes qu'on peut afficher sur le même graphe***/
+    maxSupportedChartSeries {number}
+
+    /***les fonctions d'aggregations du datagrid**/
+    datagridAggregatorFunctions : {objectOf({code:{string},label:{string},eval:{function}})|| arrayOf({code:{string},label:{string},eval:{function}})}
+ }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.21.3",
+  "version": "2.23.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {

package/src/components/Chart/appexChart/index.js

@@ -10,7 +10,9 @@ const AppexChartComponent = React.forwardRef(({chartContext,options,...props},re
       return ()=>{
         if (chartContext.current && typeof chartContext.current.destroy === 'function') {
           setTimeout(()=>{
-            try {chartContext.current.destroy();} catch{}
+            try {
+              if(typeof chartContext.current?.destroy =='function') chartContext.current.destroy();
+            } catch{}
           },1000);
         }
       }

package/src/components/Chart/index.js

@@ -1,10 +1,11 @@
 import React from '$react'
 import PropTypes from 'prop-types'
 import {defaultStr,defaultVal,extendObj,defaultObj,uniqid,defaultNumber} from "$utils";
-import {extend} from "./utils"
 import stableHash from 'stable-hash';
 import Chart from "./appexChart";
 
+export * from "./utils";
+
 /**** pour le rendu webview chart, voir : https://github.com/flexmonster/react-native-flexmonster/blob/master/src/index.js */
 /**** le composant Chart s'appuie sur le composant appexChart : https://apexcharts.com/ 
  * pour le formattage des date, voir : https://apexcharts.com/docs/datetime/
@@ -16,35 +17,23 @@ import Chart from "./appexChart";
  *  options {number} - les options supplémentaires au chart
  * 
 */
-const ChartComponent = React.forwardRef(({options,height,width,chartId,testID,webViewProps, ...props },ref)=>{
+const ChartComponent = React.forwardRef(({options:customOptions,height,width,chartId,testID,webViewProps, ...props },ref)=>{
   const chartContext = React.useRef(null);
-  options = defaultObj(options);
-  const series = options.series;
+  const {series,xaxis:customXaxis,...options} = customOptions;
+  const xaxis = defaultObj(customXaxis);
   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);
-  const prevSeries = React.usePrevious(series,JSON.stringify);
-  /***change size chart, @see : https://apexcharts.com/docs/chart-types/line-chart/ */
-  options.xaxis = defaultObj(options.xaxis);
-  options.xaxis.stroke = defaultObj(options.xaxis.stroke);
-  options.xaxis.stroke.width = defaultNumber(options.xaxis.stroke.width,2);
-  options.xaxis.stroke.height = defaultNumber(options.xaxis.height,1);
-
-  console.log(options,' is optssss');
+  options.xaxis = xaxis;
+  options.series = series;
   React.useEffect(()=>{
     if(chartContext.current && chartContext.current.updateOptions){
-        if((prevSeries == series) || width != prevWidth || height != prevHeight){
-            chartContext.current.updateOptions(options);
-        } else if(prevOptions != options){
-            chartContext.current.updateSeries(series);
-        } 
+        chartContext.current.updateOptions(options);
     }
-  },[stableHash({options,series,width,height})])
+  },[stableHash(options)])
   return <Chart {...props} options={options} chartId={chartIdRef.current} chartContext={chartContext} testID={testID} ref={ref}/>
 });
 

package/src/components/Chart/utils.js

@@ -1,25 +1,14 @@
 // Copyright 2022 @fto-consult/Boris Fouomene. All rights reserved.
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
-import {isObj} from "$utils";
-export function extend (target,source){
-    const output = Object.assign({}, target);
-    if (isObj(target) && isObj(source)) {
-      Object.keys(source).forEach((key) => {
-        if (isObj(source[key])) {
-          if (!(key in target)) {
-            Object.assign(output, {
-              [key]: source[key]
-            })
-          } else {
-            output[key] = this.extend(target[key], source[key])
-          }
-        } else {
-          Object.assign(output, {
-            [key]: source[key]
-          })
-        }
-      })
-    }
-    return output
+import {isObj,defaultNumber} from "$utils";
+import appConfig from "$app/config";
+
+/*** retourne le nombre maximal de courbes pouvant s'afficher sur un même graphe
+ * exempt  du graphe de type pie/donut
+ * par défaut, on peut afficher au maximum 5 courbes sur le même graphe
+ */
+export const getMaxSupportedSeriesSize = ()=>{
+   const m = defaultNumber(appConfig.get("maxSupportedChartSeries"));
+   return m > 3 ? m : 5;
 }

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

@@ -263,13 +263,13 @@ const DatagridFactory = (Factory)=>{
                  this.isUpdating = false;
                  return;
             }
-            this.setSessionData({showFilter:true});
+            this.setSessionData({showFilters:true});
         }
         hideFilters (){
             if(!this._isMounted()) {
                return;
             }
-            this.setSessionData({showFilter:false});
+            this.setSessionData({showFilters:false});
         } 
         toggleFilterColumnVisibility(field,visible){
             if(!isNonNullString(field)) return;
@@ -344,7 +344,7 @@ const DatagridFactory = (Factory)=>{
             } = this.props
             chartContainerProps = defaultObj(chartContainerProps);
             const canRenderChart = this.canRenderChart();
-            const hasData = this.state.data.length ? true : false;
+            const hasData = this.getStateDataSize(false) ? true : false;
             testID = defaultStr(testID,"RN_DatagridAccordion");
             backToTopProps = defaultObj(backToTopProps);
             accordionProps = defaultObj(accordionProps);
@@ -399,7 +399,8 @@ const DatagridFactory = (Factory)=>{
             let exportTableProps = this.getExportableProps();
     
             filter = defaultFunc(filter,x=>true);
-            let {showFilters,showFooters} = this.state;
+            const showFooters = this.canShowFooters();
+            const showFilters = this.canShowFilters();
             let max = this.getMaxSelectableRows();
             let restItems = [];
             
@@ -438,13 +439,13 @@ const DatagridFactory = (Factory)=>{
                 filteredColumns,
                 filters :headerFilters,
             } = this.preparedColumns;
-            const hasFooterFields = this.hasFooterFields();
+            const hasFootersFields = this.hasFootersFields();
             const datagridHeader = <View testID={testID+"_HeaderContainer"} pointerEvents={pointerEvents} style={[styles.datagridHeader]}>
                 <ScrollView testID={testID+"_HeaderScrollView"} horizontal contentContainerStyle={StyleSheet.flatten([styles.contentContainerStyle,styles.minW100])}>
                     <View testID={testID+"_HeaderContentCntainer"} style={[styles.table,styles.pullRight]}>
                         {dbSelector}
                         <View testID={testID+"_HeaderQueryLimit"} style={[styles.paginationItem]}>
-                            {this.renderQueryLimit(this.state.data.length.formatNumber())}
+                            {this.renderQueryLimit(this.getStateDataSize().formatNumber())}
                         </View>
                         {this.renderCustomPagination()}
                         {sortedColumnsLength ? <View testID={testID+"_HeaderSortedColumns"} style={[styles.sortableItems,styles.paginationItem,{paddingRight:10}]}>
@@ -513,11 +514,12 @@ const DatagridFactory = (Factory)=>{
                                         items : visibleColumns,
                                         closeOnPress : false,
                                     } : null,
-                                    !canRenderChart && hasFooterFields ? {
+                                    !canRenderChart && hasFootersFields ? {
                                         onPress :  ()=>{this.toggleFooters(!showFooters)}    
                                         ,icon :  showFooters?'view-column':'view-module'
-                                        ,text : (showFooters?'Masquer/Ligne des totaux':'Afficher/Ligne des totaux')
+                                        ,text : (showFooters?'Masquer les totaux':'Afficher les totaux')
                                     }:null,
+                                    ...this.getAggregatorFunctionsMenuItems(),
                                     ...this.renderCustomMenu(),
                                     ...restItems,
                                     !canRenderChart && this.canScrollTo() &&  {
@@ -583,6 +585,8 @@ const DatagridFactory = (Factory)=>{
                                                     key = {field}
                                                     testID={testID+"_FooterItem_"+field}
                                                     {...footer}
+                                                    aggregatorFunction = {this.getActiveAggregatorFunction().code}
+                                                    aggregatorFunctions = {this.aggregatorFunctions}
                                                     anchorProps = {{style:[theme.styles.ph1,theme.styles.mh05]}}
                                                 />
                                             })}