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
b012f665
Commit
b012f665
authored
Feb 28, 2021
by
Deni Rinaldi
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
im back
parent
512a429e
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
79 additions
and
13 deletions
+79
-13
DashboardCAT.js
src/container/Laporan/DashboardCAT.js
+3
-2
KPIs.js
src/container/Laporan/KPIs.js
+76
-11
No files found.
src/container/Laporan/DashboardCAT.js
View file @
b012f665
...
@@ -34,6 +34,7 @@ export default class DashboardCAT extends Component {
...
@@ -34,6 +34,7 @@ export default class DashboardCAT extends Component {
componentDidMount
()
{
componentDidMount
()
{
this
.
getDetailUser
()
this
.
getDetailUser
()
console
.
log
(
this
.
props
);
// this.getMonth()
// this.getMonth()
}
}
...
@@ -337,7 +338,7 @@ export default class DashboardCAT extends Component {
...
@@ -337,7 +338,7 @@ export default class DashboardCAT extends Component {
<
/div
>
<
/div
>
{
!
this
.
state
.
loading
&&
<
div
className
=
"padding-20px"
style
=
{{
display
:
'flex'
}}
>
{
!
this
.
state
.
loading
&&
<
div
className
=
"padding-20px"
style
=
{{
display
:
'flex'
}}
>
<
Paper
style
=
{{
marginTop
:
10
,
}}
>
<
Paper
style
=
{{
marginTop
:
10
,
minWidth
:
this
.
props
.
open
?
this
.
props
.
width
-
360
:
this
.
props
.
width
-
100
}}
>
<
AppBar
position
=
"static"
style
=
{{
borderTopRightRadius
:
10
,
borderTopLeftRadius
:
10
}}
>
<
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
}}
>
<
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
=
"Executive Scoreboard"
style
=
{{
color
:
'#fff'
,
fontSize
:
11
}}
/
>
...
@@ -351,7 +352,7 @@ export default class DashboardCAT extends Component {
...
@@ -351,7 +352,7 @@ export default class DashboardCAT extends Component {
this
.
state
.
tab
===
1
?
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
}}
/
>
<
StrategiMap
height
=
{
this
.
props
.
height
}
data
=
{
this
.
state
.
dataDashboard
}
dataPayload
=
{{
month
:
this
.
state
.
month
,
periode
:
this
.
state
.
periode
,
company
:
this
.
state
.
company
}}
/
>
:
:
<
KPIs
height
=
{
this
.
props
.
height
}
data
=
{
this
.
state
.
dataDashboard
}
dataPayload
=
{{
month
:
this
.
state
.
month
,
periode
:
this
.
state
.
periode
,
company
:
this
.
state
.
company
}}
/
>
<
KPIs
height
=
{
this
.
props
.
height
}
width
=
{
this
.
props
.
open
?
this
.
props
.
width
-
360
:
this
.
props
.
width
-
100
}
data
=
{
this
.
state
.
dataDashboard
}
dataPayload
=
{{
month
:
this
.
state
.
month
,
periode
:
this
.
state
.
periode
,
company
:
this
.
state
.
company
}}
/
>
}
}
<
/Paper
>
<
/Paper
>
<
/div>
}
<
/div>
}
...
...
src/container/Laporan/KPIs.js
View file @
b012f665
import
React
,
{
Component
}
from
'react'
import
React
,
{
Component
}
from
'react'
import
{
Paper
,
Typography
}
from
'@material-ui/core'
import
{
Paper
,
Typography
}
from
'@material-ui/core'
import
LineChart
from
'react-linechart'
;
import
Images
from
'../../assets/Images'
import
Images
from
'../../assets/Images'
export
default
class
StrategiMap
extends
Component
{
export
default
class
StrategiMap
extends
Component
{
constructor
(
props
)
{
super
(
props
)
this
.
state
=
{
dataDummy
:
[
{
nama
:
'Financial Perspective'
,
kpi
:
'Revenue'
,
statKpi
:
'IDR Bio'
,
trends
:
[
"1"
,
"4"
,
"2"
,
"5"
,
"3"
],
current
:
'913975'
,
achievment
:
108
,
val
:
'up'
},
{
nama
:
''
,
kpi
:
'EBITDA'
,
statKpi
:
'IDR Bio'
,
trends
:
[
"1"
,
"4"
,
"2"
,
"5"
,
"3"
],
current
:
'913975'
,
achievment
:
108
,
val
:
'up'
},
{
nama
:
''
,
kpi
:
'TPAT'
,
statKpi
:
'IDR Bio'
,
trends
:
[
"1"
,
"4"
,
"2"
,
"5"
,
"3"
],
current
:
'913975'
,
achievment
:
108
,
val
:
'up'
},
{
nama
:
'Customer Perspective'
,
kpi
:
'Parts Service Rate'
,
statKpi
:
'%'
,
trends
:
[
"1"
,
"4"
,
"2"
,
"5"
,
"3"
],
current
:
'913975'
,
achievment
:
-
40
,
val
:
'down'
},
{
nama
:
''
,
kpi
:
'CSI (Customer Satisfaction Index)'
,
statKpi
:
'Index'
,
trends
:
[
"1"
,
"4"
,
"2"
,
"5"
,
"3"
],
current
:
'913975'
,
achievment
:
-
4
,
val
:
'down'
},
{
nama
:
''
,
kpi
:
'Dealer Productivity'
,
statKpi
:
'Unit/ Month'
,
trends
:
[
"1"
,
"4"
,
"2"
,
"5"
,
"3"
],
current
:
'913975'
,
achievment
:
108
,
val
:
'up'
},
{
nama
:
'Internal Business Process Perspective'
,
kpi
:
'NSI'
,
statKpi
:
'IDR Bio'
,
trends
:
[
"1"
,
"4"
,
"2"
,
"5"
,
"3"
],
current
:
'913975'
,
achievment
:
108
,
val
:
'up'
},
{
nama
:
''
,
kpi
:
'DEP'
,
statKpi
:
'IDR Bio'
,
trends
:
[
"1"
,
"4"
,
"2"
,
"5"
,
"3"
],
current
:
'913975'
,
achievment
:
108
,
val
:
'up'
},
{
nama
:
''
,
kpi
:
'AEP'
,
statKpi
:
'IDR Bio'
,
trends
:
[
"1"
,
"4"
,
"2"
,
"5"
,
"3"
],
current
:
'913975'
,
achievment
:
108
,
val
:
'up'
},
{
nama
:
''
,
kpi
:
'DDMS'
,
statKpi
:
'IDR Bio'
,
trends
:
[
"1"
,
"4"
,
"2"
,
"5"
,
"3"
],
current
:
'913975'
,
achievment
:
108
,
val
:
'up'
}
],
data
:
[],
}
}
componentDidMount
()
{
console
.
log
(
this
.
props
);
}
render
()
{
render
()
{
const
data
=
[
{
color
:
"steelblue"
,
points
:
[{
x
:
1
,
y
:
1
},
{
x
:
2
,
y
:
2
},
{
x
:
3
,
y
:
2
}]
}
];
return
(
return
(
<
div
style
=
{{
padding
:
20
}}
>
<
div
style
=
{{
padding
:
20
,
width
:
this
.
props
.
width
}}
>
<
Paper
style
=
{{
borderRadius
:
10
,
boxShadow
:
'0 0 4px 0 rgba(0, 0, 0, 0.5)'
}}
>
<
Paper
style
=
{{
borderRadius
:
10
,
boxShadow
:
'0 0 4px 0 rgba(0, 0, 0, 0.5)'
,
padding
:
20
}}
>
<
div
style
=
{{
height
:
56
,
backgroundColor
:
'#f
1f1f1'
,
display
:
'flex
'
}}
>
<
div
style
=
{{
height
:
56
,
backgroundColor
:
'#f
fffff'
,
display
:
'flex'
,
justifyContent
:
'space-between'
,
borderBottom
:
'solid 3px #979696
'
}}
>
<
div
style
=
{{
width
:
'100%'
,
borderBottom
:
'solid 3px #979696 '
,
display
:
'grid'
,
alignContent
:
'center'
,
marginLeft
:
20
}}
>
<
div
style
=
{{
display
:
'grid'
,
alignContent
:
'center'
,
width
:
'20%'
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontWeight
:
'bold'
,
fontSize
:
12
}}
>
Category
<
/Typography
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontWeight
:
'bold'
,
fontSize
:
12
}}
>
Category
<
/Typography
>
<
/div
>
<
/div
>
<
div
style
=
{{
width
:
'75%'
,
borderBottom
:
'solid 3px #979696 '
,
display
:
'grid'
,
alignContent
:
'center'
,
paddingLeft
:
20
}}
>
<
div
style
=
{{
display
:
'grid'
,
alignContent
:
'center'
,
width
:
'20%'
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontWeight
:
'bold'
,
fontSize
:
12
}}
>
KPI
<
/Typography
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontWeight
:
'bold'
,
fontSize
:
12
}}
>
KPI
<
/Typography
>
<
/div
>
<
/div
>
<
div
style
=
{{
width
:
'100%'
,
borderBottom
:
'solid 3px #979696 '
,
display
:
'grid'
,
alignContent
:
'center'
,
paddingLeft
:
20
}}
>
<
div
style
=
{{
display
:
'grid'
,
alignContent
:
'center'
,
width
:
'25%'
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontWeight
:
'bold'
,
fontSize
:
12
}}
>
Trends
<
/Typography
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontWeight
:
'bold'
,
fontSize
:
12
}}
>
Trends
<
/Typography
>
<
/div
>
<
/div
>
<
div
style
=
{{
width
:
'75%'
,
borderBottom
:
'solid 3px #979696 '
,
display
:
'grid'
,
alignContent
:
'center'
,
paddingLeft
:
20
}}
>
<
div
style
=
{{
display
:
'grid'
,
alignContent
:
'center'
,
width
:
'10%'
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontWeight
:
'bold'
,
fontSize
:
12
}}
>
Current
<
/Typography
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontWeight
:
'bold'
,
fontSize
:
12
}}
>
Current
<
/Typography
>
<
/div
>
<
/div
>
<
div
style
=
{{
width
:
'75%'
,
borderBottom
:
'solid 3px #979696 '
,
marginRight
:
20
,
display
:
'grid'
,
alignContent
:
'center'
,
paddingLeft
:
20
}}
>
<
div
style
=
{{
display
:
'grid'
,
alignContent
:
'center'
,
width
:
'15%'
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontWeight
:
'bold'
,
fontSize
:
12
}}
>
Achievement
<
/Typography
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontWeight
:
'bold'
,
fontSize
:
12
}}
>
Achievement
<
/Typography
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div
style
=
{{
height
:
56
,
backgroundColor
:
'#f1f1f1'
,
display
:
'flex'
}}
>
{
this
.
state
.
dataDummy
.
map
((
item
,
index
)
=>
(
<
div
style
=
{{
backgroundColor
:
'#ffffff'
,
display
:
'flex'
,
justifyContent
:
'space-between'
,
borderBottom
:
'solid 3px #979696'
,
padding
:
'10px 0px'
}}
>
<
div
style
=
{{
width
:
'20%'
,
display
:
'grid'
,
alignContent
:
'center'
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontWeight
:
'bold'
,
fontSize
:
12
}}
>
{
item
.
nama
}
<
/Typography
>
<
/div
>
<
div
style
=
{{
width
:
'20%'
,
display
:
'grid'
,
alignContent
:
'center'
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontWeight
:
'bold'
,
fontSize
:
12
}}
>
{
item
.
kpi
}
<
/Typography
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontWeight
:
'bold'
,
fontSize
:
12
}}
>
{
item
.
statKpi
}
<
/Typography
>
<
/div
>
<
div
style
=
{{
width
:
'25%'
,
display
:
'grid'
,
alignContent
:
'center'
}}
>
<
div
style
=
{{
marginLeft
:
-
50
}}
>
<
LineChart
width
=
{
400
}
height
=
{
50
}
data
=
{
data
}
yMin
=
{
0
}
yMax
=
{
10
}
hideXAxis
=
{
true
}
hideYAxis
=
{
true
}
hideXLabel
=
{
true
}
hideYLabel
=
{
true
}
/
>
<
/div
>
<
/div
>
<
div
style
=
{{
width
:
'10%'
,
display
:
'grid'
,
alignContent
:
'center'
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontWeight
:
'bold'
,
fontSize
:
12
}}
>
{
item
.
current
}
<
/Typography
>
<
/div
>
<
div
style
=
{{
width
:
'15%'
,
display
:
'flex'
}}
>
<
div
style
=
{{
display
:
'flex'
,
justifyContent
:
'center'
,
alignItems
:
'center'
,
backgroundColor
:
item
.
achievment
<
-
10
?
'red'
:
item
.
achievment
<
0
?
'yellow'
:
'green'
,
height
:
70
,
width
:
105
,
marginRight
:
20
}}
>
<
Typography
style
=
{{
color
:
'#fff'
,
fontWeight
:
'bold'
,
fontSize
:
12
}}
>
{
item
.
achievment
}
%<
/Typography
>
<
/div
>
<
img
src
=
{
item
.
val
===
'up'
?
Images
.
up
:
Images
.
down
}
/
>
<
/div
>
<
/div
>
))}
{
/* <div style={{ height: 56, backgroundColor: '#ffffff', display: 'flex' }}>
<div style={{ width: '100%', borderBottom: 'solid 1px #979696 ', display: 'grid', alignContent: 'center', marginLeft: 20 }}>
<div style={{ width: '100%', borderBottom: 'solid 1px #979696 ', display: 'grid', alignContent: 'center', marginLeft: 20 }}>
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Category</Typography>
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Category</Typography>
</div>
</div>
...
@@ -41,7 +106,7 @@ export default class StrategiMap extends Component {
...
@@ -41,7 +106,7 @@ export default class StrategiMap extends Component {
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Achievement</Typography>
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Achievement</Typography>
</div>
</div>
</div>
</div>
<
div
style
=
{{
height
:
56
,
backgroundColor
:
'#f
1f1f1
'
,
display
:
'flex'
}}
>
<div style={{ height: 56, backgroundColor: '#f
fffff
', display: 'flex' }}>
<div style={{ width: '100%', borderBottom: 'solid 1px #979696 ', display: 'grid', alignContent: 'center', marginLeft: 20 }}>
<div style={{ width: '100%', borderBottom: 'solid 1px #979696 ', display: 'grid', alignContent: 'center', marginLeft: 20 }}>
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}></Typography>
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}></Typography>
</div>
</div>
...
@@ -57,7 +122,7 @@ export default class StrategiMap extends Component {
...
@@ -57,7 +122,7 @@ export default class StrategiMap extends Component {
<div style={{ width: '75%', borderBottom: 'solid 1px #979696 ', marginRight: 20, display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
<div style={{ width: '75%', borderBottom: 'solid 1px #979696 ', marginRight: 20, display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Achievement</Typography>
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Achievement</Typography>
</div>
</div>
<
/div
>
</div>
*/
}
<
/Paper
>
<
/Paper
>
<
/div
>
<
/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