@iotready/nextjs-components-library 1.0.0-preview1 → 1.0.0-preview3

package/components/accounts/AccountMenu.d.ts

@@ -2,7 +2,7 @@ import { UserType } from '../../types/user';
 import { Theme } from "@emotion/react";
 export default function UserMenuAccount({ userInfo, handleClick, handleSignOut, accountRoute, theme }: {
     userInfo: UserType;
-    handleClick: () => Promise<void>;
+    handleClick: () => void;
     handleSignOut: () => Promise<void>;
     accountRoute?: string;
     theme: Theme;

package/components/charts/TrendChart.js

@@ -18,10 +18,12 @@ import 'moment/locale/it';
 // import 'moment/locale/en-gb'; // TODO set locale based on browser
 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
 import { ThemeProvider } from '@mui/material/styles';
+import TimelineIcon from '@mui/icons-material/Timeline';
+import MuiTooltip from '@mui/material/Tooltip';
 const lineOptions = {
     parsing: false,
     normalized: true,
-    spanGaps: true, // enable for all datasets
+    spanGaps: false, // enable for all datasets
     // showLine: false, // disable for all datasets
     animation: false,
     responsive: true,
@@ -191,6 +193,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 [options, setOptions] = useState({
         ...lineOptions,
         plugins: {
@@ -229,6 +232,13 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
         setDataMeasures([...[]]);
         setCsvData("");
     };
+    const handleSpanGaps = (spanG) => {
+        setOptions({
+            ...options,
+            spanGaps: spanG,
+        });
+        setSpanGapsOption(spanG);
+    };
     const handleChange = (event, newPeriod) => {
         setZoomed(false);
         setDatePickerUsed(false);
@@ -280,7 +290,7 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
                 pointRadius: 1,
                 pointHoverRadius: 5,
                 pointHoverBackgroundColor: 'rgba(52, 125, 236, 0.5)',
-                spanGaps: false,
+                // spanGaps: false,
                 fill: false
             };
         });
@@ -397,16 +407,16 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
                     // format="DD/MM/YY hh:mm A"
                     onChange: (newValue) => {
                         setTimeStart((moment(newValue).unix()));
-                    }, maxDate: moment(timeEnd * 1000), slotProps: {
+                    }, 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), 
                     // format="DD/MM/YY hh:mm A"
                     onChange: (newValue) => {
                         setTimeEnd((moment(newValue).unix()));
-                    }, minDate: moment(timeStart * 1000), slotProps: {
+                    }, minDateTime: moment(timeStart * 1000), slotProps: {
                         textField: { size: 'small', sx: { width: { sm: 210 } } }
                     } })] }) });
-    return (_jsxs(ThemeProvider, { theme: theme, children: [enableDatePicker && _jsx(Box, { sx: { display: { xs: 'flex', lg: 'none', justifyContent: 'flex-end' }, mb: 2 }, children: datePicker }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs(Box, { children: [enableExportData && (_jsxs(_Fragment, { children: [_jsxs(LoadingButton, { sx: { minWidth: '40px !important', mr: 1, px: 1 }, loading: loadingButton, type: "submit", variant: "text", color: "primary", onClick: handleExportData, disabled: !dataMeasures || !dataMeasures.length, size: 'small', children: [_jsx(LoginIcon, { fontSize: 'small', style: { transform: "rotate(90deg)" } }), _jsx(Box, { sx: { display: { xs: 'none', xl: 'block' }, ml: { md: 1 } }, children: "Export" })] }), _jsx(CSVLink
+    return (_jsxs(ThemeProvider, { theme: theme, children: [enableDatePicker && _jsx(Box, { sx: { display: { xs: 'flex', lg: 'none', justifyContent: 'flex-end' }, mb: 2 }, children: datePicker }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center' }, children: [!enableExportData && measures && measures.length === 1 ? _jsx(Typography, { variant: 'body1', sx: { mr: 2 }, children: measures[0].name }) : '', enableExportData && (_jsxs(_Fragment, { children: [_jsxs(LoadingButton, { sx: { minWidth: '40px !important', mr: 1, px: 1 }, loading: loadingButton, type: "submit", variant: "text", color: "primary", onClick: handleExportData, disabled: !dataMeasures || !dataMeasures.length, size: 'small', children: [_jsx(LoginIcon, { fontSize: 'small', style: { transform: "rotate(90deg)" } }), _jsx(Box, { sx: { display: { xs: 'none', xl: 'block' }, ml: { md: 1 } }, children: "Export" })] }), _jsx(CSVLink
                                     //@ts-ignore
                                     , { 
                                         //@ts-ignore
@@ -431,7 +441,7 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
                                     }
                                 }, children: [_jsx(ZoomOut, { fontSize: 'small' }), _jsx(Box, { sx: { display: { xs: 'none', xl: '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: chartPeriod, 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(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' ?
+                                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(Line, { options: options, data: {
                                     datasets: dataMeasures || [{ data: [] }]

package/package.json

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