@dexteel/mesf-core 4.3.2 → 4.4.0-alpha

package/CHANGELOG.md

@@ -1,4 +1,8 @@
 # CHANGELOG
+## 4.3.3
+ - Make submenu scrollable in Settings page
+## 4.3.2
+ - Fix MesfModal Export
 ## 4.0.0 - BREAKING CHANGE
 - Use ProfileProcedure structure in Profiles and Procedures Configuration
 ## USE 3.X if ProfileProcedure Structure is not used

package/dist/configuration/pages/asset/repositories/ConfigurationAssetRepository.d.ts

@@ -1,28 +1,4 @@
-export declare const updateAsset: (AssetIds: (number | string)[], ParentAssetId: number) => Promise<{
-    ok: false;
-    message: string;
-} | {
-    ok: true;
-    data: any;
-}>;
-export declare const insertAsset: (AssetName: string, ParentAssetId: number, CanBeDefaultAsset: boolean | null) => Promise<{
-    ok: false;
-    message: string;
-} | {
-    ok: true;
-    data: any;
-}>;
-export declare const UpdateAssetData: (AssetId: number, AssetName: string, ParentAssetId: number, IsAsset: boolean, CanBeDefaultAsset: boolean | null) => Promise<{
-    ok: false;
-    message: string;
-} | {
-    ok: true;
-    data: any;
-}>;
-export declare const removeAsset: (AssetId: number, IsActive: boolean) => Promise<{
-    ok: false;
-    message: string;
-} | {
-    ok: true;
-    data: any;
-}>;
+export declare const updateAsset: (AssetIds: (number | string)[], ParentAssetId: number) => Promise<import("../../../../services/ApiService").ResponseMESF>;
+export declare const insertAsset: (AssetName: string, ParentAssetId: number, CanBeDefaultAsset: boolean | null) => Promise<import("../../../../services/ApiService").ResponseMESF>;
+export declare const UpdateAssetData: (AssetId: number, AssetName: string, ParentAssetId: number, IsAsset: boolean, CanBeDefaultAsset: boolean | null) => Promise<import("../../../../services/ApiService").ResponseMESF>;
+export declare const removeAsset: (AssetId: number, IsActive: boolean) => Promise<import("../../../../services/ApiService").ResponseMESF>;

package/dist/configuration/pages/job/repositories/JobsRepository.d.ts

@@ -1,21 +1,3 @@
-export declare const GetJobsStatus: () => Promise<{
-    ok: false;
-    message: string;
-} | {
-    ok: true;
-    data: any;
-}>;
-export declare const SetJobEnable: (Enable: boolean, sProcedure: string) => Promise<{
-    ok: false;
-    message: string;
-} | {
-    ok: true;
-    data: any;
-}>;
-export declare const RestartJob: (sProcedure: string) => Promise<{
-    ok: false;
-    message: string;
-} | {
-    ok: true;
-    data: any;
-}>;
+export declare const GetJobsStatus: () => Promise<import("../../../../services/ApiService").ResponseMESF>;
+export declare const SetJobEnable: (Enable: boolean, sProcedure: string) => Promise<import("../../../../services/ApiService").ResponseMESF>;
+export declare const RestartJob: (sProcedure: string) => Promise<import("../../../../services/ApiService").ResponseMESF>;

package/dist/configuration/pages/log/repositories/LogsRepository.d.ts

@@ -1,7 +1 @@
-export declare const GetLogs: (Start: Date, End: Date, Search: string, LogTypeCode: number | string | null) => Promise<{
-    ok: false;
-    message: string;
-} | {
-    ok: true;
-    data: any;
-}>;
+export declare const GetLogs: (Start: Date, End: Date, Search: string, LogTypeCode: number | string | null) => Promise<import("../../../../services/ApiService").ResponseMESF>;

package/dist/configuration/pages/profiles/repositories/ProfilesRepository.d.ts

@@ -1,44 +1,8 @@
 import { Profile } from "../../profiles/models/Profile";
 import { Action } from "../models/Action";
-export declare const getProfiles: () => Promise<{
-    ok: false;
-    message: string;
-} | {
-    ok: true;
-    data: any;
-}>;
-export declare const upsertProfile: (ProfileId: number, ProfileName: string) => Promise<{
-    ok: false;
-    message: string;
-} | {
-    ok: true;
-    data: any;
-}>;
-export declare const getActions: () => Promise<{
-    ok: false;
-    message: string;
-} | {
-    ok: true;
-    data: any;
-}>;
-export declare const getActionsByProfileId: (profile: Profile) => Promise<{
-    ok: false;
-    message: string;
-} | {
-    ok: true;
-    data: any;
-}>;
-export declare const upsertProfileActions: (profile: Profile, actions: Action[]) => Promise<{
-    ok: false;
-    message: string;
-} | {
-    ok: true;
-    data: any;
-}>;
-export declare const deleteProfile: (profileId: number) => Promise<{
-    ok: false;
-    message: string;
-} | {
-    ok: true;
-    data: any;
-}>;
+export declare const getProfiles: () => Promise<import("../../../../services/ApiService").ResponseMESF>;
+export declare const upsertProfile: (ProfileId: number, ProfileName: string) => Promise<import("../../../../services/ApiService").ResponseMESF>;
+export declare const getActions: () => Promise<import("../../../../services/ApiService").ResponseMESF>;
+export declare const getActionsByProfileId: (profile: Profile) => Promise<import("../../../../services/ApiService").ResponseMESF>;
+export declare const upsertProfileActions: (profile: Profile, actions: Action[]) => Promise<import("../../../../services/ApiService").ResponseMESF>;
+export declare const deleteProfile: (profileId: number) => Promise<import("../../../../services/ApiService").ResponseMESF>;

package/dist/configuration/pages/shifCrew/repositories/ShiftsCrewsRepository.d.ts

@@ -1,22 +1,4 @@
 import { ShiftParameters } from "../models/ShiftParameters";
-export declare const getShiftParameters: () => Promise<{
-    ok: false;
-    message: string;
-} | {
-    ok: true;
-    data: any;
-}>;
-export declare const upsertShiftParameters: ({ PatternStart, ShiftCodes, Crews, CrewRotation, Comments, }: ShiftParameters) => Promise<{
-    ok: false;
-    message: string;
-} | {
-    ok: true;
-    data: any;
-}>;
-export declare const DeleteShiftParameters: (PatternStart: Date) => Promise<{
-    ok: false;
-    message: string;
-} | {
-    ok: true;
-    data: any;
-}>;
+export declare const getShiftParameters: () => Promise<import("../../../../services/ApiService").ResponseMESF>;
+export declare const upsertShiftParameters: ({ PatternStart, ShiftCodes, Crews, CrewRotation, Comments, }: ShiftParameters) => Promise<import("../../../../services/ApiService").ResponseMESF>;
+export declare const DeleteShiftParameters: (PatternStart: Date) => Promise<import("../../../../services/ApiService").ResponseMESF>;

package/dist/configuration/pages/users/repositories/UsersRepository.d.ts

@@ -1,32 +1,8 @@
 import { User } from "../models/User";
-export declare const getUsers: () => Promise<{
-    ok: false;
-    message: string;
-} | {
-    ok: true;
-    data: any;
-}>;
-export declare const getDataUser: (UserId: number | null) => Promise<{
-    ok: false;
-    message: string;
-} | {
-    ok: true;
-    data: any;
-}>;
-export declare const getProfiles: () => Promise<{
-    ok: false;
-    message: string;
-} | {
-    ok: true;
-    data: any;
-}>;
-export declare const deleteUser: (userId: number) => Promise<{
-    ok: false;
-    message: string;
-} | {
-    ok: true;
-    data: any;
-}>;
+export declare const getUsers: () => Promise<import("../../../../services/ApiService").ResponseMESF>;
+export declare const getDataUser: (UserId: number | null) => Promise<import("../../../../services/ApiService").ResponseMESF>;
+export declare const getProfiles: () => Promise<import("../../../../services/ApiService").ResponseMESF>;
+export declare const deleteUser: (userId: number) => Promise<import("../../../../services/ApiService").ResponseMESF>;
 export declare const setPassword: (userId: number, password: string) => Promise<{
     ok: boolean;
     data: any;
@@ -36,24 +12,6 @@ export declare const setPassword: (userId: number, password: string) => Promise<
     message: any;
     data?: undefined;
 }>;
-export declare const upsertUser: (user: User) => Promise<{
-    ok: false;
-    message: string;
-} | {
-    ok: true;
-    data: any;
-}>;
-export declare const getAuthTypes: () => Promise<{
-    ok: false;
-    message: string;
-} | {
-    ok: true;
-    data: any;
-}>;
-export declare const setProfilesToUser: (UserId: number, profileIds: number[]) => Promise<{
-    ok: false;
-    message: string;
-} | {
-    ok: true;
-    data: any;
-}>;
+export declare const upsertUser: (user: User) => Promise<import("../../../../services/ApiService").ResponseMESF>;
+export declare const getAuthTypes: () => Promise<import("../../../../services/ApiService").ResponseMESF>;
+export declare const setProfilesToUser: (UserId: number, profileIds: number[]) => Promise<import("../../../../services/ApiService").ResponseMESF>;

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export * from "./context/axiosInstance";
 export * from "./MESFMain";
 export * from "./components/modals/modal.mesf";
 export * from "./components/modals/error-modal";
+export * from './pages/trendings';
 export * from "./configuration";
 export * from "./context/UTLSettingContext";
 export * from "./context/assetContext";

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { Typography, TextField, makeStyles as makeStyles$1, Button as Button$1, Grid as Grid$1, Dialog as Dialog$1, DialogTitle as DialogTitle$2, DialogContent as DialogContent$2, DialogContentText, DialogActions as DialogActions$2, FormHelperText, CircularProgress as CircularProgress$1, Badge, FormControlLabel, Checkbox, Snackbar as Snackbar$1, Paper as Paper$1, MenuItem as MenuItem$1, useTheme as useTheme$1, createStyles as createStyles$1, List, ListItem, ListItemText } from '@material-ui/core';
+import { Typography, TextField, makeStyles as makeStyles$1, Button as Button$1, Grid as Grid$1, Dialog as Dialog$1, DialogTitle as DialogTitle$2, DialogContent as DialogContent$2, DialogContentText, DialogActions as DialogActions$2, FormHelperText, CircularProgress as CircularProgress$1, Badge, FormControlLabel, Checkbox, Snackbar as Snackbar$1, Paper as Paper$1, MenuItem as MenuItem$1, useTheme as useTheme$1, Box, Container as Container$1, createStyles as createStyles$1, List, ListItem, ListItemText } from '@material-ui/core';
 import { values, get, isNil as isNil$1, isEmpty } from 'lodash-es';
 import * as React from 'react';
 import React__default, { useState, useRef, useEffect, Component, createContext, useContext, useMemo, useCallback, lazy, Suspense } from 'react';
@@ -20,8 +20,16 @@ import Grid from '@material-ui/core/Grid';
 import { isNil, get as get$1 } from 'lodash';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import PersonPinCircleIcon from '@material-ui/icons/PersonPinCircle';
+import { Line } from 'react-chartjs-2';
+import { _adapters, Chart, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, TimeScale } from 'chart.js';
+import moment from 'moment';
 import axios from 'axios';
+import zoomPlugin from 'chartjs-plugin-zoom';
+import { Alert as Alert$3, TreeView as TreeView$1, TreeItem as TreeItem$1 } from '@material-ui/lab';
+import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
+import FolderIcon from '@material-ui/icons/Folder';
+import InsertDriveFileIcon from '@material-ui/icons/InsertDriveFile';
+import PersonPinCircleIcon from '@material-ui/icons/PersonPinCircle';
 import PropTypes from 'prop-types';
 import { ResponsiveBar } from '@nivo/bar';
 import Select from '@material-ui/core/Select';
@@ -29,7 +37,6 @@ import { withStyles, alpha, makeStyles, createStyles, useTheme } from '@material
 import Collapse from '@material-ui/core/Collapse';
 import SvgIcon from '@material-ui/core/SvgIcon';
 import Code from '@material-ui/icons/Code';
-import Folder from '@material-ui/icons/Folder';
 import TreeItem from '@material-ui/lab/TreeItem';
 import TreeView from '@material-ui/lab/TreeView';
 import { useSpring, animated } from 'react-spring';
@@ -39,7 +46,6 @@ import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
 import Typography$1 from '@material-ui/core/Typography';
-import moment from 'moment';
 import Snackbar from '@material-ui/core/Snackbar';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import Alert$2 from '@material-ui/lab/Alert';
@@ -65,7 +71,6 @@ import { ArrowRight } from '@material-ui/icons';
 import ImageIcon from '@material-ui/icons/Image';
 import ListAltIcon from '@material-ui/icons/ListAlt';
 import DescriptionIcon from '@material-ui/icons/Description';
-import { Alert as Alert$3 } from '@material-ui/lab';
 import FormControlLabel$1 from '@material-ui/core/FormControlLabel';
 import Checkbox$1 from '@material-ui/core/Checkbox';
 import Input from '@material-ui/core/Input';
@@ -414,7 +419,7 @@ var ModalTreeFilterControl = function (props) {
             nodes.isCode === true &&
                 React__default.createElement(Code, { className: classes.treeLabelIcon, htmlColor: "#1ABC9C" }),
             nodes.isCode === false &&
-                React__default.createElement(Folder, { className: classes.treeLabelIcon, htmlColor: '#F1C40F' }),
+                React__default.createElement(FolderIcon, { className: classes.treeLabelIcon, htmlColor: '#F1C40F' }),
             React__default.createElement(Typography, { variant: "body2", className: [classes.treeLabelText, (nodes.isActive ? '' : classes.treeLabelInactive)].join(' ') },
                 React__default.createElement("span", null,
                     nodes.isCode &&
@@ -997,8 +1002,8 @@ var Alert = function (props) {
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css$1 = ".lds-ring {\n  display: inline-block;\n  position: relative;\n  width: 80px;\n  height: 80px;\n}\n.lds-ring div {\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n  width: 64px;\n  height: 64px;\n  margin: 8px;\n  border: 5px solid rgb(63,81,181);\n  border-radius: 50%;\n  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border-color: rgb(63,81,181) transparent transparent transparent;\n}\n.lds-ring div:nth-child(1) {\n  animation-delay: -0.45s;\n}\n.lds-ring div:nth-child(2) {\n  animation-delay: -0.3s;\n}\n.lds-ring div:nth-child(3) {\n  animation-delay: -0.15s;\n}\n@keyframes lds-ring {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n";
-n(css$1,{});
+var css$2 = ".lds-ring {\n  display: inline-block;\n  position: relative;\n  width: 80px;\n  height: 80px;\n}\n.lds-ring div {\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n  width: 64px;\n  height: 64px;\n  margin: 8px;\n  border: 5px solid rgb(63,81,181);\n  border-radius: 50%;\n  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border-color: rgb(63,81,181) transparent transparent transparent;\n}\n.lds-ring div:nth-child(1) {\n  animation-delay: -0.45s;\n}\n.lds-ring div:nth-child(2) {\n  animation-delay: -0.3s;\n}\n.lds-ring div:nth-child(3) {\n  animation-delay: -0.15s;\n}\n@keyframes lds-ring {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n";
+n(css$2,{});
 
 var LazyLoading = function () {
     return (React__default.createElement(React__default.Fragment, null,
@@ -3790,7 +3795,7 @@ var ShiftsCrewsPage = function (props) {
 
 var TypeIcon = function (props) {
     if (props.droppable) {
-        return React__default.createElement(Folder, null);
+        return React__default.createElement(FolderIcon, null);
     }
     switch (props.fileType) {
         case "image":
@@ -7818,6 +7823,720 @@ var Home = function () { return (React__default.createElement("div", { style: {
         position: 'absolute'
     } })); };
 
+/*!
+  * chartjs-adapter-moment v1.0.1
+  * https://www.chartjs.org
+  * (c) 2022 chartjs-adapter-moment Contributors
+  * Released under the MIT license
+  */
+
+const FORMATS = {
+  datetime: 'MMM D, YYYY, h:mm:ss a',
+  millisecond: 'h:mm:ss.SSS a',
+  second: 'h:mm:ss a',
+  minute: 'h:mm a',
+  hour: 'hA',
+  day: 'MMM D',
+  week: 'll',
+  month: 'MMM YYYY',
+  quarter: '[Q]Q - YYYY',
+  year: 'YYYY'
+};
+
+_adapters._date.override(typeof moment === 'function' ? {
+  _id: 'moment', // DEBUG ONLY
+
+  formats: function() {
+    return FORMATS;
+  },
+
+  parse: function(value, format) {
+    if (typeof value === 'string' && typeof format === 'string') {
+      value = moment(value, format);
+    } else if (!(value instanceof moment)) {
+      value = moment(value);
+    }
+    return value.isValid() ? value.valueOf() : null;
+  },
+
+  format: function(time, format) {
+    return moment(time).format(format);
+  },
+
+  add: function(time, amount, unit) {
+    return moment(time).add(amount, unit).valueOf();
+  },
+
+  diff: function(max, min, unit) {
+    return moment(max).diff(moment(min), unit);
+  },
+
+  startOf: function(time, unit, weekday) {
+    time = moment(time);
+    if (unit === 'isoWeek') {
+      weekday = Math.trunc(Math.min(Math.max(0, weekday), 6));
+      return time.isoWeekday(weekday).startOf('day').valueOf();
+    }
+    return time.startOf(unit).valueOf();
+  },
+
+  endOf: function(time, unit) {
+    return moment(time).endOf(unit).valueOf();
+  }
+} : {});
+
+var formatDate = function (date) {
+    // Format: "MM/DD/YYYY HH:MM:SS.sss"
+    var day = date.getDate().toString();
+    var month = (date.getMonth() + 1).toString(); // getMonth() returns 0-11
+    var year = date.getFullYear();
+    var hours = date.getHours().toString();
+    var minutes = date.getMinutes().toString();
+    var seconds = date.getSeconds().toString();
+    var milliseconds = date.getMilliseconds().toString();
+    // Adding leading zeros for day, month, hours, minutes, and seconds if necessary
+    day = day.padStart(2, '0');
+    month = month.padStart(2, '0');
+    hours = hours.padStart(2, '0');
+    minutes = minutes.padStart(2, '0');
+    seconds = seconds.padStart(2, '0');
+    // Milliseconds to ensure 3 digits
+    milliseconds = milliseconds.padStart(3, '0');
+    return "".concat(month, "/").concat(day, "/").concat(year, " ").concat(hours, ":").concat(minutes, ":").concat(seconds, ".").concat(milliseconds);
+};
+var DateComponent = function (_a) {
+    var date = _a.date;
+    return React__default.createElement("div", null, formatDate(date));
+};
+
+var CustomOptionsComponent = function (_a) {
+    var customOptions = _a.customOptions, setCustomOptions = _a.setCustomOptions;
+    var handleGridChange = function (value) {
+        setCustomOptions(function (prevOptions) { return (__assign(__assign({}, prevOptions), { showGrid: value })); });
+    };
+    var handleSteppedChange = function (value) {
+        setCustomOptions(function (prevOptions) { return (__assign(__assign({}, prevOptions), { stepped: value })); });
+    };
+    return (React__default.createElement("div", null,
+        React__default.createElement("label", null,
+            React__default.createElement("input", { type: "checkbox", checked: customOptions.showGrid, onChange: function (e) { return handleGridChange(e.target.checked); } }),
+            "Show Grid"),
+        React__default.createElement("label", null,
+            React__default.createElement("input", { type: "checkbox", checked: customOptions.stepped, onChange: function (e) { return handleSteppedChange(e.target.checked); } }),
+            "Stepped")));
+};
+
+var css$1 = "/* ContextMenu.css */\n.context-menu {\n    position: absolute;\n    z-index: 1000;\n    background-color: #fff;\n    border: 1px solid #ddd;\n    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);\n    border-radius: 4px;\n    overflow: hidden;\n}\n\n    .context-menu ul {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n    }\n\n    .context-menu li {\n        padding: 8px 15px;\n        cursor: pointer;\n        border-bottom: 1px solid #eee;\n        background-color: #fff;\n        color: #333;\n        font-size: 14px;\n    }\n\n        .context-menu li:hover {\n            background-color: #f5f5f5;\n        }\n\n\n";
+n(css$1,{});
+
+var TagSelectionModal = function (_a) {
+    var isOpen = _a.isOpen; _a.onClose; var onTagSelect = _a.onTagSelect;
+    var _b = useState([]), treeData = _b[0], setTreeData = _b[1];
+    var _c = useState([]), expanded = _c[0], setExpanded = _c[1];
+    useEffect(function () {
+        var loadData = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var children;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!isOpen) return [3 /*break*/, 2];
+                        return [4 /*yield*/, fetchChildren('root')];
+                    case 1:
+                        children = _a.sent();
+                        setTreeData([{ tagId: null, tagName: 'root', children: children, isLoaded: true, shortName: 'Tags', tag: null }]);
+                        _a.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        }); };
+        loadData();
+    }, [isOpen]);
+    var fetchChildren = function (tagName, depth, maxDepth) {
+        if (depth === void 0) { depth = 0; }
+        if (maxDepth === void 0) { maxDepth = 3; }
+        return __awaiter(void 0, void 0, void 0, function () {
+            var response, childrenData, error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        // Limiting the recursion depth for safety
+                        if (depth > maxDepth) {
+                            return [2 /*return*/, []];
+                        }
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 4, , 5]);
+                        return [4 /*yield*/, axios.get("/Tag/".concat(tagName, "/children"))];
+                    case 2:
+                        response = _a.sent();
+                        return [4 /*yield*/, Promise.all(response.data.map(function (dbTag) { return __awaiter(void 0, void 0, void 0, function () {
+                                var childTagName, children;
+                                return __generator(this, function (_a) {
+                                    switch (_a.label) {
+                                        case 0:
+                                            childTagName = tagName !== 'root' ? tagName + '.' + dbTag.tagName : dbTag.tagName;
+                                            return [4 /*yield*/, fetchChildren(childTagName, depth + 1, maxDepth)];
+                                        case 1:
+                                            children = _a.sent();
+                                            return [2 /*return*/, {
+                                                    tagId: dbTag.tagId,
+                                                    tagName: childTagName,
+                                                    shortName: dbTag.tagName,
+                                                    children: children,
+                                                    isLoaded: true,
+                                                    tag: {
+                                                        tagId: dbTag.tagId,
+                                                        tagName: dbTag.tagName,
+                                                        tagType: dbTag.tagType,
+                                                        color: '#FF0000',
+                                                        autoScale: true,
+                                                        minScale: null,
+                                                        maxScale: null,
+                                                        visible: true
+                                                    }
+                                                }];
+                                    }
+                                });
+                            }); }))];
+                    case 3:
+                        childrenData = _a.sent();
+                        // Flatten the structure if needed or perform other transformations
+                        // ...
+                        return [2 /*return*/, childrenData];
+                    case 4:
+                        error_1 = _a.sent();
+                        console.error('Error fetching children:', error_1);
+                        return [2 /*return*/, []];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /* I have to get the grandchildren because the toggle action would not be triggered if no children */
+    var handleNodeToggle = function (event, nodeIds) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            console.log('Toggle:', nodeIds);
+            setExpanded(nodeIds);
+            return [2 /*return*/];
+        });
+    }); };
+    var handleNodeSelect = function (event, nodeId) { return __awaiter(void 0, void 0, void 0, function () {
+        var node;
+        return __generator(this, function (_a) {
+            //  console.log('Selected Node ID:', nodeId);
+            console.log('treeData', treeData);
+            node = findNode(treeData, nodeId);
+            if (node === null || node === void 0 ? void 0 : node.tagId) {
+                onTagSelect(node.tag);
+            }
+            return [2 /*return*/];
+        });
+    }); };
+    var findNode = function (nodes, tagName) {
+        for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
+            var node = nodes_1[_i];
+            if (node.tagName === tagName) {
+                return node;
+            }
+            else if (node.children) {
+                var found = findNode(node.children, tagName);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    };
+    var renderTree = function (node) { return (React__default.createElement(TreeItem$1, { key: node.tagName, nodeId: node.tagName, label: node.shortName, endIcon: React__default.createElement(ArrowDropDownIcon, null), icon: node.children && node.children.length > 0 ? React__default.createElement(FolderIcon, null) : React__default.createElement(InsertDriveFileIcon, null) }, node.children && node.children.map(function (child) { return renderTree(child); }))); };
+    return (React__default.createElement("div", { style: { display: isOpen ? 'block' : 'none' } },
+        React__default.createElement("div", null,
+            React__default.createElement(TreeView$1, { expanded: expanded, onNodeSelect: handleNodeSelect, onNodeToggle: handleNodeToggle }, treeData.map(function (tree) { return renderTree(tree); })))));
+};
+
+var TableComponent = function (_a) {
+    var tagList = _a.tagList, setTagList = _a.setTagList, cursorData = _a.cursorData, onDeleteTag = _a.onDeleteTag, onAddTag = _a.onAddTag;
+    var handleChange = function (index, value, property) {
+        setTagList(function (prev) { return prev.map(function (tag, currentIndex) {
+            var _a;
+            return currentIndex === index ? __assign(__assign({}, tag), (_a = {}, _a[property] = value, _a.autoScale = false, _a)) : tag;
+        }); });
+    };
+    var handleVisibilityChange = function (index, value) {
+        setTagList(function (prev) { return prev.map(function (tag, currentIndex) { return currentIndex === index ? __assign(__assign({}, tag), { visible: value }) : tag; }); });
+    };
+    var handleAutoScaleChange = function (index, value) {
+        setTagList(function (prev) { return prev.map(function (tag, currentIndex) { return currentIndex === index ? __assign(__assign({}, tag), { autoScale: value }) : tag; }); });
+    };
+    var _b = useState(null), selectedRowIndex = _b[0], setSelectedRowIndex = _b[1];
+    var _c = useState(false), modalOpen = _c[0], setModalOpen = _c[1];
+    var handleOpen = function () { return setModalOpen(true); };
+    var handleClose = function () { return setModalOpen(false); };
+    var ContextMenu = function (_a) {
+        var x = _a.x, y = _a.y, options = _a.options;
+        var handleContextMenuClick = function (e) {
+            e.stopPropagation(); // Prevent click inside the menu from closing it
+        };
+        return (React__default.createElement("div", { className: "context-menu", style: { top: y, left: x }, onClick: handleContextMenuClick },
+            React__default.createElement("ul", null, options.map(function (option) { return (React__default.createElement("li", { key: option.id, onClick: option.onClick }, option.label)); }))));
+    };
+    // Position state for the context menu
+    var _d = useState({ x: 0, y: 0 }), contextMenuPosition = _d[0], setContextMenuPosition = _d[1];
+    var contextMenuOptions = [
+        { id: 'delete', label: 'Remove Tag', onClick: function () { return handleDelete(); } },
+        { id: 'add', label: 'Add Tag', onClick: function () { return handleTagAdd(); } },
+        // ... other options
+    ];
+    var handleTagAdd = function () {
+        handleOpen();
+    };
+    var handleTagSelect = function (selectedTag) {
+        onAddTag(selectedTag);
+        handleClose();
+    };
+    var handleDelete = function (index) {
+        if (selectedRowIndex !== null) {
+            var tagToDelete = tagList[selectedRowIndex];
+            onDeleteTag(tagToDelete.tagId);
+            setSelectedRowIndex(null); // Reset the selected row index
+        }
+    };
+    useEffect(function () {
+        var handleGlobalClick = function (e) {
+            if (selectedRowIndex !== null) {
+                setSelectedRowIndex(null);
+            }
+        };
+        var handleKeyDown = function (e) {
+            if (e.key === "Escape" && selectedRowIndex !== null) {
+                setSelectedRowIndex(null);
+            }
+        };
+        // Attach event listeners
+        document.addEventListener('click', handleGlobalClick);
+        document.addEventListener('keydown', handleKeyDown);
+        // Cleanup function
+        return function () {
+            document.removeEventListener('click', handleGlobalClick);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [selectedRowIndex]);
+    var handleRowClick = function (index) {
+        setSelectedRowIndex(index);
+    };
+    var handleRightClick = function (event, index) {
+        event.preventDefault();
+        event.stopPropagation(); // Prevent the click event from propagating to the document
+        setSelectedRowIndex(index);
+        setContextMenuPosition({ x: event.clientX, y: event.clientY });
+    };
+    var modalStyle = {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: 600,
+        minHeight: 800,
+        bgcolor: 'background.paper',
+        border: '2px solid #000',
+        boxShadow: 24,
+        p: 4
+    };
+    return (React__default.createElement("div", null,
+        React__default.createElement("table", { cellPadding: '5px' },
+            React__default.createElement("thead", null,
+                React__default.createElement("tr", null,
+                    React__default.createElement("th", null, "Visible"),
+                    React__default.createElement("th", null, "Tag Name"),
+                    React__default.createElement("th", null, "Color"),
+                    React__default.createElement("th", null, "Min Scale"),
+                    React__default.createElement("th", null, "Max Scale"),
+                    React__default.createElement("th", null, "AutoScale"),
+                    React__default.createElement("th", null, "X"),
+                    React__default.createElement("th", null, "Y"))),
+            React__default.createElement("tbody", null, tagList.map(function (tag, index) { return (React__default.createElement("tr", { key: tag.tagName, onClick: function () { return handleRowClick(index); }, onContextMenu: function (e) { return handleRightClick(e, index); }, className: selectedRowIndex === index ? "selected-row" : "" },
+                React__default.createElement("td", null,
+                    React__default.createElement("input", { type: "checkbox", checked: tag.visible, onChange: function (e) { return handleVisibilityChange(index, e.target.checked); } })),
+                React__default.createElement("td", null, tag.tagName),
+                React__default.createElement("td", null,
+                    React__default.createElement("div", { style: {
+                            backgroundColor: tag.color,
+                            width: '20px',
+                            height: '20px'
+                        } })),
+                React__default.createElement("td", null,
+                    React__default.createElement("input", { type: "text", style: { width: '100%' }, value: tag.minScale, onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
+                            var value = e.target.value;
+                            var numericValue = Number(value);
+                            // Check if the value is a number and not empty
+                            handleChange(index, numericValue, 'minScale');
+                        } })),
+                React__default.createElement("td", null,
+                    React__default.createElement("input", { type: "text", style: { width: '100%' }, value: tag.maxScale, onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
+                            var value = e.target.value;
+                            var numericValue = Number(value);
+                            // Check if the value is a number and not empty
+                            if (!isNaN(numericValue) && value.trim() !== '') {
+                                handleChange(index, numericValue, 'maxScale');
+                            }
+                        } })),
+                React__default.createElement("td", null,
+                    React__default.createElement("input", { type: "checkbox", checked: tag.autoScale, onChange: function (e) { return handleAutoScaleChange(index, e.target.checked); } })),
+                React__default.createElement("td", null, cursorData ? (function () {
+                    var date = new Date(cursorData.x);
+                    var formattedDate = date.toLocaleString('en-US', {
+                        hour12: false,
+                        month: 'short',
+                        day: 'numeric',
+                        hour: '2-digit',
+                        minute: '2-digit',
+                        second: '2-digit'
+                    });
+                    var milliseconds = date.getMilliseconds().toString().padStart(3, '0');
+                    return "".concat(formattedDate, ".").concat(milliseconds);
+                })() : null),
+                React__default.createElement("td", null, cursorData ? cursorData.values[index] : null))); }))),
+        selectedRowIndex !== null && (React__default.createElement(ContextMenu, { x: contextMenuPosition.x, y: contextMenuPosition.y, options: contextMenuOptions })),
+        React__default.createElement(MesfModal, { open: modalOpen, handleClose: handleClose, "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description" },
+            React__default.createElement(MesfModal.Content, null,
+                React__default.createElement(Box, { sx: modalStyle },
+                    React__default.createElement(Typography, { id: "modal-modal-title", variant: "h6", component: "h2" }, "Tags"),
+                    React__default.createElement(Typography, { id: "modal-modal-description" },
+                        React__default.createElement(TagSelectionModal, { isOpen: modalOpen, onClose: function () { return handleClose; }, onTagSelect: handleTagSelect })))))));
+};
+
+Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, TimeScale, zoomPlugin);
+function getVerticalLinePlugin(setCursorData) {
+    return {
+        id: 'verticalLinePlugin',
+        beforeInit: function (chart) {
+            var canvas = chart.canvas;
+            chart.mouseX = null;
+            canvas.addEventListener('mousemove', function (event) {
+                var rect = canvas.getBoundingClientRect();
+                chart.mouseX = event.clientX - rect.left;
+                var xScale = chart.scales.x;
+                var mouseXPixel = chart.mouseX - xScale.left; // Adjusting for the scale's position
+                var timeAtCursor = xScale.min + (mouseXPixel * (xScale.max - xScale.min) / xScale.width);
+                var valuesAtCursor = [];
+                // Loop through each dataset to find the previous y-values at the current x-position
+                chart.data.datasets.forEach(function (dataset) {
+                    // Find the closest preceding data point
+                    var previousDataPoint = null;
+                    for (var i = 0; i < dataset.data.length; i++) {
+                        if (dataset.data[i].x.getTime() <= timeAtCursor) {
+                            previousDataPoint = dataset.data[i];
+                        }
+                        else {
+                            break;
+                        }
+                    }
+                    if (previousDataPoint) {
+                        valuesAtCursor.push(previousDataPoint.y);
+                    }
+                });
+                setCursorData({ x: timeAtCursor, values: valuesAtCursor });
+                chart.draw();
+            });
+        },
+        afterDatasetsDraw: function (chart, args, options) {
+            if (chart.mouseX) {
+                var ctx = chart.ctx;
+                var x = chart.mouseX;
+                var topY = chart.chartArea.top;
+                var bottomY = chart.chartArea.bottom;
+                ctx.save();
+                ctx.beginPath();
+                ctx.moveTo(x, topY);
+                ctx.lineTo(x, bottomY);
+                ctx.strokeStyle = '#ff0000'; // Customize line color
+                ctx.lineWidth = 1; // Customize line width
+                ctx.stroke();
+                ctx.restore();
+            }
+        }
+    };
+}
+var Trending = function (_a) {
+    _a.title; var start = _a.start, end = _a.end, tags = _a.tags;
+    var _b = useState({
+        labels: [],
+        datasets: []
+    }), chartData = _b[0], setChartData = _b[1];
+    var _c = useState({
+        start: start,
+        end: end // assuming 'end' is a Date object
+    }), timeScope = _c[0], setTimeScope = _c[1];
+    var _d = useState(tags), tagList = _d[0], setTagList = _d[1];
+    var _e = useState(null), cursorData = _e[0], setCursorData = _e[1];
+    var verticalLinePlugin = getVerticalLinePlugin(setCursorData);
+    var _f = useState({
+        showGrid: true,
+        stepped: false
+    }), customOptions = _f[0], setCustomOptions = _f[1];
+    var _g = useState(true), loading = _g[0], setLoading = _g[1];
+    var _h = useState(''), error = _h[0], setError = _h[1];
+    var debounceTimerRef = useRef(null);
+    var handleZoom = function (_a) {
+        var chart = _a.chart;
+        console.log('detected');
+        if (debounceTimerRef.current) {
+            clearTimeout(debounceTimerRef.current);
+        }
+        debounceTimerRef.current = setTimeout(function () {
+            // Handle zoom event and execute fetch
+            var newStart = new Date(chart.scales.x.min);
+            var newEnd = new Date(chart.scales.x.max);
+            setTimeScope(function (prevData) { return (__assign(__assign({}, prevData), { start: newStart, end: newEnd })); });
+            console.log('change start / end' + newStart + ' - ' + newEnd);
+        }, 1000);
+    };
+    var handleDeleteTag = function (tagId) {
+        setTagList(function (prevTagList) { return prevTagList.filter(function (tag) { return tag.tagId !== tagId; }); });
+    };
+    var handleAddTag = function (newTag) {
+        if (newTag) {
+            setTagList(function (prevTagList) {
+                // Check if the tag is already in the list to avoid duplicates
+                if (prevTagList.some(function (tag) { return tag.tagId === newTag.tagId; })) {
+                    return prevTagList; // Return the existing list if the tag is already there
+                }
+                return __spreadArray(__spreadArray([], prevTagList, true), [newTag], false); // Add the new tag to the list
+            });
+        }
+    };
+    var _j = useState({
+        animation: {
+            duration: 0 // No animation
+        },
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+            x: {
+                type: 'time',
+                ticks: {
+                    // Customize tick behavior if needed
+                    autoSkip: true,
+                    maxTicksLimit: 20,
+                    callback: function (value, index, values) {
+                        // Extract the time and date from the current value
+                        var currentDate = new Date(value);
+                        var time = currentDate.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
+                        var date = currentDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+                        // For the first tick, return both date and time
+                        if (index === 0) {
+                            return [time, date];
+                        }
+                        // For subsequent ticks, compare the date with the previous tick
+                        var previousDate = new Date(values[index - 1].value);
+                        if (currentDate.getDate() !== previousDate.getDate() ||
+                            currentDate.getMonth() !== previousDate.getMonth() ||
+                            currentDate.getFullYear() !== previousDate.getFullYear()) {
+                            // If the date has changed, return both time and date
+                            return [time, date];
+                        }
+                        // If the date hasn't changed, return only the time
+                        return [time, ''];
+                    }
+                },
+                grid: {
+                    display: true
+                }
+            },
+            y: {
+                grid: {
+                    display: true
+                }
+            }
+        },
+        plugins: {
+            tooltip: { enabled: false },
+            legend: { display: false },
+            zoom: {
+                zoom: {
+                    wheel: { enabled: true, mode: 'x' },
+                    pinch: { enabled: true, mode: 'x' },
+                    onZoom: handleZoom,
+                    mode: 'x'
+                },
+                pan: {
+                    enabled: true,
+                    mode: 'x',
+                    onPan: handleZoom
+                }
+            }
+        }
+    }), chartOptions = _j[0], setChartOptions = _j[1];
+    useEffect(function () {
+        var fetchData = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var tagIds, response, series_1, axes_1, updatedSeries, error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        console.log('fetching data');
+                        setLoading(true);
+                        tagIds = tagList.map(function (tag) { return tag.tagId; });
+                        return [4 /*yield*/, axios.post('/series?nodeName=null', {
+                                start: timeScope.start.getTime(),
+                                end: timeScope.end.getTime(),
+                                tagIds: tagIds,
+                                sampleCount: 1000
+                            })];
+                    case 1:
+                        response = _a.sent();
+                        series_1 = response.data;
+                        axes_1 = [];
+                        tagList.forEach(function (tag, index) {
+                            if (tag.autoScale && series_1[index]) {
+                                var serieSamples = series_1[index].map(function (sample) { return sample.value; });
+                                var _a = calculateScales(Math.min.apply(Math, serieSamples), Math.max.apply(Math, serieSamples), 3), minScale = _a.minScale, maxScale = _a.maxScale;
+                                tag.minScale = minScale;
+                                tag.maxScale = maxScale;
+                            }
+                            var existingAxis = axes_1.find(function (existingTag) { return areRangesSimilar(existingTag, tag); });
+                            if (!existingAxis) {
+                                axes_1.push(tag); // Add new axis if no similar one exists
+                            }
+                        });
+                        axes_1.map(function (axis, index) {
+                            return {
+                                id: "y-axis-".concat(index),
+                                type: 'linear',
+                                display: axis.visible,
+                                scaleLabel: {
+                                    display: true,
+                                    labelString: axis.tagName
+                                },
+                                ticks: {
+                                    min: axis.autoScale ? undefined : axis.minScale,
+                                    max: axis.autoScale ? undefined : axis.maxScale
+                                },
+                                grid: {
+                                    display: true
+                                }
+                            };
+                        });
+                        setChartOptions(function (prevOptions) { return (__assign(__assign({}, prevOptions), { scales: __assign(__assign({}, prevOptions.scales), { y: { grid: { display: true } } }) })); });
+                        updatedSeries = series_1.map(function (serie, index) {
+                            var tag = tagList[index];
+                            var axisIndex = axes_1.findIndex(function (existingTag) { return areRangesSimilar(existingTag, tag); });
+                            return {
+                                yAxisID: "y-axis-".concat(axisIndex),
+                                data: serie.map(function (sample) { return ({
+                                    x: new Date(sample.timestamp),
+                                    y: sample.value
+                                }); }),
+                                borderColor: tag.color,
+                                hidden: !tag.visible,
+                                pointRadius: (serie.length <= 50) ? 3 : 0 // Example threshold
+                            };
+                        });
+                        setChartData({
+                            labels: [],
+                            datasets: updatedSeries
+                        });
+                        setLoading(false);
+                        return [3 /*break*/, 3];
+                    case 2:
+                        error_1 = _a.sent();
+                        console.error('Error fetching data:', error_1);
+                        setError('Failed to fetch data');
+                        setLoading(false);
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        }); };
+        fetchData();
+    }, [timeScope, tagList]);
+    useEffect(function () {
+        var changeOptions = function () {
+            console.log('change options');
+            setChartOptions(function (prevOptions) { return (__assign(__assign({}, prevOptions), { elements: {
+                    line: {
+                        stepped: customOptions.stepped,
+                        lineTension: 0.1
+                    }
+                }, scales: __assign(__assign({}, prevOptions.scales), { x: __assign(__assign({}, prevOptions.scales.x), { grid: __assign(__assign({}, prevOptions.scales.x.grid), { display: customOptions.showGrid }) }), y: __assign(__assign({}, prevOptions.scales.y), { grid: __assign(__assign({}, prevOptions.scales.y.grid), { display: customOptions.showGrid }) }) }) })); });
+        };
+        changeOptions();
+    }, [customOptions]);
+    function areRangesSimilar(tag1, tag2) {
+        var threshold = 1; // Define a threshold for "closeness"
+        // Helper function to safely compute logarithm, avoiding negative and zero values
+        var safeLog = function (value) {
+            if (value <= 0) {
+                return null; // or some safe value depending on your context
+            }
+            return Math.log(value);
+        };
+        var logTag1Min = safeLog(tag1.minScale);
+        var logTag1Max = safeLog(tag1.maxScale);
+        var logTag2Min = safeLog(tag2.minScale);
+        var logTag2Max = safeLog(tag2.maxScale);
+        // Check if any log value is null, which indicates an invalid comparison
+        if (logTag1Min === null || logTag1Max === null || logTag2Min === null || logTag2Max === null) {
+            return false;
+        }
+        var logDiffMin = Math.abs(logTag1Min - logTag2Min);
+        var logDiffMax = Math.abs(logTag1Max - logTag2Max);
+        return logDiffMin < threshold && logDiffMax < threshold;
+    }
+    function calculateScales(min, max, sigDigits) {
+        var roundToSignificantDigits = function (num) {
+            if (num === 0)
+                return 0;
+            var multiplier = Math.pow(10, sigDigits - Math.floor(Math.log10(Math.abs(num))) - 1);
+            return Math.round(num * multiplier) / multiplier;
+        };
+        var minScale = roundToSignificantDigits(min);
+        var maxScale = roundToSignificantDigits(max);
+        // Adjust minScale and maxScale if necessary
+        if (minScale > min) {
+            minScale *= .9;
+        }
+        if (maxScale < max) {
+            maxScale *= 1.1;
+        }
+        return { minScale: minScale, maxScale: maxScale };
+    }
+    if (error)
+        return React__default.createElement("p", null,
+            "Error: ",
+            error);
+    return (React__default.createElement("div", { className: "dashboard" },
+        React__default.createElement("div", { className: "header" },
+            React__default.createElement("div", { className: "date-pickers" },
+                React__default.createElement(DateComponent, { date: timeScope.start }),
+                React__default.createElement(DateComponent, { date: timeScope.end })),
+            React__default.createElement("div", { className: "options" },
+                React__default.createElement(CustomOptionsComponent, { customOptions: customOptions, setCustomOptions: setCustomOptions })),
+            React__default.createElement("div", { className: "buttons" },
+                React__default.createElement("button", null, "Button"),
+                React__default.createElement("button", null, "Button"))),
+        React__default.createElement("div", { className: "chart-container" },
+            React__default.createElement(Line, { data: chartData, options: chartOptions, plugins: [verticalLinePlugin] })),
+        React__default.createElement("div", { className: "table-container" },
+            React__default.createElement(TableComponent, { tagList: tagList, setTagList: setTagList, cursorData: cursorData, onDeleteTag: handleDeleteTag, onAddTag: handleAddTag })),
+        loading ? React__default.createElement("p", { className: "loading" }, "Loading...") : null));
+};
+
+// @flow
+var TrendingsIndex = function (props) {
+    var _a = useState(new Date('2023-11-16')), startDate = _a[0]; _a[1];
+    var _b = useState(new Date('2023-11-17')), endDate = _b[0]; _b[1];
+    return (React.createElement(Container$1, null,
+        React.createElement(Box, { p: 1 },
+            React.createElement(Paper, null,
+                React.createElement(Grid$1, { container: true, spacing: 3 },
+                    React.createElement(Grid$1, { item: true, xs: 12 },
+                        React.createElement(Trending, { title: "Trending Chart", start: startDate, end: endDate, tags: [
+                                { tagId: 29, tagName: 't1', tagType: 'number', color: 'red', autoScale: true, minScale: 0, maxScale: 100, visible: true },
+                                { tagId: 44, tagName: 't2', tagType: 'number', color: 'blue', autoScale: true, minScale: 0, maxScale: 100, visible: true },
+                                { tagId: 50, tagName: 't3', tagType: 'number', color: 'green', autoScale: true, minScale: 0, maxScale: 100, visible: true },
+                                { tagId: 46, tagName: 't4', tagType: 'number', color: 'black', autoScale: true, minScale: 0, maxScale: 100, visible: true },
+                            ] })))))));
+};
+
 var MESFMainRouter = function () {
     var CustomRoutes = useContext(RouterContext);
     return (React__default.createElement(React__default.Fragment, null,
@@ -7825,6 +8544,7 @@ var MESFMainRouter = function () {
             React__default.createElement(Route, { path: "/", element: React__default.createElement(Navigate, { replace: true, to: "/home" }) }),
             React__default.createElement(Route, { path: "/configuration/*", element: React__default.createElement(Configuration, null) }),
             React__default.createElement(Route, { path: "/account", element: React__default.createElement(Account, null) }),
+            React__default.createElement(Route, { path: "/trendings", element: React__default.createElement(TrendingsIndex, null) }),
             React__default.createElement(Route, { path: "/home", element: React__default.createElement(Home, null) })),
         React__default.createElement(CustomRoutes, null)));
 };
@@ -7853,7 +8573,7 @@ var Navigation = function (_a) {
         React__default.createElement(MESFMainContainer, null)));
 };
 
-var css = "body {\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  background-color: #fafbfc !important;\n}\n.container-fluid-main{\n  padding-right: 0px !important; \n  padding-left: 0px !important;\n}\n\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n    monospace;\n}\n\n.mes-primary-color {\n  background-color: #479dc4 !important;\n}\n.mes-button-primary{\n  background-color: #479dc4 !important;\n  border-color: #479dc4 !important;\n}\n\n.mes-selectable-datagrid .MuiDataGrid-row{\n  cursor: pointer;\n}\n\n.mes-menu-top .navbar-brand{\n  color: #FFFF !important;\n}\n.mes-menu-top .nav-link {\n  color: #FFFF !important;\n}\n.mes-menu-top .navbar-toggler {\n  color: #FFFF !important;\n}\n.mes-menu-top .navbar-text {\n  color: #FFFF !important;\n}\n.mes-footer-login{\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  height: 10em;\n  line-height: 60px;\n  text-align:center;\n}\n.mes-filter-datepicker{\n  padding: unset !important;\n  border-top-left-radius: 0 !important;\n  border-bottom-left-radius: 0 !important;\n  padding-top: 0.375rem !important;\n  padding-bottom: 0.375rem !important;\n  padding-left: 0.75rem !important;\n  cursor: pointer !important;\n  max-width: 120px;\n}\n.mes-filter-datetimepicker{\n  max-width: 97px;\n}\n.mes-not-rounded{\n  border-radius: unset !important;\n}\n\n.mes-numeric{\n  text-align: right;\n}\n.mes-drag-over{\n  border: 3px dotted #666;\n  background-color: #479dc4 !important;\n}\n.mes-drag-start{\n  border: 3px solid #666;\n}\n\n.mes-selectable{\n  cursor: pointer !important;\n}\n\n.mes-custom-select{\n  width: auto !important;\n  padding: 0.375rem 0 0.375rem 0 !important;\n  background: unset !important;\n  font-family: inherit !important;\n}\n.mes-custom-select .MuiSelect-select{\n  padding-left: 14px;\n}\n\n.mes-custom-select::before{\n  border-bottom: unset !important;\n}\n.mes-custom-select::after{\n  border-bottom: unset !important;\n}\n.mes-no-border{\n  border: unset;\n}\n.mes-no-border:focus-visible {\n  outline: unset;\n}\n.mes-div-submenu{\n  border-right: 1px solid #cfdbe2; \n}\n.mes-submenu a{\n  width: 100% !important;\n  /* color: rgba(0, 0, 0, 0.87); */\n  color: #479dc4\n}\n.mes-submenu .Mui-selected{\n  border-right: 3px solid #479dc4; \n}\n.mes-menu-group{\n    font-size: 20px;\n    line-height: 1.1;\n    color: #929292;  \n    font-weight: normal;    \n}\n\n/********************MUI DATAGRID*****************************/\n.Mui-selected{\n  font-weight: bolder !important;\n  opacity: 1 !important;\n}\n\n.mes-upload-control{\n\n}\n.mes-upload-control .file-box{\n  /* border : 1px solid black; */\n  height : 100px;\n  position: relative;  \n}\n.mes-upload-control .file-detail{\n  position: absolute;\n  left: 0px;\n  top: 0px; \n  z-index: 1;\n  height: 100%;\n  width: 100%;\n}\n\n.mes-upload-control input[type=file]{\n  left: 0px;\n  top: 0px;\n  opacity: 0;\n  z-index: 10000;\n  height: 100%;\n  cursor: pointer;\n}\n.mes-upload-control table{\n  width: 100%;\n}\n.mes-upload-control td{\n  font-size: 0.8rem !important;\n  max-width:0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;\n}\n\n\n.input-group-text{\n  background-color: #ced2cc !important;\n  /* border: 1px solid #ced4da !important; */\n  /* color: #000000 !important; */\n}\n\n\n\n\n.content-wrapper {\n  padding: 15px;\n  width: 100%;\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\n  margin-top: -1px;\n}\n.content-wrapper > .unwrap {\n  margin: -15px;\n}\n@media only screen and (min-width: 768px) {\n  .content-wrapper > .unwrap {\n    margin: -20px;\n  }\n}\n.content-wrapper > h3,\n.content-wrapper > .content-heading {\n  font-size: 24px;\n  line-height: 1.1;\n  color: #929292;\n  margin: -15px;\n  margin-bottom: 20px;\n  padding: 15px;\n  font-weight: normal;\n  background-color: #fafbfc;\n  border-bottom: 1px solid #cfdbe2;\n}\n.content-wrapper > h3 > small,\n.content-wrapper > .content-heading > small {\n  display: block;\n  font-size: 12px;\n  color: #909fa7;\n}\n.content-wrapper > button,\n.content-wrapper > .btn {\n  margin: 10px 10px 0 0;\n}\n.content-wrapper .container,\n.content-wrapper .container-fluid {\n  padding-left: 0;\n  padding-right: 0;\n}\n@media only screen and (min-width: 768px) {\n  .content-wrapper {\n    padding: 20px;\n  }\n  .content-wrapper > h3,\n  .content-wrapper > .content-heading {\n    margin: -20px;\n    margin-bottom: 5px;\n    padding: 15px;\n  }\n  .content-wrapper > button,\n  .content-wrapper > .btn {\n    margin: 0;\n  }\n}\n\n  @media print {\n    .sidebar,\n    .topnavbar,\n    .offsidebar,\n    .btn {\n      display: none !important;\n      width: 0 !important;\n      height: 0 !important;\n    }\n    .wrapper,\n    .wrapper > section,\n    .content-wrapper {\n      margin: 0 !important;\n      /* remove margin used for sidebar and expand the content */\n      padding: 0 !important;\n      width: 100% !important;\n    }\n    .content-wrapper {\n      overflow: hidden !important;\n    }\n  }\n  ";
+var css = "body {\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  background-color: #fafbfc !important;\n}\n.container-fluid-main{\n  padding-right: 0px !important; \n  padding-left: 0px !important;\n}\n\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n    monospace;\n}\n\n.mes-primary-color {\n  background-color: #479dc4 !important;\n}\n.mes-button-primary{\n  background-color: #479dc4 !important;\n  border-color: #479dc4 !important;\n}\n\n.mes-selectable-datagrid .MuiDataGrid-row{\n  cursor: pointer;\n}\n\n.mes-menu-top .navbar-brand{\n  color: #FFFF !important;\n}\n.mes-menu-top .nav-link {\n  color: #FFFF !important;\n}\n.mes-menu-top .navbar-toggler {\n  color: #FFFF !important;\n}\n.mes-menu-top .navbar-text {\n  color: #FFFF !important;\n}\n.mes-footer-login{\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  height: 10em;\n  line-height: 60px;\n  text-align:center;\n}\n.mes-filter-datepicker{\n  padding: unset !important;\n  border-top-left-radius: 0 !important;\n  border-bottom-left-radius: 0 !important;\n  padding-top: 0.375rem !important;\n  padding-bottom: 0.375rem !important;\n  padding-left: 0.75rem !important;\n  cursor: pointer !important;\n  max-width: 120px;\n}\n.mes-filter-datetimepicker{\n  max-width: 97px;\n}\n.mes-not-rounded{\n  border-radius: unset !important;\n}\n\n.mes-numeric{\n  text-align: right;\n}\n.mes-drag-over{\n  border: 3px dotted #666;\n  background-color: #479dc4 !important;\n}\n.mes-drag-start{\n  border: 3px solid #666;\n}\n\n.mes-selectable{\n  cursor: pointer !important;\n}\n\n.mes-custom-select{\n  width: auto !important;\n  padding: 0.375rem 0 0.375rem 0 !important;\n  background: unset !important;\n  font-family: inherit !important;\n}\n.mes-custom-select .MuiSelect-select{\n  padding-left: 14px;\n}\n\n.mes-custom-select::before{\n  border-bottom: unset !important;\n}\n.mes-custom-select::after{\n  border-bottom: unset !important;\n}\n.mes-no-border{\n  border: unset;\n}\n.mes-no-border:focus-visible {\n  outline: unset;\n}\n.mes-div-submenu{\n  border-right: 1px solid #cfdbe2;\n  overflow-y: scroll;\n  max-height: 80vh;\n}\n.mes-submenu a{\n  width: 100% !important;\n  /* color: rgba(0, 0, 0, 0.87); */\n  color: #479dc4\n}\n.mes-submenu .Mui-selected{\n  border-right: 3px solid #479dc4; \n}\n.mes-menu-group{\n    font-size: 20px;\n    line-height: 1.1;\n    color: #929292;  \n    font-weight: normal;    \n}\n\n/********************MUI DATAGRID*****************************/\n.Mui-selected{\n  font-weight: bolder !important;\n  opacity: 1 !important;\n}\n\n.mes-upload-control{\n\n}\n.mes-upload-control .file-box{\n  /* border : 1px solid black; */\n  height : 100px;\n  position: relative;  \n}\n.mes-upload-control .file-detail{\n  position: absolute;\n  left: 0px;\n  top: 0px; \n  z-index: 1;\n  height: 100%;\n  width: 100%;\n}\n\n.mes-upload-control input[type=file]{\n  left: 0px;\n  top: 0px;\n  opacity: 0;\n  z-index: 10000;\n  height: 100%;\n  cursor: pointer;\n}\n.mes-upload-control table{\n  width: 100%;\n}\n.mes-upload-control td{\n  font-size: 0.8rem !important;\n  max-width:0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;\n}\n\n\n.input-group-text{\n  background-color: #ced2cc !important;\n  /* border: 1px solid #ced4da !important; */\n  /* color: #000000 !important; */\n}\n\n\n\n\n.content-wrapper {\n  padding: 15px;\n  width: 100%;\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\n  margin-top: -1px;\n}\n.content-wrapper > .unwrap {\n  margin: -15px;\n}\n@media only screen and (min-width: 768px) {\n  .content-wrapper > .unwrap {\n    margin: -20px;\n  }\n}\n.content-wrapper > h3,\n.content-wrapper > .content-heading {\n  font-size: 24px;\n  line-height: 1.1;\n  color: #929292;\n  margin: -15px;\n  margin-bottom: 20px;\n  padding: 15px;\n  font-weight: normal;\n  background-color: #fafbfc;\n  border-bottom: 1px solid #cfdbe2;\n}\n.content-wrapper > h3 > small,\n.content-wrapper > .content-heading > small {\n  display: block;\n  font-size: 12px;\n  color: #909fa7;\n}\n.content-wrapper > button,\n.content-wrapper > .btn {\n  margin: 10px 10px 0 0;\n}\n.content-wrapper .container,\n.content-wrapper .container-fluid {\n  padding-left: 0;\n  padding-right: 0;\n}\n@media only screen and (min-width: 768px) {\n  .content-wrapper {\n    padding: 20px;\n  }\n  .content-wrapper > h3,\n  .content-wrapper > .content-heading {\n    margin: -20px;\n    margin-bottom: 5px;\n    padding: 15px;\n  }\n  .content-wrapper > button,\n  .content-wrapper > .btn {\n    margin: 0;\n  }\n}\n\n  @media print {\n    .sidebar,\n    .topnavbar,\n    .offsidebar,\n    .btn {\n      display: none !important;\n      width: 0 !important;\n      height: 0 !important;\n    }\n    .wrapper,\n    .wrapper > section,\n    .content-wrapper {\n      margin: 0 !important;\n      /* remove margin used for sidebar and expand the content */\n      padding: 0 !important;\n      width: 100% !important;\n    }\n    .content-wrapper {\n      overflow: hidden !important;\n    }\n  }\n  ";
 n(css,{});
 
 var base = document.getElementsByTagName('base')[0].getAttribute('href') || '/';
@@ -8000,4 +8720,4 @@ var areaSelector = /*#__PURE__*/Object.freeze({
     AreaSelector: AreaSelector
 });
 
-export { Account, AssetProvider, AuthContext, AuthProvider, BarChartControl, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, ErrorModal, FetchError, FilterPanel, GenericPanel, GenericTable, GetCrewColor, GetShiftColor, HorizontalTextControl, IntegerFormatter, Login, Logout, LongFilterPanel, MESApiService, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, MesfModal, ModalTreeFilterControl, MultipleSelectorControl, NumberFormatter, NumericTextControl, SimplePasswordControl, SimpleSelectorControl, SimpleTextAreaControl, SimpleTextControl, TimeFormatter, TreePickerControl, USER_LABELS, UTLSettingsProvider, UploadFileControl, UserProvider, axiosInstance, formatNumber, getCrewStyle, getError, getShiftStyle, getTokenFromLS, renewToken, useAssetContext, useToken, useUTLSettingsContext, useUserContext };
+export { Account, AssetProvider, AuthContext, AuthProvider, BarChartControl, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, ErrorModal, FetchError, FilterPanel, GenericPanel, GenericTable, GetCrewColor, GetShiftColor, HorizontalTextControl, IntegerFormatter, Login, Logout, LongFilterPanel, MESApiService, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, MesfModal, ModalTreeFilterControl, MultipleSelectorControl, NumberFormatter, NumericTextControl, SimplePasswordControl, SimpleSelectorControl, SimpleTextAreaControl, SimpleTextControl, TimeFormatter, TreePickerControl, TrendingsIndex, USER_LABELS, UTLSettingsProvider, UploadFileControl, UserProvider, axiosInstance, formatNumber, getCrewStyle, getError, getShiftStyle, getTokenFromLS, renewToken, useAssetContext, useToken, useUTLSettingsContext, useUserContext };

package/dist/pages/trendings/components/chart/DateComponent.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type Props = {
+    date: Date;
+};
+declare const DateComponent: React.FC<Props>;
+export default DateComponent;

package/dist/pages/trendings/components/chart/TableComponent.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { CursorData, TagList } from './Trending';
+import './ContextMenu.css';
+interface TableComponentProps {
+    tagList: TagList;
+    setTagList: React.Dispatch<React.SetStateAction<TagList>>;
+    cursorData: CursorData;
+    onDeleteTag: (tagId: number) => void;
+    onAddTag: (tagId: number) => void;
+}
+declare const TableComponent: React.FC<TableComponentProps>;
+export default TableComponent;

package/dist/pages/trendings/components/chart/TagSelectionModal.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Tag } from './Trending';
+interface TagSelectionModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onTagSelect: (tag: Tag) => void;
+}
+declare const TagSelectionModal: React.FC<TagSelectionModalProps>;
+export default TagSelectionModal;

package/dist/pages/trendings/components/chart/Trending.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import 'chartjs-adapter-moment/dist/chartjs-adapter-moment.esm.js';
+interface TrendingProps {
+    title: string;
+    start: Date;
+    end: Date;
+    tags: Tag[];
+}
+interface Sample {
+    timestamp: number;
+    value: number;
+}
+export type SampleArray = Sample[][];
+export interface Tag {
+    tagId: number;
+    tagName: string;
+    tagType: string;
+    color: string;
+    autoScale: boolean;
+    minScale: number;
+    maxScale: number;
+    visible: boolean;
+}
+export interface CursorData {
+    x: Date;
+    values: number[];
+}
+export interface CustomOptions {
+    showGrid: boolean;
+    stepped: boolean;
+}
+export type TagList = Tag[];
+declare const Trending: React.FC<TrendingProps>;
+export default Trending;

package/dist/pages/trendings/components/chart/customOptionsComponent.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { CustomOptions } from "./Trending";
+interface CustomOptionsComponentProps {
+    customOptions: CustomOptions;
+    setCustomOptions: React.Dispatch<React.SetStateAction<CustomOptions>>;
+}
+declare const CustomOptionsComponent: React.FC<CustomOptionsComponentProps>;
+export default CustomOptionsComponent;

package/dist/pages/trendings/index.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+type Props = {};
+export declare const TrendingsIndex: (props: Props) => React.JSX.Element;
+export {};

package/dist/pages/trendings/reducers/trendings.reducer.d.ts

@@ -0,0 +1 @@
+export declare const TrendingsReducer: import("@reduxjs/toolkit").Slice<{}, {}, "__">;

package/dist/repositorie/MESF-frontend-Repositorie.d.ts

@@ -1,28 +1,4 @@
-export declare const getUser: (UserId: number, UserName: string | null) => Promise<{
-    ok: false;
-    message: string;
-} | {
-    ok: true;
-    data: any;
-}>;
-export declare const getAssets: () => Promise<{
-    ok: false;
-    message: string;
-} | {
-    ok: true;
-    data: any;
-}>;
-export declare const getUTLSettings: () => Promise<{
-    ok: false;
-    message: string;
-} | {
-    ok: true;
-    data: any;
-}>;
-export declare const upsertDefaultAreaId: (UserId: number, DefaultAreaId: number | null) => Promise<{
-    ok: false;
-    message: string;
-} | {
-    ok: true;
-    data: any;
-}>;
+export declare const getUser: (UserId: number, UserName: string | null) => Promise<import("../services").ResponseMESF>;
+export declare const getAssets: () => Promise<import("../services").ResponseMESF>;
+export declare const getUTLSettings: () => Promise<import("../services").ResponseMESF>;
+export declare const upsertDefaultAreaId: (UserId: number, DefaultAreaId: number | null) => Promise<import("../services").ResponseMESF>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dexteel/mesf-core",
-  "version": "4.3.2",
+  "version": "4.4.0-alpha",
   "author": "Dexteel Team",
   "module": "dist/index.esm.js",
   "typings": "dist/index.d.ts",
@@ -61,6 +61,9 @@
     "@nivo/bar": "^0.79.1",
     "@nivo/core": "^0.79.0",
     "@reduxjs/toolkit": "^1.6.2",
+    "ag-grid-community": "^29.2.0",
+    "ag-grid-enterprise": "^29.2.0",
+    "ag-grid-react": "^29.2.0",
     "bootstrap": "^4.6.1",
     "moment": "^2.29.1",
     "prop-types": "^15.8.1",
@@ -71,10 +74,7 @@
     "react-spring": "^9.4.3",
     "rimraf": "^3.0.2",
     "string-to-color": "^2.2.2",
-    "use-complex-state": "^1.1.0",
-    "ag-grid-community": "^29.2.0",
-    "ag-grid-enterprise": "^29.2.0",
-    "ag-grid-react": "^29.2.0"
+    "use-complex-state": "^1.1.0"
   },
   "browserslist": {
     "production": [
@@ -95,7 +95,11 @@
     "@emotion/styled": "^11.11.0",
     "@minoru/react-dnd-treeview": "^3.4.4",
     "axios": "^1.3.5",
+    "chart.js": "^4.4.1",
+    "chartjs-adapter-moment": "^1.0.1",
+    "chartjs-plugin-zoom": "^2.0.1",
     "lodash-es": "^4.17.21",
+    "react-chartjs-2": "^5.2.0",
     "react-dnd": "^16.0.1",
     "string-to-color": "^2.2.2",
     "tsc": "^2.0.3"