@dexteel/mesf-core 4.5.3 → 4.5.4

package/CHANGELOG.md

@@ -1,4 +1,6 @@
 # CHANGELOG
+## 4.5.4
+ - Add arrows dates navigator
 ## 4.5.3
  - Use color picker in trendings
 ## 4.5.0

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { Typography, TextField, makeStyles as makeStyles$1, Button as Button$1, Grid as Grid$1, Dialog as Dialog$1, DialogTitle as DialogTitle$2, DialogContent as DialogContent$2, DialogContentText, DialogActions as DialogActions$2, FormHelperText, CircularProgress as CircularProgress$1, Badge, FormControlLabel, Checkbox, Snackbar as Snackbar$1, Paper as Paper$1, MenuItem as MenuItem$1, useTheme as useTheme$1, Tooltip, Box, FormControl as FormControl$1, Select as Select$1, createStyles as createStyles$1, List, ListItem, ListItemText } from '@material-ui/core';
+import { Typography, TextField, makeStyles as makeStyles$1, Button as Button$1, Grid as Grid$1, Dialog as Dialog$1, DialogTitle as DialogTitle$2, DialogContent as DialogContent$2, DialogContentText, DialogActions as DialogActions$2, FormHelperText, CircularProgress as CircularProgress$1, Badge, FormControlLabel, Checkbox, Snackbar as Snackbar$1, Paper as Paper$1, MenuItem as MenuItem$1, useTheme as useTheme$1, Tooltip, Box, 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 } from 'lodash-es';
 import * as React from 'react';
 import React__default, { useState, useRef, useEffect, Component, createContext, useContext, useMemo, useCallback, lazy, Suspense } from 'react';
@@ -20,6 +20,7 @@ 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';
@@ -68,7 +69,6 @@ import 'ag-grid-enterprise/styles/ag-theme-balham.min.css';
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
 import { isAncestor, Tree } from '@minoru/react-dnd-treeview';
-import { ArrowRight } from '@material-ui/icons';
 import ImageIcon from '@material-ui/icons/Image';
 import ListAltIcon from '@material-ui/icons/ListAlt';
 import DescriptionIcon from '@material-ui/icons/Description';
@@ -8686,6 +8686,13 @@ var TrendingsReducer = createSlice({
     reducers: {
         setTotalScope: function (state, _a) {
             var payload = _a.payload; _a.type;
+            if (!isNil$1(payload.start) && !isNil$1(payload.end) && !isNil$1(payload.scope)) {
+                //from arrow navigators
+                state.timeScopeStart = payload.start;
+                state.timeScopeEnd = payload.end;
+                state.scope = payload.scope;
+                return;
+            }
             if (!isNil$1(payload.scope)) {
                 if (payload.scope !== "custom") {
                     switch (payload.scope) {
@@ -8724,7 +8731,7 @@ var TrendingsReducer = createSlice({
                 state.scope = payload.scope;
                 return;
             }
-            if (!isNil$1(payload.start) && !isNil$1(payload.end)) {
+            if (!isNil$1(payload.start) && !isNil$1(payload.end) && isNil$1(payload.scope)) {
                 // from graph
                 state.timeScopeStart = payload.start;
                 state.timeScopeEnd = payload.end;
@@ -8875,6 +8882,11 @@ var useTrendingStyles = makeStyles$1(function (theme) { return ({
         '& input[type="checkbox"]': {
             zoom: 1.5
         }
+    },
+    navigatorButton: {
+        "& .MuiSvgIcon-root": {
+            cursor: "pointer !important"
+        }
     }
 }); });
 
@@ -8898,6 +8910,17 @@ 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 };
+    }
+};
+
 Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip$1, Legend, TimeScale, zoomPlugin);
 function getVerticalLinePlugin(setCursorData) {
     return {
@@ -9011,6 +9034,12 @@ var Trending = function (_a) {
             });
         }
     };
+    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 _j = useState({
         animation: {
             duration: 0
@@ -9026,7 +9055,6 @@ var Trending = function (_a) {
                     maxTicksLimit: 20,
                     callback: function (value, index, values) {
                         // Extract the time and date from the current value
-                        console.log("VALUE", value);
                         var currentDate = new Date(value);
                         var time = currentDate.toLocaleTimeString("en-US", {
                             hour12: false,
@@ -9234,6 +9262,8 @@ var Trending = function (_a) {
     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,
@@ -9255,7 +9285,9 @@ var Trending = function (_a) {
                     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 },

package/dist/pages/trendings/components/chart/context/TrendingContext.d.ts

@@ -23,6 +23,10 @@ export declare const useTrendingContext: () => {
                 scope?: import("../models/scopes.model").scopeType | undefined;
                 start?: Date | undefined;
                 end: Date;
+            } | {
+                scope: import("../models/scopes.model").scopeType;
+                start: Date;
+                end: Date;
             };
             type: string;
         }): void;

package/dist/pages/trendings/components/chart/styles/TrendingStyles.d.ts

@@ -1 +1 @@
-export declare const useTrendingStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"datetimePicker" | "select" | "labelOptions">;
+export declare const useTrendingStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"datetimePicker" | "select" | "labelOptions" | "navigatorButton">;

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

@@ -0,0 +1,5 @@
+import { scopeType } from "../models/scopes.model";
+export declare const dateNavigator: (startDate: Date, endDate: Date, scope: scopeType, operator: "add" | "subtract") => {
+    newStartDate: Date;
+    newEndDate: Date;
+} | undefined;

package/dist/pages/trendings/reducers/trendings.reducer.d.ts

@@ -21,6 +21,10 @@ export declare const TrendingsReducer: import("@reduxjs/toolkit").Slice<{
             scope?: scopeType;
             start?: Date;
             end: Date;
+        } | {
+            scope: scopeType;
+            start: Date;
+            end: Date;
         };
         type: string;
     }): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dexteel/mesf-core",
-  "version": "4.5.3",
+  "version": "4.5.4",
   "author": "Dexteel Team",
   "module": "dist/index.esm.js",
   "typings": "dist/index.d.ts",