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
74f6bf31
Commit
74f6bf31
authored
Mar 02, 2021
by
rifkaki
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'master' of
http://103.44.149.204/d.arizona/tia-dev
into rifka
parents
fe9620ee
747ac531
Changes
3
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
325 additions
and
90 deletions
+325
-90
HomePage.js
src/container/HomePage.js
+9
-8
DashboardCAT.js
src/container/Laporan/DashboardCAT.js
+62
-19
ExceutiveScoreboard.js
src/container/Laporan/ExceutiveScoreboard.js
+254
-63
No files found.
src/container/HomePage.js
View file @
74f6bf31
...
...
@@ -45,12 +45,13 @@ class HomePage extends Component {
accessMB
:
false
,
accessMR
:
false
,
company
:
[],
dataDashboardCAT
:
[]
dataDashboardCAT
:
[],
loading2
:
false
}
}
componentDidMount
()
{
this
.
setState
({
loading
:
true
})
this
.
setState
({
loading
:
true
,
loading2
:
true
})
let
userId
=
localStorage
.
getItem
(
Constant
.
USER
)
api
.
create
().
getDetailUser
(
userId
).
then
((
response
)
=>
{
if
(
response
.
data
)
{
...
...
@@ -136,7 +137,7 @@ class HomePage extends Component {
}
})
console
.
log
(
data
)
this
.
setState
({
dataDashboardCAT
:
data
,
loading
:
false
})
this
.
setState
({
dataDashboardCAT
:
data
,
loading
:
false
,
loading2
:
false
})
}
})
}
...
...
@@ -642,7 +643,7 @@ class HomePage extends Component {
<
div
style
=
{{
padding
:
10
,
backgroundColor
:
'#fff'
,
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
}}
>
{
/* <span style={{ fontSize: '17px', color: this.state.selectIndex === index ? '#fff' : '#7e8085', maxWidth: 100 }}>{item.category_name}</span> */
}
<
div
style
=
{{
fontSize
:
'17px'
,
width
:
'100%'
}}
>
<
Typography
style
=
{{
textAlign
:
'left'
}}
>
{
titleCase
(
String
(
item
.
category_name
).
toLocaleLowerCase
())}
<
/Typography
>
<
Typography
style
=
{{
textAlign
:
'left'
,
color
:
'#4b4b4b'
}}
>
{
titleCase
(
String
(
item
.
category_name
).
toLocaleLowerCase
())}
<
/Typography
>
<
/div
>
{
item
.
total_kpi
!=
null
&&
<
div
style
=
{{
width
:
'100%'
,
display
:
'flex'
,
justifyContent
:
'center'
,
marginTop
:
String
(
item
.
category_name
).
toLocaleLowerCase
().
includes
(
'internal'
)
?
0
:
25
}}
>
...
...
@@ -651,7 +652,7 @@ class HomePage extends Component {
<
/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'
}}
>
{
item
.
performance
}
<
/Typography
>
<
Typography
style
=
{{
textAlign
:
'center'
,
color
:
'#4b4b4b'
}}
>
{
item
.
performance
}
<
/Typography
>
<
/div
>
<
/div
>
<
div
style
=
{{
display
:
'flex'
,
justifyContent
:
'center'
}}
>
...
...
@@ -915,7 +916,7 @@ class HomePage extends Component {
<
div
style
=
{{
padding
:
10
,
backgroundColor
:
'#fff'
,
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
}}
>
{
/* <span style={{ fontSize: '17px', color: this.state.selectIndex === index ? '#fff' : '#7e8085', maxWidth: 100 }}>{item.category_name}</span> */
}
<
div
style
=
{{
fontSize
:
'17px'
,
width
:
'100%'
}}
>
<
Typography
style
=
{{
textAlign
:
'left'
}}
>
{
titleCase
(
String
(
item
.
category_name
).
toLocaleLowerCase
())}
<
/Typography
>
<
Typography
style
=
{{
textAlign
:
'left'
,
color
:
'#4b4b4b'
}}
>
{
titleCase
(
String
(
item
.
category_name
).
toLocaleLowerCase
())}
<
/Typography
>
<
/div
>
{
item
.
total_kpi
!=
null
&&
<
div
style
=
{{
width
:
'100%'
,
display
:
'flex'
,
justifyContent
:
'center'
,
marginTop
:
String
(
item
.
category_name
).
toLocaleLowerCase
().
includes
(
'internal'
)
?
0
:
25
}}
>
...
...
@@ -924,7 +925,7 @@ class HomePage extends Component {
<
/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'
}}
>
{
item
.
performance
}
<
/Typography
>
<
Typography
style
=
{{
textAlign
:
'center'
,
color
:
'#4b4b4b'
}}
>
{
item
.
performance
}
<
/Typography
>
<
/div
>
<
/div
>
<
div
style
=
{{
display
:
'flex'
,
justifyContent
:
'center'
}}
>
...
...
@@ -1081,7 +1082,7 @@ class HomePage extends Component {
/>
</div>
<Paper style={{ width: 450, padding: 20, borderRadius: 10, marginTop: 5 }}>
<Typography style={{ fontWeight: '
bold
', textDecorationLine: '
underline
' }}>{`Monthly Report - ${this.state.month.month_value} ${this.state.periodeMR.periode} ${this.state.valueSubmitMR}/${this.state.listSubcoMR.length}`}</Typography>
{!this.state.loading2 && <Typography style={{ fontWeight: '
bold
', textDecorationLine: '
underline
' }}>{`Monthly Report - ${this.state.month.month_value} ${this.state.periodeMR.value} ${this.state.valueSubmitMR}/${this.state.listSubcoMR.length}`}</Typography>}
{this.state.listSubcoMR.map((item, index) => {
return (
<div style={{ display: '
flex
', justifyContent: '
space
-
between
', marginTop: 10, paddingLeft: 10 }}>
...
...
src/container/Laporan/DashboardCAT.js
View file @
74f6bf31
...
...
@@ -32,7 +32,8 @@ export default class DashboardCAT extends Component {
dataDashboard
:
[],
selectedKPI
:
[],
listKPI
:
[],
rawData
:
{}
selectedMonth
:
[],
rawData
:
null
}
}
...
...
@@ -40,15 +41,29 @@ export default class DashboardCAT extends Component {
console
.
log
(
this
.
props
)
this
.
props
.
selectIndex
(
'CAT Dashboard'
)
let
dataStorageCAT
=
localStorage
.
getItem
(
Constant
.
DATACAT
)
console
.
log
(
dataStorageCAT
)
if
(
this
.
props
.
location
.
state
!==
undefined
)
{
if
(
dataStorageCAT
!=
'datacat'
&&
dataStorageCAT
!=
null
)
{
this
.
setState
({
selectedKPI
:
JSON
.
parse
(
dataStorageCAT
).
listKPI
})
this
.
setState
({
selectedKPI
:
JSON
.
parse
(
dataStorageCAT
).
listKPI
},
()
=>
{
console
.
log
(
dataStorageCAT
)
}
if
(
this
.
props
.
location
.
state
!==
undefined
)
{
console
.
log
(
this
.
props
.
location
.
state
.
rawData
.
companyId
)
console
.
log
(
this
.
state
.
selectedKPI
)
this
.
setState
({
userType
:
this
.
props
.
location
.
state
.
userType
,
intent
:
'Home'
,
rawData
:
this
.
props
.
location
.
state
.
rawData
,
selectedKPI
:
this
.
state
.
selectedKPI
.
length
==
0
?
[]
:
(
JSON
.
parse
(
dataStorageCAT
).
companyId
==
this
.
props
.
location
.
state
.
rawData
.
companyId
?
JSON
.
parse
(
dataStorageCAT
).
listKPI
:
[])
},
()
=>
{
this
.
getDetailUser
()
})
})
}
else
{
this
.
setState
({
userType
:
this
.
props
.
location
.
state
.
userType
,
intent
:
'Home'
,
rawData
:
this
.
props
.
location
.
state
.
rawData
},
()
=>
{
this
.
getDetailUser
()
})
}
// console.log(this.state.selectedKPI)
// console.log(dataStorageCAT)
// console.log(this.state.company.company_id)
// this.setState({ userType: this.props.location.state.userType, intent: 'Home', rawData: this.props.location.state.rawData, selectedKPI: this.state.selectedKPI.length == 0? [] : ((dataStorageCAT != 'datacat' && dataStorageCAT != null) ? (dataStorageCAT.companyId == this.state.company.company_id? JSON.parse(dataStorageCAT).listKPI : []) : [])}, () => {
// this.getDetailUser()
// })
}
else
{
this
.
getDetailUser
()
}
...
...
@@ -106,7 +121,7 @@ export default class DashboardCAT extends Component {
if
(
response
.
data
)
{
if
(
response
.
data
.
status
===
'success'
)
{
let
data
=
response
.
data
.
data
let
comID
=
this
.
state
.
rawData
?
this
.
state
.
rawData
.
companyId
:
0
let
comID
=
this
.
state
.
rawData
!=
null
?
this
.
state
.
rawData
.
companyId
:
0
// console.log(comID)
let
companyData
=
data
.
map
((
item
)
=>
{
return
{
...
...
@@ -128,7 +143,13 @@ export default class DashboardCAT extends Component {
getOptionLabel
:
(
option
)
=>
titleCase
(
option
.
company_name
),
};
let
index
=
arrayBaru
.
findIndex
((
val
)
=>
val
.
company_id
==
comID
)
this
.
setState
({
listCompany
:
defaultProps
,
company
:
arrayBaru
.
length
<
1
?
companyData
[
0
]
:
(
index
==
-
1
?
arrayBaru
[
0
]
:
arrayBaru
[
index
])
},
()
=>
{
let
dataStorageCAT
=
localStorage
.
getItem
(
Constant
.
DATACAT
)
if
(
dataStorageCAT
!=
'datacat'
&&
dataStorageCAT
!=
null
)
{
this
.
setState
({
selectedKPI
:
JSON
.
parse
(
dataStorageCAT
).
companyId
==
this
.
state
.
company
.
company_id
?
JSON
.
parse
(
dataStorageCAT
).
listKPI
:
[]
})
console
.
log
(
dataStorageCAT
)
}
this
.
getLastPeriod
()
})
}
else
{
...
...
@@ -172,7 +193,7 @@ export default class DashboardCAT extends Component {
let
data
=
[]
console
.
log
(
response
.
data
.
data
)
console
.
log
(
this
.
state
.
lastPeriod
)
let
periodeID
=
this
.
state
.
rawData
?
this
.
state
.
rawData
.
periode
:
0
let
periodeID
=
this
.
state
.
rawData
!=
null
?
this
.
state
.
rawData
.
periode
:
0
response
.
data
.
data
.
map
((
item
)
=>
{
if
(
this
.
state
.
isApprover
)
{
if
(
item
>=
2000
&&
item
<=
(
Number
(
currentYear
)
+
1
))
{
...
...
@@ -194,7 +215,7 @@ export default class DashboardCAT extends Component {
getOptionLabel
:
(
option
)
=>
option
.
periode
,
};
let
periode
=
(
this
.
state
.
lastPeriod
==
""
?
String
(
Number
(
currentYear
)
+
1
)
:
this
.
state
.
lastPeriod
)
let
index
=
periodeData
.
sort
((
a
,
b
)
=>
a
.
periode
-
b
.
periode
).
findIndex
((
val
)
=>
periodeID
==
0
?
val
.
periode
===
periode
:
val
.
periode
==
periodeID
)
let
index
=
periodeData
.
sort
((
a
,
b
)
=>
a
.
periode
-
b
.
periode
).
findIndex
((
val
)
=>
periodeID
==
0
?
val
.
periode
===
periode
:
val
.
periode
==
periodeID
)
// // console.log(this.props.location.state.rawData)
// console.log(this.state.lastPeriod)
console
.
log
(
data
)
...
...
@@ -218,7 +239,7 @@ export default class DashboardCAT extends Component {
if
(
response
.
data
.
status
===
"success"
)
{
console
.
log
(
response
);
let
data
=
response
.
data
.
data
let
monthID
=
this
.
state
.
rawData
?
this
.
state
.
rawData
.
month
:
0
let
monthID
=
this
.
state
.
rawData
!=
null
?
this
.
state
.
rawData
.
month
:
0
let
monthData
=
data
.
map
((
item
)
=>
{
return
{
month_id
:
item
.
id
,
...
...
@@ -229,10 +250,16 @@ export default class DashboardCAT extends Component {
options
:
monthData
,
getOptionLabel
:
(
option
)
=>
option
.
month_value
,
};
let
index
=
data
.
findIndex
((
val
)
=>
monthID
==
0
?
val
.
month_name
==
month
:
val
.
id
==
monthID
)
let
index
=
data
.
findIndex
((
val
)
=>
monthID
==
0
?
val
.
month_name
==
month
:
val
.
id
==
monthID
)
console
.
log
(
index
);
let
selectedMonth
=
[]
monthData
.
map
((
item
,
indexs
)
=>
{
if
(
indexs
<=
index
)
{
selectedMonth
.
push
(
item
.
month_value
)
}
})
this
.
setState
({
listMonth
:
defaultProps
,
month
:
index
==
-
1
?
monthData
[
0
]
:
monthData
[
index
]
},
()
=>
{
this
.
setState
({
listMonth
:
defaultProps
,
month
:
index
==
-
1
?
monthData
[
0
]
:
monthData
[
index
]
,
selectedMonth
},
()
=>
{
this
.
getDasboardCAT
()
})
}
else
{
...
...
@@ -287,9 +314,10 @@ export default class DashboardCAT extends Component {
this
.
setState
({
selectedKPI
:
data
},
()
=>
{
let
payloadData
=
{
userID
:
localStorage
.
getItem
(
Constant
.
USER
),
listKPI
:
this
.
state
.
selectedKPI
listKPI
:
this
.
state
.
selectedKPI
,
companyId
:
this
.
state
.
company
.
company_id
}
localStorage
.
setItem
(
Constant
.
DATACAT
,
this
.
state
.
selectedKPI
.
length
==
0
?
'datacat'
:
JSON
.
stringify
(
payloadData
))
localStorage
.
setItem
(
Constant
.
DATACAT
,
this
.
state
.
selectedKPI
.
length
==
0
?
'datacat'
:
JSON
.
stringify
(
payloadData
))
})
}
...
...
@@ -335,7 +363,14 @@ export default class DashboardCAT extends Component {
<
Autocomplete
{...
this
.
state
.
listCompany
}
id
=
"month"
onChange
=
{(
event
,
newInputValue
)
=>
this
.
setState
({
company
:
newInputValue
,
loading
:
true
,
selectedKPI
:
[]
},
()
=>
{
onChange
=
{(
event
,
newInputValue
)
=>
this
.
setState
({
company
:
newInputValue
,
loading
:
true
},
()
=>
{
let
dataStorageCAT
=
localStorage
.
getItem
(
Constant
.
DATACAT
)
if
(
dataStorageCAT
!=
'datacat'
&&
dataStorageCAT
!=
null
)
{
this
.
setState
({
selectedKPI
:
JSON
.
parse
(
dataStorageCAT
).
companyId
==
this
.
state
.
company
.
company_id
?
JSON
.
parse
(
dataStorageCAT
).
listKPI
:
[]
})
console
.
log
(
dataStorageCAT
)
}
else
{
this
.
setState
({
selectedKPI
:
[]})
}
this
.
getDasboardCAT
()
})}
disableClearable
...
...
@@ -362,6 +397,14 @@ export default class DashboardCAT extends Component {
{...
this
.
state
.
listMonth
}
id
=
"month"
onChange
=
{(
event
,
newInputValue
)
=>
this
.
setState
({
month
:
newInputValue
,
loading
:
true
},
()
=>
{
let
index
=
this
.
state
.
listMonth
.
options
.
findIndex
((
val
)
=>
val
.
month_id
==
this
.
state
.
month
.
month_id
)
let
selectedMonth
=
[]
this
.
state
.
listMonth
.
options
.
map
((
item
,
indexs
)
=>
{
if
(
indexs
<=
index
)
{
selectedMonth
.
push
(
item
.
month_value
)
}
})
this
.
setState
({
selectedMonth
})
this
.
getDasboardCAT
()
})}
disableClearable
...
...
@@ -382,7 +425,7 @@ export default class DashboardCAT extends Component {
<
/Tabs
>
<
/AppBar
>
{
this
.
state
.
tab
===
0
?
<
ExceutiveScoreboard
selectedKPI
=
{
this
.
state
.
selectedKPI
}
setSelectedKPI
=
{
this
.
setSelectedKPI
.
bind
(
this
)}
height
=
{
this
.
props
.
height
}
data
=
{
this
.
state
.
dataDashboard
}
dataPayload
=
{{
month
:
this
.
state
.
month
,
periode
:
this
.
state
.
periode
,
company
:
this
.
state
.
company
}}
/
>
<
ExceutiveScoreboard
selectedKPI
=
{
this
.
state
.
selectedKPI
}
se
lectedMonth
=
{
this
.
state
.
selectedMonth
}
se
tSelectedKPI
=
{
this
.
setSelectedKPI
.
bind
(
this
)}
height
=
{
this
.
props
.
height
}
data
=
{
this
.
state
.
dataDashboard
}
dataPayload
=
{{
month
:
this
.
state
.
month
,
periode
:
this
.
state
.
periode
,
company
:
this
.
state
.
company
}}
/
>
:
this
.
state
.
tab
===
1
?
<
StrategiMap
height
=
{
this
.
props
.
height
}
data
=
{
this
.
state
.
dataDashboard
}
dataPayload
=
{{
month
:
this
.
state
.
month
,
periode
:
this
.
state
.
periode
,
company
:
this
.
state
.
company
}}
/
>
...
...
src/container/Laporan/ExceutiveScoreboard.js
View file @
74f6bf31
...
...
@@ -34,6 +34,7 @@ export default class ExceutiveScoreboard extends Component {
checkYTD
:
true
,
checkAB
:
true
,
checkYoy
:
true
,
loading2
:
false
,
newDataParent
:
[]
}
}
...
...
@@ -41,7 +42,7 @@ export default class ExceutiveScoreboard extends Component {
componentDidMount
()
{
// console.log()
console
.
log
(
this
.
state
.
dataPayload
)
this
.
setState
({
loading
:
true
})
this
.
setState
({
loading
:
true
,
loading2
:
true
})
this
.
olahDataChart
()
this
.
getDetailDashboardCAT
()
}
...
...
@@ -111,6 +112,7 @@ export default class ExceutiveScoreboard extends Component {
}
getDetailDashboardCAT
()
{
this
.
setState
({
loading2
:
true
})
let
payload
=
{
"company_id"
:
this
.
state
.
dataPayload
.
company
.
company_id
,
"periode"
:
this
.
state
.
dataPayload
.
periode
.
periode
,
...
...
@@ -125,9 +127,212 @@ export default class ExceutiveScoreboard extends Component {
// responseArray.map((item,index) => {
// if
// })
let
asu
=
responseArray
.
filter
((
val
)
=>
this
.
state
.
selectedKPI
.
includes
(
val
.
category_name
))
this
.
setState
({
listDetailKPI
:
asu
})
console
.
log
(
asu
)
let
aa
=
responseArray
.
filter
((
val
)
=>
this
.
state
.
selectedKPI
.
includes
(
val
.
category_name
))
console
.
log
(
aa
)
let
arrayNew
=
[]
aa
.
map
((
item
,
index
)
=>
{
let
act
=
[]
let
mbv
=
[]
let
yoy
=
[]
let
minACT
=
0
let
maxACT
=
0
let
minMBV
=
0
let
maxMBV
=
0
let
minYOY
=
0
let
maxYOY
=
0
item
.
nodes
.
map
((
items
,
indexs
)
=>
{
act
.
push
(
items
.
nodes_actual_value
)
mbv
.
push
(
items
.
nodes_mb_value
)
yoy
.
push
(
items
.
nodes_yoy_value
)
if
(
minACT
>
items
.
nodes_actual_value
)
{
minACT
=
items
.
nodes_actual_value
}
if
(
maxACT
<
items
.
nodes_actual_value
)
{
maxACT
=
items
.
nodes_actual_value
}
if
(
minMBV
>
items
.
nodes_mb_value
)
{
minMBV
=
items
.
nodes_mb_value
}
if
(
maxMBV
<
items
.
nodes_mb_value
)
{
maxMBV
=
items
.
nodes_mb_value
}
if
(
minYOY
>
items
.
nodes_yoy_value
)
{
minYOY
=
items
.
nodes_yoy_value
}
if
(
maxYOY
<
items
.
nodes_yoy_value
)
{
maxYOY
=
items
.
nodes_yoy_value
}
})
let
sortMin
=
[]
let
sortMax
=
[]
if
(
this
.
state
.
checkAll
)
{
sortMin
=
[
minACT
,
minMBV
,
minYOY
].
sort
((
a
,
b
)
=>
a
-
b
)
sortMax
=
[
maxACT
,
maxMBV
,
maxYOY
].
sort
((
a
,
b
)
=>
b
-
a
)
}
else
if
(
this
.
state
.
checkAB
&&
this
.
state
.
checkYTD
&&
!
this
.
state
.
checkYoy
)
{
sortMin
=
[
minACT
,
minMBV
].
sort
((
a
,
b
)
=>
a
-
b
)
sortMax
=
[
maxACT
,
maxMBV
].
sort
((
a
,
b
)
=>
b
-
a
)
}
else
if
(
this
.
state
.
checkAB
&&
!
this
.
state
.
checkYTD
&&
this
.
state
.
checkYoy
)
{
sortMin
=
[
minACT
,
minYOY
].
sort
((
a
,
b
)
=>
a
-
b
)
sortMax
=
[
maxACT
,
maxYOY
].
sort
((
a
,
b
)
=>
b
-
a
)
}
else
if
(
this
.
state
.
checkAB
&&
!
this
.
state
.
checkYTD
&&
!
this
.
state
.
checkYoy
)
{
sortMin
=
[
minMBV
]
sortMax
=
[
maxMBV
]
}
else
if
(
!
this
.
state
.
checkAB
&&
this
.
state
.
checkYTD
&&
this
.
state
.
checkYoy
)
{
sortMin
=
[
minMBV
,
minYOY
].
sort
((
a
,
b
)
=>
a
-
b
)
sortMax
=
[
maxMBV
,
maxYOY
].
sort
((
a
,
b
)
=>
b
-
a
)
}
else
if
(
!
this
.
state
.
checkAB
&&
this
.
state
.
checkYTD
&&
!
this
.
state
.
checkYoy
)
{
sortMin
=
[
minMBV
]
sortMax
=
[
maxMBV
]
}
else
if
(
!
this
.
state
.
checkAB
&&
!
this
.
state
.
checkYTD
&&
this
.
state
.
checkYoy
)
{
sortMin
=
[
minYOY
]
sortMax
=
[
maxYOY
]
}
let
options
=
{
tooltip
:
{
trigger
:
'axis'
,
axisPointer
:
{
type
:
'cross'
,
crossStyle
:
{
color
:
'#999'
}
}
},
legend
:
{
data
:
this
.
state
.
checkAll
?
[
'Actual'
,
'MB'
,
'Yoy'
]
:
(
this
.
state
.
checkAB
&&
this
.
state
.
checkYTD
&&
!
this
.
state
.
checkYoy
?
[
'Actual'
,
'MB'
]
:
(
this
.
state
.
checkAB
&&
!
this
.
state
.
checkYTD
&&
this
.
state
.
checkYoy
?
[
'Actual'
,
'Yoy'
]
:
(
this
.
state
.
checkAB
&&
!
this
.
state
.
checkYTD
&&
!
this
.
state
.
checkYoy
?
[
'Actual'
]
:
(
!
this
.
state
.
checkAB
&&
this
.
state
.
checkYTD
&&
this
.
state
.
checkYoy
?
[
'MB'
,
'Yoy'
]
:
(
!
this
.
state
.
checkAB
&&
this
.
state
.
checkYTD
&&
!
this
.
state
.
checkYoy
?
[
'MB'
]
:
[
'Yoy'
])))))
},
grid
:
{
left
:
0
,
bottom
:
0
},
xAxis
:
{
type
:
'category'
,
data
:
this
.
props
.
selectedMonth
},
yAxis
:
{
type
:
'value'
,
min
:
sortMin
[
0
]
-
0.5
,
max
:
sortMax
[
0
]
+
0.5
,
},
series
:
this
.
state
.
checkAll
?
[
{
name
:
'Actual'
,
data
:
act
,
type
:
'line'
},
{
name
:
'MB'
,
data
:
mbv
,
type
:
'line'
},
{
name
:
'Yoy'
,
data
:
yoy
,
type
:
'line'
}
]
:
this
.
state
.
checkAB
&&
this
.
state
.
checkYTD
&&
!
this
.
state
.
checkYoy
?
[
{
name
:
'Actual'
,
data
:
act
,
type
:
'line'
},
{
name
:
'MB'
,
data
:
mbv
,
type
:
'line'
},
]
:
this
.
state
.
checkAB
&&
!
this
.
state
.
checkYTD
&&
this
.
state
.
checkYoy
?
[
{
name
:
'Actual'
,
data
:
act
,
type
:
'line'
},
{
name
:
'Yoy'
,
data
:
yoy
,
type
:
'line'
}
]
:
this
.
state
.
checkAB
&&
!
this
.
state
.
checkYTD
&&
!
this
.
state
.
checkYoy
?
[
{
name
:
'Actual'
,
data
:
act
,
type
:
'line'
},
]
:
!
this
.
state
.
checkAB
&&
this
.
state
.
checkYTD
&&
this
.
state
.
checkYoy
?
[
{
name
:
'MB'
,
data
:
mbv
,
type
:
'line'
},
{
name
:
'Yoy'
,
data
:
yoy
,
type
:
'line'
}
]
:
!
this
.
state
.
checkAB
&&
this
.
state
.
checkYTD
&&
!
this
.
state
.
checkYoy
?
[
{
name
:
'MB'
,
data
:
mbv
,
type
:
'line'
},
]
:
[
{
name
:
'Yoy'
,
data
:
yoy
,
type
:
'line'
}
]
}
arrayNew
.
push
({
...
item
,
options
})
})
console
.
log
(
arrayNew
)
console
.
log
(
this
.
state
.
checkAll
)
this
.
setState
({
listDetailKPI
:
arrayNew
},
()
=>
{
setTimeout
(()
=>
{
this
.
setState
({
loading2
:
false
})
},
500
);
})
// console.log(aa)
}
})
}
...
...
@@ -169,6 +374,34 @@ export default class ExceutiveScoreboard extends Component {
]
}
];
const
optionzzz
=
{
tooltip
:
{
trigger
:
'axis'
,
axisPointer
:
{
type
:
'cross'
,
crossStyle
:
{
color
:
'#999'
}
}
},
grid
:
{
left
:
0
,
bottom
:
0
},
xAxis
:
{
type
:
'category'
,
data
:
[
'Mon'
,
'Tue'
,
'Wed'
,
'Thu'
,
'Fri'
,
'Sat'
,
'Sun'
]
},
yAxis
:
{
type
:
'value'
},
series
:
[{
data
:
[
150
,
230
,
224
,
218
,
135
,
147
,
260
],
type
:
'line'
}]
};
return
(
<
div
style
=
{{
padding
:
20
}}
>
<
div
style
=
{{
display
:
'flex'
,
width
:
'100%'
,
justifyContent
:
'space-between'
,
flexFlow
:
'wrap'
}}
>
...
...
@@ -303,7 +536,7 @@ export default class ExceutiveScoreboard extends Component {
checkYTD
:
true
,
checkAB
:
true
,
checkYoy
:
true
})
}
,
()
=>
{
this
.
getDetailDashboardCAT
()
}
)
}}
name
=
"checkedB"
color
=
"primary"
...
...
@@ -322,7 +555,7 @@ export default class ExceutiveScoreboard extends Component {
checkYTD
:
false
,
checkAB
:
false
,
checkYoy
:
false
})
}
,
()
=>
{
this
.
getDetailDashboardCAT
()
}
)
}}
name
=
"checkedB"
color
=
"primary"
...
...
@@ -340,7 +573,7 @@ export default class ExceutiveScoreboard extends Component {
this
.
setState
({
checkYTD
:
!
this
.
state
.
checkYTD
},
()
=>
{
this
.
setState
({
checkAll
:
this
.
state
.
checkYoy
&&
this
.
state
.
checkAB
&&
this
.
state
.
checkYTD
})
this
.
setState
({
checkAll
:
this
.
state
.
checkYoy
&&
this
.
state
.
checkAB
&&
this
.
state
.
checkYTD
}
,
()
=>
{
this
.
getDetailDashboardCAT
()
}
)
})
}}
name
=
"checkedB"
...
...
@@ -355,7 +588,7 @@ export default class ExceutiveScoreboard extends Component {
checked
=
{
this
.
state
.
checkAB
}
onChange
=
{()
=>
{
this
.
setState
({
checkAB
:
!
this
.
state
.
checkAB
},
()
=>
{
this
.
setState
({
checkAll
:
this
.
state
.
checkYoy
&&
this
.
state
.
checkAB
&&
this
.
state
.
checkYTD
})
this
.
setState
({
checkAll
:
this
.
state
.
checkYoy
&&
this
.
state
.
checkAB
&&
this
.
state
.
checkYTD
}
,
()
=>
{
this
.
getDetailDashboardCAT
()
}
)
})
}}
name
=
"checkedB"
...
...
@@ -370,7 +603,7 @@ export default class ExceutiveScoreboard extends Component {
checked
=
{
this
.
state
.
checkYoy
}
onChange
=
{()
=>
{
this
.
setState
({
checkYoy
:
!
this
.
state
.
checkYoy
},
()
=>
{
this
.
setState
({
checkAll
:
this
.
state
.
checkYoy
&&
this
.
state
.
checkAB
&&
this
.
state
.
checkYTD
})
this
.
setState
({
checkAll
:
this
.
state
.
checkYoy
&&
this
.
state
.
checkAB
&&
this
.
state
.
checkYTD
}
,
()
=>
{
this
.
getDetailDashboardCAT
()
}
)
})
}}
name
=
"checkedB"
...
...
@@ -407,67 +640,25 @@ export default class ExceutiveScoreboard extends Component {
/>
</div>
</div> */
}
<
GridList
cellHeight
=
{
3
00
}
cols
=
{
2
}
>
<
GridList
cellHeight
=
{
5
00
}
cols
=
{
2
}
>
{
this
.
state
.
listDetailKPI
.
map
((
item
,
index
)
=>
{
let
dataYTD
=
[]
let
dataAB
=
[]
let
dataYoy
=
[]
let
option
=
[]
if
(
this
.
state
.
checkYTD
===
true
)
{
option
.
push
({
color
:
"steelblue"
,
points
:
dataYTD
})
}
if
(
this
.
state
.
checkAB
===
true
)
{
option
.
push
({
color
:
"#e3e16d"
,
points
:
dataAB
})
}
if
(
this
.
state
.
checkYoy
===
true
)
{
option
.
push
({
color
:
"#f27f77"
,
points
:
dataYoy
})
}
item
.
nodes
.
map
((
val
,
idx
)
=>
{
dataYTD
.
push
({
x
:
idx
+
1
,
y
:
val
.
nodes_actual_value
})
dataAB
.
push
({
x
:
idx
+
1
,
y
:
val
.
nodes_mb_value
})
dataYoy
.
push
({
x
:
idx
+
1
,
y
:
val
.
nodes_yoy_value
})
})
return
(
<
GridListTile
key
=
{
item
}
cols
=
{
this
.
state
.
listDetailKPI
.
length
==
1
?
2
:
1
}
style
=
{{
marginBottom
:
10
}}
>
<
div
style
=
{{
width
:
600
,
boxShadow
:
'0 1px 4px 0 rgba(0, 0, 0, 0.25)'
,
padding
:
20
,
marginLeft
:
15
,
marginTop
:
index
>
1
?
20
:
5
,
marginRight
:
5
,
display
:
'inline-grid'
}}
>
<
GridListTile
key
=
{
item
}
cols
=
{
this
.
state
.
listDetailKPI
.
length
==
1
?
2
:
1
}
style
=
{{
marginBottom
:
10
}}
>
{
!
this
.
state
.
loading2
&&
<
div
style
=
{{
width
:
600
,
boxShadow
:
'0 1px 4px 0 rgba(0, 0, 0, 0.25)'
,
padding
:
20
,
marginLeft
:
15
,
marginTop
:
index
>
1
?
20
:
5
,
marginRight
:
5
,
display
:
'inline-grid'
}}
>
<
div
>
<
span
style
=
{{
fontSize
:
17
}}
>
{
item
.
category_name
}
<
/span
>
<
Typography
style
=
{{
fontSize
:
24
,
fontWeight
:
'bold'
}}
><
NumberFormat
value
=
{
item
.
current_value
}
displayType
=
{
'text'
}
thousandSeparator
=
{
true
}
prefix
=
{
'Rp. '
}
/></
Typography
>
<
Typography
style
=
{{
fontSize
:
16
,
fontWeight
:
'bold'
}}
>
In
IDR
mn
<
/Typography
>
<
Typography
style
=
{{
fontSize
:
24
,
fontWeight
:
'bold'
}}
><
NumberFormat
value
=
{
item
.
current_value
}
displayType
=
{
'text'
}
thousandSeparator
=
{
true
}
/></
Typography
>
<
Typography
style
=
{{
fontSize
:
16
,
fontWeight
:
'bold'
}}
>
{
item
.
uom
}
<
/Typography
>
<
/div
>
<
div
style
=
{{}}
>
<
LineChart
width
=
{
400
}
height
=
{
150
}
data
=
{
option
}
// yMin={0}
// yMax={10}
// onPointHover={(event, point) => {console.log(event)}}
hideXAxis
=
{
true
}
hideYAxis
=
{
true
}
hideXLabel
=
{
true
}
hideYLabel
=
{
true
}
/
>
<
/div
>
{(
this
.
state
.
checkAB
||
this
.
state
.
checkYTD
||
this
.
state
.
checkYoy
)
&&
!
this
.
state
.
loading
&&
<
ReactECharts
showLoading
=
{
this
.
state
.
loading2
}
lazyUpdate
style
=
{{
height
:
350
,
width
:
'100%'
,
marginTop
:
20
}}
option
=
{
item
.
options
}
/>
}
<
/div
>
<
/div>
}
<
/GridListTile
>
)
}
...
...
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