@iotready/nextjs-components-library 1.0.0-preview29 → 1.0.0-preview30

package/components/charts/TrendChart.js

@@ -24,6 +24,8 @@ import EditNoteIcon from '@mui/icons-material/EditNote';
 // import AspectRatioIcon from '@mui/icons-material/AspectRatio';
 import { FilterTagMode } from '../../server-actions/types';
 import { getRelativePosition } from 'chart.js/helpers';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
 function findIndexForX(arr, t) {
     if (!arr || arr.length === 0)
         return -1;
@@ -675,6 +677,20 @@ const TrendChart = ({ filter, measures1, annotationsDataFn, measures2, enableDat
             }
         });
     };
+    const shiftChart = ((timeToShift) => {
+        setChartLoading(true);
+        const timeInRange = timeEnd - timeStart;
+        const percentageToShift = 0.1; // 10%
+        const shiftAmount = Math.floor(timeInRange * percentageToShift);
+        if (timeToShift === 'timeStart') {
+            setTimeStart(prev => prev - shiftAmount);
+            setTimeEnd(prev => prev - shiftAmount);
+        }
+        else {
+            setTimeEnd(prev => prev + shiftAmount);
+            setTimeStart(prev => prev + shiftAmount);
+        }
+    });
     useEffect(() => {
         const timeDifference = Math.abs(moment(timeEnd).valueOf() - moment(timeStart).valueOf()); // Convert milliseconds to seconds
         let newChartPeriod = '1D'; // Default to 1 day
@@ -755,7 +771,7 @@ const TrendChart = ({ filter, measures1, annotationsDataFn, measures2, enableDat
         loadZoomPlugin();
         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) => {
+    const datePicker = _jsx(Box, { sx: { display: 'flex', alignItems: 'center' }, children: _jsxs(LocalizationProvider, { dateAdapter: AdapterMoment, adapterLocale: "it", children: [_jsx(DateTimePicker, { value: moment(timeStartPicker * 1000), onChange: (newValue) => {
                         setChartLoading(true);
                         setDatePickerUsed(true);
                         setZoomed(false);
@@ -772,11 +788,27 @@ const TrendChart = ({ filter, measures1, annotationsDataFn, measures2, enableDat
                     }, 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, { sx: { display: 'flex', alignItems: 'center' }, children: [!enableExportData && measures && measures.length === 1 ? _jsx(Typography, { variant: 'body1', sx: { mr: 2 }, children: measures[0].description || 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
+    return (_jsxs(ThemeProvider, { theme: theme, children: [_jsxs(Box, { sx: { display: { xs: 'flex', lg: 'none', justifyContent: 'center' }, alignItems: 'center', mb: 3, mt: 1 }, children: [_jsx(Button, { sx: {
+                            borderWidth: 1,
+                            borderStyle: 'solid',
+                            borderColor: '#c4c4c4',
+                            color: 'text.primary',
+                            ":hover": { backgroundColor: 'action.hover' },
+                            mr: enableDatePicker ? 1 : 0,
+                            p: 0.85
+                        }, onClick: () => shiftChart('timeStart'), children: _jsx(KeyboardArrowLeftIcon, {}) }), enableDatePicker && _jsx(Box, { sx: { display: { xs: 'flex', lg: 'none', justifyContent: 'flex-end' } }, children: datePicker }), _jsx(Button, { sx: {
+                            borderWidth: 1,
+                            borderStyle: 'solid',
+                            borderColor: '#c4c4c4',
+                            color: 'text.primary',
+                            ":hover": { backgroundColor: 'action.hover' },
+                            ml: enableDatePicker ? 1 : 0,
+                            p: 0.85
+                        }, onClick: () => shiftChart('timeEnd'), children: _jsx(KeyboardArrowRightIcon, {}) })] }), _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].description || 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
-                                        ref: csvLinkRef, data: csvData, filename: `export_${moment().toISOString()}.csv`, separator: ';' })] })), zoomed && measures.length > 0 && (_jsxs(Button, { sx: { minWidth: '40px !important', boxShadow: 1, px: 1 }, variant: "contained", color: "secondary", size: 'small', onClick: () => {
+                                        ref: csvLinkRef, data: csvData, filename: `export_${moment().toISOString()}.csv`, separator: ';' })] })), zoomed && measures.length > 0 && (_jsx(Button, { sx: { minWidth: '40px !important', boxShadow: 1, p: 1, mr: 1 }, variant: "contained", color: "primary", size: 'small', onClick: () => {
                                     setChartLoading(true);
                                     setZoomed(false);
                                     if (chartPeriod === "ALL") {
@@ -798,7 +830,23 @@ const TrendChart = ({ filter, measures1, annotationsDataFn, measures2, enableDat
                                             : moment().subtract(1, 'day').unix());
                                         setTimeEnd(moment().unix());
                                     }
-                                }, 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: {
+                                }, children: _jsx(ZoomOut, { fontSize: 'small' }) }))] }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end' }, children: [_jsxs(Box, { sx: { display: { xs: 'none', lg: 'flex' }, alignItems: 'center', mr: 1 }, children: [_jsx(Button, { sx: {
+                                            borderWidth: 1,
+                                            borderStyle: 'solid',
+                                            borderColor: '#c4c4c4',
+                                            color: 'text.primary',
+                                            ":hover": { backgroundColor: 'action.hover' },
+                                            mr: enableDatePicker ? 1 : 0,
+                                            p: 0.85
+                                        }, onClick: () => shiftChart('timeStart'), children: _jsx(KeyboardArrowLeftIcon, {}) }), enableDatePicker && _jsx(Box, { sx: { display: { xs: 'none', lg: 'flex' } }, children: datePicker }), _jsx(Button, { sx: {
+                                            borderWidth: 1,
+                                            borderStyle: 'solid',
+                                            borderColor: '#c4c4c4',
+                                            color: 'text.primary',
+                                            ":hover": { backgroundColor: 'action.hover' },
+                                            ml: 1,
+                                            p: 0.85
+                                        }, onClick: () => shiftChart('timeEnd'), children: _jsx(KeyboardArrowRightIcon, {}) })] }), _jsxs(ToggleButtonGroup, { color: "primary", value: !datePickerUsed && !zoomed ? chartPeriod : null, exclusive: true, onChange: handleChange, size: "small", sx: {
                                     '& .MuiToggleButton-root': {
                                         color: 'text.primary', fontSize: '0.95rem', fontWeight: 'normal', paddingTop: '6px', paddingBottom: '6px'
                                     }

package/package.json

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

package/server-actions/influx.d.ts

@@ -2,7 +2,7 @@ import { FilterTagMode, InfluxConfig, InfluxFillType } from "./types";
 export declare function getInfluxAlerts(influxConfig: InfluxConfig, fields: string[], limit: number, offset: number, sort: any, filter: {
     field: string;
     value: string;
-}, timeStart: number, timeEnd: number): Promise<any>;
+}, timeStart: number, timeEnd: number, aggregate?: boolean): Promise<any>;
 export declare function getDwSlots(influxConfig: InfluxConfig, timeStart: number, timeEnd: number, filter: {
     field: string;
     value: string;

package/server-actions/influx.js

@@ -2,7 +2,7 @@
 import { parse } from "csv-parse";
 import moment from "moment";
 import { FilterTagMode } from "./types";
-export async function getInfluxAlerts(influxConfig, fields, limit, offset, sort, filter, timeStart, timeEnd) {
+export async function getInfluxAlerts(influxConfig, fields, limit, offset, sort, filter, timeStart, timeEnd, aggregate = false) {
     const conditions = fields
         .map((field) => `r["valueName"] == "${field}"`)
         .join(" or ");
@@ -14,15 +14,20 @@ export async function getInfluxAlerts(influxConfig, fields, limit, offset, sort,
     }
     query += `
     |> filter(fn: (r) => r["_measurement"] == "${influxConfig.measurement}" and r["${filter.field}"] == "${filter.value}" and (${conditions}))
-  `;
-    // Add filter for tag d === 3
-    query += `
     |> filter(fn: (r) => r["d"] == "3" or r["d"] !~ /./) // Include only events with tag d == 3 or no tag d
-  `;
-    const queryCount = `${query} |> group() |> count()`;
-    query += ` 
     |> sort(columns: ["_time"]) // Ordina gli eventi cronologicamente
     |> group(columns: ["valueName"]) // Raggruppa per il tag
+  `;
+    if (aggregate) {
+        // Aggregate same consecutive values
+        query += `
+      |> duplicate(column: "_value", as: "prev_value")
+      |> difference(columns: ["prev_value"], keepFirst: true)
+      |> filter(fn: (r) => r.prev_value != 0 or not exists r.prev_value)
+    `;
+    }
+    const queryCount = `${query} |> group() |> count()`;
+    query += `
     |> events.duration(unit: 1s, stop: 2020-01-02T00:00:00Z)
     |> keep(columns: ["_time", "valueName", "_value", "duration"])
     |> group() // Raggruppa tutti i dati in un unico gruppo
@@ -74,7 +79,7 @@ export async function getInfluxAlerts(influxConfig, fields, limit, offset, sort,
         });
     });
     const parsedCount = count.split("\n")[1].split(",");
-    let countData = parsedCount[5];
+    let countData = parsedCount[3];
     return {
         data: rows,
         count: countData