@dexteel/mesf-core 4.7.2 → 4.7.4

package/CHANGELOG.md

@@ -1,4 +1,12 @@
 # CHANGELOG
+## 4.7.4
+- Trending: Change size of the date navigator arrows to improve the responsive behavior
+- Trendings: Fix too many numbers on table bug. Show only the 3 digits after the comma
+- Trending: Set new limits on the draggable line cursors. Now one cursor cannot exceed the position of the other cursor
+- Trending: In add tag modal, when you select a tag, the popup doesn't close
+- Trending: Fix cannot edit unit bug
+## 4.7.3
+- Trendings: Fix date time navigation when the scope is 'custom'. Navigator takes difference between start date and end date
 ## 4.7.2
 - Trending: Fix repeated tags bug. When you select a tag that was already in the view, you get an error message
 - MESF: Add a button in the navbar to go to /trendings

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 export { LicenseManager } from 'ag-grid-enterprise';
 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, Tooltip, createStyles as createStyles$1, FormControl as FormControl$1, Select as Select$1, Box, Divider, IconButton as IconButton$1, debounce, List, ListItem, ListItemText } from '@material-ui/core';
-import { values, get, isNil as isNil$1, isEmpty, isNaN } from 'lodash-es';
+import { values, get, isNil as isNil$1, isEmpty, isNaN, round } 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';
@@ -10273,11 +10273,12 @@ var useTrendingStyles = makeStyles$1(function (theme) { return ({
             fontSize: "13px !important",
             height: "15px !important",
             paddingRight: "3px",
-            paddingLeft: "5px"
+            paddingLeft: "3px"
         },
         "& .MuiInput-underline:before": {
             borderBottomColor: "rgba(0, 0, 0, 0.42)"
-        }
+        },
+        padding: 0
     },
     select: {
         "& .MuiInput-root": {
@@ -10295,7 +10296,8 @@ var useTrendingStyles = makeStyles$1(function (theme) { return ({
         },
         "& .MuiInput-underline:before": {
             borderBottomColor: "rgba(0, 0, 0, 0.42)"
-        }
+        },
+        padding: 0
     },
     labelOptions: {
         paddingLeft: "2rem",
@@ -10323,8 +10325,15 @@ var useTrendingStyles = makeStyles$1(function (theme) { return ({
     },
     navigatorButton: {
         "& .MuiSvgIcon-root": {
-            cursor: "pointer !important"
-        }
+            cursor: "pointer !important",
+            height: '24px',
+            width: '24px',
+            '& svg': {
+                // Adjust the icon size as well
+                fontSize: '1.5rem'
+            }
+        },
+        color: 'black'
     }
 }); });
 
@@ -10619,6 +10628,10 @@ var TableComponent = function (_a) {
         var newTags = viewTags.map(function (tag) { return tag.TagId === tagId ? __assign(__assign({}, tag), { IsVisible: value }) : tag; });
         setViewTags(newTags);
     };
+    var handleUnitChange = function (tagId, newUnit) {
+        var newTags = viewTags.map(function (tag) { return (tag.TagId === tagId ? __assign(__assign({}, tag), { Unit: newUnit }) : tag); });
+        setViewTags(newTags);
+    };
     var handleAutoScaleChange = function (tagId, checked) {
         var newTags = viewTags.map(function (t) { return t.TagId == tagId ? __assign(__assign({}, t), { IsAutoScale: !checked }) : t; });
         setViewTags(newTags);
@@ -10669,7 +10682,6 @@ var TableComponent = function (_a) {
     ];
     var handleTagSelect = function (selectedTag) {
         handleAddTag(selectedTag);
-        handleClose();
     };
     var handleDelete = function (index) { return __awaiter(void 0, void 0, void 0, function () {
         var tagToDelete, resp;
@@ -10887,17 +10899,24 @@ var TableComponent = function (_a) {
                                             }
                                         } })),
                                 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("input", { type: "text", style: __assign({ width: '100%' }, (tag.IsAutoScale ? {
+                                            backgroundColor: 'rgba(239, 239, 239, 0.3)',
+                                            color: 'rgba(84, 84, 84, 1)',
+                                            border: '1px solid rgba(118, 118, 118, 0.3)'
+                                        } : {})), onClick: function () { return handleAbleScales(tag.TagId, tag.IsAutoScale); }, onChange: function (e) {
+                                            var value = e.target.value;
+                                            handleUnitChange(tag.TagId, value);
+                                        }, 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, round((_a = dataTable[tag.TagName]) === null || _a === void 0 ? void 0 : _a.y1, 3)),
+                                React__default.createElement("td", { className: classes.doubleInput }, round((_b = dataTable[tag.TagName]) === null || _b === void 0 ? void 0 : _b.y2, 3)),
+                                React__default.createElement("td", null, round((_c = dataTable[tag.TagName]) === null || _c === void 0 ? void 0 : _c.y2y1, 3)),
                                 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,
+                                    !isNaN(((_d = dataTable[tag.TagName]) === null || _d === void 0 ? void 0 : _d.pmin.y) * 0) ? round((_e = dataTable[tag.TagName]) === null || _e === void 0 ? void 0 : _e.pmin.y, 3) : 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,
+                                    !isNaN(((_f = dataTable[tag.TagName]) === null || _f === void 0 ? void 0 : _f.pmax.y) * 0) ? round((_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. "),
@@ -11064,8 +11083,12 @@ var CustomOptionsComponent = function (_a) {
 };
 
 var dateNavigator = function (startDate, endDate, scope, operator) {
-    if (scope === "custom")
-        return;
+    if (scope === "custom") {
+        var durationInMs = moment(endDate).diff(moment(startDate));
+        var newStartDate = moment(startDate)[operator](durationInMs).toDate();
+        var newEndDate = moment(endDate)[operator](durationInMs).toDate();
+        return { newStartDate: newStartDate, newEndDate: newEndDate };
+    }
     else {
         var _a = scope.split(" "), quantity = _a[0], duration = _a[1];
         var newStartDate = moment(startDate)[operator](quantity, duration[0]).toDate();
@@ -11101,13 +11124,20 @@ var Header = function (_a) {
     };
     useEffect(function () {
         var changeOptions = function () {
-            // console.log("change options");
-            setChartOptions(function (prevOptions) { return (__assign(__assign({}, prevOptions), { elements: {
-                    line: {
-                        stepped: customOptions.stepped,
-                        lineTension: 0.1
+            setChartOptions(function (prevOptions) {
+                var newScales = __assign({}, prevOptions.scales);
+                Object.keys(newScales).forEach(function (key) {
+                    if (key) {
+                        newScales[key] = __assign(__assign({}, newScales[key]), { grid: __assign(__assign({}, newScales[key].grid), { display: customOptions.showGrid }) });
                     }
-                }, 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 }) }) }) })); });
+                });
+                return __assign(__assign({}, prevOptions), { elements: {
+                        line: {
+                            stepped: customOptions.stepped,
+                            lineTension: 0.1
+                        }
+                    }, scales: newScales });
+            });
         };
         changeOptions();
     }, [customOptions]);
@@ -11115,9 +11145,10 @@ var Header = function (_a) {
         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, { md: 6, item: true, container: true, justifyContent: "flex-start", alignItems: "center", wrap: "wrap" },
+            React__default.createElement(Grid$1, { item: true },
+                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,
@@ -11140,16 +11171,17 @@ var Header = function (_a) {
                         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 },
+                React__default.createElement(IconButton$1, { onClick: function () { return handleDateNavigator("add"); }, className: "".concat(classes.navigatorButton) },
+                    React__default.createElement(ChevronRight, { fontSize: "large" })))),
+        React__default.createElement(Grid$1, { md: 6, 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 initialLeft = _a.initialLeft, otherLineCoord = _a.otherLineCoord, 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);
@@ -11164,6 +11196,13 @@ var DraggableLineControl = function (_a) {
         chartArea.width - chartArea.right;
         chartArea.left;
         var newLeft = Math.min(Math.max(e.clientX - ref.current.offsetParent.getBoundingClientRect().left, chartArea.left), chartArea.right);
+        // Line limit
+        if (color === 'red' && newLeft > (otherLineCoord - 20)) {
+            newLeft = otherLineCoord - 20;
+        }
+        else if (color === 'blue' && newLeft < (otherLineCoord + 20)) {
+            newLeft = otherLineCoord + 20;
+        }
         setLeft(newLeft);
         onUpdate(newLeft); // Actualiza la posición de la línea en el gráfico
     };
@@ -11416,7 +11455,7 @@ var TrendingChart = function (_a) {
         }
     }, [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) {
+        lineTabCoords && chartArea ? (React__default.createElement(DraggableLineControl, { color: 'red', chartArea: chartArea, initialLeft: lineTabCoords === null || lineTabCoords === void 0 ? void 0 : lineTabCoords.x1, otherLineCoord: lineTabCoords === null || lineTabCoords === void 0 ? void 0 : lineTabCoords.x2, onUpdate: function (newLeft) {
                 setLineTabCoords(function (prevCoords) {
                     prevCoords.x1 = newLeft;
                     return prevCoords;
@@ -11425,7 +11464,7 @@ var TrendingChart = function (_a) {
                 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) {
+        lineTabCoords && chartArea ? (React__default.createElement(DraggableLineControl, { color: 'blue', initialLeft: lineTabCoords === null || lineTabCoords === void 0 ? void 0 : lineTabCoords.x2, otherLineCoord: lineTabCoords === null || lineTabCoords === void 0 ? void 0 : lineTabCoords.x1, chartArea: chartArea, onUpdate: function (newLeft) {
                 setLineTabCoords(function (prevCoords) {
                     prevCoords.x2 = newLeft;
                     return prevCoords;