@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 CHANGED
@@ -1,4 +1,9 @@
1
1
  # CHANGELOG
2
+ ## 4.5.9
3
+ - Add date to X Axis when day changes
4
+ ## 4.5.8
5
+ - Fix table data in Trendings
6
+ - Fix cursors
2
7
  ## 4.5.6
3
8
  - Fix login with Windows Auth
4
9
  ## 4.5.5
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", err_1);
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; _a.chartData; var cursorData = _a.cursorData, onDeleteTag = _a.onDeleteTag, onAddTag = _a.onAddTag;
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
- return "".concat(formattedDate, ".").concat(milliseconds);
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
- return "".concat(formattedDate, ".").concat(milliseconds);
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) }, "X2-X1 Stats")))),
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, " Y1"),
8811
- React__default.createElement("th", null, "Y2"),
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, "May")))))),
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) { return (React__default.createElement("tr", { key: tag.tagName, onClick: function () { return handleRowClick(index); }, onContextMenu: function (e) { return handleRightClick(e, index); }, className: classes.rowHover },
8819
- React__default.createElement("td", { className: "".concat(classes.visible, " ").concat(classes.checkbox) },
8820
- React__default.createElement("input", { type: "checkbox", checked: tag.visible, onChange: function (e) { return handleVisibilityChange(index, e.target.checked); } })),
8821
- React__default.createElement("td", { className: classes.inputCol },
8822
- React__default.createElement(Tooltip, { title: tag.tagName, placement: "top", arrow: true, interactive: true, enterDelay: 500 },
8823
- React__default.createElement("div", null,
8824
- React__default.createElement("input", { type: "text", style: { width: '100%' }, value: editableTagNames[tag.tagId] || '', onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
8825
- var _a;
8826
- setEditableTagNames(__assign(__assign({}, editableTagNames), (_a = {}, _a[tag.tagId] = e.target.value, _a)));
8827
- }, onKeyDown: function (e) {
8828
- if (e.key === 'Enter') {
8829
- handleChangeAlias(tag.tagId, editableTagNames[tag.tagId]);
8830
- }
8831
- } })))),
8832
- React__default.createElement("td", { className: classes.color },
8833
- React__default.createElement(ColorPicker, { onChange: handleColorChange, color: tag.color, elementId: tag.tagId })),
8834
- React__default.createElement("td", { className: classes.inputCol },
8835
- 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) {
8836
- var value = e.target.value;
8837
- var numericValue = Number(value);
8838
- // Check if the value is a number and not empty
8839
- handleChange(index, numericValue, 'minScale');
8840
- } })),
8841
- React__default.createElement("td", { className: classes.inputCol },
8842
- 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) {
8843
- var value = e.target.value;
8844
- var numericValue = Number(value);
8845
- // Check if the value is a number and not empty
8846
- if (!isNaN(numericValue) && value.trim() !== '') {
8847
- handleChange(index, numericValue, 'maxScale');
8848
- }
8849
- } })),
8850
- React__default.createElement("td", { className: "".concat(classes.autoScale, " ").concat(classes.checkbox) },
8851
- React__default.createElement("input", { type: "text", style: { width: '100%' }, disabled: true, value: /* tag.unit */ "Unit ", onFocus: function (e) { return e.target.select(); } })),
8852
- React__default.createElement("td", { className: "".concat(classes.autoScale, " ").concat(classes.checkbox) },
8853
- React__default.createElement("input", { type: "checkbox", checked: tag.autoScale, onChange: function (e) { return handleAutoScaleChange(index, e.target.checked); } })),
8854
- React__default.createElement("td", null),
8855
- React__default.createElement("td", { className: classes.doubleInput }),
8856
- React__default.createElement("td", null, "y1y2"),
8857
- React__default.createElement("td", null, "min"),
8858
- React__default.createElement("td", null, "max"))); }))))),
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 DraggableLineControl = function (_a) {
9106
- var initialLeft = _a.initialLeft, onUpdate = _a.onUpdate, color = _a.color, chartArea = _a.chartArea;
9107
- var _b = useState(false), isDragging = _b[0], setIsDragging = _b[1];
9108
- var _c = useState(initialLeft), left = _c[0], setLeft = _c[1];
9109
- var ref = useRef(null);
9110
- var handleMouseDown = function (e) {
9111
- setIsDragging(true);
9112
- e.stopPropagation();
9113
- e.preventDefault();
9114
- };
9115
- var handleMouseMove = function (e) {
9116
- if (!isDragging || !ref.current)
9117
- return;
9118
- chartArea.width - chartArea.right;
9119
- chartArea.left;
9120
- var newLeft = Math.min(Math.max(e.clientX - ref.current.offsetParent.getBoundingClientRect().left, chartArea.left), chartArea.right);
9121
- setLeft(newLeft);
9122
- onUpdate(newLeft); // Actualiza la posición de la línea en el gráfico
9123
- };
9124
- var handleMouseUp = function () {
9125
- setIsDragging(false);
9126
- };
9127
- useEffect(function () {
9128
- var mouseMoveHandler = function (e) { return handleMouseMove(e); };
9129
- var mouseUpHandler = function () { return handleMouseUp(); };
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
- return function () {
9135
- window.removeEventListener('mousemove', mouseMoveHandler);
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
- Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip$1, Legend, TimeScale, zoomPlugin);
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 updateCursorData(chart, setCursorData) {
9287
+ };
9288
+ var updateCursorData = function (chart, setCursorData) {
9174
9289
  var xScale = chart.scales.x;
9175
- chart.scales.y;
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 para cada línea si corresponden a diferentes series de datos
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
- function getVerticalLinePlugin(setChartArea, setCoords) {
9190
- return {
9191
- id: "verticalLinePlugin",
9192
- afterUpdate: function (chart) {
9193
- if (chart.secondLineX === null) {
9194
- chart.secondLineX = chart.scales.x.left + (chart.scales.x.width * 0.75);
9195
- }
9196
- if (chart.mouseX === null) {
9197
- chart.mouseX = chart.scales.x.left + (chart.scales.x.width / 4);
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 _c = useState({
9405
+ var _k = useState({
9217
9406
  labels: [],
9218
9407
  datasets: []
9219
- }), chartData = _c[0], setChartData = _c[1];
9220
- var _d = useState(null), lineTabCoords = _d[0], setLineTabCoords = _d[1];
9221
- var _e = useState(null), chartArea = _e[0], setChartArea = _e[1];
9222
- var _f = useState(tags), tagList = _f[0], setTagList = _f[1];
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 = _h[0], setCustomOptions = _h[1];
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 _l = useState({
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, values) {
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.toLocaleTimeString("en-US", {
9320
- hour12: false,
9321
- hour: "2-digit",
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
- // For subsequent ticks, compare the date with the previous tick
9334
- var previousDate = new Date(values[index - 1].value);
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 = _l[0], setChartOptions = _l[1];
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
- //tags
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 './Trending';
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 { Tag } from '../../../Trending';
2
+ import { Tag } from '../../../models/TrendingModels';
3
3
  interface Props {
4
4
  open: boolean;
5
5
  handleClose: () => void;
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import { Tag } from "../../../Trending";
2
+ import { Tag } from "../../../models/TrendingModels";
3
3
  interface TagSelectionModalProps {
4
4
  isOpen: boolean;
5
5
  onClose: () => void;
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import { CustomOptions } from "./Trending";
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,2 @@
1
+ import { Plugin } from 'chart.js';
2
+ export declare const useGetVerticalLinePlugin: (setChartArea: (param: any) => void, setCoords: any) => Plugin;
@@ -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,2 @@
1
+ import { CursorData } from '../models/TrendingModels';
2
+ export declare const updateCursorData: (chart: any, setCursorData: (cursorData: CursorData) => void) => void;
@@ -0,0 +1,2 @@
1
+ import { Plugin } from 'chart.js';
2
+ export declare const useXAxisDatePlugin: () => Plugin;
@@ -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,2 @@
1
+ import { Tag } from "../models/TrendingModels";
2
+ export declare const areRangesSimilar: (tag1: Tag, tag2: Tag) => boolean;
@@ -0,0 +1,4 @@
1
+ export declare const calculateScales: (min: any, max: any, sigDigits: any) => {
2
+ minScale: number;
3
+ maxScale: number;
4
+ };
@@ -0,0 +1,4 @@
1
+ export declare const formatDateTimeToString: (date: Date) => {
2
+ formattedDate: string;
3
+ formattedTime: string;
4
+ };
@@ -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.7",
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",