@fto-consult/expo-ui 2.21.2 → 2.22.0

package/appConfig.txt

@@ -0,0 +1,11 @@
+// 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}
+ }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.21.2",
+  "version": "2.22.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -61,7 +61,7 @@
     "@emotion/native": "^11.10.0",
     "@expo/html-elements": "^0.2.0",
     "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^1.23.9",
+    "@fto-consult/common": "^1.23.10",
     "@fto-consult/expo-ui": "^2.21.0",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",

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;
 }