Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
T
Tia-dev
Project
Project
Details
Activity
Releases
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
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Dida Adams Arizona
Tia-dev
Commits
4ad98e6e
Commit
4ad98e6e
authored
Mar 16, 2021
by
d.arizona
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
deploy demo
parent
35a51ad9
Changes
1
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
50 additions
and
45 deletions
+50
-45
HomePage.js
src/container/HomePage.js
+50
-45
No files found.
src/container/HomePage.js
View file @
4ad98e6e
...
...
@@ -46,12 +46,13 @@ class HomePage extends Component {
accessMR
:
false
,
company
:
[],
dataDashboardCAT
:
[],
loading2
:
false
loading2
:
false
,
loading3
:
false
}
}
componentDidMount
()
{
this
.
setState
({
loading
:
true
,
loading2
:
true
})
this
.
setState
({
loading
:
true
,
loading2
:
true
,
loading3
:
true
})
let
userId
=
localStorage
.
getItem
(
Constant
.
USER
)
api
.
create
().
getDetailUser
(
userId
).
then
((
response
)
=>
{
if
(
response
.
data
)
{
...
...
@@ -137,7 +138,11 @@ class HomePage extends Component {
}
})
console
.
log
(
data
)
this
.
setState
({
dataDashboardCAT
:
data
,
loading
:
false
,
loading2
:
false
})
this
.
setState
({
dataDashboardCAT
:
data
,
loading
:
false
,
loading2
:
false
},
()
=>
{
setTimeout
(()
=>
{
this
.
setState
({
loading3
:
false
})
},
1000
);
})
}
})
}
...
...
@@ -588,7 +593,7 @@ class HomePage extends Component {
let
tahun
=
new
Date
().
getFullYear
()
return
(
<
div
style
=
{{
flex
:
1
,
backgroundColor
:
'#f8f8f8'
,
minHeight
:
this
.
props
.
height
}}
>
{
this
.
state
.
loading
&&
loadingComponent
}
{
(
this
.
state
.
loading
||
this
.
state
.
loading2
||
this
.
state
.
loading3
)
&&
loadingComponent
}
{
this
.
state
.
isApprover
===
true
?
<
div
>
<
div
className
=
{
"main-color"
}
style
=
{{
height
:
78
,
flex
:
1
,
display
:
'flex'
,
alignItems
:
'center'
,
paddingLeft
:
20
}}
>
...
...
@@ -601,7 +606,7 @@ class HomePage extends Component {
<
Autocomplete
{...
this
.
state
.
listMonthCAT
}
id
=
"monthCAT"
onChange
=
{(
event
,
newInputValue
)
=>
this
.
setState
({
monthCAT
:
newInputValue
,
loading
:
true
},
()
=>
{
onChange
=
{(
event
,
newInputValue
)
=>
this
.
setState
({
monthCAT
:
newInputValue
,
loading
:
true
,
loading3
:
true
},
()
=>
{
this
.
getDashboardCAT
()
// if (this.state.isApprover === true) {
// this.getCompanySubmitted()
...
...
@@ -618,7 +623,7 @@ class HomePage extends Component {
<
Autocomplete
{...
this
.
state
.
listPeriodeCAT
}
id
=
"periodeCAT"
onChange
=
{(
event
,
newInputValue
)
=>
this
.
setState
({
periodeCAT
:
newInputValue
,
loading
:
true
},
()
=>
{
onChange
=
{(
event
,
newInputValue
)
=>
this
.
setState
({
periodeCAT
:
newInputValue
,
loading
:
true
,
loading3
:
true
},
()
=>
{
this
.
getDashboardCAT
()
// if (this.state.isApprover === true) {
// this.getCompanySubmitted()
...
...
@@ -633,48 +638,48 @@ class HomePage extends Component {
value
=
{
this
.
state
.
periodeCAT
}
/
>
<
/div
>
{
this
.
state
.
dataDashboardCAT
.
map
((
item
s
,
indexs
)
=>
{
{
this
.
state
.
dataDashboardCAT
.
map
((
item
,
index
)
=>
{
return
(
<
div
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'16px'
,
marginTop
:
20
}}
>
{
item
s
.
item_business
}
<
/Typography
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'16px'
,
marginTop
:
20
}}
>
{
item
.
item_business
}
<
/Typography
>
<
div
style
=
{{
display
:
'flex'
,
overflowX
:
'scroll'
,
width
:
this
.
props
.
width
*
0.9
}}
>
{
item
s
.
category
.
map
((
item
,
index
)
=>
{
{
item
.
category
.
map
((
items
,
indexs
)
=>
{
return
(
<
Link
to
=
{{
pathname
:
`/home/cat-dashboard/`
,
state
:
{
userType
:
'user'
,
rawData
:
{
month
:
this
.
state
.
monthCAT
.
month_id
,
periode
:
this
.
state
.
periodeCAT
.
value
,
companyId
:
item
.
company_id
}
rawData
:
{
month
:
this
.
state
.
monthCAT
.
month_id
,
periode
:
this
.
state
.
periodeCAT
.
value
,
companyId
:
item
s
.
company_id
}
}
}}
>
<
div
style
=
{{
padding
:
10
,
backgroundColor
:
'#fff'
,
height
:
350
,
borderRadius
:
6
,
paddingBottom
:
20
,
margin
:
10
,
boxShadow
:
'0 1px 4px 0 rgba(0, 0, 0, 0.25)'
,
width
:
250
,
marginRight
:
index
==
items
.
category
.
length
-
1
?
25
:
0
,
marginLeft
:
index
==
0
?
5
:
25
}}
>
<
div
style
=
{{
padding
:
10
,
backgroundColor
:
'#fff'
,
height
:
350
,
borderRadius
:
6
,
paddingBottom
:
20
,
margin
:
10
,
boxShadow
:
'0 1px 4px 0 rgba(0, 0, 0, 0.25)'
,
width
:
250
,
marginRight
:
index
s
==
item
.
category
.
length
-
1
?
25
:
0
,
marginLeft
:
indexs
==
0
?
5
:
25
}}
>
{
/* <span style={{ fontSize: '17px', color: this.state.selectIndex === index ? '#fff' : '#7e8085', maxWidth: 100 }}>{item.category_name}</span> */
}
<
div
style
=
{{
fontSize
:
'17px'
,
width
:
'100%'
,
height
:
25
}}
>
<
Typography
style
=
{{
textAlign
:
'left'
,
color
:
'#4b4b4b'
}}
>
{
item
.
category_name
}
<
/Typography
>
<
Typography
style
=
{{
textAlign
:
'left'
,
color
:
'#4b4b4b'
}}
>
{
item
s
.
category_name
}
<
/Typography
>
<
/div
>
{
item
.
total_kpi
!=
null
&&
{
item
s
.
total_kpi
!=
null
&&
<
div
style
=
{{
width
:
'100%'
,
display
:
'flex'
,
justifyContent
:
'center'
,
marginTop
:
10
}}
>
<
span
style
=
{{
textAlign
:
'center'
,
fontSize
:
'18px'
,
color
:
"#fff"
}}
>
{
item
.
total_kpi
}
<
/span
>
{
/* <span style={{ textAlign: 'center', fontSize: '11px', color: selectIndex === index ? "#fff" : '#4b4b4b' }}>KPIs</span> */
}
<
/div>
}
<
div
style
=
{{
display
:
'flex'
,
justifyContent
:
'center'
,
marginTop
:
item
.
total_kpi
==
null
?
50
:
0
}}
>
<
div
style
=
{{
backgroundColor
:
item
.
performanceColor
,
textAlign
:
'center'
,
display
:
'flex'
,
justifyContent
:
'center'
,
width
:
40
,
height
:
21
}}
>
<
Typography
style
=
{{
textAlign
:
'center'
,
color
:
'#4b4b4b'
}}
>
{
item
.
performance
}
<
/Typography
>
<
div
style
=
{{
display
:
'flex'
,
justifyContent
:
'center'
,
marginTop
:
item
s
.
total_kpi
==
null
?
50
:
0
}}
>
<
div
style
=
{{
backgroundColor
:
item
s
.
performanceColor
,
textAlign
:
'center'
,
display
:
'flex'
,
justifyContent
:
'center'
,
width
:
40
,
height
:
21
}}
>
<
Typography
style
=
{{
textAlign
:
'center'
,
color
:
'#4b4b4b'
}}
>
{
item
s
.
performance
}
<
/Typography
>
<
/div
>
<
/div
>
<
div
style
=
{{
display
:
'flex'
,
justifyContent
:
'center'
}}
>
<
ReactSpeedometer
maxSegmentLabels
=
{
0
}
segmentColors
=
{[
item
.
performanceColor
,
item
s
.
performanceColor
,
"#d8d8d8"
]}
needleColor
=
{
"#4b4b4b"
}
value
=
{
Number
(
item
.
current_value
).
toFixed
(
2
)}
value
=
{
Number
(
item
s
.
current_value
).
toFixed
(
2
)}
valueFormat
=
{
'.2f'
}
minValue
=
{
Number
(
item
.
low
)}
maxValue
=
{
Number
(
item
.
high
)}
customSegmentStops
=
{[
0
,
Number
(
item
.
current_value
),
5
]}
minValue
=
{
Number
(
item
s
.
low
)}
maxValue
=
{
Number
(
item
s
.
high
)}
customSegmentStops
=
{[
0
,
Number
(
item
s
.
current_value
),
5
]}
width
=
{
200
}
height
=
{
140
}
ringWidth
=
{
25
}
...
...
@@ -682,13 +687,13 @@ class HomePage extends Component {
/
>
<
/div
>
<
div
style
=
{{
backgroundColor
:
'transparent'
,
display
:
'flex'
,
marginTop
:
20
,
placeContent
:
'center'
}}
>
{
item
.
is_higher
==
'-'
?
{
item
s
.
is_higher
==
'-'
?
<
div
style
=
{{
textAlign
:
'-webkit-center'
}}
>
<
Typography
style
=
{{
fontSize
:
16
,
color
:
'#4b4b4b'
}}
>
-
<
/Typography
>
<
/div
>
:
<
div
style
=
{{
textAlign
:
'-webkit-center'
}}
>
{
item
.
is_higher
==
'true'
?
{
item
s
.
is_higher
==
'true'
?
<
img
src
=
{
Images
.
up
}
/> : <img src={Images.down} /
>
}
<
Typography
style
=
{{
fontSize
:
16
,
color
:
'#4b4b4b'
}}
>
vs
Last
Month
<
/Typography
>
<
/div
>
...
...
@@ -875,7 +880,7 @@ class HomePage extends Component {
<
Autocomplete
{...
this
.
state
.
listMonthCAT
}
id
=
"monthCAT"
onChange
=
{(
event
,
newInputValue
)
=>
this
.
setState
({
monthCAT
:
newInputValue
,
loading
:
true
},
()
=>
{
onChange
=
{(
event
,
newInputValue
)
=>
this
.
setState
({
monthCAT
:
newInputValue
,
loading
:
true
,
loading3
:
true
},
()
=>
{
this
.
getDashboardCAT
()
// if (this.state.isApprover === true) {
// this.getCompanySubmitted()
...
...
@@ -892,7 +897,7 @@ class HomePage extends Component {
<
Autocomplete
{...
this
.
state
.
listPeriodeCAT
}
id
=
"periodeCAT"
onChange
=
{(
event
,
newInputValue
)
=>
this
.
setState
({
periodeCAT
:
newInputValue
,
loading
:
true
},
()
=>
{
onChange
=
{(
event
,
newInputValue
)
=>
this
.
setState
({
periodeCAT
:
newInputValue
,
loading
:
true
,
loading3
:
true
},
()
=>
{
this
.
getDashboardCAT
()
// if (this.state.isApprover === true) {
// this.getCompanySubmitted()
...
...
@@ -907,62 +912,62 @@ class HomePage extends Component {
value
=
{
this
.
state
.
periodeCAT
}
/
>
<
/div
>
{
this
.
state
.
dataDashboardCAT
.
map
((
item
s
,
indexs
)
=>
{
{
this
.
state
.
dataDashboardCAT
.
map
((
item
,
index
)
=>
{
return
(
<
div
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'16px'
,
marginTop
:
20
}}
>
{
item
s
.
item_business
}
<
/Typography
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'16px'
,
marginTop
:
20
}}
>
{
item
.
item_business
}
<
/Typography
>
<
div
style
=
{{
display
:
'flex'
,
overflowX
:
'scroll'
,
width
:
this
.
props
.
width
*
0.9
}}
>
{
item
s
.
category
.
map
((
item
,
index
)
=>
{
{
item
.
category
.
map
((
items
,
indexs
)
=>
{
return
(
<
Link
to
=
{{
pathname
:
`/home/cat-dashboard/`
,
state
:
{
userType
:
'user'
,
rawData
:
{
month
:
this
.
state
.
monthCAT
.
month_id
,
periode
:
this
.
state
.
periodeCAT
.
value
,
companyId
:
item
.
company_id
}
rawData
:
{
month
:
this
.
state
.
monthCAT
.
month_id
,
periode
:
this
.
state
.
periodeCAT
.
value
,
companyId
:
item
s
.
company_id
}
}
}}
>
<
div
style
=
{{
padding
:
10
,
backgroundColor
:
'#fff'
,
height
:
350
,
borderRadius
:
6
,
paddingBottom
:
20
,
margin
:
10
,
boxShadow
:
'0 1px 4px 0 rgba(0, 0, 0, 0.25)'
,
width
:
250
,
marginRight
:
index
==
items
.
category
.
length
-
1
?
25
:
0
,
marginLeft
:
index
==
0
?
5
:
25
}}
>
<
div
style
=
{{
padding
:
10
,
backgroundColor
:
'#fff'
,
height
:
350
,
borderRadius
:
6
,
paddingBottom
:
20
,
margin
:
10
,
boxShadow
:
'0 1px 4px 0 rgba(0, 0, 0, 0.25)'
,
width
:
250
,
marginRight
:
index
s
==
item
.
category
.
length
-
1
?
25
:
0
,
marginLeft
:
indexs
==
0
?
5
:
25
}}
>
{
/* <span style={{ fontSize: '17px', color: this.state.selectIndex === index ? '#fff' : '#7e8085', maxWidth: 100 }}>{item.category_name}</span> */
}
<
div
style
=
{{
fontSize
:
'17px'
,
width
:
'100%'
,
height
:
25
}}
>
<
Typography
style
=
{{
textAlign
:
'left'
,
color
:
'#4b4b4b'
}}
>
{
item
.
category_name
}
<
/Typography
>
<
Typography
style
=
{{
textAlign
:
'left'
,
color
:
'#4b4b4b'
}}
>
{
item
s
.
category_name
}
<
/Typography
>
<
/div
>
{
item
.
total_kpi
!=
null
&&
{
item
s
.
total_kpi
!=
null
&&
<
div
style
=
{{
width
:
'100%'
,
display
:
'flex'
,
justifyContent
:
'center'
,
marginTop
:
10
}}
>
<
span
style
=
{{
textAlign
:
'center'
,
fontSize
:
'18px'
,
color
:
"#fff"
}}
>
{
item
.
total_kpi
}
<
/span
>
<
span
style
=
{{
textAlign
:
'center'
,
fontSize
:
'18px'
,
color
:
"#fff"
}}
>
{
item
s
.
total_kpi
}
<
/span
>
{
/* <span style={{ textAlign: 'center', fontSize: '11px', color: selectIndex === index ? "#fff" : '#4b4b4b' }}>KPIs</span> */
}
<
/div>
}
<
div
style
=
{{
display
:
'flex'
,
justifyContent
:
'center'
,
marginTop
:
item
.
total_kpi
==
null
?
50
:
0
}}
>
<
div
style
=
{{
backgroundColor
:
item
.
performanceColor
,
textAlign
:
'center'
,
display
:
'flex'
,
justifyContent
:
'center'
,
width
:
40
,
height
:
21
}}
>
<
Typography
style
=
{{
textAlign
:
'center'
,
color
:
'#4b4b4b'
}}
>
{
item
.
performance
}
<
/Typography
>
<
div
style
=
{{
display
:
'flex'
,
justifyContent
:
'center'
,
marginTop
:
item
s
.
total_kpi
==
null
?
50
:
0
}}
>
<
div
style
=
{{
backgroundColor
:
item
s
.
performanceColor
,
textAlign
:
'center'
,
display
:
'flex'
,
justifyContent
:
'center'
,
width
:
40
,
height
:
21
}}
>
<
Typography
style
=
{{
textAlign
:
'center'
,
color
:
'#4b4b4b'
}}
>
{
item
s
.
performance
}
<
/Typography
>
<
/div
>
<
/div
>
<
div
style
=
{{
display
:
'flex'
,
justifyContent
:
'center'
}}
>
{
!
this
.
state
.
loading3
&&
<
div
style
=
{{
display
:
'flex'
,
justifyContent
:
'center'
}}
>
<
ReactSpeedometer
maxSegmentLabels
=
{
0
}
segmentColors
=
{[
item
.
performanceColor
,
item
s
.
performanceColor
,
"#d8d8d8"
]}
needleColor
=
{
"#4b4b4b"
}
value
=
{
Number
(
item
.
current_value
).
toFixed
(
2
)}
value
=
{
Number
(
item
s
.
current_value
).
toFixed
(
2
)}
valueFormat
=
{
'.2f'
}
minValue
=
{
Number
(
item
.
low
)}
maxValue
=
{
Number
(
item
.
high
)}
customSegmentStops
=
{[
0
,
Number
(
item
.
current_value
),
5
]}
minValue
=
{
Number
(
item
s
.
low
)}
maxValue
=
{
Number
(
item
s
.
high
)}
customSegmentStops
=
{[
0
,
Number
(
item
s
.
current_value
),
5
]}
width
=
{
200
}
height
=
{
140
}
ringWidth
=
{
25
}
textColor
=
{
'#4b4b4b'
}
/
>
<
/div
>
<
/div>
}
<
div
style
=
{{
backgroundColor
:
'transparent'
,
display
:
'flex'
,
marginTop
:
20
,
placeContent
:
'center'
}}
>
{
item
.
is_higher
==
'-'
?
{
item
s
.
is_higher
==
'-'
?
<
div
style
=
{{
textAlign
:
'-webkit-center'
}}
>
<
Typography
style
=
{{
fontSize
:
16
,
color
:
'#4b4b4b'
}}
>
-
<
/Typography
>
<
/div
>
:
<
div
style
=
{{
textAlign
:
'-webkit-center'
}}
>
{
item
.
is_higher
==
'true'
?
{
item
s
.
is_higher
==
'true'
?
<
img
src
=
{
Images
.
up
}
/> : <img src={Images.down} /
>
}
<
Typography
style
=
{{
fontSize
:
16
,
color
:
'#4b4b4b'
}}
>
vs
Last
Month
<
/Typography
>
<
/div
>
...
...
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