@dexteel/mesf-core 4.5.7 → 4.5.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +5 -0
- package/dist/index.esm.js +405 -290
- package/dist/pages/trendings/components/chart/TableComponent.d.ts +2 -2
- package/dist/pages/trendings/components/chart/Trending.d.ts +1 -29
- package/dist/pages/trendings/components/chart/components/CellComponent.d.ts +11 -0
- package/dist/pages/trendings/components/chart/components/modals/addTagModal/AddTagModal.d.ts +1 -1
- package/dist/pages/trendings/components/chart/components/modals/addTagModal/TagSelectionModal.d.ts +1 -1
- package/dist/pages/trendings/components/chart/customOptionsComponent.d.ts +1 -1
- package/dist/pages/trendings/components/chart/hooks/useGetVerticalLinePlugin.d.ts +2 -0
- package/dist/pages/trendings/components/chart/hooks/useTagsDataTable.d.ts +24 -0
- package/dist/pages/trendings/components/chart/hooks/useUpdateCursorData.d.ts +2 -0
- package/dist/pages/trendings/components/chart/hooks/useXAxisDatePlugin.d.ts +2 -0
- package/dist/pages/trendings/components/chart/models/TrendingModels.d.ts +33 -0
- package/dist/pages/trendings/components/chart/repository/TrendingRepository.d.ts +2 -0
- package/dist/pages/trendings/components/chart/utils/areRangeSimilar.d.ts +2 -0
- package/dist/pages/trendings/components/chart/utils/calculateScales.d.ts +4 -0
- package/dist/pages/trendings/components/chart/utils/formatDateTimeToString.d.ts +4 -0
- package/dist/pages/trendings/components/chart/utils/timeDifference.d.ts +1 -0
- package/package.json +2 -1
package/CHANGELOG.md
CHANGED
package/dist/index.esm.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
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';
|
|
2
|
-
import { values, get, isNil as isNil$1, isEmpty, debounce } from 'lodash-es';
|
|
2
|
+
import { values, get, isNil as isNil$1, isEmpty, isNaN, debounce } from 'lodash-es';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import React__default, { useState, useRef, useEffect, Component, createContext, useContext, useMemo, useCallback, lazy, Suspense } from 'react';
|
|
5
5
|
import { Alert as Alert$1, Modal as Modal$1, Navbar, Container, Nav, NavDropdown } from 'react-bootstrap';
|
|
@@ -27,10 +27,10 @@ import moment from 'moment';
|
|
|
27
27
|
import zoomPlugin from 'chartjs-plugin-zoom';
|
|
28
28
|
import { Line } from 'react-chartjs-2';
|
|
29
29
|
import Popover from '@material-ui/core/Popover';
|
|
30
|
-
import { Alert as Alert$3, TreeView as TreeView$1, TreeItem as TreeItem$1 } from '@material-ui/lab';
|
|
31
30
|
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
|
|
32
31
|
import FolderIcon from '@material-ui/icons/Folder';
|
|
33
32
|
import InsertDriveFileIcon from '@material-ui/icons/InsertDriveFile';
|
|
33
|
+
import { Alert as Alert$3, TreeView as TreeView$1, TreeItem as TreeItem$1 } from '@material-ui/lab';
|
|
34
34
|
import PersonPinCircleIcon from '@material-ui/icons/PersonPinCircle';
|
|
35
35
|
import PropTypes from 'prop-types';
|
|
36
36
|
import { ResponsiveBar } from '@nivo/bar';
|
|
@@ -6966,7 +6966,7 @@ var MESApiService = /** @class */ (function () {
|
|
|
6966
6966
|
return [2 /*return*/, { ok: true, data: resp }];
|
|
6967
6967
|
case 4:
|
|
6968
6968
|
err_1 = _a.sent();
|
|
6969
|
-
console.log("fromCatch",
|
|
6969
|
+
// console.log("fromCatch", err);
|
|
6970
6970
|
this.hasErrors = true;
|
|
6971
6971
|
this.error = err_1;
|
|
6972
6972
|
return [2 /*return*/, { ok: false, message: err_1.toString() }];
|
|
@@ -8419,66 +8419,6 @@ var ColorPicker = function (_a) {
|
|
|
8419
8419
|
} })); })))));
|
|
8420
8420
|
};
|
|
8421
8421
|
|
|
8422
|
-
var useTagsTableStyles = makeStyles$1(function (theme) { return ({
|
|
8423
|
-
checkbox: {
|
|
8424
|
-
'& input[type="checkbox"]': {
|
|
8425
|
-
zoom: 1.5
|
|
8426
|
-
},
|
|
8427
|
-
textAlign: 'center'
|
|
8428
|
-
},
|
|
8429
|
-
rowHover: {
|
|
8430
|
-
'&:hover': {
|
|
8431
|
-
backgroundColor: "#f2f2f2"
|
|
8432
|
-
}
|
|
8433
|
-
},
|
|
8434
|
-
topTitles: {
|
|
8435
|
-
border: "0.0625rem black solid",
|
|
8436
|
-
borderBottom: "none",
|
|
8437
|
-
backgroundColor: "#e9ecef"
|
|
8438
|
-
},
|
|
8439
|
-
bottomTitlesRow: {
|
|
8440
|
-
'& th': {
|
|
8441
|
-
border: "1px black solid"
|
|
8442
|
-
},
|
|
8443
|
-
backgroundColor: "#e9ecef"
|
|
8444
|
-
},
|
|
8445
|
-
doubleInput: {
|
|
8446
|
-
padding: "0",
|
|
8447
|
-
'& input[type="text"] ': {
|
|
8448
|
-
width: "100%",
|
|
8449
|
-
height: "17px",
|
|
8450
|
-
display: "block",
|
|
8451
|
-
margin: "0",
|
|
8452
|
-
padding: "0"
|
|
8453
|
-
}
|
|
8454
|
-
},
|
|
8455
|
-
inputCol: {
|
|
8456
|
-
width: "11.25rem",
|
|
8457
|
-
overflow: 'hidden',
|
|
8458
|
-
textOverflow: 'ellipsis',
|
|
8459
|
-
whiteSpace: 'nowrap'
|
|
8460
|
-
},
|
|
8461
|
-
autoScale: {
|
|
8462
|
-
width: '7.5rem'
|
|
8463
|
-
},
|
|
8464
|
-
scale: {
|
|
8465
|
-
width: '37.5rem',
|
|
8466
|
-
padding: "0"
|
|
8467
|
-
},
|
|
8468
|
-
visible: {
|
|
8469
|
-
width: '3.75rem'
|
|
8470
|
-
},
|
|
8471
|
-
color: {
|
|
8472
|
-
width: '4.375rem'
|
|
8473
|
-
},
|
|
8474
|
-
unit: {
|
|
8475
|
-
width: '7.5rem'
|
|
8476
|
-
},
|
|
8477
|
-
xStats: {
|
|
8478
|
-
// ...
|
|
8479
|
-
}
|
|
8480
|
-
}); });
|
|
8481
|
-
|
|
8482
8422
|
var TagSelectionModal = function (_a) {
|
|
8483
8423
|
var isOpen = _a.isOpen; _a.onClose; var onTagSelect = _a.onTagSelect;
|
|
8484
8424
|
var _b = useState(true), isLoading = _b[0], setIsLoading = _b[1];
|
|
@@ -8584,7 +8524,7 @@ var TagSelectionModal = function (_a) {
|
|
|
8584
8524
|
/* I have to get the grandchildren because the toggle action would not be triggered if no children */
|
|
8585
8525
|
var handleNodeToggle = function (event, nodeIds) { return __awaiter(void 0, void 0, void 0, function () {
|
|
8586
8526
|
return __generator(this, function (_a) {
|
|
8587
|
-
console.log("Toggle:", nodeIds);
|
|
8527
|
+
// console.log("Toggle:", nodeIds);
|
|
8588
8528
|
setExpanded(nodeIds);
|
|
8589
8529
|
return [2 /*return*/];
|
|
8590
8530
|
});
|
|
@@ -8592,8 +8532,6 @@ var TagSelectionModal = function (_a) {
|
|
|
8592
8532
|
var handleNodeSelect = function (event, nodeId) { return __awaiter(void 0, void 0, void 0, function () {
|
|
8593
8533
|
var node;
|
|
8594
8534
|
return __generator(this, function (_a) {
|
|
8595
|
-
// console.log('Selected Node ID:', nodeId);
|
|
8596
|
-
console.log("treeData", treeData);
|
|
8597
8535
|
node = findNode(treeData, nodeId);
|
|
8598
8536
|
if (node === null || node === void 0 ? void 0 : node.tagId) {
|
|
8599
8537
|
onTagSelect(node.tag);
|
|
@@ -8634,10 +8572,142 @@ var AddTagModal = function (_a) {
|
|
|
8634
8572
|
React__default.createElement(TagSelectionModal, { isOpen: open, onClose: function () { return handleClose; }, onTagSelect: onTagSelect }))))));
|
|
8635
8573
|
};
|
|
8636
8574
|
|
|
8575
|
+
var useTagsDataTable = function (_a) {
|
|
8576
|
+
var cursorData = _a.cursorData, tagList = _a.tagList, chartData = _a.chartData;
|
|
8577
|
+
return useMemo(function () {
|
|
8578
|
+
// calculo y1,y2,y2y1,ymin,ymax por cada tag
|
|
8579
|
+
var _a;
|
|
8580
|
+
var dataTable = {};
|
|
8581
|
+
if (cursorData) {
|
|
8582
|
+
var _loop_1 = function (idx) {
|
|
8583
|
+
var tag = tagList[idx];
|
|
8584
|
+
var datasetForTag = ((_a = chartData.datasets.find(function (ds) { return ds.tagId === tag.tagId; })) === null || _a === void 0 ? void 0 : _a.data) || [];
|
|
8585
|
+
var p1 = { x: new Date('1900-01-01'), y: 0 };
|
|
8586
|
+
var p2 = { x: new Date('1900-01-01'), y: 0 };
|
|
8587
|
+
var p1Found = false;
|
|
8588
|
+
var pmin = { x: 0, y: Number.POSITIVE_INFINITY };
|
|
8589
|
+
var pmax = { x: 0, y: Number.NEGATIVE_INFINITY };
|
|
8590
|
+
for (var idx_1 = 0; idx_1 < datasetForTag.length; idx_1++) {
|
|
8591
|
+
var curr = datasetForTag[idx_1];
|
|
8592
|
+
var currentVal = curr.x;
|
|
8593
|
+
if (!p1Found) {
|
|
8594
|
+
if (currentVal < cursorData.x1) {
|
|
8595
|
+
p1 = curr;
|
|
8596
|
+
p2 = JSON.parse(JSON.stringify(p1));
|
|
8597
|
+
pmin = JSON.parse(JSON.stringify(p1));
|
|
8598
|
+
pmax = JSON.parse(JSON.stringify(p1));
|
|
8599
|
+
continue;
|
|
8600
|
+
}
|
|
8601
|
+
else {
|
|
8602
|
+
p1Found = true;
|
|
8603
|
+
}
|
|
8604
|
+
}
|
|
8605
|
+
else {
|
|
8606
|
+
if (currentVal < cursorData.x2) {
|
|
8607
|
+
p2 = curr;
|
|
8608
|
+
if (pmin['y'] > curr['y']) {
|
|
8609
|
+
pmin = JSON.parse(JSON.stringify(curr));
|
|
8610
|
+
}
|
|
8611
|
+
if (pmax['y'] < curr['y']) {
|
|
8612
|
+
pmax = JSON.parse(JSON.stringify(curr));
|
|
8613
|
+
}
|
|
8614
|
+
}
|
|
8615
|
+
else {
|
|
8616
|
+
break;
|
|
8617
|
+
}
|
|
8618
|
+
}
|
|
8619
|
+
}
|
|
8620
|
+
dataTable[tag.tagName] = {
|
|
8621
|
+
y1: p1.y,
|
|
8622
|
+
y2: p2.y,
|
|
8623
|
+
y2y1: Number(p2.y) - Number(p1.y),
|
|
8624
|
+
pmin: pmin,
|
|
8625
|
+
pmax: pmax
|
|
8626
|
+
};
|
|
8627
|
+
};
|
|
8628
|
+
for (var idx = 0; idx < tagList.length; idx++) {
|
|
8629
|
+
_loop_1(idx);
|
|
8630
|
+
}
|
|
8631
|
+
}
|
|
8632
|
+
return dataTable;
|
|
8633
|
+
}, [tagList, chartData, cursorData]);
|
|
8634
|
+
};
|
|
8635
|
+
|
|
8636
|
+
var useTagsTableStyles = makeStyles$1(function (theme) { return ({
|
|
8637
|
+
checkbox: {
|
|
8638
|
+
'& input[type="checkbox"]': {
|
|
8639
|
+
zoom: 1.5
|
|
8640
|
+
},
|
|
8641
|
+
textAlign: 'center'
|
|
8642
|
+
},
|
|
8643
|
+
rowHover: {
|
|
8644
|
+
'&:hover': {
|
|
8645
|
+
backgroundColor: "#f2f2f2"
|
|
8646
|
+
}
|
|
8647
|
+
},
|
|
8648
|
+
topTitles: {
|
|
8649
|
+
border: "0.0625rem black solid",
|
|
8650
|
+
borderBottom: "none",
|
|
8651
|
+
backgroundColor: "#e9ecef"
|
|
8652
|
+
},
|
|
8653
|
+
bottomTitlesRow: {
|
|
8654
|
+
'& th': {
|
|
8655
|
+
border: "1px black solid"
|
|
8656
|
+
},
|
|
8657
|
+
backgroundColor: "#e9ecef"
|
|
8658
|
+
},
|
|
8659
|
+
doubleInput: {
|
|
8660
|
+
padding: "0",
|
|
8661
|
+
'& input[type="text"] ': {
|
|
8662
|
+
width: "100%",
|
|
8663
|
+
height: "17px",
|
|
8664
|
+
display: "block",
|
|
8665
|
+
margin: "0",
|
|
8666
|
+
padding: "0"
|
|
8667
|
+
}
|
|
8668
|
+
},
|
|
8669
|
+
inputCol: {
|
|
8670
|
+
width: "11.25rem",
|
|
8671
|
+
overflow: 'hidden',
|
|
8672
|
+
textOverflow: 'ellipsis',
|
|
8673
|
+
whiteSpace: 'nowrap'
|
|
8674
|
+
},
|
|
8675
|
+
autoScale: {
|
|
8676
|
+
width: '7.5rem'
|
|
8677
|
+
},
|
|
8678
|
+
scale: {
|
|
8679
|
+
width: '37.5rem',
|
|
8680
|
+
padding: "0"
|
|
8681
|
+
},
|
|
8682
|
+
visible: {
|
|
8683
|
+
width: '3.75rem'
|
|
8684
|
+
},
|
|
8685
|
+
color: {
|
|
8686
|
+
width: '4.375rem'
|
|
8687
|
+
},
|
|
8688
|
+
unit: {
|
|
8689
|
+
width: '7.5rem'
|
|
8690
|
+
},
|
|
8691
|
+
xStats: {
|
|
8692
|
+
// ...
|
|
8693
|
+
}
|
|
8694
|
+
}); });
|
|
8695
|
+
|
|
8696
|
+
var timeDifference = function (start, end) {
|
|
8697
|
+
var differenceMilliseconds = start - end;
|
|
8698
|
+
var seconds = Math.floor(differenceMilliseconds / 1000);
|
|
8699
|
+
var minutes = Math.floor(seconds / 60);
|
|
8700
|
+
var hours = Math.floor(minutes / 60);
|
|
8701
|
+
var remainingMinutes = minutes % 60;
|
|
8702
|
+
var remainingSeconds = seconds % 60;
|
|
8703
|
+
return "".concat(hours, "h ").concat(remainingMinutes, "m ").concat(remainingSeconds, "s");
|
|
8704
|
+
};
|
|
8705
|
+
|
|
8637
8706
|
var TableComponent = function (_a) {
|
|
8638
|
-
var tagList = _a.tagList, setTagList = _a.setTagList
|
|
8707
|
+
var tagList = _a.tagList, setTagList = _a.setTagList, chartData = _a.chartData, cursorData = _a.cursorData, onDeleteTag = _a.onDeleteTag, onAddTag = _a.onAddTag;
|
|
8639
8708
|
var classes = useTagsTableStyles();
|
|
8640
8709
|
var _b = useState(""); _b[0]; _b[1];
|
|
8710
|
+
var dataTable = useTagsDataTable({ tagList: tagList, chartData: chartData, cursorData: cursorData });
|
|
8641
8711
|
var _c = useState({}), editableTagNames = _c[0], setEditableTagNames = _c[1];
|
|
8642
8712
|
var handleChange = function (index, value, property) {
|
|
8643
8713
|
setTagList(function (prev) { return prev.map(function (tag, currentIndex) {
|
|
@@ -8780,7 +8850,17 @@ var TableComponent = function (_a) {
|
|
|
8780
8850
|
second: '2-digit'
|
|
8781
8851
|
});
|
|
8782
8852
|
var milliseconds = date.getMilliseconds().toString().padStart(3, '0');
|
|
8783
|
-
|
|
8853
|
+
var dateText = "".concat(formattedDate, ".").concat(milliseconds);
|
|
8854
|
+
return (React__default.createElement(React__default.Fragment, null,
|
|
8855
|
+
React__default.createElement("span", { style: {
|
|
8856
|
+
height: '10px',
|
|
8857
|
+
width: '10px',
|
|
8858
|
+
backgroundColor: "red",
|
|
8859
|
+
borderRadius: '50%',
|
|
8860
|
+
display: 'inline-block',
|
|
8861
|
+
marginRight: '5px'
|
|
8862
|
+
} }),
|
|
8863
|
+
dateText));
|
|
8784
8864
|
})() : null),
|
|
8785
8865
|
React__default.createElement("th", { className: "".concat(classes.topTitles, " ").concat(classes.xStats) }, cursorData ? (function () {
|
|
8786
8866
|
var date = new Date(cursorData.x2);
|
|
@@ -8794,9 +8874,19 @@ var TableComponent = function (_a) {
|
|
|
8794
8874
|
second: '2-digit'
|
|
8795
8875
|
});
|
|
8796
8876
|
var milliseconds = date.getMilliseconds().toString().padStart(3, '0');
|
|
8797
|
-
|
|
8877
|
+
var dateText = "".concat(formattedDate, ".").concat(milliseconds);
|
|
8878
|
+
return (React__default.createElement(React__default.Fragment, null,
|
|
8879
|
+
React__default.createElement("span", { style: {
|
|
8880
|
+
height: '10px',
|
|
8881
|
+
width: '10px',
|
|
8882
|
+
backgroundColor: "blue",
|
|
8883
|
+
borderRadius: '50%',
|
|
8884
|
+
display: 'inline-block',
|
|
8885
|
+
marginRight: '5px'
|
|
8886
|
+
} }),
|
|
8887
|
+
dateText));
|
|
8798
8888
|
})() : null),
|
|
8799
|
-
React__default.createElement("th", { colSpan: 3, className: "".concat(classes.topTitles, " ").concat(classes.xStats) },
|
|
8889
|
+
React__default.createElement("th", { colSpan: 3, className: "".concat(classes.topTitles, " ").concat(classes.xStats) }, cursorData ? timeDifference(cursorData.x2, cursorData.x1) : null)))),
|
|
8800
8890
|
React__default.createElement("table", { style: { width: '100%', tableLayout: 'fixed', textAlign: "center" } },
|
|
8801
8891
|
React__default.createElement("thead", null,
|
|
8802
8892
|
React__default.createElement("tr", { className: classes.bottomTitlesRow },
|
|
@@ -8807,59 +8897,104 @@ var TableComponent = function (_a) {
|
|
|
8807
8897
|
React__default.createElement("th", { className: classes.inputCol }, "Max Scale"),
|
|
8808
8898
|
React__default.createElement("th", { className: classes.unit }, "Unit"),
|
|
8809
8899
|
React__default.createElement("th", { className: classes.autoScale }, "AutoScale"),
|
|
8810
|
-
React__default.createElement("th", null, "
|
|
8811
|
-
React__default.createElement("th", null
|
|
8900
|
+
React__default.createElement("th", null, " "),
|
|
8901
|
+
React__default.createElement("th", null),
|
|
8812
8902
|
React__default.createElement("th", null, "Y2-Y1"),
|
|
8813
8903
|
React__default.createElement("th", null, "Min"),
|
|
8814
|
-
React__default.createElement("th", null, "
|
|
8904
|
+
React__default.createElement("th", null, "Max")))))),
|
|
8815
8905
|
React__default.createElement(Grid$1, { item: true, xs: 12 },
|
|
8816
8906
|
React__default.createElement("div", { style: { width: '100%', overflowY: 'auto', maxHeight: ' 20svh' } },
|
|
8817
8907
|
React__default.createElement("table", { cellPadding: '4px', style: { width: '100%', tableLayout: 'fixed', textAlign: "center" } },
|
|
8818
|
-
React__default.createElement("tbody", null, tagList.map(function (tag, index) {
|
|
8819
|
-
|
|
8820
|
-
|
|
8821
|
-
|
|
8822
|
-
|
|
8823
|
-
|
|
8824
|
-
|
|
8825
|
-
|
|
8826
|
-
|
|
8827
|
-
|
|
8828
|
-
|
|
8829
|
-
|
|
8830
|
-
|
|
8831
|
-
|
|
8832
|
-
|
|
8833
|
-
|
|
8834
|
-
|
|
8835
|
-
|
|
8836
|
-
|
|
8837
|
-
|
|
8838
|
-
|
|
8839
|
-
|
|
8840
|
-
|
|
8841
|
-
|
|
8842
|
-
|
|
8843
|
-
|
|
8844
|
-
|
|
8845
|
-
|
|
8846
|
-
|
|
8847
|
-
|
|
8848
|
-
|
|
8849
|
-
|
|
8850
|
-
|
|
8851
|
-
|
|
8852
|
-
|
|
8853
|
-
|
|
8854
|
-
|
|
8855
|
-
|
|
8856
|
-
|
|
8857
|
-
|
|
8858
|
-
|
|
8908
|
+
React__default.createElement("tbody", null, tagList.map(function (tag, index) {
|
|
8909
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
8910
|
+
return (React__default.createElement("tr", { key: tag.tagName, onClick: function () { return handleRowClick(index); }, onContextMenu: function (e) { return handleRightClick(e, index); }, className: classes.rowHover },
|
|
8911
|
+
React__default.createElement("td", { className: "".concat(classes.visible, " ").concat(classes.checkbox) },
|
|
8912
|
+
React__default.createElement("input", { type: "checkbox", checked: tag.visible, onChange: function (e) { return handleVisibilityChange(index, e.target.checked); } })),
|
|
8913
|
+
React__default.createElement("td", { className: classes.inputCol },
|
|
8914
|
+
React__default.createElement(Tooltip, { title: tag.tagName, placement: "top", arrow: true, interactive: true, enterDelay: 500 },
|
|
8915
|
+
React__default.createElement("div", null,
|
|
8916
|
+
React__default.createElement("input", { type: "text", style: { width: '100%' }, value: editableTagNames[tag.tagId] || '', onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
|
|
8917
|
+
var _a;
|
|
8918
|
+
setEditableTagNames(__assign(__assign({}, editableTagNames), (_a = {}, _a[tag.tagId] = e.target.value, _a)));
|
|
8919
|
+
}, onKeyDown: function (e) {
|
|
8920
|
+
if (e.key === 'Enter') {
|
|
8921
|
+
handleChangeAlias(tag.tagId, editableTagNames[tag.tagId]);
|
|
8922
|
+
}
|
|
8923
|
+
} })))),
|
|
8924
|
+
React__default.createElement("td", { className: classes.color },
|
|
8925
|
+
React__default.createElement(ColorPicker, { onChange: handleColorChange, color: tag.color, elementId: tag.tagId })),
|
|
8926
|
+
React__default.createElement("td", { className: classes.inputCol },
|
|
8927
|
+
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) {
|
|
8928
|
+
var value = e.target.value;
|
|
8929
|
+
var numericValue = Number(value);
|
|
8930
|
+
// Check if the value is a number and not empty
|
|
8931
|
+
handleChange(index, numericValue, 'minScale');
|
|
8932
|
+
} })),
|
|
8933
|
+
React__default.createElement("td", { className: classes.inputCol },
|
|
8934
|
+
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) {
|
|
8935
|
+
var value = e.target.value;
|
|
8936
|
+
var numericValue = Number(value);
|
|
8937
|
+
// Check if the value is a number and not empty
|
|
8938
|
+
if (!isNaN(numericValue) && value.trim() !== '') {
|
|
8939
|
+
handleChange(index, numericValue, 'maxScale');
|
|
8940
|
+
}
|
|
8941
|
+
} })),
|
|
8942
|
+
React__default.createElement("td", { className: "".concat(classes.autoScale, " ").concat(classes.checkbox) },
|
|
8943
|
+
React__default.createElement("input", { type: "text", style: { width: '100%' }, disabled: true, value: /* tag.unit */ "Unit ", onFocus: function (e) { return e.target.select(); } })),
|
|
8944
|
+
React__default.createElement("td", { className: "".concat(classes.autoScale, " ").concat(classes.checkbox) },
|
|
8945
|
+
React__default.createElement("input", { type: "checkbox", checked: tag.autoScale, onChange: function (e) { return handleAutoScaleChange(index, e.target.checked); } })),
|
|
8946
|
+
React__default.createElement("td", null, (_a = dataTable[tag.tagName]) === null || _a === void 0 ? void 0 : _a.y1),
|
|
8947
|
+
React__default.createElement("td", { className: classes.doubleInput }, (_b = dataTable[tag.tagName]) === null || _b === void 0 ? void 0 : _b.y2),
|
|
8948
|
+
React__default.createElement("td", null, (_c = dataTable[tag.tagName]) === null || _c === void 0 ? void 0 : _c.y2y1),
|
|
8949
|
+
React__default.createElement("td", null,
|
|
8950
|
+
!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,
|
|
8951
|
+
" "),
|
|
8952
|
+
React__default.createElement("td", null,
|
|
8953
|
+
!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,
|
|
8954
|
+
" ")));
|
|
8955
|
+
}))))),
|
|
8859
8956
|
selectedRowIndex !== null && (React__default.createElement(ContextMenu, { x: contextMenuPosition.x, y: contextMenuPosition.y, options: contextMenuOptions })),
|
|
8860
8957
|
React__default.createElement(AddTagModal, { open: addTagModalOpen, handleClose: handleClose, onTagSelect: handleTagSelect })));
|
|
8861
8958
|
};
|
|
8862
8959
|
|
|
8960
|
+
var DraggableLineControl = function (_a) {
|
|
8961
|
+
var initialLeft = _a.initialLeft, onUpdate = _a.onUpdate, color = _a.color, chartArea = _a.chartArea;
|
|
8962
|
+
var _b = useState(false), isDragging = _b[0], setIsDragging = _b[1];
|
|
8963
|
+
var _c = useState(initialLeft), left = _c[0], setLeft = _c[1];
|
|
8964
|
+
var ref = useRef(null);
|
|
8965
|
+
var handleMouseDown = function (e) {
|
|
8966
|
+
setIsDragging(true);
|
|
8967
|
+
e.stopPropagation();
|
|
8968
|
+
e.preventDefault();
|
|
8969
|
+
};
|
|
8970
|
+
var handleMouseMove = function (e) {
|
|
8971
|
+
if (!isDragging || !ref.current)
|
|
8972
|
+
return;
|
|
8973
|
+
chartArea.width - chartArea.right;
|
|
8974
|
+
chartArea.left;
|
|
8975
|
+
var newLeft = Math.min(Math.max(e.clientX - ref.current.offsetParent.getBoundingClientRect().left, chartArea.left), chartArea.right);
|
|
8976
|
+
setLeft(newLeft);
|
|
8977
|
+
onUpdate(newLeft); // Actualiza la posición de la línea en el gráfico
|
|
8978
|
+
};
|
|
8979
|
+
var handleMouseUp = function () {
|
|
8980
|
+
setIsDragging(false);
|
|
8981
|
+
};
|
|
8982
|
+
useEffect(function () {
|
|
8983
|
+
var mouseMoveHandler = function (e) { return handleMouseMove(e); };
|
|
8984
|
+
var mouseUpHandler = function () { return handleMouseUp(); };
|
|
8985
|
+
if (isDragging) {
|
|
8986
|
+
window.addEventListener('mousemove', mouseMoveHandler);
|
|
8987
|
+
window.addEventListener('mouseup', mouseUpHandler);
|
|
8988
|
+
}
|
|
8989
|
+
return function () {
|
|
8990
|
+
window.removeEventListener('mousemove', mouseMoveHandler);
|
|
8991
|
+
window.removeEventListener('mouseup', mouseUpHandler);
|
|
8992
|
+
};
|
|
8993
|
+
}, [isDragging]);
|
|
8994
|
+
return (React__default.createElement("div", { ref: ref, style: { height: 20, width: 20, background: color, position: 'absolute', top: -10, left: left - 10 }, onMouseDown: handleMouseDown },
|
|
8995
|
+
React__default.createElement("div", { style: { height: chartArea.height, width: 2, background: color, position: 'relative', top: 20, left: 0, right: 0, margin: 'auto' } })));
|
|
8996
|
+
};
|
|
8997
|
+
|
|
8863
8998
|
var TrendingsInitialState = {
|
|
8864
8999
|
timeScopeStart: moment(new Date()).subtract(1, "days").toDate(),
|
|
8865
9000
|
timeScopeEnd: new Date(),
|
|
@@ -9102,57 +9237,37 @@ var CustomOptionsComponent = function (_a) {
|
|
|
9102
9237
|
"Stepped"))));
|
|
9103
9238
|
};
|
|
9104
9239
|
|
|
9105
|
-
var
|
|
9106
|
-
var
|
|
9107
|
-
|
|
9108
|
-
|
|
9109
|
-
|
|
9110
|
-
|
|
9111
|
-
|
|
9112
|
-
|
|
9113
|
-
|
|
9114
|
-
|
|
9115
|
-
|
|
9116
|
-
|
|
9117
|
-
|
|
9118
|
-
|
|
9119
|
-
|
|
9120
|
-
|
|
9121
|
-
|
|
9122
|
-
|
|
9123
|
-
|
|
9124
|
-
|
|
9125
|
-
|
|
9126
|
-
|
|
9127
|
-
|
|
9128
|
-
|
|
9129
|
-
|
|
9130
|
-
if (isDragging) {
|
|
9131
|
-
window.addEventListener('mousemove', mouseMoveHandler);
|
|
9132
|
-
window.addEventListener('mouseup', mouseUpHandler);
|
|
9240
|
+
var useGetVerticalLinePlugin = function (setChartArea, setCoords) {
|
|
9241
|
+
var chartPlugin = {
|
|
9242
|
+
id: "verticalLinePlugin",
|
|
9243
|
+
afterUpdate: function (chart) {
|
|
9244
|
+
if (chart.chartArea) {
|
|
9245
|
+
// console.log("after update");
|
|
9246
|
+
if (chart.mouseX === null) {
|
|
9247
|
+
chart.mouseX = chart.chartArea.left + (chart.chartArea.width / 10);
|
|
9248
|
+
// chart.mouseX = chart.chartArea.left + 30.9
|
|
9249
|
+
}
|
|
9250
|
+
if (chart.secondLineX === null) {
|
|
9251
|
+
chart.secondLineX = chart.chartArea.left + (chart.chartArea.width * 0.90);
|
|
9252
|
+
// chart.secondLineX = chart.chartArea.right
|
|
9253
|
+
}
|
|
9254
|
+
}
|
|
9255
|
+
},
|
|
9256
|
+
beforeInit: function (chart) {
|
|
9257
|
+
chart.mouseX = null;
|
|
9258
|
+
chart.secondLineX = null;
|
|
9259
|
+
},
|
|
9260
|
+
afterDatasetsDraw: function (chart) {
|
|
9261
|
+
var x1 = chart.mouseX;
|
|
9262
|
+
var x2 = chart.secondLineX;
|
|
9263
|
+
setChartArea(chart.chartArea);
|
|
9264
|
+
setCoords({ x1: x1, x2: x2 });
|
|
9133
9265
|
}
|
|
9134
|
-
|
|
9135
|
-
|
|
9136
|
-
window.removeEventListener('mouseup', mouseUpHandler);
|
|
9137
|
-
};
|
|
9138
|
-
}, [isDragging]);
|
|
9139
|
-
return (React__default.createElement("div", { ref: ref, style: { height: 20, width: 20, background: color, position: 'absolute', top: -10, left: left - 10 }, onMouseDown: handleMouseDown },
|
|
9140
|
-
React__default.createElement("div", { style: { height: chartArea.height, width: 2, background: color, position: 'relative', top: 20, left: 0, right: 0, margin: 'auto' } })));
|
|
9141
|
-
};
|
|
9142
|
-
|
|
9143
|
-
var dateNavigator = function (startDate, endDate, scope, operator) {
|
|
9144
|
-
if (scope === "custom")
|
|
9145
|
-
return;
|
|
9146
|
-
else {
|
|
9147
|
-
var _a = scope.split(" "), quantity = _a[0], duration = _a[1];
|
|
9148
|
-
var newStartDate = moment(startDate)[operator](quantity, duration[0]).toDate();
|
|
9149
|
-
var newEndDate = moment(endDate)[operator](quantity, duration[0]).toDate();
|
|
9150
|
-
return { newStartDate: newStartDate, newEndDate: newEndDate };
|
|
9151
|
-
}
|
|
9266
|
+
};
|
|
9267
|
+
return chartPlugin;
|
|
9152
9268
|
};
|
|
9153
9269
|
|
|
9154
|
-
|
|
9155
|
-
function getValuesAtCursor(chart, timeAtCursor) {
|
|
9270
|
+
var getValuesAtCursor = function (chart, timeAtCursor) {
|
|
9156
9271
|
var valuesAtCursor = [];
|
|
9157
9272
|
chart.data.datasets.forEach(function (dataset) {
|
|
9158
9273
|
var previousDataPoint = null;
|
|
@@ -9169,15 +9284,13 @@ function getValuesAtCursor(chart, timeAtCursor) {
|
|
|
9169
9284
|
}
|
|
9170
9285
|
});
|
|
9171
9286
|
return valuesAtCursor;
|
|
9172
|
-
}
|
|
9173
|
-
function
|
|
9287
|
+
};
|
|
9288
|
+
var updateCursorData = function (chart, setCursorData) {
|
|
9174
9289
|
var xScale = chart.scales.x;
|
|
9175
|
-
|
|
9176
|
-
// Coordenadas para la primera línea
|
|
9290
|
+
// Coordenadas para la primera y segunda línea
|
|
9177
9291
|
var timeAtCursor1 = xScale.getValueForPixel(chart.mouseX);
|
|
9178
|
-
// Coordenadas para la segunda línea
|
|
9179
9292
|
var timeAtCursor2 = xScale.getValueForPixel(chart.secondLineX);
|
|
9180
|
-
// Los valores en el punto del cursor pueden ser diferentes
|
|
9293
|
+
// Los valores en el punto del cursor pueden ser diferentes
|
|
9181
9294
|
var valuesAtCursor1 = getValuesAtCursor(chart, timeAtCursor1);
|
|
9182
9295
|
var valuesAtCursor2 = getValuesAtCursor(chart, timeAtCursor2);
|
|
9183
9296
|
setCursorData({
|
|
@@ -9185,51 +9298,121 @@ function updateCursorData(chart, setCursorData) {
|
|
|
9185
9298
|
x2: timeAtCursor2,
|
|
9186
9299
|
values: __spreadArray(__spreadArray([], valuesAtCursor1, true), valuesAtCursor2, true)
|
|
9187
9300
|
});
|
|
9188
|
-
}
|
|
9189
|
-
|
|
9190
|
-
|
|
9191
|
-
|
|
9192
|
-
|
|
9193
|
-
|
|
9194
|
-
|
|
9195
|
-
|
|
9196
|
-
|
|
9197
|
-
|
|
9301
|
+
};
|
|
9302
|
+
|
|
9303
|
+
var formatDateTimeToString = function (date) {
|
|
9304
|
+
var hour = date.getHours().toString().padStart(2, '0');
|
|
9305
|
+
var minute = date.getMinutes().toString().padStart(2, '0');
|
|
9306
|
+
var second = date.getSeconds().toString().padStart(2, '0');
|
|
9307
|
+
if (hour === '24') {
|
|
9308
|
+
hour = '00';
|
|
9309
|
+
}
|
|
9310
|
+
var formattedDate = date.toLocaleDateString("en-US", {
|
|
9311
|
+
month: "short",
|
|
9312
|
+
day: "numeric"
|
|
9313
|
+
});
|
|
9314
|
+
var formattedTime = "".concat(hour, ":").concat(minute, ":").concat(second);
|
|
9315
|
+
return { formattedDate: formattedDate, formattedTime: formattedTime };
|
|
9316
|
+
};
|
|
9317
|
+
|
|
9318
|
+
var useXAxisDatePlugin = function () {
|
|
9319
|
+
var chartPlugin = {
|
|
9320
|
+
id: 'xAxisDatePlugin',
|
|
9321
|
+
afterBuildTicks: function (chart) {
|
|
9322
|
+
var oldTicks = chart.scales.x.ticks;
|
|
9323
|
+
var newTicks = [];
|
|
9324
|
+
newTicks.push(oldTicks[0]);
|
|
9325
|
+
for (var i = 1; i < oldTicks.length; i++) {
|
|
9326
|
+
var current = new Date(oldTicks[i].value);
|
|
9327
|
+
var previous = new Date(oldTicks[i - 1].value);
|
|
9328
|
+
var time = formatDateTimeToString(current).formattedTime;
|
|
9329
|
+
var date = formatDateTimeToString(current).formattedDate;
|
|
9330
|
+
var newLabel = void 0;
|
|
9331
|
+
if (current.getDate() !== previous.getDate()) {
|
|
9332
|
+
newLabel = [time, date];
|
|
9333
|
+
}
|
|
9334
|
+
else {
|
|
9335
|
+
newLabel = time;
|
|
9336
|
+
}
|
|
9337
|
+
newTicks.push({
|
|
9338
|
+
value: oldTicks[i].value,
|
|
9339
|
+
major: oldTicks[i].major,
|
|
9340
|
+
label: newLabel
|
|
9341
|
+
});
|
|
9198
9342
|
}
|
|
9199
|
-
|
|
9200
|
-
beforeInit: function (chart) {
|
|
9201
|
-
chart.mouseX = null;
|
|
9202
|
-
chart.secondLineX = null;
|
|
9203
|
-
},
|
|
9204
|
-
afterDatasetsDraw: function (chart) {
|
|
9205
|
-
var x1 = chart.mouseX;
|
|
9206
|
-
var x2 = chart.secondLineX;
|
|
9207
|
-
setChartArea(chart.chartArea);
|
|
9208
|
-
setCoords({ x1: x1, x2: x2 });
|
|
9343
|
+
chart.scales.x.ticks = newTicks;
|
|
9209
9344
|
}
|
|
9210
9345
|
};
|
|
9211
|
-
|
|
9346
|
+
return chartPlugin;
|
|
9347
|
+
};
|
|
9348
|
+
|
|
9349
|
+
var areRangesSimilar = function (tag1, tag2) {
|
|
9350
|
+
var range1 = tag1.maxScale - tag1.minScale; // Rango de la primera etiqueta
|
|
9351
|
+
var range2 = tag2.maxScale - tag2.minScale; // Rango de la segunda etiqueta
|
|
9352
|
+
// Determina los límites para la comparación
|
|
9353
|
+
var lowerBound = Math.max(tag1.minScale, tag2.minScale);
|
|
9354
|
+
var upperBound = Math.min(tag1.maxScale, tag2.maxScale);
|
|
9355
|
+
// Calcula el solapamiento entre los dos rangos
|
|
9356
|
+
var overlap = Math.max(0, upperBound - lowerBound);
|
|
9357
|
+
// Determina si el solapamiento es significativo comparado con los rangos individuales
|
|
9358
|
+
var isSignificantOverlap = (overlap / range1 > 0.5) && (overlap / range2 > 0.5);
|
|
9359
|
+
return isSignificantOverlap;
|
|
9360
|
+
};
|
|
9361
|
+
|
|
9362
|
+
var calculateScales = function (min, max, sigDigits) {
|
|
9363
|
+
var roundToSignificantDigits = function (num) {
|
|
9364
|
+
if (num === 0)
|
|
9365
|
+
return 0;
|
|
9366
|
+
var multiplier = Math.pow(10, sigDigits - Math.floor(Math.log10(Math.abs(num))) - 1);
|
|
9367
|
+
return Math.round(num * multiplier) / multiplier;
|
|
9368
|
+
};
|
|
9369
|
+
var minScale = roundToSignificantDigits(min);
|
|
9370
|
+
var maxScale = roundToSignificantDigits(max);
|
|
9371
|
+
// Adjust minScale and maxScale if necessary
|
|
9372
|
+
if (minScale > min) {
|
|
9373
|
+
minScale *= 0.9;
|
|
9374
|
+
}
|
|
9375
|
+
if (maxScale < max) {
|
|
9376
|
+
maxScale *= 1.1;
|
|
9377
|
+
}
|
|
9378
|
+
return { minScale: minScale, maxScale: maxScale };
|
|
9379
|
+
};
|
|
9380
|
+
|
|
9381
|
+
var dateNavigator = function (startDate, endDate, scope, operator) {
|
|
9382
|
+
if (scope === "custom")
|
|
9383
|
+
return;
|
|
9384
|
+
else {
|
|
9385
|
+
var _a = scope.split(" "), quantity = _a[0], duration = _a[1];
|
|
9386
|
+
var newStartDate = moment(startDate)[operator](quantity, duration[0]).toDate();
|
|
9387
|
+
var newEndDate = moment(endDate)[operator](quantity, duration[0]).toDate();
|
|
9388
|
+
return { newStartDate: newStartDate, newEndDate: newEndDate };
|
|
9389
|
+
}
|
|
9390
|
+
};
|
|
9391
|
+
|
|
9392
|
+
Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip$1, Legend, TimeScale, zoomPlugin);
|
|
9212
9393
|
var Trending = function (_a) {
|
|
9213
9394
|
_a.title; var tags = _a.tags;
|
|
9395
|
+
var classes = useTrendingStyles();
|
|
9214
9396
|
var _b = useTrendingContext(), state = _b.state, actions = _b.actions;
|
|
9397
|
+
var _c = useState(true), loading = _c[0], setLoading = _c[1];
|
|
9398
|
+
var _d = useState(""), error = _d[0], setError = _d[1];
|
|
9399
|
+
var _e = useState(tags), tagList = _e[0], setTagList = _e[1];
|
|
9400
|
+
var _f = useState(null), cursorData = _f[0], setCursorData = _f[1];
|
|
9401
|
+
var _g = useState(null), lineTabCoords = _g[0], setLineTabCoords = _g[1];
|
|
9402
|
+
var _h = useState(null), chartArea = _h[0], setChartArea = _h[1];
|
|
9403
|
+
var _j = useState(false), chartShouldInitCursors = _j[0], setChartShouldInitCursors = _j[1];
|
|
9215
9404
|
var chartRef = useRef(null);
|
|
9216
|
-
var
|
|
9405
|
+
var _k = useState({
|
|
9217
9406
|
labels: [],
|
|
9218
9407
|
datasets: []
|
|
9219
|
-
}), chartData =
|
|
9220
|
-
var
|
|
9221
|
-
var
|
|
9222
|
-
var
|
|
9223
|
-
var _g = useState(null), cursorData = _g[0], setCursorData = _g[1];
|
|
9224
|
-
var verticalLinePlugin = getVerticalLinePlugin(setChartArea, setLineTabCoords);
|
|
9225
|
-
var _h = useState({
|
|
9408
|
+
}), chartData = _k[0], setChartData = _k[1];
|
|
9409
|
+
var verticalLinePlugin = useGetVerticalLinePlugin(setChartArea, setLineTabCoords);
|
|
9410
|
+
var xAxisDatePlugin = useXAxisDatePlugin();
|
|
9411
|
+
var _l = useState({
|
|
9226
9412
|
showGrid: true,
|
|
9227
9413
|
stepped: false
|
|
9228
|
-
}), customOptions =
|
|
9229
|
-
var _j = useState(true), loading = _j[0], setLoading = _j[1];
|
|
9230
|
-
var _k = useState(""), error = _k[0], setError = _k[1];
|
|
9414
|
+
}), customOptions = _l[0], setCustomOptions = _l[1];
|
|
9231
9415
|
var debounceTimerRef = useRef(null);
|
|
9232
|
-
var classes = useTrendingStyles();
|
|
9233
9416
|
var debouncedUpdateChart = useRef(debounce(function () {
|
|
9234
9417
|
if (chartRef.current) {
|
|
9235
9418
|
updateCursorData(chartRef.current, setCursorData);
|
|
@@ -9300,7 +9483,7 @@ var Trending = function (_a) {
|
|
|
9300
9483
|
actions.setTotalScope({ start: newDates.newStartDate, end: newDates.newEndDate, scope: state.scope });
|
|
9301
9484
|
}
|
|
9302
9485
|
};
|
|
9303
|
-
var
|
|
9486
|
+
var _m = useState({
|
|
9304
9487
|
animation: {
|
|
9305
9488
|
duration: 0
|
|
9306
9489
|
},
|
|
@@ -9310,36 +9493,18 @@ var Trending = function (_a) {
|
|
|
9310
9493
|
x: {
|
|
9311
9494
|
type: "time",
|
|
9312
9495
|
ticks: {
|
|
9313
|
-
// Customize tick behavior if needed
|
|
9314
9496
|
autoSkip: true,
|
|
9315
9497
|
maxTicksLimit: 20,
|
|
9316
|
-
callback: function (value, index,
|
|
9317
|
-
// Extract the time and date from the current value
|
|
9498
|
+
callback: function (value, index, ticks) {
|
|
9318
9499
|
var currentDate = new Date(value);
|
|
9319
|
-
var time = currentDate.
|
|
9320
|
-
|
|
9321
|
-
|
|
9322
|
-
minute: "2-digit",
|
|
9323
|
-
second: "2-digit"
|
|
9324
|
-
});
|
|
9325
|
-
var date = currentDate.toLocaleDateString("en-US", {
|
|
9326
|
-
month: "short",
|
|
9327
|
-
day: "numeric"
|
|
9328
|
-
});
|
|
9329
|
-
// For the first tick, return both date and time
|
|
9500
|
+
var time = formatDateTimeToString(currentDate).formattedTime;
|
|
9501
|
+
var date = formatDateTimeToString(currentDate).formattedDate;
|
|
9502
|
+
// Si es el primer tick, siempre muestra la fecha y hora
|
|
9330
9503
|
if (index === 0) {
|
|
9331
9504
|
return [time, date];
|
|
9332
9505
|
}
|
|
9333
|
-
//
|
|
9334
|
-
|
|
9335
|
-
if (currentDate.getDate() !== previousDate.getDate() ||
|
|
9336
|
-
currentDate.getMonth() !== previousDate.getMonth() ||
|
|
9337
|
-
currentDate.getFullYear() !== previousDate.getFullYear()) {
|
|
9338
|
-
// If the date has changed, return both time and date
|
|
9339
|
-
return [time, date];
|
|
9340
|
-
}
|
|
9341
|
-
// If the date hasn't changed, return only the time
|
|
9342
|
-
return [time, ""];
|
|
9506
|
+
// De lo contrario, solo muestra la hora
|
|
9507
|
+
return time;
|
|
9343
9508
|
}
|
|
9344
9509
|
},
|
|
9345
9510
|
grid: {
|
|
@@ -9369,7 +9534,7 @@ var Trending = function (_a) {
|
|
|
9369
9534
|
}
|
|
9370
9535
|
}
|
|
9371
9536
|
}
|
|
9372
|
-
}), chartOptions =
|
|
9537
|
+
}), chartOptions = _m[0], setChartOptions = _m[1];
|
|
9373
9538
|
useEffect(function () {
|
|
9374
9539
|
var fetchData = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
9375
9540
|
var tagIds, response, series_1, axes_1, updatedSeries, error_1;
|
|
@@ -9434,11 +9599,13 @@ var Trending = function (_a) {
|
|
|
9434
9599
|
x: new Date(sample.timestamp),
|
|
9435
9600
|
y: sample.value
|
|
9436
9601
|
}); }),
|
|
9602
|
+
tagId: tag.tagId,
|
|
9437
9603
|
borderColor: tag.color,
|
|
9438
9604
|
hidden: !tag.visible,
|
|
9439
9605
|
pointRadius: serie.length <= 50 ? 3 : 0
|
|
9440
9606
|
};
|
|
9441
9607
|
});
|
|
9608
|
+
setChartShouldInitCursors(true);
|
|
9442
9609
|
setChartData({
|
|
9443
9610
|
labels: [],
|
|
9444
9611
|
datasets: updatedSeries
|
|
@@ -9459,7 +9626,7 @@ var Trending = function (_a) {
|
|
|
9459
9626
|
}, [JSON.stringify(state), tagList]);
|
|
9460
9627
|
useEffect(function () {
|
|
9461
9628
|
var changeOptions = function () {
|
|
9462
|
-
console.log("change options");
|
|
9629
|
+
// console.log("change options");
|
|
9463
9630
|
setChartOptions(function (prevOptions) { return (__assign(__assign({}, prevOptions), { elements: {
|
|
9464
9631
|
line: {
|
|
9465
9632
|
stepped: customOptions.stepped,
|
|
@@ -9469,36 +9636,6 @@ var Trending = function (_a) {
|
|
|
9469
9636
|
};
|
|
9470
9637
|
changeOptions();
|
|
9471
9638
|
}, [customOptions]);
|
|
9472
|
-
function areRangesSimilar(tag1, tag2) {
|
|
9473
|
-
var range1 = tag1.maxScale - tag1.minScale; // Rango de la primera etiqueta
|
|
9474
|
-
var range2 = tag2.maxScale - tag2.minScale; // Rango de la segunda etiqueta
|
|
9475
|
-
// Determina los límites para la comparación
|
|
9476
|
-
var lowerBound = Math.max(tag1.minScale, tag2.minScale);
|
|
9477
|
-
var upperBound = Math.min(tag1.maxScale, tag2.maxScale);
|
|
9478
|
-
// Calcula el solapamiento entre los dos rangos
|
|
9479
|
-
var overlap = Math.max(0, upperBound - lowerBound);
|
|
9480
|
-
// Determina si el solapamiento es significativo comparado con los rangos individuales
|
|
9481
|
-
var isSignificantOverlap = (overlap / range1 > 0.5) && (overlap / range2 > 0.5);
|
|
9482
|
-
return isSignificantOverlap;
|
|
9483
|
-
}
|
|
9484
|
-
function calculateScales(min, max, sigDigits) {
|
|
9485
|
-
var roundToSignificantDigits = function (num) {
|
|
9486
|
-
if (num === 0)
|
|
9487
|
-
return 0;
|
|
9488
|
-
var multiplier = Math.pow(10, sigDigits - Math.floor(Math.log10(Math.abs(num))) - 1);
|
|
9489
|
-
return Math.round(num * multiplier) / multiplier;
|
|
9490
|
-
};
|
|
9491
|
-
var minScale = roundToSignificantDigits(min);
|
|
9492
|
-
var maxScale = roundToSignificantDigits(max);
|
|
9493
|
-
// Adjust minScale and maxScale if necessary
|
|
9494
|
-
if (minScale > min) {
|
|
9495
|
-
minScale *= 0.9;
|
|
9496
|
-
}
|
|
9497
|
-
if (maxScale < max) {
|
|
9498
|
-
maxScale *= 1.1;
|
|
9499
|
-
}
|
|
9500
|
-
return { minScale: minScale, maxScale: maxScale };
|
|
9501
|
-
}
|
|
9502
9639
|
if (error)
|
|
9503
9640
|
return React__default.createElement("p", null,
|
|
9504
9641
|
"Error: ",
|
|
@@ -9506,6 +9643,14 @@ var Trending = function (_a) {
|
|
|
9506
9643
|
useEffect(function () {
|
|
9507
9644
|
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() }) }) })); });
|
|
9508
9645
|
}, [state.timeScopeStart, state.timeScopeEnd]);
|
|
9646
|
+
useEffect(function () {
|
|
9647
|
+
if (chartShouldInitCursors) {
|
|
9648
|
+
if (chartRef.current) {
|
|
9649
|
+
updateCursorData(chartRef.current, setCursorData);
|
|
9650
|
+
chartRef.current.update();
|
|
9651
|
+
}
|
|
9652
|
+
}
|
|
9653
|
+
}, [chartShouldInitCursors, state]);
|
|
9509
9654
|
return (React__default.createElement(Grid$1, { container: true, style: { width: "95svw", height: "81svh", margin: 0 } },
|
|
9510
9655
|
React__default.createElement(Grid$1, { item: true, xs: 12, container: true, justifyContent: "space-between", alignItems: "center", style: { height: "15%" } },
|
|
9511
9656
|
React__default.createElement(Grid$1, { md: 5, item: true, container: true, justifyContent: "flex-start", alignItems: "center", spacing: 1, wrap: "wrap" },
|
|
@@ -9559,45 +9704,15 @@ var Trending = function (_a) {
|
|
|
9559
9704
|
chartRef.current.secondLineX = newLeft;
|
|
9560
9705
|
debouncedUpdateChart();
|
|
9561
9706
|
} })) : null,
|
|
9562
|
-
React__default.createElement(Line, { ref: chartRef, data: chartData, options: chartOptions, plugins: [verticalLinePlugin] }))),
|
|
9707
|
+
React__default.createElement(Line, { ref: chartRef, data: chartData, options: chartOptions, plugins: [verticalLinePlugin, xAxisDatePlugin] }))),
|
|
9563
9708
|
React__default.createElement(Grid$1, { item: true, xs: 12, style: { height: '40%', minWidth: "100%", paddingTop: "3rem" } },
|
|
9564
9709
|
React__default.createElement(TableComponent, { tagList: tagList, chartData: chartData, setTagList: setTagList, cursorData: cursorData, onDeleteTag: handleDeleteTag, onAddTag: handleAddTag })),
|
|
9565
9710
|
loading && (React__default.createElement(Grid$1, { item: true, xs: 12, style: { textAlign: 'center' } },
|
|
9566
9711
|
React__default.createElement("p", null, "Loading...")))));
|
|
9567
9712
|
};
|
|
9568
9713
|
|
|
9569
|
-
//
|
|
9570
|
-
var getTags = function (NodeName) { return __awaiter(void 0, void 0, void 0, function () {
|
|
9571
|
-
var apiService, parameters, resp;
|
|
9572
|
-
return __generator(this, function (_a) {
|
|
9573
|
-
switch (_a.label) {
|
|
9574
|
-
case 0:
|
|
9575
|
-
apiService = new MESApiService();
|
|
9576
|
-
parameters = [];
|
|
9577
|
-
parameters.push({ name: "NodeName", value: NodeName });
|
|
9578
|
-
return [4 /*yield*/, apiService.callV2("[mssql2022].[IH_100020].[dbo].[GetTagDirectChildren]", parameters)];
|
|
9579
|
-
case 1:
|
|
9580
|
-
resp = _a.sent();
|
|
9581
|
-
return [2 /*return*/, resp];
|
|
9582
|
-
}
|
|
9583
|
-
});
|
|
9584
|
-
}); };
|
|
9585
|
-
|
|
9714
|
+
// @flow
|
|
9586
9715
|
var TrendingsIndex = function (props) {
|
|
9587
|
-
React.useEffect(function () {
|
|
9588
|
-
(function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
9589
|
-
var tags;
|
|
9590
|
-
return __generator(this, function (_a) {
|
|
9591
|
-
switch (_a.label) {
|
|
9592
|
-
case 0: return [4 /*yield*/, getTags(null)];
|
|
9593
|
-
case 1:
|
|
9594
|
-
tags = _a.sent();
|
|
9595
|
-
console.log(tags);
|
|
9596
|
-
return [2 /*return*/];
|
|
9597
|
-
}
|
|
9598
|
-
});
|
|
9599
|
-
}); })();
|
|
9600
|
-
}, []);
|
|
9601
9716
|
return (React.createElement(TrendingProvider, null,
|
|
9602
9717
|
React.createElement(Box, { p: 3, style: { maxWidth: "100%" } },
|
|
9603
9718
|
React.createElement(Paper, null,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
+
import { ChartData } from 'chart.js';
|
|
1
2
|
import React from 'react';
|
|
2
3
|
import './ContextMenu.css';
|
|
3
|
-
import { CursorData, TagList } from './
|
|
4
|
-
import { ChartData } from 'chart.js';
|
|
4
|
+
import { CursorData, TagList } from './models/TrendingModels';
|
|
5
5
|
interface TableComponentProps {
|
|
6
6
|
tagList: TagList;
|
|
7
7
|
setTagList: React.Dispatch<React.SetStateAction<TagList>>;
|
|
@@ -1,37 +1,9 @@
|
|
|
1
1
|
import "chartjs-adapter-moment/dist/chartjs-adapter-moment.esm.js";
|
|
2
2
|
import React from "react";
|
|
3
|
+
import { Tag } from "./models/TrendingModels";
|
|
3
4
|
interface TrendingProps {
|
|
4
5
|
title: string;
|
|
5
6
|
tags: Tag[];
|
|
6
7
|
}
|
|
7
|
-
interface Sample {
|
|
8
|
-
timestamp: number;
|
|
9
|
-
value: number;
|
|
10
|
-
}
|
|
11
|
-
export type SampleArray = Sample[][];
|
|
12
|
-
export interface Tag {
|
|
13
|
-
tagId: number;
|
|
14
|
-
tagName: string;
|
|
15
|
-
tagType: string;
|
|
16
|
-
color: string;
|
|
17
|
-
autoScale: boolean;
|
|
18
|
-
minScale: number;
|
|
19
|
-
maxScale: number;
|
|
20
|
-
visible: boolean;
|
|
21
|
-
}
|
|
22
|
-
export interface CursorData {
|
|
23
|
-
x1: Date;
|
|
24
|
-
x2: Date;
|
|
25
|
-
values: number[];
|
|
26
|
-
}
|
|
27
|
-
export interface LineCoords {
|
|
28
|
-
x1: number;
|
|
29
|
-
x2: number;
|
|
30
|
-
}
|
|
31
|
-
export interface CustomOptions {
|
|
32
|
-
showGrid: boolean;
|
|
33
|
-
stepped: boolean;
|
|
34
|
-
}
|
|
35
|
-
export type TagList = Tag[];
|
|
36
8
|
declare const Trending: React.FC<TrendingProps>;
|
|
37
9
|
export default Trending;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ChartData } from 'chart.js';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { Tag } from '../models/TrendingModels';
|
|
4
|
+
interface Props {
|
|
5
|
+
tag: Tag;
|
|
6
|
+
chartData: ChartData;
|
|
7
|
+
index: number;
|
|
8
|
+
limitX: number;
|
|
9
|
+
}
|
|
10
|
+
export declare const CellComponent: ({ tag, chartData, index, limitX }: Props) => React.JSX.Element;
|
|
11
|
+
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { CustomOptions } from "./
|
|
2
|
+
import { CustomOptions } from "./models/TrendingModels";
|
|
3
3
|
interface CustomOptionsComponentProps {
|
|
4
4
|
customOptions: CustomOptions;
|
|
5
5
|
setCustomOptions: React.Dispatch<React.SetStateAction<CustomOptions>>;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { ChartData } from "chart.js";
|
|
2
|
+
import { CursorData, TagList } from "../models/TrendingModels";
|
|
3
|
+
interface Props {
|
|
4
|
+
cursorData: CursorData;
|
|
5
|
+
tagList: TagList;
|
|
6
|
+
chartData: ChartData;
|
|
7
|
+
}
|
|
8
|
+
interface TagsDataTable {
|
|
9
|
+
[tagName: string]: {
|
|
10
|
+
y1: number;
|
|
11
|
+
y2: number;
|
|
12
|
+
y2y1: number;
|
|
13
|
+
pmin: {
|
|
14
|
+
x: number | Date;
|
|
15
|
+
y: number;
|
|
16
|
+
};
|
|
17
|
+
pmax: {
|
|
18
|
+
x: number | Date;
|
|
19
|
+
y: number;
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
export declare const useTagsDataTable: ({ cursorData, tagList, chartData }: Props) => TagsDataTable;
|
|
24
|
+
export {};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
export interface TimeScope {
|
|
2
|
+
start: Date;
|
|
3
|
+
end: Date;
|
|
4
|
+
}
|
|
5
|
+
export interface Sample {
|
|
6
|
+
timestamp: number;
|
|
7
|
+
value: number;
|
|
8
|
+
}
|
|
9
|
+
export type SampleArray = Sample[][];
|
|
10
|
+
export interface Tag {
|
|
11
|
+
tagId: number;
|
|
12
|
+
tagName: string;
|
|
13
|
+
tagType: string;
|
|
14
|
+
color: string;
|
|
15
|
+
autoScale: boolean;
|
|
16
|
+
minScale: number;
|
|
17
|
+
maxScale: number;
|
|
18
|
+
visible: boolean;
|
|
19
|
+
}
|
|
20
|
+
export interface CursorData {
|
|
21
|
+
x1: Date;
|
|
22
|
+
x2: Date;
|
|
23
|
+
values: number[];
|
|
24
|
+
}
|
|
25
|
+
export interface LineCoords {
|
|
26
|
+
x1: number;
|
|
27
|
+
x2: number;
|
|
28
|
+
}
|
|
29
|
+
export interface CustomOptions {
|
|
30
|
+
showGrid: boolean;
|
|
31
|
+
stepped: boolean;
|
|
32
|
+
}
|
|
33
|
+
export type TagList = Tag[];
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { TagList } from "../models/TrendingModels";
|
|
2
|
+
export declare const fetchDataFunction: (tagList: TagList[], state: any, actions: any) => Promise<void>;
|
|
1
3
|
export declare const getTags: (NodeName: string | null) => Promise<import("../../../../../services").ResponseMESF>;
|
|
2
4
|
export declare const getSeriesData: (TagIds: string, Start: number | null, End: number | null, SampleCount: number) => Promise<import("../../../../../services").ResponseMESF>;
|
|
3
5
|
export declare const saveTagDefaults: (TagId: number, Alias: string, Color: string, MinScale: number, MaxScale: number, Unit: string) => Promise<import("../../../../../services").ResponseMESF>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const timeDifference: (start: number, end: number) => string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dexteel/mesf-core",
|
|
3
|
-
"version": "4.5.
|
|
3
|
+
"version": "4.5.9",
|
|
4
4
|
"author": "Dexteel Team",
|
|
5
5
|
"module": "dist/index.esm.js",
|
|
6
6
|
"typings": "dist/index.d.ts",
|
|
@@ -99,6 +99,7 @@
|
|
|
99
99
|
"chart.js": "^4.4.1",
|
|
100
100
|
"chartjs-adapter-moment": "^1.0.1",
|
|
101
101
|
"chartjs-plugin-zoom": "^2.0.1",
|
|
102
|
+
"cross-env": "^7.0.3",
|
|
102
103
|
"lodash-es": "^4.17.21",
|
|
103
104
|
"react-chartjs-2": "^5.2.0",
|
|
104
105
|
"react-dnd": "^16.0.1",
|