@dexteel/mesf-core 4.5.9 → 4.6.0

package/dist/index.esm.js

@@ -1,5 +1,5 @@
-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, Tooltip, IconButton as IconButton$1, FormControl as FormControl$1, Select as Select$1, createStyles as createStyles$1, List, ListItem, ListItemText } from '@material-ui/core';
-import { values, get, isNil as isNil$1, isEmpty, isNaN, debounce } from 'lodash-es';
+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, Divider, Tooltip, IconButton as IconButton$1, FormControl as FormControl$1, Select as Select$1, debounce, createStyles as createStyles$1, List, ListItem, ListItemText } from '@material-ui/core';
+import { values, get, isNil as isNil$1, isEmpty, isNaN } from 'lodash-es';
 import * as React from 'react';
 import React__default, { useState, useRef, useEffect, Component, createContext, useContext, useMemo, useCallback, lazy, Suspense } from 'react';
 import { Alert as Alert$1, Modal as Modal$1, Navbar, Container, Nav, NavDropdown } from 'react-bootstrap';
@@ -20,17 +20,17 @@ 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 { ArrowRight, ChevronLeft, ChevronRight } from '@material-ui/icons';
+import moment from 'moment';
 import axios from 'axios';
 import { _adapters, Chart, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip as Tooltip$1, Legend, TimeScale } from 'chart.js';
-import moment from 'moment';
 import zoomPlugin from 'chartjs-plugin-zoom';
-import { Line } from 'react-chartjs-2';
 import Popover from '@material-ui/core/Popover';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import FolderIcon from '@material-ui/icons/Folder';
 import InsertDriveFileIcon from '@material-ui/icons/InsertDriveFile';
-import { Alert as Alert$3, TreeView as TreeView$1, TreeItem as TreeItem$1 } from '@material-ui/lab';
+import { Alert as Alert$3, TreeView as TreeView$1, TreeItem as TreeItem$1, Autocomplete } from '@material-ui/lab';
+import { ArrowRight, ChevronLeft, ChevronRight } from '@material-ui/icons';
+import { Line } from 'react-chartjs-2';
 import PersonPinCircleIcon from '@material-ui/icons/PersonPinCircle';
 import PropTypes from 'prop-types';
 import { ResponsiveBar } from '@nivo/bar';
@@ -1298,7 +1298,7 @@ var DialogTitle = withStyles(styles)(function (props) {
 var DialogContent = withStyles(function (theme) { return ({
     root: {
         padding: theme.spacing(2),
-        minWidth: 300
+        minWidth: 600
     }
 }); })(DialogContent$1);
 var DialogActions = withStyles(function (theme) { return ({
@@ -8155,7 +8155,7 @@ var AreaSelector$1 = lazy(function () {
         "default": mod.AreaSelector
     }); });
 });
-function Header(_a) {
+function Header$1(_a) {
     var _b = _a.showAreaSelector, showAreaSelector = _b === void 0 ? false : _b, _c = _a.navbarTitle, navbarTitle = _c === void 0 ? "MESF" : _c;
     var getUserName = useToken().getUserName;
     var _d = useState(""), error = _d[0], setError = _d[1];
@@ -8283,6 +8283,210 @@ var Home = function () { return (React__default.createElement("div", { style: {
         position: "absolute"
     } })); };
 
+var TrendingsInitialState = {
+    timeScopeStart: moment(new Date()).subtract(1, "days").toDate(),
+    timeScopeEnd: new Date(),
+    scope: "1 day",
+    graphPan: false,
+    graphShouldUpdate: 0,
+    views: [
+        {
+            ViewId: 0,
+            ViewName: '',
+            UserName: null,
+            IsPublic: false,
+            LastModified: null,
+            LastModifiedBy: null
+        }
+    ],
+    viewSelected: null,
+    viewTags: [
+        {
+            ViewId: 0,
+            TagId: 0,
+            TagName: '',
+            Color: '',
+            IsVisible: true,
+            MinScale: 0,
+            MaxScale: 0,
+            IsAutoScale: true,
+            Alias: '',
+            TagType: '',
+            Unit: ''
+        }
+    ]
+};
+var TrendingsReducer = createSlice({
+    name: "__",
+    initialState: TrendingsInitialState,
+    reducers: {
+        setTotalScope: function (state, _a) {
+            var payload = _a.payload; _a.type;
+            state.graphShouldUpdate += 1;
+            if (!isNil$1(payload.start) && !isNil$1(payload.end) && !isNil$1(payload.scope)) {
+                //from arrow navigators
+                state.timeScopeStart = payload.start;
+                state.timeScopeEnd = payload.end;
+                state.scope = payload.scope;
+                return;
+            }
+            if (!isNil$1(payload.scope)) {
+                if (payload.scope !== "custom") {
+                    switch (payload.scope) {
+                        case "10 min":
+                            state.timeScopeStart = moment(state.timeScopeEnd)
+                                .subtract(10, "minutes")
+                                .toDate();
+                            break;
+                        case "1 hour":
+                            state.timeScopeStart = moment(state.timeScopeEnd)
+                                .subtract(1, "hours")
+                                .toDate();
+                            break;
+                        case "4 hours":
+                            state.timeScopeStart = moment(state.timeScopeEnd)
+                                .subtract(4, "hours")
+                                .toDate();
+                            break;
+                        case "12 hours":
+                            state.timeScopeStart = moment(state.timeScopeEnd)
+                                .subtract(12, "hours")
+                                .toDate();
+                            break;
+                        case "1 day":
+                            state.timeScopeStart = moment(state.timeScopeEnd)
+                                .subtract(1, "days")
+                                .toDate();
+                            break;
+                        case "10 days":
+                            state.timeScopeStart = moment(state.timeScopeEnd)
+                                .subtract(10, "days")
+                                .toDate();
+                            break;
+                    }
+                }
+                state.scope = payload.scope;
+                return;
+            }
+            if (!isNil$1(payload.start) && !isNil$1(payload.end) && isNil$1(payload.graphPan)) {
+                // from zoom
+                state.timeScopeStart = payload.start;
+                state.timeScopeEnd = payload.end;
+                state.scope = "custom";
+                return;
+            }
+            if (!isNil$1(payload.start) && !isNil$1(payload.end) && !isNil$1(payload.graphPan)) {
+                // from pan
+                state.timeScopeStart = payload.start;
+                state.timeScopeEnd = payload.end;
+                return;
+            }
+            if (!isNil$1(payload.start)) {
+                state.timeScopeStart = payload.start;
+                if (state.scope !== "custom") {
+                    switch (state.scope) {
+                        case "10 min":
+                            state.timeScopeEnd = moment(payload.start)
+                                .add(10, "minutes")
+                                .toDate();
+                            break;
+                        case "1 hour":
+                            state.timeScopeEnd = moment(payload.start)
+                                .add(1, "hours")
+                                .toDate();
+                            break;
+                        case "4 hours":
+                            state.timeScopeEnd = moment(payload.start)
+                                .add(4, "hours")
+                                .toDate();
+                            break;
+                        case "12 hours":
+                            state.timeScopeEnd = moment(payload.start)
+                                .add(12, "hours")
+                                .toDate();
+                            break;
+                        case "1 day":
+                            state.timeScopeEnd = moment(payload.start)
+                                .add(1, "days")
+                                .toDate();
+                            break;
+                        case "10 days":
+                            state.timeScopeEnd = moment(payload.start)
+                                .add(10, "days")
+                                .toDate();
+                            break;
+                    }
+                }
+                return;
+            }
+            if (!isNil$1(payload.end)) {
+                state.timeScopeEnd = payload.end;
+                if (state.scope !== "custom") {
+                    switch (state.scope) {
+                        case "10 min":
+                            state.timeScopeStart = moment(payload.end)
+                                .subtract(10, "minutes")
+                                .toDate();
+                            break;
+                        case "1 hour":
+                            state.timeScopeStart = moment(payload.end)
+                                .subtract(1, "hours")
+                                .toDate();
+                            break;
+                        case "4 hours":
+                            state.timeScopeStart = moment(payload.end)
+                                .subtract(4, "hours")
+                                .toDate();
+                            break;
+                        case "12 hours":
+                            state.timeScopeStart = moment(payload.end)
+                                .subtract(12, "hours")
+                                .toDate();
+                            break;
+                        case "1 day":
+                            state.timeScopeStart = moment(payload.end)
+                                .subtract(1, "days")
+                                .toDate();
+                            break;
+                        case "10 days":
+                            state.timeScopeStart = moment(payload.end)
+                                .subtract(10, "days")
+                                .toDate();
+                            break;
+                    }
+                }
+                return;
+            }
+        },
+        setViews: function (state, _a) {
+            var payload = _a.payload;
+            state.views = payload;
+        },
+        setViewSelected: function (state, _a) {
+            var payload = _a.payload;
+            state.viewSelected = payload;
+        },
+        setViewTags: function (state, _a) {
+            var payload = _a.payload;
+            state.viewTags = payload;
+        }
+    }
+});
+
+var TrendingContext = createContext({
+    state: TrendingsReducer.getInitialState(),
+    actions: TrendingsReducer.actions
+});
+var useTrendingContext = function () { return useContext(TrendingContext); };
+var TrendingProvider = function (_a) {
+    var children = _a.children;
+    var _b = useComplexState({
+        initialState: TrendingsReducer.getInitialState(),
+        reducers: TrendingsReducer.caseReducers
+    }), state = _b[0], actions = _b[1];
+    return (React__default.createElement(TrendingContext.Provider, { value: { state: state, actions: actions } }, children));
+};
+
 /*!
   * chartjs-adapter-moment v1.0.1
   * https://www.chartjs.org
@@ -8422,8 +8626,9 @@ var ColorPicker = function (_a) {
 var TagSelectionModal = function (_a) {
     var isOpen = _a.isOpen; _a.onClose; var onTagSelect = _a.onTagSelect;
     var _b = useState(true), isLoading = _b[0], setIsLoading = _b[1];
-    var _c = useState([]), treeData = _c[0], setTreeData = _c[1];
-    var _d = useState([]), expanded = _d[0], setExpanded = _d[1];
+    var _c = useState(''), error = _c[0], setError = _c[1];
+    var _d = useState([]), treeData = _d[0], setTreeData = _d[1];
+    var _e = useState([]), expanded = _e[0], setExpanded = _e[1];
     var currentColorIndex = useRef(0);
     useEffect(function () {
         var loadData = function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -8438,8 +8643,8 @@ var TagSelectionModal = function (_a) {
                         children = _a.sent();
                         setTreeData([
                             {
-                                tagId: null,
-                                tagName: "root",
+                                TagId: null,
+                                TagName: "root",
                                 children: children,
                                 isLoaded: true,
                                 shortName: "Tags",
@@ -8488,20 +8693,19 @@ var TagSelectionModal = function (_a) {
                                         case 1:
                                             children = _a.sent();
                                             return [2 /*return*/, {
-                                                    tagId: dbTag.tagId,
-                                                    tagName: childTagName,
+                                                    TagId: dbTag.tagId,
+                                                    TagName: childTagName,
                                                     shortName: dbTag.tagName,
                                                     children: children,
                                                     isLoaded: true,
                                                     tag: {
-                                                        tagId: dbTag.tagId,
-                                                        tagName: dbTag.tagName,
-                                                        tagType: dbTag.tagType,
-                                                        color: getColor(),
-                                                        autoScale: true,
-                                                        minScale: null,
-                                                        maxScale: null,
-                                                        visible: true
+                                                        TagId: dbTag.tagId,
+                                                        TagName: dbTag.tagName,
+                                                        Color: getColor(),
+                                                        IsAutoScale: true,
+                                                        MinScale: dbTag.minScale,
+                                                        MaxScale: dbTag.maxScale,
+                                                        IsVisible: true
                                                     }
                                                 }];
                                     }
@@ -8514,7 +8718,7 @@ var TagSelectionModal = function (_a) {
                         return [2 /*return*/, childrenData];
                     case 4:
                         error_1 = _a.sent();
-                        console.error("Error fetching children:", error_1);
+                        setError(error_1.message);
                         return [2 /*return*/, []];
                     case 5: return [2 /*return*/];
                 }
@@ -8533,7 +8737,7 @@ var TagSelectionModal = function (_a) {
         var node;
         return __generator(this, function (_a) {
             node = findNode(treeData, nodeId);
-            if (node === null || node === void 0 ? void 0 : node.tagId) {
+            if (node === null || node === void 0 ? void 0 : node.TagId) {
                 onTagSelect(node.tag);
             }
             return [2 /*return*/];
@@ -8542,7 +8746,7 @@ var TagSelectionModal = function (_a) {
     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) {
+            if (node.TagName === tagName) {
                 return node;
             }
             else if (node.children) {
@@ -8553,100 +8757,383 @@ var TagSelectionModal = function (_a) {
         }
         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",
-            minHeight: "400px",
-            minWidth: "600px"
-        } },
-        React__default.createElement("div", null, isLoading ? (React__default.createElement(Grid$1, { container: true, justifyContent: "center", alignItems: "center", style: { minHeight: "100px" } },
-            React__default.createElement(CircularProgress$1, { size: "2rem" }))) : (React__default.createElement(TreeView$1, { expanded: expanded, onNodeSelect: handleNodeSelect, onNodeToggle: handleNodeToggle }, treeData.map(function (tree) { return renderTree(tree); }))))));
+    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(React__default.Fragment, null,
+        React__default.createElement("div", { style: {
+                display: isOpen ? "block" : "none",
+                minHeight: "400px",
+                minWidth: "600px"
+            } },
+            React__default.createElement("div", null, isLoading ? (React__default.createElement(Grid$1, { container: true, justifyContent: "center", alignItems: "center", style: { minHeight: "100px" } },
+                React__default.createElement(CircularProgress$1, { size: "2rem" }))) : (React__default.createElement(TreeView$1, { expanded: expanded, onNodeSelect: handleNodeSelect, onNodeToggle: handleNodeToggle }, treeData.map(function (tree) { return renderTree(tree); }))))),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
 };
 
 var AddTagModal = function (_a) {
     var open = _a.open, handleClose = _a.handleClose, onTagSelect = _a.onTagSelect;
-    return (React__default.createElement(MesfModal, { open: open, handleClose: handleClose, maxWidth: "lg", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Tags' },
-        React__default.createElement(MesfModal.Content, null,
-            React__default.createElement(Box, null,
-                React__default.createElement(Typography, { id: "modal-modal-description" },
-                    React__default.createElement(TagSelectionModal, { isOpen: open, onClose: function () { return handleClose; }, onTagSelect: onTagSelect }))))));
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(MesfModal, { open: open, handleClose: handleClose, maxWidth: "lg", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Tags' },
+            React__default.createElement(MesfModal.Content, null,
+                React__default.createElement(Box, null,
+                    React__default.createElement(Typography, { id: "modal-modal-description" },
+                        React__default.createElement(TagSelectionModal, { isOpen: open, onClose: function () { return handleClose; }, onTagSelect: onTagSelect })))))));
 };
 
-var useTagsDataTable = function (_a) {
-    var cursorData = _a.cursorData, tagList = _a.tagList, chartData = _a.chartData;
-    return useMemo(function () {
-        // calculo y1,y2,y2y1,ymin,ymax por cada tag
-        var _a;
-        var dataTable = {};
-        if (cursorData) {
-            var _loop_1 = function (idx) {
-                var tag = tagList[idx];
-                var datasetForTag = ((_a = chartData.datasets.find(function (ds) { return ds.tagId === tag.tagId; })) === null || _a === void 0 ? void 0 : _a.data) || [];
-                var p1 = { x: new Date('1900-01-01'), y: 0 };
-                var p2 = { x: new Date('1900-01-01'), y: 0 };
-                var p1Found = false;
-                var pmin = { x: 0, y: Number.POSITIVE_INFINITY };
-                var pmax = { x: 0, y: Number.NEGATIVE_INFINITY };
-                for (var idx_1 = 0; idx_1 < datasetForTag.length; idx_1++) {
-                    var curr = datasetForTag[idx_1];
-                    var currentVal = curr.x;
-                    if (!p1Found) {
-                        if (currentVal < cursorData.x1) {
-                            p1 = curr;
-                            p2 = JSON.parse(JSON.stringify(p1));
-                            pmin = JSON.parse(JSON.stringify(p1));
-                            pmax = JSON.parse(JSON.stringify(p1));
-                            continue;
-                        }
-                        else {
-                            p1Found = true;
-                        }
-                    }
-                    else {
-                        if (currentVal < cursorData.x2) {
-                            p2 = curr;
-                            if (pmin['y'] > curr['y']) {
-                                pmin = JSON.parse(JSON.stringify(curr));
-                            }
-                            if (pmax['y'] < curr['y']) {
-                                pmax = JSON.parse(JSON.stringify(curr));
-                            }
-                        }
-                        else {
-                            break;
-                        }
-                    }
-                }
-                dataTable[tag.tagName] = {
-                    y1: p1.y,
-                    y2: p2.y,
-                    y2y1: Number(p2.y) - Number(p1.y),
-                    pmin: pmin,
-                    pmax: pmax
-                };
-            };
-            for (var idx = 0; idx < tagList.length; idx++) {
-                _loop_1(idx);
-            }
-        }
-        return dataTable;
-    }, [tagList, chartData, cursorData]);
+var ButtonWithLoading = function (_a) {
+    var children = _a.children, isLoading = _a.isLoading, props = __rest(_a, ["children", "isLoading"]);
+    return (React__default.createElement(Button$1, __assign({}, props, { disabled: isLoading }),
+        isLoading && React__default.createElement(CircularProgress$1, { size: "1rem" }),
+        children));
 };
 
-var useTagsTableStyles = makeStyles$1(function (theme) { return ({
-    checkbox: {
-        '& input[type="checkbox"]': {
-            zoom: 1.5
-        },
-        textAlign: 'center'
-    },
-    rowHover: {
-        '&:hover': {
-            backgroundColor: "#f2f2f2"
+var saveTagDefaults = function (TagId, Alias, Color, MinScale, MaxScale, Unit) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                parameters = [];
+                parameters.push({ name: "TagId", value: TagId });
+                parameters.push({ name: "Alias", value: Alias });
+                parameters.push({ name: "Color", value: Color });
+                parameters.push({ name: "MinScale", value: MinScale });
+                parameters.push({ name: "MaxScale", value: MaxScale });
+                parameters.push({ name: "Unit", value: Unit });
+                return [4 /*yield*/, apiService.callV2("[mssql2022].[IH_100020].[ih].[SaveTagDefaults]", parameters)];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
         }
-    },
-    topTitles: {
-        border: "0.0625rem black solid",
+    });
+}); };
+//views
+var getViews = function (Search) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                parameters = [];
+                parameters.push({ name: "Search", value: Search });
+                return [4 /*yield*/, apiService.callV2("[mssql2022].[IH_100020].[ih].[GetViews]", parameters)];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
+        }
+    });
+}); };
+var getViewTags = function (ViewId) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                parameters = [];
+                parameters.push({ name: "ViewId", value: ViewId });
+                return [4 /*yield*/, apiService.callV2("[mssql2022].[IH_100020].[ih].[GetViewTags]", parameters)];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
+        }
+    });
+}); };
+var upsertView = function (ViewId, ViewName, isPublic) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                parameters = [];
+                parameters.push({ name: "ViewId", value: ViewId });
+                parameters.push({ name: "ViewName", value: ViewName });
+                parameters.push({ name: "isPublic", value: isPublic });
+                return [4 /*yield*/, apiService.callV2("[mssql2022].[IH_100020].[ih].[UpsertView]", parameters)];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
+        }
+    });
+}); };
+var upsertViewTag = function (ViewId, TagId, Color, MinScale, MaxScale, IsVisible, IsAutoScale) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                parameters = [];
+                parameters.push({ name: "ViewId", value: ViewId });
+                parameters.push({ name: "TagId", value: TagId });
+                parameters.push({ name: "Color", value: Color });
+                parameters.push({ name: "MinScale", value: MinScale });
+                parameters.push({ name: "MaxScale", value: MaxScale });
+                parameters.push({ name: "IsVisible", value: IsVisible });
+                parameters.push({ name: "IsAutoScale", value: IsAutoScale });
+                return [4 /*yield*/, apiService.callV2("[mssql2022].[IH_100020].[ih].[UpsertViewTag]", parameters)];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
+        }
+    });
+}); };
+
+var LoadViewModal = function (_a) {
+    var open = _a.open, handleClose = _a.handleClose;
+    var _b = useTrendingContext(), _c = _b.state; _c.viewTags; var views = _c.views, viewSelected = _c.viewSelected, _d = _b.actions; _d.setViews; var setViewTags = _d.setViewTags, setViewSelected = _d.setViewSelected;
+    var _e = useState(false), isLoading = _e[0], setIsLoading = _e[1];
+    var _f = useState(''), error = _f[0], setError = _f[1];
+    var handleSelect = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var viewTagsResp;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!viewSelected) return [3 /*break*/, 2];
+                    setIsLoading(true);
+                    return [4 /*yield*/, getViewTags(viewSelected.ViewId)];
+                case 1:
+                    viewTagsResp = _a.sent();
+                    if (viewTagsResp.ok) {
+                        setViewTags(viewTagsResp.data.tables[0].rows);
+                    }
+                    else {
+                        setError(viewTagsResp.message);
+                    }
+                    setIsLoading(false);
+                    handleClose();
+                    _a.label = 2;
+                case 2: return [2 /*return*/];
+            }
+        });
+    }); };
+    return (React__default.createElement("div", null,
+        React__default.createElement(MesfModal, { open: open, handleClose: handleClose, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Tags' },
+            React__default.createElement(MesfModal.Content, null,
+                React__default.createElement(Grid$1, { container: true },
+                    React__default.createElement(Grid$1, { item: true, md: 12 }, views.length ? (React__default.createElement(Autocomplete, { size: 'small', id: "list-of-views", options: views, getOptionLabel: function (option) { return option.ViewName; }, onChange: function (ev, val) { return setViewSelected(val); }, style: { width: "100%" }, renderInput: function (params) { return React__default.createElement(TextField, __assign({}, params, { label: "Views", variant: "outlined" })); } })) :
+                        (React__default.createElement("div", null, "No tag views detected, please add one"))))),
+            React__default.createElement(MesfModal.Actions, null,
+                React__default.createElement("div", { style: { paddingTop: "1rem" } },
+                    React__default.createElement(Button$1, { variant: 'outlined', style: { marginRight: "1rem" }, color: 'secondary', onClick: handleClose }, "Cancel"),
+                    React__default.createElement(ButtonWithLoading, { onClick: handleSelect, variant: 'contained', color: 'primary', isLoading: isLoading, style: { marginRight: "1rem" } }, "Apply")))),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
+};
+
+var useTrendingStyles = makeStyles$1(function (theme) { return ({
+    datetimePicker: {
+        alignItems: "center",
+        "& .MuiInputBase-root": {
+            color: "black",
+            backgroundColor: "white",
+            borderRadius: theme.shape.borderRadius,
+            width: "90%",
+            minWidth: "90%",
+            maxWidth: "90%"
+        },
+        "& .MuiInputBase-input": {
+            fontSize: "13px !important",
+            height: "15px !important",
+            paddingRight: "3px",
+            paddingLeft: "5px"
+        },
+        "& .MuiInput-underline:before": {
+            borderBottomColor: "rgba(0, 0, 0, 0.42)"
+        }
+    },
+    select: {
+        "& .MuiInput-root": {
+            width: "100%"
+        },
+        "& .MuiInputBase-root": {
+            color: "black",
+            backgroundColor: "white",
+            borderRadius: theme.shape.borderRadius,
+            minWidth: "100%"
+        },
+        "& .MuiInputBase-input": {
+            fontSize: "14px !important",
+            height: "15px !important"
+        },
+        "& .MuiInput-underline:before": {
+            borderBottomColor: "rgba(0, 0, 0, 0.42)"
+        }
+    },
+    labelOptions: {
+        paddingLeft: "2rem",
+        userSelect: "none",
+        "& > label": {
+            display: "flex",
+            alignItems: "center",
+            gap: "5px"
+        },
+        '& input[type="checkbox"]': {
+            zoom: 1.5
+        }
+    },
+    isPublicCheckbox: {
+        userSelect: "none",
+        paddingLeft: '1rem',
+        "& > label": {
+            display: "flex",
+            alignItems: "center",
+            gap: "15px"
+        },
+        '& input[type="checkbox"]': {
+            zoom: 1.5
+        }
+    },
+    navigatorButton: {
+        "& .MuiSvgIcon-root": {
+            cursor: "pointer !important"
+        }
+    }
+}); });
+
+var SaveAsViewModal = function (_a) {
+    var open = _a.open, handleClose = _a.handleClose;
+    var classes = useTrendingStyles();
+    var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
+    var _c = useState(''), error = _c[0], setError = _c[1];
+    var viewTags = useTrendingContext().state.viewTags;
+    var _d = useState(true), isPublic = _d[0], setIsPublic = _d[1];
+    var _e = useState(''), viewName = _e[0], setViewName = _e[1];
+    var handleCheck = function () { return setIsPublic(!isPublic); };
+    var handleInputChange = function (e) { return setViewName(e.target.value); };
+    var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var resp, ViewId_1, results;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsLoading(true);
+                    return [4 /*yield*/, upsertView(null, viewName, isPublic)];
+                case 1:
+                    resp = _a.sent();
+                    if (!resp.ok) return [3 /*break*/, 3];
+                    ViewId_1 = resp.data.returnValue;
+                    return [4 /*yield*/, Promise.allSettled(viewTags.map(function (_a) {
+                            var TagId = _a.TagId, Color = _a.Color, MinScale = _a.MinScale, MaxScale = _a.MaxScale, IsAutoScale = _a.IsAutoScale, IsVisible = _a.IsVisible;
+                            upsertViewTag(ViewId_1, TagId, Color, MinScale, MaxScale, IsVisible, IsAutoScale)
+                                .then(function (r) {
+                                if (!r.ok) {
+                                    setError(r.message);
+                                }
+                            });
+                        }))];
+                case 2:
+                    results = _a.sent();
+                    results.forEach(function (result, index) {
+                        if (result.status === "rejected") {
+                            setError("Tag ".concat(index, " failed with reason: ").concat(result.reason));
+                        }
+                        else {
+                            handleClose();
+                        }
+                    });
+                    return [3 /*break*/, 4];
+                case 3:
+                    setError(resp.message);
+                    _a.label = 4;
+                case 4:
+                    setIsLoading(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(MesfModal, { open: open, handleClose: handleClose, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Tags' },
+            React__default.createElement(Divider, null),
+            React__default.createElement(MesfModal.Content, null,
+                React__default.createElement(Grid$1, { container: true, spacing: 5, style: { padding: "1rem" } },
+                    React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { padding: "10px", width: "100%" } },
+                        React__default.createElement(TextField, { size: 'small', id: "outlined-basic", label: "View Name", variant: "outlined", value: viewName, onChange: handleInputChange, style: { width: "100%" } }))),
+                React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { paddingTop: "2rem" }, className: classes.isPublicCheckbox },
+                    React__default.createElement("label", null,
+                        "Public",
+                        React__default.createElement("input", { type: "checkbox", checked: isPublic, onChange: handleCheck })))),
+            React__default.createElement(Divider, null),
+            React__default.createElement(MesfModal.Actions, null,
+                React__default.createElement(Grid$1, { container: true, spacing: 1, style: { display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end' } },
+                    React__default.createElement(Grid$1, { item: true },
+                        React__default.createElement(Button$1, { variant: 'outlined', color: 'secondary', onClick: handleClose }, "Cancel")),
+                    React__default.createElement(Grid$1, { item: true },
+                        React__default.createElement(ButtonWithLoading, { variant: 'contained', color: 'primary', onClick: handleSubmit, isLoading: isLoading }, "Save"))))),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
+};
+
+var useTagsDataTable = function (_a) {
+    var cursorData = _a.cursorData, viewTags = _a.viewTags, chartData = _a.chartData;
+    return useMemo(function () {
+        var _a;
+        var dataTable = {};
+        if (cursorData) {
+            var _loop_1 = function (idx) {
+                var tag = viewTags[idx];
+                var datasetForTag = ((_a = chartData.datasets.find(function (ds) {
+                    return ds.tagId === (tag === null || tag === void 0 ? void 0 : tag.TagId);
+                })) === null || _a === void 0 ? void 0 : _a.data) || [];
+                var p1 = { x: new Date('1900-01-01'), y: 0 };
+                var p2 = { x: new Date('1900-01-01'), y: 0 };
+                var p1Found = false;
+                var pmin = { x: 0, y: Number.POSITIVE_INFINITY };
+                var pmax = { x: 0, y: Number.NEGATIVE_INFINITY };
+                for (var idx_1 = 0; idx_1 < datasetForTag.length; idx_1++) {
+                    var curr = datasetForTag[idx_1];
+                    var currentVal = curr.x;
+                    if (!p1Found) {
+                        if (currentVal < cursorData.x1) {
+                            p1 = curr;
+                            p2 = JSON.parse(JSON.stringify(p1));
+                            pmin = JSON.parse(JSON.stringify(p1));
+                            pmax = JSON.parse(JSON.stringify(p1));
+                            continue;
+                        }
+                        else {
+                            p1Found = true;
+                        }
+                    }
+                    else {
+                        if (currentVal < cursorData.x2) {
+                            p2 = curr;
+                            if (pmin['y'] > curr['y']) {
+                                pmin = JSON.parse(JSON.stringify(curr));
+                            }
+                            if (pmax['y'] < curr['y']) {
+                                pmax = JSON.parse(JSON.stringify(curr));
+                            }
+                        }
+                        else {
+                            break;
+                        }
+                    }
+                }
+                dataTable[tag === null || tag === void 0 ? void 0 : tag.TagName] = {
+                    y1: p1.y,
+                    y2: p2.y,
+                    y2y1: Number(p2.y) - Number(p1.y),
+                    pmin: pmin,
+                    pmax: pmax
+                };
+            };
+            for (var idx = 0; idx < viewTags.length; idx++) {
+                _loop_1(idx);
+            }
+        }
+        return dataTable;
+    }, [viewTags, chartData, cursorData]);
+};
+
+var useTagsTableStyles = makeStyles$1(function (theme) { return ({
+    checkbox: {
+        '& input[type="checkbox"]': {
+            zoom: 1.5
+        },
+        textAlign: 'center'
+    },
+    rowHover: {
+        '&:hover': {
+            backgroundColor: "#f2f2f2"
+        }
+    },
+    topTitles: {
+        border: "0.0625rem black solid",
         borderBottom: "none",
         backgroundColor: "#e9ecef"
     },
@@ -8704,33 +9191,51 @@ var timeDifference = function (start, end) {
 };
 
 var TableComponent = function (_a) {
-    var tagList = _a.tagList, setTagList = _a.setTagList, chartData = _a.chartData, cursorData = _a.cursorData, onDeleteTag = _a.onDeleteTag, onAddTag = _a.onAddTag;
+    var chartData = _a.chartData, cursorData = _a.cursorData;
     var classes = useTagsTableStyles();
-    var _b = useState(""); _b[0]; _b[1];
-    var dataTable = useTagsDataTable({ tagList: tagList, chartData: chartData, cursorData: cursorData });
-    var _c = useState({}), editableTagNames = _c[0], setEditableTagNames = _c[1];
-    var handleChange = function (index, value, property) {
-        setTagList(function (prev) { return prev.map(function (tag, currentIndex) {
+    var _b = useTrendingContext(), _c = _b.state, viewTags = _c.viewTags, viewSelected = _c.viewSelected, setViewTags = _b.actions.setViewTags;
+    var _d = useState(''), error = _d[0], setError = _d[1];
+    var _e = useState(""); _e[0]; _e[1];
+    var dataTable = useTagsDataTable({ viewTags: viewTags, chartData: chartData, cursorData: cursorData });
+    var _f = useState({}), editableTagNames = _f[0], setEditableTagNames = _f[1];
+    var handleChange = function (tagId, value, property) {
+        var newTags = viewTags.map(function (tag) {
             var _a;
-            return currentIndex === index ? __assign(__assign({}, tag), (_a = {}, _a[property] = value, _a.autoScale = false, _a)) : tag;
-        }); });
+            return tag.TagId === tagId ? __assign(__assign({}, tag), (_a = {}, _a[property] = value, _a.IsAutoScale = false, _a)) : tag;
+        });
+        setViewTags(newTags);
     };
     var handleChangeAlias = function (tagId, newName) {
-        setTagList(function (prevTagList) {
-            return prevTagList.map(function (tag) { return (tag.tagId === tagId ? __assign(__assign({}, tag), { tagName: newName }) : tag); });
-        });
+        var newTags = viewTags.map(function (tag) { return (tag.TagId === tagId ? __assign(__assign({}, tag), { Alias: newName }) : tag); });
+        setViewTags(newTags);
     };
-    var handleVisibilityChange = function (index, value) {
-        setTagList(function (prev) { return prev.map(function (tag, currentIndex) { return currentIndex === index ? __assign(__assign({}, tag), { visible: value }) : tag; }); });
+    var handleVisibilityChange = function (tagId, value) {
+        var newTags = viewTags.map(function (tag) { return tag.TagId === tagId ? __assign(__assign({}, tag), { IsVisible: value }) : tag; });
+        setViewTags(newTags);
     };
-    var handleAutoScaleChange = function (index, value) {
-        setTagList(function (prev) { return prev.map(function (tag, currentIndex) { return currentIndex === index ? __assign(__assign({}, tag), { autoScale: value }) : tag; }); });
+    var handleAutoScaleChange = function (tagId, checked) {
+        var newTags = viewTags.map(function (t) { return t.TagId == tagId ? __assign(__assign({}, t), { IsAutoScale: !checked }) : t; });
+        setViewTags(newTags);
     };
     var handleColorChange = function (tagId, value) {
-        setTagList(function (prev) { return prev.map(function (tag) { return tag.tagId === tagId ? __assign(__assign({}, tag), { color: value }) : tag; }); });
+        var newTags = viewTags.map(function (tag) { return tag.TagId === tagId ? __assign(__assign({}, tag), { Color: value }) : tag; });
+        setViewTags(newTags);
+    };
+    var handleDeleteTag = function (tagId) {
+        var newTags = viewTags.filter(function (tag) { return tag.TagId !== tagId; });
+        setViewTags(newTags);
     };
-    var _d = useState(null), selectedRowIndex = _d[0], setSelectedRowIndex = _d[1];
-    var _e = useState(false), addTagModalOpen = _e[0], setAddTagModalOpen = _e[1];
+    var handleAddTag = function (newTag) {
+        var newArr = __spreadArray([], viewTags, true);
+        if (newTag) {
+            newArr.push(newTag);
+            setViewTags(newArr);
+        }
+    };
+    var _g = useState(null), selectedRowIndex = _g[0], setSelectedRowIndex = _g[1];
+    var _h = useState(false), addTagModalOpen = _h[0], setAddTagModalOpen = _h[1];
+    var _j = useState(false), saveAsViewModalOpen = _j[0], setSaveAsViewModalOpen = _j[1];
+    var _k = useState(false), loadViewOpen = _k[0], setLoadViewOpen = _k[1];
     var handleClose = function () { return setAddTagModalOpen(false); };
     var ContextMenu = function (_a) {
         var x = _a.x, y = _a.y, options = _a.options;
@@ -8741,64 +9246,33 @@ var TableComponent = function (_a) {
             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 _f = useState({ x: 0, y: 0 }), contextMenuPosition = _f[0], setContextMenuPosition = _f[1];
+    var _l = useState({ x: 0, y: 0 }), contextMenuPosition = _l[0], setContextMenuPosition = _l[1];
     var contextMenuOptions = [
         { id: 'delete', label: 'Remove Tag', onClick: function () { return handleDelete(); } },
         { id: 'add', label: 'Add Tag', onClick: function () { return setAddTagModalOpen(true); } },
-        { id: 'saveDefault', label: 'Save Default To Tag', onClick: function () { } },
-        { id: 'saveAsView', label: 'Save as View', onClick: function () { } },
-        { id: 'loadView', label: 'Load View', onClick: function () { } },
-        // ... other options
+        { id: 'saveDefault', label: 'Save Default To Tag', onClick: function () { return handleSaveDefaultToTag(); } },
+        { id: 'saveAsView', label: 'Save as View', onClick: function () { return setSaveAsViewModalOpen(true); } },
+        { id: 'loadView', label: 'Load View', onClick: function () { return setLoadViewOpen(true); } },
     ];
-    // const binarySearch = (arr: any, searchDate: Date): number | null => {
-    //     let left = 0;
-    //     let right = arr.length - 1;
-    //     let closest: number | null = null;  
-    //     if (!arr.length) return null;
-    //     while (left <= right) {
-    //         const mid = Math.floor((left + right) / 2);
-    //         const midDate = arr[mid].x; // Asegúrate de que esto es una instancia de Date
-    //         const midTimestamp = midDate.getTime(); // Esto es un number
-    //         const searchTimestamp = searchDate.getTime(); // Esto también es un number
-    // console.log(midTimestamp, searchTimestamp);
-    //         if (midTimestamp === searchTimestamp) {
-    //             return arr[mid].y;
-    //         } else if (midTimestamp < searchTimestamp) {
-    //             left = mid + 1;
-    //         } else {
-    //             right = mid - 1;
-    //         }
-    //         // Revisa si midDate está más cerca que el 'closest' actual
-    //         if (closest === null || Math.abs(midTimestamp - searchTimestamp) < Math.abs(arr[closest].x.getTime() - searchTimestamp)) {
-    //             closest = mid;
-    //         }
-    //     }
-    //     return closest !== null ? arr[closest].y : null;
-    // };
-    // useEffect(() => {
-    //     if (cursorData) {
-    //         const yValue = binarySearch(chartData.datasets[0]?.data, new Date(cursorData.x1));
-    //         if(yValue)console.log(yValue,"retorna binary")
-    //     }
-    //     else console.log("NULL")
-    // }, [cursorData,chartData.datasets[1]?.data])
     var handleTagSelect = function (selectedTag) {
-        onAddTag(selectedTag);
+        handleAddTag(selectedTag);
         handleClose();
     };
     var handleDelete = function (index) {
         if (selectedRowIndex !== null) {
-            var tagToDelete = tagList[selectedRowIndex];
-            onDeleteTag(tagToDelete.tagId);
+            var tagToDelete = viewTags[selectedRowIndex];
+            handleDeleteTag(tagToDelete.TagId);
             setSelectedRowIndex(null); // Reset the selected row index
         }
     };
     useEffect(function () {
-        setEditableTagNames(tagList.reduce(function (acc, tag) {
-            acc[tag.tagId] = tag.tagName;
-            return acc;
-        }, {}));
-    }, [tagList]);
+        if (Array.isArray(viewTags)) {
+            setEditableTagNames(viewTags.reduce(function (acc, tag) {
+                acc[tag.TagId] = tag.Alias || tag.TagName;
+                return acc;
+            }, {}));
+        }
+    }, [viewTags]);
     useEffect(function () {
         var handleGlobalClick = function (e) {
             if (selectedRowIndex !== null) {
@@ -8819,404 +9293,306 @@ var TableComponent = function (_a) {
             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 });
     };
-    return (React__default.createElement(Grid$1, { container: true, spacing: 1 },
-        React__default.createElement(Grid$1, { item: true, xs: 12 },
-            React__default.createElement("div", { style: { overflowX: 'auto', width: '100%' } },
-                React__default.createElement("table", { style: { width: '100%', tableLayout: 'fixed', textAlign: "center" } },
-                    React__default.createElement("thead", null,
-                        React__default.createElement("tr", null,
-                            React__default.createElement("th", { className: classes.visible }),
-                            React__default.createElement("th", { className: classes.inputCol }),
-                            React__default.createElement("th", { className: classes.color }),
-                            React__default.createElement("th", { colSpan: 4, className: "".concat(classes.topTitles, " ").concat(classes.scale) }, "Scale"),
-                            React__default.createElement("th", { className: "".concat(classes.topTitles, " ").concat(classes.xStats) }, cursorData ? (function () {
-                                var date = new Date(cursorData.x1);
-                                // console.log(cursorData, "cursor data")
-                                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');
-                                var dateText = "".concat(formattedDate, ".").concat(milliseconds);
-                                return (React__default.createElement(React__default.Fragment, null,
-                                    React__default.createElement("span", { style: {
-                                            height: '10px',
-                                            width: '10px',
-                                            backgroundColor: "red",
-                                            borderRadius: '50%',
-                                            display: 'inline-block',
-                                            marginRight: '5px'
-                                        } }),
-                                    dateText));
-                            })() : null),
-                            React__default.createElement("th", { className: "".concat(classes.topTitles, " ").concat(classes.xStats) }, cursorData ? (function () {
-                                var date = new Date(cursorData.x2);
-                                // console.log(cursorData, "cursor data")
-                                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');
-                                var dateText = "".concat(formattedDate, ".").concat(milliseconds);
-                                return (React__default.createElement(React__default.Fragment, null,
-                                    React__default.createElement("span", { style: {
-                                            height: '10px',
-                                            width: '10px',
-                                            backgroundColor: "blue",
-                                            borderRadius: '50%',
-                                            display: 'inline-block',
-                                            marginRight: '5px'
-                                        } }),
-                                    dateText));
-                            })() : null),
-                            React__default.createElement("th", { colSpan: 3, className: "".concat(classes.topTitles, " ").concat(classes.xStats) }, cursorData ? timeDifference(cursorData.x2, cursorData.x1) : null)))),
-                React__default.createElement("table", { style: { width: '100%', tableLayout: 'fixed', textAlign: "center" } },
-                    React__default.createElement("thead", null,
-                        React__default.createElement("tr", { className: classes.bottomTitlesRow },
-                            React__default.createElement("th", { className: classes.visible }, "Visible"),
-                            React__default.createElement("th", { className: classes.inputCol }, "Alias / Tagname"),
-                            React__default.createElement("th", { className: classes.color }, "Color"),
-                            React__default.createElement("th", { className: classes.inputCol }, "Min Scale"),
-                            React__default.createElement("th", { className: classes.inputCol }, "Max Scale"),
-                            React__default.createElement("th", { className: classes.unit }, "Unit"),
-                            React__default.createElement("th", { className: classes.autoScale }, "AutoScale"),
-                            React__default.createElement("th", null, " "),
-                            React__default.createElement("th", null),
-                            React__default.createElement("th", null, "Y2-Y1"),
-                            React__default.createElement("th", null, "Min"),
-                            React__default.createElement("th", null, "Max")))))),
-        React__default.createElement(Grid$1, { item: true, xs: 12 },
-            React__default.createElement("div", { style: { width: '100%', overflowY: 'auto', maxHeight: ' 20svh' } },
-                React__default.createElement("table", { cellPadding: '4px', style: { width: '100%', tableLayout: 'fixed', textAlign: "center" } },
-                    React__default.createElement("tbody", null, tagList.map(function (tag, index) {
-                        var _a, _b, _c, _d, _e, _f, _g;
-                        return (React__default.createElement("tr", { key: tag.tagName, onClick: function () { return handleRowClick(index); }, onContextMenu: function (e) { return handleRightClick(e, index); }, className: classes.rowHover },
-                            React__default.createElement("td", { className: "".concat(classes.visible, " ").concat(classes.checkbox) },
-                                React__default.createElement("input", { type: "checkbox", checked: tag.visible, onChange: function (e) { return handleVisibilityChange(index, e.target.checked); } })),
-                            React__default.createElement("td", { className: classes.inputCol },
-                                React__default.createElement(Tooltip, { title: tag.tagName, placement: "top", arrow: true, interactive: true, enterDelay: 500 },
-                                    React__default.createElement("div", null,
-                                        React__default.createElement("input", { type: "text", style: { width: '100%' }, value: editableTagNames[tag.tagId] || '', onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
-                                                var _a;
-                                                setEditableTagNames(__assign(__assign({}, editableTagNames), (_a = {}, _a[tag.tagId] = e.target.value, _a)));
-                                            }, onKeyDown: function (e) {
-                                                if (e.key === 'Enter') {
-                                                    handleChangeAlias(tag.tagId, editableTagNames[tag.tagId]);
-                                                }
-                                            } })))),
-                            React__default.createElement("td", { className: classes.color },
-                                React__default.createElement(ColorPicker, { onChange: handleColorChange, color: tag.color, elementId: tag.tagId })),
-                            React__default.createElement("td", { className: classes.inputCol },
-                                React__default.createElement("input", { type: "text", style: { width: '100%' }, disabled: tag.autoScale, 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", { className: classes.inputCol },
-                                React__default.createElement("input", { type: "text", style: { width: '100%' }, disabled: tag.autoScale, 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", { className: "".concat(classes.autoScale, " ").concat(classes.checkbox) },
-                                React__default.createElement("input", { type: "text", style: { width: '100%' }, disabled: true, value: /* tag.unit */ "Unit ", onFocus: function (e) { return e.target.select(); } })),
-                            React__default.createElement("td", { className: "".concat(classes.autoScale, " ").concat(classes.checkbox) },
-                                React__default.createElement("input", { type: "checkbox", checked: tag.autoScale, onChange: function (e) { return handleAutoScaleChange(index, e.target.checked); } })),
-                            React__default.createElement("td", null, (_a = dataTable[tag.tagName]) === null || _a === void 0 ? void 0 : _a.y1),
-                            React__default.createElement("td", { className: classes.doubleInput }, (_b = dataTable[tag.tagName]) === null || _b === void 0 ? void 0 : _b.y2),
-                            React__default.createElement("td", null, (_c = dataTable[tag.tagName]) === null || _c === void 0 ? void 0 : _c.y2y1),
-                            React__default.createElement("td", null,
-                                !isNaN(((_d = dataTable[tag.tagName]) === null || _d === void 0 ? void 0 : _d.pmin.y) * 0) ? (_e = dataTable[tag.tagName]) === null || _e === void 0 ? void 0 : _e.pmin.y : 0,
-                                " "),
-                            React__default.createElement("td", null,
-                                !isNaN(((_f = dataTable[tag.tagName]) === null || _f === void 0 ? void 0 : _f.pmax.y) * 0) ? (_g = dataTable[tag.tagName]) === null || _g === void 0 ? void 0 : _g.pmax.y : 0,
-                                " ")));
-                    }))))),
-        selectedRowIndex !== null && (React__default.createElement(ContextMenu, { x: contextMenuPosition.x, y: contextMenuPosition.y, options: contextMenuOptions })),
-        React__default.createElement(AddTagModal, { open: addTagModalOpen, handleClose: handleClose, onTagSelect: handleTagSelect })));
-};
-
-var DraggableLineControl = function (_a) {
-    var initialLeft = _a.initialLeft, onUpdate = _a.onUpdate, color = _a.color, chartArea = _a.chartArea;
-    var _b = useState(false), isDragging = _b[0], setIsDragging = _b[1];
-    var _c = useState(initialLeft), left = _c[0], setLeft = _c[1];
-    var ref = useRef(null);
-    var handleMouseDown = function (e) {
-        setIsDragging(true);
-        e.stopPropagation();
-        e.preventDefault();
-    };
-    var handleMouseMove = function (e) {
-        if (!isDragging || !ref.current)
-            return;
-        chartArea.width - chartArea.right;
-        chartArea.left;
-        var newLeft = Math.min(Math.max(e.clientX - ref.current.offsetParent.getBoundingClientRect().left, chartArea.left), chartArea.right);
-        setLeft(newLeft);
-        onUpdate(newLeft); // Actualiza la posición de la línea en el gráfico
-    };
-    var handleMouseUp = function () {
-        setIsDragging(false);
-    };
-    useEffect(function () {
-        var mouseMoveHandler = function (e) { return handleMouseMove(e); };
-        var mouseUpHandler = function () { return handleMouseUp(); };
-        if (isDragging) {
-            window.addEventListener('mousemove', mouseMoveHandler);
-            window.addEventListener('mouseup', mouseUpHandler);
-        }
-        return function () {
-            window.removeEventListener('mousemove', mouseMoveHandler);
-            window.removeEventListener('mouseup', mouseUpHandler);
-        };
-    }, [isDragging]);
-    return (React__default.createElement("div", { ref: ref, style: { height: 20, width: 20, background: color, position: 'absolute', top: -10, left: left - 10 }, onMouseDown: handleMouseDown },
-        React__default.createElement("div", { style: { height: chartArea.height, width: 2, background: color, position: 'relative', top: 20, left: 0, right: 0, margin: 'auto' } })));
+    var handleSaveDefaultToTag = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var promises, allResponses, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, 3, 4]);
+                    promises = viewTags.map(function (vt) { return __awaiter(void 0, void 0, void 0, function () {
+                        var response;
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0: return [4 /*yield*/, saveTagDefaults(vt.TagId, vt.Alias, vt.Color, vt.MinScale, vt.MaxScale, vt.Unit)];
+                                case 1:
+                                    response = _a.sent();
+                                    return [2 /*return*/, response];
+                            }
+                        });
+                    }); });
+                    return [4 /*yield*/, Promise.all(promises)];
+                case 1:
+                    allResponses = _a.sent();
+                    allResponses.forEach(function (r) {
+                        if (!r.ok) {
+                            setError(r.message);
+                        }
+                    });
+                    return [3 /*break*/, 4];
+                case 2:
+                    error_1 = _a.sent();
+                    setError(error_1.message);
+                    return [3 /*break*/, 4];
+                case 3:
+                    setSelectedRowIndex(null);
+                    return [7 /*endfinally*/];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Grid$1, { container: true, spacing: 1 },
+            React__default.createElement(Grid$1, { item: true, xs: 12 },
+                React__default.createElement("div", { style: { overflowX: 'auto', width: '100%' } },
+                    React__default.createElement("table", { style: { width: '100%', tableLayout: 'fixed', textAlign: "center" } },
+                        React__default.createElement("thead", null,
+                            React__default.createElement("tr", null,
+                                React__default.createElement("th", { className: classes.visible }, "View:"),
+                                React__default.createElement("th", { className: classes.inputCol }, viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewName),
+                                React__default.createElement("th", { className: classes.color }),
+                                React__default.createElement("th", { colSpan: 4, className: "".concat(classes.topTitles, " ").concat(classes.scale) }, "Scale"),
+                                React__default.createElement("th", { className: "".concat(classes.topTitles, " ").concat(classes.xStats) }, cursorData ? (function () {
+                                    var date = new Date(cursorData.x1);
+                                    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');
+                                    var dateText = "".concat(formattedDate, ".").concat(milliseconds);
+                                    return (React__default.createElement(React__default.Fragment, null,
+                                        React__default.createElement("span", { style: {
+                                                height: '10px',
+                                                width: '10px',
+                                                backgroundColor: "red",
+                                                borderRadius: '50%',
+                                                display: 'inline-block',
+                                                marginRight: '5px'
+                                            } }),
+                                        dateText));
+                                })() : null),
+                                React__default.createElement("th", { className: "".concat(classes.topTitles, " ").concat(classes.xStats) }, cursorData ? (function () {
+                                    var date = new Date(cursorData.x2);
+                                    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');
+                                    var dateText = "".concat(formattedDate, ".").concat(milliseconds);
+                                    return (React__default.createElement(React__default.Fragment, null,
+                                        React__default.createElement("span", { style: {
+                                                height: '10px',
+                                                width: '10px',
+                                                backgroundColor: "blue",
+                                                borderRadius: '50%',
+                                                display: 'inline-block',
+                                                marginRight: '5px'
+                                            } }),
+                                        dateText));
+                                })() : null),
+                                React__default.createElement("th", { colSpan: 3, className: "".concat(classes.topTitles, " ").concat(classes.xStats) }, cursorData ? timeDifference(cursorData.x2, cursorData.x1) : null)))),
+                    React__default.createElement("table", { style: { width: '100%', tableLayout: 'fixed', textAlign: "center" } },
+                        React__default.createElement("thead", null,
+                            React__default.createElement("tr", { className: classes.bottomTitlesRow },
+                                React__default.createElement("th", { className: classes.visible }, "Visible"),
+                                React__default.createElement("th", { className: classes.inputCol }, "Alias / Tagname"),
+                                React__default.createElement("th", { className: classes.color }, "Color"),
+                                React__default.createElement("th", { className: classes.inputCol }, "Min Scale"),
+                                React__default.createElement("th", { className: classes.inputCol }, "Max Scale"),
+                                React__default.createElement("th", { className: classes.unit }, "Unit"),
+                                React__default.createElement("th", { className: classes.autoScale }, "AutoScale"),
+                                React__default.createElement("th", null, " "),
+                                React__default.createElement("th", null),
+                                React__default.createElement("th", null, "Y2-Y1"),
+                                React__default.createElement("th", null, "Min"),
+                                React__default.createElement("th", null, "Max")))))),
+            React__default.createElement(Grid$1, { item: true, xs: 12 },
+                React__default.createElement("div", { style: { width: '100%', overflowY: 'auto', maxHeight: ' 20svh' } },
+                    React__default.createElement("table", { cellPadding: '4px', style: { width: '100%', tableLayout: 'fixed', textAlign: "center" } },
+                        React__default.createElement("tbody", null, viewTags && viewTags.length && Array.isArray(viewTags) ? viewTags.map(function (tag, index) {
+                            var _a, _b, _c, _d, _e, _f, _g;
+                            return (React__default.createElement("tr", { key: tag.TagName, 
+                                // onClick={() => handleRowClick(index)}
+                                onContextMenu: function (e) { return handleRightClick(e, index); }, className: classes.rowHover },
+                                React__default.createElement("td", { className: "".concat(classes.visible, " ").concat(classes.checkbox) },
+                                    React__default.createElement("input", { type: "checkbox", checked: tag.IsVisible, onChange: function (e) { return handleVisibilityChange(tag.TagId, e.target.checked); } })),
+                                React__default.createElement("td", { className: classes.inputCol },
+                                    React__default.createElement(Tooltip, { title: tag.TagName, placement: "top", arrow: true, interactive: true, enterDelay: 500 },
+                                        React__default.createElement("div", null,
+                                            React__default.createElement("input", { type: "text", style: { width: '100%' }, value: editableTagNames[tag.TagId], onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
+                                                    var _a;
+                                                    setEditableTagNames(__assign(__assign({}, editableTagNames), (_a = {}, _a[tag.TagId] = e.target.value, _a)));
+                                                }, onKeyDown: function (e) {
+                                                    if (e.key === 'Enter') {
+                                                        handleChangeAlias(tag.TagId, editableTagNames[tag.TagId]);
+                                                    }
+                                                } })))),
+                                React__default.createElement("td", { className: classes.color },
+                                    React__default.createElement(ColorPicker, { onChange: handleColorChange, color: tag.Color, elementId: tag.TagId })),
+                                React__default.createElement("td", { className: classes.inputCol },
+                                    React__default.createElement("input", { type: "text", style: { width: '100%' }, disabled: tag.IsAutoScale, value: tag.MinScale, onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
+                                            var value = e.target.value;
+                                            var numericValue = Number(value);
+                                            handleChange(tag.TagId, numericValue, 'MinScale');
+                                        } })),
+                                React__default.createElement("td", { className: classes.inputCol },
+                                    React__default.createElement("input", { type: "text", style: { width: '100%' }, disabled: tag.IsAutoScale, 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(tag.TagId, numericValue, 'MaxScale');
+                                            }
+                                        } })),
+                                React__default.createElement("td", { className: "".concat(classes.autoScale, " ").concat(classes.checkbox) },
+                                    React__default.createElement("input", { type: "text", style: { width: '100%' }, disabled: true, value: tag.Unit, onFocus: function (e) { return e.target.select(); } })),
+                                React__default.createElement("td", { className: "".concat(classes.autoScale, " ").concat(classes.checkbox) },
+                                    React__default.createElement("input", { type: "checkbox", checked: tag.IsAutoScale, onChange: function (e) { return handleAutoScaleChange(tag.TagId, tag.IsAutoScale); } })),
+                                React__default.createElement("td", null, (_a = dataTable[tag.TagName]) === null || _a === void 0 ? void 0 : _a.y1),
+                                React__default.createElement("td", { className: classes.doubleInput }, (_b = dataTable[tag.TagName]) === null || _b === void 0 ? void 0 : _b.y2),
+                                React__default.createElement("td", null, (_c = dataTable[tag.TagName]) === null || _c === void 0 ? void 0 : _c.y2y1),
+                                React__default.createElement("td", null,
+                                    !isNaN(((_d = dataTable[tag.TagName]) === null || _d === void 0 ? void 0 : _d.pmin.y) * 0) ? (_e = dataTable[tag.TagName]) === null || _e === void 0 ? void 0 : _e.pmin.y : 0,
+                                    " "),
+                                React__default.createElement("td", null,
+                                    !isNaN(((_f = dataTable[tag.TagName]) === null || _f === void 0 ? void 0 : _f.pmax.y) * 0) ? (_g = dataTable[tag.TagName]) === null || _g === void 0 ? void 0 : _g.pmax.y : 0,
+                                    " ")));
+                        }) : React__default.createElement("div", { style: { padding: '2rem' } },
+                            React__default.createElement("div", { style: { padding: "1rem" } }, "No tag view detected. "),
+                            React__default.createElement("div", { style: { padding: "1rem" } },
+                                React__default.createElement(Button$1, { onClick: function () { return setAddTagModalOpen(true); }, variant: 'contained', color: 'primary' }, " Add tag")),
+                            React__default.createElement("div", null,
+                                React__default.createElement(Button$1, { onClick: function () { return setLoadViewOpen(true); }, variant: 'outlined', color: 'primary' }, " Load view"))))))),
+            selectedRowIndex !== null && (React__default.createElement(ContextMenu, { x: contextMenuPosition.x, y: contextMenuPosition.y, options: contextMenuOptions })),
+            React__default.createElement(AddTagModal, { open: addTagModalOpen, handleClose: handleClose, onTagSelect: handleTagSelect }),
+            React__default.createElement(SaveAsViewModal, { open: saveAsViewModalOpen, handleClose: function () { return setSaveAsViewModalOpen(false); } }),
+            React__default.createElement(LoadViewModal, { open: loadViewOpen, handleClose: function () { return setLoadViewOpen(false); } })),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
 };
 
-var TrendingsInitialState = {
-    timeScopeStart: moment(new Date()).subtract(1, "days").toDate(),
-    timeScopeEnd: new Date(),
-    scope: "1 day",
-    graphPan: false
-};
-var TrendingsReducer = createSlice({
-    name: "__",
-    initialState: TrendingsInitialState,
-    reducers: {
-        setTotalScope: function (state, _a) {
-            var payload = _a.payload; _a.type;
-            if (!isNil$1(payload.start) && !isNil$1(payload.end) && !isNil$1(payload.scope)) {
-                //from arrow navigators
-                state.timeScopeStart = payload.start;
-                state.timeScopeEnd = payload.end;
-                state.scope = payload.scope;
-                return;
-            }
-            if (!isNil$1(payload.scope)) {
-                if (payload.scope !== "custom") {
-                    switch (payload.scope) {
-                        case "10 min":
-                            state.timeScopeStart = moment(state.timeScopeEnd)
-                                .subtract(10, "minutes")
-                                .toDate();
-                            break;
-                        case "1 hour":
-                            state.timeScopeStart = moment(state.timeScopeEnd)
-                                .subtract(1, "hours")
-                                .toDate();
-                            break;
-                        case "4 hours":
-                            state.timeScopeStart = moment(state.timeScopeEnd)
-                                .subtract(4, "hours")
-                                .toDate();
-                            break;
-                        case "12 hours":
-                            state.timeScopeStart = moment(state.timeScopeEnd)
-                                .subtract(12, "hours")
-                                .toDate();
-                            break;
-                        case "1 day":
-                            state.timeScopeStart = moment(state.timeScopeEnd)
-                                .subtract(1, "days")
-                                .toDate();
-                            break;
-                        case "10 days":
-                            state.timeScopeStart = moment(state.timeScopeEnd)
-                                .subtract(10, "days")
-                                .toDate();
-                            break;
+var formatDateTimeToString = function (date) {
+    var hour = date.getHours().toString().padStart(2, '0');
+    var minute = date.getMinutes().toString().padStart(2, '0');
+    var second = date.getSeconds().toString().padStart(2, '0');
+    if (hour === '24') {
+        hour = '00';
+    }
+    var formattedDate = date.toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric"
+    });
+    var formattedTime = "".concat(hour, ":").concat(minute, ":").concat(second);
+    return { formattedDate: formattedDate, formattedTime: formattedTime };
+};
+
+var useChartOptions = function () {
+    var _a = useTrendingContext(); _a.state; var actions = _a.actions;
+    var debounceTimerRef = useRef(null);
+    var handleZoom = function (_a) {
+        var chart = _a.chart;
+        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);
+            actions.setTotalScope({
+                start: newStart,
+                end: newEnd
+            });
+        }, 1000);
+    };
+    var handlePan = function (_a) {
+        var chart = _a.chart;
+        if (debounceTimerRef.current) {
+            clearTimeout(debounceTimerRef.current);
+        }
+        debounceTimerRef.current = setTimeout(function () {
+            // Handle pan event and execute fetch
+            var newStart = new Date(chart.scales.x.min);
+            var newEnd = new Date(chart.scales.x.max);
+            actions.setTotalScope({
+                start: newStart,
+                end: newEnd,
+                graphPan: true
+            });
+        }, 1000);
+    };
+    return useState({
+        animation: {
+            duration: 0
+        },
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+            x: {
+                type: "time",
+                ticks: {
+                    autoSkip: true,
+                    maxTicksLimit: 20,
+                    callback: function (value, index, ticks) {
+                        var currentDate = new Date(value);
+                        var time = formatDateTimeToString(currentDate).formattedTime;
+                        var date = formatDateTimeToString(currentDate).formattedDate;
+                        // Si es el primer tick, siempre muestra la fecha y hora
+                        if (index === 0) {
+                            return [time, date];
+                        }
+                        // De lo contrario, solo muestra la hora
+                        return time;
                     }
+                },
+                grid: {
+                    display: true
                 }
-                state.scope = payload.scope;
-                return;
-            }
-            if (!isNil$1(payload.start) && !isNil$1(payload.end) && isNil$1(payload.graphPan)) {
-                // from zoom
-                state.timeScopeStart = payload.start;
-                state.timeScopeEnd = payload.end;
-                state.scope = "custom";
-                return;
-            }
-            if (!isNil$1(payload.start) && !isNil$1(payload.end) && !isNil$1(payload.graphPan)) {
-                // from pan
-                state.timeScopeStart = payload.start;
-                state.timeScopeEnd = payload.end;
-                return;
-            }
-            if (!isNil$1(payload.start)) {
-                state.timeScopeStart = payload.start;
-                if (state.scope !== "custom") {
-                    switch (state.scope) {
-                        case "10 min":
-                            state.timeScopeEnd = moment(payload.start)
-                                .add(10, "minutes")
-                                .toDate();
-                            break;
-                        case "1 hour":
-                            state.timeScopeEnd = moment(payload.start)
-                                .add(1, "hours")
-                                .toDate();
-                            break;
-                        case "4 hours":
-                            state.timeScopeEnd = moment(payload.start)
-                                .add(4, "hours")
-                                .toDate();
-                            break;
-                        case "12 hours":
-                            state.timeScopeEnd = moment(payload.start)
-                                .add(12, "hours")
-                                .toDate();
-                            break;
-                        case "1 day":
-                            state.timeScopeEnd = moment(payload.start)
-                                .add(1, "days")
-                                .toDate();
-                            break;
-                        case "10 days":
-                            state.timeScopeEnd = moment(payload.start)
-                                .add(10, "days")
-                                .toDate();
-                            break;
+            },
+            y: {
+                grid: {
+                    display: true
+                },
+                afterUpdate: function (axis) {
+                    var chart = axis.chart;
+                    var keys = Object.keys(chart.scales).filter(function (sc) { return sc !== 'x'; });
+                    if (keys.length > 1) {
+                        for (var scaleKey in chart.scales) {
+                            var scale = chart.scales[scaleKey];
+                            if (scale.max === 1 && scale.min === 0) {
+                                chart.scales[scaleKey].display = false;
+                                chart.scales[scaleKey].options.display = false;
+                            }
+                            else {
+                                chart.scales[scaleKey].display = true;
+                                chart.scales[scaleKey].options.display = true;
+                            }
+                        }
                     }
                 }
-                return;
             }
-            if (!isNil$1(payload.end)) {
-                state.timeScopeEnd = payload.end;
-                if (state.scope !== "custom") {
-                    switch (state.scope) {
-                        case "10 min":
-                            state.timeScopeStart = moment(payload.end)
-                                .subtract(10, "minutes")
-                                .toDate();
-                            break;
-                        case "1 hour":
-                            state.timeScopeStart = moment(payload.end)
-                                .subtract(1, "hours")
-                                .toDate();
-                            break;
-                        case "4 hours":
-                            state.timeScopeStart = moment(payload.end)
-                                .subtract(4, "hours")
-                                .toDate();
-                            break;
-                        case "12 hours":
-                            state.timeScopeStart = moment(payload.end)
-                                .subtract(12, "hours")
-                                .toDate();
-                            break;
-                        case "1 day":
-                            state.timeScopeStart = moment(payload.end)
-                                .subtract(1, "days")
-                                .toDate();
-                            break;
-                        case "10 days":
-                            state.timeScopeStart = moment(payload.end)
-                                .subtract(10, "days")
-                                .toDate();
-                            break;
-                    }
+        },
+        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: handlePan
                 }
-                return;
             }
         }
-    }
-});
-
-var TrendingContext = createContext({
-    state: TrendingsReducer.getInitialState(),
-    actions: TrendingsReducer.actions
-});
-var useTrendingContext = function () { return useContext(TrendingContext); };
-var TrendingProvider = function (_a) {
-    var children = _a.children;
-    var _b = useComplexState({
-        initialState: TrendingsReducer.getInitialState(),
-        reducers: TrendingsReducer.caseReducers
-    }), state = _b[0], actions = _b[1];
-    return (React__default.createElement(TrendingContext.Provider, { value: { state: state, actions: actions } }, children));
+    });
 };
 
-var useTrendingStyles = makeStyles$1(function (theme) { return ({
-    datetimePicker: {
-        alignItems: "center",
-        "& .MuiInputBase-root": {
-            color: "black",
-            backgroundColor: "white",
-            borderRadius: theme.shape.borderRadius,
-            width: "90%",
-            minWidth: "90%",
-            maxWidth: "90%"
-        },
-        "& .MuiInputBase-input": {
-            fontSize: "13px !important",
-            height: "15px !important",
-            paddingRight: "3px",
-            paddingLeft: "5px"
-        },
-        "& .MuiInput-underline:before": {
-            borderBottomColor: "rgba(0, 0, 0, 0.42)"
-        }
-    },
-    select: {
-        "& .MuiInput-root": {
-            width: "100%"
-        },
-        "& .MuiInputBase-root": {
-            color: "black",
-            backgroundColor: "white",
-            borderRadius: theme.shape.borderRadius,
-            minWidth: "100%"
-        },
-        "& .MuiInputBase-input": {
-            fontSize: "14px !important",
-            height: "15px !important"
-        },
-        "& .MuiInput-underline:before": {
-            borderBottomColor: "rgba(0, 0, 0, 0.42)"
-        }
-    },
-    labelOptions: {
-        paddingLeft: "2rem",
-        userSelect: "none",
-        "& > label": {
-            display: "flex",
-            alignItems: "center",
-            gap: "5px"
-        },
-        '& input[type="checkbox"]': {
-            zoom: 1.5
-        }
-    },
-    navigatorButton: {
-        "& .MuiSvgIcon-root": {
-            cursor: "pointer !important"
-        }
-    }
-}); });
-
 var CustomOptionsComponent = function (_a) {
     var customOptions = _a.customOptions, setCustomOptions = _a.setCustomOptions;
     var classes = useTrendingStyles();
@@ -9237,6 +9613,129 @@ var CustomOptionsComponent = function (_a) {
                 "Stepped"))));
 };
 
+var dateNavigator = function (startDate, endDate, scope, operator) {
+    if (scope === "custom")
+        return;
+    else {
+        var _a = scope.split(" "), quantity = _a[0], duration = _a[1];
+        var newStartDate = moment(startDate)[operator](quantity, duration[0]).toDate();
+        var newEndDate = moment(endDate)[operator](quantity, duration[0]).toDate();
+        return { newStartDate: newStartDate, newEndDate: newEndDate };
+    }
+};
+
+var Header = function (_a) {
+    var setChartOptions = _a.setChartOptions;
+    var classes = useTrendingStyles();
+    var _b = useTrendingContext(), state = _b.state, actions = _b.actions;
+    var _c = useState({
+        showGrid: true,
+        stepped: false
+    }), customOptions = _c[0], setCustomOptions = _c[1];
+    var handleDateNavigator = function (operator) {
+        var newDates = dateNavigator(state.timeScopeStart, state.timeScopeEnd, state.scope, operator);
+        if (newDates) {
+            actions.setTotalScope({ start: newDates.newStartDate, end: newDates.newEndDate, scope: state.scope });
+        }
+    };
+    var handleDateChange = function (newValue, key) {
+        var _a;
+        //@ts-ignore
+        actions.setTotalScope((_a = {}, _a[key] = moment(newValue).toDate(), _a));
+    };
+    var handleChangeScope = function (e) {
+        var newScope = e.target.value;
+        actions.setTotalScope({
+            scope: newScope
+        });
+    };
+    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]);
+    useEffect(function () {
+        setChartOptions(function (prevOptions) { return (__assign(__assign({}, prevOptions), { scales: __assign(__assign({}, prevOptions.scales), { x: __assign(__assign({}, prevOptions.scales.x), { min: state.timeScopeStart.getTime(), max: state.timeScopeEnd.getTime() }) }) })); });
+    }, [state.timeScopeStart, state.timeScopeEnd]);
+    return (React__default.createElement(Grid$1, { item: true, xs: 12, container: true, justifyContent: "space-between", alignItems: "center", style: { height: "15%" } },
+        React__default.createElement(Grid$1, { md: 5, item: true, container: true, justifyContent: "flex-start", alignItems: "center", spacing: 1, wrap: "wrap" },
+            React__default.createElement(IconButton$1, { color: "primary", onClick: function () { return handleDateNavigator("subtract"); }, className: classes.navigatorButton },
+                React__default.createElement(ChevronLeft, { fontSize: "large" })),
+            React__default.createElement(Grid$1, { item: true },
+                React__default.createElement(TextField, { type: "datetime-local", className: classes.datetimePicker, label: "Start", variant: "outlined", value: moment(state.timeScopeStart).format("YYYY-MM-DDTHH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "start"); }, InputLabelProps: {
+                        shrink: true,
+                        style: { marginLeft: "10px" }
+                    }, InputProps: {
+                        max: state.timeScopeEnd
+                    } })),
+            React__default.createElement(Grid$1, { item: true, className: classes.select },
+                React__default.createElement(FormControl$1, { variant: "outlined" },
+                    React__default.createElement(Select$1, { value: state.scope, onChange: handleChangeScope, displayEmpty: true },
+                        React__default.createElement(MenuItem$1, { value: "10 min" }, "10 min"),
+                        React__default.createElement(MenuItem$1, { value: "1 hour" }, "1 hour"),
+                        React__default.createElement(MenuItem$1, { value: "4 hours" }, "4 hours"),
+                        React__default.createElement(MenuItem$1, { value: "12 hours" }, "12 hours"),
+                        React__default.createElement(MenuItem$1, { value: "1 day" }, "1 day"),
+                        React__default.createElement(MenuItem$1, { value: "10 days" }, "10 days"),
+                        React__default.createElement(MenuItem$1, { value: "custom" }, "Custom")))),
+            React__default.createElement(Grid$1, { item: true },
+                React__default.createElement(TextField, { label: "End", variant: "outlined", className: classes.datetimePicker, type: "datetime-local", value: moment(state.timeScopeEnd).format("YYYY-MM-DDTHH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "end"); }, InputLabelProps: {
+                        shrink: true,
+                        style: { marginLeft: "10px" }
+                    } })),
+            React__default.createElement(IconButton$1, { color: "primary", onClick: function () { return handleDateNavigator("add"); }, className: classes.navigatorButton },
+                React__default.createElement(ChevronRight, { fontSize: "large" }))),
+        React__default.createElement(Grid$1, { md: 7, item: true, container: true, justifyContent: "space-between" },
+            React__default.createElement(Grid$1, { item: true, container: true, wrap: "nowrap", spacing: 1 },
+                React__default.createElement(Grid$1, { item: true, container: true },
+                    React__default.createElement(CustomOptionsComponent, { customOptions: customOptions, setCustomOptions: setCustomOptions }))))));
+};
+
+var DraggableLineControl = function (_a) {
+    var initialLeft = _a.initialLeft, onUpdate = _a.onUpdate, color = _a.color, chartArea = _a.chartArea;
+    var _b = useState(false), isDragging = _b[0], setIsDragging = _b[1];
+    var _c = useState(initialLeft), left = _c[0], setLeft = _c[1];
+    var ref = useRef(null);
+    var handleMouseDown = function (e) {
+        setIsDragging(true);
+        e.stopPropagation();
+        e.preventDefault();
+    };
+    var handleMouseMove = function (e) {
+        if (!isDragging || !ref.current)
+            return;
+        chartArea.width - chartArea.right;
+        chartArea.left;
+        var newLeft = Math.min(Math.max(e.clientX - ref.current.offsetParent.getBoundingClientRect().left, chartArea.left), chartArea.right);
+        setLeft(newLeft);
+        onUpdate(newLeft); // Actualiza la posición de la línea en el gráfico
+    };
+    var handleMouseUp = function () {
+        setIsDragging(false);
+    };
+    useEffect(function () {
+        var mouseMoveHandler = function (e) { return handleMouseMove(e); };
+        var mouseUpHandler = function () { return handleMouseUp(); };
+        if (isDragging) {
+            window.addEventListener('mousemove', mouseMoveHandler);
+            window.addEventListener('mouseup', mouseUpHandler);
+        }
+        return function () {
+            window.removeEventListener('mousemove', mouseMoveHandler);
+            window.removeEventListener('mouseup', mouseUpHandler);
+        };
+    }, [isDragging]);
+    return (React__default.createElement("div", { ref: ref, style: { height: 20, width: 20, background: color, position: 'absolute', top: -10, left: left - 10 }, onMouseDown: handleMouseDown },
+        React__default.createElement("div", { style: { height: chartArea.height, width: 2, background: color, position: 'relative', top: 20, left: 0, right: 0, margin: 'auto' } })));
+};
+
 var useGetVerticalLinePlugin = function (setChartArea, setCoords) {
     var chartPlugin = {
         id: "verticalLinePlugin",
@@ -9300,21 +9799,6 @@ var updateCursorData = function (chart, setCursorData) {
     });
 };
 
-var formatDateTimeToString = function (date) {
-    var hour = date.getHours().toString().padStart(2, '0');
-    var minute = date.getMinutes().toString().padStart(2, '0');
-    var second = date.getSeconds().toString().padStart(2, '0');
-    if (hour === '24') {
-        hour = '00';
-    }
-    var formattedDate = date.toLocaleDateString("en-US", {
-        month: "short",
-        day: "numeric"
-    });
-    var formattedTime = "".concat(hour, ":").concat(minute, ":").concat(second);
-    return { formattedDate: formattedDate, formattedTime: formattedTime };
-};
-
 var useXAxisDatePlugin = function () {
     var chartPlugin = {
         id: 'xAxisDatePlugin',
@@ -9346,12 +9830,21 @@ var useXAxisDatePlugin = function () {
     return chartPlugin;
 };
 
+var useYAxisPlugin = function () {
+    var chartPlugin = {
+        id: 'yAxisPlugin'
+    };
+    return chartPlugin;
+};
+
 var areRangesSimilar = function (tag1, tag2) {
-    var range1 = tag1.maxScale - tag1.minScale; // Rango de la primera etiqueta
-    var range2 = tag2.maxScale - tag2.minScale; // Rango de la segunda etiqueta
+    if (isNil$1(tag1.MaxScale) || isNil$1(tag1.MinScale) || isNil$1(tag2.MaxScale) || isNil$1(tag2.MinScale))
+        return;
+    var range1 = tag1.MaxScale - tag1.MinScale; // Rango de la primera etiqueta
+    var range2 = tag2.MaxScale - tag2.MinScale; // Rango de la segunda etiqueta
     // Determina los límites para la comparación
-    var lowerBound = Math.max(tag1.minScale, tag2.minScale);
-    var upperBound = Math.min(tag1.maxScale, tag2.maxScale);
+    var lowerBound = Math.max(tag1.MinScale, tag2.MinScale);
+    var upperBound = Math.min(tag1.MaxScale, tag2.MaxScale);
     // Calcula el solapamiento entre los dos rangos
     var overlap = Math.max(0, upperBound - lowerBound);
     // Determina si el solapamiento es significativo comparado con los rangos individuales
@@ -9359,290 +9852,104 @@ var areRangesSimilar = function (tag1, tag2) {
     return isSignificantOverlap;
 };
 
-var calculateScales = function (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 *= 0.9;
-    }
-    if (maxScale < max) {
-        maxScale *= 1.1;
-    }
-    return { minScale: minScale, maxScale: maxScale };
-};
-
-var dateNavigator = function (startDate, endDate, scope, operator) {
-    if (scope === "custom")
-        return;
-    else {
-        var _a = scope.split(" "), quantity = _a[0], duration = _a[1];
-        var newStartDate = moment(startDate)[operator](quantity, duration[0]).toDate();
-        var newEndDate = moment(endDate)[operator](quantity, duration[0]).toDate();
-        return { newStartDate: newStartDate, newEndDate: newEndDate };
-    }
-};
-
-Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip$1, Legend, TimeScale, zoomPlugin);
-var Trending = function (_a) {
-    _a.title; var tags = _a.tags;
-    var classes = useTrendingStyles();
-    var _b = useTrendingContext(), state = _b.state, actions = _b.actions;
-    var _c = useState(true), loading = _c[0], setLoading = _c[1];
-    var _d = useState(""), error = _d[0], setError = _d[1];
-    var _e = useState(tags), tagList = _e[0], setTagList = _e[1];
-    var _f = useState(null), cursorData = _f[0], setCursorData = _f[1];
-    var _g = useState(null), lineTabCoords = _g[0], setLineTabCoords = _g[1];
-    var _h = useState(null), chartArea = _h[0], setChartArea = _h[1];
-    var _j = useState(false), chartShouldInitCursors = _j[0], setChartShouldInitCursors = _j[1];
+var TrendingChart = function (_a) {
+    var series = _a.series, chartOptions = _a.chartOptions, setChartOptions = _a.setChartOptions, chartData = _a.chartData, setCursorData = _a.setCursorData, setChartData = _a.setChartData;
+    var _b = useTrendingContext(), state = _b.state, viewTags = _b.state.viewTags; _b.actions;
+    var _c = useState(null), lineTabCoords = _c[0], setLineTabCoords = _c[1];
+    var _d = useState(null), chartArea = _d[0], setChartArea = _d[1];
     var chartRef = useRef(null);
-    var _k = useState({
-        labels: [],
-        datasets: []
-    }), chartData = _k[0], setChartData = _k[1];
-    var verticalLinePlugin = useGetVerticalLinePlugin(setChartArea, setLineTabCoords);
-    var xAxisDatePlugin = useXAxisDatePlugin();
-    var _l = useState({
-        showGrid: true,
-        stepped: false
-    }), customOptions = _l[0], setCustomOptions = _l[1];
-    var debounceTimerRef = useRef(null);
     var debouncedUpdateChart = useRef(debounce(function () {
         if (chartRef.current) {
             updateCursorData(chartRef.current, setCursorData);
             chartRef.current.update();
         }
     }, 250)).current;
-    var handleDateChange = function (newValue, key) {
-        var _a;
-        //@ts-ignore
-        actions.setTotalScope((_a = {}, _a[key] = moment(newValue).toDate(), _a));
-    };
-    var handleChangeScope = function (e) {
-        var newScope = e.target.value;
-        actions.setTotalScope({
-            scope: newScope
-        });
-    };
-    var handleZoom = function (_a) {
-        var chart = _a.chart;
-        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);
-            actions.setTotalScope({
-                start: newStart,
-                end: newEnd
-            });
-        }, 1000);
-    };
-    var handlePan = function (_a) {
-        var chart = _a.chart;
-        if (debounceTimerRef.current) {
-            clearTimeout(debounceTimerRef.current);
+    var _e = useState(false), chartShouldInitCursors = _e[0], setChartShouldInitCursors = _e[1];
+    var verticalLinePlugin = useGetVerticalLinePlugin(setChartArea, setLineTabCoords);
+    var xAxisDatePlugin = useXAxisDatePlugin();
+    var yAxisPlugin = useYAxisPlugin();
+    useEffect(function () {
+        var axes = [];
+        if (!series.length) {
+            return;
         }
-        debounceTimerRef.current = setTimeout(function () {
-            // Handle pan event and execute fetch
-            var newStart = new Date(chart.scales.x.min);
-            var newEnd = new Date(chart.scales.x.max);
-            actions.setTotalScope({
-                start: newStart,
-                end: newEnd,
-                graphPan: true
-            });
-        }, 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
+        viewTags.forEach(function (tag, index) {
+            var _a;
+            if ((_a = series[index]) === null || _a === void 0 ? void 0 : _a.length) {
+                var existingAxis = axes.find(function (existingTag) {
+                    return areRangesSimilar(existingTag, tag);
+                });
+                if (!existingAxis) {
+                    axes.push(tag); // Add new axis if no similar one exists
                 }
-                return __spreadArray(__spreadArray([], prevTagList, true), [newTag], false); // Add the new tag to the list
-            });
-        }
-    };
-    var handleDateNavigator = function (operator) {
-        var newDates = dateNavigator(state.timeScopeStart, state.timeScopeEnd, state.scope, operator);
-        if (newDates) {
-            actions.setTotalScope({ start: newDates.newStartDate, end: newDates.newEndDate, scope: state.scope });
-        }
-    };
-    var _m = useState({
-        animation: {
-            duration: 0
-        },
-        responsive: true,
-        maintainAspectRatio: false,
-        scales: {
-            x: {
-                type: "time",
+            }
+        });
+        // Configure yAxes based on grouped axes
+        var yAxesConfig = axes.map(function (axis, index) {
+            return {
+                id: "y-axis-".concat(index),
+                type: "linear",
+                display: axis.visible,
+                scaleLabel: {
+                    display: true,
+                    labelString: axis.tagName
+                },
                 ticks: {
-                    autoSkip: true,
-                    maxTicksLimit: 20,
-                    callback: function (value, index, ticks) {
-                        var currentDate = new Date(value);
-                        var time = formatDateTimeToString(currentDate).formattedTime;
-                        var date = formatDateTimeToString(currentDate).formattedDate;
-                        // Si es el primer tick, siempre muestra la fecha y hora
-                        if (index === 0) {
-                            return [time, date];
-                        }
-                        // De lo contrario, solo muestra la hora
-                        return time;
-                    }
+                    min: axis.autoScale ? undefined : axis.minScale,
+                    max: axis.autoScale ? undefined : axis.maxScale
                 },
                 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: handlePan
-                }
-            }
-        }
-    }), chartOptions = _m[0], setChartOptions = _m[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: state.timeScopeStart.getTime(),
-                                end: state.timeScopeEnd.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;
+                afterUpdate: function (axis) {
+                    var chart = axis.chart;
+                    var keys = Object.keys(chart.scales).filter(function (sc) { return sc !== 'x'; });
+                    if (keys.length > 1) {
+                        for (var scaleKey in chart.scales) {
+                            var scale = chart.scales[scaleKey];
+                            if (scale.max === 1 && scale.min === 0) {
+                                chart.scales[scaleKey].display = false;
+                                chart.scales[scaleKey].options.display = false;
                             }
-                            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
+                            else {
+                                chart.scales[scaleKey].display = true;
+                                chart.scales[scaleKey].options.display = true;
                             }
-                        });
-                        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
-                                }); }),
-                                tagId: tag.tagId,
-                                borderColor: tag.color,
-                                hidden: !tag.visible,
-                                pointRadius: serie.length <= 50 ? 3 : 0
-                            };
-                        });
-                        setChartShouldInitCursors(true);
-                        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*/];
+                        }
+                    }
                 }
+            };
+        });
+        setChartOptions(function (prevOptions) {
+            var newResp = (__assign(__assign({}, prevOptions), { scales: __assign({ x: __assign({}, prevOptions.scales.x) }, yAxesConfig.reduce(function (acc, cur) {
+                    var _a;
+                    return (__assign(__assign({}, acc), (_a = {}, _a[cur.id] = cur, _a)));
+                }, {})) }));
+            return newResp;
+        });
+        var updatedSeries = series.map(function (serie, index) {
+            var tag = viewTags[index];
+            var axisIndex = axes.findIndex(function (existingTag) {
+                return areRangesSimilar(existingTag, tag);
             });
-        }); };
-        fetchData();
-    }, [JSON.stringify(state), 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]);
-    if (error)
-        return React__default.createElement("p", null,
-            "Error: ",
-            error);
-    useEffect(function () {
-        setChartOptions(function (prevOptions) { return (__assign(__assign({}, prevOptions), { scales: __assign(__assign({}, prevOptions.scales), { x: __assign(__assign({}, prevOptions.scales.x), { min: state.timeScopeStart.getTime(), max: state.timeScopeEnd.getTime() }) }) })); });
-    }, [state.timeScopeStart, state.timeScopeEnd]);
+            return {
+                yAxisID: axisIndex >= 0 ? "y-axis-".concat(axisIndex) : undefined,
+                data: serie.map(function (sample) { return ({
+                    x: new Date(sample.timestamp),
+                    y: sample.value
+                }); }),
+                tagId: tag === null || tag === void 0 ? void 0 : tag.TagId,
+                borderColor: tag === null || tag === void 0 ? void 0 : tag.Color,
+                hidden: !(tag === null || tag === void 0 ? void 0 : tag.IsVisible),
+                pointRadius: serie.length <= 50 ? 3 : 0
+            };
+        });
+        setChartShouldInitCursors(true);
+        setChartData({
+            labels: [],
+            datasets: updatedSeries
+        });
+    }, [state.graphShouldUpdate, series]);
     useEffect(function () {
         if (chartShouldInitCursors) {
             if (chartRef.current) {
@@ -9650,116 +9957,141 @@ var Trending = function (_a) {
                 chartRef.current.update();
             }
         }
-    }, [chartShouldInitCursors, state]);
-    return (React__default.createElement(Grid$1, { container: true, style: { width: "95svw", height: "81svh", margin: 0 } },
-        React__default.createElement(Grid$1, { item: true, xs: 12, container: true, justifyContent: "space-between", alignItems: "center", style: { height: "15%" } },
-            React__default.createElement(Grid$1, { md: 5, item: true, container: true, justifyContent: "flex-start", alignItems: "center", spacing: 1, wrap: "wrap" },
-                React__default.createElement(IconButton$1, { color: "primary", onClick: function () { return handleDateNavigator("subtract"); }, className: classes.navigatorButton },
-                    React__default.createElement(ChevronLeft, { fontSize: "large" })),
-                React__default.createElement(Grid$1, { item: true },
-                    React__default.createElement(TextField, { type: "datetime-local", className: classes.datetimePicker, label: "Start", variant: "outlined", value: moment(state.timeScopeStart).format("YYYY-MM-DDTHH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "start"); }, InputLabelProps: {
-                            shrink: true,
-                            style: { marginLeft: "10px" }
-                        }, InputProps: {
-                            max: state.timeScopeEnd
-                        } })),
-                React__default.createElement(Grid$1, { item: true, className: classes.select },
-                    React__default.createElement(FormControl$1, { variant: "outlined" },
-                        React__default.createElement(Select$1, { value: state.scope, onChange: handleChangeScope, displayEmpty: true },
-                            React__default.createElement(MenuItem$1, { value: "10 min" }, "10 min"),
-                            React__default.createElement(MenuItem$1, { value: "1 hour" }, "1 hour"),
-                            React__default.createElement(MenuItem$1, { value: "4 hours" }, "4 hours"),
-                            React__default.createElement(MenuItem$1, { value: "12 hours" }, "12 hours"),
-                            React__default.createElement(MenuItem$1, { value: "1 day" }, "1 day"),
-                            React__default.createElement(MenuItem$1, { value: "10 days" }, "10 days"),
-                            React__default.createElement(MenuItem$1, { value: "custom" }, "Custom")))),
-                React__default.createElement(Grid$1, { item: true },
-                    React__default.createElement(TextField, { label: "End", variant: "outlined", className: classes.datetimePicker, type: "datetime-local", value: moment(state.timeScopeEnd).format("YYYY-MM-DDTHH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "end"); }, InputLabelProps: {
-                            shrink: true,
-                            style: { marginLeft: "10px" }
-                        } })),
-                React__default.createElement(IconButton$1, { color: "primary", onClick: function () { return handleDateNavigator("add"); }, className: classes.navigatorButton },
-                    React__default.createElement(ChevronRight, { fontSize: "large" }))),
-            React__default.createElement(Grid$1, { md: 7, item: true, container: true, justifyContent: "space-between" },
-                React__default.createElement(Grid$1, { item: true, container: true, wrap: "nowrap", spacing: 1 },
-                    React__default.createElement(Grid$1, { item: true, container: true },
-                        React__default.createElement(CustomOptionsComponent, { customOptions: customOptions, setCustomOptions: setCustomOptions }))))),
-        React__default.createElement(Grid$1, { item: true, xs: 12, style: { height: '45%' } },
-            React__default.createElement(Paper$1, { style: { height: '100%', position: 'relative' } },
-                lineTabCoords && chartArea ? (React__default.createElement(DraggableLineControl, { color: 'red', chartArea: chartArea, initialLeft: lineTabCoords === null || lineTabCoords === void 0 ? void 0 : lineTabCoords.x1, onUpdate: function (newLeft) {
-                        setLineTabCoords(function (prevCoords) {
-                            prevCoords.x1 = newLeft;
-                            return prevCoords;
-                        });
-                        // @ts-ignore
-                        chartRef.current.mouseX = newLeft;
-                        debouncedUpdateChart();
-                    } })) : null,
-                lineTabCoords && chartArea ? (React__default.createElement(DraggableLineControl, { color: 'blue', initialLeft: lineTabCoords === null || lineTabCoords === void 0 ? void 0 : lineTabCoords.x2, chartArea: chartArea, onUpdate: function (newLeft) {
-                        setLineTabCoords(function (prevCoords) {
-                            prevCoords.x2 = newLeft;
-                            return prevCoords;
-                        });
-                        // @ts-ignore
-                        chartRef.current.secondLineX = newLeft;
-                        debouncedUpdateChart();
-                    } })) : null,
-                React__default.createElement(Line, { ref: chartRef, data: chartData, options: chartOptions, plugins: [verticalLinePlugin, xAxisDatePlugin] }))),
-        React__default.createElement(Grid$1, { item: true, xs: 12, style: { height: '40%', minWidth: "100%", paddingTop: "3rem" } },
-            React__default.createElement(TableComponent, { tagList: tagList, chartData: chartData, setTagList: setTagList, cursorData: cursorData, onDeleteTag: handleDeleteTag, onAddTag: handleAddTag })),
-        loading && (React__default.createElement(Grid$1, { item: true, xs: 12, style: { textAlign: 'center' } },
-            React__default.createElement("p", null, "Loading...")))));
+    }, [chartShouldInitCursors, state.graphShouldUpdate]);
+    return (React__default.createElement(Paper$1, { style: { height: '100%', position: 'relative' } },
+        lineTabCoords && chartArea ? (React__default.createElement(DraggableLineControl, { color: 'red', chartArea: chartArea, initialLeft: lineTabCoords === null || lineTabCoords === void 0 ? void 0 : lineTabCoords.x1, onUpdate: function (newLeft) {
+                setLineTabCoords(function (prevCoords) {
+                    prevCoords.x1 = newLeft;
+                    return prevCoords;
+                });
+                // @ts-ignore
+                chartRef.current.mouseX = newLeft;
+                debouncedUpdateChart();
+            } })) : null,
+        lineTabCoords && chartArea ? (React__default.createElement(DraggableLineControl, { color: 'blue', initialLeft: lineTabCoords === null || lineTabCoords === void 0 ? void 0 : lineTabCoords.x2, chartArea: chartArea, onUpdate: function (newLeft) {
+                setLineTabCoords(function (prevCoords) {
+                    prevCoords.x2 = newLeft;
+                    return prevCoords;
+                });
+                // @ts-ignore
+                chartRef.current.secondLineX = newLeft;
+                debouncedUpdateChart();
+            } })) : null,
+        React__default.createElement(Line, { ref: chartRef, data: chartData, options: chartOptions, plugins: [verticalLinePlugin, xAxisDatePlugin, yAxisPlugin] })));
 };
 
-// @flow
-var TrendingsIndex = function (props) {
-    return (React.createElement(TrendingProvider, null,
-        React.createElement(Box, { p: 3, style: { maxWidth: "100%" } },
-            React.createElement(Paper, null,
-                React.createElement(Grid$1, { container: true, spacing: 3, style: { padding: "20px" } },
-                    React.createElement(Grid$1, { item: true, xs: 12 },
-                        React.createElement(Trending, { title: "Trending Chart", 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
-                                },
-                            ] })))))));
+Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip$1, Legend, TimeScale, zoomPlugin);
+var Trending = function (_a) {
+    _a.title;
+    var _b = useTrendingContext(), state = _b.state, viewTags = _b.state.viewTags;
+    var _c = useState(''), error = _c[0], setError = _c[1];
+    var _d = useState(true), loading = _d[0], setLoading = _d[1];
+    var _e = useState([]), series = _e[0], setSeries = _e[1];
+    var _f = useChartOptions(), chartOptions = _f[0], setChartOptions = _f[1];
+    var _g = useState({
+        labels: [],
+        datasets: []
+    }), chartData = _g[0], setChartData = _g[1];
+    var _h = useState(null), cursorData = _h[0], setCursorData = _h[1];
+    var debounceForFetchingData = useRef(null);
+    useEffect(function () {
+        if (debounceForFetchingData.current) {
+            clearTimeout(debounceForFetchingData.current);
+        }
+        debounceForFetchingData.current = setTimeout(function () {
+            var fetchData = function () { return __awaiter(void 0, void 0, void 0, function () {
+                var tagIds, response, error_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            _a.trys.push([0, 3, , 4]);
+                            setLoading(true);
+                            if (!(Array.isArray(viewTags) && viewTags.length)) return [3 /*break*/, 2];
+                            tagIds = viewTags.map(function (tag) { return tag.TagId; });
+                            return [4 /*yield*/, axios.post("/series?nodeName=null", {
+                                    start: state.timeScopeStart.getTime(),
+                                    end: state.timeScopeEnd.getTime(),
+                                    tagIds: tagIds,
+                                    sampleCount: 1000
+                                })];
+                        case 1:
+                            response = _a.sent();
+                            setSeries(response.data || []);
+                            _a.label = 2;
+                        case 2:
+                            setLoading(false);
+                            return [3 /*break*/, 4];
+                        case 3:
+                            error_1 = _a.sent();
+                            setError(error_1.message);
+                            setLoading(false);
+                            return [3 /*break*/, 4];
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            }); };
+            fetchData();
+        }, 800);
+    }, [state.graphShouldUpdate, viewTags]);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Grid$1, { container: true, style: { width: "95svw", height: "81svh", margin: 0 } },
+            React__default.createElement(Header, { setChartOptions: setChartOptions }),
+            React__default.createElement(Grid$1, { item: true, xs: 12, style: { height: '45%' } },
+                React__default.createElement(TrendingChart, { series: series, chartData: chartData, setChartData: setChartData, chartOptions: chartOptions, setChartOptions: setChartOptions, setCursorData: setCursorData })),
+            React__default.createElement(Grid$1, { item: true, xs: 12, style: { height: '40%', minWidth: "100%", paddingTop: "3rem" } },
+                React__default.createElement(TableComponent, { chartData: chartData, cursorData: cursorData })),
+            loading && (React__default.createElement(Grid$1, { item: true, xs: 12, style: { textAlign: 'center' } },
+                React__default.createElement("p", null, "Loading...")))),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); }, title: "ERROR" })));
+};
+
+var TrendingsPage = function (props) {
+    var _a = useState(''), error = _a[0], setError = _a[1];
+    var _b = useTrendingContext().actions, setViews = _b.setViews, setViewTags = _b.setViewTags, setViewSelected = _b.setViewSelected;
+    useEffect(function () {
+        var getTags = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var viewsResp, lastCreated, viewTagsResp;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, getViews(null)];
+                    case 1:
+                        viewsResp = _a.sent();
+                        if (!viewsResp.ok) return [3 /*break*/, 3];
+                        setViews(viewsResp.data.tables[0].rows);
+                        lastCreated = viewsResp.data.tables[0].rows.reduce(function (prev, current) { return (prev.ViewId > current.ViewId) ? prev : current; });
+                        //viewSelected
+                        setViewSelected(lastCreated);
+                        return [4 /*yield*/, getViewTags(lastCreated.ViewId)];
+                    case 2:
+                        viewTagsResp = _a.sent();
+                        if (viewTagsResp.ok) {
+                            setViewTags(viewTagsResp.data.tables[0].rows);
+                        }
+                        else {
+                            setError(viewTagsResp.message);
+                        }
+                        return [3 /*break*/, 4];
+                    case 3:
+                        setError(viewsResp.message);
+                        _a.label = 4;
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); };
+        getTags();
+    }, []);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Box, { p: 3, style: { maxWidth: "100%" } },
+            React__default.createElement(Paper, null,
+                React__default.createElement(Grid$1, { container: true, spacing: 3, style: { padding: "20px" } },
+                    React__default.createElement(Grid$1, { item: true, xs: 12 },
+                        React__default.createElement(Trending, { title: "Trending Chart" }))))),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); }, size: "xl", title: "ERROR" })));
+};
+
+var index = function () {
+    return (React__default.createElement(TrendingProvider, null,
+        React__default.createElement(TrendingsPage, null)));
 };
 
 var MESFMainRouter = function () {
@@ -9769,7 +10101,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: "/trendings", element: React__default.createElement(index, null) }),
             React__default.createElement(Route, { path: "/home", element: React__default.createElement(Home, null) })),
         React__default.createElement(CustomRoutes, null)));
 };
@@ -9794,7 +10126,7 @@ var Navigation = function (_a) {
         };
     }, [params.toString()]);
     return (React__default.createElement("div", { className: "wrapper" },
-        React__default.createElement(Header, { showAreaSelector: showAreaSelector, navbarTitle: navbarTitle }),
+        React__default.createElement(Header$1, { showAreaSelector: showAreaSelector, navbarTitle: navbarTitle }),
         React__default.createElement(MESFMainContainer, null)));
 };
 
@@ -9956,4 +10288,5 @@ 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, TrendingsIndex, USER_LABELS, UTLSettingsProvider, UploadFileControl, UserProvider, axiosInstance, formatNumber, getCrewStyle, getError, getShiftStyle, getTokenFromLS, renewToken, useAssetContext, useToken, useUTLSettingsContext, useUserContext };
+export { Account, AssetProvider, AuthContext, AuthProvider, BarChartControl, ButtonWithLoading, 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, TrendingsPage, USER_LABELS, UTLSettingsProvider, UploadFileControl, UserProvider, axiosInstance, formatNumber, getCrewStyle, getError, getShiftStyle, getTokenFromLS, renewToken, useAssetContext, useToken, useUTLSettingsContext, useUserContext };
+//# sourceMappingURL=index.esm.js.map