@dexteel/mesf-core 4.5.2 → 4.5.4

package/CHANGELOG.md

@@ -1,4 +1,8 @@
 # CHANGELOG
+## 4.5.4
+ - Add arrows dates navigator
+## 4.5.3
+ - Use color picker in trendings
 ## 4.5.0
  - Use inputs in `/trendings`
 ## 4.4.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';
@@ -29,6 +30,7 @@ import { Alert as Alert$3, TreeView as TreeView$1, TreeItem as TreeItem$1 } from
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import FolderIcon from '@material-ui/icons/Folder';
 import InsertDriveFileIcon from '@material-ui/icons/InsertDriveFile';
+import Popover from '@material-ui/core/Popover';
 import PersonPinCircleIcon from '@material-ui/icons/PersonPinCircle';
 import PropTypes from 'prop-types';
 import { ResponsiveBar } from '@nivo/bar';
@@ -67,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';
@@ -8291,16 +8292,21 @@ var css$1 = "/* ContextMenu.css */\n.context-menu {\n    position: absolute;\n
 n(css$1,{});
 
 var tagColors = [
-    "#2E4053",
-    "#5D6D7E",
-    "#85929E",
-    "#A93226",
-    "#CD6155",
-    "#2ECC71",
-    "#58D68D",
-    "#239B56",
-    "#7D3C98",
-    "#C39BD3", // Lavanda
+    "#5eaf60",
+    "green",
+    "#62bd9c",
+    "#53a285",
+    "#add8e6",
+    "#3280ba",
+    "blue",
+    "#5293c5",
+    "#3d556f",
+    "#a362bf",
+    "#dab0d8",
+    "black",
+    "#e74b3c",
+    "red",
+    "#bf3b2c", // dark red
 ];
 
 var TagSelectionModal = function (_a) {
@@ -8449,6 +8455,59 @@ var TagSelectionModal = function (_a) {
             React__default.createElement(CircularProgress$1, { size: "2rem" }))) : (React__default.createElement(TreeView$1, { expanded: expanded, onNodeSelect: handleNodeSelect, onNodeToggle: handleNodeToggle }, treeData.map(function (tree) { return renderTree(tree); }))))));
 };
 
+var useTagColorsStyles = makeStyles$1({
+    swatch: {
+        width: '25px',
+        height: '25px',
+        display: 'inline-block',
+        margin: '2px',
+        borderRadius: '4px',
+        cursor: 'pointer'
+    },
+    popover: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        padding: '10px',
+        maxWidth: '165px'
+    }
+});
+
+var Swatch = function (_a) {
+    var color = _a.color, onSelect = _a.onSelect;
+    var classes = useTagColorsStyles();
+    return (React__default.createElement("div", { className: classes.swatch, style: { backgroundColor: color }, onClick: function () { return onSelect(color); } }));
+};
+var ColorPicker = function (_a) {
+    var onChange = _a.onChange, color = _a.color, elementId = _a.elementId;
+    var classes = useTagColorsStyles();
+    var _b = useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
+    var handleClick = function (event) {
+        setAnchorEl(event.currentTarget);
+    };
+    var handleClose = function () {
+        setAnchorEl(null);
+    };
+    var open = Boolean(anchorEl);
+    var id = open ? 'simple-popover' : undefined;
+    return (React__default.createElement("div", null,
+        React__default.createElement(Button, { "aria-describedby": id, variant: "outlined", onClick: handleClick, style: {
+                backgroundColor: color,
+                width: '20px',
+                height: '20px',
+                minWidth: '20px',
+                padding: 0,
+                margin: '4px'
+            } }),
+        React__default.createElement(Popover, { id: id, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: {
+                vertical: 'bottom',
+                horizontal: 'left'
+            } },
+            React__default.createElement("div", { className: classes.popover }, tagColors.map(function (color) { return (React__default.createElement(Swatch, { key: color, color: color, onSelect: function (color) {
+                    onChange(elementId, color);
+                    handleClose();
+                } })); })))));
+};
+
 var useTagsTableStyles = makeStyles$1(function (theme) { return ({
     checkbox: {
         '& input[type="checkbox"]': {
@@ -8473,6 +8532,9 @@ var TableComponent = function (_a) {
     var handleAutoScaleChange = function (index, value) {
         setTagList(function (prev) { return prev.map(function (tag, currentIndex) { return currentIndex === index ? __assign(__assign({}, tag), { autoScale: value }) : tag; }); });
     };
+    var handleColorChange = function (tagId, value) {
+        setTagList(function (prev) { return prev.map(function (tag) { return tag.tagId === tagId ? __assign(__assign({}, tag), { color: value }) : tag; }); });
+    };
     var _b = useState(null), selectedRowIndex = _b[0], setSelectedRowIndex = _b[1];
     var _c = useState(false), modalOpen = _c[0], setModalOpen = _c[1];
     var handleOpen = function () { return setModalOpen(true); };
@@ -8572,11 +8634,7 @@ var TableComponent = function (_a) {
                             React__default.createElement(Tooltip, { title: tag.tagName, placement: "top", arrow: true, interactive: true, enterDelay: 500 },
                                 React__default.createElement("div", { style: cellStyles.tagName }, tag.tagName))),
                         React__default.createElement("td", { style: headerStyles.color },
-                            React__default.createElement("div", { style: {
-                                    backgroundColor: tag.color,
-                                    width: '20px',
-                                    height: '20px'
-                                } })),
+                            React__default.createElement(ColorPicker, { onChange: handleColorChange, color: tag.color, elementId: tag.tagId })),
                         React__default.createElement("td", null,
                             React__default.createElement("input", { type: "text", style: { width: '100%' }, value: tag.minScale, onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
                                     var value = e.target.value;
@@ -8628,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) {
@@ -8666,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;
@@ -8817,6 +8882,11 @@ var useTrendingStyles = makeStyles$1(function (theme) { return ({
         '& input[type="checkbox"]': {
             zoom: 1.5
         }
+    },
+    navigatorButton: {
+        "& .MuiSvgIcon-root": {
+            cursor: "pointer !important"
+        }
     }
 }); });
 
@@ -8840,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 {
@@ -8953,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
@@ -8968,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,
@@ -9176,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,
@@ -9197,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/TableComponent.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { CursorData, TagList } from './Trending';
 import './ContextMenu.css';
+import { CursorData, TagList } from './Trending';
 interface TableComponentProps {
     tagList: TagList;
     setTagList: React.Dispatch<React.SetStateAction<TagList>>;

package/dist/pages/trendings/components/chart/components/ColorPicker.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface Props {
+    onChange: Function;
+    color: string;
+    elementId?: number;
+}
+declare const ColorPicker: ({ onChange, color, elementId }: Props) => React.JSX.Element;
+export default ColorPicker;

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/TagColorsStyles.d.ts

@@ -0,0 +1 @@
+export declare const useTagColorsStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"swatch" | "popover">;

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.2",
+  "version": "4.5.4",
   "author": "Dexteel Team",
   "module": "dist/index.esm.js",
   "typings": "dist/index.d.ts",