diff --git a/app/components/home/menu/index.jsx b/app/components/home/menu/index.jsx index 46554452..7cd0b4b0 100644 --- a/app/components/home/menu/index.jsx +++ b/app/components/home/menu/index.jsx @@ -6,10 +6,7 @@ import { observer } from 'mobx-react-lite'; // import local files import Button from '../../ui/button'; - -// import icons -import FaPlus from '../../icons/faPlus'; -import FaReload from '../../icons/faReload'; +import { FaPlus, IoReload } from '../../icons'; import MenuLayoutDropdown from './layout'; import MenuStatusDropdown from './status'; import SearchBar from '../../ui/searchBar'; @@ -30,7 +27,7 @@ const HomeMenu = ({ handleReset, search, setSearch }) => {
+ {dropdownItems} diff --git a/app/components/home/menu/mobile.jsx b/app/components/home/menu/mobile.jsx index f378910c..612425ac 100644 --- a/app/components/home/menu/mobile.jsx +++ b/app/components/home/menu/mobile.jsx @@ -23,7 +23,7 @@ const HomeMenuMobile = ({ handleReset }) => { toggleDropdown={toggleDropdown} style={{ height: '45px' }} > - + , + icon: , }, { text: 'Up', id: 'up', - icon: , + icon: , }, { text: 'Down', id: 'down', - icon: , + icon: , }, ]; @@ -54,7 +50,11 @@ const MenuStatusDropdown = () => { id="home-menu-status" > - diff --git a/app/components/home/monitor/options.jsx b/app/components/home/monitor/options.jsx index f4b5b2c4..0e1aa23d 100644 --- a/app/components/home/monitor/options.jsx +++ b/app/components/home/monitor/options.jsx @@ -8,12 +8,10 @@ import { toast } from 'react-toastify'; import MonitorModal from '../../modal/monitor/delete'; import Dropdown from '../../ui/dropdown/index'; import useContextStore from '../../../context'; -import { createGetRequest } from '../../../services/axios'; - -// import icons -import FaEllipsisVertical from '../../icons/faEllipsisVertical'; import useDropdown from '../../../hooks/useDropdown'; +import { createGetRequest } from '../../../services/axios'; import MonitorConfigureModal from '../../modal/monitor/configure'; +import { FaEllipsisVertical } from '../../icons'; const MonitorOptions = ({ monitorId }) => { const { @@ -77,7 +75,7 @@ const MonitorOptions = ({ monitorId }) => { toggleDropdown={toggleDropdown} > - + Open diff --git a/app/components/icons/bsTable.jsx b/app/components/icons/bsTable.jsx deleted file mode 100644 index 40bb34eb..00000000 --- a/app/components/icons/bsTable.jsx +++ /dev/null @@ -1,25 +0,0 @@ -// import dependencies -import PropTypes from 'prop-types'; - -const BsTable = ({ width, height }) => ( - - - -); - -BsTable.displayName = 'BsTable'; - -BsTable.propTypes = { - width: PropTypes.number, - height: PropTypes.number, -}; - -export default BsTable; diff --git a/app/components/icons/faCheck.jsx b/app/components/icons/faCheck.jsx deleted file mode 100644 index f3d24ff0..00000000 --- a/app/components/icons/faCheck.jsx +++ /dev/null @@ -1,25 +0,0 @@ -// import dependencies -import PropTypes from 'prop-types'; - -const FaCheck = ({ width = 25, height = 25 }) => ( - - - -); - -FaCheck.displayName = 'FaCheck'; - -FaCheck.propTypes = { - width: PropTypes.number, - height: PropTypes.number, -}; - -export default FaCheck; diff --git a/app/components/icons/faChevronDown.jsx b/app/components/icons/faChevronDown.jsx deleted file mode 100644 index c641e7b7..00000000 --- a/app/components/icons/faChevronDown.jsx +++ /dev/null @@ -1,25 +0,0 @@ -// import dependencies -import PropTypes from 'prop-types'; - -const FaChevronDown = ({ width = 25, height = 25 }) => ( - - - -); - -FaChevronDown.displayName = 'FaChevronDown'; - -FaChevronDown.propTypes = { - width: PropTypes.number, - height: PropTypes.number, -}; - -export default FaChevronDown; diff --git a/app/components/icons/faChevronLeft.jsx b/app/components/icons/faChevronLeft.jsx deleted file mode 100644 index 290bc7ac..00000000 --- a/app/components/icons/faChevronLeft.jsx +++ /dev/null @@ -1,25 +0,0 @@ -// import dependencies -import PropTypes from 'prop-types'; - -const FaChevronLeft = ({ width = 25, height = 25 }) => ( - - - -); - -FaChevronLeft.displayName = 'FaChevronLeft'; - -FaChevronLeft.propTypes = { - width: PropTypes.number, - height: PropTypes.number, -}; - -export default FaChevronLeft; diff --git a/app/components/icons/faChevronRight.jsx b/app/components/icons/faChevronRight.jsx deleted file mode 100644 index 18bc3a9d..00000000 --- a/app/components/icons/faChevronRight.jsx +++ /dev/null @@ -1,25 +0,0 @@ -// import dependencies -import PropTypes from 'prop-types'; - -const FaChevronRight = ({ width = 25, height = 25 }) => ( - - - -); - -FaChevronRight.displayName = 'FaChevronRight'; - -FaChevronRight.propTypes = { - width: PropTypes.number, - height: PropTypes.number, -}; - -export default FaChevronRight; diff --git a/app/components/icons/faChevronUp.jsx b/app/components/icons/faChevronUp.jsx deleted file mode 100644 index f21318a3..00000000 --- a/app/components/icons/faChevronUp.jsx +++ /dev/null @@ -1,25 +0,0 @@ -// import dependencies -import PropTypes from 'prop-types'; - -const FaChevronUp = ({ width = 25, height = 25 }) => ( - - - -); - -FaChevronUp.displayName = 'FaChevronUp'; - -FaChevronUp.propTypes = { - width: PropTypes.number, - height: PropTypes.number, -}; - -export default FaChevronUp; diff --git a/app/components/icons/faCircleCheck.jsx b/app/components/icons/faCircleCheck.jsx deleted file mode 100644 index fb546b78..00000000 --- a/app/components/icons/faCircleCheck.jsx +++ /dev/null @@ -1,30 +0,0 @@ -// import dependencies -import PropTypes from 'prop-types'; - -const FaCircleCheck = ({ height, width, checkColor = 'white' }) => ( - - - - -); - -FaCircleCheck.displayName = 'FaCircleCheck'; - -FaCircleCheck.propTypes = { - width: PropTypes.number, - height: PropTypes.number, - checkColor: PropTypes.string, -}; - -export default FaCircleCheck; diff --git a/app/components/icons/faClose.jsx b/app/components/icons/faClose.jsx deleted file mode 100644 index 0c1b56f9..00000000 --- a/app/components/icons/faClose.jsx +++ /dev/null @@ -1,25 +0,0 @@ -// import dependencies -import PropTypes from 'prop-types'; - -const FaClose = ({ width = 25, height = 25 }) => ( - - - -); - -FaClose.displayName = 'FaClose'; - -FaClose.propTypes = { - width: PropTypes.number, - height: PropTypes.number, -}; - -export default FaClose; diff --git a/app/components/icons/faCog.jsx b/app/components/icons/faCog.jsx deleted file mode 100644 index 5c04ede9..00000000 --- a/app/components/icons/faCog.jsx +++ /dev/null @@ -1,25 +0,0 @@ -// import dependencies -import PropTypes from 'prop-types'; - -const FaCog = ({ width = 25, height = 25 }) => ( - - - -); - -FaCog.displayName = 'FaCog'; - -FaCog.propTypes = { - width: PropTypes.number, - height: PropTypes.number, -}; - -export default FaCog; diff --git a/app/components/icons/faEllipsisVertical.jsx b/app/components/icons/faEllipsisVertical.jsx deleted file mode 100644 index 93674d18..00000000 --- a/app/components/icons/faEllipsisVertical.jsx +++ /dev/null @@ -1,27 +0,0 @@ -// import dependencies -import PropTypes from 'prop-types'; - -const FaEllipsisVertical = ({ width = 25, height = 25 }) => { - return ( - - - - ); -}; - -FaEllipsisVertical.displayName = 'FaEllipsisVertical'; - -FaEllipsisVertical.propTypes = { - width: PropTypes.number, - height: PropTypes.number, -}; - -export default FaEllipsisVertical; diff --git a/app/components/icons/faHome.jsx b/app/components/icons/faHome.jsx deleted file mode 100644 index 94352a60..00000000 --- a/app/components/icons/faHome.jsx +++ /dev/null @@ -1,27 +0,0 @@ -// import dependencies -import PropTypes from 'prop-types'; - -const FaHome = ({ width= 25, height= 25 }) => { - return ( - - - - ); -}; - -FaHome.displayName = 'FaHome'; - -FaHome.propTypes = { - width: PropTypes.number, - height: PropTypes.number, -}; - -export default FaHome; diff --git a/app/components/icons/faPlus.jsx b/app/components/icons/faPlus.jsx deleted file mode 100644 index 29ee52d3..00000000 --- a/app/components/icons/faPlus.jsx +++ /dev/null @@ -1,25 +0,0 @@ -// import dependencies -import PropTypes from 'prop-types'; - -const FaPlus = ({ width = 25, height = 25 }) => ( - - - -); - -FaPlus.displayName = 'FaPlus'; - -FaPlus.propTypes = { - width: PropTypes.number, - height: PropTypes.number, -}; - -export default FaPlus; diff --git a/app/components/icons/faReload.jsx b/app/components/icons/faReload.jsx deleted file mode 100644 index 8e57105b..00000000 --- a/app/components/icons/faReload.jsx +++ /dev/null @@ -1,30 +0,0 @@ -// import dependencies -import PropTypes from 'prop-types'; - -const FaReload = ({ height = 25, width = 25 }) => ( - - - -); - -FaReload.displayName = 'FaReload'; - -FaReload.propTypes = { - height: PropTypes.number, - width: PropTypes.number, -}; - -export default FaReload; diff --git a/app/components/icons/faSignOutAlt.jsx b/app/components/icons/faSignOutAlt.jsx deleted file mode 100644 index e4f01601..00000000 --- a/app/components/icons/faSignOutAlt.jsx +++ /dev/null @@ -1,25 +0,0 @@ -// import dependencies -import PropTypes from 'prop-types'; - -const FaSignOutAlt = ({ width = 25, height = 25 }) => ( - - - -); - -FaSignOutAlt.displayName = 'FaSignOutAlt'; - -FaSignOutAlt.propTypes = { - width: PropTypes.number, - height: PropTypes.number, -}; - -export default FaSignOutAlt; diff --git a/app/components/icons/faTrash.jsx b/app/components/icons/faTrash.jsx deleted file mode 100644 index af6287fc..00000000 --- a/app/components/icons/faTrash.jsx +++ /dev/null @@ -1,25 +0,0 @@ -// import dependencies -import PropTypes from 'prop-types'; - -const FaTrash = ({ width = 25, height = 25 }) => ( - - - -); - -FaTrash.displayName = 'FaTrash'; - -FaTrash.propTypes = { - width: PropTypes.number, - height: PropTypes.number, -}; - -export default FaTrash; diff --git a/app/components/icons/faUserCircle.jsx b/app/components/icons/faUserCircle.jsx deleted file mode 100644 index da54c56d..00000000 --- a/app/components/icons/faUserCircle.jsx +++ /dev/null @@ -1,25 +0,0 @@ -// import dependencies -import PropTypes from 'prop-types'; - -const FaUserCircle = ({ width = 25, height = 25 }) => ( - - - -); - -FaUserCircle.displayName = 'FaUserCircle'; - -FaUserCircle.propTypes = { - width: PropTypes.number, - height: PropTypes.number, -}; - -export default FaUserCircle; diff --git a/app/components/icons/faUsers.jsx b/app/components/icons/faUsers.jsx deleted file mode 100644 index 7dead359..00000000 --- a/app/components/icons/faUsers.jsx +++ /dev/null @@ -1,25 +0,0 @@ -// import dependencies -import PropTypes from 'prop-types'; - -const FaUsers = ({ height = 25, width = 25 }) => ( - - - -); - -FaUsers.displayName = 'FaUsers'; - -FaUsers.propTypes = { - width: PropTypes.number, - height: PropTypes.number, -}; - -export default FaUsers; diff --git a/app/components/icons/fiLayout.jsx b/app/components/icons/fiLayout.jsx deleted file mode 100644 index 1c02152c..00000000 --- a/app/components/icons/fiLayout.jsx +++ /dev/null @@ -1,29 +0,0 @@ -// import dependencies -import PropTypes from 'prop-types'; - -const FiLayout = ({ height = 20, width = 20 }) => ( - - - - - -); - -FiLayout.displayName = 'FiLayout'; - -FiLayout.propTypes = { - width: PropTypes.number, - height: PropTypes.number, -}; - -export default FiLayout; diff --git a/app/components/icons/hiStatusOffline.jsx b/app/components/icons/hiStatusOffline.jsx deleted file mode 100644 index 0103ebaf..00000000 --- a/app/components/icons/hiStatusOffline.jsx +++ /dev/null @@ -1,30 +0,0 @@ -// import dependencies -import PropTypes from 'prop-types'; - -const HiStatusOffline = ({ height = 25, width = 25 }) => ( - -); - -HiStatusOffline.displayName = 'HiStatusOffline'; - -HiStatusOffline.propTypes = { - height: PropTypes.number, - width: PropTypes.number, -}; - -export default HiStatusOffline; diff --git a/app/components/icons/hiStatusOnline.jsx b/app/components/icons/hiStatusOnline.jsx deleted file mode 100644 index 5511b88c..00000000 --- a/app/components/icons/hiStatusOnline.jsx +++ /dev/null @@ -1,30 +0,0 @@ -// import dependencies -import PropTypes from 'prop-types'; - -const HiStatusOnline = ({ height = 25, width = 25 }) => ( - -); - -HiStatusOnline.displayName = 'HiStatusOnline'; - -HiStatusOnline.propTypes = { - height: PropTypes.number, - width: PropTypes.number, -}; - -export default HiStatusOnline; diff --git a/app/components/icons/index.jsx b/app/components/icons/index.jsx index c2f6d61d..0dd568ef 100644 --- a/app/components/icons/index.jsx +++ b/app/components/icons/index.jsx @@ -1,63 +1,61 @@ -import BsTable from './bsTable'; -import FaCheck from './faCheck'; -import FaChevronDown from './faChevronDown'; -import FaChevronLeft from './faChevronLeft'; -import FaChevronRight from './faChevronRight'; -import FaChevronUp from './faChevronUp'; -import FaCircleCheck from './faCircleCheck'; -import FaUserCircle from './faUserCircle'; -import FaClose from './faClose'; -import FaCog from './faCog'; -import FaEllipsisVertical from './faEllipsisVertical'; -import FaHome from './faHome'; -import FaPlus from './faPlus'; -import FaReload from './faReload'; -import FaSignOutAlt from './faSignOutAlt'; -import FaTrash from './faTrash'; -import FiLayout from './fiLayout'; -import HiStatusOffline from './hiStatusOffline'; -import HiStatusOnline from './hiStatusOnline'; -import IoArrowBack from './ioArrowBack'; -import IoColorPalette from './ioColorPalette'; -import IoGrid from './ioGrid'; -import LiaSyncSolid from './liaSyncSolid'; -import MdEdit from './mdEdit'; -import MdErrorOutline from './mdErrorOutline'; -import MdEye from './mdEye'; -import MdEyeOff from './mdEyeOff'; -import MdHelpCircle from './mdHelpCircle'; -import PiListFill from './piListFill'; +import { BsTable } from 'react-icons/bs'; +import { + FaChevronDown, + FaChevronLeft, + FaChevronRight, + FaChevronUp, + FaUserCircle, + FaCog, + FaHome, + FaPlus, + FaSignOutAlt, + FaUsers, +} from 'react-icons/fa'; +import { FiLayout } from 'react-icons/fi'; +import { HiStatusOffline, HiStatusOnline } from 'react-icons/hi'; +import { IoMdEyeOff, IoMdEye, IoMdClose, IoMdHelpCircle } from 'react-icons/io'; +import { LiaSyncSolid } from 'react-icons/lia'; +import { MdEdit, MdErrorOutline } from 'react-icons/md'; +import { + FaCircleCheck, + FaEllipsisVertical, + FaCheck, + FaBars, + FaTrashCan, +} from 'react-icons/fa6'; +import { IoArrowBack, IoColorPalette, IoGrid, IoReload } from 'react-icons/io5'; import StatusLogo from './statusLogo'; export { BsTable, + FaBars, FaCheck, FaChevronDown, FaChevronLeft, FaChevronRight, - FaCircleCheck, FaChevronUp, - FaUserCircle, - FaClose, + FaCircleCheck, FaCog, FaEllipsisVertical, FaHome, FaPlus, - FaReload, FaSignOutAlt, - FaTrash, + FaTrashCan, + FaUserCircle, + FaUsers, FiLayout, HiStatusOffline, HiStatusOnline, IoArrowBack, IoColorPalette, IoGrid, + IoMdClose, + IoMdEye, + IoMdEyeOff, + IoMdHelpCircle, + IoReload, LiaSyncSolid, MdEdit, MdErrorOutline, - MdEye, - MdEyeOff, - MdHelpCircle, - PiListFill, StatusLogo, }; diff --git a/app/components/icons/ioArrowBack.jsx b/app/components/icons/ioArrowBack.jsx deleted file mode 100644 index f4e41966..00000000 --- a/app/components/icons/ioArrowBack.jsx +++ /dev/null @@ -1,31 +0,0 @@ -// import dependencies -import PropTypes from 'prop-types'; - -const IoArrowBack = ({ height = 25, width = 25 }) => ( - - - -); - -IoArrowBack.displayName = 'IoArrowBack'; - -IoArrowBack.propTypes = { - height: PropTypes.number, - width: PropTypes.number, -}; - -export default IoArrowBack; diff --git a/app/components/icons/ioColorPalette.jsx b/app/components/icons/ioColorPalette.jsx deleted file mode 100644 index bf653958..00000000 --- a/app/components/icons/ioColorPalette.jsx +++ /dev/null @@ -1,25 +0,0 @@ -// import dependencies -import PropTypes from 'prop-types'; - -const IoColorPalette = ({ height = 25, width = 25 }) => ( - - - -); - -IoColorPalette.displayName = 'IoColorPalette'; - -IoColorPalette.propTypes = { - height: PropTypes.number, - width: PropTypes.number, -}; - -export default IoColorPalette; diff --git a/app/components/icons/ioGrid.jsx b/app/components/icons/ioGrid.jsx deleted file mode 100644 index f84a7ff3..00000000 --- a/app/components/icons/ioGrid.jsx +++ /dev/null @@ -1,25 +0,0 @@ -// import dependencies -import PropTypes from 'prop-types'; - -const IoGrid = ({ height, width }) => ( - - - -); - -IoGrid.displayName = 'IoGrid'; - -IoGrid.propTypes = { - width: PropTypes.number, - height: PropTypes.number, -}; - -export default IoGrid; diff --git a/app/components/icons/liaSyncSolid.jsx b/app/components/icons/liaSyncSolid.jsx deleted file mode 100644 index 07039417..00000000 --- a/app/components/icons/liaSyncSolid.jsx +++ /dev/null @@ -1,25 +0,0 @@ -// import dependencies -import PropTypes from 'prop-types'; - -const LiaSyncSolid = ({ height, width }) => ( - - - -); - -LiaSyncSolid.displayName = 'LiaSyncSolid'; - -LiaSyncSolid.propTypes = { - width: PropTypes.number, - height: PropTypes.number, -}; - -export default LiaSyncSolid; diff --git a/app/components/icons/mdEdit.jsx b/app/components/icons/mdEdit.jsx deleted file mode 100644 index 86cab3a9..00000000 --- a/app/components/icons/mdEdit.jsx +++ /dev/null @@ -1,26 +0,0 @@ -// import dependencies -import PropTypes from 'prop-types'; - -const MdEdit = ({ width = 25, height = 25 }) => ( - - - - -); - -MdEdit.displayName = 'MdEdit'; - -MdEdit.propTypes = { - width: PropTypes.number, - height: PropTypes.number, -}; - -export default MdEdit; diff --git a/app/components/icons/mdErrorOutline.jsx b/app/components/icons/mdErrorOutline.jsx deleted file mode 100644 index 802f430d..00000000 --- a/app/components/icons/mdErrorOutline.jsx +++ /dev/null @@ -1,26 +0,0 @@ -// import dependencies -import PropTypes from 'prop-types'; - -const MdErrorOutline = ({ width = 25, height = 25 }) => ( - - - - -); - -MdErrorOutline.displayName = 'MdErrorOutline'; - -MdErrorOutline.propTypes = { - width: PropTypes.number, - height: PropTypes.number, -}; - -export default MdErrorOutline; diff --git a/app/components/icons/mdEye.jsx b/app/components/icons/mdEye.jsx deleted file mode 100644 index d62331f0..00000000 --- a/app/components/icons/mdEye.jsx +++ /dev/null @@ -1,25 +0,0 @@ -// import dependencies -import PropTypes from 'prop-types'; - -const MdEye = ({ width = 25, height = 25 }) => ( - - - -); - -MdEye.displayName = 'MdEye'; - -MdEye.propTypes = { - width: PropTypes.number, - height: PropTypes.number, -}; - -export default MdEye; diff --git a/app/components/icons/mdEyeOff.jsx b/app/components/icons/mdEyeOff.jsx deleted file mode 100644 index e94def65..00000000 --- a/app/components/icons/mdEyeOff.jsx +++ /dev/null @@ -1,25 +0,0 @@ -// import dependencies -import PropTypes from 'prop-types'; - -const MdEyeOff = ({ width = 25, height = 25 }) => ( - - - -); - -MdEyeOff.displayName = 'MdEyeOff'; - -MdEyeOff.propTypes = { - width: PropTypes.number, - height: PropTypes.number, -}; - -export default MdEyeOff; diff --git a/app/components/icons/mdHelpCircle.jsx b/app/components/icons/mdHelpCircle.jsx deleted file mode 100644 index a3a46c49..00000000 --- a/app/components/icons/mdHelpCircle.jsx +++ /dev/null @@ -1,25 +0,0 @@ -// import dependencies -import PropTypes from 'prop-types'; - -const MdHelpCircle = ({ width = 24, height = 24 }) => ( - - - -); - -MdHelpCircle.displayName = 'MdHelpCircle'; - -MdHelpCircle.propTypes = { - width: PropTypes.number, - height: PropTypes.number, -}; - -export default MdHelpCircle; diff --git a/app/components/icons/piListFill.jsx b/app/components/icons/piListFill.jsx deleted file mode 100644 index 2ecc1561..00000000 --- a/app/components/icons/piListFill.jsx +++ /dev/null @@ -1,25 +0,0 @@ -// import dependencies -import PropTypes from 'prop-types'; - -const PiListFill = ({ width, height }) => ( - - - -); - -PiListFill.displayName = 'PiListFill'; - -PiListFill.propTypes = { - width: PropTypes.number, - height: PropTypes.number, -}; - -export default PiListFill; diff --git a/app/components/modal/settings/account/password.jsx b/app/components/modal/settings/account/password.jsx index b4088f4c..efe99d49 100644 --- a/app/components/modal/settings/account/password.jsx +++ b/app/components/modal/settings/account/password.jsx @@ -1,12 +1,12 @@ // import dependencies import PropTypes from 'prop-types'; +import { useState } from 'react'; // import local files import Modal from '../../../ui/modal'; import TextInput from '../../../ui/input'; import RegisterChecklist from '../../../register/checklist'; -import { useState } from 'react'; -import { MdEye, MdEyeOff } from '../../../icons'; +import { IoMdEye, IoMdEyeOff } from '../../../icons'; import handleChangePassword from '../../../../handlers/settings/account/password'; import validators from '../../../../../shared/validators'; @@ -75,7 +75,11 @@ const SettingsAccountPasswordModal = ({ modalTitle, id, closeModal }) => { handlePasswordChange('showPassword', !values.showPassword) } > - {values.showPassword ? : } + {values.showPassword ? ( + + ) : ( + + )}
} error={values.errors.current} @@ -93,7 +97,11 @@ const SettingsAccountPasswordModal = ({ modalTitle, id, closeModal }) => { handlePasswordChange('showNewPassword', !values.showNewPassword) } > - {values.showNewPassword ? : } + {values.showNewPassword ? ( + + ) : ( + + )} } error={values.errors.new} diff --git a/app/components/monitor/graph/graph.scss b/app/components/monitor/graph/graph.scss index a182cc2c..5ecca740 100644 --- a/app/components/monitor/graph/graph.scss +++ b/app/components/monitor/graph/graph.scss @@ -3,6 +3,9 @@ .monitor-chart-container { background-color: var(--accent-900); border-radius: pxToRem(16); + gap: pxToRem(10); + display: flex; + flex-direction: column; } .monitor-chart-buttons-container { diff --git a/app/components/monitor/graph/index.jsx b/app/components/monitor/graph/index.jsx index 21f82cac..99d4a802 100644 --- a/app/components/monitor/graph/index.jsx +++ b/app/components/monitor/graph/index.jsx @@ -1,112 +1,85 @@ import './graph.scss'; // import dependencies -import PropTypes from 'prop-types'; -import 'chartjs-adapter-dayjs-3'; -import { - BarController, - BarElement, - Chart as ChartJs, - Filler, - LinearScale, - LineController, - LineElement, - PointElement, - TimeScale, - Tooltip, - CategoryScale, -} from 'chart.js'; -import { Chart } from 'react-chartjs-2'; +import dayjs from 'dayjs'; +import CanvasJSReact from '@canvasjs/react-charts'; // import local files -import useLocalStorageContext from '../../../hooks/useLocalstorage'; import GraphMenu from './menu'; import useGraphStatus from '../../../hooks/useGraphStatus'; +import useLocalStorageContext from '../../../hooks/useLocalstorage'; import { fullMonitorPropType } from '../../../../shared/utils/propTypes'; -ChartJs.register( - LineController, - BarController, - LineElement, - PointElement, - TimeScale, - BarElement, - LinearScale, - Tooltip, - Filler, - CategoryScale -); - -const MonitorGraph = ({ monitor, maxValue }) => { - const { dateformat, timeformat, theme } = useLocalStorageContext(); +const CanvasJSChart = CanvasJSReact.CanvasJSChart; +const MonitorGraph = ({ monitor }) => { + const { + dateformat, + theme, + timeformat, + timezone: timeZone, + } = useLocalStorageContext(); const { statusType, statusHeartbeats, setStatusType } = useGraphStatus(monitor); - const labels = statusHeartbeats.map((heartbeat = {}) => heartbeat.date); - const data = statusHeartbeats.map((heartbeat = {}) => heartbeat.latency); - const gridColor = - theme.type === 'light' ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.1)'; + const data = statusHeartbeats.map((heartbeat = {}) => { + const date = new Date( + new Date(heartbeat.date).toLocaleString('en-US', { timeZone }) + ); + return { + x: date, + y: heartbeat.latency, + toolTipContent: `
+
${dayjs(date).format(`${dateformat} ${timeformat}`)}
+
${heartbeat.latency}ms
+
`, + color: heartbeat.isDown ? '#b80a47' : '#13a452', + }; + }); + + const options = { + theme: theme.type === 'light' ? 'light2' : 'dark2', + animationEnabled: true, + zoomEnabled: true, + backgroundColor: 'transparent', + toolTip: { + enabled: true, + animationEnabled: true, + }, + axisX: { + lineColor: '#505b62', + tickColor: '#505b62', + tickLength: 5, + }, + axisY: { + title: 'respTime (ms)', + titleFontSize: 18, + gridColor: '#505b62', + lineColor: '#505b62', + tickColor: '#505b62', + minimum: 0, + }, + data: [ + { + type: 'area', + lineThickness: 2, + // Render colors of chart based on user theme + color: '#10894466', + lineColor: '#13a452', + markerType: 'circle', + markerSize: 0, + xValueFormatString: 'MMM YYYY', + dataPoints: data, + }, + ], + }; return (
- { - if (window.innerWidth < 576) { - chart.canvas.style.height = '225px'; - } else if (window.innerWidth < 768) { - chart.canvas.style.height = '275px'; - } else if (window.innerWidth < 1200) { - chart.canvas.style.height = '300px'; - } else if (window.innerWidth < 1920) { - chart.canvas.style.height = '320px'; - } else { - chart.canvas.style.height = '400px'; - } - }, - layout: { padding: { left: 10, right: 30, top: 30, bottom: 10 } }, - elements: { point: { radius: 0, hitRadius: 100 } }, - scales: { - x: { - type: 'time', - time: { - minUnit: 'minute', - round: 'second', - tooltipFormat: `${dateformat} ${timeformat}`, - displayFormats: { minute: 'HH:mm', hour: 'MM-DD HH:mm' }, - }, - ticks: { maxRotation: 0, autoSkipPadding: 30 }, - grid: { color: gridColor, offset: false }, - }, - y: { - type: 'linear', - title: { display: true, text: 'respTime (ms)' }, - offset: true, - grid: { color: gridColor }, - min: 0, - max: maxValue, - }, - }, - }} - /> +
+ +
); }; @@ -115,7 +88,6 @@ MonitorGraph.displayName = 'MonitorGraph'; MonitorGraph.propTypes = { monitor: fullMonitorPropType.isRequired, - maxValue: PropTypes.number, }; export default MonitorGraph; diff --git a/app/components/monitor/graph/menu.jsx b/app/components/monitor/graph/menu.jsx index a210d7e1..596a6caa 100644 --- a/app/components/monitor/graph/menu.jsx +++ b/app/components/monitor/graph/menu.jsx @@ -49,7 +49,7 @@ const GraphMenu = ({ statusType, setStatusType }) => { isOpen={dropdownIsOpen} toggleDropdown={toggleDropdown} > - + { const { @@ -66,18 +63,18 @@ const MonitorMenu = ({ name = 'Unknown', monitorId }) => {
{name}
- {/* */} - {/* */} + {/* */} + {/* */}