@fto-consult/expo-ui 2.23.11 → 2.24.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.23.11",
+  "version": "2.24.1",
   "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.10",
+    "@fto-consult/common": "^1.24.6",
     "@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

@@ -1,25 +1,23 @@
 import ApexChart from 'apexcharts/dist/apexcharts.common';
 import React from "$react";
-import View from "$components/View"
+import View from "$components/View";
+import { destroyChart } from './utils';
+import theme from "$theme";
 
-const AppexChartComponent = React.forwardRef(({chartContext,options,...props},ref)=>{
-    const chartRef = React.useRef(null);
+const AppexChartComponent = React.forwardRef(({chartContext,style,options,...props},ref)=>{
+    const viewRef = React.useRef(null);
     React.useEffect(()=>{
-      chartContext.current = new ApexChart(chartRef.current,options)
+      chartContext.current = new ApexChart(viewRef.current,options)
       chartContext.current.render();
+      React.setRef(ref,chartContext.current)
       return ()=>{
-        if (chartContext.current && typeof chartContext.current.destroy === 'function') {
-          setTimeout(()=>{
-            try {
-              if(typeof chartContext.current?.destroy =='function') chartContext.current.destroy();
-            } catch{}
-          },1000);
-        }
+        destroyChart(chartContext.current);
       }
     },[]);
     return <View
       {...props}
-      ref = {React.mergeRefs(chartRef,ref)}
+      style = {[theme.styles.pb1,style]}
+      ref = {viewRef}
     />
 });
 

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

@@ -3,11 +3,12 @@ import React from "$react";
 import WebView from "$ecomponents/WebView";
 import {defaultStr,defaultObj,uniqid} from "$utils";
 import View from "$ecomponents/View";
+import { methodsNames } from "./utils";
 
-export const ChartComponent = React.forwardRef(({chartContext,testID,webViewProps,options,...props},ref)=>{
+export const ChartComponent = React.forwardRef(({chartContext,testID,chartId,id,webViewProps,options,...props},ref)=>{
     webViewProps = defaultObj(webViewProps);
     const webViewRef = React.useRef(null);
-    const chartId = React.useRef(uniqid("chart-webview-id"));
+    const chartId = React.useRef(defaultStr(chartId,id,options?.chart?.id,uniqid("chart-webview-id")));
     const jsonOptions = JSON.stringify(options);
     const exec = (method,a)=>{
         if(!webViewRef.current) return;
@@ -33,12 +34,14 @@ export const ChartComponent = React.forwardRef(({chartContext,testID,webViewProp
     testID = defaultStr(testID,"RN_AppexChartComponentNative");
     chartContext.current = React.useRef({});
     chartContext.current.exec = exec;
-    ["updateOptions","updateSeries","destroy"].map((cb)=>{
-        chartContext.current[cb]=(a,b,c)=>{
-           return exec(cb,a,b,c);
+    //@see : https://apexcharts.com/docs/methods/
+    methodsNames.map((cb)=>{
+        if(cb !=='exec'){
+            chartContext.current[cb]=(a,b,c,d,e)=>{
+                return exec(cb,a,b,c,d,e);
+            }
         }
     });
-
     return <View ref={ref} {...props} testID={testID} style={[{flex:1},props.style]}>
         <WebView.Local
             originWhitelist={["*"]}

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

@@ -0,0 +1,15 @@
+// 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 {defaultNumber} from "$utils";
+export const methodsNames = ["updateOptions","updateSeries","destroy","render","exec","appendSeries","toggleSeries","showSeries","hideSeries","zoomX","resetSeries","appendData","toggleDataPointSelection","addXaxisAnnotation","addYaxisAnnotation","addPointAnnotation","removeAnnotation","clearAnnotations","dataURI","clearAnnotations",""];
+
+export const destroyChart = (chartContext,timeout)=>{
+    if (chartContext && typeof chartContext =='object' && typeof chartContext.destroy === 'function') {
+        setTimeout(()=>{
+          try {
+            chartContext.destroy();
+          } catch{}
+        },defaultNumber(timeout,1000));
+    }
+}

package/src/components/Chart/index.js

@@ -3,12 +3,15 @@ import PropTypes from 'prop-types'
 import {defaultStr,defaultVal,extendObj,defaultObj,uniqid,defaultNumber} from "$utils";
 import stableHash from 'stable-hash';
 import Chart from "./appexChart";
+import theme from "$theme";
+import { destroyChart } from './appexChart/utils';
 
 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/
+ * @see : https://apexcharts.com/docs/methods/
  * les props requis duduit composant sont : 
  *  type {string}, le type de chart
  *  series {array} - //les series appexchart 
@@ -17,24 +20,28 @@ export * from "./utils";
  *  options {number} - les options supplémentaires au chart
  * 
 */
-const ChartComponent = React.forwardRef(({options:customOptions,height,width,chartId,testID,webViewProps, ...props },ref)=>{
+const ChartComponent = React.forwardRef(({options,style,height,width,chartId:customChartID,testID,webViewProps, ...props },ref)=>{
   const chartContext = React.useRef(null);
-  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")));
+  const chartIdRef = React.useRef(options.chart.id,customChartID,uniqid("chart-id"));
+  const chartId = chartIdRef.current;
   width = options.chart.width = defaultVal(options.chart.width,width);
   height = options.chart.height = defaultVal(options.chart.height,height)
-  options.chart.id = chartIdRef.current;
+  options.chart.id = chartId;
   testID = defaultStr(testID,"RN_ChartComponent");
-  options.xaxis = xaxis;
-  options.series = series;
   React.useEffect(()=>{
-    if(chartContext.current && chartContext.current.updateOptions){
+    if(chartContext.current){
+      if(chartContext.current.updateOptions){
         chartContext.current.updateOptions(options);
+      }
     }
-  },[stableHash(options)])
-  return <Chart {...props} options={options} chartId={chartIdRef.current} chartContext={chartContext} testID={testID} ref={ref}/>
+  },[stableHash(options)]);
+  React.useEffect(()=>{
+      return ()=>{
+        destroyChart(chartContext.current);
+      }
+  },[])
+  return <Chart {...props} ref={ref} chartId={chartId} style={[theme.styles.pb1,style]} options={options} chartContext={chartContext} testID={testID}/>
 });