Last sync of dashboard systems
This commit is contained in:
Frikky
@@ -1,275 +1,278 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
// import React, { useEffect, useState } from 'react';
|
||||||
import Switch from '@mui/material/Switch';
|
// import Switch from '@mui/material/Switch';
|
||||||
import { Typography, Button } from '@mui/material';
|
// import { Typography, Button } from '@mui/material';
|
||||||
import { useNavigate, Link, useParams } from "react-router-dom";
|
// import { useNavigate, Link, useParams } from "react-router-dom";
|
||||||
import { Bar } from 'react-chartjs-2';
|
// import { Bar } from 'react-chartjs-2';
|
||||||
import Grid from '@mui/material/Grid';
|
// import Grid from '@mui/material/Grid';
|
||||||
import SearchIcon from '@mui/icons-material/Search';
|
// import SearchIcon from '@mui/icons-material/Search';
|
||||||
import NewReleasesIcon from '@mui/icons-material/NewReleases';
|
// import NewReleasesIcon from '@mui/icons-material/NewReleases';
|
||||||
import MailOutlineIcon from '@mui/icons-material/MailOutline';
|
// import MailOutlineIcon from '@mui/icons-material/MailOutline';
|
||||||
|
|
||||||
const AnalyticsTab = (props) => {
|
const AnalyticsTab = (props) => {
|
||||||
const { userdata, globalUrl, serverside } = props;
|
const { userdata, globalUrl, serverside } = props;
|
||||||
const [checked, setChecked] = useState(false);
|
|
||||||
const [selectedOption, setSelectedOption] = useState('all');
|
|
||||||
const [expand, setExpand] = useState(false)
|
|
||||||
const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
|
|
||||||
|
|
||||||
const handleOptionChange = (option) => {
|
console.log("if you need this, work without react-rechartjs-2")
|
||||||
setSelectedOption(option);
|
|
||||||
// You can perform actions based on the selected option, such as filtering data
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleChange = (event) => {
|
// const [checked, setChecked] = useState(false);
|
||||||
setChecked(event.target.checked);
|
// const [selectedOption, setSelectedOption] = useState('all');
|
||||||
};
|
// const [expand, setExpand] = useState(false)
|
||||||
|
// const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
|
||||||
|
|
||||||
const allData = {
|
// const handleOptionChange = (option) => {
|
||||||
labels: ['Email analysis', 'Email Management', 'EDR to Ticket', 'Ticket Analysis'],
|
// setSelectedOption(option);
|
||||||
datasets: [
|
// // You can perform actions based on the selected option, such as filtering data
|
||||||
{
|
// };
|
||||||
label: 'Revisions',
|
|
||||||
data: [12, 19, 3, 5], // Data for revisions
|
|
||||||
backgroundColor: '#FF8444',
|
|
||||||
borderWidth: 1,
|
|
||||||
// borderRadius: 60,
|
|
||||||
barPercentage: 0.7,
|
|
||||||
categoryPercentage: 0.5,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Runs',
|
|
||||||
data: [8, 15, 5, 8], // Data for runs
|
|
||||||
backgroundColor: '#9747FF',
|
|
||||||
borderWidth: 1,
|
|
||||||
// borderRadius: 60,
|
|
||||||
barPercentage: 0.7,
|
|
||||||
categoryPercentage: 0.5
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
let data;
|
// const handleChange = (event) => {
|
||||||
if (selectedOption === 'all') {
|
// setChecked(event.target.checked);
|
||||||
data = allData;
|
// };
|
||||||
} else if (selectedOption === 'revisions') {
|
|
||||||
data = {
|
|
||||||
labels: allData.labels,
|
|
||||||
datasets: [allData.datasets[0]] // Show only revisions data
|
|
||||||
};
|
|
||||||
} else if (selectedOption === 'run') {
|
|
||||||
data = {
|
|
||||||
labels: allData.labels,
|
|
||||||
datasets: [allData.datasets[1]] // Show only runs data
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// Options for the chart
|
// const allData = {
|
||||||
const options = {
|
// labels: ['Email analysis', 'Email Management', 'EDR to Ticket', 'Ticket Analysis'],
|
||||||
scales: {
|
// datasets: [
|
||||||
yAxes: [
|
// {
|
||||||
{
|
// label: 'Revisions',
|
||||||
ticks: {
|
// data: [12, 19, 3, 5], // Data for revisions
|
||||||
beginAtZero: true
|
// backgroundColor: '#FF8444',
|
||||||
}
|
// borderWidth: 1,
|
||||||
}
|
// // borderRadius: 60,
|
||||||
]
|
// barPercentage: 0.7,
|
||||||
},
|
// categoryPercentage: 0.5,
|
||||||
};
|
// },
|
||||||
return (
|
// {
|
||||||
<div style={{ width: 1030, marginLeft: 20, marginTop:10, paddingRight: 17, paddingLeft: 17}}>
|
// label: 'Runs',
|
||||||
<div style={{ width: 985, display: 'flex', alignItems: 'start', paddingTop: 16, paddingBottom: '48px', fontSize: '16px', color: '#ffffff', backgroundColor: '#1A1A1A', borderRadius: '16px', }}>
|
// data: [8, 15, 5, 8], // Data for runs
|
||||||
<div style={{ marginLeft: 18 }}>Timeline</div>
|
// backgroundColor: '#9747FF',
|
||||||
</div>
|
// borderWidth: 1,
|
||||||
<div style={{ display: "flex", width: "100%", marginTop: 16 }}>
|
// // borderRadius: 60,
|
||||||
<div>
|
// barPercentage: 0.7,
|
||||||
<div style={{ width: 595, alignItems: 'start', paddingTop: 16, paddingBottom: checked ? 28 : 20, marginRight: 20, fontSize: '16px', color: '#ffffff', backgroundColor: '#1A1A1A', borderRadius: '16px', }}>
|
// categoryPercentage: 0.5
|
||||||
<div style={{ display: "flex", alignItems: "center" }}>
|
// }
|
||||||
<div style={{ marginLeft: 18, marginRight: 310 }}>Apps</div>
|
// ]
|
||||||
<Switch checked={checked}
|
// };
|
||||||
onChange={handleChange} /> Category
|
|
||||||
<div style={{ marginLeft: 16, borderLeft: "1px solid #D9D9D9", width: 10, height: 15 }} />
|
// let data;
|
||||||
<Link onClick={() => { setExpand(prevExpand => !prevExpand); }} style={{ color: "#FF8444" }}>Expand</Link>
|
// if (selectedOption === 'all') {
|
||||||
</div>
|
// data = allData;
|
||||||
{expand ? null :
|
// } else if (selectedOption === 'revisions') {
|
||||||
<div style={{ marginTop: 8, display: "flex" }}>
|
// data = {
|
||||||
<div style={{ marginLeft: 19, }}>
|
// labels: allData.labels,
|
||||||
<Typography style={{ fontSize: 13, color: "#9E9E9E", textAlign: "start" }}>Onboarding</Typography>
|
// datasets: [allData.datasets[0]] // Show only revisions data
|
||||||
<Grid container spacing={2} style={{ marginTop: 1 }} >
|
// };
|
||||||
<Grid item xs={4}>
|
// } else if (selectedOption === 'run') {
|
||||||
<div style={{ position: 'relative' }}>
|
// data = {
|
||||||
<img src="/images/adminpage/app1.svg" style={{ margin: 'auto' }} />
|
// labels: allData.labels,
|
||||||
{checked ?
|
// datasets: [allData.datasets[1]] // Show only runs data
|
||||||
<div style={{
|
// };
|
||||||
position: 'absolute',
|
// }
|
||||||
bottom: 0,
|
|
||||||
left: '50%',
|
// // Options for the chart
|
||||||
top: 30,
|
// const options = {
|
||||||
transform: 'translateX(-50%)',
|
// scales: {
|
||||||
backgroundColor: '#2f2f2f',
|
// yAxes: [
|
||||||
borderRadius: '50%',
|
// {
|
||||||
height: 24,
|
// ticks: {
|
||||||
width: 24,
|
// beginAtZero: true
|
||||||
transition: 'transform 0.5s ease',
|
// }
|
||||||
}}><SearchIcon style={{ width: 16, height: 16, marginTop: 5 }} /></div> :
|
// }
|
||||||
null
|
// ]
|
||||||
}
|
// },
|
||||||
</div>
|
// };
|
||||||
</Grid>
|
// return (
|
||||||
<Grid item xs={4}>
|
// <div style={{ width: 1030, marginLeft: 20, marginTop:10, paddingRight: 17, paddingLeft: 17}}>
|
||||||
<div style={{ position: 'relative' }}>
|
// <div style={{ width: 985, display: 'flex', alignItems: 'start', paddingTop: 16, paddingBottom: '48px', fontSize: '16px', color: '#ffffff', backgroundColor: '#1A1A1A', borderRadius: '16px', }}>
|
||||||
<img src="/images/adminpage/app1.svg" style={{ margin: 'auto' }} />
|
// <div style={{ marginLeft: 18 }}>Timeline</div>
|
||||||
{checked ?
|
// </div>
|
||||||
<div style={{
|
// <div style={{ display: "flex", width: "100%", marginTop: 16 }}>
|
||||||
position: 'absolute',
|
// <div>
|
||||||
bottom: 0,
|
// <div style={{ width: 595, alignItems: 'start', paddingTop: 16, paddingBottom: checked ? 28 : 20, marginRight: 20, fontSize: '16px', color: '#ffffff', backgroundColor: '#1A1A1A', borderRadius: '16px', }}>
|
||||||
left: '50%',
|
// <div style={{ display: "flex", alignItems: "center" }}>
|
||||||
top: 30,
|
// <div style={{ marginLeft: 18, marginRight: 310 }}>Apps</div>
|
||||||
transform: 'translateX(-50%)',
|
// <Switch checked={checked}
|
||||||
backgroundColor: '#2f2f2f',
|
// onChange={handleChange} /> Category
|
||||||
borderRadius: '50%',
|
// <div style={{ marginLeft: 16, borderLeft: "1px solid #D9D9D9", width: 10, height: 15 }} />
|
||||||
height: 24,
|
// <Link onClick={() => { setExpand(prevExpand => !prevExpand); }} style={{ color: "#FF8444" }}>Expand</Link>
|
||||||
width: 24,
|
// </div>
|
||||||
transition: 'transform 0.5s ease',
|
// {expand ? null :
|
||||||
}}><MailOutlineIcon style={{ width: 16, height: 16, marginTop: 5 }} /></div> :
|
// <div style={{ marginTop: 8, display: "flex" }}>
|
||||||
null
|
// <div style={{ marginLeft: 19, }}>
|
||||||
}
|
// <Typography style={{ fontSize: 13, color: "#9E9E9E", textAlign: "start" }}>Onboarding</Typography>
|
||||||
</div>
|
// <Grid container spacing={2} style={{ marginTop: 1 }} >
|
||||||
</Grid>
|
// <Grid item xs={4}>
|
||||||
<Grid item xs={4}>
|
// <div style={{ position: 'relative' }}>
|
||||||
<div style={{ position: 'relative' }}>
|
// <img src="/images/adminpage/app1.svg" style={{ margin: 'auto' }} />
|
||||||
<img src="/images/adminpage/app1.svg" style={{ margin: 'auto' }} />
|
// {checked ?
|
||||||
{checked ?
|
// <div style={{
|
||||||
<div style={{
|
// position: 'absolute',
|
||||||
position: 'absolute',
|
// bottom: 0,
|
||||||
bottom: 0,
|
// left: '50%',
|
||||||
left: '50%',
|
// top: 30,
|
||||||
top: 30,
|
// transform: 'translateX(-50%)',
|
||||||
transform: 'translateX(-50%)',
|
// backgroundColor: '#2f2f2f',
|
||||||
backgroundColor: '#2f2f2f',
|
// borderRadius: '50%',
|
||||||
borderRadius: '50%',
|
// height: 24,
|
||||||
height: 24,
|
// width: 24,
|
||||||
width: 24,
|
// transition: 'transform 0.5s ease',
|
||||||
transition: 'transform 0.5s ease',
|
// }}><SearchIcon style={{ width: 16, height: 16, marginTop: 5 }} /></div> :
|
||||||
}}><NewReleasesIcon style={{ width: 16, height: 16, marginTop: 5 }} /></div> :
|
// null
|
||||||
null
|
// }
|
||||||
}
|
// </div>
|
||||||
</div>
|
// </Grid>
|
||||||
</Grid>
|
// <Grid item xs={4}>
|
||||||
</Grid>
|
// <div style={{ position: 'relative' }}>
|
||||||
</div>
|
// <img src="/images/adminpage/app1.svg" style={{ margin: 'auto' }} />
|
||||||
<div style={{ borderLeft: "1px solid #494949", justifyContent: "center", alignItems: "center", marginTop: 40, marginLeft: 20, marginRight: 20, height: 40 }}></div>
|
// {checked ?
|
||||||
<div style={{}}>
|
// <div style={{
|
||||||
<Typography style={{ fontSize: 13, color: "#9E9E9E", textAlign: "start" }}>Other</Typography>
|
// position: 'absolute',
|
||||||
<Grid container spacing={2} style={{ marginTop: 1 }} >
|
// bottom: 0,
|
||||||
<Grid item xs={4}>
|
// left: '50%',
|
||||||
<div style={{ position: 'relative' }}>
|
// top: 30,
|
||||||
<img src="/images/adminpage/app1.svg" style={{ margin: 'auto' }} />
|
// transform: 'translateX(-50%)',
|
||||||
{checked ?
|
// backgroundColor: '#2f2f2f',
|
||||||
<div style={{
|
// borderRadius: '50%',
|
||||||
position: 'absolute',
|
// height: 24,
|
||||||
bottom: 0,
|
// width: 24,
|
||||||
left: '50%',
|
// transition: 'transform 0.5s ease',
|
||||||
top: 30,
|
// }}><MailOutlineIcon style={{ width: 16, height: 16, marginTop: 5 }} /></div> :
|
||||||
transform: 'translateX(-50%)',
|
// null
|
||||||
backgroundColor: '#2f2f2f',
|
// }
|
||||||
borderRadius: '50%',
|
// </div>
|
||||||
height: 24,
|
// </Grid>
|
||||||
width: 24,
|
// <Grid item xs={4}>
|
||||||
transition: 'transform 0.5s ease',
|
// <div style={{ position: 'relative' }}>
|
||||||
}}><SearchIcon style={{ width: 16, height: 16, marginTop: 5 }} /></div> :
|
// <img src="/images/adminpage/app1.svg" style={{ margin: 'auto' }} />
|
||||||
null
|
// {checked ?
|
||||||
}
|
// <div style={{
|
||||||
</div>
|
// position: 'absolute',
|
||||||
</Grid>
|
// bottom: 0,
|
||||||
<Grid item xs={4}>
|
// left: '50%',
|
||||||
<div style={{ position: 'relative' }}>
|
// top: 30,
|
||||||
<img src="/images/adminpage/app1.svg" style={{ margin: 'auto' }} />
|
// transform: 'translateX(-50%)',
|
||||||
{checked ?
|
// backgroundColor: '#2f2f2f',
|
||||||
<div style={{
|
// borderRadius: '50%',
|
||||||
position: 'absolute',
|
// height: 24,
|
||||||
bottom: 0,
|
// width: 24,
|
||||||
left: '50%',
|
// transition: 'transform 0.5s ease',
|
||||||
top: 30,
|
// }}><NewReleasesIcon style={{ width: 16, height: 16, marginTop: 5 }} /></div> :
|
||||||
transform: 'translateX(-50%)',
|
// null
|
||||||
backgroundColor: '#2f2f2f',
|
// }
|
||||||
borderRadius: '50%',
|
// </div>
|
||||||
height: 24,
|
// </Grid>
|
||||||
width: 24,
|
// </Grid>
|
||||||
transition: 'transform 10s ease-in-out',
|
// </div>
|
||||||
}}><NewReleasesIcon style={{ width: 16, height: 16, marginTop: 5 }} /></div> :
|
// <div style={{ borderLeft: "1px solid #494949", justifyContent: "center", alignItems: "center", marginTop: 40, marginLeft: 20, marginRight: 20, height: 40 }}></div>
|
||||||
null
|
// <div style={{}}>
|
||||||
}
|
// <Typography style={{ fontSize: 13, color: "#9E9E9E", textAlign: "start" }}>Other</Typography>
|
||||||
</div>
|
// <Grid container spacing={2} style={{ marginTop: 1 }} >
|
||||||
</Grid>
|
// <Grid item xs={4}>
|
||||||
<Grid item xs={4}>
|
// <div style={{ position: 'relative' }}>
|
||||||
<div style={{ position: 'relative' }}>
|
// <img src="/images/adminpage/app1.svg" style={{ margin: 'auto' }} />
|
||||||
<img src="/images/adminpage/app1.svg" style={{ margin: 'auto' }} />
|
// {checked ?
|
||||||
{checked ?
|
// <div style={{
|
||||||
<div style={{
|
// position: 'absolute',
|
||||||
position: 'absolute',
|
// bottom: 0,
|
||||||
bottom: 0,
|
// left: '50%',
|
||||||
left: '50%',
|
// top: 30,
|
||||||
top: 30,
|
// transform: 'translateX(-50%)',
|
||||||
transform: 'translateX(-50%)',
|
// backgroundColor: '#2f2f2f',
|
||||||
backgroundColor: '#2f2f2f',
|
// borderRadius: '50%',
|
||||||
borderRadius: '50%',
|
// height: 24,
|
||||||
height: 24,
|
// width: 24,
|
||||||
width: 24,
|
// transition: 'transform 0.5s ease',
|
||||||
transition: 'transform 10s ease-in-out',
|
// }}><SearchIcon style={{ width: 16, height: 16, marginTop: 5 }} /></div> :
|
||||||
}}><MailOutlineIcon style={{ width: 16, height: 16, marginTop: 5 }} /></div> :
|
// null
|
||||||
null
|
// }
|
||||||
}
|
// </div>
|
||||||
</div>
|
// </Grid>
|
||||||
</Grid>
|
// <Grid item xs={4}>
|
||||||
</Grid>
|
// <div style={{ position: 'relative' }}>
|
||||||
</div>
|
// <img src="/images/adminpage/app1.svg" style={{ margin: 'auto' }} />
|
||||||
</div>}
|
// {checked ?
|
||||||
</div>
|
// <div style={{
|
||||||
<div style={{ width: 595, height: 322, marginTop: 16, paddingTop: 16, paddingBottom: '48px', fontSize: '16px', color: '#ffffff', backgroundColor: '#1A1A1A', borderRadius: '16px', }}>
|
// position: 'absolute',
|
||||||
<div style={{ marginLeft: 18, textAlign: "start" }}>Workflows</div>
|
// bottom: 0,
|
||||||
<div style={{textAlign:"center"}}>
|
// left: '50%',
|
||||||
<Button style={{ textTransform: "capitalize", background: selectedOption === 'all' ? "#494949" : "#1A1A1A", borderRadius: selectedOption === 'all' ? 15 : null, color: "#FFFFFF" }} onClick={() => handleOptionChange('all')}>All</Button>
|
// top: 30,
|
||||||
<Button style={{ textTransform: "capitalize", background: selectedOption === 'revisions' ? "#494949" : "#1A1A1A", borderRadius: selectedOption === 'revisions' ? 15 : null, color: "#FFFFFF" }} onClick={() => handleOptionChange('revisions')}>Revisions</Button>
|
// transform: 'translateX(-50%)',
|
||||||
<Button style={{ textTransform: "capitalize", background: selectedOption === 'run' ? "#494949" : "#1A1A1A", borderRadius: selectedOption === 'run' ? 15 : null, color: "#FFFFFF" }} onClick={() => handleOptionChange('run')}>Runs</Button>
|
// backgroundColor: '#2f2f2f',
|
||||||
</div>
|
// borderRadius: '50%',
|
||||||
<Bar data={data} options={options} style={{ width: 400, marginLeft: 25, padding:20,marginTop: 10 }} />
|
// height: 24,
|
||||||
</div>
|
// width: 24,
|
||||||
</div>
|
// transition: 'transform 10s ease-in-out',
|
||||||
<div style={{ width: 375, height: 440, display: 'flex', alignItems: 'start', paddingTop: '16px', paddingBottom: '48px', fontSize: '16px', color: '#ffffff', backgroundColor: '#1A1A1A', borderRadius: '16px', }}>
|
// }}><NewReleasesIcon style={{ width: 16, height: 16, marginTop: 5 }} /></div> :
|
||||||
<div style={{ marginLeft: 18 }}>Insights</div>
|
// null
|
||||||
</div>
|
// }
|
||||||
</div>
|
// </div>
|
||||||
<div style={{ width: 985, paddingTop: 16, marginTop: 16, paddingBottom: '48px', fontSize: '16px', color: '#ffffff', backgroundColor: '#1A1A1A', borderRadius: '16px', }}>
|
// </Grid>
|
||||||
<div style={{ marginLeft: 18, textAlign: 'start', marginBottom: 16 }}>Sessions Overview</div>
|
// <Grid item xs={4}>
|
||||||
<div style={{ display: "flex", width: "100%", justifyContent: "center" }}>
|
// <div style={{ position: 'relative' }}>
|
||||||
<div style={{ fontSize: '16px',width: "30%", borderRadius: 8, background: '#212121', color: '#9CA3AF' }}>
|
// <img src="/images/adminpage/app1.svg" style={{ margin: 'auto' }} />
|
||||||
<div style={{ marginTop: 21, color: "#ffffff", marginLeft:20,fontSize: 16, fontWeight: "bold", }}>
|
// {checked ?
|
||||||
2.8 Hours
|
// <div style={{
|
||||||
</div>
|
// position: 'absolute',
|
||||||
<div style={{ marginTop: 13, marginBottom: 16, marginLeft:20, }}>
|
// bottom: 0,
|
||||||
Avg. Activity per session
|
// left: '50%',
|
||||||
</div>
|
// top: 30,
|
||||||
</div>
|
// transform: 'translateX(-50%)',
|
||||||
<div style={{ marginLeft: 16, fontSize: '16px', width: "30%", borderRadius: 8, background: '#212121', color: '#9CA3AF' }}>
|
// backgroundColor: '#2f2f2f',
|
||||||
<div style={{ marginTop: 21, marginLeft:20, color: "#ffffff", fontSize: 16, fontWeight: "bold", }}>
|
// borderRadius: '50%',
|
||||||
/usercases/edr to ticket
|
// height: 24,
|
||||||
</div>
|
// width: 24,
|
||||||
<div style={{ marginTop: 13, marginLeft:20, marginBottom: 16, }}>
|
// transition: 'transform 10s ease-in-out',
|
||||||
Last visited page
|
// }}><MailOutlineIcon style={{ width: 16, height: 16, marginTop: 5 }} /></div> :
|
||||||
</div>
|
// null
|
||||||
</div>
|
// }
|
||||||
<div style={{ marginLeft: 16, fontSize: '16px', width: "30%", borderRadius: 8, background: '#212121', color: '#9CA3AF' }}>
|
// </div>
|
||||||
<div style={{ marginTop: 21, marginLeft:20,color: "#ffffff", fontSize: 16, fontWeight: "bold", }}>
|
// </Grid>
|
||||||
/workflow/email management
|
// </Grid>
|
||||||
</div>
|
// </div>
|
||||||
<div style={{ marginTop: 13, marginLeft:20, marginBottom: 16, }}>
|
// </div>}
|
||||||
Most visited page
|
// </div>
|
||||||
</div>
|
// <div style={{ width: 595, height: 322, marginTop: 16, paddingTop: 16, paddingBottom: '48px', fontSize: '16px', color: '#ffffff', backgroundColor: '#1A1A1A', borderRadius: '16px', }}>
|
||||||
</div>
|
// <div style={{ marginLeft: 18, textAlign: "start" }}>Workflows</div>
|
||||||
</div>
|
// <div style={{textAlign:"center"}}>
|
||||||
</div>
|
// <Button style={{ textTransform: "capitalize", background: selectedOption === 'all' ? "#494949" : "#1A1A1A", borderRadius: selectedOption === 'all' ? 15 : null, color: "#FFFFFF" }} onClick={() => handleOptionChange('all')}>All</Button>
|
||||||
</div>
|
// <Button style={{ textTransform: "capitalize", background: selectedOption === 'revisions' ? "#494949" : "#1A1A1A", borderRadius: selectedOption === 'revisions' ? 15 : null, color: "#FFFFFF" }} onClick={() => handleOptionChange('revisions')}>Revisions</Button>
|
||||||
);
|
// <Button style={{ textTransform: "capitalize", background: selectedOption === 'run' ? "#494949" : "#1A1A1A", borderRadius: selectedOption === 'run' ? 15 : null, color: "#FFFFFF" }} onClick={() => handleOptionChange('run')}>Runs</Button>
|
||||||
|
// </div>
|
||||||
|
// <Bar data={data} options={options} style={{ width: 400, marginLeft: 25, padding:20,marginTop: 10 }} />
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// <div style={{ width: 375, height: 440, display: 'flex', alignItems: 'start', paddingTop: '16px', paddingBottom: '48px', fontSize: '16px', color: '#ffffff', backgroundColor: '#1A1A1A', borderRadius: '16px', }}>
|
||||||
|
// <div style={{ marginLeft: 18 }}>Insights</div>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// <div style={{ width: 985, paddingTop: 16, marginTop: 16, paddingBottom: '48px', fontSize: '16px', color: '#ffffff', backgroundColor: '#1A1A1A', borderRadius: '16px', }}>
|
||||||
|
// <div style={{ marginLeft: 18, textAlign: 'start', marginBottom: 16 }}>Sessions Overview</div>
|
||||||
|
// <div style={{ display: "flex", width: "100%", justifyContent: "center" }}>
|
||||||
|
// <div style={{ fontSize: '16px',width: "30%", borderRadius: 8, background: '#212121', color: '#9CA3AF' }}>
|
||||||
|
// <div style={{ marginTop: 21, color: "#ffffff", marginLeft:20,fontSize: 16, fontWeight: "bold", }}>
|
||||||
|
// 2.8 Hours
|
||||||
|
// </div>
|
||||||
|
// <div style={{ marginTop: 13, marginBottom: 16, marginLeft:20, }}>
|
||||||
|
// Avg. Activity per session
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// <div style={{ marginLeft: 16, fontSize: '16px', width: "30%", borderRadius: 8, background: '#212121', color: '#9CA3AF' }}>
|
||||||
|
// <div style={{ marginTop: 21, marginLeft:20, color: "#ffffff", fontSize: 16, fontWeight: "bold", }}>
|
||||||
|
// /usercases/edr to ticket
|
||||||
|
// </div>
|
||||||
|
// <div style={{ marginTop: 13, marginLeft:20, marginBottom: 16, }}>
|
||||||
|
// Last visited page
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// <div style={{ marginLeft: 16, fontSize: '16px', width: "30%", borderRadius: 8, background: '#212121', color: '#9CA3AF' }}>
|
||||||
|
// <div style={{ marginTop: 21, marginLeft:20,color: "#ffffff", fontSize: 16, fontWeight: "bold", }}>
|
||||||
|
// /workflow/email management
|
||||||
|
// </div>
|
||||||
|
// <div style={{ marginTop: 13, marginLeft:20, marginBottom: 16, }}>
|
||||||
|
// Most visited page
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// );
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AnalyticsTab;
|
export default AnalyticsTab;
|
||||||
|
|||||||
@@ -65,80 +65,83 @@ export const LoadStats = (globalUrl, cachekey) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const DashboardBarchart = (props) => {
|
const DashboardBarchart = (props) => {
|
||||||
const { timelineData, title, height, } = props;
|
// this is clearly unfinished and not worth my time.
|
||||||
var inputHeight = 15
|
// refer to health page to see how i made it work there w/o using chartjs
|
||||||
if (height !== undefined && height !== null) {
|
|
||||||
inputHeight = height
|
|
||||||
}
|
|
||||||
|
|
||||||
const barOptions = {
|
// const { timelineData, title, height, } = props;
|
||||||
plugins: {
|
// var inputHeight = 15
|
||||||
tooltip: {
|
// if (height !== undefined && height !== null) {
|
||||||
enabled: true, // Ensure tooltips are enabled
|
// inputHeight = height
|
||||||
},
|
// }
|
||||||
},
|
|
||||||
tooltips: {
|
|
||||||
mode: 'index',
|
|
||||||
intersect: false,
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
},
|
|
||||||
layout: {
|
|
||||||
padding: {
|
|
||||||
top: 0, // Adjust the top padding as needed
|
|
||||||
bottom: -10, // Adjust the bottom padding as needed
|
|
||||||
left: 0, // Adjust the left padding as needed
|
|
||||||
right: 0, // Adjust the right padding as needed
|
|
||||||
},
|
|
||||||
},
|
|
||||||
scales: {
|
|
||||||
y: {
|
|
||||||
beginAtZero: false,
|
|
||||||
},
|
|
||||||
yAxes: [{
|
|
||||||
ticks: {
|
|
||||||
display: false
|
|
||||||
},
|
|
||||||
beginAtZero: false,
|
|
||||||
}],
|
|
||||||
xAxes: [{
|
|
||||||
ticks: {
|
|
||||||
display: false
|
|
||||||
},
|
|
||||||
beginAtZero: false,
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
tooltips: {
|
|
||||||
callbacks: {
|
|
||||||
label: function (tooltipItem, data) {
|
|
||||||
const label = data.labels[tooltipItem.index]
|
|
||||||
return label.split('\n')[0]
|
|
||||||
},
|
|
||||||
afterLabel: function (tooltipItem, data) {
|
|
||||||
const amount = tooltipItem.value === undefined || tooltipItem.value === null ? 0 : tooltipItem.value
|
|
||||||
return `Amount: ${amount}`
|
|
||||||
},
|
|
||||||
title: function () {
|
|
||||||
return title === undefined ? '' : title
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
// const barOptions = {
|
||||||
<Bar
|
// plugins: {
|
||||||
data={timelineData}
|
// tooltip: {
|
||||||
options={barOptions}
|
// enabled: true, // Ensure tooltips are enabled
|
||||||
height={inputHeight}
|
// },
|
||||||
getElementAtEvent={(elements) => {
|
// },
|
||||||
if (elements && elements.length > 0) {
|
// tooltips: {
|
||||||
//toast("Click event")
|
// mode: 'index',
|
||||||
console.log("Clicked: ", elements)
|
// intersect: false,
|
||||||
}
|
// },
|
||||||
}}
|
// legend: {
|
||||||
/>
|
// display: false
|
||||||
)
|
// },
|
||||||
|
// layout: {
|
||||||
|
// padding: {
|
||||||
|
// top: 0, // Adjust the top padding as needed
|
||||||
|
// bottom: -10, // Adjust the bottom padding as needed
|
||||||
|
// left: 0, // Adjust the left padding as needed
|
||||||
|
// right: 0, // Adjust the right padding as needed
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// scales: {
|
||||||
|
// y: {
|
||||||
|
// beginAtZero: false,
|
||||||
|
// },
|
||||||
|
// yAxes: [{
|
||||||
|
// ticks: {
|
||||||
|
// display: false
|
||||||
|
// },
|
||||||
|
// beginAtZero: false,
|
||||||
|
// }],
|
||||||
|
// xAxes: [{
|
||||||
|
// ticks: {
|
||||||
|
// display: false
|
||||||
|
// },
|
||||||
|
// beginAtZero: false,
|
||||||
|
// }]
|
||||||
|
// },
|
||||||
|
// tooltips: {
|
||||||
|
// callbacks: {
|
||||||
|
// label: function (tooltipItem, data) {
|
||||||
|
// const label = data.labels[tooltipItem.index]
|
||||||
|
// return label.split('\n')[0]
|
||||||
|
// },
|
||||||
|
// afterLabel: function (tooltipItem, data) {
|
||||||
|
// const amount = tooltipItem.value === undefined || tooltipItem.value === null ? 0 : tooltipItem.value
|
||||||
|
// return `Amount: ${amount}`
|
||||||
|
// },
|
||||||
|
// title: function () {
|
||||||
|
// return title === undefined ? '' : title
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// return (
|
||||||
|
// <Bar
|
||||||
|
// data={timelineData}
|
||||||
|
// options={barOptions}
|
||||||
|
// height={inputHeight}
|
||||||
|
// getElementAtEvent={(elements) => {
|
||||||
|
// if (elements && elements.length > 0) {
|
||||||
|
// //toast("Click event")
|
||||||
|
// console.log("Clicked: ", elements)
|
||||||
|
// }
|
||||||
|
// }}
|
||||||
|
// />
|
||||||
|
// )
|
||||||
}
|
}
|
||||||
|
|
||||||
export default DashboardBarchart;
|
export default DashboardBarchart;
|
||||||
|
|||||||
@@ -3,7 +3,6 @@ import { Link, useNavigate, useLocation } from "react-router-dom";
|
|||||||
import Billing from "../components/Billing.jsx";
|
import Billing from "../components/Billing.jsx";
|
||||||
import Priorities from "../components/Priorities.jsx";
|
import Priorities from "../components/Priorities.jsx";
|
||||||
import Branding from "../components/Branding.jsx";
|
import Branding from "../components/Branding.jsx";
|
||||||
import AnalyticsTab from '../components/AnalyticsTab.jsx';
|
|
||||||
import EditOrgTab from '../components/EditOrgTab.jsx';
|
import EditOrgTab from '../components/EditOrgTab.jsx';
|
||||||
import CloudSyncTab from '../components/CloudSyncTab.jsx';
|
import CloudSyncTab from '../components/CloudSyncTab.jsx';
|
||||||
import SSOTab from "../components/ssoTab.jsx"
|
import SSOTab from "../components/ssoTab.jsx"
|
||||||
|
|||||||
@@ -6,12 +6,9 @@ import classNames from "classnames";
|
|||||||
import theme from '../theme.jsx';
|
import theme from '../theme.jsx';
|
||||||
import { useNavigate, Link, useParams } from "react-router-dom";
|
import { useNavigate, Link, useParams } from "react-router-dom";
|
||||||
|
|
||||||
// react plugin used to create charts
|
|
||||||
//import { Line, Bar } from "react-chartjs-2";
|
|
||||||
//import { useAlert
|
|
||||||
import { ToastContainer, toast } from "react-toastify"
|
import { ToastContainer, toast } from "react-toastify"
|
||||||
import Draggable from "react-draggable";
|
import Draggable from "react-draggable";
|
||||||
import DashboardBarchart, { LoadStats } from '../components/DashboardBarchart.jsx';
|
// import DashboardBarchart, { LoadStats } from '../components/DashboardBarchart.jsx';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Autocomplete,
|
Autocomplete,
|
||||||
@@ -311,9 +308,13 @@ const RadialChart = ({keys, setSelectedCategory}) => {
|
|||||||
//axis={<RadialAxis type="category" />}
|
//axis={<RadialAxis type="category" />}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 0x0elliot: not cleaning this up. this seems clearly experimental. not worth my time.
|
||||||
|
|
||||||
// This is the start of a dashboard that can be used.
|
// This is the start of a dashboard that can be used.
|
||||||
// What data do we fill in here? Idk
|
// What data do we fill in here? Idk
|
||||||
const Dashboard = (props) => {
|
const Dashboard = (props) => {
|
||||||
|
|
||||||
const { globalUrl, isLoggedIn } = props;
|
const { globalUrl, isLoggedIn } = props;
|
||||||
//const alert = useAlert();
|
//const alert = useAlert();
|
||||||
const [bigChartData, setBgChartData] = useState("data1");
|
const [bigChartData, setBgChartData] = useState("data1");
|
||||||
|
|||||||
Reference in New Issue
Block a user