cesnimda
252 lines
9.8 KiB
React
252 lines
9.8 KiB
React
import PropTypes from 'prop-types';
|
|
import { useState } from 'react';
|
|
|
|
// @mui
|
|
import { useTheme } from '@mui/material/styles';
|
|
import Grid from '@mui/material/Grid';
|
|
import Stack from '@mui/material/Stack';
|
|
import Tab from '@mui/material/Tab';
|
|
import Tabs from '@mui/material/Tabs';
|
|
import Typography from '@mui/material/Typography';
|
|
import Box from '@mui/material/Box';
|
|
|
|
// @project
|
|
import ProgressCard from '@/components/cards/ProgressCard';
|
|
import { TabsType } from '@/enum';
|
|
import { getRadiusStyles } from '@/utils/getRadiusStyles';
|
|
|
|
/*************************** TABS - DATA ***************************/
|
|
|
|
const sevenDaysData = [
|
|
{ title: 'Direct', value: '16,890', progress: { value: 45 } },
|
|
{ title: 'Google.com', value: '4,909', progress: { value: 56 } },
|
|
{ title: 'Remix.com', value: '550', progress: { value: 74 } },
|
|
{ title: 'dev.to', value: '140', progress: { value: 25 } },
|
|
{ title: 'acpc.api.ic.io', value: '8,675', progress: { value: 45 } },
|
|
{ title: 'wewe.uv.us', value: '4,900', progress: { value: 95 } }
|
|
];
|
|
|
|
const monthData = [
|
|
{ title: 'Direct', value: '67,560', progress: { value: 75 } },
|
|
{ title: 'Google.com', value: '19,636', progress: { value: 45 } },
|
|
{ title: 'Remix.com', value: '2,220', progress: { value: 10 } },
|
|
{ title: 'dev.to', value: '560', progress: { value: 89 } },
|
|
{ title: 'acpc.api.ic.io', value: '34,700', progress: { value: 95 } },
|
|
{ title: 'wewe.uv.us', value: '19,600', progress: { value: 74 } }
|
|
];
|
|
|
|
const yearData = [
|
|
{ title: 'Direct', value: '8,10,720', progress: { value: 52 } },
|
|
{ title: 'Google.com', value: '2,35,632', progress: { value: 45 } },
|
|
{ title: 'Remix.com', value: '26,640', progress: { value: 85 } },
|
|
{ title: 'dev.to', value: '6,720', progress: { value: 42 } },
|
|
{ title: 'acpc.api.ic.io', value: '4,16,400', progress: { value: 55 } },
|
|
{ title: 'wewe.uv.us', value: '2,35,200', progress: { value: 45 } }
|
|
];
|
|
|
|
const routesData = [
|
|
{ title: 'Home', value: '16,890', progress: { value: 15 } },
|
|
{ title: 'Pricing', value: '4,909', progress: { value: 78 } },
|
|
{ title: 'Change-log', value: '550', progress: { value: 25 } },
|
|
{ title: 'Feature', value: '140', progress: { value: 47 } },
|
|
{ title: 'Service', value: '8,675', progress: { value: 20 } },
|
|
{ title: 'Pricing', value: '4,900', progress: { value: 74 } }
|
|
];
|
|
|
|
const pageData = [
|
|
{ title: 'Home', value: '67,560', progress: { value: 45 } },
|
|
{ title: 'Pricing', value: '19,636', progress: { value: 25 } },
|
|
{ title: 'Change-log', value: '2,220', progress: { value: 74 } },
|
|
{ title: 'Feature', value: '560', progress: { value: 44 } },
|
|
{ title: 'Service', value: '34,700', progress: { value: 41 } },
|
|
{ title: 'Pricing', value: '19,600', progress: { value: 95 } }
|
|
];
|
|
|
|
const affiliateData = [
|
|
{ title: 'No-Refference', value: '16,890', progress: { value: 44 } },
|
|
{ title: 'Medium', value: '4,909', progress: { value: 90 } },
|
|
{ title: 'remaixblock.com', value: '550', progress: { value: 20 } },
|
|
{ title: 'remaix-pge-block-hero', value: '140', progress: { value: 85 } },
|
|
{ title: 'remaix-pge-block-banner', value: '8,675', progress: { value: 75 } },
|
|
{ title: 'dev.io', value: '4,900', progress: { value: 78 } }
|
|
];
|
|
|
|
const campaignData = [
|
|
{ title: 'No-Refference', value: '67,560', progress: { value: 25 } },
|
|
{ title: 'Medium', value: '19,636', progress: { value: 74 } },
|
|
{ title: 'remaixblock.com', value: '2,220', progress: { value: 65 } },
|
|
{ title: 'remaix-pge-block-hero', value: '560', progress: { value: 45 } },
|
|
{ title: 'remaix-pge-block-banner', value: '34,700', progress: { value: 85 } },
|
|
{ title: 'dev.io', value: '19,600', progress: { value: 47 } }
|
|
];
|
|
|
|
const marketingData = [
|
|
{ title: 'No-Refference', value: '8,10,720', progress: { value: 41 } },
|
|
{ title: 'Medium', value: '2,35,632', progress: { value: 35 } },
|
|
{ title: 'remaixblock.com', value: '26,640', progress: { value: 55 } },
|
|
{ title: 'remaix-pge-block-hero', value: '6,720', progress: { value: 75 } },
|
|
{ title: 'remaix-pge-block-banner', value: '4,16,400', progress: { value: 100 } },
|
|
{ title: 'dev.io', value: '2,35,200', progress: { value: 20 } }
|
|
];
|
|
|
|
/*************************** TABS - A11Y ***************************/
|
|
|
|
function a11yProps(value) {
|
|
return { value: value, id: `simple-tab-${value}`, 'aria-controls': `simple-tabpanel-${value}` };
|
|
}
|
|
|
|
/*************************** TABS - PANEL ***************************/
|
|
|
|
function TabPanel({ children, value, index, ...other }) {
|
|
return (
|
|
<div role="tabpanel" hidden={value !== index} id={`simple-tabpanel-${index}`} aria-labelledby={`simple-tab-${index}`} {...other}>
|
|
{value === index && <Box sx={{ pt: 1.5 }}>{children}</Box>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/*************************** TABS - CONTENT ***************************/
|
|
|
|
function TabContent({ data }) {
|
|
return (
|
|
<Stack sx={{ gap: 1.25 }}>
|
|
{data.map((item, index) => (
|
|
<ProgressCard key={index} {...item} />
|
|
))}
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
/*************************** CARDS - BORDER WITH RADIUS ***************************/
|
|
|
|
export function applyBorderWithRadius(radius, theme) {
|
|
return {
|
|
overflow: 'hidden',
|
|
'--Grid-borderWidth': '1px',
|
|
borderTop: 'var(--Grid-borderWidth) solid',
|
|
borderLeft: 'var(--Grid-borderWidth) solid',
|
|
borderColor: 'divider',
|
|
'& > div': {
|
|
overflow: 'hidden',
|
|
borderRight: 'var(--Grid-borderWidth) solid',
|
|
borderBottom: 'var(--Grid-borderWidth) solid',
|
|
borderColor: 'divider',
|
|
[theme.breakpoints.only('xs')]: {
|
|
'&:first-of-type': getRadiusStyles(radius, 'topLeft', 'topRight'),
|
|
'&:last-of-type': getRadiusStyles(radius, 'bottomLeft', 'bottomRight')
|
|
},
|
|
[theme.breakpoints.between('sm', 'md')]: {
|
|
'&:nth-of-type(1)': getRadiusStyles(radius, 'topLeft'),
|
|
'&:nth-of-type(2)': getRadiusStyles(radius, 'topRight'),
|
|
'&:nth-of-type(3)': getRadiusStyles(radius, 'bottomLeft', 'bottomRight')
|
|
},
|
|
[theme.breakpoints.up('md')]: {
|
|
'&:first-of-type': getRadiusStyles(radius, 'topLeft', 'bottomLeft'),
|
|
'&:last-of-type': getRadiusStyles(radius, 'topRight', 'bottomRight')
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
/*************************** CARDS - TOP REFERRERS ***************************/
|
|
export default function TopReferrers() {
|
|
const theme = useTheme();
|
|
const [httpReferrers, setHttpReferrers] = useState('days');
|
|
const [pages, setPages] = useState('routes');
|
|
const [sources, setSources] = useState('affiliate');
|
|
|
|
// Separate handleChange functions
|
|
const handleHTTPReferrers = (_event, newValue) => {
|
|
setHttpReferrers(newValue);
|
|
};
|
|
|
|
const handlePages = (_event, newValue) => {
|
|
setPages(newValue);
|
|
};
|
|
|
|
const handleSources = (_event, newValue) => {
|
|
setSources(newValue);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Grid container sx={{ borderRadius: 4, boxShadow: theme.vars.customShadows.section, ...applyBorderWithRadius(16, theme) }}>
|
|
<Grid size={{ xs: 12, sm: 6, md: 4 }}>
|
|
<Stack sx={{ gap: 2.5, p: 3 }}>
|
|
<Typography variant="subtitle1">Top HTTP Referrers</Typography>
|
|
<Box>
|
|
<Tabs
|
|
variant="fullWidth"
|
|
value={httpReferrers}
|
|
onChange={handleHTTPReferrers}
|
|
aria-label="basic tabs example"
|
|
type={TabsType.SEGMENTED}
|
|
>
|
|
<Tab label="Last 7 days" {...a11yProps('days')} />
|
|
<Tab label="Last Month" {...a11yProps('month')} />
|
|
<Tab label="Last Year" {...a11yProps('year')} />
|
|
</Tabs>
|
|
<TabPanel value={httpReferrers} index="days">
|
|
<TabContent data={sevenDaysData} />
|
|
</TabPanel>
|
|
<TabPanel value={httpReferrers} index="month">
|
|
<TabContent data={monthData} />
|
|
</TabPanel>
|
|
<TabPanel value={httpReferrers} index="year">
|
|
<TabContent data={yearData} />
|
|
</TabPanel>
|
|
</Box>
|
|
</Stack>
|
|
</Grid>
|
|
<Grid size={{ xs: 12, sm: 6, md: 4 }}>
|
|
<Stack sx={{ gap: 2.5, p: 3 }}>
|
|
<Typography variant="subtitle1">Top Pages</Typography>
|
|
<Box>
|
|
<Tabs variant="fullWidth" value={pages} onChange={handlePages} aria-label="basic tabs example" type={TabsType.SEGMENTED}>
|
|
<Tab label="Routes" {...a11yProps('routes')} />
|
|
<Tab label="Pages" {...a11yProps('pages')} />
|
|
</Tabs>
|
|
<TabPanel value={pages} index="routes">
|
|
<TabContent data={routesData} />
|
|
</TabPanel>
|
|
<TabPanel value={pages} index="pages">
|
|
<TabContent data={pageData} />
|
|
</TabPanel>
|
|
</Box>
|
|
</Stack>
|
|
</Grid>
|
|
<Grid size={{ xs: 12, md: 4 }}>
|
|
<Stack sx={{ gap: 2.5, p: 3 }}>
|
|
<Typography variant="subtitle1">Top Sources</Typography>
|
|
<Box>
|
|
<Tabs variant="fullWidth" value={sources} onChange={handleSources} aria-label="basic tabs example" type={TabsType.SEGMENTED}>
|
|
<Tab label="Affiliate" {...a11yProps('affiliate')} />
|
|
<Tab label="Campaign" {...a11yProps('campaign')} />
|
|
<Tab label="Marketing" {...a11yProps('marketing')} />
|
|
</Tabs>
|
|
<TabPanel value={sources} index="affiliate">
|
|
<TabContent data={affiliateData} />
|
|
</TabPanel>
|
|
<TabPanel value={sources} index="campaign">
|
|
<TabContent data={campaignData} />
|
|
</TabPanel>
|
|
<TabPanel value={sources} index="marketing">
|
|
<TabContent data={marketingData} />
|
|
</TabPanel>
|
|
</Box>
|
|
</Stack>
|
|
</Grid>
|
|
</Grid>
|
|
</>
|
|
);
|
|
}
|
|
|
|
TabPanel.propTypes = {
|
|
children: PropTypes.any,
|
|
value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
index: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
other: PropTypes.any
|
|
};
|
|
|
|
TabContent.propTypes = { data: PropTypes.array };
|