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

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,
@@ -76,15 +76,7 @@ const lineOptions = {
                 drawOnChartArea: false,
             }
         },
-        y: {
-            ticks: {
-                callback: function (value) {
-                    if (Math.floor(value) === value) {
-                        return value;
-                    }
-                }
-            }
-        },
+        y: {},
     },
 };
 const chartConfigByPeriod = {
@@ -121,7 +113,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 +190,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: {
@@ -285,7 +277,7 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
         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,
@@ -321,9 +313,9 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
         let paddedMin = null;
         let paddedMax = null;
         if (min !== null && max !== null) {
-            const diff = Math.round((max - min) / 3) || 1;
-            paddedMin = min - diff;
-            paddedMax = max + diff;
+            const diff = ((max - min) * 0.2) < 0.1 ? 0.1 : (max - min) * 0.2;
+            paddedMin = Math.floor((min - diff) * 10) / 10;
+            paddedMax = Math.ceil((max + diff) * 10) / 10;
         }
         setDataMeasures([...datasets]);
         setTimeStartPicker(minTime || timeStart);
@@ -454,10 +446,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',

package/components/groups/GroupsDevices.js

@@ -28,7 +28,7 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
     const [selectedGroup, setSelectedGroup] = useState(group);
     const [groups, setGroups] = useState(null);
     const [usersList, setUsersList] = useState([]);
-    const [usersGroup, setUsersGroup] = useState([]);
+    const [usersGroup, setUsersGroup] = useState(null);
     const [groupInfo, setGroupInfo] = useState(null);
     const [openAdd, setOpenAdd] = useState(false);
     const [groupName, setGroupName] = useState('');
@@ -132,7 +132,9 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
         if (currentGroup && !checkboxSelection) {
             setSelectedGroup(currentGroup);
             setGroupInfo(groups && groups.find((g) => g.id === currentGroup));
-            getUsersGroup(currentGroup);
+            if (currentGroup !== 'all') {
+                getUsersGroup(currentGroup);
+            }
             fetchDevices(currentGroup, currentGroup);
         }
     }, [currentGroup]);

package/package.json

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