@iotready/nextjs-components-library 1.0.0-preview2 → 1.0.0-preview20

package/components/charts/TrendChart.d.ts

@@ -1,17 +1,27 @@
 import 'chartjs-adapter-moment';
 import 'moment/locale/it';
 import { Theme } from "@emotion/react";
+import { InfluxFillType } from '../../server-actions/types';
 type Measure = {
     name: string;
+    description: string;
     polltime: number;
     unit: string;
+    stepped: boolean;
 };
-declare const TrendChart: ({ deviceId, measures, enableExportData, enableDatePicker, handleGetInfluxData, handleGetFirstTimestamp, theme, ...props }: {
+declare const TrendChart: ({ deviceId, measures1, annotationsData, measures2, enableDatePicker, handleGetInfluxData, handleExportDataCB, theme, initialTimeStart, initialTimeEnd, dwEnabled, dwCallback, dwHandled }: {
     deviceId: string;
-    measures: Array<Measure>;
-    enableenableExportData: boolean;
+    annotationsData?: Array<[any, any]>;
+    measures1?: Array<Measure>;
+    measures2?: Array<Measure>;
     enableDatePicker: boolean;
-    handleGetInfluxData: (measure: string, timeStart: number, timeEnd: number, deviceId: string, timeGroup: string, raw: boolean) => Promise<any>;
+    handleGetInfluxData: (measure: string, timeStart: number, timeEnd: number, deviceId: string, timeGroup: string, raw: boolean, fill?: InfluxFillType) => Promise<any>;
+    handleExportDataCB?: (measure: string, timeStart: number, timeEnd: number, deviceId: string) => Promise<any>;
     theme: Theme;
-} & any) => import("react/jsx-runtime").JSX.Element;
+    initialTimeStart?: number;
+    initialTimeEnd?: number;
+    dwEnabled?: boolean;
+    dwCallback?: (val: boolean) => void;
+    dwHandled?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
 export default TrendChart;

package/components/charts/TrendChart.js

@@ -18,6 +18,10 @@ 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';
+import EditNoteIcon from '@mui/icons-material/EditNote';
+import AspectRatioIcon from '@mui/icons-material/AspectRatio';
 const lineOptions = {
     parsing: false,
     normalized: true,
@@ -35,7 +39,7 @@ const lineOptions = {
         tooltip: {
             callbacks: {
                 label: (context) => {
-                    return `${context.dataset.label}: ${context.parsed.y.toFixed(2)} ${context.dataset.unit}`;
+                    return `${context.dataset.label}: ${context.parsed.y.toFixed(3)} ${context.dataset.unit}`;
                 }
             },
         },
@@ -62,7 +66,19 @@ const lineOptions = {
                     day: 'DD MMM YY',
                     hour: 'DD MMM HH:mm',
                     minute: 'HH:mm'
-                }
+                },
+                y1: {
+                    type: 'linear',
+                    position: 'left',
+                    title: { display: false, text: 'Primary Axis' },
+                    display: false
+                },
+                y2: {
+                    type: 'linear',
+                    position: 'right',
+                    title: { display: false, text: 'Secondary Axis' },
+                    display: false
+                },
             },
             title: {
                 display: false,
@@ -74,15 +90,6 @@ const lineOptions = {
                 drawOnChartArea: false,
             }
         },
-        y: {
-            ticks: {
-                callback: function (value) {
-                    if (Math.floor(value) === value) {
-                        return value;
-                    }
-                }
-            }
-        },
     },
 };
 const chartConfigByPeriod = {
@@ -119,7 +126,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]),
@@ -139,7 +146,7 @@ function getPollTime(intervalInSeconds, pollTime) {
 }
 function getCsvData(data, measures) {
     // Initialize the header with timestamp and measure names
-    const headers = ["timestamp", ...measures.map(measure => measure.name)];
+    const headers = ["timestamp", ...measures.map(measure => measure.description || measure.name)];
     const csvData = [];
     // Add the header to the csvData
     csvData.push(headers);
@@ -160,8 +167,11 @@ function getCsvData(data, measures) {
             });
         });
     });
-    // Create rows from timestampMap
-    Object.values(timestampMap).forEach((entry) => {
+    // Sort timestamps in ascending order
+    const sortedTimestamps = Object.keys(timestampMap).sort((a, b) => new Date(a).getTime() - new Date(b).getTime());
+    // Create rows from sorted timestampMap
+    sortedTimestamps.forEach(timestamp => {
+        const entry = timestampMap[timestamp];
         const row = [entry.timestamp];
         measures.forEach(measure => {
             // Push the corresponding value or an empty string if undefined
@@ -169,7 +179,7 @@ function getCsvData(data, measures) {
         });
         // Check if the row contains only empty values (besides the timestamp)
         const hasNonEmptyValues = row.slice(1).some(value => value !== null && value !== '' && value !== undefined);
-        // If the row has at least one non-empty value or just the timestamp, add it to csvData
+        // If the row has at least one non-empty value, add it to csvData
         if (hasNonEmptyValues || row.length === 1) {
             csvData.push(row);
         }
@@ -178,19 +188,27 @@ function getCsvData(data, measures) {
     return csvData.map(row => row.join(',')).join('\n');
 }
 // eslint-disable-next-line no-unused-vars
-const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, handleGetInfluxData, handleGetFirstTimestamp, theme, ...props }) => {
+const TrendChart = ({ deviceId, measures1, annotationsData, measures2, enableDatePicker, handleGetInfluxData, handleExportDataCB, theme, initialTimeStart, initialTimeEnd, dwEnabled, dwCallback, dwHandled }) => {
     const [chartJsLoaded, setChartJsLoaded] = useState(false);
+    const [annotentionsEnabled, setAnnotationsEnabled] = useState(true);
     const [dataMeasures, setDataMeasures] = useState(null);
     const [chartPeriod, setChartPeriod] = useState('1D');
     const [chartPeriodConfig, setChartPeriodConfig] = useState(chartConfigByPeriod['1D']);
     const [chartLoading, setChartLoading] = useState(false);
-    const [timeStart, setTimeStart] = useState(moment().subtract(1, 'day').unix());
-    const [timeEnd, setTimeEnd] = useState(moment().unix());
-    const [firstTimestamp, setFirstTimestamp] = useState();
-    const [datePickerUsed, setDatePickerUsed] = useState(false);
+    const [timeStartPicker, setTimeStartPicker] = useState(initialTimeStart || moment().subtract(1, 'day').unix());
+    const [timeStart, setTimeStart] = useState(initialTimeStart || moment().subtract(1, 'day').unix());
+    const [timeEnd, setTimeEnd] = useState(initialTimeEnd || moment().unix());
+    const [datePickerUsed, setDatePickerUsed] = useState(initialTimeStart || initialTimeEnd ? true : false);
+    const [pickerTimeStart, setPickerTimeStart] = useState(initialTimeStart || moment().subtract(1, 'day').unix());
+    const [pickerTimeEnd, setPickerTimeEnd] = useState(initialTimeEnd || moment().unix());
     const [loadingButton, setLoadingButton] = useState(false);
     const csvLinkRef = useRef(null);
     const [csvData, setCsvData] = useState('');
+    const [spanGapsOption, setSpanGapsOption] = useState(true);
+    const enableExportData = handleExportDataCB ? true : false;
+    const measures = measures1 && measures2 ? [...measures1, ...measures2] :
+        measures1 ? [...measures1] :
+            measures2 ? [...measures2] : [];
     const [options, setOptions] = useState({
         ...lineOptions,
         plugins: {
@@ -214,13 +232,19 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
         }
     });
     const [zoomed, setZoomed] = useState(false);
+    const prevMeasures = useRef();
     const resetChart = () => {
         setOptions({
             ...options,
             scales: {
                 ...options.scales,
-                y: {
-                    ...options.scales.y,
+                y1: {
+                    ...options.scales.y1,
+                    min: 0,
+                    max: 1
+                },
+                y2: {
+                    ...options.scales.y2,
                     min: 0,
                     max: 1
                 }
@@ -229,34 +253,44 @@ 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);
-        setCsvData('');
-        if (newPeriod === "ALL") {
-            setTimeStart(firstTimestamp - 86400);
-            setTimeEnd(moment().unix());
-            setChartPeriod(newPeriod);
-            return;
-        }
-        const periodConfig = chartConfigByPeriod[newPeriod];
-        if (periodConfig) {
-            setTimeStart(Math.round(moment().subtract(periodConfig.from).valueOf() / 1000));
-            setTimeEnd(Math.round(moment().valueOf() / 1000));
-            setChartPeriod(newPeriod);
-            setChartPeriodConfig(periodConfig);
+        if (newPeriod && newPeriod !== chartPeriod) {
+            setChartLoading(true);
+            setZoomed(false);
+            setDatePickerUsed(false);
+            setCsvData('');
+            if (newPeriod === "ALL") {
+                setTimeStart(1577854800);
+                setTimeEnd(moment().unix());
+                setChartPeriod(newPeriod);
+                return;
+            }
+            const periodConfig = chartConfigByPeriod[newPeriod];
+            if (periodConfig) {
+                setTimeStart(Math.round(moment().subtract(periodConfig.from).valueOf() / 1000));
+                setTimeEnd(Math.round(moment().valueOf() / 1000));
+                setChartPeriod(newPeriod);
+                setChartPeriodConfig(periodConfig);
+            }
         }
     };
     const handleExportData = async () => {
         setLoadingButton(true);
-        const intervalInSeconds = timeEnd - timeStart;
-        const data = await Promise.all(measures.map(async (measure) => {
-            const polltime = getPollTime(intervalInSeconds, measure.polltime);
-            return await handleGetInfluxData(measure.name, timeStart, timeEnd, deviceId, polltime, true);
-        }));
-        const csvData = getCsvData(data, measures);
-        setCsvData(csvData);
-        setLoadingButton(false);
+        if (handleExportDataCB) {
+            const data = await Promise.all(measures.map(async (measure) => {
+                return await handleExportDataCB(measure.name, timeStart, timeEnd, deviceId);
+            }));
+            const csvData = getCsvData(data, measures);
+            setCsvData(csvData);
+            setLoadingButton(false);
+        }
     };
     useEffect(() => {
         if (csvData.length > 0) {
@@ -264,80 +298,174 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
         }
     }, [csvData]);
     const loadDatasets = async (chartPeriod) => {
-        setChartLoading(true);
-        const intervalInSeconds = timeEnd - timeStart;
-        // Inizializza un array di promesse per ottenere i dati per ciascuna misura
-        const datasetsPromises = measures.map(async (measure) => {
-            const polltime = getPollTime(intervalInSeconds, measure.polltime);
-            const influxData = await handleGetInfluxData(measure.name, timeStart, timeEnd, deviceId, polltime, false);
-            const points = GetPoints(influxData);
+        let intervalInSeconds = chartPeriod === "ALL" && !datePickerUsed && !zoomed ? 31536000 : timeEnd - timeStart;
+        const rawQuery = intervalInSeconds < 86400;
+        // Combine measures and track their source
+        const allMeasures = [
+            ...(measures1?.map(m => ({ ...m, source: 'measures1' })) || []),
+            ...(measures2?.map(m => ({ ...m, source: 'measures2' })) || [])
+        ];
+        const datasetsPromises = allMeasures.map(async (measure) => {
+            const polltime = getPollTime(intervalInSeconds, measure.polltime || 30);
+            const influxData = await handleGetInfluxData(measure.name, timeStart, timeEnd, deviceId, polltime, !measure.polltime && rawQuery, dwEnabled ? "previous" : !measure.polltime ? "none" : "null");
+            const points = getChartPoints(influxData);
             return {
-                label: measure.name,
+                label: measure.description || measure.name,
                 data: points,
                 unit: measure.unit,
-                // borderColor: `hsl(${index * 50}, 70%, 50%)`, // Colore unico per ogni dataset
                 borderWidth: 2,
                 pointRadius: 1,
                 pointHoverRadius: 5,
                 pointHoverBackgroundColor: 'rgba(52, 125, 236, 0.5)',
-                spanGaps: false,
-                fill: false
+                change: !measure.polltime,
+                stepped: measure.stepped,
+                yAxisID: measure.source === 'measures1' ? 'y1' : 'y2'
             };
         });
-        // Risolvi tutte le promesse per popolare i dataset
         const datasets = await Promise.all(datasetsPromises);
-        let min = null;
-        let max = null;
-        let values = [];
+        let min1 = null;
+        let max1 = null;
+        let min2 = null;
+        let max2 = null;
+        let time;
+        let minTime = null;
         datasets.forEach(dataset => {
-            values = [...values, ...dataset.data.map((point) => point.y).filter((data) => data !== null)];
+            const values = dataset.data.map((point) => point.y).filter((data) => data !== null);
+            if (chartPeriod === "ALL" && !datePickerUsed && !zoomed && values.length) {
+                time = dataset.data.filter((data) => data.y !== null).map((data) => data.x)[0];
+            }
             const datasetMin = Math.min(...values);
             const datasetMax = Math.max(...values);
-            if (min === null || datasetMin < min)
-                min = datasetMin;
-            if (max === null || datasetMax > max)
-                max = datasetMax;
+            if (dataset.yAxisID === 'y1') {
+                if (min1 === null || datasetMin < min1)
+                    min1 = datasetMin;
+                if (max1 === null || datasetMax > max1)
+                    max1 = datasetMax;
+            }
+            else {
+                if (min2 === null || datasetMin < min2)
+                    min2 = datasetMin;
+                if (max2 === null || datasetMax > max2)
+                    max2 = datasetMax;
+            }
+            if (time && (minTime === null || time.unix() < minTime))
+                minTime = time.unix() - 86400;
         });
-        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 getPaddedMinMax = (min, max) => {
+            if (min === null || max === null)
+                return { paddedMin: null, paddedMax: null };
+            const diff = ((max - min) * 0.2) < 0.1 ? 0.1 : (max - min) * 0.2;
+            return {
+                paddedMin: Math.floor((min - diff) * 10) / 10,
+                paddedMax: Math.ceil((max + diff) * 10) / 10
+            };
+        };
+        const { paddedMin: paddedMin1, paddedMax: paddedMax1 } = getPaddedMinMax(min1, max1);
+        const { paddedMin: paddedMin2, paddedMax: paddedMax2 } = getPaddedMinMax(min2, max2);
+        // Handle undefined/null annotationsData
+        let dynamicAnnotations = {};
+        if (Array.isArray(annotationsData) && annotationsData.length > 0 && annotentionsEnabled) {
+            dynamicAnnotations = annotationsData.reduce((acc, [timestamp, label], index) => {
+                const yVal = paddedMin1 !== null && paddedMin1 !== undefined
+                    ? paddedMin1 + 0.01 * (paddedMax1 - paddedMin1)
+                    : paddedMin2 !== null && paddedMin2 !== undefined
+                        ? paddedMin2 + 0.01 * (paddedMax2 - paddedMin2)
+                        : 0;
+                acc[`line${index}`] = {
+                    type: 'line',
+                    xMin: timestamp,
+                    xMax: timestamp,
+                    borderColor: 'rgba(255, 225, 0, 0.8)',
+                    borderWidth: 2,
+                    drawTime: 'afterDatasetsDraw',
+                    label: {
+                        content: label,
+                        enabled: false
+                    }
+                };
+                acc[`triangle${index}`] = {
+                    type: 'point',
+                    xValue: timestamp,
+                    yValue: yVal,
+                    backgroundColor: 'rgba(255, 225, 0, 0.8)',
+                    pointStyle: 'triangle',
+                    radius: 6,
+                    rotation: 0,
+                    tooltip: {
+                        enabled: true,
+                        callbacks: {
+                            label: () => label
+                        }
+                    }
+                };
+                acc[`label${index}`] = {
+                    type: 'label',
+                    xValue: timestamp,
+                    yValue: yVal + 0.1 * (((paddedMax1 ?? paddedMax2 ?? 0) - (paddedMax1 ?? paddedMax2 ?? 0))),
+                    xAdjust: 0,
+                    yAdjust: -20,
+                    backgroundColor: 'rgba(245,245,245)',
+                    borderColor: 'rgba(255, 225, 0, 0.8)',
+                    borderWidth: 1,
+                    content: [label],
+                    textAlign: 'start',
+                    font: {
+                        size: 10,
+                        weight: 'bold'
+                    },
+                    callout: {
+                        display: false,
+                    }
+                };
+                return acc;
+            }, {});
         }
-        setDataMeasures([...datasets]);
+        // 👇 Combina statiche + dinamiche
+        const annotations = {
+            // ...staticAnnotations,
+            ...dynamicAnnotations
+        };
+        // 👇 Configurazione completa
+        setDataMeasures(datasets);
+        setTimeStartPicker(minTime || timeStart);
         setOptions({
             ...options,
             scales: {
                 ...options.scales,
-                y: {
-                    ...options.scales.y,
-                    min: paddedMin,
-                    max: paddedMax,
+                y1: {
+                    ...options.scales.y1,
+                    min: paddedMin1,
+                    max: paddedMax1,
+                    position: "left",
+                    display: "auto"
+                },
+                y2: {
+                    ...options.scales.y2,
+                    min: paddedMin2,
+                    max: paddedMax2,
+                    position: "right",
+                    display: "auto"
                 },
                 x: {
                     ...options.scales.x,
-                    min: moment.unix(timeStart).toString(),
-                    max: moment.unix(timeEnd).toString(),
-                    time: {
-                        ...options.scales.x.time,
-                        unit: chartPeriod.scaleUnit
-                    }
+                    min: moment.unix(minTime || timeStart).toString(),
+                    max: moment.unix(timeEnd).toString()
+                }
+            },
+            plugins: {
+                ...options.plugins,
+                annotation: {
+                    interaction: {
+                        mode: 'nearest',
+                        intersect: true
+                    },
+                    annotations
                 }
             }
         });
     };
     useEffect(() => {
-        const fetchFirstTimestamp = async () => {
-            const response = await handleGetFirstTimestamp(deviceId);
-            if (response) {
-                setFirstTimestamp(response);
-            }
-        };
-        fetchFirstTimestamp();
-    }, []);
-    useEffect(() => {
-        const timeDifference = Math.abs(moment(timeStart).valueOf() - moment(timeEnd).valueOf()); // Convert milliseconds to seconds
+        const timeDifference = Math.abs(moment(timeEnd).valueOf() - moment(timeStart).valueOf()); // Convert milliseconds to seconds
         let newChartPeriod = '1D'; // Default to 1 day
         if (timeDifference < 86400) { // Less than 1 day
             newChartPeriod = '1H'; // Set to 1 day
@@ -345,26 +473,34 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
         else if (timeDifference < 604800) { // Less than 1 week
             newChartPeriod = '1D'; // Set to 1 day
         }
-        else if (timeDifference < 2629800) { // Less than 1 month
+        else if (timeDifference < 2678400) { // Less than 1 month
             newChartPeriod = '1W'; // Set to 1 week
         }
-        else if (timeDifference < 7889400) { // Less than 3 months
+        else if (timeDifference < 8035200) { // Less than 3 months
             newChartPeriod = '1M'; // Set to 1 month
         }
-        else if (timeDifference < 15778440) { // Less than 6 months
+        else if (timeDifference < 16070400) { // Less than 6 months
             newChartPeriod = '3M'; // Set to 3 months
         }
-        else if (timeDifference < 31556926) { // Less than 1 year
+        else if (timeDifference < 31536000) { // Less than 1 year
             newChartPeriod = '6M'; // Set to 6 months
         }
         else {
             newChartPeriod = '1Y'; // Set to 1 year
         }
         setChartPeriodConfig(chartConfigByPeriod[newChartPeriod]);
+        // check prev measures value in order to show the loader
+        // hide the loader if measure is the same (for interval get measure value)
+        const prevMeasuresValue = prevMeasures.current || [];
+        //@ts-ignore
+        prevMeasures.current = measures;
+        if (!prevMeasuresValue || prevMeasuresValue.length !== measures?.length || (prevMeasuresValue[0] && prevMeasuresValue[0].name !== measures[0].name)) {
+            setChartLoading(true);
+        }
         loadDatasets(chartPeriod).then(() => {
             setChartLoading(false);
         });
-    }, [timeEnd, timeStart]);
+    }, [measures1, timeEnd, timeStart, measures2, annotentionsEnabled, annotationsData, dwEnabled]);
     useEffect(() => {
         const loadZoomPlugin = async () => {
             const zoomPlugin = (await import('chartjs-plugin-zoom')).default;
@@ -375,8 +511,24 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
                         const activePoint = chart.tooltip._active[0];
                         const ctx = chart.ctx;
                         const x = activePoint.element.x;
-                        const topY = chart.scales.y.top;
-                        const bottomY = chart.scales.y.bottom;
+                        let topY1 = 0;
+                        let topY2 = 0;
+                        let bottomY1 = 0;
+                        let bottomY2 = 0;
+                        if (chart.scales.y1?.top) {
+                            topY1 = chart.scales.y1.top;
+                        }
+                        if (chart.scales.y2?.top) {
+                            topY2 = chart.scales.y2.top;
+                        }
+                        if (chart.scales.y1?.bottom) {
+                            bottomY1 = chart.scales.y1.bottom;
+                        }
+                        if (chart.scales.y2?.bottom) {
+                            bottomY2 = chart.scales.y2.bottom;
+                        }
+                        const topY = Math.max(topY1, topY2);
+                        const bottomY = Math.min(bottomY1, bottomY2);
                         ctx.save();
                         ctx.beginPath();
                         ctx.moveTo(x, topY);
@@ -393,34 +545,41 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
         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(timeStart * 1000), 
-                    // format="DD/MM/YY hh:mm A"
-                    onChange: (newValue) => {
-                        setTimeStart((moment(newValue).unix()));
-                    }, maxDate: moment(timeEnd * 1000), slotProps: {
+    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) => {
+                        setChartLoading(true);
+                        setDatePickerUsed(true);
+                        setZoomed(false);
+                        setPickerTimeStart(moment(newValue).unix());
+                        setTimeStart(moment(newValue).unix());
+                    }, 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: {
+                    } }), " \u00A0\u00A0 ", _jsx(Box, { children: "\u2013" }), " \u00A0\u00A0", _jsx(DateTimePicker, { value: moment(timeEnd * 1000), onChange: (newValue) => {
+                        setChartLoading(true);
+                        setDatePickerUsed(true);
+                        setZoomed(false);
+                        setPickerTimeEnd(moment(newValue).unix());
+                        setTimeEnd(moment(newValue).unix());
+                    }, 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].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 && (_jsxs(Button, { sx: { minWidth: '40px !important', boxShadow: 1, px: 1 }, variant: "contained", color: "secondary", size: 'small', onClick: () => {
-                                    if (datePickerUsed) {
-                                        setZoomed(false);
-                                    }
-                                    else if (chartPeriod === "ALL") {
-                                        setZoomed(false);
+                                        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: () => {
+                                    setChartLoading(true);
+                                    setZoomed(false);
+                                    if (chartPeriod === "ALL") {
+                                        setDatePickerUsed(false);
+                                        setTimeStart(1577854800);
                                         setTimeEnd(moment().unix());
-                                        setTimeStart(firstTimestamp - 86400);
+                                    }
+                                    else if (datePickerUsed) {
+                                        setTimeStart(pickerTimeStart);
+                                        setTimeEnd(pickerTimeEnd);
                                     }
                                     else {
-                                        setZoomed(false);
+                                        setDatePickerUsed(false);
                                         setChartPeriodConfig(chartConfigByPeriod[chartPeriod]);
                                         setTimeStart(chartPeriodConfig.from?.days
                                             ? moment()
@@ -429,12 +588,15 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
                                             : moment().subtract(1, 'day').unix());
                                         setTimeEnd(moment().unix());
                                     }
-                                }, 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' ?
-                    _jsx(_Fragment, { children: dataMeasures && dataMeasures[0]?.data?.length ?
+                                }, 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: {
+                                    '& .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, {}) }) })), dwCallback !== undefined && dwEnabled != undefined && (_jsx(MuiTooltip, { placement: "top", arrow: true, title: "Show data window data", children: _jsx(ToggleButton, { value: "check", color: "primary", size: "small", selected: dwEnabled, disabled: chartLoading || !dwHandled, onChange: () => dwCallback(!dwEnabled), sx: { ml: 1 }, children: _jsx(AspectRatioIcon, {}) }) }))] })] }), _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: [] }]
+                                    // datasets: dataMeasures || [{ data: [] }]
+                                    datasets: dataMeasures.map(d => ({ ...d, showLine: spanGapsOption || !d.change })) || [{ data: [] }]
                                 } })) : _jsxs(Box, { sx: {
                                 display: 'flex',
                                 flexDirection: 'column',
@@ -448,7 +610,7 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
                         alignItems: 'center',
                         justifyContent: 'center',
                         textAlign: 'center',
-                        height: '100%'
+                        height: 'calc(100% - 50px)'
                     }, children: _jsx(CircularProgress, {}) })) })] }));
 };
 export default TrendChart;

package/components/groups/GroupUpdate.d.ts

@@ -12,7 +12,7 @@ declare const GroupUpdate: ({ userInfo, groupInfo, usersGroup, usersList, device
     handleAddUserToGroup: (groupID: string, userName: string, userID: string) => Promise<any>;
     handleRemoveUserFromGroup: (groupID: string, userID: string) => Promise<any>;
     handleUpdateDevice: (id: string, body: any, user: UserType) => Promise<any>;
-    handleGetGroups: (productID: number, userInfo?: UserType) => Promise<any>;
+    handleGetGroups: (userInfo?: UserType) => Promise<any>;
     handleUpdateGroup: (id: string, group: any) => Promise<void>;
     handleDeleteGroup: (id: string) => Promise<void>;
     container?: "Box" | "Card";

package/components/groups/GroupUpdate.js

@@ -27,7 +27,7 @@ const GroupUpdate = ({ userInfo, groupInfo, usersGroup, usersList, devicesList,
             if (response) {
                 if (devicesList.length > 0) {
                     // should check if device is present in other groups the user is member of
-                    const groupsData = await handleGetGroups(1008, { role: 'support', uid: userId });
+                    const groupsData = await handleGetGroups({ role: 'support', uid: userId });
                     const userGroupIds = groupsData.map((group) => group.id);
                     // for all devices in the group set the selectedUser as manager
                     for (const device of devicesList) {

package/components/groups/GroupsDevices.d.ts

@@ -11,10 +11,10 @@ declare const GroupsDevices: ({ userInfo, handleGetUsersList, handleAddUserToGro
     }>;
     handleAddUserToGroup: (groupID: string, userName: string, userID: string) => Promise<any>;
     handleRemoveUserFromGroup: (groupID: string, userID: string) => Promise<any>;
-    handleGetGroups: (productID: number, userInfo?: UserType) => Promise<any>;
+    handleGetGroups: (userInfo?: UserType) => Promise<any>;
     handleGetUsersGroup: (groupID: string) => Promise<any>;
     handleCreateGroup: (group: any) => Promise<any>;
-    handleGetDevices: (user: UserType, group: string, selected: string) => Promise<any>;
+    handleGetDevices: (user: UserType, query: string) => Promise<any>;
     handleGetPositions: (devices: any) => Promise<any>;
     handleAddDevicesToGroup: (user: UserType, group: string, devicesToPatch: any[]) => Promise<any>;
     handleRemoveDevicesFromGroup: (user: UserType, group: string, devicesToPatch: any[]) => Promise<any>;

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('');
@@ -60,7 +60,7 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
                 moreData = usersList.users.length === pageSize;
                 page++;
             }
-            const userGroupsUserIds = usersGroup.map((ug) => ug.user.userId);
+            const userGroupsUserIds = usersGroup && usersGroup.map((ug) => ug.user.userId) || [];
             setUsersList(usersData.filter((user) => user.role === 'support' && !userGroupsUserIds.includes(user.uid)).map((user) => {
                 const userName = user.name ? user.name.replace("/", " ") : "";
                 return { label: `${userName} (${user.email})`, id: user.uid };
@@ -73,7 +73,20 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
     const fetchDevices = async (group, selected) => {
         try {
             setLoadingDevices(true);
-            const devices = await handleGetDevices(userInfo, group, selected);
+            let queryParams = "last_handshake_at!=null";
+            if (group !== "all") {
+                queryParams = `last_handshake_at!=null&state.groups=/${group}/`;
+                if (userInfo.role === "admin") {
+                    queryParams += "&quarantined=false";
+                }
+            }
+            else if (selected !== "all") {
+                queryParams = `last_handshake_at!=null&state.groups!=/${selected}/`;
+                if (userInfo.role === "admin") {
+                    queryParams += "&quarantined=false";
+                }
+            }
+            const devices = await handleGetDevices(userInfo, queryParams);
             setDevices(devices);
             if (enableMaps) {
                 const positions = await handleGetPositions(devices);
@@ -89,7 +102,7 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
     };
     const getGroups = async () => {
         try {
-            const responseData = await handleGetGroups(1008, userInfo);
+            const responseData = await handleGetGroups(userInfo);
             setGroups(responseData);
         }
         catch (err) {
@@ -119,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]);
@@ -130,7 +145,6 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
             const newGroup = {
                 name: groupName,
                 description,
-                productID: 1008, // Assuming this is the correct productID
             };
             const id = await handleCreateGroup(newGroup);
             await getGroups();
@@ -177,13 +191,13 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
             const devicesPatched = await handleAddDevicesToGroup(userInfo, selectedGroup, devicesToPatch);
             if (devicesPatched && devicesPatched.length > 0) {
                 // get all members of the group
-                const userIdsToAdd = usersGroup.map((ug) => ug.user.userId);
-                if (userIdsToAdd.length > 0) {
+                const userIdsToAdd = usersGroup && usersGroup.map((ug) => ug.user.userId) || [];
+                if (userIdsToAdd && userIdsToAdd.length > 0) {
                     for (const device of devicesToPatch) {
                         // add members to devices managers
                         await handleUpdateDevice(device.id, {
                             managers: [
-                                ...device.managers,
+                                ...(device?.managers || []),
                                 ...userIdsToAdd
                             ]
                         }, userInfo);
@@ -210,12 +224,12 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
             const devicesPatched = await handleRemoveDevicesFromGroup(userInfo, selectedGroup, devicesToPatch);
             if (devicesPatched && devicesPatched.length > 0) {
                 for (const device of devicesToPatch) {
-                    if (device.managers.length > 0) {
-                        let managersToKeep = device.managers || [];
+                    if (device.managers && device.managers.length > 0) {
+                        let managersToKeep = device.managers;
                         for (const manager of device.managers) {
                             // should check if device is present in other groups the user is member of
-                            const groupsData = await handleGetGroups(1008, { role: 'support', uid: manager });
-                            const userGroupIds = groupsData.map((group) => group.id);
+                            const groupsData = await handleGetGroups({ role: 'support', uid: manager });
+                            const userGroupIds = groupsData && groupsData.map((group) => group.id) || [];
                             const found = device.groups && device.groups.some((gID) => userGroupIds.includes(gID));
                             if (!found) {
                                 // @ts-ignore

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iotready/nextjs-components-library",
-  "version": "1.0.0-preview2",
+  "version": "1.0.0-preview20",
   "main": "index.js",
   "scripts": {
     "build": "rm -rf dist && tsc --project tsconfig.build.json && cp package.json dist/",
@@ -19,6 +19,7 @@
     "chartjs-adapter-moment": "^1.0.1",
     "chartjs-plugin-annotation": "^3.1.0",
     "chartjs-plugin-zoom": "^2.0.1",
+    "csv-parse": "^5.6.0",
     "firebase": "^10.13.1",
     "leaflet": "^1.9.4",
     "leaflet-defaulticon-compatibility": "^0.1.2",
@@ -42,4 +43,4 @@
     "eslint-config-next": "14.2.9",
     "typescript": "^5"
   }
-}
+}

package/server-actions/annotations.d.ts

@@ -0,0 +1,4 @@
+import { FirebaseConfig } from "./types";
+export declare const getAnnotations: (firebaseConfig: FirebaseConfig, deviceID: number) => Promise<{
+    id: string;
+}[]>;

package/server-actions/annotations.js

@@ -0,0 +1,15 @@
+"use server";
+import { initializeApp } from "firebase/app";
+import { collection, query, orderBy, getDocs, where } from "@firebase/firestore";
+import { getFirestore } from "@firebase/firestore";
+export const getAnnotations = async (firebaseConfig, deviceID) => {
+    // Initialize Firebase
+    const app = initializeApp(firebaseConfig);
+    const db = getFirestore(app);
+    const annotationsQuery = query(collection(db, "annotations"), where("target", "==", deviceID), orderBy("createdAt", "desc"));
+    const groupsSnapshot = await getDocs(annotationsQuery);
+    return groupsSnapshot.docs.map((doc) => ({
+        id: doc.id,
+        ...doc.data()
+    }));
+};

package/server-actions/groups.d.ts

@@ -1,11 +1,4 @@
-export type FirebaseConfig = {
-    apiKey: string;
-    authDomain: string;
-    projectId: string;
-    storageBucket: string;
-    messagingSenderId: string;
-    appId: string;
-};
+import { FirebaseConfig } from "./types";
 export declare const getGroups: (firebaseConfig: FirebaseConfig, productID: number, userID?: string) => Promise<{
     id: string;
 }[]>;

package/server-actions/index.d.ts

@@ -2,3 +2,4 @@ export * from "./groups";
 export * from "./influx";
 export * from "./logto";
 export * from "./trackle";
+export * from "./annotations";

package/server-actions/index.js

@@ -3,3 +3,4 @@ export * from "./groups";
 export * from "./influx";
 export * from "./logto";
 export * from "./trackle";
+export * from "./annotations";

package/server-actions/influx.d.ts

@@ -1,13 +1,4 @@
-export type InfluxConfig = {
-    url: string;
-    accessToken: string;
-    bucket: string;
-    orgId: string;
-    measurement: string;
-    dbName: string;
-    username: string;
-    password: string;
-};
-export declare function getInfluxDataV1(influxConfig: InfluxConfig, field: string, timeStart: number, timeEnd: number, deviceID: string, timeGroup: string, raw: boolean): Promise<any>;
-export declare function getManyMeasuresV1(influxConfig: InfluxConfig, fields: string[], limit: number, offset: number, sort: any, deviceID: string, timeStart?: number, timeEnd?: number): Promise<any>;
-export declare function getFirstTimestamp(influxConfig: InfluxConfig, deviceID: string): Promise<any>;
+import { InfluxConfig, InfluxFillType } from "./types";
+export declare function getInfluxAlerts(influxConfig: InfluxConfig, fields: string[], limit: number, offset: number, sort: any, deviceID: string, timeStart: number, timeEnd: number): Promise<any>;
+export declare function getInfluxDataV1(influxConfig: InfluxConfig, field: string, timeStart: number, timeEnd: number, deviceID: string, timeGroup: string, raw: boolean, fill?: InfluxFillType, filterTag?: number): Promise<any>;
+export declare function exportDataV1(influxConfig: InfluxConfig, field: string, timeStart: number, timeEnd: number, deviceID: string): Promise<any>;

package/server-actions/influx.js

@@ -1,55 +1,129 @@
 "use server";
+import { parse } from "csv-parse";
 import moment from "moment";
-/* export async function getInfluxDataV2(influxConfig: InfluxConfig, field: string, timeStart: string, timeEnd: string, deviceID: string, timeGroup: string, raw: boolean): Promise<Point[]> {
-  const query = `
-  from(bucket: "${influxConfig.bucket}")
-    |> range(start: ${timeStart}, stop: ${timeEnd})
-    |> filter(fn: (r) => r._measurement == "${influxConfig.measurement}")
-    |> filter(fn: (r) => r["_field"] == "${field}")
-    |> filter(fn: (r) => r["deviceid"] == "${deviceID}")
-    |> aggregateWindow(every: ${timeGroup}m, fn: last, createEmpty: false)
-    |> yield(name: "last")
+export async function getInfluxAlerts(influxConfig, fields, limit, offset, sort, deviceID, timeStart, timeEnd) {
+    const conditions = fields
+        .map((field) => `r["valueName"] == "${field}"`)
+        .join(" or ");
+    let query = `
+    import "contrib/tomhollingworth/events"
+    from(bucket: "${influxConfig.bucket}")`;
+    if (timeStart && timeEnd) {
+        query += ` |> range(start: ${timeStart}, stop: ${timeEnd})`;
+    }
+    query += `
+    |> filter(fn: (r) => r["_measurement"] == "${influxConfig.measurement}" and r["deviceid"] == "${deviceID}" 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 response = await fetch(`${influxConfig.url}/api/v2/query?org=${influxConfig.orgId}`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      'Authorization': `Token ${influxConfig.accessToken}`,
-      'Accept': 'application/csv'
-    },
-    body: JSON.stringify({
-      query: query
-    })
-  });
-  if (!response.ok) {
-    throw new Error(`Failed to fetch data from InfluxDB: ${response.statusText}`);
-  }
-  const data = await response.text();
-  return data.split('\n').map(line => {
-    const row = line.split(',');
-    const timestamp = row[5];
-    const value = parseFloat(row[6]);
-    console.log(timestamp, value);
-    if (isNaN(value)) {
-      return null;
+    const queryCount = `${query} |> group() |> count()`;
+    query += ` 
+    |> sort(columns: ["_time"]) // Ordina gli eventi cronologicamente
+    |> group(columns: ["valueName"]) // Raggruppa per il tag
+    |> 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
+  `;
+    if (sort && sort.field === "time" && sort.sort === "desc") {
+        query += ` |> sort(columns: ["_time"], desc: true)`;
     }
-    return { x: new Date(timestamp).getTime(), y: value };
-  }).filter(point => point !== null);
-}*/ // NOT WORKING, NEED TO FIX
-export async function getInfluxDataV1(influxConfig, field, timeStart, timeEnd, deviceID, timeGroup, raw) {
+    else {
+        query += ` |> sort(columns: ["_time"])`;
+    }
+    query += ` |> limit(n:${limit}, offset:${offset})`;
+    const responses = await Promise.all([
+        fetch(encodeURI(`${influxConfig.url}/api/v2/query?org=${influxConfig.orgId}`), {
+            method: "POST",
+            headers: {
+                Authorization: `Token ${influxConfig.accessToken}`,
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+                query: query,
+                type: "flux"
+            })
+        }),
+        fetch(encodeURI(`${influxConfig.url}/api/v2/query?org=${influxConfig.orgId}`), {
+            method: "POST",
+            headers: {
+                Authorization: `Token ${influxConfig.accessToken}`,
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+                query: queryCount,
+                type: "flux"
+            })
+        })
+    ]);
+    if (!responses[0].ok) {
+        throw new Error(`Failed to fetch data from InfluxDB: ${responses[0].statusText}`);
+    }
+    const data = await responses[0].text();
+    const count = await responses[1].text();
+    const rows = [];
+    const parsedData = parse(data.trim(), { columns: true });
+    parsedData.forEach((row) => {
+        rows.push({
+            time: row["_time"],
+            duration: parseInt(row["duration"], 10),
+            value: parseInt(row["_value"], 10),
+            valueName: row["valueName"]
+        });
+    });
+    const parsedCount = count.split("\n")[1].split(",");
+    let countData = parsedCount[5];
+    console.log("Count Data:", countData);
+    console.log("Rows:", rows);
+    return {
+        data: rows,
+        count: countData
+    };
+}
+export async function getInfluxDataV1(influxConfig, field, timeStart, timeEnd, deviceID, timeGroup, raw, fill, filterTag) {
     let query;
+    let preStartValue = null;
+    // Build filter for filterTag if provided
+    const filterTagCondition = filterTag !== undefined && filterTag !== null
+        ? ` AND ("d" = '${filterTag}' OR "d" !~ /./)`
+        : "";
     if (raw) {
-        query = `SELECT ("value") FROM "${influxConfig.measurement}" WHERE "deviceid" = '${deviceID}' AND "valueName" = '${field}' AND time >= '${moment
+        query = `SELECT ("value") FROM "${influxConfig.measurement}" WHERE "deviceid" = '${deviceID}' AND "valueName" = '${field}'${filterTagCondition} AND time >= '${moment
             .unix(timeStart)
             .toISOString()}' AND time <= '${moment.unix(timeEnd).toISOString()}'`;
     }
     else {
-        query = `SELECT last("value") FROM "${influxConfig.measurement}" WHERE "deviceid" = '${deviceID}' AND "valueName" = '${field}' AND time >= '${moment
+        query = `SELECT last("value") FROM "${influxConfig.measurement}" WHERE "deviceid" = '${deviceID}' AND "valueName" = '${field}'${filterTagCondition} AND time >= '${moment
             .unix(timeStart)
             .toISOString()}' AND time <= '${moment
             .unix(timeEnd)
-            .toISOString()}' GROUP BY time(${timeGroup}) fill(null)`;
+            .toISOString()}' GROUP BY time(${timeGroup})`;
+        if (fill === "none") {
+            query += ` fill(none)`;
+        }
+        else if (fill === "previous") {
+            query += ` fill(previous)`;
+        }
+        else {
+            query += ` fill(null)`;
+        }
+    }
+    if (fill) {
+        // 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)
+            .toISOString()}'`;
+        const preStartResponse = await fetch(encodeURI(`${influxConfig.url}/query?db=${influxConfig.dbName}&epoch=s&q=${preStartQuery}`), {
+            headers: {
+                Authorization: `Basic ${btoa(`${influxConfig.username}:${influxConfig.password}`)}`
+            }
+        });
+        if (!preStartResponse.ok) {
+            throw new Error(`Failed to fetch pre-start data from InfluxDB: ${preStartResponse.statusText}`);
+        }
+        const preStartData = await preStartResponse.json();
+        preStartValue = preStartData.results[0].series?.[0]?.values?.[0]?.[1];
     }
     const response = await fetch(encodeURI(`${influxConfig.url}/query?db=${influxConfig.dbName}&epoch=s&q=${query}`), {
         headers: {
@@ -57,7 +131,6 @@ export async function getInfluxDataV1(influxConfig, field, timeStart, timeEnd, d
         }
     });
     if (!response.ok) {
-        console.log(response);
         throw new Error(`Failed to fetch data from InfluxDB: ${response.statusText}`);
     }
     const data = await response.json();
@@ -72,61 +145,34 @@ export async function getInfluxDataV1(influxConfig, field, timeStart, timeEnd, d
             }
         ];
     }
-    else {
-        // Always override the name to be the field
-        data.results[0].series.forEach((series) => {
-            series.name = field; // Force the series name to be the field name
-        });
-    }
-    return data;
-}
-export async function getManyMeasuresV1(influxConfig, fields, limit, offset, sort, deviceID, timeStart, timeEnd) {
-    if (fields.length > 0) {
-        const conditions = fields
-            .map((field) => `"valueName" = '${field}'`)
-            .join(" OR ");
-        let queryCount = `SELECT count(*) FROM "${influxConfig.measurement}" WHERE "deviceid" = '${deviceID}' AND (${conditions})`;
-        let queryPagination = `SELECT "valueName", "value" FROM "${influxConfig.measurement}" WHERE "deviceid" = '${deviceID}' AND (${conditions})`;
-        if (timeStart) {
-            queryCount += ` AND time >= '${moment.unix(timeStart).toISOString()}'`;
-            queryPagination += ` AND time >= '${moment
-                .unix(timeStart)
-                .toISOString()}'`;
-        }
-        if (timeEnd) {
-            queryCount += ` AND time <= '${moment.unix(timeEnd).toISOString()}'`;
-            queryPagination += ` AND time <= '${moment.unix(timeEnd).toISOString()}'`;
-        }
-        if (sort && sort.field === "time") {
-            queryPagination = `${queryPagination} ORDER BY "${sort.field}" ${sort.sort}`;
-        }
-        queryPagination = `${queryPagination} LIMIT ${limit} OFFSET ${offset}`;
-        const responses = await Promise.all([
-            fetch(encodeURI(`${influxConfig.url}/query?db=${influxConfig.dbName}&epoch=s&q=${queryPagination}`), {
-                headers: {
-                    Authorization: `Basic ${btoa(`${influxConfig.username}:${influxConfig.password}`)}`
-                }
-            }),
-            fetch(encodeURI(`${influxConfig.url}/query?db=${influxConfig.dbName}&epoch=s&q=${queryCount}`), {
-                headers: {
-                    Authorization: `Basic ${btoa(`${influxConfig.username}:${influxConfig.password}`)}`
-                }
-            })
-        ]);
-        if (!responses[0].ok) {
-            throw new Error(`Failed to fetch data from InfluxDB: ${responses[0].statusText}`);
+    // Always override the name to be the field
+    data.results[0].series.forEach((series) => {
+        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 (preStartValue !== null && preStartValue !== undefined) {
+            // Insert the pre-start value at the beginning of the dataset
+            data.results[0].series[0].values.unshift([
+                timeStart - 1000000,
+                preStartValue
+            ]);
         }
-        const data = await responses[0].json();
-        const count = await responses[1].json();
-        return { data, count };
-    }
-    else {
-        return null;
+        // Set the last point as the timeEnd and last value of the dataset
+        const lastSeries = data.results[0].series[0];
+        const lastValue = lastSeries?.values &&
+            lastSeries.values.length > 0 &&
+            lastSeries.values.slice(-1)[0].length > 1
+            ? lastSeries.values.slice(-1)[0][1]
+            : null;
+        data.results[0].series[0].values.push([timeEnd + 1000000, lastValue]);
     }
+    return data;
 }
-export async function getFirstTimestamp(influxConfig, deviceID) {
-    // Query per ottenere il primo timestamp e il valore ordinato per "time" in modo crescente
-    const query = `SELECT "time", "value" FROM "${influxConfig.measurement}" WHERE "deviceid" = '${deviceID}' ORDER BY time ASC LIMIT 1`;
+export async function exportDataV1(influxConfig, field, timeStart, timeEnd, deviceID) {
+    const query = `SELECT ("value") FROM "${influxConfig.measurement}" WHERE "deviceid" = '${deviceID}' AND "valueName" = '${field}' AND time >= '${moment
+        .unix(timeStart)
+        .toISOString()}' AND time <= '${moment.unix(timeEnd).toISOString()}'`;
     const response = await fetch(encodeURI(`${influxConfig.url}/query?db=${influxConfig.dbName}&epoch=s&q=${query}`), {
         headers: {
             Authorization: `Basic ${btoa(`${influxConfig.username}:${influxConfig.password}`)}`
@@ -136,10 +182,22 @@ export async function getFirstTimestamp(influxConfig, deviceID) {
         throw new Error(`Failed to fetch data from InfluxDB: ${response.statusText}`);
     }
     const data = await response.json();
-    // Verifica che ci siano risultati nella risposta
-    if (data?.results[0]?.series && data?.results[0]?.series[0]?.values[0]?.[0]) {
-        // Ritorna il primo timestamp
-        return data.results[0].series[0].values[0][0];
+    // Ensure the name is manually set to the field
+    if (!data.results[0].series) {
+        // Set default value with null time and null value
+        data.results[0].series = [
+            {
+                name: field, // Manually set the series name as the field
+                columns: ["time", "value"],
+                values: [] // Set null point for time and value
+            }
+        ];
     }
-    return null; // Se non ci sono record, ritorna null
+    else {
+        // Always override the name to be the field
+        data.results[0].series.forEach((series) => {
+            series.name = field; // Force the series name to be the field name
+        });
+    }
+    return data;
 }

package/server-actions/trackle.d.ts

@@ -1,19 +1,20 @@
 export type TrackleConfig = {
+    orgName: string;
     apiUrl: string;
-    createCustomerUrl: string;
     clientId: string;
     clientSecret: string;
     tokenUrl: string;
     cookieName: string;
     cookieSecure: boolean;
     apiTimeout: number;
+    productID: number;
 };
 export declare function logOut(trackleConfig: TrackleConfig): Promise<void>;
 export declare function createCustomer(trackleConfig: TrackleConfig, uid: string): Promise<{
     organization: string;
     uid: string;
 }>;
-export declare function getDevices(trackleConfig: TrackleConfig, productId?: number, uid?: string, group?: string, selected?: string): Promise<{
+export declare function getDevices(trackleConfig: TrackleConfig, productId?: number, uid?: string, query?: string): Promise<{
     devices: any[];
 }>;
 export declare function getDevice(trackleConfig: TrackleConfig, id: string, productId?: number, uid?: string): Promise<{

package/server-actions/trackle.js

@@ -48,32 +48,19 @@ export async function logOut(trackleConfig) {
     cookies().delete(trackleConfig.cookieName);
 }
 export async function createCustomer(trackleConfig, uid) {
-    return await wretch(trackleConfig.createCustomerUrl)
+    return await wretch(`${trackleConfig.apiUrl}/orgs/${trackleConfig.orgName}/customers`)
         .headers({
         Authorization: `Basic ${btoa(`${trackleConfig.clientId}:${trackleConfig.clientSecret}`)}`
     })
         .post({ uid })
         .json();
 }
-export async function getDevices(trackleConfig, productId, uid, group, selected) {
-    let queryParams = "last_handshake_at!=null";
-    if (group !== "all") {
-        queryParams = `last_handshake_at!=null&state.groups=/${group}/`;
-        if (!uid) {
-            queryParams += "&quarantined=false";
-        }
-    }
-    else if (selected !== "all") {
-        queryParams = `last_handshake_at!=null&state.groups!=/${selected}/`;
-        if (!uid) {
-            queryParams += "&quarantined=false";
-        }
-    }
+export async function getDevices(trackleConfig, productId, uid, query) {
     const api = uid ? wretchApi(trackleConfig, uid) : wretchApi(trackleConfig);
     const response = await api
         .get(uid
-        ? `/devices?${queryParams}`
-        : `/products/${productId}/devices?${queryParams}`)
+        ? `/devices${query ? "?" + query : ""}`
+        : `/products/${productId}/devices${query ? "?" + query : ""}`)
         .setTimeout(trackleConfig.apiTimeout)
         .json();
     return (uid ? { devices: response } : response);

package/server-actions/types.d.ts

@@ -0,0 +1,19 @@
+export type FirebaseConfig = {
+    apiKey: string;
+    authDomain: string;
+    projectId: string;
+    storageBucket: string;
+    messagingSenderId: string;
+    appId: string;
+};
+export type InfluxConfig = {
+    url: string;
+    accessToken: string;
+    bucket: string;
+    orgId: string;
+    measurement: string;
+    dbName: string;
+    username: string;
+    password: string;
+};
+export type InfluxFillType = "null" | "none" | "previous";

package/server-actions/types.js

@@ -0,0 +1 @@
+export {};

package/types/user.d.ts

@@ -4,6 +4,7 @@ export type UserType = {
     name: string;
     picture?: string;
     role: string;
+    demo?: any;
     lastSignInAt?: number;
     firstname?: string;
     lastname?: string;