@dexteel/mesf-core 4.5.7 → 4.5.8

package/CHANGELOG.md

@@ -1,4 +1,7 @@
 # CHANGELOG
+## 4.5.8
+- Fix table data in Trendings
+- Fix cursors
 ## 4.5.6
  - Fix login with Windows Auth
 ## 4.5.5

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, debounce } from 'lodash-es';
+import { values, get, isNil as isNil$1, isEmpty, isNaN, debounce } 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';
@@ -27,10 +27,10 @@ import moment from 'moment';
 import zoomPlugin from 'chartjs-plugin-zoom';
 import { Line } from 'react-chartjs-2';
 import Popover from '@material-ui/core/Popover';
-import { Alert as Alert$3, TreeView as TreeView$1, TreeItem as TreeItem$1 } from '@material-ui/lab';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import FolderIcon from '@material-ui/icons/Folder';
 import InsertDriveFileIcon from '@material-ui/icons/InsertDriveFile';
+import { Alert as Alert$3, TreeView as TreeView$1, TreeItem as TreeItem$1 } from '@material-ui/lab';
 import PersonPinCircleIcon from '@material-ui/icons/PersonPinCircle';
 import PropTypes from 'prop-types';
 import { ResponsiveBar } from '@nivo/bar';
@@ -8419,66 +8419,6 @@ var ColorPicker = function (_a) {
                 } })); })))));
 };
 
-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"
-    },
-    bottomTitlesRow: {
-        '& th': {
-            border: "1px black solid"
-        },
-        backgroundColor: "#e9ecef"
-    },
-    doubleInput: {
-        padding: "0",
-        '& input[type="text"] ': {
-            width: "100%",
-            height: "17px",
-            display: "block",
-            margin: "0",
-            padding: "0"
-        }
-    },
-    inputCol: {
-        width: "11.25rem",
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap'
-    },
-    autoScale: {
-        width: '7.5rem'
-    },
-    scale: {
-        width: '37.5rem',
-        padding: "0"
-    },
-    visible: {
-        width: '3.75rem'
-    },
-    color: {
-        width: '4.375rem'
-    },
-    unit: {
-        width: '7.5rem'
-    },
-    xStats: {
-    // ...
-    }
-}); });
-
 var TagSelectionModal = function (_a) {
     var isOpen = _a.isOpen; _a.onClose; var onTagSelect = _a.onTagSelect;
     var _b = useState(true), isLoading = _b[0], setIsLoading = _b[1];
@@ -8634,10 +8574,143 @@ var AddTagModal = function (_a) {
                     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 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"
+    },
+    bottomTitlesRow: {
+        '& th': {
+            border: "1px black solid"
+        },
+        backgroundColor: "#e9ecef"
+    },
+    doubleInput: {
+        padding: "0",
+        '& input[type="text"] ': {
+            width: "100%",
+            height: "17px",
+            display: "block",
+            margin: "0",
+            padding: "0"
+        }
+    },
+    inputCol: {
+        width: "11.25rem",
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+    },
+    autoScale: {
+        width: '7.5rem'
+    },
+    scale: {
+        width: '37.5rem',
+        padding: "0"
+    },
+    visible: {
+        width: '3.75rem'
+    },
+    color: {
+        width: '4.375rem'
+    },
+    unit: {
+        width: '7.5rem'
+    },
+    xStats: {
+    // ...
+    }
+}); });
+
+var timeDifference = function (start, end) {
+    console.log(start, end);
+    var differenceMilliseconds = start - end;
+    var seconds = Math.floor(differenceMilliseconds / 1000);
+    var minutes = Math.floor(seconds / 60);
+    var hours = Math.floor(minutes / 60);
+    var remainingMinutes = minutes % 60;
+    var remainingSeconds = seconds % 60;
+    return "".concat(hours, "h ").concat(remainingMinutes, "m ").concat(remainingSeconds, "s");
+};
+
 var TableComponent = function (_a) {
-    var tagList = _a.tagList, setTagList = _a.setTagList; _a.chartData; var cursorData = _a.cursorData, onDeleteTag = _a.onDeleteTag, onAddTag = _a.onAddTag;
+    var tagList = _a.tagList, setTagList = _a.setTagList, chartData = _a.chartData, cursorData = _a.cursorData, onDeleteTag = _a.onDeleteTag, onAddTag = _a.onAddTag;
     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) {
@@ -8780,7 +8853,17 @@ var TableComponent = function (_a) {
                                     second: '2-digit'
                                 });
                                 var milliseconds = date.getMilliseconds().toString().padStart(3, '0');
-                                return "".concat(formattedDate, ".").concat(milliseconds);
+                                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);
@@ -8794,9 +8877,19 @@ var TableComponent = function (_a) {
                                     second: '2-digit'
                                 });
                                 var milliseconds = date.getMilliseconds().toString().padStart(3, '0');
-                                return "".concat(formattedDate, ".").concat(milliseconds);
+                                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) }, "X2-X1 Stats")))),
+                            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 },
@@ -8807,59 +8900,104 @@ var TableComponent = function (_a) {
                             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, " Y1"),
-                            React__default.createElement("th", null, "Y2"),
+                            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, "May")))))),
+                            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) { 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),
-                        React__default.createElement("td", { className: classes.doubleInput }),
-                        React__default.createElement("td", null, "y1y2"),
-                        React__default.createElement("td", null, "min"),
-                        React__default.createElement("td", null, "max"))); }))))),
+                    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 TrendingsInitialState = {
     timeScopeStart: moment(new Date()).subtract(1, "days").toDate(),
     timeScopeEnd: new Date(),
@@ -9102,57 +9240,36 @@ var CustomOptionsComponent = function (_a) {
                 "Stepped"))));
 };
 
-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);
+var useGetVerticalLinePlugin = function (setChartArea, setCoords) {
+    return {
+        id: "verticalLinePlugin",
+        afterUpdate: function (chart) {
+            if (chart.chartArea) {
+                // console.log("after update");
+                if (chart.mouseX === null) {
+                    chart.mouseX = chart.chartArea.left + (chart.chartArea.width / 10);
+                    // chart.mouseX = chart.chartArea.left + 30.9
+                }
+                if (chart.secondLineX === null) {
+                    chart.secondLineX = chart.chartArea.left + (chart.chartArea.width * 0.90);
+                    // chart.secondLineX = chart.chartArea.right
+                }
+            }
+        },
+        beforeInit: function (chart) {
+            chart.mouseX = null;
+            chart.secondLineX = null;
+        },
+        afterDatasetsDraw: function (chart) {
+            var x1 = chart.mouseX;
+            var x2 = chart.secondLineX;
+            setChartArea(chart.chartArea);
+            setCoords({ x1: x1, x2: x2 });
         }
-        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 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);
-function getValuesAtCursor(chart, timeAtCursor) {
+var getValuesAtCursor = function (chart, timeAtCursor) {
     var valuesAtCursor = [];
     chart.data.datasets.forEach(function (dataset) {
         var previousDataPoint = null;
@@ -9169,15 +9286,13 @@ function getValuesAtCursor(chart, timeAtCursor) {
         }
     });
     return valuesAtCursor;
-}
-function updateCursorData(chart, setCursorData) {
+};
+var updateCursorData = function (chart, setCursorData) {
     var xScale = chart.scales.x;
-    chart.scales.y;
-    // Coordenadas para la primera línea
+    // Coordenadas para la primera y segunda línea
     var timeAtCursor1 = xScale.getValueForPixel(chart.mouseX);
-    // Coordenadas para la segunda línea
     var timeAtCursor2 = xScale.getValueForPixel(chart.secondLineX);
-    // Los valores en el punto del cursor pueden ser diferentes para cada línea si corresponden a diferentes series de datos
+    // Los valores en el punto del cursor pueden ser diferentes
     var valuesAtCursor1 = getValuesAtCursor(chart, timeAtCursor1);
     var valuesAtCursor2 = getValuesAtCursor(chart, timeAtCursor2);
     setCursorData({
@@ -9185,51 +9300,74 @@ function updateCursorData(chart, setCursorData) {
         x2: timeAtCursor2,
         values: __spreadArray(__spreadArray([], valuesAtCursor1, true), valuesAtCursor2, true)
     });
-}
-function getVerticalLinePlugin(setChartArea, setCoords) {
-    return {
-        id: "verticalLinePlugin",
-        afterUpdate: function (chart) {
-            if (chart.secondLineX === null) {
-                chart.secondLineX = chart.scales.x.left + (chart.scales.x.width * 0.75);
-            }
-            if (chart.mouseX === null) {
-                chart.mouseX = chart.scales.x.left + (chart.scales.x.width / 4);
-            }
-        },
-        beforeInit: function (chart) {
-            chart.mouseX = null;
-            chart.secondLineX = null;
-        },
-        afterDatasetsDraw: function (chart) {
-            var x1 = chart.mouseX;
-            var x2 = chart.secondLineX;
-            setChartArea(chart.chartArea);
-            setCoords({ x1: x1, x2: x2 });
-        }
-    };
-}
+};
+
+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
+    // Determina los límites para la comparación
+    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
+    var isSignificantOverlap = (overlap / range1 > 0.5) && (overlap / range2 > 0.5);
+    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 chartRef = useRef(null);
-    var _c = useState({
+    var _k = useState({
         labels: [],
         datasets: []
-    }), chartData = _c[0], setChartData = _c[1];
-    var _d = useState(null), lineTabCoords = _d[0], setLineTabCoords = _d[1];
-    var _e = useState(null), chartArea = _e[0], setChartArea = _e[1];
-    var _f = useState(tags), tagList = _f[0], setTagList = _f[1];
-    var _g = useState(null), cursorData = _g[0], setCursorData = _g[1];
-    var verticalLinePlugin = getVerticalLinePlugin(setChartArea, setLineTabCoords);
-    var _h = useState({
+    }), chartData = _k[0], setChartData = _k[1];
+    var verticalLinePlugin = useGetVerticalLinePlugin(setChartArea, setLineTabCoords);
+    var _l = useState({
         showGrid: true,
         stepped: false
-    }), customOptions = _h[0], setCustomOptions = _h[1];
-    var _j = useState(true), loading = _j[0], setLoading = _j[1];
-    var _k = useState(""), error = _k[0], setError = _k[1];
+    }), customOptions = _l[0], setCustomOptions = _l[1];
     var debounceTimerRef = useRef(null);
-    var classes = useTrendingStyles();
     var debouncedUpdateChart = useRef(debounce(function () {
         if (chartRef.current) {
             updateCursorData(chartRef.current, setCursorData);
@@ -9300,7 +9438,7 @@ var Trending = function (_a) {
             actions.setTotalScope({ start: newDates.newStartDate, end: newDates.newEndDate, scope: state.scope });
         }
     };
-    var _l = useState({
+    var _m = useState({
         animation: {
             duration: 0
         },
@@ -9369,7 +9507,7 @@ var Trending = function (_a) {
                 }
             }
         }
-    }), chartOptions = _l[0], setChartOptions = _l[1];
+    }), 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;
@@ -9434,11 +9572,13 @@ var Trending = function (_a) {
                                     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
@@ -9459,7 +9599,7 @@ var Trending = function (_a) {
     }, [JSON.stringify(state), tagList]);
     useEffect(function () {
         var changeOptions = function () {
-            console.log("change options");
+            // console.log("change options");
             setChartOptions(function (prevOptions) { return (__assign(__assign({}, prevOptions), { elements: {
                     line: {
                         stepped: customOptions.stepped,
@@ -9469,36 +9609,6 @@ var Trending = function (_a) {
         };
         changeOptions();
     }, [customOptions]);
-    function areRangesSimilar(tag1, tag2) {
-        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);
-        // 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
-        var isSignificantOverlap = (overlap / range1 > 0.5) && (overlap / range2 > 0.5);
-        return isSignificantOverlap;
-    }
-    function calculateScales(min, max, sigDigits) {
-        var roundToSignificantDigits = function (num) {
-            if (num === 0)
-                return 0;
-            var multiplier = Math.pow(10, sigDigits - Math.floor(Math.log10(Math.abs(num))) - 1);
-            return Math.round(num * multiplier) / multiplier;
-        };
-        var minScale = roundToSignificantDigits(min);
-        var maxScale = roundToSignificantDigits(max);
-        // Adjust minScale and maxScale if necessary
-        if (minScale > min) {
-            minScale *= 0.9;
-        }
-        if (maxScale < max) {
-            maxScale *= 1.1;
-        }
-        return { minScale: minScale, maxScale: maxScale };
-    }
     if (error)
         return React__default.createElement("p", null,
             "Error: ",
@@ -9506,6 +9616,14 @@ var Trending = function (_a) {
     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]);
+    useEffect(function () {
+        if (chartShouldInitCursors) {
+            if (chartRef.current) {
+                updateCursorData(chartRef.current, setCursorData);
+                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" },

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

@@ -1,7 +1,7 @@
+import { ChartData } from 'chart.js';
 import React from 'react';
 import './ContextMenu.css';
-import { CursorData, TagList } from './Trending';
-import { ChartData } from 'chart.js';
+import { CursorData, TagList } from './models/TrendingModels';
 interface TableComponentProps {
     tagList: TagList;
     setTagList: React.Dispatch<React.SetStateAction<TagList>>;

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

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

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

@@ -0,0 +1,11 @@
+import { ChartData } from 'chart.js';
+import React from 'react';
+import { Tag } from '../models/TrendingModels';
+interface Props {
+    tag: Tag;
+    chartData: ChartData;
+    index: number;
+    limitX: number;
+}
+export declare const CellComponent: ({ tag, chartData, index, limitX }: Props) => React.JSX.Element;
+export {};

package/dist/pages/trendings/components/chart/components/modals/addTagModal/AddTagModal.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tag } from '../../../Trending';
+import { Tag } from '../../../models/TrendingModels';
 interface Props {
     open: boolean;
     handleClose: () => void;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Tag } from "../../../Trending";
+import { Tag } from "../../../models/TrendingModels";
 interface TagSelectionModalProps {
     isOpen: boolean;
     onClose: () => void;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { CustomOptions } from "./Trending";
+import { CustomOptions } from "./models/TrendingModels";
 interface CustomOptionsComponentProps {
     customOptions: CustomOptions;
     setCustomOptions: React.Dispatch<React.SetStateAction<CustomOptions>>;

package/dist/pages/trendings/components/chart/hooks/useGetVerticalLinePlugin.d.ts

@@ -0,0 +1,2 @@
+import { Plugin } from 'chart.js';
+export declare const useGetVerticalLinePlugin: (setChartArea: (param: any) => void, setCoords: any) => Plugin;

package/dist/pages/trendings/components/chart/hooks/useTagsDataTable.d.ts

@@ -0,0 +1,24 @@
+import { ChartData } from "chart.js";
+import { CursorData, TagList } from "../models/TrendingModels";
+interface Props {
+    cursorData: CursorData;
+    tagList: TagList;
+    chartData: ChartData;
+}
+interface TagsDataTable {
+    [tagName: string]: {
+        y1: number;
+        y2: number;
+        y2y1: number;
+        pmin: {
+            x: number | Date;
+            y: number;
+        };
+        pmax: {
+            x: number | Date;
+            y: number;
+        };
+    };
+}
+export declare const useTagsDataTable: ({ cursorData, tagList, chartData }: Props) => TagsDataTable;
+export {};

package/dist/pages/trendings/components/chart/hooks/useUpdateCursorData.d.ts

@@ -0,0 +1,2 @@
+import { CursorData } from '../models/TrendingModels';
+export declare const updateCursorData: (chart: any, setCursorData: (cursorData: CursorData) => void) => void;

package/dist/pages/trendings/components/chart/models/TrendingModels.d.ts

@@ -0,0 +1,33 @@
+export interface TimeScope {
+    start: Date;
+    end: Date;
+}
+export interface Sample {
+    timestamp: number;
+    value: number;
+}
+export type SampleArray = Sample[][];
+export interface Tag {
+    tagId: number;
+    tagName: string;
+    tagType: string;
+    color: string;
+    autoScale: boolean;
+    minScale: number;
+    maxScale: number;
+    visible: boolean;
+}
+export interface CursorData {
+    x1: Date;
+    x2: Date;
+    values: number[];
+}
+export interface LineCoords {
+    x1: number;
+    x2: number;
+}
+export interface CustomOptions {
+    showGrid: boolean;
+    stepped: boolean;
+}
+export type TagList = Tag[];

package/dist/pages/trendings/components/chart/repository/TrendingRepository.d.ts

@@ -1,3 +1,5 @@
+import { TagList } from "../models/TrendingModels";
+export declare const fetchDataFunction: (tagList: TagList[], state: any, actions: any) => Promise<void>;
 export declare const getTags: (NodeName: string | null) => Promise<import("../../../../../services").ResponseMESF>;
 export declare const getSeriesData: (TagIds: string, Start: number | null, End: number | null, SampleCount: number) => Promise<import("../../../../../services").ResponseMESF>;
 export declare const saveTagDefaults: (TagId: number, Alias: string, Color: string, MinScale: number, MaxScale: number, Unit: string) => Promise<import("../../../../../services").ResponseMESF>;

package/dist/pages/trendings/components/chart/utils/areRangeSimilar.d.ts

@@ -0,0 +1,2 @@
+import { Tag } from "../models/TrendingModels";
+export declare const areRangesSimilar: (tag1: Tag, tag2: Tag) => boolean;

package/dist/pages/trendings/components/chart/utils/calculateScales.d.ts

@@ -0,0 +1,4 @@
+export declare const calculateScales: (min: any, max: any, sigDigits: any) => {
+    minScale: number;
+    maxScale: number;
+};

package/dist/pages/trendings/components/chart/utils/timeDifference.d.ts

@@ -0,0 +1 @@
+export declare const timeDifference: (start: number, end: number) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dexteel/mesf-core",
-  "version": "4.5.7",
+  "version": "4.5.8",
   "author": "Dexteel Team",
   "module": "dist/index.esm.js",
   "typings": "dist/index.d.ts",