@iotready/nextjs-components-library 1.0.0-preview23 → 1.0.0-preview24

package/components/charts/TrendChart.js

@@ -21,6 +21,7 @@ import { ThemeProvider } from '@mui/material/styles';
 import TimelineIcon from '@mui/icons-material/Timeline';
 import MuiTooltip from '@mui/material/Tooltip';
 import EditNoteIcon from '@mui/icons-material/EditNote';
+// import AspectRatioIcon from '@mui/icons-material/AspectRatio';
 import { FilterTagMode } from '../../server-actions/types';
 const lineOptions = {
     parsing: false,
@@ -126,15 +127,6 @@ const chartConfigByPeriod = {
         scaleUnit: 'year',
     }
 };
-// function getChartPoints(data: any): Point[] {
-//   const points: Point[] = data.results[0].series[0].values.map((row: any) => {
-//     return {
-//       x: moment.unix(row[0]),
-//       y: row[1]
-//     }
-//   });
-//   return points;
-// }
 function getPollTime(intervalInSeconds, pollTime) {
     const CalculatedPollTime = Math.round(intervalInSeconds / 2880);
     if (CalculatedPollTime <= pollTime) {
@@ -196,7 +188,7 @@ const TrendChart = ({ deviceId, measures1, annotationsDataFn, measures2, enableD
     const [chartJsLoaded, setChartJsLoaded] = useState(false);
     // Dichiarazione di annotationsData come funzione che ritorna una Promise<any>
     const [annotationsData, setAnnotationsData] = useState([]);
-    const [annotentionsEnabled, setAnnotationsEnabled] = useState(true);
+    const [annotationsEnabled, setAnnotationsEnabled] = useState(true);
     const [dataMeasures, setDataMeasures] = useState(null);
     const [chartPeriod, setChartPeriod] = useState('1D');
     const [chartPeriodConfig, setChartPeriodConfig] = useState(chartConfigByPeriod['1D']);
@@ -318,13 +310,13 @@ const TrendChart = ({ deviceId, measures1, annotationsDataFn, measures2, enableD
         }
     }, [csvData]);
     useEffect(() => {
-        if (annotationsDataFn && annotentionsEnabled) {
+        if (annotationsDataFn && annotationsEnabled) {
             (async () => {
                 const resp = await annotationsDataFn();
                 setAnnotationsData(resp);
             })();
         }
-    }, [annotationsDataFn, annotentionsEnabled]);
+    }, [annotationsDataFn, annotationsEnabled]);
     function getDwSlotsFromValues(dwValues) {
         const slots = [];
         let start = null;
@@ -368,11 +360,7 @@ const TrendChart = ({ deviceId, measures1, annotationsDataFn, measures2, enableD
                     dwPoints = rawDwPoints;
                 }
             }
-            const stdRaw = await handleGetInfluxData(measure.name, timeStart, timeEnd, deviceId, polltime, !measure.polltime && rawQuery, !measure.polltime ? "none" : "null", 100, FilterTagMode.Exclude);
-            // Mappa sul formato Point
-            const stdPoints = stdRaw
-                .map((r) => ({ x: Number(r.x), y: r.y }))
-                .filter((p) => p.y !== null);
+            const stdPoints = await handleGetInfluxData(measure.name, timeStart, timeEnd, deviceId, polltime, !measure.polltime && rawQuery, !measure.polltime ? "none" : "null", 100, FilterTagMode.Exclude);
             const filtered = dwSlots.length
                 ? stdPoints.filter((p) => !dwSlots.some(slot => p.x >= slot.start && p.x <= slot.end))
                 : stdPoints;
@@ -443,7 +431,7 @@ const TrendChart = ({ deviceId, measures1, annotationsDataFn, measures2, enableD
         const { paddedMin: paddedMin2, paddedMax: paddedMax2 } = getPaddedMinMax(min2, max2);
         // Handle undefined/null annotationsData
         let dynamicAnnotations = {};
-        if (Array.isArray(annotationsData) && annotationsData.length > 0 && annotentionsEnabled) {
+        if (Array.isArray(annotationsData) && annotationsData.length > 0 && annotationsEnabled) {
             dynamicAnnotations = annotationsData.reduce((acc, [timestamp, label], index) => {
                 const yVal = paddedMin1 !== null && paddedMin1 !== undefined
                     ? paddedMin1 + 0.01 * (paddedMax1 - paddedMin1)
@@ -579,7 +567,7 @@ const TrendChart = ({ deviceId, measures1, annotationsDataFn, measures2, enableD
         loadDatasets(chartPeriod).then(() => {
             setChartLoading(false);
         });
-    }, [measures1, timeEnd, timeStart, measures2, annotentionsEnabled, annotationsData]);
+    }, [measures1, timeEnd, timeStart, measures2, annotationsEnabled, annotationsData]);
     useEffect(() => {
         const loadZoomPlugin = async () => {
             const zoomPlugin = (await import('chartjs-plugin-zoom')).default;
@@ -671,7 +659,7 @@ const TrendChart = ({ deviceId, measures1, annotationsDataFn, measures2, enableD
                                     '& .MuiToggleButton-root': {
                                         color: 'text.primary', fontSize: '0.95rem', fontWeight: 'normal', paddingTop: '6px', paddingBottom: '6px'
                                     }
-                                }, 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: 1 }, children: _jsx(TimelineIcon, {}) }) }), annotationsData !== undefined && (_jsx(MuiTooltip, { placement: "top", arrow: true, title: "Show annotations", children: _jsx(ToggleButton, { value: "check", color: "primary", size: "small", selected: annotentionsEnabled, disabled: chartLoading, onChange: () => setAnnotationsEnabled(!annotentionsEnabled), sx: { ml: 1 }, children: _jsx(EditNoteIcon, {}) }) }))] })] }), _jsx(Box, { component: 'div', className: "chart-container", sx: { mt: 2, height: '100%' }, 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("span", { children: _jsx(ToggleButton, { value: "check", color: "primary", size: "small", selected: spanGapsOption, disabled: chartLoading, onChange: () => handleSpanGaps(!spanGapsOption), sx: { ml: 1 }, children: _jsx(TimelineIcon, {}) }) }) }), annotationsData !== undefined && (_jsx(MuiTooltip, { placement: "top", arrow: true, title: "Show annotations", children: _jsx("span", { children: _jsx(ToggleButton, { value: "check", color: "primary", size: "small", selected: annotationsEnabled, disabled: chartLoading, onChange: () => setAnnotationsEnabled(!annotationsEnabled), sx: { ml: 1 }, children: _jsx(EditNoteIcon, {}) }) }) }))] })] }), _jsx(Box, { component: 'div', className: "chart-container", sx: { mt: 2, height: '100%' }, children: chartJsLoaded && !chartLoading && typeof window !== 'undefined' ?
                     _jsx(_Fragment, { children: dataMeasures && (dataMeasures.length > 1 || (dataMeasures.length === 1 && 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-preview23",
+  "version": "1.0.0-preview24",
   "main": "index.js",
   "scripts": {
     "build": "rm -rf dist && tsc --project tsconfig.build.json && cp package.json dist/",

package/server-actions/influx.js

@@ -155,7 +155,7 @@ export async function getInfluxDataV1(influxConfig, field, timeStart, timeEnd, d
             query += ` fill(null)`;
         }
     }
-    if (fill) {
+    if (fill !== "null") {
         // Query to get the last data point before timeStart
         const preStartQuery = `SELECT last("value") FROM "${influxConfig.measurement}" WHERE "deviceid" = '${deviceID}' AND "valueName" = '${field}'${filterTagCondition} AND time < '${moment
             .unix(timeStart)
@@ -196,7 +196,7 @@ export async function getInfluxDataV1(influxConfig, field, timeStart, timeEnd, d
         series.name = field; // Force the series name to be the field name
     });
     // 1000000 REMOVED AND ADDED TO MOVE THE POINT AWAY IN THE CHART
-    if (fill) {
+    if (fill !== "null") {
         if (preStartValue !== null && preStartValue !== undefined) {
             // Insert the pre-start value at the beginning of the dataset
             data.results[0].series[0].values.unshift([