From ad90ea6a4fadb48a515d52b6500b725776d0fd2c Mon Sep 17 00:00:00 2001 From: leandrofars Date: Wed, 10 Jul 2024 11:12:42 -0300 Subject: [PATCH] feat(frontend): site survey --- frontend/package-lock.json | 46 +- frontend/package.json | 4 +- .../src/sections/devices/cwmp/site-survey.js | 434 ++++++++++++------ 3 files changed, 316 insertions(+), 168 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index cf2561d..12297bb 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -18,14 +18,14 @@ "@mui/system": "5.11.9", "@mui/x-date-pickers": "5.0.19", "@react-google-maps/api": "^2.19.3", - "apexcharts": "3.37.0", + "apexcharts": "^3.37.0", "date-fns": "2.29.3", "formik": "2.2.9", "next": "^14.2.4", "nprogress": "0.2.0", "prop-types": "15.8.1", "react": "^18.3.1", - "react-apexcharts": "1.4.0", + "react-apexcharts": "^1.4.0", "react-dom": "^18.3.1", "simple-peer": "^9.11.1", "simplebar-react": "^3.2.1", @@ -1480,6 +1480,11 @@ "url": "https://opencollective.com/typescript-eslint" } }, + "node_modules/@yr/monotone-cubic-spline": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz", + "integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==" + }, "node_modules/acorn": { "version": "8.11.3", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz", @@ -1538,10 +1543,11 @@ } }, "node_modules/apexcharts": { - "version": "3.37.0", - "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.37.0.tgz", - "integrity": "sha512-0mg1gDKUo3JG00Q//LK0jEXBS6OLjpuglqZ8ec9cqfA5oP8owopD9n5EhfARbWROb5o8GSPzFuohTJiCm2ecWw==", + "version": "3.50.0", + "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.50.0.tgz", + "integrity": "sha512-LJT1PNAm+NoIU3aogL2P+ViC0y/Cjik54FdzzGV54UNnGQLBoLe5ok3fxsJDTgyez45BGYT8gqNpYKqhdfy5sg==", "dependencies": { + "@yr/monotone-cubic-spline": "^1.0.3", "svg.draggable.js": "^2.2.2", "svg.easing.js": "^2.0.0", "svg.filter.js": "^2.0.2", @@ -4722,14 +4728,14 @@ } }, "node_modules/react-apexcharts": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.4.0.tgz", - "integrity": "sha512-DrcMV4aAMrUG+n6412yzyATWEyCDWlpPBBhVbpzBC4PDeuYU6iF84SmExbck+jx5MUm4U5PM3/T307Mc3kzc9Q==", + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.4.1.tgz", + "integrity": "sha512-G14nVaD64Bnbgy8tYxkjuXEUp/7h30Q0U33xc3AwtGFijJB9nHqOt1a6eG0WBn055RgRg+NwqbKGtqPxy15d0Q==", "dependencies": { - "prop-types": "^15.5.7" + "prop-types": "^15.8.1" }, "peerDependencies": { - "apexcharts": "^3.18.0", + "apexcharts": "^3.41.0", "react": ">=0.13" } }, @@ -7102,6 +7108,11 @@ "eslint-visitor-keys": "^3.3.0" } }, + "@yr/monotone-cubic-spline": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz", + "integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==" + }, "acorn": { "version": "8.11.3", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz", @@ -7142,10 +7153,11 @@ } }, "apexcharts": { - "version": "3.37.0", - "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.37.0.tgz", - "integrity": "sha512-0mg1gDKUo3JG00Q//LK0jEXBS6OLjpuglqZ8ec9cqfA5oP8owopD9n5EhfARbWROb5o8GSPzFuohTJiCm2ecWw==", + "version": "3.50.0", + "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.50.0.tgz", + "integrity": "sha512-LJT1PNAm+NoIU3aogL2P+ViC0y/Cjik54FdzzGV54UNnGQLBoLe5ok3fxsJDTgyez45BGYT8gqNpYKqhdfy5sg==", "requires": { + "@yr/monotone-cubic-spline": "^1.0.3", "svg.draggable.js": "^2.2.2", "svg.easing.js": "^2.0.0", "svg.filter.js": "^2.0.2", @@ -9444,11 +9456,11 @@ } }, "react-apexcharts": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.4.0.tgz", - "integrity": "sha512-DrcMV4aAMrUG+n6412yzyATWEyCDWlpPBBhVbpzBC4PDeuYU6iF84SmExbck+jx5MUm4U5PM3/T307Mc3kzc9Q==", + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.4.1.tgz", + "integrity": "sha512-G14nVaD64Bnbgy8tYxkjuXEUp/7h30Q0U33xc3AwtGFijJB9nHqOt1a6eG0WBn055RgRg+NwqbKGtqPxy15d0Q==", "requires": { - "prop-types": "^15.5.7" + "prop-types": "^15.8.1" } }, "react-dom": { diff --git a/frontend/package.json b/frontend/package.json index 7347046..02747e2 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -24,14 +24,14 @@ "@mui/system": "5.11.9", "@mui/x-date-pickers": "5.0.19", "@react-google-maps/api": "^2.19.3", - "apexcharts": "3.37.0", + "apexcharts": "^3.37.0", "date-fns": "2.29.3", "formik": "2.2.9", "next": "^14.2.4", "nprogress": "0.2.0", "prop-types": "15.8.1", "react": "^18.3.1", - "react-apexcharts": "1.4.0", + "react-apexcharts": "^1.4.0", "react-dom": "^18.3.1", "simple-peer": "^9.11.1", "simplebar-react": "^3.2.1", diff --git a/frontend/src/sections/devices/cwmp/site-survey.js b/frontend/src/sections/devices/cwmp/site-survey.js index 1a97cfe..a3d5fa7 100644 --- a/frontend/src/sections/devices/cwmp/site-survey.js +++ b/frontend/src/sections/devices/cwmp/site-survey.js @@ -1,6 +1,3 @@ -import PropTypes from 'prop-types'; -import ArrowPathIcon from '@heroicons/react/24/solid/ArrowPathIcon'; -import ArrowRightIcon from '@heroicons/react/24/solid/ArrowRightIcon'; import { Button, Card, @@ -22,12 +19,11 @@ import { TableHead, TableRow, TableContainer, - Paper, - Container, - CircularProgress + CircularProgress, + ToggleButton, + ToggleButtonGroup } from '@mui/material'; -import { Scrollbar } from 'src/components/scrollbar'; -import { alpha, useTheme } from '@mui/material/styles'; +import { useTheme } from '@mui/material/styles'; import { Chart } from 'src/components/chart'; import ChartBarSquareIcon from '@heroicons/react/24/outline/ChartBarSquareIcon'; import ListBulletIcon from '@heroicons/react/24/outline/ListBulletIcon'; @@ -35,109 +31,255 @@ import { useRouter } from 'next/router'; import { Stack } from '@mui/system'; import { useEffect, useState } from 'react'; -const useChartOptions = () => { - const theme = useTheme(); - - return { - chart: { - background: 'transparent', - stacked: false, - toolbar: { - show: true - } - }, - colors: [ - theme.palette.graphics.dark, - theme.palette.graphics.darkest, - theme.palette.graphics.light, - theme.palette.graphics.main, - theme.palette.graphics.lightest, - ], - dataLabels: { - enabled: false - }, - fill: { - opacity: 1, - type: 'solid' - }, - grid: { - borderColor: theme.palette.divider, - strokeDashArray: 2, - xaxis: { - lines: { - show: false - } - }, - yaxis: { - lines: { - show: true - } - } - }, - legend: { - show: true - }, - plotOptions: { - bar: { - columnWidth: '40px' - } - }, - stroke: { - colors: ['transparent'], - show: true, - width: 2 - }, - theme: { - mode: theme.palette.mode - }, - xaxis: { - axisBorder: { - color: theme.palette.divider, - show: true - }, - axisTicks: { - color: theme.palette.divider, - show: true - }, - categories: [ - 'Jan', - 'Feb', - 'Mar', - 'Apr', - 'May', - 'Jun', - 'Jul', - 'Aug', - 'Sep', - 'Oct', - 'Nov', - 'Dec' - ], - labels: { - offsetY: 5, - style: { - colors: theme.palette.text.secondary - } - } - }, - yaxis: { - labels: { - formatter: (value) => (value > 0 ? `${value}K` : `${value}`), - offsetX: -10, - style: { - colors: theme.palette.text.secondary - } - } - } - }; -}; - export const SiteSurvey = (props) => { - const chartSeries = [{ name: 'This year', data: [18, 16, 5, 8, 3, 14, 14, 16, 17, 19, 18, 20] }, { name: 'Last year', data: [12, 11, 4, 6, 2, 9, 9, 10, 11, 12, 13, 13] }] + + // const getMaxChannel = () => { + // if (frequency == "2.4GHz") { + // return 13; + // } else { + // return 128; + // } + // } + + // const geMinChannel = () => { + // if (frequency == "2.4GHz") { + // return 0; + // } else { + // return 36; + // } + // } + + // const getChannelSpacing = () => { + // if (frequency == "2.4GHz") { + // return 1; + // } else { + // return 4; + // } + // } + + // const getChannelAmount = () => { + // if (frequency == "2.4GHz") { + // return 13; + // } else { + // return 20; + // } + // } + + const getCategories = () => { + + } const router = useRouter(); - const [content, setContent] = useState(null); + const [frequency, setFrequency] = useState("2.4GHz"); + const [view, setView] = useState("chart"); + const [content, setContent] = useState(null); + + const getSeries = () => { + let series = [] + content[frequency].map((network) => { + + let data = [] + + if (frequency == "2.4GHz") { + if (Number(network.bandwidth) == 20) { + data.push({"x": Number(network.channel) -2, "y": -100}) + data.push({"x": Number(network.channel), "y": Number(network.signal_level)}) + data.push({"x": Number(network.channel) +2, "y": -100}) + } + if (Number(network.bandwidth) == 40) { + data.push({"x": Number(network.channel) -4, "y": -100}) + data.push({"x": Number(network.channel), "y": Number(network.signal_level)}) + data.push({"x": Number(network.channel) +4, "y": -100}) + } + }else { + if (Number(network.bandwidth) == 20) { + data.push({"x": Number(network.channel) -4, "y": -100}) + data.push({"x": Number(network.channel), "y": Number(network.signal_level)}) + data.push({"x": Number(network.channel) +4, "y": -100}) + } + if (Number(network.bandwidth) == 40) { + data.push({"x": Number(network.channel) -8, "y": -100}) + data.push({"x": Number(network.channel), "y": Number(network.signal_level)}) + data.push({"x": Number(network.channel) +8, "y": -100}) + } + if (Number(network.bandwidth) == 80) { + data.push({"x": Number(network.channel) -16, "y": -100}) + data.push({"x": Number(network.channel), "y": Number(network.signal_level)}) + data.push({"x": Number(network.channel) +16, "y": -100}) + } + if (Number(network.bandwidth) == 160) { + data.push({"x": Number(network.channel) -32, "y": -100}) + data.push({"x": Number(network.channel), "y": Number(network.signal_level)}) + data.push({"x": Number(network.channel) +32, "y": -100}) + } + } + + let ssid = network.ssid + if ( ssid == "") { + ssid = " " + } + return series.push({ + name: ssid, + data: data + }) + }) + return series; + } + + const useChartOptions = () => { + const theme = useTheme(); + + return { + chart: { + background: 'transparent', + stacked: false, + toolbar: { + show: true + }, + zoom: { + enabled: false + }, + }, + title: { + text: 'Site Survey Results', + }, + // markers: { + // size: 5, + // hover: { + // size: 9 + // } + // }, + colors: [ + theme.palette.graphics.dark, + theme.palette.warning.main, + theme.palette.graphics.darkest, + theme.palette.graphics.main, + theme.palette.info.light, + theme.palette.graphics.lightest, + theme.palette.primary.main, + theme.palette.graphics.light, + theme.palette.error.light, + ], + dataLabels: { + enabled: false + }, + grid: { + //borderColor: theme.palette.divider, + strokeDashArray: 2, + xaxis: { + lines: { + show: true + } + }, + yaxis: { + lines: { + show: true + }, + }, + }, + legend: { + show: true, + showForSingleSeries: true, + }, + plotOptions: { + area: { + fillTo: 'end', + } + }, + stroke: { + show: true, + curve: 'smooth', + lineCap: 'round', + }, + theme: { + mode: theme.palette.mode + }, + yaxis: { + min: -100, + max: 0, + labels: { + formatter: function (value) { + return value + ' dBm'; + }, + //offsetY: -10, + style: { + //colors: theme.palette.text.secondary + } + }, + }, + // annotations: { + // xaxis: [ + // { + // x: 9, + // x2: 10, + // borderColor: '#0b54ff', + // label: { + // style: { + // color: 'black', + // }, + // text: 'Channel 10', + // offsetX: 45, + // borderColor: 'transparent', + // style: { + // background: 'transparent', + // color: theme.palette.text.secondary, + // fontSize: '17px', + // }, + // } + // } + // ] + // }, + // annotations: { + // points: [{ + // x: 9, + // y: -5, + // label: { + // borderColor: '#775DD0', + // offsetY: 0, + // style: { + // color: '#fff', + // background: '#775DD0', + // }, + // rotate: -45, + // text: 'Bananas are good', + // } + // }] + // }, + xaxis: { + // tickPlacement: 'on', + // tickAmount: getChannelAmount(), + tickPlacement: 'on', + labels: { + show: true, + style: { + //colors: theme.palette.text.secondary + }, + trim: true, + }, + // max: getMaxChannel(), + // min: geMinChannel(), + // stepSize: getChannelSpacing(), + //type: 'category', + //categories: [getCategories()], + type: 'numeric', + decimalsInFloat: 0, + }, + tooltip: { + x: { + show: true, + formatter: (seriesName) => "Channel "+ seriesName, + }, + followCursor: false, + intersect: false, + shared: true, + enabled: true, + onDatasetHover: { + highlightDataSeries: true, + } + } + }; + }; const chartOptions = useChartOptions(); @@ -181,23 +323,30 @@ export const SiteSurvey = (props) => { - - + + + + + + + + + + + { - + {view == "list" && @@ -273,31 +422,18 @@ export const SiteSurvey = (props) => {
- {/* - - - - - - - - } label="2.4GHz" /> - } label="5GHz" /> - - - - */} - + } + {view == "chart" && + + + + } : } );