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>
);
// ##################################################################
function handleWindowWidthChange() {
var windowWidth = window.innerWidth;
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 };
// ########################################################################
function getColor(color, theme, brigtness = "main") {
if (color && theme.palette[color] && theme.palette[color][brigtness]) {
return theme.palette[color][brigtness];

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

@ -12,7 +12,7 @@ import {
Sector,
Tooltip,
XAxis,
YAxis,
YAxis
} from "recharts";
// components
@ -26,51 +26,51 @@ const lineChartData = [
name: "Page A",
uv: 4000,
pv: 2400,
amt: 2400,
amt: 2400
},
{
name: "Page B",
uv: 3000,
pv: 1398,
amt: 2210,
amt: 2210
},
{
name: "Page C",
uv: 2000,
pv: 9800,
amt: 2290,
amt: 2290
},
{
name: "Page D",
uv: 2780,
pv: 3908,
amt: 2000,
amt: 2000
},
{
name: "Page E",
uv: 1890,
pv: 4800,
amt: 2181,
amt: 2181
},
{
name: "Page F",
uv: 2390,
pv: 3800,
amt: 2500,
amt: 2500
},
{
name: "Page G",
uv: 3490,
pv: 4300,
amt: 2100,
},
amt: 2100
}
];
const pieChartData = [
{ name: "Group A", value: 400 },
{ name: "Group B", value: 300 },
{ name: "Group C", value: 300 },
{ name: "Group D", value: 200 },
{ name: "Group D", value: 200 }
];
export default function Charts(props) {
@ -81,15 +81,14 @@ export default function Charts(props) {
return (
<>
<PageTitle title="Charts Page - Data Display" button={
<Button
variant="contained"
size="medium"
color="secondary"
>
Latest Reports
</Button>
} />
<PageTitle
title="Charts Page - Data Display"
button={
<Button variant="contained" size="medium" color="secondary">
Latest Reports
</Button>
}
/>
<Grid container spacing={4}>
<Grid item xs={12} md={6}>
<Widget title="Apex Line Chart" upperTitle noBodyPadding>
@ -112,7 +111,7 @@ export default function Charts(props) {
top: 5,
right: 30,
left: 20,
bottom: 5,
bottom: 5
}}
>
<CartesianGrid strokeDasharray="3 3" />
@ -158,8 +157,6 @@ export default function Charts(props) {
);
}
// ################################################################
function renderActiveShape(props) {
var RADIAN = Math.PI / 180;
var {
@ -173,7 +170,7 @@ function renderActiveShape(props) {
fill,
payload,
percent,
value,
value
} = props;
var sin = Math.sin(-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",
data: generateData(18, {
min: 0,
max: 90,
}),
max: 90
})
},
{
name: "Metric2",
data: generateData(18, {
min: 0,
max: 90,
}),
max: 90
})
},
{
name: "Metric3",
data: generateData(18, {
min: 0,
max: 90,
}),
max: 90
})
},
{
name: "Metric4",
data: generateData(18, {
min: 0,
max: 90,
}),
max: 90
})
},
{
name: "Metric5",
data: generateData(18, {
min: 0,
max: 90,
}),
max: 90
})
},
{
name: "Metric6",
data: generateData(18, {
min: 0,
max: 90,
}),
max: 90
})
},
{
name: "Metric7",
data: generateData(18, {
min: 0,
max: 90,
}),
max: 90
})
},
{
name: "Metric8",
data: generateData(18, {
min: 0,
max: 90,
}),
max: 90
})
},
{
name: "Metric9",
data: generateData(18, {
min: 0,
max: 90,
}),
},
max: 90
})
}
];
export default function ApexLineChart() {
@ -81,7 +81,6 @@ export default function ApexLineChart() {
);
}
// ##################################################################
function generateData(count, yrange) {
var i = 0;
var series = [];
@ -92,7 +91,7 @@ function generateData(count, yrange) {
series.push({
x: x,
y: y,
y: y
});
i++;
}
@ -104,12 +103,12 @@ function themeOptions(theme) {
return {
chart: {
toolbar: {
show: false,
},
show: false
}
},
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 = [
{
name: "series1",
data: [31, 40, 28, 51, 42, 109, 100],
data: [31, 40, 28, 51, 42, 109, 100]
},
{
name: "series2",
data: [11, 32, 45, 32, 34, 52, 41],
},
data: [11, 32, 45, 32, 34, 52, 41]
}
];
export default function ApexLineChart() {
@ -26,14 +26,13 @@ export default function ApexLineChart() {
);
}
// ############################################################
function themeOptions(theme) {
return {
dataLabels: {
enabled: false,
enabled: false
},
stroke: {
curve: "smooth",
curve: "smooth"
},
xaxis: {
type: "datetime",
@ -44,25 +43,25 @@ function themeOptions(theme) {
"2018-09-19T03:30:00",
"2018-09-19T04:30:00",
"2018-09-19T05:30:00",
"2018-09-19T06:30:00",
],
"2018-09-19T06:30:00"
]
},
tooltip: {
x: {
format: "dd/MM/yy HH:mm",
},
format: "dd/MM/yy HH:mm"
}
},
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],
chart: {
toolbar: {
show: false,
},
show: false
}
},
legend: {
show: false,
},
show: false
}
};
}

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

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