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

package/components/charts/TrendChart.d.ts

@@ -1,27 +1,26 @@
 import 'chartjs-adapter-moment';
 import 'moment/locale/it';
 import { Theme } from "@emotion/react";
-import { InfluxFillType } from '../../server-actions/types';
+import { FilterTagMode, InfluxFillType } from '../../server-actions/types';
 type Measure = {
     name: string;
     description: string;
     polltime: number;
+    dwPolltime?: number;
     unit: string;
     stepped: boolean;
 };
-declare const TrendChart: ({ deviceId, measures1, annotationsData, measures2, enableDatePicker, handleGetInfluxData, handleExportDataCB, theme, initialTimeStart, initialTimeEnd, dwEnabled, dwCallback, dwHandled }: {
+declare const TrendChart: ({ deviceId, measures1, annotationsDataFn, measures2, enableDatePicker, handleGetInfluxData, handleGetDwSlotsCB, handleExportDataCB, theme, initialTimeStart, initialTimeEnd }: {
     deviceId: string;
-    annotationsData?: Array<[any, any]>;
+    annotationsDataFn?: () => Promise<any>;
     measures1?: Array<Measure>;
     measures2?: Array<Measure>;
     enableDatePicker: boolean;
-    handleGetInfluxData: (measure: string, timeStart: number, timeEnd: number, deviceId: string, timeGroup: string, raw: boolean, fill?: InfluxFillType) => Promise<any>;
+    handleGetInfluxData: (measure: string, timeStart: number, timeEnd: number, deviceId: string, timeGroup: string, raw: boolean, fill?: InfluxFillType, filterTag?: number, includeTag?: FilterTagMode) => Promise<any>;
+    handleGetDwSlotsCB?: (timeStart: number, timeEnd: number, deviceID: string) => Promise<any>;
     handleExportDataCB?: (measure: string, timeStart: number, timeEnd: number, deviceId: string) => Promise<any>;
     theme: Theme;
     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

@@ -21,7 +21,7 @@ import { ThemeProvider } from '@mui/material/styles';
 import TimelineIcon from '@mui/icons-material/Timeline';
 import MuiTooltip from '@mui/material/Tooltip';
 import EditNoteIcon from '@mui/icons-material/EditNote';
-import AspectRatioIcon from '@mui/icons-material/AspectRatio';
+import { FilterTagMode } from '../../server-actions/types';
 const lineOptions = {
     parsing: false,
     normalized: true,
@@ -126,15 +126,15 @@ const chartConfigByPeriod = {
         scaleUnit: 'year',
     }
 };
-function getChartPoints(data) {
-    const points = data.results[0].series[0].values.map((row) => {
-        return {
-            x: moment.unix(row[0]),
-            y: row[1]
-        };
-    });
-    return points;
-}
+// function getChartPoints(data: any): Point[] {
+//   const points: Point[] = data.results[0].series[0].values.map((row: any) => {
+//     return {
+//       x: moment.unix(row[0]),
+//       y: row[1]
+//     }
+//   });
+//   return points;
+// }
 function getPollTime(intervalInSeconds, pollTime) {
     const CalculatedPollTime = Math.round(intervalInSeconds / 2880);
     if (CalculatedPollTime <= pollTime) {
@@ -145,51 +145,57 @@ function getPollTime(intervalInSeconds, pollTime) {
     }
 }
 function getCsvData(data, measures) {
-    // Initialize the header with timestamp and measure names
-    const headers = ["timestamp", ...measures.map(measure => measure.description || measure.name)];
-    const csvData = [];
-    // Add the header to the csvData
-    csvData.push(headers);
-    // Collect all timestamps and values for each measure
+    // Intestazioni CSV
+    const headers = [
+        'timestamp',
+        ...measures.map(m => m.description || m.name)
+    ];
+    const csvRows = [headers];
+    // Mappa temporale: ISO string → { timestamp, [measureName]: value, … }
     const timestampMap = {};
-    // Populate timestampMap with data for each timestamp
-    data.forEach((obj) => {
-        obj.results[0].series.forEach((series) => {
-            series.values.forEach((value) => {
-                const timestamp = moment.unix(value[0]).toISOString();
-                if (!timestampMap[timestamp]) {
-                    timestampMap[timestamp] = { timestamp: timestamp };
-                }
-                const measureName = series.name; // Assuming the series name corresponds to the measure name
-                if (measures.some(measure => measure.name === measureName)) {
-                    timestampMap[timestamp][measureName] = value[1]; // Assign the value to the measure
-                }
-            });
+    // Ogni serie corrisponde a measures[index]
+    data.forEach((series, index) => {
+        const measure = measures[index];
+        if (!measure)
+            return; // difesa su mismatch lunghezze
+        series.forEach(point => {
+            // usa moment per coerenza con prima versione
+            const ts = moment(point.x).toISOString();
+            if (!timestampMap[ts]) {
+                timestampMap[ts] = { timestamp: ts };
+            }
+            timestampMap[ts][measure.name] = point.y;
         });
     });
-    // 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];
+    // Ordina i timestamp
+    const sortedTs = Object.keys(timestampMap)
+        .sort((a, b) => new Date(a).getTime() - new Date(b).getTime());
+    // Costruisci le righe CSV
+    sortedTs.forEach(ts => {
+        const entry = timestampMap[ts];
+        // prima colonna timestamp, poi i valori nelle colonne in ordine measures[]
         const row = [entry.timestamp];
-        measures.forEach(measure => {
-            // Push the corresponding value or an empty string if undefined
-            row.push(entry[measure.name] !== undefined ? entry[measure.name] : "");
+        measures.forEach(m => {
+            row.push(entry[m.name] !== undefined
+                ? entry[m.name]
+                : '');
         });
-        // 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, add it to csvData
-        if (hasNonEmptyValues || row.length === 1) {
-            csvData.push(row);
+        // optional: filtra le righe che non hanno alcun valore utile
+        const hasValue = row.slice(1).some(v => v !== '' && v !== null);
+        if (hasValue) {
+            csvRows.push(row);
         }
     });
-    // Join rows into a CSV string
-    return csvData.map(row => row.join(',')).join('\n');
+    // Unisci in stringa
+    return csvRows
+        .map(r => r.join(','))
+        .join('\n');
 }
 // eslint-disable-next-line no-unused-vars
-const TrendChart = ({ deviceId, measures1, annotationsData, measures2, enableDatePicker, handleGetInfluxData, handleExportDataCB, theme, initialTimeStart, initialTimeEnd, dwEnabled, dwCallback, dwHandled }) => {
+const TrendChart = ({ deviceId, measures1, annotationsDataFn, measures2, enableDatePicker, handleGetInfluxData, handleGetDwSlotsCB, handleExportDataCB, theme, initialTimeStart, initialTimeEnd }) => {
     const [chartJsLoaded, setChartJsLoaded] = useState(false);
+    // Dichiarazione di annotationsData come funzione che ritorna una Promise<any>
+    const [annotationsData, setAnnotationsData] = useState([]);
     const [annotentionsEnabled, setAnnotationsEnabled] = useState(true);
     const [dataMeasures, setDataMeasures] = useState(null);
     const [chartPeriod, setChartPeriod] = useState('1D');
@@ -261,6 +267,20 @@ const TrendChart = ({ deviceId, measures1, annotationsData, measures2, enableDat
         setSpanGapsOption(spanG);
     };
     const handleChange = (event, newPeriod) => {
+        if (newPeriod == null) {
+            return;
+        }
+        if (chartPeriod === newPeriod) {
+            setChartLoading(true);
+            setZoomed(false);
+            setDatePickerUsed(false);
+            setCsvData('');
+            const periodConfig = chartConfigByPeriod[chartPeriod];
+            setTimeStart(Math.round(moment().subtract(periodConfig.from).valueOf() / 1000));
+            setTimeEnd(Math.round(moment().valueOf() / 1000));
+            setChartPeriod(chartPeriod);
+            setChartPeriodConfig(periodConfig);
+        }
         if (newPeriod && newPeriod !== chartPeriod) {
             setChartLoading(true);
             setZoomed(false);
@@ -297,9 +317,36 @@ const TrendChart = ({ deviceId, measures1, annotationsData, measures2, enableDat
             csvLinkRef.current?.link.click();
         }
     }, [csvData]);
+    useEffect(() => {
+        if (annotationsDataFn && annotentionsEnabled) {
+            (async () => {
+                const resp = await annotationsDataFn();
+                setAnnotationsData(resp);
+            })();
+        }
+    }, [annotationsDataFn, annotentionsEnabled]);
+    function getDwSlotsFromValues(dwValues) {
+        const slots = [];
+        let start = null;
+        for (const point of dwValues) {
+            if (point.y === 1 && start === null) {
+                start = point.x;
+            }
+            if (point.y === 0 && start !== null) {
+                slots.push({ start, end: point.x });
+                start = null;
+            }
+        }
+        return slots;
+    }
     const loadDatasets = async (chartPeriod) => {
         let intervalInSeconds = chartPeriod === "ALL" && !datePickerUsed && !zoomed ? 31536000 : timeEnd - timeStart;
         const rawQuery = intervalInSeconds < 86400;
+        let tempSlots = [];
+        if (handleGetDwSlotsCB) {
+            const dwValues = await handleGetDwSlotsCB(timeStart, timeEnd, deviceId);
+            tempSlots = getDwSlotsFromValues(dwValues);
+        }
         // Combine measures and track their source
         const allMeasures = [
             ...(measures1?.map(m => ({ ...m, source: 'measures1' })) || []),
@@ -307,11 +354,43 @@ const TrendChart = ({ deviceId, measures1, annotationsData, measures2, enableDat
         ];
         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);
+            let dwPoints = [];
+            let dwSlots = [];
+            if (measure.dwPolltime) {
+                const dwPolltime = getPollTime(intervalInSeconds, measure.dwPolltime);
+                // Query DW solo tag=100
+                const rawDwPoints = await handleGetInfluxData(measure.name, timeStart, timeEnd, deviceId, dwPolltime, false, "previous", 100, FilterTagMode.DW);
+                dwSlots = tempSlots;
+                if (dwSlots.length > 0) {
+                    dwPoints = rawDwPoints.filter((p) => dwSlots.some(slot => p.x >= slot.start && p.x <= slot.end));
+                }
+                else {
+                    dwPoints = rawDwPoints;
+                }
+            }
+            const stdRaw = await handleGetInfluxData(measure.name, timeStart, timeEnd, deviceId, polltime, !measure.polltime && rawQuery, !measure.polltime ? "none" : "null", 100, FilterTagMode.Exclude);
+            // Mappa sul formato Point
+            const stdPoints = stdRaw
+                .map((r) => ({ x: Number(r.x), y: r.y }))
+                .filter((p) => p.y !== null);
+            const filtered = dwSlots.length
+                ? stdPoints.filter((p) => !dwSlots.some(slot => p.x >= slot.start && p.x <= slot.end))
+                : stdPoints;
+            let combined;
+            // 6) Unisco e ordino
+            if (dwPoints.length > 2 && dwSlots.length > 0) {
+                combined = [...dwPoints, ...filtered]
+                    .sort((a, b) => a.x - b.x);
+            }
+            else if (dwPoints.length > 2 && dwSlots.length <= 0) {
+                combined = [...dwPoints];
+            }
+            else {
+                combined = [...filtered];
+            }
             return {
                 label: measure.description || measure.name,
-                data: points,
+                data: combined,
                 unit: measure.unit,
                 borderWidth: 2,
                 pointRadius: 1,
@@ -348,8 +427,8 @@ const TrendChart = ({ deviceId, measures1, annotationsData, measures2, enableDat
                 if (max2 === null || datasetMax > max2)
                     max2 = datasetMax;
             }
-            if (time && (minTime === null || time.unix() < minTime))
-                minTime = time.unix() - 86400;
+            if (time && (minTime === null || time < minTime))
+                minTime = Math.floor(time / 1000) - 86400;
         });
         const getPaddedMinMax = (min, max) => {
             if (min === null || max === null)
@@ -500,7 +579,7 @@ const TrendChart = ({ deviceId, measures1, annotationsData, measures2, enableDat
         loadDatasets(chartPeriod).then(() => {
             setChartLoading(false);
         });
-    }, [measures1, timeEnd, timeStart, measures2, annotentionsEnabled, annotationsData, dwEnabled]);
+    }, [measures1, timeEnd, timeStart, measures2, annotentionsEnabled, annotationsData]);
     useEffect(() => {
         const loadZoomPlugin = async () => {
             const zoomPlugin = (await import('chartjs-plugin-zoom')).default;
@@ -592,7 +671,7 @@ const TrendChart = ({ deviceId, measures1, annotationsData, measures2, enableDat
                                     '& .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' ?
+                                }, disabled: chartLoading, children: [_jsx(ToggleButton, { value: "1D", sx: { px: 1 }, children: "1d" }), _jsx(ToggleButton, { value: "1W", sx: { px: 1 }, children: "1w" }), _jsx(ToggleButton, { value: "1M", sx: { px: 1 }, children: "1M" }), _jsx(ToggleButton, { value: "3M", sx: { px: 1 }, children: "3M" }), _jsx(ToggleButton, { value: "6M", sx: { px: 1 }, children: "6M" }), _jsx(ToggleButton, { value: "1Y", sx: { px: 1 }, children: "1Y" }), _jsx(ToggleButton, { value: "ALL", sx: { px: 1 }, children: "ALL" })] }), _jsx(MuiTooltip, { placement: "top", arrow: true, title: "Connect point values", children: _jsx(ToggleButton, { value: "check", color: "primary", size: "small", selected: spanGapsOption, disabled: chartLoading, onChange: () => handleSpanGaps(!spanGapsOption), sx: { ml: 1 }, children: _jsx(TimelineIcon, {}) }) }), annotationsData !== undefined && (_jsx(MuiTooltip, { placement: "top", arrow: true, title: "Show annotations", children: _jsx(ToggleButton, { value: "check", color: "primary", size: "small", selected: annotentionsEnabled, disabled: chartLoading, onChange: () => setAnnotationsEnabled(!annotentionsEnabled), sx: { ml: 1 }, children: _jsx(EditNoteIcon, {}) }) }))] })] }), _jsx(Box, { component: 'div', className: "chart-container", sx: { mt: 2, height: '100%' }, children: chartJsLoaded && !chartLoading && typeof window !== 'undefined' ?
                     _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-preview20",
+  "version": "1.0.0-preview22",
   "main": "index.js",
   "scripts": {
     "build": "rm -rf dist && tsc --project tsconfig.build.json && cp package.json dist/",

package/server-actions/influx.d.ts

@@ -1,4 +1,5 @@
-import { InfluxConfig, InfluxFillType } from "./types";
+import { FilterTagMode, 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 getDwSlots(influxConfig: InfluxConfig, timeStart: number, timeEnd: number, deviceID: string): Promise<any>;
+export declare function getInfluxDataV1(influxConfig: InfluxConfig, field: string, timeStart: number, timeEnd: number, deviceID: string, timeGroup: string, raw: boolean, fill?: InfluxFillType, filterTag?: number, tagInclude?: FilterTagMode): Promise<any>;
 export declare function exportDataV1(influxConfig: InfluxConfig, field: string, timeStart: number, timeEnd: number, deviceID: string): Promise<any>;

package/server-actions/influx.js

@@ -1,6 +1,7 @@
 "use server";
 import { parse } from "csv-parse";
 import moment from "moment";
+import { FilterTagMode } from "./types";
 export async function getInfluxAlerts(influxConfig, fields, limit, offset, sort, deviceID, timeStart, timeEnd) {
     const conditions = fields
         .map((field) => `r["valueName"] == "${field}"`)
@@ -74,20 +75,65 @@ export async function getInfluxAlerts(influxConfig, fields, limit, offset, sort,
     });
     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) {
+export async function getDwSlots(influxConfig, timeStart, timeEnd, deviceID) {
+    const field = "dw";
+    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}`)}`
+        }
+    });
+    if (!response.ok) {
+        throw new Error(`Failed to fetch DW data: ${response.statusText}`);
+    }
+    const data = await response.json();
+    const series = data?.results?.[0]?.series?.[0];
+    if (!series?.values || !Array.isArray(series.values)) {
+        return data; // niente da fare, ritorna i dati grezzi
+    }
+    const values = series.values;
+    // Modifiche ai valori
+    if (values.length > 0) {
+        // Aggiungi punto all'inizio se il primo valore è 0
+        if (values[0][1] === 0) {
+            values.unshift([moment.unix(timeStart).unix(), 1]);
+        }
+        // Aggiungi punto alla fine se l'ultimo valore è 1
+        if (values[values.length - 1][1] === 1) {
+            values.push([moment.unix(timeEnd).unix(), 0]);
+        }
+    }
+    return data; // stessa struttura di Influx, con values modificati
+}
+export async function getInfluxDataV1(influxConfig, field, timeStart, timeEnd, deviceID, timeGroup, raw, fill, filterTag, tagInclude = FilterTagMode.Include) {
     let query;
     let preStartValue = null;
-    // Build filter for filterTag if provided
-    const filterTagCondition = filterTag !== undefined && filterTag !== null
-        ? ` AND ("d" = '${filterTag}' OR "d" !~ /./)`
-        : "";
+    // Costruzione filtro tag
+    let filterTagCondition = "";
+    if (filterTag !== undefined && filterTag !== null) {
+        switch (tagInclude) {
+            case FilterTagMode.Include:
+                filterTagCondition = ` AND ("d" = '${filterTag}' OR "d" !~ /./)`;
+                break;
+            case FilterTagMode.Exclude:
+                filterTagCondition = ` AND ("d" != '${filterTag}' OR "d" !~ /./)`;
+                break;
+            case FilterTagMode.DW:
+                filterTagCondition = ` AND "d" = '${filterTag}'`;
+                break;
+        }
+    }
     if (raw) {
         query = `SELECT ("value") FROM "${influxConfig.measurement}" WHERE "deviceid" = '${deviceID}' AND "valueName" = '${field}'${filterTagCondition} AND time >= '${moment
             .unix(timeStart)

package/server-actions/types.d.ts

@@ -16,4 +16,9 @@ export type InfluxConfig = {
     username: string;
     password: string;
 };
+export declare enum FilterTagMode {
+    Include = "include",// include tag + quelli senza tag
+    Exclude = "exclude",// esclude il tag
+    DW = "dw"
+}
 export type InfluxFillType = "null" | "none" | "previous";

package/server-actions/types.js

@@ -1 +1,6 @@
-export {};
+export var FilterTagMode;
+(function (FilterTagMode) {
+    FilterTagMode["Include"] = "include";
+    FilterTagMode["Exclude"] = "exclude";
+    FilterTagMode["DW"] = "dw"; // solo esattamente quel tag
+})(FilterTagMode || (FilterTagMode = {}));