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

package/components/charts/TrendChart.js

@@ -21,6 +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,
@@ -126,15 +127,6 @@ const chartConfigByPeriod = {
         scaleUnit: 'year',
     }
 };
-// 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) {
@@ -196,7 +188,7 @@ const TrendChart = ({ deviceId, measures1, annotationsDataFn, measures2, enableD
     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 [annotationsEnabled, setAnnotationsEnabled] = useState(true);
     const [dataMeasures, setDataMeasures] = useState(null);
     const [chartPeriod, setChartPeriod] = useState('1D');
     const [chartPeriodConfig, setChartPeriodConfig] = useState(chartConfigByPeriod['1D']);
@@ -318,13 +310,13 @@ const TrendChart = ({ deviceId, measures1, annotationsDataFn, measures2, enableD
         }
     }, [csvData]);
     useEffect(() => {
-        if (annotationsDataFn && annotentionsEnabled) {
+        if (annotationsDataFn && annotationsEnabled) {
             (async () => {
                 const resp = await annotationsDataFn();
                 setAnnotationsData(resp);
             })();
         }
-    }, [annotationsDataFn, annotentionsEnabled]);
+    }, [annotationsDataFn, annotationsEnabled]);
     function getDwSlotsFromValues(dwValues) {
         const slots = [];
         let start = null;
@@ -368,11 +360,7 @@ const TrendChart = ({ deviceId, measures1, annotationsDataFn, measures2, enableD
                     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 stdPoints = await handleGetInfluxData(measure.name, timeStart, timeEnd, deviceId, polltime, !measure.polltime && rawQuery, !measure.polltime ? "none" : "null", 100, FilterTagMode.Exclude);
             const filtered = dwSlots.length
                 ? stdPoints.filter((p) => !dwSlots.some(slot => p.x >= slot.start && p.x <= slot.end))
                 : stdPoints;
@@ -443,7 +431,7 @@ const TrendChart = ({ deviceId, measures1, annotationsDataFn, measures2, enableD
         const { paddedMin: paddedMin2, paddedMax: paddedMax2 } = getPaddedMinMax(min2, max2);
         // Handle undefined/null annotationsData
         let dynamicAnnotations = {};
-        if (Array.isArray(annotationsData) && annotationsData.length > 0 && annotentionsEnabled) {
+        if (Array.isArray(annotationsData) && annotationsData.length > 0 && annotationsEnabled) {
             dynamicAnnotations = annotationsData.reduce((acc, [timestamp, label], index) => {
                 const yVal = paddedMin1 !== null && paddedMin1 !== undefined
                     ? paddedMin1 + 0.01 * (paddedMax1 - paddedMin1)
@@ -579,7 +567,7 @@ const TrendChart = ({ deviceId, measures1, annotationsDataFn, measures2, enableD
         loadDatasets(chartPeriod).then(() => {
             setChartLoading(false);
         });
-    }, [measures1, timeEnd, timeStart, measures2, annotentionsEnabled, annotationsData]);
+    }, [measures1, timeEnd, timeStart, measures2, annotationsEnabled, annotationsData]);
     useEffect(() => {
         const loadZoomPlugin = async () => {
             const zoomPlugin = (await import('chartjs-plugin-zoom')).default;
@@ -671,7 +659,7 @@ const TrendChart = ({ deviceId, measures1, annotationsDataFn, measures2, enableD
                                     '& .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, {}) }) }))] })] }), _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("span", { 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("span", { children: _jsx(ToggleButton, { value: "check", color: "primary", size: "small", selected: annotationsEnabled, disabled: chartLoading, onChange: () => setAnnotationsEnabled(!annotationsEnabled), 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-preview22",
+  "version": "1.0.0-preview24",
   "main": "index.js",
   "scripts": {
     "build": "rm -rf dist && tsc --project tsconfig.build.json && cp package.json dist/",
@@ -20,7 +20,7 @@
     "chartjs-plugin-annotation": "^3.1.0",
     "chartjs-plugin-zoom": "^2.0.1",
     "csv-parse": "^5.6.0",
-    "firebase": "^10.13.1",
+    "firebase-admin": "^13.4.0",
     "leaflet": "^1.9.4",
     "leaflet-defaulticon-compatibility": "^0.1.2",
     "material-ui-confirm": "^3.0.16",

package/server-actions/annotations.d.ts

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

package/server-actions/annotations.js

@@ -1,14 +1,11 @@
 "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) => ({
+export const getAnnotations = async (db, deviceID) => {
+    const annotationsRef = db.collection("annotations");
+    const snapshot = await annotationsRef
+        .where("target", "==", deviceID)
+        .orderBy("createdAt", "desc")
+        .get();
+    return snapshot.docs.map((doc) => ({
         id: doc.id,
         ...doc.data()
     }));

package/server-actions/groups.d.ts

@@ -1,15 +1,15 @@
-import { FirebaseConfig } from "./types";
-export declare const getGroups: (firebaseConfig: FirebaseConfig, productID: number, userID?: string) => Promise<{
+import { Firestore } from "firebase-admin/firestore";
+export declare const getGroups: (db: Firestore, productID: number, userID?: string) => Promise<{
     id: string;
 }[]>;
-export declare const getGroupById: (firebaseConfig: FirebaseConfig, id: string) => Promise<{
+export declare const getGroupById: (db: Firestore, id: string) => Promise<{
     id: string;
 }>;
-export declare const createGroup: (firebaseConfig: FirebaseConfig, group: any) => Promise<string>;
-export declare const updateGroup: (firebaseConfig: FirebaseConfig, id: string, group: any) => Promise<any>;
-export declare const deleteGroup: (firebaseConfig: FirebaseConfig, id: string) => Promise<void>;
-export declare const getUsersGroup: (firebaseConfig: FirebaseConfig, groupID: string) => Promise<{
+export declare const createGroup: (db: Firestore, group: any) => Promise<string>;
+export declare const updateGroup: (db: Firestore, id: string, group: any) => Promise<any>;
+export declare const deleteGroup: (db: Firestore, id: string) => Promise<void>;
+export declare const getUsersGroup: (db: Firestore, groupID: string) => Promise<{
     id: string;
 }[]>;
-export declare const addUsersGroup: (firebaseConfig: FirebaseConfig, groupID: string, userName: string, userID: string) => Promise<string>;
-export declare const removeUserGroup: (firebaseConfig: FirebaseConfig, groupID: string, userID: string) => Promise<string | undefined>;
+export declare const addUsersGroup: (db: Firestore, groupID: string, userName: string, userID: string) => Promise<string>;
+export declare const removeUserGroup: (db: Firestore, groupID: string, userID: string) => Promise<string | undefined>;

package/server-actions/groups.js

@@ -1,87 +1,74 @@
 "use server";
-import { initializeApp } from "firebase/app";
-import { getDoc, doc, updateDoc, deleteDoc, collection, query, orderBy, getDocs, where, addDoc } from "@firebase/firestore";
-import { getFirestore } from "@firebase/firestore";
-export const getGroups = async (firebaseConfig, productID, userID) => {
-    // Initialize Firebase
-    const app = initializeApp(firebaseConfig);
-    const db = getFirestore(app);
-    const groupsQuery = query(collection(db, "groups"), where("productID", "==", productID), orderBy("created", "desc"));
+// 1. GET GROUPS
+export const getGroups = async (db, productID, userID) => {
+    const groupsRef = db
+        .collection("groups")
+        .where("productID", "==", productID)
+        .orderBy("created", "desc");
     let groupIds = null;
     if (userID) {
-        const usersGroupQuery = query(collection(db, "userGroups"), where("user.userId", "==", userID));
-        const userSnapshot = await getDocs(usersGroupQuery);
-        groupIds = userSnapshot.docs.map((ug) => ug.data().groupId);
+        const userGroupsSnapshot = await db
+            .collection("userGroups")
+            .where("user.userId", "==", userID)
+            .get();
+        groupIds = userGroupsSnapshot.docs.map((doc) => doc.data().groupId);
     }
-    const groupsSnapshot = await getDocs(groupsQuery);
-    if (groupIds) {
-        return groupsSnapshot.docs
-            .filter((entry) => groupIds?.includes(entry.id))
-            .map((doc) => ({
-            id: doc.id,
-            ...doc.data()
-        }));
-    }
-    return groupsSnapshot.docs.map((doc) => ({
+    const groupsSnapshot = await groupsRef.get();
+    return groupsSnapshot.docs
+        .filter((doc) => !groupIds || groupIds.includes(doc.id))
+        .map((doc) => ({
         id: doc.id,
         ...doc.data()
     }));
 };
-export const getGroupById = async (firebaseConfig, id) => {
-    const app = initializeApp(firebaseConfig);
-    const db = getFirestore(app);
-    const groupSnapshot = await getDoc(doc(db, "groups", id));
+// 2. GET GROUP BY ID
+export const getGroupById = async (db, id) => {
+    const docSnapshot = await db.collection("groups").doc(id).get();
     return {
-        id: groupSnapshot.id,
-        ...groupSnapshot.data()
+        id: docSnapshot.id,
+        ...docSnapshot.data()
     };
 };
-export const createGroup = async (firebaseConfig, group) => {
-    const created = new Date().toISOString();
+// 3. CREATE GROUP
+export const createGroup = async (db, group) => {
     const newGroup = {
         ...group,
-        created
+        created: new Date().toISOString()
     };
-    const app = initializeApp(firebaseConfig);
-    const db = getFirestore(app);
-    const docRef = await addDoc(collection(db, "groups"), newGroup);
+    const docRef = await db.collection("groups").add(newGroup);
     return docRef.id;
 };
-export const updateGroup = async (firebaseConfig, id, group) => {
-    const app = initializeApp(firebaseConfig);
-    const db = getFirestore(app);
-    const groupRef = doc(db, "groups", id);
-    await updateDoc(groupRef, group);
+// 4. UPDATE GROUP
+export const updateGroup = async (db, id, group) => {
+    await db.collection("groups").doc(id).update(group);
     return group;
 };
-export const deleteGroup = async (firebaseConfig, id) => {
-    const app = initializeApp(firebaseConfig);
-    const db = getFirestore(app);
-    const usersGroupQuery = query(collection(db, "userGroups"), where("groupId", "==", id));
-    const groupsSnapshot = await getDocs(usersGroupQuery);
-    groupsSnapshot.docs.forEach(async (ug) => {
-        const userGroupRef = doc(db, "userGroups", ug.id);
-        await deleteDoc(userGroupRef);
+// 5. DELETE GROUP
+export const deleteGroup = async (db, id) => {
+    const userGroupsSnapshot = await db
+        .collection("userGroups")
+        .where("groupId", "==", id)
+        .get();
+    const batch = db.batch();
+    userGroupsSnapshot.docs.forEach((doc) => {
+        batch.delete(doc.ref);
     });
-    const groupRef = doc(db, "groups", id);
-    await deleteDoc(groupRef);
+    batch.delete(db.collection("groups").doc(id));
+    await batch.commit();
 };
-// USERS GROUPS
-export const getUsersGroup = async (firebaseConfig, groupID) => {
-    // Initialize Firebase
-    const app = initializeApp(firebaseConfig);
-    const db = getFirestore(app);
-    const usersGroupQuery = query(collection(db, "userGroups"), where("groupId", "==", groupID));
-    const groupsSnapshot = await getDocs(usersGroupQuery);
-    return groupsSnapshot.docs.map((doc) => ({
+// 6. GET USERS GROUP
+export const getUsersGroup = async (db, groupID) => {
+    const snapshot = await db
+        .collection("userGroups")
+        .where("groupId", "==", groupID)
+        .get();
+    return snapshot.docs.map((doc) => ({
         id: doc.id,
         ...doc.data()
     }));
 };
-export const addUsersGroup = async (firebaseConfig, groupID, userName, userID) => {
-    // Initialize Firebase
-    const app = initializeApp(firebaseConfig);
-    const db = getFirestore(app);
+// 7. ADD USER TO GROUP
+export const addUsersGroup = async (db, groupID, userName, userID) => {
     const created = new Date().toISOString();
     const newUserGroup = {
         user: {
@@ -91,19 +78,19 @@ export const addUsersGroup = async (firebaseConfig, groupID, userName, userID) =
         groupId: groupID,
         created
     };
-    const docRef = await addDoc(collection(db, "userGroups"), newUserGroup);
+    const docRef = await db.collection("userGroups").add(newUserGroup);
     return docRef.id;
 };
-export const removeUserGroup = async (firebaseConfig, groupID, userID) => {
-    // Initialize Firebase
-    const app = initializeApp(firebaseConfig);
-    const db = getFirestore(app);
-    const usersGroupQuery = query(collection(db, "userGroups"), where("groupId", "==", groupID), where("user.userId", "==", userID));
-    const groupsSnapshot = await getDocs(usersGroupQuery);
-    if (groupsSnapshot.docs[0]) {
-        const userGroupId = groupsSnapshot.docs[0].id;
-        const groupRef = doc(db, "userGroups", userGroupId);
-        await deleteDoc(groupRef);
-        return userGroupId;
+// 8. REMOVE USER FROM GROUP
+export const removeUserGroup = async (db, groupID, userID) => {
+    const snapshot = await db
+        .collection("userGroups")
+        .where("groupId", "==", groupID)
+        .where("user.userId", "==", userID)
+        .get();
+    const doc = snapshot.docs[0];
+    if (doc) {
+        await doc.ref.delete();
+        return doc.id;
     }
 };

package/server-actions/influx.js

@@ -155,7 +155,7 @@ export async function getInfluxDataV1(influxConfig, field, timeStart, timeEnd, d
             query += ` fill(null)`;
         }
     }
-    if (fill) {
+    if (fill !== "null") {
         // 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)
@@ -196,7 +196,7 @@ export async function getInfluxDataV1(influxConfig, field, timeStart, timeEnd, d
         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 (fill !== "null") {
         if (preStartValue !== null && preStartValue !== undefined) {
             // Insert the pre-start value at the beginning of the dataset
             data.results[0].series[0].values.unshift([

package/server-actions/types.d.ts

@@ -1,11 +1,3 @@
-export type FirebaseConfig = {
-    apiKey: string;
-    authDomain: string;
-    projectId: string;
-    storageBucket: string;
-    messagingSenderId: string;
-    appId: string;
-};
 export type InfluxConfig = {
     url: string;
     accessToken: string;