@iotready/nextjs-components-library 1.0.0-preview5 → 1.0.0-preview7

package/components/charts/TrendChart.js

@@ -222,6 +222,7 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
         }
     });
     const [zoomed, setZoomed] = useState(false);
+    const prevMeasures = useRef();
     const resetChart = () => {
         setOptions({
             ...options,
@@ -245,6 +246,7 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
         setSpanGapsOption(spanG);
     };
     const handleChange = (event, newPeriod) => {
+        setChartLoading(true);
         setZoomed(false);
         setDatePickerUsed(false);
         setCsvData('');
@@ -277,7 +279,6 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
         }
     }, [csvData]);
     const loadDatasets = async (chartPeriod) => {
-        setChartLoading(true);
         let intervalInSeconds = chartPeriod === "ALL" && !datePickerUsed && !zoomed ? 31536000 : timeEnd - timeStart;
         const rawQuery = intervalInSeconds < 86400; // 
         // Inizializza un array di promesse per ottenere i dati per ciascuna misura
@@ -293,7 +294,7 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
                 pointRadius: 1,
                 pointHoverRadius: 5,
                 pointHoverBackgroundColor: 'rgba(52, 125, 236, 0.5)',
-                // showLine: measure.polltime ? true : false, //<- set this
+                change: !measure.polltime,
                 fill: false
             };
         });
@@ -368,10 +369,17 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
             newChartPeriod = '1Y'; // Set to 1 year
         }
         setChartPeriodConfig(chartConfigByPeriod[newChartPeriod]);
+        // check prev measures value in order to show the loader
+        // hide the loader if measure is the same (for interval get measure value)
+        const prevMeasuresValue = prevMeasures.current;
+        prevMeasures.current = measures;
+        if (!prevMeasuresValue || prevMeasuresValue.length !== measures.length || (prevMeasuresValue[0] && prevMeasuresValue[0].name !== measures[0].name)) {
+            setChartLoading(true);
+        }
         loadDatasets(chartPeriod).then(() => {
             setChartLoading(false);
         });
-    }, [timeEnd, timeStart]);
+    }, [measures, timeEnd, timeStart]);
     useEffect(() => {
         const loadZoomPlugin = async () => {
             const zoomPlugin = (await import('chartjs-plugin-zoom')).default;
@@ -401,6 +409,7 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
         resetChart();
     }, []);
     const datePicker = _jsx(Box, { sx: { display: 'flex', alignItems: 'center', mr: { xs: 0, lg: 2 } }, children: _jsxs(LocalizationProvider, { dateAdapter: AdapterMoment, adapterLocale: "it", children: [_jsx(DateTimePicker, { value: moment(timeStartPicker * 1000), onChange: (newValue) => {
+                        setChartLoading(true);
                         setDatePickerUsed(true);
                         setZoomed(false);
                         setPickerTimeStart(moment(newValue).unix());
@@ -408,6 +417,7 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
                     }, maxDateTime: moment(timeEnd * 1000), slotProps: {
                         textField: { size: 'small', sx: { width: { sm: 210 } } }
                     } }), " \u00A0\u00A0 ", _jsx(Box, { children: "\u2013" }), " \u00A0\u00A0", _jsx(DateTimePicker, { value: moment(timeEnd * 1000), onChange: (newValue) => {
+                        setChartLoading(true);
                         setDatePickerUsed(true);
                         setZoomed(false);
                         setPickerTimeEnd(moment(newValue).unix());
@@ -420,6 +430,7 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
                                     , { 
                                         //@ts-ignore
                                         ref: csvLinkRef, data: csvData, filename: `export_${moment().toISOString()}.csv`, separator: ';' })] })), zoomed && (_jsxs(Button, { sx: { minWidth: '40px !important', boxShadow: 1, px: 1 }, variant: "contained", color: "secondary", size: 'small', onClick: () => {
+                                    setChartLoading(true);
                                     setZoomed(false);
                                     if (chartPeriod === "ALL") {
                                         setDatePickerUsed(false);
@@ -446,6 +457,7 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
                     _jsx(_Fragment, { children: dataMeasures && dataMeasures[0]?.data?.length ?
                             (_jsx(Line, { options: options, data: {
                                     datasets: dataMeasures || [{ data: [] }]
+                                    // datasets: dataMeasures.map(d => ({ ...d, showLine: spanGapsOption || !d.change })) || [{ data: [] }]
                                 } })) : _jsxs(Box, { sx: {
                                 display: 'flex',
                                 flexDirection: 'column',
@@ -459,7 +471,7 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
                         alignItems: 'center',
                         justifyContent: 'center',
                         textAlign: 'center',
-                        height: '100%'
+                        height: 'calc(100% - 50px)'
                     }, children: _jsx(CircularProgress, {}) })) })] }));
 };
 export default TrendChart;

package/components/groups/GroupsDevices.d.ts

@@ -14,7 +14,7 @@ declare const GroupsDevices: ({ userInfo, handleGetUsersList, handleAddUserToGro
     handleGetGroups: (productID: number, userInfo?: UserType) => Promise<any>;
     handleGetUsersGroup: (groupID: string) => Promise<any>;
     handleCreateGroup: (group: any) => Promise<any>;
-    handleGetDevices: (user: UserType, group: string, selected: string) => Promise<any>;
+    handleGetDevices: (user: UserType, query: string) => Promise<any>;
     handleGetPositions: (devices: any) => Promise<any>;
     handleAddDevicesToGroup: (user: UserType, group: string, devicesToPatch: any[]) => Promise<any>;
     handleRemoveDevicesFromGroup: (user: UserType, group: string, devicesToPatch: any[]) => Promise<any>;

package/components/groups/GroupsDevices.js

@@ -73,7 +73,20 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
     const fetchDevices = async (group, selected) => {
         try {
             setLoadingDevices(true);
-            const devices = await handleGetDevices(userInfo, group, selected);
+            let queryParams = "last_handshake_at!=null";
+            if (group !== "all") {
+                queryParams = `last_handshake_at!=null&state.groups=/${group}/`;
+                if (userInfo.role === "admin") {
+                    queryParams += "&quarantined=false";
+                }
+            }
+            else if (selected !== "all") {
+                queryParams = `last_handshake_at!=null&state.groups!=/${selected}/`;
+                if (userInfo.role === "admin") {
+                    queryParams += "&quarantined=false";
+                }
+            }
+            const devices = await handleGetDevices(userInfo, queryParams);
             setDevices(devices);
             if (enableMaps) {
                 const positions = await handleGetPositions(devices);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iotready/nextjs-components-library",
-  "version": "1.0.0-preview5",
+  "version": "1.0.0-preview7",
   "main": "index.js",
   "scripts": {
     "build": "rm -rf dist && tsc --project tsconfig.build.json && cp package.json dist/",

package/server-actions/trackle.d.ts

@@ -13,7 +13,7 @@ export declare function createCustomer(trackleConfig: TrackleConfig, uid: string
     organization: string;
     uid: string;
 }>;
-export declare function getDevices(trackleConfig: TrackleConfig, productId?: number, uid?: string, group?: string, selected?: string): Promise<{
+export declare function getDevices(trackleConfig: TrackleConfig, productId?: number, uid?: string, query?: string): Promise<{
     devices: any[];
 }>;
 export declare function getDevice(trackleConfig: TrackleConfig, id: string, productId?: number, uid?: string): Promise<{

package/server-actions/trackle.js

@@ -55,25 +55,12 @@ export async function createCustomer(trackleConfig, uid) {
         .post({ uid })
         .json();
 }
-export async function getDevices(trackleConfig, productId, uid, group, selected) {
-    let queryParams = "last_handshake_at!=null";
-    if (group !== "all") {
-        queryParams = `last_handshake_at!=null&state.groups=/${group}/`;
-        if (!uid) {
-            queryParams += "&quarantined=false";
-        }
-    }
-    else if (selected !== "all") {
-        queryParams = `last_handshake_at!=null&state.groups!=/${selected}/`;
-        if (!uid) {
-            queryParams += "&quarantined=false";
-        }
-    }
+export async function getDevices(trackleConfig, productId, uid, query) {
     const api = uid ? wretchApi(trackleConfig, uid) : wretchApi(trackleConfig);
     const response = await api
         .get(uid
-        ? `/devices?${queryParams}`
-        : `/products/${productId}/devices?${queryParams}`)
+        ? `/devices${query ? "?" + query : ""}`
+        : `/products/${productId}/devices${query ? "?" + query : ""}`)
         .setTimeout(trackleConfig.apiTimeout)
         .json();
     return (uid ? { devices: response } : response);