@dexteel/mesf-core 4.5.8 → 4.5.10

package/dist/index.esm.js

@@ -1,5 +1,5 @@
-import { Typography, TextField, makeStyles as makeStyles$1, Button as Button$1, Grid as Grid$1, Dialog as Dialog$1, DialogTitle as DialogTitle$2, DialogContent as DialogContent$2, DialogContentText, DialogActions as DialogActions$2, FormHelperText, CircularProgress as CircularProgress$1, Badge, FormControlLabel, Checkbox, Snackbar as Snackbar$1, Paper as Paper$1, MenuItem as MenuItem$1, useTheme as useTheme$1, Box, Tooltip, IconButton as IconButton$1, FormControl as FormControl$1, Select as Select$1, createStyles as createStyles$1, List, ListItem, ListItemText } from '@material-ui/core';
-import { values, get, isNil as isNil$1, isEmpty, isNaN, debounce } from 'lodash-es';
+import { Typography, TextField, makeStyles as makeStyles$1, Button as Button$1, Grid as Grid$1, Dialog as Dialog$1, DialogTitle as DialogTitle$2, DialogContent as DialogContent$2, DialogContentText, DialogActions as DialogActions$2, FormHelperText, CircularProgress as CircularProgress$1, Badge, FormControlLabel, Checkbox, Snackbar as Snackbar$1, Paper as Paper$1, MenuItem as MenuItem$1, useTheme as useTheme$1, Box, Tooltip, IconButton as IconButton$1, FormControl as FormControl$1, Select as Select$1, debounce, createStyles as createStyles$1, List, ListItem, ListItemText } from '@material-ui/core';
+import { values, get, isNil as isNil$1, isEmpty, isNaN } from 'lodash-es';
 import * as React from 'react';
 import React__default, { useState, useRef, useEffect, Component, createContext, useContext, useMemo, useCallback, lazy, Suspense } from 'react';
 import { Alert as Alert$1, Modal as Modal$1, Navbar, Container, Nav, NavDropdown } from 'react-bootstrap';
@@ -20,17 +20,17 @@ import Grid from '@material-ui/core/Grid';
 import { isNil, get as get$1 } from 'lodash';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import { ArrowRight, ChevronLeft, ChevronRight } from '@material-ui/icons';
 import axios from 'axios';
 import { _adapters, Chart, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip as Tooltip$1, Legend, TimeScale } from 'chart.js';
 import moment from 'moment';
 import zoomPlugin from 'chartjs-plugin-zoom';
-import { Line } from 'react-chartjs-2';
 import Popover from '@material-ui/core/Popover';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import FolderIcon from '@material-ui/icons/Folder';
 import InsertDriveFileIcon from '@material-ui/icons/InsertDriveFile';
 import { Alert as Alert$3, TreeView as TreeView$1, TreeItem as TreeItem$1 } from '@material-ui/lab';
+import { ArrowRight, ChevronLeft, ChevronRight } from '@material-ui/icons';
+import { Line } from 'react-chartjs-2';
 import PersonPinCircleIcon from '@material-ui/icons/PersonPinCircle';
 import PropTypes from 'prop-types';
 import { ResponsiveBar } from '@nivo/bar';
@@ -6966,7 +6966,7 @@ var MESApiService = /** @class */ (function () {
                         return [2 /*return*/, { ok: true, data: resp }];
                     case 4:
                         err_1 = _a.sent();
-                        console.log("fromCatch", err_1);
+                        // console.log("fromCatch", err);
                         this.hasErrors = true;
                         this.error = err_1;
                         return [2 /*return*/, { ok: false, message: err_1.toString() }];
@@ -8155,7 +8155,7 @@ var AreaSelector$1 = lazy(function () {
         "default": mod.AreaSelector
     }); });
 });
-function Header(_a) {
+function Header$1(_a) {
     var _b = _a.showAreaSelector, showAreaSelector = _b === void 0 ? false : _b, _c = _a.navbarTitle, navbarTitle = _c === void 0 ? "MESF" : _c;
     var getUserName = useToken().getUserName;
     var _d = useState(""), error = _d[0], setError = _d[1];
@@ -8524,7 +8524,7 @@ var TagSelectionModal = function (_a) {
     /* I have to get the grandchildren because the toggle action would not be triggered if no children */
     var handleNodeToggle = function (event, nodeIds) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
-            console.log("Toggle:", nodeIds);
+            // console.log("Toggle:", nodeIds);
             setExpanded(nodeIds);
             return [2 /*return*/];
         });
@@ -8532,8 +8532,6 @@ var TagSelectionModal = function (_a) {
     var handleNodeSelect = function (event, nodeId) { return __awaiter(void 0, void 0, void 0, function () {
         var node;
         return __generator(this, function (_a) {
-            //  console.log('Selected Node ID:', nodeId);
-            console.log("treeData", treeData);
             node = findNode(treeData, nodeId);
             if (node === null || node === void 0 ? void 0 : node.tagId) {
                 onTagSelect(node.tag);
@@ -8696,7 +8694,6 @@ var useTagsTableStyles = makeStyles$1(function (theme) { return ({
 }); });
 
 var timeDifference = function (start, end) {
-    console.log(start, end);
     var differenceMilliseconds = start - end;
     var seconds = Math.floor(differenceMilliseconds / 1000);
     var minutes = Math.floor(seconds / 60);
@@ -8707,7 +8704,7 @@ var timeDifference = function (start, end) {
 };
 
 var TableComponent = function (_a) {
-    var tagList = _a.tagList, setTagList = _a.setTagList, chartData = _a.chartData, cursorData = _a.cursorData, onDeleteTag = _a.onDeleteTag, onAddTag = _a.onAddTag;
+    var tagList = _a.tagList, setTagList = _a.setTagList, chartData = _a.chartData, cursorData = _a.cursorData;
     var classes = useTagsTableStyles();
     var _b = useState(""); _b[0]; _b[1];
     var dataTable = useTagsDataTable({ tagList: tagList, chartData: chartData, cursorData: cursorData });
@@ -8732,6 +8729,22 @@ var TableComponent = function (_a) {
     var handleColorChange = function (tagId, value) {
         setTagList(function (prev) { return prev.map(function (tag) { return tag.tagId === tagId ? __assign(__assign({}, tag), { color: value }) : tag; }); });
     };
+    var handleDeleteTag = function (tagId) {
+        setTagList(function (prevTagList) {
+            return prevTagList.filter(function (tag) { return tag.tagId !== tagId; });
+        });
+    };
+    var handleAddTag = function (newTag) {
+        if (newTag) {
+            setTagList(function (prevTagList) {
+                // Check if the tag is already in the list to avoid duplicates
+                if (prevTagList.some(function (tag) { return tag.tagId === newTag.tagId; })) {
+                    return prevTagList; // Return the existing list if the tag is already there
+                }
+                return __spreadArray(__spreadArray([], prevTagList, true), [newTag], false); // Add the new tag to the list
+            });
+        }
+    };
     var _d = useState(null), selectedRowIndex = _d[0], setSelectedRowIndex = _d[1];
     var _e = useState(false), addTagModalOpen = _e[0], setAddTagModalOpen = _e[1];
     var handleClose = function () { return setAddTagModalOpen(false); };
@@ -8751,48 +8764,15 @@ var TableComponent = function (_a) {
         { id: 'saveDefault', label: 'Save Default To Tag', onClick: function () { } },
         { id: 'saveAsView', label: 'Save as View', onClick: function () { } },
         { id: 'loadView', label: 'Load View', onClick: function () { } },
-        // ... other options
     ];
-    // const binarySearch = (arr: any, searchDate: Date): number | null => {
-    //     let left = 0;
-    //     let right = arr.length - 1;
-    //     let closest: number | null = null;  
-    //     if (!arr.length) return null;
-    //     while (left <= right) {
-    //         const mid = Math.floor((left + right) / 2);
-    //         const midDate = arr[mid].x; // Asegúrate de que esto es una instancia de Date
-    //         const midTimestamp = midDate.getTime(); // Esto es un number
-    //         const searchTimestamp = searchDate.getTime(); // Esto también es un number
-    // console.log(midTimestamp, searchTimestamp);
-    //         if (midTimestamp === searchTimestamp) {
-    //             return arr[mid].y;
-    //         } else if (midTimestamp < searchTimestamp) {
-    //             left = mid + 1;
-    //         } else {
-    //             right = mid - 1;
-    //         }
-    //         // Revisa si midDate está más cerca que el 'closest' actual
-    //         if (closest === null || Math.abs(midTimestamp - searchTimestamp) < Math.abs(arr[closest].x.getTime() - searchTimestamp)) {
-    //             closest = mid;
-    //         }
-    //     }
-    //     return closest !== null ? arr[closest].y : null;
-    // };
-    // useEffect(() => {
-    //     if (cursorData) {
-    //         const yValue = binarySearch(chartData.datasets[0]?.data, new Date(cursorData.x1));
-    //         if(yValue)console.log(yValue,"retorna binary")
-    //     }
-    //     else console.log("NULL")
-    // }, [cursorData,chartData.datasets[1]?.data])
     var handleTagSelect = function (selectedTag) {
-        onAddTag(selectedTag);
+        handleAddTag(selectedTag);
         handleClose();
     };
     var handleDelete = function (index) {
         if (selectedRowIndex !== null) {
             var tagToDelete = tagList[selectedRowIndex];
-            onDeleteTag(tagToDelete.tagId);
+            handleDeleteTag(tagToDelete.tagId);
             setSelectedRowIndex(null); // Reset the selected row index
         }
     };
@@ -8843,7 +8823,6 @@ var TableComponent = function (_a) {
                             React__default.createElement("th", { colSpan: 4, className: "".concat(classes.topTitles, " ").concat(classes.scale) }, "Scale"),
                             React__default.createElement("th", { className: "".concat(classes.topTitles, " ").concat(classes.xStats) }, cursorData ? (function () {
                                 var date = new Date(cursorData.x1);
-                                // console.log(cursorData, "cursor data")
                                 var formattedDate = date.toLocaleString('en-US', {
                                     hour12: false,
                                     month: 'short',
@@ -8867,7 +8846,6 @@ var TableComponent = function (_a) {
                             })() : null),
                             React__default.createElement("th", { className: "".concat(classes.topTitles, " ").concat(classes.xStats) }, cursorData ? (function () {
                                 var date = new Date(cursorData.x2);
-                                // console.log(cursorData, "cursor data")
                                 var formattedDate = date.toLocaleString('en-US', {
                                     hour12: false,
                                     month: 'short',
@@ -8960,44 +8938,6 @@ var TableComponent = function (_a) {
         React__default.createElement(AddTagModal, { open: addTagModalOpen, handleClose: handleClose, onTagSelect: handleTagSelect })));
 };
 
-var DraggableLineControl = function (_a) {
-    var initialLeft = _a.initialLeft, onUpdate = _a.onUpdate, color = _a.color, chartArea = _a.chartArea;
-    var _b = useState(false), isDragging = _b[0], setIsDragging = _b[1];
-    var _c = useState(initialLeft), left = _c[0], setLeft = _c[1];
-    var ref = useRef(null);
-    var handleMouseDown = function (e) {
-        setIsDragging(true);
-        e.stopPropagation();
-        e.preventDefault();
-    };
-    var handleMouseMove = function (e) {
-        if (!isDragging || !ref.current)
-            return;
-        chartArea.width - chartArea.right;
-        chartArea.left;
-        var newLeft = Math.min(Math.max(e.clientX - ref.current.offsetParent.getBoundingClientRect().left, chartArea.left), chartArea.right);
-        setLeft(newLeft);
-        onUpdate(newLeft); // Actualiza la posición de la línea en el gráfico
-    };
-    var handleMouseUp = function () {
-        setIsDragging(false);
-    };
-    useEffect(function () {
-        var mouseMoveHandler = function (e) { return handleMouseMove(e); };
-        var mouseUpHandler = function () { return handleMouseUp(); };
-        if (isDragging) {
-            window.addEventListener('mousemove', mouseMoveHandler);
-            window.addEventListener('mouseup', mouseUpHandler);
-        }
-        return function () {
-            window.removeEventListener('mousemove', mouseMoveHandler);
-            window.removeEventListener('mouseup', mouseUpHandler);
-        };
-    }, [isDragging]);
-    return (React__default.createElement("div", { ref: ref, style: { height: 20, width: 20, background: color, position: 'absolute', top: -10, left: left - 10 }, onMouseDown: handleMouseDown },
-        React__default.createElement("div", { style: { height: chartArea.height, width: 2, background: color, position: 'relative', top: 20, left: 0, right: 0, margin: 'auto' } })));
-};
-
 var TrendingsInitialState = {
     timeScopeStart: moment(new Date()).subtract(1, "days").toDate(),
     timeScopeEnd: new Date(),
@@ -9162,6 +9102,129 @@ var TrendingProvider = function (_a) {
     return (React__default.createElement(TrendingContext.Provider, { value: { state: state, actions: actions } }, children));
 };
 
+var formatDateTimeToString = function (date) {
+    var hour = date.getHours().toString().padStart(2, '0');
+    var minute = date.getMinutes().toString().padStart(2, '0');
+    var second = date.getSeconds().toString().padStart(2, '0');
+    if (hour === '24') {
+        hour = '00';
+    }
+    var formattedDate = date.toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric"
+    });
+    var formattedTime = "".concat(hour, ":").concat(minute, ":").concat(second);
+    return { formattedDate: formattedDate, formattedTime: formattedTime };
+};
+
+var useChartOptions = function () {
+    var _a = useTrendingContext(); _a.state; var actions = _a.actions;
+    var debounceTimerRef = useRef(null);
+    var handleZoom = function (_a) {
+        var chart = _a.chart;
+        if (debounceTimerRef.current) {
+            clearTimeout(debounceTimerRef.current);
+        }
+        debounceTimerRef.current = setTimeout(function () {
+            // Handle zoom event and execute fetch
+            var newStart = new Date(chart.scales.x.min);
+            var newEnd = new Date(chart.scales.x.max);
+            actions.setTotalScope({
+                start: newStart,
+                end: newEnd
+            });
+        }, 1000);
+    };
+    var handlePan = function (_a) {
+        var chart = _a.chart;
+        if (debounceTimerRef.current) {
+            clearTimeout(debounceTimerRef.current);
+        }
+        debounceTimerRef.current = setTimeout(function () {
+            // Handle pan event and execute fetch
+            var newStart = new Date(chart.scales.x.min);
+            var newEnd = new Date(chart.scales.x.max);
+            actions.setTotalScope({
+                start: newStart,
+                end: newEnd,
+                graphPan: true
+            });
+        }, 1000);
+    };
+    return useState({
+        animation: {
+            duration: 0
+        },
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+            x: {
+                type: "time",
+                ticks: {
+                    autoSkip: true,
+                    maxTicksLimit: 20,
+                    callback: function (value, index, ticks) {
+                        var currentDate = new Date(value);
+                        var time = formatDateTimeToString(currentDate).formattedTime;
+                        var date = formatDateTimeToString(currentDate).formattedDate;
+                        // Si es el primer tick, siempre muestra la fecha y hora
+                        if (index === 0) {
+                            return [time, date];
+                        }
+                        // De lo contrario, solo muestra la hora
+                        return time;
+                    }
+                },
+                grid: {
+                    display: true
+                }
+            },
+            y: {
+                grid: {
+                    display: true
+                },
+                afterUpdate: function (axis) {
+                    var chart = axis.chart;
+                    var keys = Object.keys(chart.scales).filter(function (sc) { return sc !== 'x'; });
+                    if (keys.length > 1) {
+                        for (var scaleKey in chart.scales) {
+                            var scale = chart.scales[scaleKey];
+                            if (scale.max === 1 && scale.min === 0) {
+                                chart.scales[scaleKey].display = false;
+                                chart.scales[scaleKey].options.display = false;
+                            }
+                            else {
+                                chart.scales[scaleKey].display = true;
+                                chart.scales[scaleKey].options.display = true;
+                            }
+                        }
+                    }
+                    else {
+                        console.log('sin y', keys);
+                    }
+                }
+            }
+        },
+        plugins: {
+            tooltip: { enabled: false },
+            legend: { display: false },
+            zoom: {
+                zoom: {
+                    wheel: { enabled: true, mode: "x" },
+                    pinch: { enabled: true, mode: "x" },
+                    onZoom: handleZoom,
+                    mode: "x"
+                },
+                pan: {
+                    enabled: true,
+                    mode: "x",
+                    onPan: handlePan
+                }
+            }
+        }
+    });
+};
+
 var useTrendingStyles = makeStyles$1(function (theme) { return ({
     datetimePicker: {
         alignItems: "center",
@@ -9240,8 +9303,131 @@ var CustomOptionsComponent = function (_a) {
                 "Stepped"))));
 };
 
+var dateNavigator = function (startDate, endDate, scope, operator) {
+    if (scope === "custom")
+        return;
+    else {
+        var _a = scope.split(" "), quantity = _a[0], duration = _a[1];
+        var newStartDate = moment(startDate)[operator](quantity, duration[0]).toDate();
+        var newEndDate = moment(endDate)[operator](quantity, duration[0]).toDate();
+        return { newStartDate: newStartDate, newEndDate: newEndDate };
+    }
+};
+
+var Header = function (_a) {
+    var setChartOptions = _a.setChartOptions;
+    var classes = useTrendingStyles();
+    var _b = useTrendingContext(), state = _b.state, actions = _b.actions;
+    var _c = useState({
+        showGrid: true,
+        stepped: false
+    }), customOptions = _c[0], setCustomOptions = _c[1];
+    var handleDateNavigator = function (operator) {
+        var newDates = dateNavigator(state.timeScopeStart, state.timeScopeEnd, state.scope, operator);
+        if (newDates) {
+            actions.setTotalScope({ start: newDates.newStartDate, end: newDates.newEndDate, scope: state.scope });
+        }
+    };
+    var handleDateChange = function (newValue, key) {
+        var _a;
+        //@ts-ignore
+        actions.setTotalScope((_a = {}, _a[key] = moment(newValue).toDate(), _a));
+    };
+    var handleChangeScope = function (e) {
+        var newScope = e.target.value;
+        actions.setTotalScope({
+            scope: newScope
+        });
+    };
+    useEffect(function () {
+        var changeOptions = function () {
+            // console.log("change options");
+            setChartOptions(function (prevOptions) { return (__assign(__assign({}, prevOptions), { elements: {
+                    line: {
+                        stepped: customOptions.stepped,
+                        lineTension: 0.1
+                    }
+                }, scales: __assign(__assign({}, prevOptions.scales), { x: __assign(__assign({}, prevOptions.scales.x), { grid: __assign(__assign({}, prevOptions.scales.x.grid), { display: customOptions.showGrid }) }), y: __assign(__assign({}, prevOptions.scales.y), { grid: __assign(__assign({}, prevOptions.scales.y.grid), { display: customOptions.showGrid }) }) }) })); });
+        };
+        changeOptions();
+    }, [customOptions]);
+    useEffect(function () {
+        setChartOptions(function (prevOptions) { return (__assign(__assign({}, prevOptions), { scales: __assign(__assign({}, prevOptions.scales), { x: __assign(__assign({}, prevOptions.scales.x), { min: state.timeScopeStart.getTime(), max: state.timeScopeEnd.getTime() }) }) })); });
+    }, [state.timeScopeStart, state.timeScopeEnd]);
+    return (React__default.createElement(Grid$1, { item: true, xs: 12, container: true, justifyContent: "space-between", alignItems: "center", style: { height: "15%" } },
+        React__default.createElement(Grid$1, { md: 5, item: true, container: true, justifyContent: "flex-start", alignItems: "center", spacing: 1, wrap: "wrap" },
+            React__default.createElement(IconButton$1, { color: "primary", onClick: function () { return handleDateNavigator("subtract"); }, className: classes.navigatorButton },
+                React__default.createElement(ChevronLeft, { fontSize: "large" })),
+            React__default.createElement(Grid$1, { item: true },
+                React__default.createElement(TextField, { type: "datetime-local", className: classes.datetimePicker, label: "Start", variant: "outlined", value: moment(state.timeScopeStart).format("YYYY-MM-DDTHH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "start"); }, InputLabelProps: {
+                        shrink: true,
+                        style: { marginLeft: "10px" }
+                    }, InputProps: {
+                        max: state.timeScopeEnd
+                    } })),
+            React__default.createElement(Grid$1, { item: true, className: classes.select },
+                React__default.createElement(FormControl$1, { variant: "outlined" },
+                    React__default.createElement(Select$1, { value: state.scope, onChange: handleChangeScope, displayEmpty: true },
+                        React__default.createElement(MenuItem$1, { value: "10 min" }, "10 min"),
+                        React__default.createElement(MenuItem$1, { value: "1 hour" }, "1 hour"),
+                        React__default.createElement(MenuItem$1, { value: "4 hours" }, "4 hours"),
+                        React__default.createElement(MenuItem$1, { value: "12 hours" }, "12 hours"),
+                        React__default.createElement(MenuItem$1, { value: "1 day" }, "1 day"),
+                        React__default.createElement(MenuItem$1, { value: "10 days" }, "10 days"),
+                        React__default.createElement(MenuItem$1, { value: "custom" }, "Custom")))),
+            React__default.createElement(Grid$1, { item: true },
+                React__default.createElement(TextField, { label: "End", variant: "outlined", className: classes.datetimePicker, type: "datetime-local", value: moment(state.timeScopeEnd).format("YYYY-MM-DDTHH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "end"); }, InputLabelProps: {
+                        shrink: true,
+                        style: { marginLeft: "10px" }
+                    } })),
+            React__default.createElement(IconButton$1, { color: "primary", onClick: function () { return handleDateNavigator("add"); }, className: classes.navigatorButton },
+                React__default.createElement(ChevronRight, { fontSize: "large" }))),
+        React__default.createElement(Grid$1, { md: 7, item: true, container: true, justifyContent: "space-between" },
+            React__default.createElement(Grid$1, { item: true, container: true, wrap: "nowrap", spacing: 1 },
+                React__default.createElement(Grid$1, { item: true, container: true },
+                    React__default.createElement(CustomOptionsComponent, { customOptions: customOptions, setCustomOptions: setCustomOptions }))))));
+};
+
+var DraggableLineControl = function (_a) {
+    var initialLeft = _a.initialLeft, onUpdate = _a.onUpdate, color = _a.color, chartArea = _a.chartArea;
+    var _b = useState(false), isDragging = _b[0], setIsDragging = _b[1];
+    var _c = useState(initialLeft), left = _c[0], setLeft = _c[1];
+    var ref = useRef(null);
+    var handleMouseDown = function (e) {
+        setIsDragging(true);
+        e.stopPropagation();
+        e.preventDefault();
+    };
+    var handleMouseMove = function (e) {
+        if (!isDragging || !ref.current)
+            return;
+        chartArea.width - chartArea.right;
+        chartArea.left;
+        var newLeft = Math.min(Math.max(e.clientX - ref.current.offsetParent.getBoundingClientRect().left, chartArea.left), chartArea.right);
+        setLeft(newLeft);
+        onUpdate(newLeft); // Actualiza la posición de la línea en el gráfico
+    };
+    var handleMouseUp = function () {
+        setIsDragging(false);
+    };
+    useEffect(function () {
+        var mouseMoveHandler = function (e) { return handleMouseMove(e); };
+        var mouseUpHandler = function () { return handleMouseUp(); };
+        if (isDragging) {
+            window.addEventListener('mousemove', mouseMoveHandler);
+            window.addEventListener('mouseup', mouseUpHandler);
+        }
+        return function () {
+            window.removeEventListener('mousemove', mouseMoveHandler);
+            window.removeEventListener('mouseup', mouseUpHandler);
+        };
+    }, [isDragging]);
+    return (React__default.createElement("div", { ref: ref, style: { height: 20, width: 20, background: color, position: 'absolute', top: -10, left: left - 10 }, onMouseDown: handleMouseDown },
+        React__default.createElement("div", { style: { height: chartArea.height, width: 2, background: color, position: 'relative', top: 20, left: 0, right: 0, margin: 'auto' } })));
+};
+
 var useGetVerticalLinePlugin = function (setChartArea, setCoords) {
-    return {
+    var chartPlugin = {
         id: "verticalLinePlugin",
         afterUpdate: function (chart) {
             if (chart.chartArea) {
@@ -9267,6 +9453,7 @@ var useGetVerticalLinePlugin = function (setChartArea, setCoords) {
             setCoords({ x1: x1, x2: x2 });
         }
     };
+    return chartPlugin;
 };
 
 var getValuesAtCursor = function (chart, timeAtCursor) {
@@ -9302,6 +9489,44 @@ var updateCursorData = function (chart, setCursorData) {
     });
 };
 
+var useXAxisDatePlugin = function () {
+    var chartPlugin = {
+        id: 'xAxisDatePlugin',
+        afterBuildTicks: function (chart) {
+            var oldTicks = chart.scales.x.ticks;
+            var newTicks = [];
+            newTicks.push(oldTicks[0]);
+            for (var i = 1; i < oldTicks.length; i++) {
+                var current = new Date(oldTicks[i].value);
+                var previous = new Date(oldTicks[i - 1].value);
+                var time = formatDateTimeToString(current).formattedTime;
+                var date = formatDateTimeToString(current).formattedDate;
+                var newLabel = void 0;
+                if (current.getDate() !== previous.getDate()) {
+                    newLabel = [time, date];
+                }
+                else {
+                    newLabel = time;
+                }
+                newTicks.push({
+                    value: oldTicks[i].value,
+                    major: oldTicks[i].major,
+                    label: newLabel
+                });
+            }
+            chart.scales.x.ticks = newTicks;
+        }
+    };
+    return chartPlugin;
+};
+
+var useYAxisPlugin = function () {
+    var chartPlugin = {
+        id: 'yAxisPlugin'
+    };
+    return chartPlugin;
+};
+
 var areRangesSimilar = function (tag1, tag2) {
     var range1 = tag1.maxScale - tag1.minScale; // Rango de la primera etiqueta
     var range2 = tag2.maxScale - tag2.minScale; // Rango de la segunda etiqueta
@@ -9334,288 +9559,109 @@ var calculateScales = function (min, max, sigDigits) {
     return { minScale: minScale, maxScale: maxScale };
 };
 
-var dateNavigator = function (startDate, endDate, scope, operator) {
-    if (scope === "custom")
-        return;
-    else {
-        var _a = scope.split(" "), quantity = _a[0], duration = _a[1];
-        var newStartDate = moment(startDate)[operator](quantity, duration[0]).toDate();
-        var newEndDate = moment(endDate)[operator](quantity, duration[0]).toDate();
-        return { newStartDate: newStartDate, newEndDate: newEndDate };
-    }
-};
-
-Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip$1, Legend, TimeScale, zoomPlugin);
-var Trending = function (_a) {
-    _a.title; var tags = _a.tags;
-    var classes = useTrendingStyles();
-    var _b = useTrendingContext(), state = _b.state, actions = _b.actions;
-    var _c = useState(true), loading = _c[0], setLoading = _c[1];
-    var _d = useState(""), error = _d[0], setError = _d[1];
-    var _e = useState(tags), tagList = _e[0], setTagList = _e[1];
-    var _f = useState(null), cursorData = _f[0], setCursorData = _f[1];
-    var _g = useState(null), lineTabCoords = _g[0], setLineTabCoords = _g[1];
-    var _h = useState(null), chartArea = _h[0], setChartArea = _h[1];
-    var _j = useState(false), chartShouldInitCursors = _j[0], setChartShouldInitCursors = _j[1];
+var TrendingChart = function (_a) {
+    var tagList = _a.tagList, series = _a.series, chartOptions = _a.chartOptions, setChartOptions = _a.setChartOptions, chartData = _a.chartData, setCursorData = _a.setCursorData, setChartData = _a.setChartData;
+    var _b = useTrendingContext(), state = _b.state; _b.actions;
+    var _c = useState(null), lineTabCoords = _c[0], setLineTabCoords = _c[1];
+    var _d = useState(null), chartArea = _d[0], setChartArea = _d[1];
     var chartRef = useRef(null);
-    var _k = useState({
-        labels: [],
-        datasets: []
-    }), chartData = _k[0], setChartData = _k[1];
-    var verticalLinePlugin = useGetVerticalLinePlugin(setChartArea, setLineTabCoords);
-    var _l = useState({
-        showGrid: true,
-        stepped: false
-    }), customOptions = _l[0], setCustomOptions = _l[1];
-    var debounceTimerRef = useRef(null);
     var debouncedUpdateChart = useRef(debounce(function () {
         if (chartRef.current) {
             updateCursorData(chartRef.current, setCursorData);
             chartRef.current.update();
         }
     }, 250)).current;
-    var handleDateChange = function (newValue, key) {
-        var _a;
-        //@ts-ignore
-        actions.setTotalScope((_a = {}, _a[key] = moment(newValue).toDate(), _a));
-    };
-    var handleChangeScope = function (e) {
-        var newScope = e.target.value;
-        actions.setTotalScope({
-            scope: newScope
-        });
-    };
-    var handleZoom = function (_a) {
-        var chart = _a.chart;
-        if (debounceTimerRef.current) {
-            clearTimeout(debounceTimerRef.current);
-        }
-        debounceTimerRef.current = setTimeout(function () {
-            // Handle zoom event and execute fetch
-            var newStart = new Date(chart.scales.x.min);
-            var newEnd = new Date(chart.scales.x.max);
-            actions.setTotalScope({
-                start: newStart,
-                end: newEnd
-            });
-        }, 1000);
-    };
-    var handlePan = function (_a) {
-        var chart = _a.chart;
-        if (debounceTimerRef.current) {
-            clearTimeout(debounceTimerRef.current);
+    var _e = useState(false), chartShouldInitCursors = _e[0], setChartShouldInitCursors = _e[1];
+    var verticalLinePlugin = useGetVerticalLinePlugin(setChartArea, setLineTabCoords);
+    var xAxisDatePlugin = useXAxisDatePlugin();
+    var yAxisPlugin = useYAxisPlugin();
+    useEffect(function () {
+        var axes = [];
+        if (!series.length) {
+            return;
         }
-        debounceTimerRef.current = setTimeout(function () {
-            // Handle pan event and execute fetch
-            var newStart = new Date(chart.scales.x.min);
-            var newEnd = new Date(chart.scales.x.max);
-            actions.setTotalScope({
-                start: newStart,
-                end: newEnd,
-                graphPan: true
-            });
-        }, 1000);
-    };
-    var handleDeleteTag = function (tagId) {
-        setTagList(function (prevTagList) {
-            return prevTagList.filter(function (tag) { return tag.tagId !== tagId; });
-        });
-    };
-    var handleAddTag = function (newTag) {
-        if (newTag) {
-            setTagList(function (prevTagList) {
-                // Check if the tag is already in the list to avoid duplicates
-                if (prevTagList.some(function (tag) { return tag.tagId === newTag.tagId; })) {
-                    return prevTagList; // Return the existing list if the tag is already there
+        tagList.forEach(function (tag, index) {
+            if (series[index].length) {
+                if (tag.autoScale && series[index]) {
+                    var serieSamples = series[index].map(function (sample) { return sample.value; });
+                    var _a = calculateScales(Math.min.apply(Math, serieSamples), Math.max.apply(Math, serieSamples), 3), minScale = _a.minScale, maxScale = _a.maxScale;
+                    tag.minScale = minScale;
+                    tag.maxScale = maxScale;
                 }
-                return __spreadArray(__spreadArray([], prevTagList, true), [newTag], false); // Add the new tag to the list
-            });
-        }
-    };
-    var handleDateNavigator = function (operator) {
-        var newDates = dateNavigator(state.timeScopeStart, state.timeScopeEnd, state.scope, operator);
-        if (newDates) {
-            actions.setTotalScope({ start: newDates.newStartDate, end: newDates.newEndDate, scope: state.scope });
-        }
-    };
-    var _m = useState({
-        animation: {
-            duration: 0
-        },
-        responsive: true,
-        maintainAspectRatio: false,
-        scales: {
-            x: {
-                type: "time",
+                var existingAxis = axes.find(function (existingTag) {
+                    return areRangesSimilar(existingTag, tag);
+                });
+                if (!existingAxis) {
+                    axes.push(tag); // Add new axis if no similar one exists
+                }
+            }
+        });
+        // Configure yAxes based on grouped axes
+        var yAxesConfig = axes.map(function (axis, index) {
+            return {
+                id: "y-axis-".concat(index),
+                type: "linear",
+                display: axis.visible,
+                scaleLabel: {
+                    display: true,
+                    labelString: axis.tagName
+                },
                 ticks: {
-                    // Customize tick behavior if needed
-                    autoSkip: true,
-                    maxTicksLimit: 20,
-                    callback: function (value, index, values) {
-                        // Extract the time and date from the current value
-                        var currentDate = new Date(value);
-                        var time = currentDate.toLocaleTimeString("en-US", {
-                            hour12: false,
-                            hour: "2-digit",
-                            minute: "2-digit",
-                            second: "2-digit"
-                        });
-                        var date = currentDate.toLocaleDateString("en-US", {
-                            month: "short",
-                            day: "numeric"
-                        });
-                        // For the first tick, return both date and time
-                        if (index === 0) {
-                            return [time, date];
-                        }
-                        // For subsequent ticks, compare the date with the previous tick
-                        var previousDate = new Date(values[index - 1].value);
-                        if (currentDate.getDate() !== previousDate.getDate() ||
-                            currentDate.getMonth() !== previousDate.getMonth() ||
-                            currentDate.getFullYear() !== previousDate.getFullYear()) {
-                            // If the date has changed, return both time and date
-                            return [time, date];
-                        }
-                        // If the date hasn't changed, return only the time
-                        return [time, ""];
-                    }
+                    min: axis.autoScale ? undefined : axis.minScale,
+                    max: axis.autoScale ? undefined : axis.maxScale
                 },
                 grid: {
                     display: true
-                }
-            },
-            y: {
-                grid: {
-                    display: true
-                }
-            }
-        },
-        plugins: {
-            tooltip: { enabled: false },
-            legend: { display: false },
-            zoom: {
-                zoom: {
-                    wheel: { enabled: true, mode: "x" },
-                    pinch: { enabled: true, mode: "x" },
-                    onZoom: handleZoom,
-                    mode: "x"
                 },
-                pan: {
-                    enabled: true,
-                    mode: "x",
-                    onPan: handlePan
-                }
-            }
-        }
-    }), chartOptions = _m[0], setChartOptions = _m[1];
-    useEffect(function () {
-        var fetchData = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var tagIds, response, series_1, axes_1, updatedSeries, error_1;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        _a.trys.push([0, 2, , 3]);
-                        console.log("fetching data");
-                        setLoading(true);
-                        tagIds = tagList.map(function (tag) { return tag.tagId; });
-                        return [4 /*yield*/, axios.post("/series?nodeName=null", {
-                                start: state.timeScopeStart.getTime(),
-                                end: state.timeScopeEnd.getTime(),
-                                tagIds: tagIds,
-                                sampleCount: 1000
-                            })];
-                    case 1:
-                        response = _a.sent();
-                        series_1 = response.data;
-                        axes_1 = [];
-                        tagList.forEach(function (tag, index) {
-                            if (tag.autoScale && series_1[index]) {
-                                var serieSamples = series_1[index].map(function (sample) { return sample.value; });
-                                var _a = calculateScales(Math.min.apply(Math, serieSamples), Math.max.apply(Math, serieSamples), 3), minScale = _a.minScale, maxScale = _a.maxScale;
-                                tag.minScale = minScale;
-                                tag.maxScale = maxScale;
+                afterUpdate: function (axis) {
+                    var chart = axis.chart;
+                    var keys = Object.keys(chart.scales).filter(function (sc) { return sc !== 'x'; });
+                    if (keys.length > 1) {
+                        for (var scaleKey in chart.scales) {
+                            var scale = chart.scales[scaleKey];
+                            if (scale.max === 1 && scale.min === 0) {
+                                chart.scales[scaleKey].display = false;
+                                chart.scales[scaleKey].options.display = false;
                             }
-                            var existingAxis = axes_1.find(function (existingTag) {
-                                return areRangesSimilar(existingTag, tag);
-                            });
-                            if (!existingAxis) {
-                                axes_1.push(tag); // Add new axis if no similar one exists
+                            else {
+                                chart.scales[scaleKey].display = true;
+                                chart.scales[scaleKey].options.display = true;
                             }
-                        });
-                        axes_1.map(function (axis, index) {
-                            return {
-                                id: "y-axis-".concat(index),
-                                type: "linear",
-                                display: axis.visible,
-                                scaleLabel: {
-                                    display: true,
-                                    labelString: axis.tagName
-                                },
-                                ticks: {
-                                    min: axis.autoScale ? undefined : axis.minScale,
-                                    max: axis.autoScale ? undefined : axis.maxScale
-                                },
-                                grid: {
-                                    display: true
-                                }
-                            };
-                        });
-                        setChartOptions(function (prevOptions) { return (__assign(__assign({}, prevOptions), { scales: __assign(__assign({}, prevOptions.scales), { y: { grid: { display: true } } }) })); });
-                        updatedSeries = series_1.map(function (serie, index) {
-                            var tag = tagList[index];
-                            var axisIndex = axes_1.findIndex(function (existingTag) {
-                                return areRangesSimilar(existingTag, tag);
-                            });
-                            return {
-                                yAxisID: "y-axis-".concat(axisIndex),
-                                data: serie.map(function (sample) { return ({
-                                    x: new Date(sample.timestamp),
-                                    y: sample.value
-                                }); }),
-                                tagId: tag.tagId,
-                                borderColor: tag.color,
-                                hidden: !tag.visible,
-                                pointRadius: serie.length <= 50 ? 3 : 0
-                            };
-                        });
-                        setChartShouldInitCursors(true);
-                        setChartData({
-                            labels: [],
-                            datasets: updatedSeries
-                        });
-                        setLoading(false);
-                        return [3 /*break*/, 3];
-                    case 2:
-                        error_1 = _a.sent();
-                        console.error("Error fetching data:", error_1);
-                        setError("Failed to fetch data");
-                        setLoading(false);
-                        return [3 /*break*/, 3];
-                    case 3: return [2 /*return*/];
+                        }
+                    }
                 }
+            };
+        });
+        setChartOptions(function (prevOptions) {
+            var newResp = (__assign(__assign({}, prevOptions), { scales: __assign({ x: __assign({}, prevOptions.scales.x) }, yAxesConfig.reduce(function (acc, cur) {
+                    var _a;
+                    return (__assign(__assign({}, acc), (_a = {}, _a[cur.id] = cur, _a)));
+                }, {})) }));
+            return newResp;
+        });
+        var updatedSeries = series.map(function (serie, index) {
+            var tag = tagList[index];
+            var axisIndex = axes.findIndex(function (existingTag) {
+                return areRangesSimilar(existingTag, tag);
             });
-        }); };
-        fetchData();
-    }, [JSON.stringify(state), tagList]);
-    useEffect(function () {
-        var changeOptions = function () {
-            // console.log("change options");
-            setChartOptions(function (prevOptions) { return (__assign(__assign({}, prevOptions), { elements: {
-                    line: {
-                        stepped: customOptions.stepped,
-                        lineTension: 0.1
-                    }
-                }, scales: __assign(__assign({}, prevOptions.scales), { x: __assign(__assign({}, prevOptions.scales.x), { grid: __assign(__assign({}, prevOptions.scales.x.grid), { display: customOptions.showGrid }) }), y: __assign(__assign({}, prevOptions.scales.y), { grid: __assign(__assign({}, prevOptions.scales.y.grid), { display: customOptions.showGrid }) }) }) })); });
-        };
-        changeOptions();
-    }, [customOptions]);
-    if (error)
-        return React__default.createElement("p", null,
-            "Error: ",
-            error);
-    useEffect(function () {
-        setChartOptions(function (prevOptions) { return (__assign(__assign({}, prevOptions), { scales: __assign(__assign({}, prevOptions.scales), { x: __assign(__assign({}, prevOptions.scales.x), { min: state.timeScopeStart.getTime(), max: state.timeScopeEnd.getTime() }) }) })); });
-    }, [state.timeScopeStart, state.timeScopeEnd]);
+            return {
+                yAxisID: axisIndex >= 0 ? "y-axis-".concat(axisIndex) : undefined,
+                data: serie.map(function (sample) { return ({
+                    x: new Date(sample.timestamp),
+                    y: sample.value
+                }); }),
+                tagId: tag.tagId,
+                borderColor: tag.color,
+                hidden: !tag.visible,
+                pointRadius: serie.length <= 50 ? 3 : 0
+            };
+        });
+        setChartShouldInitCursors(true);
+        setChartData({
+            labels: [],
+            datasets: updatedSeries
+        });
+    }, [JSON.stringify(state), tagList, series]);
     useEffect(function () {
         if (chartShouldInitCursors) {
             if (chartRef.current) {
@@ -9624,98 +9670,97 @@ var Trending = function (_a) {
             }
         }
     }, [chartShouldInitCursors, state]);
+    return (React__default.createElement(Paper$1, { style: { height: '100%', position: 'relative' } },
+        lineTabCoords && chartArea ? (React__default.createElement(DraggableLineControl, { color: 'red', chartArea: chartArea, initialLeft: lineTabCoords === null || lineTabCoords === void 0 ? void 0 : lineTabCoords.x1, onUpdate: function (newLeft) {
+                setLineTabCoords(function (prevCoords) {
+                    prevCoords.x1 = newLeft;
+                    return prevCoords;
+                });
+                // @ts-ignore
+                chartRef.current.mouseX = newLeft;
+                debouncedUpdateChart();
+            } })) : null,
+        lineTabCoords && chartArea ? (React__default.createElement(DraggableLineControl, { color: 'blue', initialLeft: lineTabCoords === null || lineTabCoords === void 0 ? void 0 : lineTabCoords.x2, chartArea: chartArea, onUpdate: function (newLeft) {
+                setLineTabCoords(function (prevCoords) {
+                    prevCoords.x2 = newLeft;
+                    return prevCoords;
+                });
+                // @ts-ignore
+                chartRef.current.secondLineX = newLeft;
+                debouncedUpdateChart();
+            } })) : null,
+        React__default.createElement(Line, { ref: chartRef, data: chartData, options: chartOptions, plugins: [verticalLinePlugin, xAxisDatePlugin, yAxisPlugin] })));
+};
+
+Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip$1, Legend, TimeScale, zoomPlugin);
+var Trending = function (_a) {
+    _a.title; var tags = _a.tags;
+    var _b = useTrendingContext(), state = _b.state; _b.actions;
+    var _c = useState(true), loading = _c[0], setLoading = _c[1];
+    var _d = useState(""), error = _d[0], setError = _d[1];
+    var _e = useState(tags), tagList = _e[0], setTagList = _e[1];
+    var _f = useState([]), series = _f[0], setSeries = _f[1];
+    var _g = useChartOptions(), chartOptions = _g[0], setChartOptions = _g[1];
+    var _h = useState({
+        labels: [],
+        datasets: []
+    }), chartData = _h[0], setChartData = _h[1];
+    var _j = useState(null), cursorData = _j[0], setCursorData = _j[1];
+    var debounceForFetchingData = useRef(null);
+    useEffect(function () {
+        if (debounceForFetchingData.current) {
+            clearTimeout(debounceForFetchingData.current);
+        }
+        debounceForFetchingData.current = setTimeout(function () {
+            var fetchData = function () { return __awaiter(void 0, void 0, void 0, function () {
+                var tagIds, response, error_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            _a.trys.push([0, 2, , 3]);
+                            console.log("fetching data");
+                            setLoading(true);
+                            tagIds = tagList.map(function (tag) { return tag.tagId; });
+                            return [4 /*yield*/, axios.post("/series?nodeName=null", {
+                                    start: state.timeScopeStart.getTime(),
+                                    end: state.timeScopeEnd.getTime(),
+                                    tagIds: tagIds,
+                                    sampleCount: 1000
+                                })];
+                        case 1:
+                            response = _a.sent();
+                            setSeries(response.data || []);
+                            setLoading(false);
+                            return [3 /*break*/, 3];
+                        case 2:
+                            error_1 = _a.sent();
+                            console.error("Error fetching data:", error_1);
+                            setError("Failed to fetch data");
+                            setLoading(false);
+                            return [3 /*break*/, 3];
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            }); };
+            fetchData();
+        }, 800);
+    }, [JSON.stringify(state), tagList]);
+    if (error)
+        return React__default.createElement("p", null,
+            "Error: ",
+            error);
     return (React__default.createElement(Grid$1, { container: true, style: { width: "95svw", height: "81svh", margin: 0 } },
-        React__default.createElement(Grid$1, { item: true, xs: 12, container: true, justifyContent: "space-between", alignItems: "center", style: { height: "15%" } },
-            React__default.createElement(Grid$1, { md: 5, item: true, container: true, justifyContent: "flex-start", alignItems: "center", spacing: 1, wrap: "wrap" },
-                React__default.createElement(IconButton$1, { color: "primary", onClick: function () { return handleDateNavigator("subtract"); }, className: classes.navigatorButton },
-                    React__default.createElement(ChevronLeft, { fontSize: "large" })),
-                React__default.createElement(Grid$1, { item: true },
-                    React__default.createElement(TextField, { type: "datetime-local", className: classes.datetimePicker, label: "Start", variant: "outlined", value: moment(state.timeScopeStart).format("YYYY-MM-DDTHH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "start"); }, InputLabelProps: {
-                            shrink: true,
-                            style: { marginLeft: "10px" }
-                        }, InputProps: {
-                            max: state.timeScopeEnd
-                        } })),
-                React__default.createElement(Grid$1, { item: true, className: classes.select },
-                    React__default.createElement(FormControl$1, { variant: "outlined" },
-                        React__default.createElement(Select$1, { value: state.scope, onChange: handleChangeScope, displayEmpty: true },
-                            React__default.createElement(MenuItem$1, { value: "10 min" }, "10 min"),
-                            React__default.createElement(MenuItem$1, { value: "1 hour" }, "1 hour"),
-                            React__default.createElement(MenuItem$1, { value: "4 hours" }, "4 hours"),
-                            React__default.createElement(MenuItem$1, { value: "12 hours" }, "12 hours"),
-                            React__default.createElement(MenuItem$1, { value: "1 day" }, "1 day"),
-                            React__default.createElement(MenuItem$1, { value: "10 days" }, "10 days"),
-                            React__default.createElement(MenuItem$1, { value: "custom" }, "Custom")))),
-                React__default.createElement(Grid$1, { item: true },
-                    React__default.createElement(TextField, { label: "End", variant: "outlined", className: classes.datetimePicker, type: "datetime-local", value: moment(state.timeScopeEnd).format("YYYY-MM-DDTHH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "end"); }, InputLabelProps: {
-                            shrink: true,
-                            style: { marginLeft: "10px" }
-                        } })),
-                React__default.createElement(IconButton$1, { color: "primary", onClick: function () { return handleDateNavigator("add"); }, className: classes.navigatorButton },
-                    React__default.createElement(ChevronRight, { fontSize: "large" }))),
-            React__default.createElement(Grid$1, { md: 7, item: true, container: true, justifyContent: "space-between" },
-                React__default.createElement(Grid$1, { item: true, container: true, wrap: "nowrap", spacing: 1 },
-                    React__default.createElement(Grid$1, { item: true, container: true },
-                        React__default.createElement(CustomOptionsComponent, { customOptions: customOptions, setCustomOptions: setCustomOptions }))))),
+        React__default.createElement(Header, { setChartOptions: setChartOptions }),
         React__default.createElement(Grid$1, { item: true, xs: 12, style: { height: '45%' } },
-            React__default.createElement(Paper$1, { style: { height: '100%', position: 'relative' } },
-                lineTabCoords && chartArea ? (React__default.createElement(DraggableLineControl, { color: 'red', chartArea: chartArea, initialLeft: lineTabCoords === null || lineTabCoords === void 0 ? void 0 : lineTabCoords.x1, onUpdate: function (newLeft) {
-                        setLineTabCoords(function (prevCoords) {
-                            prevCoords.x1 = newLeft;
-                            return prevCoords;
-                        });
-                        // @ts-ignore
-                        chartRef.current.mouseX = newLeft;
-                        debouncedUpdateChart();
-                    } })) : null,
-                lineTabCoords && chartArea ? (React__default.createElement(DraggableLineControl, { color: 'blue', initialLeft: lineTabCoords === null || lineTabCoords === void 0 ? void 0 : lineTabCoords.x2, chartArea: chartArea, onUpdate: function (newLeft) {
-                        setLineTabCoords(function (prevCoords) {
-                            prevCoords.x2 = newLeft;
-                            return prevCoords;
-                        });
-                        // @ts-ignore
-                        chartRef.current.secondLineX = newLeft;
-                        debouncedUpdateChart();
-                    } })) : null,
-                React__default.createElement(Line, { ref: chartRef, data: chartData, options: chartOptions, plugins: [verticalLinePlugin] }))),
+            React__default.createElement(TrendingChart, { setChartData: setChartData, series: series, tagList: tagList, chartOptions: chartOptions, setChartOptions: setChartOptions, chartData: chartData, setCursorData: setCursorData })),
         React__default.createElement(Grid$1, { item: true, xs: 12, style: { height: '40%', minWidth: "100%", paddingTop: "3rem" } },
-            React__default.createElement(TableComponent, { tagList: tagList, chartData: chartData, setTagList: setTagList, cursorData: cursorData, onDeleteTag: handleDeleteTag, onAddTag: handleAddTag })),
+            React__default.createElement(TableComponent, { tagList: tagList, chartData: chartData, setTagList: setTagList, cursorData: cursorData })),
         loading && (React__default.createElement(Grid$1, { item: true, xs: 12, style: { textAlign: 'center' } },
             React__default.createElement("p", null, "Loading...")))));
 };
 
-//tags
-var getTags = function (NodeName) { return __awaiter(void 0, void 0, void 0, function () {
-    var apiService, parameters, resp;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                apiService = new MESApiService();
-                parameters = [];
-                parameters.push({ name: "NodeName", value: NodeName });
-                return [4 /*yield*/, apiService.callV2("[mssql2022].[IH_100020].[dbo].[GetTagDirectChildren]", parameters)];
-            case 1:
-                resp = _a.sent();
-                return [2 /*return*/, resp];
-        }
-    });
-}); };
-
+// @flow
 var TrendingsIndex = function (props) {
-    React.useEffect(function () {
-        (function () { return __awaiter(void 0, void 0, void 0, function () {
-            var tags;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, getTags(null)];
-                    case 1:
-                        tags = _a.sent();
-                        console.log(tags);
-                        return [2 /*return*/];
-                }
-            });
-        }); })();
-    }, []);
     return (React.createElement(TrendingProvider, null,
         React.createElement(Box, { p: 3, style: { maxWidth: "100%" } },
             React.createElement(Paper, null,
@@ -9797,7 +9842,7 @@ var Navigation = function (_a) {
         };
     }, [params.toString()]);
     return (React__default.createElement("div", { className: "wrapper" },
-        React__default.createElement(Header, { showAreaSelector: showAreaSelector, navbarTitle: navbarTitle }),
+        React__default.createElement(Header$1, { showAreaSelector: showAreaSelector, navbarTitle: navbarTitle }),
         React__default.createElement(MESFMainContainer, null)));
 };
 
@@ -9960,3 +10005,4 @@ var areaSelector = /*#__PURE__*/Object.freeze({
 });
 
 export { Account, AssetProvider, AuthContext, AuthProvider, BarChartControl, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, ErrorModal, FetchError, FilterPanel, GenericPanel, GenericTable, GetCrewColor, GetShiftColor, HorizontalTextControl, IntegerFormatter, Login, Logout, LongFilterPanel, MESApiService, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, MesfModal, ModalTreeFilterControl, MultipleSelectorControl, NumberFormatter, NumericTextControl, SimplePasswordControl, SimpleSelectorControl, SimpleTextAreaControl, SimpleTextControl, TimeFormatter, TreePickerControl, TrendingsIndex, USER_LABELS, UTLSettingsProvider, UploadFileControl, UserProvider, axiosInstance, formatNumber, getCrewStyle, getError, getShiftStyle, getTokenFromLS, renewToken, useAssetContext, useToken, useUTLSettingsContext, useUserContext };
+//# sourceMappingURL=index.esm.js.map