Untitled
unknown
plain_text
2 months ago
13 kB
2
Indexable
Never
import React, { useState, useEffect } from "react"; import { Card, CardContent, Box, Typography, NativeSelect, MenuItem, InputLabel, FormControl } from "@mui/material"; import styles from "../../../styles/Forms.module.css"; import dynamic from "next/dynamic"; const Chart = dynamic(() => import("react-apexcharts"), { ssr: false }); import axios from "api/axios"; import useSWR from "swr"; import Select1 from "@mui/material/Select"; import CustomWidthTooltip from "@/components/CustomToolTip"; import useMediaQuery from "@mui/material/useMediaQuery"; import { IconButton, TextField, Select } from "@mui/material"; import { AiOutlineInfoCircle } from "react-icons/ai"; import "@fontsource/poppins/600.css"; // const Modal = ({ isOpen, onClose, content }) => { // return isOpen ? ( // <div style={{ position: "absolute", background: "#fff", boxShadow: "rgba(0, 0, 0, 0.24) 0px 3px 8px", zIndex: "10", marginLeft: "2%", width: "30%" }}> // <div> // <div style={{ display: "flex", margin: "5px" }}> // <span style={{ fontFamily: "Poppins", fontSize: "20px", paddingLeft: "10px", color: "#333" }} >Select Time duration</span> // {/* <h5>Select Time duration</h5> */} // <div style={{ marginLeft: "auto", cursor: "pointer", color:"red" }} onClick={onClose}>×</div> // </div> // <div className="modal-content"> // {content} // </div> // </div> // </div> // ) : null; // }; const APICalls = () => { const [apiData, setApiData] = useState(""); const [period, setPeriod] = useState(''); const handleChange = (event) => { setPeriod(event.target.value); }; const isMobile = useMediaQuery("(max-width: 600px)"); var countUnit = "" const tickAmount = 5 const countUnitIndex = { "K": [3, 6], "M": [6, 9], "B": [9, 12], } const getCountUnit = (value) => { var strLen = String(value).length var unit = "" for (let key in countUnitIndex) { if (strLen > countUnitIndex[key][0] && strLen <= countUnitIndex[key][1]) { unit = key break } } return unit } const chartMaxCount = (max) => { countUnit = getCountUnit(max) var maxCount = 10 ** String(max).length var maxCopy = max if (countUnit !== "") { maxCount = maxCount / (10 ** countUnitIndex[countUnit][0]) maxCopy = maxCopy / (10 ** countUnitIndex[countUnit][0]) } for (let i = 0; i < 2; i++) { let halfCount = maxCount / 2 if (halfCount > maxCopy) { maxCount = halfCount } } if (countUnit !== "") { maxCount = Math.ceil(maxCount / tickAmount) * (tickAmount) * (10 ** countUnitIndex[countUnit][0]) } else { maxCount = Math.ceil(maxCount / tickAmount) * (tickAmount) } return maxCount } // const fetchInitialData = () => { // // Step 4 (continued): Perform the initial API request // // Replace 'apiEndpoint' with your API endpoint // fetch( // "http://localhost:5000" + // `${process.env.NEXT_PUBLIC_GET_API_CALLS + "?duration=1&unit=month"}`, // (url) => // axios.get( // url, // { // headers: { // Authorization: sessionStorage.getItem( // `${process.env.NEXT_PUBLIC_SESSION_KEY}` // ), // }, // }) // ) // .then(response => { // setApiData(response); // }) // .catch(error => console.error('Error:', error)); // }; const [timeDurationOptions, settimeDurationOptions] = useState([ { status: false, value: '1', duration: 'hour', displayval: '1h' }, { status: false, value: '3', duration: 'hour', displayval: '3h' }, { status: false, value: '12', duration: 'hour', displayval: '12h' }, { status: true, value: '1', duration: 'day', displayval: '1d' }, { status: false, value: '3', duration: 'day', displayval: '3d' }, { status: false, value: '7', duration: 'day', displayval: '1w' }, { status: false, value: '1', duration: 'month', displayval: '1m' }, { status: false, value: '3', duration: 'month', displayval: '3m' }, { status: false, value: '6', duration: 'month', displayval: '6m' }, { status: false, value: '1', duration: 'year', displayval: '1y' }, ]); const [options, setOptions] = useState({ chart: { height: 350, zoom: { enabled: false, }, }, xaxis: { type: 'datetime', min: 0,//unixTimestamp - 5000, // Set the fixed minimum value max: 0,//unixTimestamp + 25000, labels: { show: true, } }, }); const [series, setSeries] = useState([ { name: 'API Calls', data: [ // Add more data points here. ], }, ]); const [chartType, setChartType] = useState('line'); const [lineActive, setlineActive] = useState(true); const toggleChartType = () => { setChartType(chartType === 'line' ? 'bar' : 'line'); setlineActive(lineActive === true ? false : true); }; const [duration, setDuration] = useState(''); const [timeUnit, setTimeUnit] = useState('minutes'); const handleDurationChange = (event) => { setDuration(event.target.value); }; const handleTimeUnitChange = (event) => { setTimeUnit(event.target.value); }; const handleSubmit = () => { }; const [currentDurationId, setcurrentDurationId] = useState('1d'); const [loading, setLoading] = useState(true); const changeTimeDuration = (index) => { setLoading(true); var updatedList = [...timeDurationOptions]; updatedList.forEach((item, i) => { if (i !== index) { item['status'] = false; } }); updatedList[index]['status'] = true; settimeDurationOptions(updatedList); var url = process.env.NEXT_PUBLIC_GET_API_CALLS + "?duration=" + updatedList[index]['value'] + "&unit=" + updatedList[index]['duration']; axios.get(url, { headers: { Authorization: sessionStorage.getItem( `${process.env.NEXT_PUBLIC_SESSION_KEY}` ), }, }) .then((response) => { response.data; setApiData(response.data); console.log("Updated API Data"); var newoptions = options; newoptions['xaxis']['min'] = Date.parse(response.data.window_open_at); newoptions['xaxis']['max'] = Date.parse(response.data.window_close_at); setOptions(newoptions); const seriesData = [ { name: 'API Calls', data: Array.isArray(response.data.data) ? response.data.data.map((item) => [ Date.parse(item.time_window_open_at), // Convert the date string to a Date object item.count, ]) : [], }, ] setSeries(seriesData); setLoading(false); setcurrentDurationId(updatedList[index]['displayval']); // console.log(options); // console.log(series); }) .catch((err) => { throw err; }); // console.log(apiData); // var newoptions = options; // newoptions['xaxis']['min'] = Date.parse(apiData.window_open_at); // newoptions['xaxis']['max'] = Date.parse(apiData.window_close_at); // setOptions(newoptions); // console.log("Options"); // console.log(apiData.window_open_at) // console.log(apiData.window_close_at); // setcurrentDurationId(updatedList[index]['displayval']); }; useSWR( `${process.env.NEXT_PUBLIC_GET_API_CALLS + "?duration=1&unit=day"}`, (url) => axios.get(url, { headers: { Authorization: sessionStorage.getItem( `${process.env.NEXT_PUBLIC_SESSION_KEY}` ), }, }) .then((response) => { response.data; setApiData(response.data); console.log("Initial API Data"); console.log(response.data); var newoptions = options; newoptions['xaxis']['min'] = Date.parse(response.data.window_open_at); newoptions['xaxis']['max'] = Date.parse(response.data.window_close_at); setOptions(newoptions); const seriesData = [ { name: 'API Calls', data: Array.isArray(response.data.data) ? response.data.data.map((item) => [ Date.parse(item.time_window_open_at), // Convert the date string to a Date object item.count, ]) : [], }, ] setSeries(seriesData); setLoading(false); // setLoading(false); }) .catch((err) => { throw err; }) ); return ( <div style={{ background: "#fff", height: "26rem" }}> <Box p={2} display="flex" alignItems="center" backgroundColor={"#fff"} gap={"10px"} > <span style={{ fontFamily: "Poppins", fontSize: "20px", paddingLeft: "10px", color: "#333" }} >API calls</span> <CustomWidthTooltip title={"This chart provides a visual representation of the monthly volume of API calls, allowing you to easily track usage of APIs over time."} placement={isMobile ? "bottom" : "right-start"} arrow > <IconButton className="IconButton"><AiOutlineInfoCircle className="InfoCircle" /></IconButton> </CustomWidthTooltip> <div style={{ display: "flex", gap: "5px", padding: "2px", height: "35px", marginLeft: "auto" }}> {timeDurationOptions.map((timeOption, index) => ( <div className={styles.TimeButton} style={{ color: timeOption.status ? "#26a0fc" : "#000" }} onClick={() => changeTimeDuration(index)}> {timeOption.displayval} </div> ))} </div> <div style={{ display: "flex", padding: "2px", height: "35px", cursor: "pointer" }} onClick={toggleChartType}> <div className={styles.toggleChartButton} style={{ background: lineActive ? '#e4e4e4' : '#fff', }} > <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 500 500" fill="none"> <path d="M71.5 288L187 139L310.5 230L430.5 39" stroke="#26a0fc" stroke-width="23" stroke-linecap="round" stroke-linejoin="round" /> <rect y="444" width="500" height="56" rx="15" fill="#26a0fc" /> <circle cx="430" cy="40" r="40" fill="#26a0fc" /> <circle cx="310" cy="230" r="40" fill="#26a0fc" /> <circle cx="190" cy="140" r="40" fill="#26a0fc" /> <circle cx="70" cy="285" r="40" fill="#26a0fc" /> </svg> </div> <div className={styles.toggleChartButton} style={{ background: lineActive ? '#fff' : '#e4e4e4', }} > <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 500 500" fill="none"> <path d="M25 260C25 251.716 31.7157 245 40 245H100C108.284 245 115 251.716 115 260V444H25V260Z" fill="#26a0fc" /> <path d="M145 115C145 106.716 151.716 100 160 100H220C228.284 100 235 106.716 235 115V444H145V115Z" fill="#26a0fc" /> <path d="M265 198C265 189.716 271.716 183 280 183H340C348.284 183 355 189.716 355 198V444H265V198Z" fill="#26a0fc" /> <path d="M385 15C385 6.71573 391.716 0 400 0H460C468.284 0 475 6.71573 475 15V444H385V15Z" fill="#26a0fc" /> <rect y="444" width="500" height="56" rx="15" fill="#26a0fc" /> </svg> </div> </div> </Box> <div className={styles.chartsMain}> <div className={styles.charts}> {loading ? ( // Display a loading indicator <div>Loading...</div> ) : ( <Chart key={chartType + currentDurationId} options={options} series={series} type={chartType} height={"300px"} /> ) } </div> </div> </div> ); }; export default APICalls;