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

package/components/charts/TrendChart.d.ts

@@ -1,6 +1,7 @@
 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;
@@ -8,15 +9,19 @@ type Measure = {
     unit: string;
     stepped: boolean;
 };
-declare const TrendChart: ({ deviceId, measures1, measures2, enableDatePicker, handleGetInfluxData, handleExportDataCB, theme, initialTimeStart, initialTimeEnd }: {
+declare const TrendChart: ({ deviceId, measures1, annotationsData, measures2, enableDatePicker, handleGetInfluxData, handleExportDataCB, theme, initialTimeStart, initialTimeEnd, dwEnabled, dwCallback, dwHandled }: {
     deviceId: string;
+    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, fill?: 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;
     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

@@ -20,6 +20,8 @@ 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,
@@ -186,8 +188,9 @@ function getCsvData(data, measures) {
     return csvData.map(row => row.join(',')).join('\n');
 }
 // eslint-disable-next-line no-unused-vars
-const TrendChart = ({ deviceId, measures1, measures2, enableDatePicker, handleGetInfluxData, handleExportDataCB, theme, initialTimeStart, initialTimeEnd }) => {
+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']);
@@ -258,22 +261,24 @@ const TrendChart = ({ deviceId, measures1, measures2, enableDatePicker, handleGe
         setSpanGapsOption(spanG);
     };
     const handleChange = (event, newPeriod) => {
-        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);
+        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 () => {
@@ -302,7 +307,7 @@ const TrendChart = ({ deviceId, measures1, measures2, enableDatePicker, handleGe
         ];
         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, !measure.polltime);
+            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.description || measure.name,
@@ -357,33 +362,106 @@ const TrendChart = ({ deviceId, measures1, measures2, enableDatePicker, handleGe
         };
         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;
+            }, {});
+        }
+        // 👇 Combina statiche + dinamiche
+        const annotations = {
+            // ...staticAnnotations,
+            ...dynamicAnnotations
+        };
+        // 👇 Configurazione completa
         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: scalesOptions
+            scales: {
+                ...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()
+                }
+            },
+            plugins: {
+                ...options.plugins,
+                annotation: {
+                    interaction: {
+                        mode: 'nearest',
+                        intersect: true
+                    },
+                    annotations
+                }
+            }
         });
     };
     useEffect(() => {
@@ -422,7 +500,7 @@ const TrendChart = ({ deviceId, measures1, measures2, enableDatePicker, handleGe
         loadDatasets(chartPeriod).then(() => {
             setChartLoading(false);
         });
-    }, [measures1, timeEnd, timeStart, measures2]);
+    }, [measures1, timeEnd, timeStart, measures2, annotentionsEnabled, annotationsData, dwEnabled]);
     useEffect(() => {
         const loadZoomPlugin = async () => {
             const zoomPlugin = (await import('chartjs-plugin-zoom')).default;
@@ -514,7 +592,7 @@ const TrendChart = ({ deviceId, measures1, measures2, enableDatePicker, handleGe
                                     '& .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' ?
+                                }, 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: [] }]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iotready/nextjs-components-library",
-  "version": "1.0.0-preview19",
+  "version": "1.0.0-preview20",
   "main": "index.js",
   "scripts": {
     "build": "rm -rf dist && tsc --project tsconfig.build.json && cp package.json dist/",
@@ -43,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 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>;
+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,7 +1,7 @@
 "use server";
 import { parse } from "csv-parse";
 import moment from "moment";
-export async function getInfluxAlarms(influxConfig, fields, limit, offset, sort, deviceID, timeStart, timeEnd) {
+export async function getInfluxAlerts(influxConfig, fields, limit, offset, sort, deviceID, timeStart, timeEnd) {
     const conditions = fields
         .map((field) => `r["valueName"] == "${field}"`)
         .join(" or ");
@@ -13,6 +13,10 @@ export async function getInfluxAlarms(influxConfig, fields, limit, offset, sort,
     }
     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 queryCount = `${query} |> group() |> count()`;
     query += ` 
@@ -70,35 +74,44 @@ export async function getInfluxAlarms(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) {
+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})`;
-        if (fill) {
+        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}' AND time < '${moment
+        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}`), {

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;