diff --git a/app/components/home/menu/index.jsx b/app/components/home/menu/index.jsx index 7cd0b4b..4655445 100644 --- a/app/components/home/menu/index.jsx +++ b/app/components/home/menu/index.jsx @@ -6,7 +6,10 @@ import { observer } from 'mobx-react-lite'; // import local files import Button from '../../ui/button'; -import { FaPlus, IoReload } from '../../icons'; + +// import icons +import FaPlus from '../../icons/faPlus'; +import FaReload from '../../icons/faReload'; import MenuLayoutDropdown from './layout'; import MenuStatusDropdown from './status'; import SearchBar from '../../ui/searchBar'; @@ -27,7 +30,7 @@ const HomeMenu = ({ handleReset, search, setSearch }) => {
+ {dropdownItems} diff --git a/app/components/home/menu/mobile.jsx b/app/components/home/menu/mobile.jsx index 612425a..f378910 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: , }, ]; @@ -50,11 +54,7 @@ const MenuStatusDropdown = () => { id="home-menu-status" > - diff --git a/app/components/home/monitor/options.jsx b/app/components/home/monitor/options.jsx index 0e1aa23..f4b5b2c 100644 --- a/app/components/home/monitor/options.jsx +++ b/app/components/home/monitor/options.jsx @@ -8,10 +8,12 @@ import { toast } from 'react-toastify'; import MonitorModal from '../../modal/monitor/delete'; import Dropdown from '../../ui/dropdown/index'; import useContextStore from '../../../context'; -import useDropdown from '../../../hooks/useDropdown'; import { createGetRequest } from '../../../services/axios'; + +// import icons +import FaEllipsisVertical from '../../icons/faEllipsisVertical'; +import useDropdown from '../../../hooks/useDropdown'; import MonitorConfigureModal from '../../modal/monitor/configure'; -import { FaEllipsisVertical } from '../../icons'; const MonitorOptions = ({ monitorId }) => { const { @@ -75,7 +77,7 @@ const MonitorOptions = ({ monitorId }) => { toggleDropdown={toggleDropdown} > - + Open diff --git a/app/components/icons/bsTable.jsx b/app/components/icons/bsTable.jsx new file mode 100644 index 0000000..40bb34e --- /dev/null +++ b/app/components/icons/bsTable.jsx @@ -0,0 +1,25 @@ +// 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 new file mode 100644 index 0000000..f3d24ff --- /dev/null +++ b/app/components/icons/faCheck.jsx @@ -0,0 +1,25 @@ +// 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 new file mode 100644 index 0000000..c641e7b --- /dev/null +++ b/app/components/icons/faChevronDown.jsx @@ -0,0 +1,25 @@ +// 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 new file mode 100644 index 0000000..290bc7a --- /dev/null +++ b/app/components/icons/faChevronLeft.jsx @@ -0,0 +1,25 @@ +// 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 new file mode 100644 index 0000000..18bc3a9 --- /dev/null +++ b/app/components/icons/faChevronRight.jsx @@ -0,0 +1,25 @@ +// 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 new file mode 100644 index 0000000..f21318a --- /dev/null +++ b/app/components/icons/faChevronUp.jsx @@ -0,0 +1,25 @@ +// 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 new file mode 100644 index 0000000..fb546b7 --- /dev/null +++ b/app/components/icons/faCircleCheck.jsx @@ -0,0 +1,30 @@ +// 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 new file mode 100644 index 0000000..0c1b56f --- /dev/null +++ b/app/components/icons/faClose.jsx @@ -0,0 +1,25 @@ +// 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 new file mode 100644 index 0000000..5c04ede --- /dev/null +++ b/app/components/icons/faCog.jsx @@ -0,0 +1,25 @@ +// 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 new file mode 100644 index 0000000..93674d1 --- /dev/null +++ b/app/components/icons/faEllipsisVertical.jsx @@ -0,0 +1,27 @@ +// 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 new file mode 100644 index 0000000..94352a6 --- /dev/null +++ b/app/components/icons/faHome.jsx @@ -0,0 +1,27 @@ +// 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 new file mode 100644 index 0000000..29ee52d --- /dev/null +++ b/app/components/icons/faPlus.jsx @@ -0,0 +1,25 @@ +// 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 new file mode 100644 index 0000000..8e57105 --- /dev/null +++ b/app/components/icons/faReload.jsx @@ -0,0 +1,30 @@ +// 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 new file mode 100644 index 0000000..e4f0160 --- /dev/null +++ b/app/components/icons/faSignOutAlt.jsx @@ -0,0 +1,25 @@ +// 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 new file mode 100644 index 0000000..af6287f --- /dev/null +++ b/app/components/icons/faTrash.jsx @@ -0,0 +1,25 @@ +// 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 new file mode 100644 index 0000000..da54c56 --- /dev/null +++ b/app/components/icons/faUserCircle.jsx @@ -0,0 +1,25 @@ +// 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 new file mode 100644 index 0000000..7dead35 --- /dev/null +++ b/app/components/icons/faUsers.jsx @@ -0,0 +1,25 @@ +// 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 new file mode 100644 index 0000000..1c02152 --- /dev/null +++ b/app/components/icons/fiLayout.jsx @@ -0,0 +1,29 @@ +// 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 new file mode 100644 index 0000000..0103eba --- /dev/null +++ b/app/components/icons/hiStatusOffline.jsx @@ -0,0 +1,30 @@ +// 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 new file mode 100644 index 0000000..5511b88 --- /dev/null +++ b/app/components/icons/hiStatusOnline.jsx @@ -0,0 +1,30 @@ +// 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 0dd568e..c2f6d61 100644 --- a/app/components/icons/index.jsx +++ b/app/components/icons/index.jsx @@ -1,61 +1,63 @@ -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 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 StatusLogo from './statusLogo'; export { BsTable, - FaBars, FaCheck, FaChevronDown, FaChevronLeft, FaChevronRight, - FaChevronUp, FaCircleCheck, + FaChevronUp, + FaUserCircle, + FaClose, FaCog, FaEllipsisVertical, FaHome, FaPlus, + FaReload, FaSignOutAlt, - FaTrashCan, - FaUserCircle, - FaUsers, + FaTrash, 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 new file mode 100644 index 0000000..f4e4196 --- /dev/null +++ b/app/components/icons/ioArrowBack.jsx @@ -0,0 +1,31 @@ +// 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 new file mode 100644 index 0000000..bf65395 --- /dev/null +++ b/app/components/icons/ioColorPalette.jsx @@ -0,0 +1,25 @@ +// 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 new file mode 100644 index 0000000..f84a7ff --- /dev/null +++ b/app/components/icons/ioGrid.jsx @@ -0,0 +1,25 @@ +// 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 new file mode 100644 index 0000000..0703941 --- /dev/null +++ b/app/components/icons/liaSyncSolid.jsx @@ -0,0 +1,25 @@ +// 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 new file mode 100644 index 0000000..86cab3a --- /dev/null +++ b/app/components/icons/mdEdit.jsx @@ -0,0 +1,26 @@ +// 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 new file mode 100644 index 0000000..802f430 --- /dev/null +++ b/app/components/icons/mdErrorOutline.jsx @@ -0,0 +1,26 @@ +// 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 new file mode 100644 index 0000000..d62331f --- /dev/null +++ b/app/components/icons/mdEye.jsx @@ -0,0 +1,25 @@ +// 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 new file mode 100644 index 0000000..e94def6 --- /dev/null +++ b/app/components/icons/mdEyeOff.jsx @@ -0,0 +1,25 @@ +// 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 new file mode 100644 index 0000000..a3a46c4 --- /dev/null +++ b/app/components/icons/mdHelpCircle.jsx @@ -0,0 +1,25 @@ +// 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 new file mode 100644 index 0000000..2ecc156 --- /dev/null +++ b/app/components/icons/piListFill.jsx @@ -0,0 +1,25 @@ +// 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 efe99d4..b4088f4 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 { IoMdEye, IoMdEyeOff } from '../../../icons'; +import { useState } from 'react'; +import { MdEye, MdEyeOff } from '../../../icons'; import handleChangePassword from '../../../../handlers/settings/account/password'; import validators from '../../../../../shared/validators'; @@ -75,11 +75,7 @@ const SettingsAccountPasswordModal = ({ modalTitle, id, closeModal }) => { handlePasswordChange('showPassword', !values.showPassword) } > - {values.showPassword ? ( - - ) : ( - - )} + {values.showPassword ? : }
} error={values.errors.current} @@ -97,11 +93,7 @@ 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 5ecca74..a182cc2 100644 --- a/app/components/monitor/graph/graph.scss +++ b/app/components/monitor/graph/graph.scss @@ -3,9 +3,6 @@ .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 99d4a80..21f82ca 100644 --- a/app/components/monitor/graph/index.jsx +++ b/app/components/monitor/graph/index.jsx @@ -1,85 +1,112 @@ import './graph.scss'; // import dependencies -import dayjs from 'dayjs'; -import CanvasJSReact from '@canvasjs/react-charts'; +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 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'; -const CanvasJSChart = CanvasJSReact.CanvasJSChart; +ChartJs.register( + LineController, + BarController, + LineElement, + PointElement, + TimeScale, + BarElement, + LinearScale, + Tooltip, + Filler, + CategoryScale +); + +const MonitorGraph = ({ monitor, maxValue }) => { + const { dateformat, timeformat, theme } = useLocalStorageContext(); -const MonitorGraph = ({ monitor }) => { - const { - dateformat, - theme, - timeformat, - timezone: timeZone, - } = useLocalStorageContext(); const { statusType, statusHeartbeats, setStatusType } = useGraphStatus(monitor); - 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, - }, - ], - }; + 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)'; 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, + }, + }, + }} + />
); }; @@ -88,6 +115,7 @@ 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 596a6ca..a210d7e 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 { @@ -63,18 +66,18 @@ const MonitorMenu = ({ name = 'Unknown', monitorId }) => {
{name}
- {/* */} - {/* */} + {/* */} + {/* */}