Skip to content
Projects
Groups
Snippets
Help
Loading...
Sign in / Register
Toggle navigation
F
final-exam
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Packages
Packages
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Nawasan Wisitsingkhon
final-exam
Commits
bf1a944e
Commit
bf1a944e
authored
Oct 05, 2023
by
Nawasan Wisitsingkhon
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
graph sales in admin report
parent
9ff8cb19
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
64 additions
and
19 deletions
+64
-19
Chart.js
src/components/dashboard/Chart.js
+64
-19
No files found.
src/components/dashboard/Chart.js
View file @
bf1a944e
import
*
as
React
from
'react'
;
import
{
useTheme
}
from
'@mui/material/styles'
;
import
{
LineChart
,
Line
,
XAxis
,
YAxis
,
Label
,
ResponsiveContainer
}
from
'recharts'
;
import
Title
from
'./Title'
;
import
*
as
React
from
"react"
;
import
{
useTheme
}
from
"@mui/material/styles"
;
import
{
LineChart
,
Line
,
XAxis
,
YAxis
,
Label
,
ResponsiveContainer
,
}
from
"recharts"
;
import
Title
from
"./Title"
;
import
{
UserContext
}
from
"@/pages/_app"
;
import
{
AdminOrderContext
}
from
"../layout/AdminLayout"
;
// Generate Sales Data
function
createData
(
time
,
amount
)
{
return
{
time
,
amount
};
}
const
data
=
[
createData
(
'00:00'
,
0
),
createData
(
'03:00'
,
300
),
createData
(
'06:00'
,
600
),
createData
(
'09:00'
,
800
),
createData
(
'12:00'
,
1500
),
createData
(
'15:00'
,
2000
),
createData
(
'18:00'
,
2400
),
createData
(
'21:00'
,
2400
),
createData
(
'24:00'
,
undefined
),
];
export
default
function
Chart
()
{
const
theme
=
useTheme
();
const
user
=
React
.
useContext
(
UserContext
);
const
adminOrder
=
React
.
useContext
(
AdminOrderContext
);
const
[
month
,
setMonth
]
=
React
.
useState
(
""
);
const
[
year
,
setYear
]
=
React
.
useState
(
"2023"
);
const
[
data
,
setData
]
=
React
.
useState
([
createData
(
"00:00"
,
0
),
createData
(
"03:00"
,
300
),
createData
(
"06:00"
,
600
),
createData
(
"09:00"
,
800
),
createData
(
"12:00"
,
1500
),
createData
(
"15:00"
,
2000
),
createData
(
"18:00"
,
2400
),
createData
(
"21:00"
,
2400
),
createData
(
"24:00"
,
undefined
),
]);
React
.
useEffect
(()
=>
{
if
(
!
user
.
value
?.
token
||
adminOrder
.
value
.
length
===
0
)
return
;
const
date
=
new
Date
(
adminOrder
.
value
[
0
].
date
);
const
date_all
=
[];
const
date_price
=
{};
const
month_now
=
date
.
toLocaleString
(
"default"
,
{
month
:
"long"
});
const
year_now
=
date
.
getFullYear
();
for
(
let
i
=
0
;
i
<
adminOrder
.
value
.
length
;
i
++
)
{
let
d
=
new
Date
(
adminOrder
.
value
[
i
].
date
);
let
da
=
d
.
getDate
();
let
m
=
date
.
toLocaleString
(
"default"
,
{
month
:
"long"
});
let
y
=
date
.
getFullYear
();
if
(
m
===
month_now
&&
y
===
year_now
)
{
if
(
!
date_all
.
includes
(
da
))
date_all
.
push
(
da
);
if
(
date_price
[
da
])
{
date_price
[
da
]
+=
Number
(
adminOrder
.
value
[
i
].
total_price
);
}
else
{
date_price
[
da
]
=
Number
(
adminOrder
.
value
[
i
].
total_price
);
}
}
}
setMonth
(
month_now
);
setYear
(
year_now
);
date_all
.
reverse
()
let
graph
=
[]
date_all
.
map
(
dat
=>
{
graph
.
push
(
createData
(
dat
,
date_price
[
dat
]))
})
setData
(
graph
)
},
[
user
]);
return
(
<
React
.
Fragment
>
...
...
@@ -49,7 +95,7 @@ export default function Chart() {
angle
=
{
270
}
position
=
"left"
style
=
{{
textAnchor
:
'middle'
,
textAnchor
:
"middle"
,
fill
:
theme
.
palette
.
text
.
primary
,
...
theme
.
typography
.
body1
,
}}
...
...
@@ -68,4 +114,4 @@ export default function Chart() {
<
/ResponsiveContainer
>
<
/React.Fragment
>
);
}
\ No newline at end of file
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment