@iotready/nextjs-components-library 1.0.0-preview6 → 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
@@ -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);
@@ -460,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/package.json

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