tudor.stanciu
/
cdn-frontend
mirror of https://dev.azure.com/tstanciu94/CDN/_git/CDN_Frontend
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

code format

master
Tudor Stanciu 2021-07-31 03:27:28 +03:00
parent 4145d24468
commit 3842e31dd8
7 changed files with 103 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Sidebar/Sidebar.js
View File

@ -77,7 +77,6 @@ function Sidebar({ location }) {
</Drawer> </Drawer>
); );
// ##################################################################
function handleWindowWidthChange() { function handleWindowWidthChange() {
var windowWidth = window.innerWidth; var windowWidth = window.innerWidth;
var breakpointWidth = theme.breakpoints.values.md; var breakpointWidth = theme.breakpoints.values.md;

2
src/components/Wrappers/Wrappers.js
View File

@ -121,8 +121,6 @@ function Button({ children, color, className, ...props }) {
export { Badge, Typography, Button }; export { Badge, Typography, Button };
// ########################################################################
function getColor(color, theme, brigtness = "main") { function getColor(color, theme, brigtness = "main") {
if (color && theme.palette[color] && theme.palette[color][brigtness]) { if (color && theme.palette[color] && theme.palette[color][brigtness]) {
return theme.palette[color][brigtness]; return theme.palette[color][brigtness];

43
src/pages/charts/Charts.js
View File

@ -12,7 +12,7 @@ import {
Sector, Sector,
Tooltip, Tooltip,
XAxis, XAxis,
YAxis, YAxis
} from "recharts"; } from "recharts";
// components // components
@ -26,51 +26,51 @@ const lineChartData = [
name: "Page A", name: "Page A",
uv: 4000, uv: 4000,
pv: 2400, pv: 2400,
amt: 2400, amt: 2400
}, },
{ {
name: "Page B", name: "Page B",
uv: 3000, uv: 3000,
pv: 1398, pv: 1398,
amt: 2210, amt: 2210
}, },
{ {
name: "Page C", name: "Page C",
uv: 2000, uv: 2000,
pv: 9800, pv: 9800,
amt: 2290, amt: 2290
}, },
{ {
name: "Page D", name: "Page D",
uv: 2780, uv: 2780,
pv: 3908, pv: 3908,
amt: 2000, amt: 2000
}, },
{ {
name: "Page E", name: "Page E",
uv: 1890, uv: 1890,
pv: 4800, pv: 4800,
amt: 2181, amt: 2181
}, },
{ {
name: "Page F", name: "Page F",
uv: 2390, uv: 2390,
pv: 3800, pv: 3800,
amt: 2500, amt: 2500
}, },
{ {
name: "Page G", name: "Page G",
uv: 3490, uv: 3490,
pv: 4300, pv: 4300,
amt: 2100, amt: 2100
}, }
]; ];
const pieChartData = [ const pieChartData = [
{ name: "Group A", value: 400 }, { name: "Group A", value: 400 },
{ name: "Group B", value: 300 }, { name: "Group B", value: 300 },
{ name: "Group C", value: 300 }, { name: "Group C", value: 300 },
{ name: "Group D", value: 200 }, { name: "Group D", value: 200 }
]; ];
export default function Charts(props) { export default function Charts(props) {
@ -81,15 +81,14 @@ export default function Charts(props) {
return ( return (
<> <>
<PageTitle title="Charts Page - Data Display" button={ <PageTitle
<Button title="Charts Page - Data Display"
variant="contained" button={
size="medium" <Button variant="contained" size="medium" color="secondary">
color="secondary" Latest Reports
> </Button>
Latest Reports }
</Button> />
} />
<Grid container spacing={4}> <Grid container spacing={4}>
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Widget title="Apex Line Chart" upperTitle noBodyPadding> <Widget title="Apex Line Chart" upperTitle noBodyPadding>
@ -112,7 +111,7 @@ export default function Charts(props) {
top: 5, top: 5,
right: 30, right: 30,
left: 20, left: 20,
bottom: 5, bottom: 5
}} }}
> >
<CartesianGrid strokeDasharray="3 3" /> <CartesianGrid strokeDasharray="3 3" />
@ -158,8 +157,6 @@ export default function Charts(props) {
); );
} }
// ################################################################
function renderActiveShape(props) { function renderActiveShape(props) {
var RADIAN = Math.PI / 180; var RADIAN = Math.PI / 180;
var { var {
@ -173,7 +170,7 @@ function renderActiveShape(props) {
fill, fill,
payload, payload,
percent, percent,
value, value
} = props; } = props;
var sin = Math.sin(-RADIAN * midAngle); var sin = Math.sin(-RADIAN * midAngle);
var cos = Math.cos(-RADIAN * midAngle); var cos = Math.cos(-RADIAN * midAngle);

49
src/pages/charts/components/ApexHeatmap.js
View File

@ -7,65 +7,65 @@ const series = [
name: "Metric1", name: "Metric1",
data: generateData(18, { data: generateData(18, {
min: 0, min: 0,
max: 90, max: 90
}), })
}, },
{ {
name: "Metric2", name: "Metric2",
data: generateData(18, { data: generateData(18, {
min: 0, min: 0,
max: 90, max: 90
}), })
}, },
{ {
name: "Metric3", name: "Metric3",
data: generateData(18, { data: generateData(18, {
min: 0, min: 0,
max: 90, max: 90
}), })
}, },
{ {
name: "Metric4", name: "Metric4",
data: generateData(18, { data: generateData(18, {
min: 0, min: 0,
max: 90, max: 90
}), })
}, },
{ {
name: "Metric5", name: "Metric5",
data: generateData(18, { data: generateData(18, {
min: 0, min: 0,
max: 90, max: 90
}), })
}, },
{ {
name: "Metric6", name: "Metric6",
data: generateData(18, { data: generateData(18, {
min: 0, min: 0,
max: 90, max: 90
}), })
}, },
{ {
name: "Metric7", name: "Metric7",
data: generateData(18, { data: generateData(18, {
min: 0, min: 0,
max: 90, max: 90
}), })
}, },
{ {
name: "Metric8", name: "Metric8",
data: generateData(18, { data: generateData(18, {
min: 0, min: 0,
max: 90, max: 90
}), })
}, },
{ {
name: "Metric9", name: "Metric9",
data: generateData(18, { data: generateData(18, {
min: 0, min: 0,
max: 90, max: 90
}), })
}, }
]; ];
export default function ApexLineChart() { export default function ApexLineChart() {
@ -81,7 +81,6 @@ export default function ApexLineChart() {
); );
} }
// ##################################################################
function generateData(count, yrange) { function generateData(count, yrange) {
var i = 0; var i = 0;
var series = []; var series = [];
@ -92,7 +91,7 @@ function generateData(count, yrange) {
series.push({ series.push({
x: x, x: x,
y: y, y: y
}); });
i++; i++;
} }
@ -104,12 +103,12 @@ function themeOptions(theme) {
return { return {
chart: { chart: {
toolbar: { toolbar: {
show: false, show: false
}, }
}, },
dataLabels: { dataLabels: {
enabled: false, enabled: false
}, },
colors: [theme.palette.primary.main], colors: [theme.palette.primary.main]
}; };
} }

29
src/pages/charts/components/ApexLineChart.js
View File

@ -5,12 +5,12 @@ import { useTheme } from "@material-ui/styles";
const series = [ const series = [
{ {
name: "series1", name: "series1",
data: [31, 40, 28, 51, 42, 109, 100], data: [31, 40, 28, 51, 42, 109, 100]
}, },
{ {
name: "series2", name: "series2",
data: [11, 32, 45, 32, 34, 52, 41], data: [11, 32, 45, 32, 34, 52, 41]
}, }
]; ];
export default function ApexLineChart() { export default function ApexLineChart() {
@ -26,14 +26,13 @@ export default function ApexLineChart() {
); );
} }
// ############################################################
function themeOptions(theme) { function themeOptions(theme) {
return { return {
dataLabels: { dataLabels: {
enabled: false, enabled: false
}, },
stroke: { stroke: {
curve: "smooth", curve: "smooth"
}, },
xaxis: { xaxis: {
type: "datetime", type: "datetime",
@ -44,25 +43,25 @@ function themeOptions(theme) {
"2018-09-19T03:30:00", "2018-09-19T03:30:00",
"2018-09-19T04:30:00", "2018-09-19T04:30:00",
"2018-09-19T05:30:00", "2018-09-19T05:30:00",
"2018-09-19T06:30:00", "2018-09-19T06:30:00"
], ]
}, },
tooltip: { tooltip: {
x: { x: {
format: "dd/MM/yy HH:mm", format: "dd/MM/yy HH:mm"
}, }
}, },
fill: { fill: {
colors: [theme.palette.primary.light, theme.palette.success.light], colors: [theme.palette.primary.light, theme.palette.success.light]
}, },
colors: [theme.palette.primary.main, theme.palette.success.main], colors: [theme.palette.primary.main, theme.palette.success.main],
chart: { chart: {
toolbar: { toolbar: {
show: false, show: false
}, }
}, },
legend: { legend: {
show: false, show: false
}, }
}; };
} }

80
src/pages/dashboard/Dashboard.js
View File

@ -19,7 +19,7 @@ import {
Pie, Pie,
Cell, Cell,
YAxis, YAxis,
XAxis, XAxis
} from "recharts"; } from "recharts";
// styles // styles
@ -39,7 +39,7 @@ const PieChartData = [
{ name: "Group A", value: 400, color: "primary" }, { name: "Group A", value: 400, color: "primary" },
{ name: "Group B", value: 300, color: "secondary" }, { name: "Group B", value: 300, color: "secondary" },
{ name: "Group C", value: 300, color: "warning" }, { name: "Group C", value: 300, color: "warning" },
{ name: "Group D", value: 200, color: "success" }, { name: "Group D", value: 200, color: "success" }
]; ];
export default function Dashboard(props) { export default function Dashboard(props) {
@ -51,13 +51,14 @@ export default function Dashboard(props) {
return ( return (
<> <>
<PageTitle title="Dashboard" button={<Button <PageTitle
variant="contained" title="Dashboard"
size="medium" button={
color="secondary" <Button variant="contained" size="medium" color="secondary">
> Latest Reports
Latest Reports </Button>
</Button>} /> }
/>
<Grid container spacing={4}> <Grid container spacing={4}>
<Grid item lg={3} md={4} sm={6} xs={12}> <Grid item lg={3} md={4} sm={6} xs={12}>
<Widget <Widget
@ -69,30 +70,30 @@ export default function Dashboard(props) {
<div className={classes.visitsNumberContainer}> <div className={classes.visitsNumberContainer}>
<Grid container item alignItems={"center"}> <Grid container item alignItems={"center"}>
<Grid item xs={6}> <Grid item xs={6}>
<Typography size="xl" weight="medium" noWrap> <Typography size="xl" weight="medium" noWrap>
12, 678 12, 678
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={6}> <Grid item xs={6}>
<LineChart <LineChart
width={100} width={100}
height={30} height={30}
data={[ data={[
{ value: 10 }, { value: 10 },
{ value: 15 }, { value: 15 },
{ value: 10 }, { value: 10 },
{ value: 17 }, { value: 17 },
{ value: 18 }, { value: 18 }
]} ]}
> >
<Line <Line
type="natural" type="natural"
dataKey="value" dataKey="value"
stroke={theme.palette.success.main} stroke={theme.palette.success.main}
strokeWidth={2} strokeWidth={2}
dot={false} dot={false}
/> />
</LineChart> </LineChart>
</Grid> </Grid>
</Grid> </Grid>
</div> </div>
@ -294,7 +295,9 @@ export default function Dashboard(props) {
{PieChartData.map(({ name, value, color }, index) => ( {PieChartData.map(({ name, value, color }, index) => (
<div key={color} className={classes.legendItemContainer}> <div key={color} className={classes.legendItemContainer}>
<Dot color={color} /> <Dot color={color} />
<Typography style={{ whiteSpace: "nowrap", fontSize: 12 }} > <Typography
style={{ whiteSpace: "nowrap", fontSize: 12 }}
>
&nbsp;{name}&nbsp; &nbsp;{name}&nbsp;
</Typography> </Typography>
<Typography color="text" colorBrightness="secondary"> <Typography color="text" colorBrightness="secondary">
@ -341,13 +344,13 @@ export default function Dashboard(props) {
</div> </div>
<Select <Select
value={mainChartState} value={mainChartState}
onChange={e => setMainChartState(e.target.value)} onChange={(e) => setMainChartState(e.target.value)}
input={ input={
<OutlinedInput <OutlinedInput
labelWidth={0} labelWidth={0}
classes={{ classes={{
notchedOutline: classes.mainChartSelectRoot, notchedOutline: classes.mainChartSelectRoot,
input: classes.mainChartSelect, input: classes.mainChartSelect
}} }}
/> />
} }
@ -372,7 +375,7 @@ export default function Dashboard(props) {
tickLine={false} tickLine={false}
/> />
<XAxis <XAxis
tickFormatter={i => i + 1} tickFormatter={(i) => i + 1}
tick={{ fill: theme.palette.text.hint + "80", fontSize: 14 }} tick={{ fill: theme.palette.text.hint + "80", fontSize: 14 }}
stroke={theme.palette.text.hint + "80"} stroke={theme.palette.text.hint + "80"}
tickLine={false} tickLine={false}
@ -400,14 +403,14 @@ export default function Dashboard(props) {
dot={{ dot={{
stroke: theme.palette.warning.dark, stroke: theme.palette.warning.dark,
strokeWidth: 2, strokeWidth: 2,
fill: theme.palette.warning.main, fill: theme.palette.warning.main
}} }}
/> />
</ComposedChart> </ComposedChart>
</ResponsiveContainer> </ResponsiveContainer>
</Widget> </Widget>
</Grid> </Grid>
{mock.bigStat.map(stat => ( {mock.bigStat.map((stat) => (
<Grid item md={4} sm={6} xs={12} key={stat.product}> <Grid item md={4} sm={6} xs={12} key={stat.product}>
<BigStat {...stat} /> <BigStat {...stat} />
</Grid> </Grid>
@ -427,7 +430,6 @@ export default function Dashboard(props) {
); );
} }
// #######################################################################
function getRandomData(length, min, max, multiplier = 10, maxDiff = 10) { function getRandomData(length, min, max, multiplier = 10, maxDiff = 10) {
var array = new Array(length).fill(); var array = new Array(length).fill();
let lastValue; let lastValue;
@ -459,7 +461,7 @@ function getMainChartData() {
resultArray.push({ resultArray.push({
tablet: tablet[i].value, tablet: tablet[i].value,
desktop: desktop[i].value, desktop: desktop[i].value,
mobile: mobile[i].value, mobile: mobile[i].value
}); });
} }

10
src/pages/dashboard/components/BigStat/BigStat.js
View File

@ -28,7 +28,7 @@ export default function BigStat(props) {
<Select <Select
value={value} value={value}
onChange={e => setValue(e.target.value)} onChange={(e) => setValue(e.target.value)}
input={ input={
<Input <Input
disableUnderline disableUnderline
@ -71,7 +71,7 @@ export default function BigStat(props) {
<Typography variant="h6">{registrations[value].value}</Typography> <Typography variant="h6">{registrations[value].value}</Typography>
<ArrowForwardIcon <ArrowForwardIcon
className={classnames(classes.profitArrow, { className={classnames(classes.profitArrow, {
[!registrations[value].profit]: classes.profitArrowDanger, [!registrations[value].profit]: classes.profitArrowDanger
})} })}
/> />
</Grid> </Grid>
@ -84,7 +84,7 @@ export default function BigStat(props) {
<Typography variant="h6">{bounce[value].value}%</Typography> <Typography variant="h6">{bounce[value].value}%</Typography>
<ArrowForwardIcon <ArrowForwardIcon
className={classnames(classes.profitArrow, { className={classnames(classes.profitArrow, {
[!registrations[value].profit]: classes.profitArrowDanger, [!registrations[value].profit]: classes.profitArrowDanger
})} })}
/> />
</Grid> </Grid>
@ -99,7 +99,7 @@ export default function BigStat(props) {
</Typography> </Typography>
<ArrowForwardIcon <ArrowForwardIcon
className={classnames(classes.profitArrow, { className={classnames(classes.profitArrow, {
[classes.profitArrowDanger]: !registrations[value].profit, [classes.profitArrowDanger]: !registrations[value].profit
})} })}
/> />
</Grid> </Grid>
@ -112,8 +112,6 @@ export default function BigStat(props) {
); );
} }
// #######################################################################
function getRandomData() { function getRandomData() {
return Array(7) return Array(7)
.fill() .fill()