@dexteel/mesf-core 4.5.8 → 4.5.9

package/CHANGELOG.md

@@ -1,4 +1,6 @@
 # CHANGELOG
+## 4.5.9
+- Add date to X Axis when day changes
 ## 4.5.8
 - Fix table data in Trendings
 - Fix cursors

package/dist/index.esm.js

@@ -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() }];
@@ -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);
@@ -9241,7 +9238,7 @@ var CustomOptionsComponent = function (_a) {
 };
 
 var useGetVerticalLinePlugin = function (setChartArea, setCoords) {
-    return {
+    var chartPlugin = {
         id: "verticalLinePlugin",
         afterUpdate: function (chart) {
             if (chart.chartArea) {
@@ -9267,6 +9264,7 @@ var useGetVerticalLinePlugin = function (setChartArea, setCoords) {
             setCoords({ x1: x1, x2: x2 });
         }
     };
+    return chartPlugin;
 };
 
 var getValuesAtCursor = function (chart, timeAtCursor) {
@@ -9302,6 +9300,52 @@ var updateCursorData = function (chart, setCursorData) {
     });
 };
 
+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 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 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
@@ -9363,6 +9407,7 @@ var Trending = function (_a) {
         datasets: []
     }), chartData = _k[0], setChartData = _k[1];
     var verticalLinePlugin = useGetVerticalLinePlugin(setChartArea, setLineTabCoords);
+    var xAxisDatePlugin = useXAxisDatePlugin();
     var _l = useState({
         showGrid: true,
         stepped: false
@@ -9448,36 +9493,18 @@ var Trending = function (_a) {
             x: {
                 type: "time",
                 ticks: {
-                    // Customize tick behavior if needed
                     autoSkip: true,
                     maxTicksLimit: 20,
-                    callback: function (value, index, values) {
-                        // Extract the time and date from the current value
+                    callback: function (value, index, ticks) {
                         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
+                        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];
                         }
-                        // 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, ""];
+                        // De lo contrario, solo muestra la hora
+                        return time;
                     }
                 },
                 grid: {
@@ -9677,45 +9704,15 @@ var Trending = function (_a) {
                         chartRef.current.secondLineX = newLeft;
                         debouncedUpdateChart();
                     } })) : null,
-                React__default.createElement(Line, { ref: chartRef, data: chartData, options: chartOptions, plugins: [verticalLinePlugin] }))),
+                React__default.createElement(Line, { ref: chartRef, data: chartData, options: chartOptions, plugins: [verticalLinePlugin, xAxisDatePlugin] }))),
         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 })),
         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,

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

@@ -0,0 +1,2 @@
+import { Plugin } from 'chart.js';
+export declare const useXAxisDatePlugin: () => Plugin;

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

@@ -0,0 +1,4 @@
+export declare const formatDateTimeToString: (date: Date) => {
+    formattedDate: string;
+    formattedTime: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dexteel/mesf-core",
-  "version": "4.5.8",
+  "version": "4.5.9",
   "author": "Dexteel Team",
   "module": "dist/index.esm.js",
   "typings": "dist/index.d.ts",
@@ -99,6 +99,7 @@
     "chart.js": "^4.4.1",
     "chartjs-adapter-moment": "^1.0.1",
     "chartjs-plugin-zoom": "^2.0.1",
+    "cross-env": "^7.0.3",
     "lodash-es": "^4.17.21",
     "react-chartjs-2": "^5.2.0",
     "react-dnd": "^16.0.1",