@iotready/nextjs-components-library 1.0.0-preview7 → 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: {
@@ -285,7 +285,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,
@@ -454,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',

package/package.json

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