Skip to content

Components For visualisations and Sidebar #53

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
psankhe28 wants to merge 5 commits into
base: monitoring-dashboard
Choose a base branch
from
Open

Components For visualisations and Sidebar #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e312d65
Packages required for dashboard
psankhe28 Aug 28, 2023
d4a172f
Visualisation and Sidebar changes
psankhe28 Aug 28, 2023
e79253b
Update style.css
psankhe28 Aug 28, 2023
534dc3c
Update index.tsx
psankhe28 Aug 28, 2023
18e72d4
Added optional chaining
psankhe28 Aug 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@fortawesome/fontawesome-free": "^6.4.0",
"@mui/icons-material": "^5.14.0",
"@mui/material": "^5.14.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
Expand All @@ -16,23 +14,28 @@
"@types/node": "^20.2.5",
"@types/react": "^18.2.7",
"@types/react-dom": "^18.2.4",
"ansi-to-react": "^6.1.6",
"apexcharts": "^3.41.0",
"axios": "^1.4.0",
"chart.js": "^4.3.0",
"chartjs-plugin-datalabels": "^2.2.0",
"formik": "^2.4.1",
"localforage": "^1.10.0",
"lodash": "^4.17.21",
"match-sorter": "^6.3.1",
"mdb-react-ui-kit": "^6.1.0",
"moment": "^2.29.4",
"react": "^18.2.0",
"react-datepicker": "^4.12.0",
"react-apexcharts": "^1.4.1",
"react-datepicker": "^4.16.0",
"react-dom": "^18.2.0",
"react-form-stepper": "^2.0.3",
"react-fullscreen-loading": "^0.0.4",
"react-hot-toast": "^2.4.1",
"react-pro-sidebar": "^1.1.0-alpha.1",
"react-router-dom": "^6.11.2",
"react-scripts": "5.0.1",
"react-select": "^5.7.4",
"sort-by": "^1.2.0",
"typescript": "^5.0.4",
"web-vitals": "^2.1.4",
Expand Down
4 changes: 2 additions & 2 deletions src/components/icons/Dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from 'react'
//@ts-ignore
import dashboard from '../../assets/images/dashboard.png';
const DashobardIcon = () => {
const DashboardIcon = () => {
return (
<img src={dashboard} alt="dashboard" height="25" />
)
}

export default DashobardIcon
export default DashboardIcon
16 changes: 0 additions & 16 deletions src/components/sidebar/Menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,6 @@ export const monitoringItemsConfig = [
label: "Overview",
link: "/monitoring/overview",
},
{
label: "Kafka Topics",
link: "/monitoring/kafka-topics",
},
{
label: "UCI-API",
link: "/monitoring/uci-api",
Expand All @@ -30,18 +26,10 @@ export const monitoringItemsConfig = [
{
label: "Outbound",
link: "/monitoring/outbound",
},
{
label: "Transport-Socket",
link: "/monitoring/transport-socket",
}
];

export const logsItemsConfig = [
{
label: "Kafka Topics",
link: "/monitoring/logs/kafka-topics",
},
{
label: "UCI-API",
link: "/monitoring/logs/uci-api",
Expand All @@ -65,9 +53,5 @@ export const logsItemsConfig = [
{
label: "Outbound",
link: "/monitoring/logs/outbound",
},
{
label: "Transport-Socket",
link: "/monitoring/logs/transport-socket",
}
];
155 changes: 56 additions & 99 deletions src/components/sidebar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@ import {
MenuItemStyles,
SubMenu,
} from "react-pro-sidebar";
import { Link, useNavigate } from "react-router-dom";
import { Link, useNavigate, useLocation } from "react-router-dom";
import React, { useCallback, useState } from "react";
import { Switch } from "./Switch";
// import { PackageBadges } from './PackageBadges';
// import { Typography } from './Typography';
import { SidebarFooter } from "./SidebarFooter";
import { SidebarHeader } from "./SidebarHeader";
import DashobardIcon from "../icons/Dashobard";
import DashboardIcon from "../icons/Dashboard";
import AddIcon from "../icons/AddIcon";
import LogoutIcon from "../icons/LogoutIcon";
import ThemeIcon from "../icons/ThemeIcon";
Expand Down Expand Up @@ -48,6 +48,9 @@ const themes = {
disabled: {
color: "#9fb6cf",
},
active: {
backgroundColor: "#000",
},
},
submenu: {
menuContent: "#000",
Expand All @@ -59,6 +62,9 @@ const themes = {
disabled: {
color: "#9fb6cf",
},
active: {
backgroundColor: "#000",
},
},
},
dark: {
Expand All @@ -77,6 +83,9 @@ const themes = {
disabled: {
color: "#3e5e7e",
},
active: {
backgroundColor: "#000",
},
},
},
};
Expand All @@ -102,6 +111,8 @@ export const SidebarComponent: React.FC<SidebarProps> = ({
const [rtl, setRtl] = useState(false);
const [hasImage, setHasImage] = useState(true);
const [theme, setTheme] = useState<Theme>(store?.theme);
const location = useLocation();
const navigate = useNavigate();

// handle on RTL change event
const handleRTLChange = (e: React.ChangeEvent<HTMLInputElement>) => {
Expand All @@ -115,7 +126,6 @@ export const SidebarComponent: React.FC<SidebarProps> = ({
localStorage.setItem("theme", store?.theme === "dark" ? "light" : "dark");
};

const navigate = useNavigate();
// handle on image change event
const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setHasImage(e.target.checked);
Expand Down Expand Up @@ -143,7 +153,10 @@ export const SidebarComponent: React.FC<SidebarProps> = ({
hasImage && !collapsed ? 0.8 : 1
)
: "#0b2948",
...(active && { backgroundColor: "black" }),
...(active && {
backgroundColor: "white !important",
color: "white",
}),
}),
button: {
[`&.${menuClasses.disabled}`]: {
Expand All @@ -156,13 +169,6 @@ export const SidebarComponent: React.FC<SidebarProps> = ({
),
color: themes[theme].menu.hover.color,
},
"&:active": {
backgroundColor: "#fff",
},
// [`&.active`]: {
// backgroundColor: "#fff",
// color: "#b6c8d9",
// },
},
label: ({ open }) => ({
fontWeight: open ? 600 : undefined,
Expand Down Expand Up @@ -219,42 +225,28 @@ export const SidebarComponent: React.FC<SidebarProps> = ({
style={{ marginBottom: "24px", marginTop: "16px" }}
/>
<div style={{ flex: 1, marginBottom: "32px" }}>
{/* <div style={{ padding: '0 24px', marginBottom: '8px' }}>
<Typography
variant="body2"
fontWeight={600}
style={{ opacity: collapsed ? 0 : 0.7, letterSpacing: '0.5px' }}
>
General
</Typography>
</div> */}

{/* <Menu menuItemStyles={menuItemStyles}>
<SubMenu
label="Charts"
icon={<ShoppingCart />}
>
<MenuItem icon={<DashobardIcon />} component={<Link to="/" />}>
Dashboard
</MenuItem>
<MenuItem icon={<AddIcon />} component={<Link to="/add-bot" />}>Add Bot</MenuItem>

</SubMenu>

</Menu> */}

{/* <div style={{ padding: '0 24px', marginBottom: '8px', marginTop: '32px' }}>
<Typography
variant="body2"
fontWeight={600}
style={{ opacity: collapsed ? 0 : 0.7, letterSpacing: '0.5px' }}
>
Extra
</Typography>
</div> */}

<Menu menuItemStyles={menuItemStyles}>
<MenuItem icon={<ThemeIcon />}>
{/* <MenuItem icon={<ThemeIcon />}>
<Switch
id="theme"
checked={theme === "dark"}
onChange={handleThemeChange}
label="Dark theme"
/>
</MenuItem>
<MenuItem
icon={<DashboardIcon />}
component={<Link to="/" id="dashboard" />}
>
Dashboard
</MenuItem>
<MenuItem
icon={<AddIcon />}
component={<Link to="/add-bot" id="add-bot" />}
>
Add Bot
</MenuItem> */}
<MenuItem icon={<ThemeIcon />} active={location.pathname === "/"}>
<Switch
id="theme"
checked={theme === "dark"}
Expand All @@ -263,15 +255,20 @@ export const SidebarComponent: React.FC<SidebarProps> = ({
/>
</MenuItem>
<MenuItem
icon={<DashobardIcon />}
active
icon={<DashboardIcon />}
active={location.pathname === "/"}
component={<Link to="/" id="dashboard" />}
className={location.pathname === "/" ? "active-menu" : ""}
>
Dashboard
</MenuItem>
<MenuItem
icon={<AddIcon />}
active={location.pathname === "/add-bot"}
component={<Link to="/add-bot" id="add-bot" />}
className={
location.pathname === "/add-bot" ? "active-menu" : ""
}
>
Add Bot
</MenuItem>
Expand All @@ -283,6 +280,9 @@ export const SidebarComponent: React.FC<SidebarProps> = ({
<MenuItem
key={item.label}
component={<Link to={item.link} />}
className={
location.pathname === item.link ? "active-menu" : ""
}
>
{item.label}
</MenuItem>
Expand All @@ -292,71 +292,28 @@ export const SidebarComponent: React.FC<SidebarProps> = ({
<MenuItem
key={item.label}
component={<Link to={item.link} />}
className={
location.pathname === item.link ? "active-menu" : ""
}
>
{item.label}
</MenuItem>
))}
</SubMenu>
</SubMenu>

<MenuItem icon={<LogoutIcon />} onClick={onLogout}>
<MenuItem
icon={<LogoutIcon />}
onClick={onLogout}
className={location.pathname === "/logout" ? "active-menu" : ""}
>
Log Out
</MenuItem>
</Menu>
</div>
<SidebarFooter collapsed={collapsed} />
</div>
</Sidebar>

{/* <main>
<div style={{ padding: '16px 24px', color: '#44596e' }}>
<div style={{ marginBottom: '16px' }}>
{broken && (
<button className="sb-button" onClick={() => setToggled(!toggled)}>
Toggle
</button>
)}
</div>
<div style={{ marginBottom: '48px' }}>
<Typography variant="h4" fontWeight={600}>
React Pro Sidebar
</Typography>
<Typography variant="body2">
React Pro Sidebar provides a set of components for creating high level and
customizable side navigation
</Typography>
<PackageBadges />
</div>

<div style={{ padding: '0 8px' }}>
<div style={{ marginBottom: 16 }}>
<Switch
id="collapse"
checked={collapsed}
onChange={() => setCollapsed(!collapsed)}
label="Collapse"
/>
</div>

<div style={{ marginBottom: 16 }}>
<Switch id="rtl" checked={rtl} onChange={handleRTLChange} label="RTL" />
</div>

<div style={{ marginBottom: 16 }}>
<Switch
id="theme"
checked={theme === 'dark'}
onChange={handleThemeChange}
label="Dark theme"
/>
</div>

<div style={{ marginBottom: 16 }}>
<Switch id="image" checked={hasImage} onChange={handleImageChange} label="Image" />
</div>
</div>
</div>
</main> */}
</div>
);
};
17 changes: 3 additions & 14 deletions src/components/sidebar/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,4 @@
/* This is for menu item */
.pro-menu-item a.active {
color: aliceblue !important; /* put any color you want */
font-weight: 500;
}

/* This is for submenu item */
.nav-member .react-slidedown .pro-menu-item a.active {
color: #003642; /* put any color you want */
font-weight: 500;
}

.ps-menu-button a:active {
background-color: aliceblue !important;
.active-menu{
background: aliceblue;
color: black;
}
6 changes: 3 additions & 3 deletions src/components/visualisation/bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import React, { useEffect, useRef } from "react";
// import Chart from "chart.js";
import { useEffect, useRef } from "react";
import Chart from 'chart.js/auto';

export const BarChart = ({ data }) => {
const BarChart = ({ data}) => {
const chartRef = useRef(null);

useEffect(() => {
Expand Down Expand Up @@ -33,3 +32,4 @@ export const BarChart = ({ data }) => {
return <canvas ref={chartRef} />;
};

export default BarChart;
Loading