@iotready/nextjs-components-library 1.0.0-preview12 → 1.0.0-preview14

package/components/charts/TrendChart.d.ts

@@ -7,12 +7,13 @@ type Measure = {
     unit: string;
     stepped: boolean;
 };
-declare const TrendChart: ({ deviceId, measures, enableExportData, enableDatePicker, handleGetInfluxData, theme }: {
+declare const TrendChart: ({ deviceId, measures1, measures2, enableDatePicker, handleGetInfluxData, handleExportDataCB, theme }: {
     deviceId: string;
-    measures: Array<Measure>;
-    enableExportData: boolean;
+    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?: boolean) => Promise<any>;
+    handleExportDataCB?: (measure: string, timeStart: number, timeEnd: number, deviceId: string) => Promise<any>;
     theme: Theme;
 }) => import("react/jsx-runtime").JSX.Element;
 export default TrendChart;

package/components/charts/TrendChart.js

@@ -64,7 +64,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,
@@ -76,7 +88,6 @@ const lineOptions = {
                 drawOnChartArea: false,
             }
         },
-        y: {},
     },
 };
 const chartConfigByPeriod = {
@@ -175,7 +186,7 @@ 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, theme }) => {
+const TrendChart = ({ deviceId, measures1, measures2, enableDatePicker, handleGetInfluxData, handleExportDataCB, theme }) => {
     const [chartJsLoaded, setChartJsLoaded] = useState(false);
     const [dataMeasures, setDataMeasures] = useState(null);
     const [chartPeriod, setChartPeriod] = useState('1D');
@@ -191,6 +202,10 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
     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: {
@@ -220,8 +235,13 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
             ...options,
             scales: {
                 ...options.scales,
-                y: {
-                    ...options.scales.y,
+                y1: {
+                    ...options.scales.y1,
+                    min: 0,
+                    max: 1
+                },
+                y2: {
+                    ...options.scales.y2,
                     min: 0,
                     max: 1
                 }
@@ -258,12 +278,14 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
     };
     const handleExportData = async () => {
         setLoadingButton(true);
-        const data = await Promise.all(measures.map(async (measure) => {
-            return await handleGetInfluxData(measure.name, timeStart, timeEnd, deviceId, "0s", 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) {
@@ -272,11 +294,15 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
     }, [csvData]);
     const loadDatasets = async (chartPeriod) => {
         let intervalInSeconds = chartPeriod === "ALL" && !datePickerUsed && !zoomed ? 31536000 : timeEnd - timeStart;
-        const rawQuery = intervalInSeconds < 86400; // 
-        // Inizializza un array di promesse per ottenere i dati per ciascuna misura
-        const datasetsPromises = measures.map(async (measure) => {
+        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);
+            const influxData = await handleGetInfluxData(measure.name, timeStart, timeEnd, deviceId, polltime, !measure.polltime && rawQuery, !measure.polltime);
             const points = getChartPoints(influxData);
             return {
                 label: measure.name,
@@ -288,13 +314,14 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
                 pointHoverBackgroundColor: 'rgba(52, 125, 236, 0.5)',
                 change: !measure.polltime,
                 stepped: measure.stepped,
-                fill: false
+                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 min1 = null;
+        let max1 = null;
+        let min2 = null;
+        let max2 = null;
         let time;
         let minTime = null;
         datasets.forEach(dataset => {
@@ -304,37 +331,59 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
             }
             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 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;
-            paddedMin = Math.floor((min - diff) * 10) / 10;
-            paddedMax = Math.ceil((max + diff) * 10) / 10;
-        }
-        setDataMeasures([...datasets]);
+            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);
+        setDataMeasures(datasets);
         setTimeStartPicker(minTime || timeStart);
+        const scalesOptions = {
+            ...options.scales,
+            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(minTime || timeStart).toString(),
+                max: moment.unix(timeEnd).toString()
+            }
+        };
         setOptions({
             ...options,
-            scales: {
-                ...options.scales,
-                y: {
-                    ...options.scales.y,
-                    min: paddedMin,
-                    max: paddedMax,
-                },
-                x: {
-                    ...options.scales.x,
-                    min: moment.unix(minTime || timeStart).toString(),
-                    max: moment.unix(timeEnd).toString()
-                }
-            }
+            scales: scalesOptions
         });
     };
     useEffect(() => {
@@ -367,13 +416,13 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
         const prevMeasuresValue = prevMeasures.current || [];
         //@ts-ignore
         prevMeasures.current = measures;
-        if (!prevMeasuresValue || prevMeasuresValue.length !== measures.length || (prevMeasuresValue[0] && prevMeasuresValue[0].name !== measures[0].name)) {
+        if (!prevMeasuresValue || prevMeasuresValue.length !== measures?.length || (prevMeasuresValue[0] && prevMeasuresValue[0].name !== measures[0].name)) {
             setChartLoading(true);
         }
         loadDatasets(chartPeriod).then(() => {
             setChartLoading(false);
         });
-    }, [measures, timeEnd, timeStart]);
+    }, [measures1, timeEnd, timeStart, measures2]);
     useEffect(() => {
         const loadZoomPlugin = async () => {
             const zoomPlugin = (await import('chartjs-plugin-zoom')).default;
@@ -384,8 +433,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);
@@ -423,7 +488,7 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
                                     //@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: () => {
+                                        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") {
@@ -445,9 +510,11 @@ 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', 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: { mt: 2, height: '100%' }, children: chartJsLoaded && !chartLoading && typeof window !== 'undefined' ?
+                                }, 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: 2 }, children: _jsx(TimelineIcon, {}) }) })] })] }), _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-preview12",
+  "version": "1.0.0-preview14",
   "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",

package/server-actions/influx.d.ts

@@ -8,6 +8,6 @@ export type InfluxConfig = {
     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>;
+export declare function getInfluxAlarms(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?: boolean): Promise<any>;
+export declare function exportDataV1(influxConfig: InfluxConfig, field: string, timeStart: number, timeEnd: number, deviceID: string): Promise<any>;

package/server-actions/influx.js

@@ -1,44 +1,83 @@
 "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 getInfluxAlarms(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}))
+  `;
+    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
   `;
-
-  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;
+    if (sort && sort.field === "time" && sort.sort === "desc") {
+        query += ` |> sort(columns: ["_time"], desc: true)`;
+    }
+    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}`);
     }
-    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) {
+    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];
+    return {
+        data: rows,
+        count: countData
+    };
+}
+export async function getInfluxDataV1(influxConfig, field, timeStart, timeEnd, deviceID, timeGroup, raw, fill) {
     let query;
+    let preStartValue = null;
     if (raw) {
         query = `SELECT ("value") FROM "${influxConfig.measurement}" WHERE "deviceid" = '${deviceID}' AND "valueName" = '${field}' AND time >= '${moment
             .unix(timeStart)
@@ -49,7 +88,29 @@ export async function getInfluxDataV1(influxConfig, field, timeStart, timeEnd, d
             .unix(timeStart)
             .toISOString()}' AND time <= '${moment
             .unix(timeEnd)
-            .toISOString()}' GROUP BY time(${timeGroup}) fill(null)`;
+            .toISOString()}' GROUP BY time(${timeGroup})`;
+        if (fill) {
+            query += ` fill(none)`;
+        }
+        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}' 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 +118,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 +132,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 +169,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
+            }
+        ];
+    }
+    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 null; // Se non ci sono record, ritorna null
+    return data;
 }