From e312d650b4932f492370b12b3dd58ac44fd9e65e Mon Sep 17 00:00:00 2001 From: psankhe28 Date: Mon, 28 Aug 2023 13:20:13 +0530 Subject: [PATCH 1/5] Packages required for dashboard --- package.json | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 18f4bbe..8906637 100644 --- a/package.json +++ b/package.json @@ -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", @@ -16,8 +14,11 @@ "@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", @@ -25,7 +26,8 @@ "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", @@ -33,6 +35,7 @@ "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", From d4a172f6528f389673ea5e1d2139d3e06e7edd93 Mon Sep 17 00:00:00 2001 From: psankhe28 Date: Mon, 28 Aug 2023 13:24:20 +0530 Subject: [PATCH 2/5] Visualisation and Sidebar changes --- src/components/icons/Dashboard.tsx | 4 +- src/components/sidebar/Menu.tsx | 16 ------ src/components/sidebar/index.tsx | 2 +- src/components/visualisation/bar.tsx | 8 ++- src/components/visualisation/index.tsx | 4 +- src/components/visualisation/line.tsx | 40 ++++++++++++++ src/components/visualisation/pie.tsx | 73 ++++++++++++++++++++++++++ 7 files changed, 126 insertions(+), 21 deletions(-) create mode 100644 src/components/visualisation/line.tsx create mode 100644 src/components/visualisation/pie.tsx diff --git a/src/components/icons/Dashboard.tsx b/src/components/icons/Dashboard.tsx index 43d4064..5e6483a 100644 --- a/src/components/icons/Dashboard.tsx +++ b/src/components/icons/Dashboard.tsx @@ -1,10 +1,10 @@ import React from 'react' //@ts-ignore import dashboard from '../../assets/images/dashboard.png'; -const DashobardIcon = () => { +const DashboardIcon = () => { return ( dashboard ) } -export default DashobardIcon \ No newline at end of file +export default DashboardIcon \ No newline at end of file diff --git a/src/components/sidebar/Menu.tsx b/src/components/sidebar/Menu.tsx index 8e9040b..6e64724 100644 --- a/src/components/sidebar/Menu.tsx +++ b/src/components/sidebar/Menu.tsx @@ -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", @@ -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", @@ -65,9 +53,5 @@ export const logsItemsConfig = [ { label: "Outbound", link: "/monitoring/logs/outbound", - }, - { - label: "Transport-Socket", - link: "/monitoring/logs/transport-socket", } ]; diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx index 8d58d36..47df9e5 100644 --- a/src/components/sidebar/index.tsx +++ b/src/components/sidebar/index.tsx @@ -13,7 +13,7 @@ import { Switch } from "./Switch"; // import { Typography } from './Typography'; import { SidebarFooter } from "./SidebarFooter"; import { SidebarHeader } from "./SidebarHeader"; -import DashobardIcon from "../icons/Dashobard"; +import DashobardIcon from "../icons/Dashboard"; import AddIcon from "../icons/AddIcon"; import LogoutIcon from "../icons/LogoutIcon"; import ThemeIcon from "../icons/ThemeIcon"; diff --git a/src/components/visualisation/bar.tsx b/src/components/visualisation/bar.tsx index 636ed39..2d10a1f 100644 --- a/src/components/visualisation/bar.tsx +++ b/src/components/visualisation/bar.tsx @@ -2,10 +2,11 @@ import React, { useEffect, useRef } from "react"; // import Chart from "chart.js"; import Chart from 'chart.js/auto'; -export const BarChart = ({ data }) => { +const BarChart = ({ data }) => { const chartRef = useRef(null); useEffect(() => { + // Create a new bar chart instance const ctx = chartRef.current.getContext("2d"); const chart = new Chart(ctx, { type: "bar", @@ -20,11 +21,15 @@ export const BarChart = ({ data }) => { }, y: { beginAtZero: true, + // grid: { + // borderDash: [2], + // }, }, }, }, }); + // Clean up the chart instance on component unmount return () => { chart.destroy(); }; @@ -33,3 +38,4 @@ export const BarChart = ({ data }) => { return ; }; +export default BarChart; diff --git a/src/components/visualisation/index.tsx b/src/components/visualisation/index.tsx index 3e07c2a..b40ea06 100644 --- a/src/components/visualisation/index.tsx +++ b/src/components/visualisation/index.tsx @@ -1 +1,3 @@ -export * from './bar' \ No newline at end of file +export * from './bar' +export * from './line' +export * from './pie' \ No newline at end of file diff --git a/src/components/visualisation/line.tsx b/src/components/visualisation/line.tsx new file mode 100644 index 0000000..64103f5 --- /dev/null +++ b/src/components/visualisation/line.tsx @@ -0,0 +1,40 @@ +import React, { useEffect, useRef } from "react"; +import Chart from 'chart.js/auto'; + +const LineChart = ({ data }) => { + const chartRef = useRef(null); + + useEffect(() => { + // Create a new line chart instance + const ctx = chartRef.current.getContext("2d"); + const chart = new Chart(ctx, { + type: "line", + data: data, + options: { + responsive: true, + scales: { + x: { + grid: { + display: false, + }, + }, + y: { + beginAtZero: true, + // grid: { + // borderDash: [2], + // }, + }, + }, + }, + }); + + // Clean up the chart instance on component unmount + return () => { + chart.destroy(); + }; + }, [data]); + + return ; +}; + +export default LineChart; diff --git a/src/components/visualisation/pie.tsx b/src/components/visualisation/pie.tsx new file mode 100644 index 0000000..a07e5f5 --- /dev/null +++ b/src/components/visualisation/pie.tsx @@ -0,0 +1,73 @@ +import React, { useEffect, useRef } from "react"; +import Chart from "chart.js/auto"; +import useWindowSize from "../../hooks/useWindow"; + +const generateRandomColor = () => { + const letters = "0123456789ABCDEF"; + let color = "#"; + for (let i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + return color; +}; + +const PieChart = ({ data }) => { + const chartRef = useRef(null); + const { height } = useWindowSize(); + + useEffect(() => { + // Generate dynamic background colors for each segment based on labels + const dynamicColors = data.labels.map(() => generateRandomColor()); + + // Create a new pie chart instance + const ctx = chartRef.current.getContext("2d"); + const chart = new Chart(ctx, { + type: "pie", + data: { + labels: data.labels, + datasets: [ + { + data: data.datasets[0].data, + backgroundColor: dynamicColors, + }, + ], + }, + options: { + responsive: true, + plugins: { + tooltip: { + callbacks: { + label: (context) => { + const label = data.labels[context.dataIndex]; + const value = data.datasets[0].data[context.dataIndex]; + const total = data.datasets[0].data.reduce((acc, curr) => acc + curr); + const percentage = ((value / total) * 100).toFixed(2); + return `${label}: ${value} (${percentage}%)`; + }, + }, + }, + }, + }, + }); + + // Clean up the chart instance on component unmount + return () => { + chart.destroy(); + }; + }, [data]); + + return ( +
+ +
+ ); +}; + +export default PieChart; From e79253b085ec5ed9c4f0de64bdd6af38ff6bfdf4 Mon Sep 17 00:00:00 2001 From: Pratiksha Sankhe Date: Mon, 28 Aug 2023 16:53:52 +0530 Subject: [PATCH 3/5] Update style.css --- src/components/sidebar/style.css | 17 +++-------------- 1 file changed, 3 insertions(+), 14 deletions(-) diff --git a/src/components/sidebar/style.css b/src/components/sidebar/style.css index 8dd74d7..85f01e2 100644 --- a/src/components/sidebar/style.css +++ b/src/components/sidebar/style.css @@ -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; } From 534dc3c3e2f061a22b7d614316040ceb811de8e6 Mon Sep 17 00:00:00 2001 From: Pratiksha Sankhe Date: Mon, 28 Aug 2023 16:54:22 +0530 Subject: [PATCH 4/5] Update index.tsx --- src/components/sidebar/index.tsx | 155 +++++++++++-------------------- 1 file changed, 56 insertions(+), 99 deletions(-) diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx index 47df9e5..bd47e03 100644 --- a/src/components/sidebar/index.tsx +++ b/src/components/sidebar/index.tsx @@ -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/Dashboard"; +import DashboardIcon from "../icons/Dashboard"; import AddIcon from "../icons/AddIcon"; import LogoutIcon from "../icons/LogoutIcon"; import ThemeIcon from "../icons/ThemeIcon"; @@ -48,6 +48,9 @@ const themes = { disabled: { color: "#9fb6cf", }, + active: { + backgroundColor: "#000", + }, }, submenu: { menuContent: "#000", @@ -59,6 +62,9 @@ const themes = { disabled: { color: "#9fb6cf", }, + active: { + backgroundColor: "#000", + }, }, }, dark: { @@ -77,6 +83,9 @@ const themes = { disabled: { color: "#3e5e7e", }, + active: { + backgroundColor: "#000", + }, }, }, }; @@ -102,6 +111,8 @@ export const SidebarComponent: React.FC = ({ const [rtl, setRtl] = useState(false); const [hasImage, setHasImage] = useState(true); const [theme, setTheme] = useState(store?.theme); + const location = useLocation(); + const navigate = useNavigate(); // handle on RTL change event const handleRTLChange = (e: React.ChangeEvent) => { @@ -115,7 +126,6 @@ export const SidebarComponent: React.FC = ({ localStorage.setItem("theme", store?.theme === "dark" ? "light" : "dark"); }; - const navigate = useNavigate(); // handle on image change event const handleImageChange = (e: React.ChangeEvent) => { setHasImage(e.target.checked); @@ -143,7 +153,10 @@ export const SidebarComponent: React.FC = ({ hasImage && !collapsed ? 0.8 : 1 ) : "#0b2948", - ...(active && { backgroundColor: "black" }), + ...(active && { + backgroundColor: "white !important", + color: "white", + }), }), button: { [`&.${menuClasses.disabled}`]: { @@ -156,13 +169,6 @@ export const SidebarComponent: React.FC = ({ ), color: themes[theme].menu.hover.color, }, - "&:active": { - backgroundColor: "#fff", - }, - // [`&.active`]: { - // backgroundColor: "#fff", - // color: "#b6c8d9", - // }, }, label: ({ open }) => ({ fontWeight: open ? 600 : undefined, @@ -219,42 +225,28 @@ export const SidebarComponent: React.FC = ({ style={{ marginBottom: "24px", marginTop: "16px" }} />
- {/*
- - General - -
*/} - - {/* - } - > - } component={}> - Dashboard - - } component={}>Add Bot - - - - */} - - {/*
- - Extra - -
*/} - - }> + {/* }> + + + } + component={} + > + Dashboard + + } + component={} + > + Add Bot + */} + } active={location.pathname === "/"}> = ({ /> } - active + icon={} + active={location.pathname === "/"} component={} + className={location.pathname === "/" ? "active-menu" : ""} > Dashboard } + active={location.pathname === "/add-bot"} component={} + className={ + location.pathname === "/add-bot" ? "active-menu" : "" + } > Add Bot @@ -283,6 +280,9 @@ export const SidebarComponent: React.FC = ({ } + className={ + location.pathname === item.link ? "active-menu" : "" + } > {item.label} @@ -292,6 +292,9 @@ export const SidebarComponent: React.FC = ({ } + className={ + location.pathname === item.link ? "active-menu" : "" + } > {item.label} @@ -299,7 +302,11 @@ export const SidebarComponent: React.FC = ({ - } onClick={onLogout}> + } + onClick={onLogout} + className={location.pathname === "/logout" ? "active-menu" : ""} + > Log Out @@ -307,56 +314,6 @@ export const SidebarComponent: React.FC = ({
- - {/*
-
-
- {broken && ( - - )} -
-
- - React Pro Sidebar - - - React Pro Sidebar provides a set of components for creating high level and - customizable side navigation - - -
- -
-
- setCollapsed(!collapsed)} - label="Collapse" - /> -
- -
- -
- -
- -
- -
- -
-
-
-
*/} ); }; From 18e72d4fd0fc3301d2e07a7e3f9f09d77bf7ca22 Mon Sep 17 00:00:00 2001 From: psankhe28 Date: Mon, 28 Aug 2023 23:01:53 +0530 Subject: [PATCH 5/5] Added optional chaining --- src/components/visualisation/bar.tsx | 10 ++------- src/components/visualisation/line.tsx | 9 ++------ src/components/visualisation/pie.tsx | 31 ++++++++++++--------------- 3 files changed, 18 insertions(+), 32 deletions(-) diff --git a/src/components/visualisation/bar.tsx b/src/components/visualisation/bar.tsx index 2d10a1f..27797db 100644 --- a/src/components/visualisation/bar.tsx +++ b/src/components/visualisation/bar.tsx @@ -1,12 +1,10 @@ -import React, { useEffect, useRef } from "react"; -// import Chart from "chart.js"; +import { useEffect, useRef } from "react"; import Chart from 'chart.js/auto'; -const BarChart = ({ data }) => { +const BarChart = ({ data}) => { const chartRef = useRef(null); useEffect(() => { - // Create a new bar chart instance const ctx = chartRef.current.getContext("2d"); const chart = new Chart(ctx, { type: "bar", @@ -21,15 +19,11 @@ const BarChart = ({ data }) => { }, y: { beginAtZero: true, - // grid: { - // borderDash: [2], - // }, }, }, }, }); - // Clean up the chart instance on component unmount return () => { chart.destroy(); }; diff --git a/src/components/visualisation/line.tsx b/src/components/visualisation/line.tsx index 64103f5..f8b0d2a 100644 --- a/src/components/visualisation/line.tsx +++ b/src/components/visualisation/line.tsx @@ -1,11 +1,10 @@ -import React, { useEffect, useRef } from "react"; +import { useEffect, useRef } from "react"; import Chart from 'chart.js/auto'; const LineChart = ({ data }) => { const chartRef = useRef(null); useEffect(() => { - // Create a new line chart instance const ctx = chartRef.current.getContext("2d"); const chart = new Chart(ctx, { type: "line", @@ -19,16 +18,12 @@ const LineChart = ({ data }) => { }, }, y: { - beginAtZero: true, - // grid: { - // borderDash: [2], - // }, + beginAtZero: true }, }, }, }); - // Clean up the chart instance on component unmount return () => { chart.destroy(); }; diff --git a/src/components/visualisation/pie.tsx b/src/components/visualisation/pie.tsx index a07e5f5..4ebb394 100644 --- a/src/components/visualisation/pie.tsx +++ b/src/components/visualisation/pie.tsx @@ -16,18 +16,16 @@ const PieChart = ({ data }) => { const { height } = useWindowSize(); useEffect(() => { - // Generate dynamic background colors for each segment based on labels - const dynamicColors = data.labels.map(() => generateRandomColor()); + const dynamicColors = data?.labels?.map(() => generateRandomColor()); - // Create a new pie chart instance const ctx = chartRef.current.getContext("2d"); const chart = new Chart(ctx, { type: "pie", data: { - labels: data.labels, + labels: data?.labels, datasets: [ { - data: data.datasets[0].data, + data: data?.datasets[0].data, backgroundColor: dynamicColors, }, ], @@ -38,9 +36,9 @@ const PieChart = ({ data }) => { tooltip: { callbacks: { label: (context) => { - const label = data.labels[context.dataIndex]; - const value = data.datasets[0].data[context.dataIndex]; - const total = data.datasets[0].data.reduce((acc, curr) => acc + curr); + const label = data?.labels[context.dataIndex]; + const value = data?.datasets[0].data[context.dataIndex]; + const total = data?.datasets[0].data.reduce((acc, curr) => acc + curr); const percentage = ((value / total) * 100).toFixed(2); return `${label}: ${value} (${percentage}%)`; }, @@ -50,21 +48,20 @@ const PieChart = ({ data }) => { }, }); - // Clean up the chart instance on component unmount return () => { chart.destroy(); }; }, [data]); + const chartContainerStyle = { + display: "flex", + justifyContent: "center", + alignItems: "center", + maxHeight: `${height - 100}px`, + }; + return ( -
+
);