@iotready/nextjs-components-library 1.0.0-preview6 → 1.0.0-preview8

package/components/charts/TrendChart.js

@@ -23,7 +23,7 @@ import MuiTooltip from '@mui/material/Tooltip';
 const lineOptions = {
     parsing: false,
     normalized: true,
-    spanGaps: false, // enable for all datasets
+    spanGaps: true, // enable for all datasets
     // showLine: false, // disable for all datasets
     animation: false,
     responsive: true,
@@ -121,7 +121,7 @@ const chartConfigByPeriod = {
         scaleUnit: 'year',
     }
 };
-function GetPoints(data) {
+function getChartPoints(data) {
     const points = data.results[0].series[0].values.map((row) => {
         return {
             x: moment.unix(row[0]),
@@ -198,7 +198,7 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
     const [loadingButton, setLoadingButton] = useState(false);
     const csvLinkRef = useRef(null);
     const [csvData, setCsvData] = useState('');
-    const [spanGapsOption, setSpanGapsOption] = useState(false);
+    const [spanGapsOption, setSpanGapsOption] = useState(true);
     const [options, setOptions] = useState({
         ...lineOptions,
         plugins: {
@@ -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,14 +279,13 @@ 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
         const datasetsPromises = measures.map(async (measure) => {
             const polltime = getPollTime(intervalInSeconds, measure.polltime || 30);
             const influxData = await handleGetInfluxData(measure.name, timeStart, timeEnd, deviceId, polltime, !measure.polltime && rawQuery);
-            const points = GetPoints(influxData);
+            const points = getChartPoints(influxData);
             return {
                 label: measure.name,
                 data: points,
@@ -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);
@@ -443,10 +454,10 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
                                 }, children: [_jsx(ZoomOut, { fontSize: 'small' }), _jsx(Box, { sx: { display: { xs: 'none', lg: 'block' }, ml: { md: 1 } }, children: "Reset" })] }))] }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end' }, children: [enableDatePicker && _jsx(Box, { sx: { display: { xs: 'none', lg: 'flex' } }, children: datePicker }), _jsxs(ToggleButtonGroup, { color: "primary", value: !datePickerUsed && !zoomed ? chartPeriod : null, exclusive: true, onChange: handleChange, size: "small", 
                                 // sx={{ boxShadow: 1 }}
                                 disabled: chartLoading, children: [_jsx(ToggleButton, { value: "1D", sx: { px: 1 }, children: "1d" }), _jsx(ToggleButton, { value: "1W", sx: { px: 1 }, children: "1w" }), _jsx(ToggleButton, { value: "1M", sx: { px: 1 }, children: "1M" }), _jsx(ToggleButton, { value: "3M", sx: { px: 1 }, children: "3M" }), _jsx(ToggleButton, { value: "6M", sx: { px: 1 }, children: "6M" }), _jsx(ToggleButton, { value: "1Y", sx: { px: 1 }, children: "1Y" }), _jsx(ToggleButton, { value: "ALL", sx: { px: 1 }, children: "ALL" })] }), _jsx(MuiTooltip, { placement: "top", arrow: true, title: "Connect point values", children: _jsx(ToggleButton, { value: "check", color: "primary", size: "small", selected: spanGapsOption, disabled: chartLoading, onChange: () => handleSpanGaps(!spanGapsOption), sx: { ml: 2 }, children: _jsx(TimelineIcon, {}) }) })] })] }), _jsx(Box, { component: 'div', className: "chart-container", sx: { height: { xs: enableDatePicker && props.height ? `calc(${props.height} - 50px)` : props.height, lg: props.height }, minHeight: 300, mt: 2 }, children: chartJsLoaded && !chartLoading && typeof window !== 'undefined' ?
-                    _jsx(_Fragment, { children: dataMeasures && dataMeasures[0]?.data?.length ?
+                    _jsx(_Fragment, { children: dataMeasures && (dataMeasures.length > 1 || (dataMeasures.length === 1 && dataMeasures[0].data?.length)) ?
                             (_jsx(Line, { options: options, data: {
-                                    datasets: dataMeasures || [{ data: [] }]
-                                    // datasets: dataMeasures.map(d => ({ ...d, showLine: spanGapsOption || !d.change })) || [{ data: [] }]
+                                    // datasets: dataMeasures || [{ data: [] }]
+                                    datasets: dataMeasures.map(d => ({ ...d, showLine: spanGapsOption || !d.change })) || [{ data: [] }]
                                 } })) : _jsxs(Box, { sx: {
                                 display: 'flex',
                                 flexDirection: 'column',
@@ -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-preview8",
   "main": "index.js",
   "scripts": {
     "build": "rm -rf dist && tsc --project tsconfig.build.json && cp package.json dist/",