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
9031c6b0
Commit
9031c6b0
authored
Feb 23, 2021
by
herman
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
solving conflict
parent
8ace5649
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
5 additions
and
437 deletions
+5
-437
DashboardCAT.js
src/container/Laporan/DashboardCAT.js
+4
-212
ExceutiveScoreboard.js
src/container/Laporan/ExceutiveScoreboard.js
+1
-225
No files found.
src/container/Laporan/DashboardCAT.js
View file @
9031c6b0
<<<<<<<
HEAD
import
React
,
{
useState
}
from
'react'
import
{
Typography
,
MenuItem
,
TextField
,
AppBar
,
Paper
,
Tabs
,
Tab
}
from
'@material-ui/core'
import
ExceutiveScoreboard
from
'./ExceutiveScoreboard'
import
StrategiMap
from
'./StrategiMap'
import
KpiPage
from
"./KpiPage"
import
moment
from
'moment'
const
rawData
=
[{
"item_report_id"
:
15069
,
"item_name"
:
"FINANCIAL PERSPECTIVE"
,
"parent"
:
null
,
"company_id"
:
0
,
"month12prev"
:
null
,
"month1"
:
null
,
"month2"
:
null
,
"month3"
:
null
,
"month4"
:
null
,
"month5"
:
null
,
"month6"
:
null
,
"month7"
:
null
,
"month8"
:
null
,
"month9"
:
null
,
"month10"
:
null
,
"month11"
:
null
,
"month12"
:
null
},{
"item_report_id"
:
15071
,
"item_name"
:
"CUSTOMER PERSPECTIVE"
,
"parent"
:
null
,
"company_id"
:
0
,
"month12prev"
:
null
,
"month1"
:
null
,
"month2"
:
null
,
"month3"
:
null
,
"month4"
:
null
,
"month5"
:
null
,
"month6"
:
null
,
"month7"
:
null
,
"month8"
:
null
,
"month9"
:
null
,
"month10"
:
null
,
"month11"
:
null
,
"month12"
:
null
},{
"item_report_id"
:
15073
,
"item_name"
:
"INTERNAL BUSINESS PROCESS PERSPECTIVE"
,
"parent"
:
null
,
"company_id"
:
0
,
"month12prev"
:
null
,
"month1"
:
null
,
"month2"
:
null
,
"month3"
:
null
,
"month4"
:
null
,
"month5"
:
null
,
"month6"
:
null
,
"month7"
:
null
,
"month8"
:
null
,
"month9"
:
null
,
"month10"
:
null
,
"month11"
:
null
,
"month12"
:
null
},{
"item_report_id"
:
15075
,
"item_name"
:
"LEARNING & GROWTH PERSPECTIVE"
,
"parent"
:
null
,
"company_id"
:
0
,
"month12prev"
:
null
,
"month1"
:
null
,
"month2"
:
null
,
"month3"
:
null
,
"month4"
:
null
,
"month5"
:
null
,
"month6"
:
null
,
"month7"
:
null
,
"month8"
:
null
,
"month9"
:
null
,
"month10"
:
null
,
"month11"
:
null
,
"month12"
:
null
},{
"item_report_id"
:
15082
,
"item_name"
:
"Mentoring Effectiveness"
,
"parent"
:
15075
,
"company_id"
:
0
,
"month12prev"
:
null
,
"month1"
:
null
,
"month2"
:
null
,
"month3"
:
null
,
"month4"
:
null
,
"month5"
:
null
,
"month6"
:
null
,
"month7"
:
null
,
"month8"
:
null
,
"month9"
:
null
,
"month10"
:
null
,
"month11"
:
null
,
"month12"
:
null
},{
"item_report_id"
:
15077
,
"item_name"
:
"EBITDA"
,
"parent"
:
15069
,
"company_id"
:
0
,
"month12prev"
:
null
,
"month1"
:
null
,
"month2"
:
null
,
"month3"
:
null
,
"month4"
:
null
,
"month5"
:
null
,
"month6"
:
null
,
"month7"
:
null
,
"month8"
:
null
,
"month9"
:
null
,
"month10"
:
null
,
"month11"
:
null
,
"month12"
:
null
},{
"item_report_id"
:
15076
,
"item_name"
:
"Revenue"
,
"parent"
:
15069
,
"company_id"
:
0
,
"month12prev"
:
null
,
"month1"
:
null
,
"month2"
:
null
,
"month3"
:
null
,
"month4"
:
null
,
"month5"
:
null
,
"month6"
:
null
,
"month7"
:
null
,
"month8"
:
null
,
"month9"
:
null
,
"month10"
:
null
,
"month11"
:
null
,
"month12"
:
null
},{
"item_report_id"
:
15078
,
"item_name"
:
"NPAT"
,
"parent"
:
15069
,
"company_id"
:
0
,
"month12prev"
:
null
,
"month1"
:
null
,
"month2"
:
null
,
"month3"
:
null
,
"month4"
:
null
,
"month5"
:
null
,
"month6"
:
null
,
"month7"
:
null
,
"month8"
:
null
,
"month9"
:
null
,
"month10"
:
null
,
"month11"
:
null
,
"month12"
:
null
},{
"item_report_id"
:
15079
,
"item_name"
:
"TPAT"
,
"parent"
:
15069
,
"company_id"
:
0
,
"month12prev"
:
null
,
"month1"
:
null
,
"month2"
:
null
,
"month3"
:
null
,
"month4"
:
null
,
"month5"
:
null
,
"month6"
:
null
,
"month7"
:
null
,
"month8"
:
null
,
"month9"
:
null
,
"month10"
:
null
,
"month11"
:
null
,
"month12"
:
null
},{
"item_report_id"
:
15085
,
"item_name"
:
"Accident Rate (0 Fatility, Rank A)"
,
"parent"
:
15075
,
"company_id"
:
0
,
"month12prev"
:
null
,
"month1"
:
null
,
"month2"
:
null
,
"month3"
:
null
,
"month4"
:
null
,
"month5"
:
null
,
"month6"
:
null
,
"month7"
:
null
,
"month8"
:
null
,
"month9"
:
null
,
"month10"
:
null
,
"month11"
:
null
,
"month12"
:
null
},{
"item_report_id"
:
15083
,
"item_name"
:
"Culture Alignment Index"
,
"parent"
:
15075
,
"company_id"
:
0
,
"month12prev"
:
null
,
"month1"
:
null
,
"month2"
:
null
,
"month3"
:
null
,
"month4"
:
null
,
"month5"
:
null
,
"month6"
:
null
,
"month7"
:
null
,
"month8"
:
null
,
"month9"
:
null
,
"month10"
:
null
,
"month11"
:
null
,
"month12"
:
null
},{
"item_report_id"
:
15081
,
"item_name"
:
"People Benchstrength"
,
"parent"
:
15075
,
"company_id"
:
0
,
"month12prev"
:
null
,
"month1"
:
null
,
"month2"
:
null
,
"month3"
:
null
,
"month4"
:
null
,
"month5"
:
null
,
"month6"
:
null
,
"month7"
:
null
,
"month8"
:
null
,
"month9"
:
null
,
"month10"
:
null
,
"month11"
:
null
,
"month12"
:
null
},{
"item_report_id"
:
15084
,
"item_name"
:
"Technical Competence Development"
,
"parent"
:
15075
,
"company_id"
:
0
,
"month12prev"
:
null
,
"month1"
:
null
,
"month2"
:
null
,
"month3"
:
null
,
"month4"
:
null
,
"month5"
:
null
,
"month6"
:
null
,
"month7"
:
null
,
"month8"
:
null
,
"month9"
:
null
,
"month10"
:
null
,
"month11"
:
null
,
"month12"
:
null
},{
"item_report_id"
:
15086
,
"item_name"
:
"SHE Index"
,
"parent"
:
15075
,
"company_id"
:
0
,
"month12prev"
:
null
,
"month1"
:
null
,
"month2"
:
null
,
"month3"
:
null
,
"month4"
:
null
,
"month5"
:
null
,
"month6"
:
null
,
"month7"
:
null
,
"month8"
:
null
,
"month9"
:
null
,
"month10"
:
null
,
"month11"
:
null
,
"month12"
:
null
},{
"item_report_id"
:
15080
,
"item_name"
:
"ROIC"
,
"parent"
:
15069
,
"company_id"
:
0
,
"month12prev"
:
null
,
"month1"
:
null
,
"month2"
:
null
,
"month3"
:
null
,
"month4"
:
null
,
"month5"
:
null
,
"month6"
:
null
,
"month7"
:
null
,
"month8"
:
null
,
"month9"
:
null
,
"month10"
:
null
,
"month11"
:
null
,
"month12"
:
null
}]
const
_
=
()
=>
{
const
[
s
,
set
]
=
useState
({
yearPeriode
:
moment
().
format
(
"YYYY"
),
perusahaan
:
"TAP Group"
,
monthPeriode
:
moment
().
format
(
"M"
),
tab
:
0
})
=======
import
React
,
{
Component
}
from
'react'
import
{
Typography
,
MenuItem
,
TextField
,
AppBar
,
Paper
,
Tabs
,
Tab
,
Snackbar
,
withStyles
}
from
'@material-ui/core'
import
ExceutiveScoreboard
from
'./ExceutiveScoreboard'
...
...
@@ -267,83 +248,11 @@ export default class DashboardCAT extends Component {
closeAlert
()
{
this
.
setState
({
alert
:
false
})
}
>>>>>>>
dc06a5839018d36f490ebd641fcdca90e43ebc26
const
perusahaan
=
[
{
value
:
'TAP Group'
,
label
:
'TAP Group'
},
{
value
:
'2019'
,
label
:
'2019'
},
{
value
:
'2018'
,
label
:
'2018'
},
{
value
:
'2017'
,
label
:
'2017'
},
{
value
:
'2016'
,
label
:
'2016'
},
]
const
yearList
=
[];
for
(
let
i
=
moment
().
format
(
"YYYY"
)
-
5
;
i
<=
moment
().
format
(
"YYYY"
);
i
++
)
{
yearList
.
push
(
i
);
selectTab
=
(
event
,
newEvent
)
=>
{
this
.
setState
({
tab
:
newEvent
})
}
<<<<<<<
HEAD
const
height
=
200
;
const
arrayRender
=
[
<
ExceutiveScoreboard
height
=
{
height
}
rawData
=
{
rawData
}
/>
,
<
StrategiMap
height
=
{
height
}
rawData
=
{
rawData
}
/>
,
<
KpiPage
rawData
=
{
rawData
}
/
>
]
return
<
div
className
=
'a-s-p-mid no-header'
>
<
div
className
=
{
"main-color"
}
style
=
{{
padding
:
27
}}
>
<
Typography
style
=
{{
fontSize
:
'16px'
,
color
:
'white'
}}
>
DASHBOARD
CAT
<
/Typography
>
<
/div
>
<
div
className
=
"padding-20px"
style
=
{{
minWidth
:
'max-content'
}}
>
<
div
style
=
{{
marginTop
:
20
}}
>
<
TextField
style
=
{{
width
:
250
,
}}
id
=
"perusahaan"
select
label
=
"Perusahaan"
value
=
{
s
.
perusahaan
}
onChange
=
{(
e
)
=>
set
({...
s
,
perusahaan
:
e
.
target
.
value
})}
>
{
perusahaan
.
map
((
option
,
i
)
=>
(
<
MenuItem
key
=
{
i
}
value
=
{
option
.
value
}
>
{
option
.
label
}
<
/MenuItem
>
))}
<
/TextField
>
<
TextField
style
=
{{
width
:
250
,
marginLeft
:
10
}}
id
=
"Bulan"
select
label
=
"Bulan"
value
=
{
s
.
monthPeriode
.
toString
()}
onChange
=
{(
e
)
=>
set
({...
s
,
monthPeriode
:
parseInt
(
e
.
target
.
value
)})}
>
{[
1
,
2
,
3
,
4
,
5
,
6
,
7
,
8
,
9
,
10
,
11
,
12
].
map
((
option
,
i
)
=>
(
<
MenuItem
key
=
{
i
}
value
=
{
option
}
>
{
moment
(
"2020-"
+
option
+
"-01"
).
format
(
"MMMM"
)}
<
/MenuItem
>
))}
<
/TextField
>
<
TextField
style
=
{{
width
:
250
,
marginLeft
:
10
}}
id
=
"Tahun"
select
label
=
"Tahun"
value
=
{
s
.
yearPeriode
.
toString
()}
onChange
=
{(
e
)
=>
set
({...
s
,
yearPeriode
:
parseInt
(
e
.
target
.
value
)})}
>
{
yearList
.
map
((
option
,
i
)
=>
(
<
MenuItem
key
=
{
i
}
value
=
{
option
}
>
{
option
}
<
/MenuItem
>
))}
<
/TextField
>
=======
render
()
{
const
perusahaan
=
[
{
value
:
'TAP Group'
,
label
:
'TAP Group'
},
...
...
@@ -442,124 +351,7 @@ export default class DashboardCAT extends Component {
}
<
/Paper
>
<
/div>
}
>>>>>>>
dc06a5839018d36f490ebd641fcdca90e43ebc26
<
/div
>
<
Paper
style
=
{{
marginTop
:
20
,
}}
>
<
AppBar
position
=
"static"
style
=
{{
borderTopRightRadius
:
10
,
borderTopLeftRadius
:
10
}}
>
<
Tabs
indicatorColor
=
"primary"
value
=
{
s
.
tab
}
onChange
=
{
(
e
,
n
)
=>
set
({...
s
,
tab
:
n
})}
aria
-
label
=
"simple tabs example"
style
=
{{
backgroundColor
:
'#354960'
,
borderColor
:
'transparent'
,
borderTopRightRadius
:
10
,
borderTopLeftRadius
:
10
}}
>
<
Tab
label
=
"Executive Scoreboard"
style
=
{{
color
:
'#fff'
,
fontSize
:
11
}}
/
>
<
Tab
label
=
"Strategy Map"
style
=
{{
color
:
'#fff'
,
fontSize
:
11
}}
/
>
<
Tab
label
=
"KPIs"
style
=
{{
color
:
'#fff'
,
fontSize
:
11
}}
/
>
<
/Tabs
>
<
/AppBar
>
{
arrayRender
[
s
.
tab
]
// s.tab === 0 ?
// <ExceutiveScoreboard height={height} rawData = {rawData} />
// :
// s.tab === 1 ?
// <StrategiMap height={height} rawData = {rawData}/>
// :
// <KpiPage rawData = {rawData} />
}
<
/Paper
>
<
/div
>
<
/div
>
)
}
}
export
default
_
// export default class DashboardCAT extends Component {
// constructor(props) {
// super(props)
// this.state = {
// periode: '2020',
// perusahaan: 'TAP Group',
// tab: 0
// }
// }
// selectTab = (event, newEvent) => {
// this.setState({ tab: newEvent })
// }
// render() {
// const perusahaan = [
// { value: 'TAP Group', label: 'TAP Group' },
// { value: '2019', label: '2019' },
// { value: '2018', label: '2018' },
// { value: '2017', label: '2017' },
// { value: '2016', label: '2016' },
// ]
// const periode = [
// { value: '2020', label: '2020' },
// { value: '2019', label: '2019' },
// { value: '2018', label: '2018' },
// { value: '2017', label: '2017' },
// { value: '2016', label: '2016' },
// ]
// return (
// <div className='a-s-p-mid no-header'>
// <div className={"main-color"} style={{ padding: 27 }}>
// <Typography style={{ fontSize: '16px', color: 'white' }}>ON CHANGE CAT</Typography>
// </div>
// <div className="padding-20px" style={{ minWidth: 'max-content'}}>
// <div style={{ marginTop: 20 }}>
// <TextField
// style={{ width: 250, }}
// id="perusahaan"
// select
// label="Perusahaan"
// value={this.state.perusahaan}
// onChange={(e) => this.setState({ perusahaan: e.target.value })}
// >
// {perusahaan.map((option) => (
// <MenuItem key={option.value} value={option.value}>
// {option.label}
// </MenuItem>
// ))}
// </TextField>
// </div>
// <div style={{ marginTop: 20 }}>
// <TextField
// style={{ width: 250, }}
// id="periode"
// select
// label="Periode"
// value={this.state.periode}
// onChange={(e) => this.setState({ periode: e.target.value })}
// >
// {periode.map((option) => (
// <MenuItem key={option.value} value={option.value}>
// {option.label}
// </MenuItem>
// ))}
// </TextField>
// </div>
// <Paper style={{ marginTop: 20, }}>
// <AppBar position="static" style={{ borderTopRightRadius: 10, borderTopLeftRadius: 10 }}>
// <Tabs indicatorColor="primary" value={this.state.tab} onChange={this.selectTab} aria-label="simple tabs example" style={{ backgroundColor: '#354960', borderColor: 'transparent',borderTopRightRadius: 10, borderTopLeftRadius: 10 }}>
// <Tab label="Executive Scoreboard" style={{ color: '#fff', fontSize: 11 }} />
// <Tab label="Strategy Map" style={{ color: '#fff', fontSize: 11 }} />
// <Tab label="KPIs" style={{ color: '#fff', fontSize: 11 }} />
// </Tabs>
// </AppBar>
// {this.state.tab === 0 ?
// <ExceutiveScoreboard height={this.props.height} />
// :
// this.state.tab === 1 ?
// <StrategiMap height={this.props.height} />
// :
// <span>Test2</span>
// }
// </Paper>
// </div>
// </div>
// )
// }
// }
src/container/Laporan/ExceutiveScoreboard.js
View file @
9031c6b0
import
React
,
{
Component
,
useEffect
,
useState
}
from
'react'
import
React
,
{
Component
}
from
'react'
import
ReactSpeedometer
from
"react-d3-speedometer"
import
{
GridList
,
Paper
,
Typography
,
GridListTile
}
from
'@material-ui/core'
import
Images
from
'../../assets/Images'
import
LineChart
from
'react-linechart'
;
//index === 2 ? "#7cd532" : index === 3 ? "#fcff00" : index === 4 ? "#00b440" : "#00b1f7"
const
_
=
(
props
)
=>
{
const
[
selectedIndex
,
setselectedIndex
]
=
useState
(
0
)
const
[
selectedCategory
,
setSelectedCategory
]
=
useState
(
"all"
)
const
[
data
,
setData
]
=
useState
([])
useEffect
(()
=>
{
setData
(
props
.
rawData
)
},
[])
function
getOverall
()
{
return
<
div
style
=
{{
padding
:
10
,
backgroundColor
:
selectedIndex
===
0
?
'#6885a6'
:
'#fff'
,
borderRadius
:
6
,
paddingBottom
:
20
,
margin
:
10
,
boxShadow
:
'0 1px 4px 0 rgba(0, 0, 0, 0.25)'
}}
onClick
=
{()
=>
{
setselectedIndex
(
0
)
setSelectedCategory
(
"all"
)
}}
>
<
span
style
=
{{
fontSize
:
'17px'
,
color
:
selectedIndex
===
0
?
'#fff'
:
'#7e8085'
}}
>
Overall
<
/span
>
<
div
style
=
{{
backgroundColor
:
'transparent'
,
display
:
'flex'
,
marginTop
:
selectedIndex
===
0
?
54
:
30
,
placeContent
:
'center'
}}
>
<
div
>
<
div
>
<
span
>&
nbsp
;
<
/span
>
<
span
>&
nbsp
;
<
/span
>
<
/div
>
<
div
style
=
{{
backgroundColor
:
"#00b1f7"
,
textAlign
:
'center'
,
width
:
40
,
height
:
21
}}
>
<
Typography
style
=
{{
textAlign
:
'center'
}}
>
BS
<
/Typography
>
<
/div
>
<
/div
>
<
/div
>
<
ReactSpeedometer
maxSegmentLabels
=
{
0
}
segmentColors
=
{[
"#00b1f7"
,
"#d8d8d8"
]}
needleColor
=
{
'#4b4b4b'
}
value
=
{
3.67
}
maxValue
=
{
5
}
customSegmentStops
=
{[
0
,
3.67
,
5
]}
width
=
{
200
}
height
=
{
140
}
ringWidth
=
{
25
}
textColor
=
{
'#4b4b4b'
}
/
>
<
div
style
=
{{
backgroundColor
:
'transparent'
,
display
:
'flex'
,
marginTop
:
20
,
placeContent
:
'center'
}}
>
<
div
style
=
{{
textAlign
:
'-webkit-center'
}}
>
{
"up"
===
"up"
?
<
img
src
=
{
Images
.
up
}
/> : <img src={Images.down} /
>
}
<
Typography
style
=
{{
fontSize
:
16
,
color
:
selectedIndex
===
0
?
'#fff'
:
'#4b4b4b'
}}
>
vs
Last
Month
<
/Typography
>
<
/div
>
<
/div
>
<
/div
>
}
function
getCategory
()
{
let
listCategory
=
[]
data
.
map
((
r
,
i
)
=>
{
if
(
r
.
parent
===
null
)
{
let
kpi
=
data
.
filter
((
s
,
i
)
=>
s
.
parent
===
r
.
item_report_id
).
length
let
rank
=
"BS"
let
currentVal
=
data
.
reduce
(
(
sum
,
s
)
=>
{
let
num
=
isNaN
(
s
[
"month1"
])
||
s
[
"month1"
]
===
""
?
0
:
parseInt
(
s
[
"month1"
])
return
s
.
parent
===
r
.
item_report_id
?
num
:
0
})
let
previousVal
=
data
.
reduce
(
(
sum
,
s
)
=>
{
let
num
=
isNaN
(
s
[
"month1"
])
||
s
[
"month1"
]
===
""
?
0
:
parseInt
(
s
[
"month1"
])
return
s
.
parent
===
r
.
item_report_id
?
num
:
0
})
let
status
=
"up"
listCategory
.
push
({
reportId
:
r
.
item_report_id
,
title
:
r
.
item_name
,
kpi
:
kpi
,
rank
:
rank
,
currentVal
:
currentVal
,
previousVal
:
previousVal
,
status
:
status
})
}
})
// console.log(listCategory)
return
listCategory
.
map
(
(
r
,
i
)
=>
{
let
row
=
i
+
1
return
<
div
style
=
{{
padding
:
10
,
backgroundColor
:
selectedIndex
===
row
?
'#6885a6'
:
'#fff'
,
borderRadius
:
6
,
paddingBottom
:
20
,
margin
:
10
,
boxShadow
:
'0 1px 4px 0 rgba(0, 0, 0, 0.25)'
}}
onClick
=
{()
=>
{
setselectedIndex
(
row
)
setSelectedCategory
(
r
.
reportId
)
}}
>
<
span
style
=
{{
fontSize
:
'17px'
,
color
:
selectedIndex
===
row
?
'#fff'
:
'#7e8085'
}}
>
{
r
.
title
}
<
/span
>
<
div
style
=
{{
backgroundColor
:
'transparent'
,
display
:
'flex'
,
marginTop
:
row
===
0
?
54
:
30
,
placeContent
:
'center'
}}
>
<
div
>
<
div
>
<
span
style
=
{{
textAlign
:
'center'
,
fontSize
:
'24px'
,
color
:
selectedIndex
===
row
?
"#fff"
:
'#4b4b4b'
}}
>
{
r
.
kpi
}
<
/span
>
<
span
style
=
{{
textAlign
:
'center'
,
fontSize
:
'11px'
,
color
:
selectedIndex
===
row
?
"#fff"
:
'#4b4b4b'
}}
>
KPIs
<
/span>
<
/div
>
<
div
style
=
{{
backgroundColor
:
row
===
2
?
"#7cd532"
:
row
===
3
?
"#fcff00"
:
row
===
4
?
"#00b440"
:
"#00b1f7"
,
textAlign
:
'center'
,
width
:
40
,
height
:
21
}}
>
<
Typography
style
=
{{
textAlign
:
'center'
}}
>
{
r
.
rank
}
<
/Typography
>
<
/div
>
<
/div
>
<
/div
>
<
ReactSpeedometer
maxSegmentLabels
=
{
0
}
segmentColors
=
{[
row
===
2
?
"#7cd532"
:
row
===
3
?
"#fcff00"
:
row
===
4
?
"#00b440"
:
"#00b1f7"
,
"#d8d8d8"
]}
needleColor
=
{
selectedIndex
===
row
?
"#fff"
:
'#4b4b4b'
}
value
=
{
r
.
currentVal
}
maxValue
=
{
5
}
customSegmentStops
=
{[
0
,
r
.
currentVal
,
5
]}
width
=
{
200
}
height
=
{
140
}
ringWidth
=
{
25
}
textColor
=
{
selectedIndex
===
row
?
"#fff"
:
'#4b4b4b'
}
/
>
<
div
style
=
{{
backgroundColor
:
'transparent'
,
display
:
'flex'
,
marginTop
:
20
,
placeContent
:
'center'
}}
>
<
div
style
=
{{
textAlign
:
'-webkit-center'
}}
>
{
r
.
status
===
"up"
?
<
img
src
=
{
Images
.
up
}
/> : <img src={Images.down} /
>
}
<
Typography
style
=
{{
fontSize
:
16
,
color
:
selectedIndex
===
row
?
'#fff'
:
'#4b4b4b'
}}
>
vs
Last
Month
<
/Typography
>
<
/div
>
<
/div
>
<
/div
>
})
}
function
getLineChart
()
{
const
filterData
=
[]
data
.
map
((
r
,
i
)
=>
{
if
(
selectedCategory
===
"all"
||
(
r
.
parent
===
selectedCategory
&&
r
.
parent
!=
null
))
{
let
raw
=
r
filterData
.
push
(
raw
)
}
})
return
filterData
.
map
((
r
,
i
)
=>
{
return
<
div
key
=
{
i
}
style
=
{{
width
:
566
,
height
:
233
,
boxShadow
:
'0 1px 4px 0 rgba(0, 0, 0, 0.25)'
,
padding
:
20
,
justifyContent
:
'space-between'
,
display
:
'grid'
,
margin
:
10
}}
>
<
div
>
<
span
style
=
{{
fontSize
:
17
}}
>
{
r
.
item_name
}
<
/span
>
<
Typography
style
=
{{
fontSize
:
24
,
fontWeight
:
'bold'
}}
>
1
,
016
,
489.78
<
/Typography
>
<
Typography
style
=
{{
fontSize
:
16
,
fontWeight
:
'bold'
}}
>
In
IDR
mn
<
/Typography
>
<
/div
>
<
LineChart
width
=
{
400
}
height
=
{
50
}
data
=
{[]}
yMin
=
{
0
}
yMax
=
{
10
}
hideXAxis
=
{
true
}
hideYAxis
=
{
true
}
hideXLabel
=
{
true
}
hideYLabel
=
{
true
}
/
>
<
/div
>
})
// const raw = [
// {
// color: "steelblue",
// points: [
// { x: 1, y: 2 },
// { x: 2, y: 1 },
// { x: 3, y: 3 },
// { x: 4, y: 2 },
// { x: 5, y: 4 },
// { x: 6, y: 5 },
// { x: 7, y: 4 },
// ]
// }
// ];
}
return
<
div
style
=
{{
padding
:
20
}}
>
<
div
style
=
{{
display
:
'flex'
,
width
:
'100%'
,
justifyContent
:
'space-between'
,
flexFlow
:
'wrap'
}}
>
{
getOverall
()
}
{
getCategory
()
}
<
/div
>
<
div
>
{
getLineChart
()
}
<
/div
>
<
/div
>
}
export
default
_
;
/*
export
default
class
ExceutiveScoreboard
extends
Component
{
constructor
(
props
)
{
super
(
props
)
...
...
@@ -233,13 +15,9 @@ export default class ExceutiveScoreboard extends Component {
{
judul
:
"Internal Perspective"
,
kpi
:
5
,
rank
:
'C'
,
value
:
2.61
,
status
:
'down'
},
{
judul
:
"Financial"
,
kpi
:
5
,
rank
:
'B+'
,
value
:
3.52
,
status
:
'up'
},
],
<<<<<<< HEAD
selectIndex: 0
=======
data
:
this
.
props
.
data
,
dataPayload
:
this
.
props
.
dataPayload
,
selectIndex
:
null
>>>>>>> dc06a5839018d36f490ebd641fcdca90e43ebc26
}
}
...
...
@@ -328,7 +106,6 @@ export default class ExceutiveScoreboard extends Component {
]
}
];
return
(
<
div
style
=
{{
padding
:
20
}}
>
<
div
style
=
{{
display
:
'flex'
,
width
:
'100%'
,
justifyContent
:
'space-between'
,
flexFlow
:
'wrap'
}}
>
...
...
@@ -422,4 +199,3 @@ export default class ExceutiveScoreboard extends Component {
)
}
}
*
/
\ 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