Skip to content

T
Tia-dev
Commit d3ffc8a4 authored by Deni Rinaldi's avatar Deni Rinaldi
Browse files
Options

kpis

parent 31a33676
Show whitespace changes
Inline Side-by-side
Showing with 193 additions and 52 deletions
src/container/Laporan/DashboardCAT.js
View file @ d3ffc8a4
...@@ -106,7 +106,7 @@ export default class DashboardCAT extends Component { ...@@ -106,7 +106,7 @@ export default class DashboardCAT extends Component {
}) })
let defaultProps = { let defaultProps = {
options: arrayBaru, options: arrayBaru.sort((a, b) => a.company_name.localeCompare(b.company_name)),
getOptionLabel: (option) => titleCase(option.company_name), getOptionLabel: (option) => titleCase(option.company_name),
}; };
let index = arrayBaru.findIndex((val) => val.company_id == comID) let index = arrayBaru.findIndex((val) => val.company_id == comID)
......
src/container/Laporan/KPIs.js
View file @ d3ffc8a4
import React, { Component } from 'react' import React, { Component } from 'react'
import { Paper, Typography } from '@material-ui/core' import { Checkbox, FormControlLabel, Menu, Paper, Typography, Button } from '@material-ui/core'
import LineChart from 'react-linechart'; import LineChart from 'react-linechart';
import Images from '../../assets/Images' import Images from '../../assets/Images'
...@@ -7,19 +7,12 @@ export default class StrategiMap extends Component { ...@@ -7,19 +7,12 @@ export default class StrategiMap extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
dataDummy: [ openMenu: false,
{ nama: 'Financial Perspective', kpi: 'Revenue', statKpi: 'IDR Bio', trends: ["1", "4", "2", "5", "3"], current: '913975', achievment: 108, val: 'up' }, dataStrategy: this.props.data.kpi.category,
{ nama: '', kpi: 'EBITDA', statKpi: 'IDR Bio', trends: ["1", "4", "2", "5", "3"], current: '913975', achievment: 108, val: 'up' }, checkAll: true,
{ nama: '', kpi: 'TPAT', statKpi: 'IDR Bio', trends: ["1", "4", "2", "5", "3"], current: '913975', achievment: 108, val: 'up' }, checkYTD: true,
{ nama: 'Customer Perspective', kpi: 'Parts Service Rate', statKpi: '%', trends: ["1", "4", "2", "5", "3"], current: '913975', achievment: -40, val: 'down' }, checkAB: true,
{ nama: '', kpi: 'CSI (Customer Satisfaction Index)', statKpi: 'Index', trends: ["1", "4", "2", "5", "3"], current: '913975', achievment: -4, val: 'down' }, checkYoy: true
{ 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: [],
} }
} }
...@@ -31,12 +24,113 @@ export default class StrategiMap extends Component { ...@@ -31,12 +24,113 @@ export default class StrategiMap extends Component {
const data = [ const data = [
{ {
color: "steelblue", color: "steelblue",
points: [{ x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 2 }] points: [{ x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: -2 }]
},
{
color: "green",
points: [{ x: 1, y: 2 }, { x: 2, y: 3 }, { x: 3, y: 5 }]
} }
]; ];
return ( return (
<div style={{ padding: 20, width: this.props.width }}> <div style={{ padding: 20, width: this.props.width }}>
<Paper style={{ borderRadius: 10, boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.5)', padding: 20 }}> <Paper style={{ borderRadius: 10, boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.5)', padding: 20 }}>
<div>
<Button aria-controls="simple-menu" aria-haspopup="true" onClick={(e) => this.setState({ openMenu: e.currentTarget })}>
Filter
</Button>
<Menu
id="simple-menu"
anchorEl={this.state.openMenu}
keepMounted
open={Boolean(this.state.openMenu)}
onClose={() => this.setState({ openMenu: false })}
>
<div style={{ padding: 20 }}>
<div style={{ display: 'flex', borderBottom: 'solid 3px #979696' }}>
<FormControlLabel
control={
<Checkbox
checked={this.state.checkAll}
onChange={() => {
this.setState({
checkAll: true,
checkYTD: true,
checkAB: true,
checkYoy: true
})
}}
name="checkedB"
color="primary"
/>
}
style={{ marginRight: 20 }}
label={"Pilih Semua"}
/>
<FormControlLabel
control={
<Checkbox
checked={!this.state.checkAll}
onChange={() => {
this.setState({
checkAll: false,
checkYTD: false,
checkAB: false,
checkYoy: false
})
}}
name="checkedB"
color="primary"
/>
}
label={"Hapus Semua"}
/>
</div>
<div style={{ display: 'grid' }}>
<FormControlLabel
control={
<Checkbox
checked={this.state.checkYTD}
onChange={() => {
this.setState({
checkYTD: !this.state.checkYTD
})
}}
name="checkedB"
color="primary"
/>
}
label={"Tren YTD"}
/>
<FormControlLabel
control={
<Checkbox
checked={this.state.checkAB}
onChange={() => {
this.setState({ checkAB: !this.state.checkAB })
}}
name="checkedB"
color="primary"
/>
}
label={"Actual vs Budget"}
/>
<FormControlLabel
control={
<Checkbox
checked={this.state.checkYoy}
onChange={() => {
this.setState({ checkYoy: !this.state.checkYoy })
}}
name="checkedB"
color="primary"
/>
}
label={"Yoy"}
/>
</div>
</div>
</Menu>
</div>
<div style={{ height: 56, backgroundColor: '#ffffff', display: 'flex', justifyContent: 'space-between', borderBottom: 'solid 3px #979696 ' }}> <div style={{ height: 56, backgroundColor: '#ffffff', display: 'flex', justifyContent: 'space-between', borderBottom: 'solid 3px #979696 ' }}>
<div style={{ display: 'grid', alignContent: 'center', width: '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>
...@@ -50,44 +144,91 @@ export default class StrategiMap extends Component { ...@@ -50,44 +144,91 @@ export default class StrategiMap extends Component {
<div style={{ display: 'grid', alignContent: 'center', width: '10%' }}> <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={{ display: 'grid', alignContent: 'center', width: '15%' }}> <div style={{ display: 'grid', alignContent: 'center', width: '10%' }}>
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Achievement</Typography> <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Achievement</Typography>
</div> </div>
<div style={{ display: 'grid', alignContent: 'center', width: '5%' }}>
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>vs Prev. Month</Typography>
</div>
</div> </div>
{this.state.dataDummy.map((item, index) => ( {this.state.dataStrategy.map((i) => (
i.nodes.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: "yellow",
points: dataAB
})
}
if (this.state.checkYoy === true) {
option.push( {
color: "red",
points: dataYoy
})
}
item.trends.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 (
<div style={{ backgroundColor: '#ffffff', display: 'flex', justifyContent: 'space-between', borderBottom: 'solid 3px #979696', padding: '10px 0px' }}> <div style={{ backgroundColor: '#ffffff', display: 'flex', justifyContent: 'space-between', borderBottom: 'solid 3px #979696', padding: '10px 0px' }}>
<div style={{ width: '20%', display: 'grid', alignContent: 'center' }}> <div style={{ width: '20%', display: 'grid', alignContent: 'center' }}>
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{item.nama}</Typography> <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{index > 0 ? '' : i.category_name}</Typography>
</div> </div>
<div style={{ width: '20%', display: 'grid', alignContent: 'center' }}> <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.item_name}</Typography>
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{item.statKpi}</Typography> <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{item.unit}</Typography>
</div> </div>
<div style={{ width: '25%', display: 'grid', alignContent: 'center' }}> <div style={{ width: '25%', display: 'grid', alignContent: 'center' }}>
<div style={{ marginLeft: -50 }}> <div style={{ marginLeft: -50 }}>
<LineChart <LineChart
width={400} width={400}
height={50} height={70}
data={data} data={option}
yMin={0} // yMin={0}
yMax={10} // yMax={10}
hideXAxis={true} hideXAxis={true}
hideYAxis={true} hideYAxis={true}
hideXLabel={true} hideXLabel={true}
hideYLabel={true} hideYLabel={true}
/> />
</div> </div>
</div> </div>
<div style={{ width: '10%', display: 'grid', alignContent: 'center' }}> <div style={{ width: '10%', display: 'grid', alignContent: 'center' }}>
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{item.current}</Typography> <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{item.current_value}</Typography>
</div>
<div style={{ width: '10%', display: 'flex' }}>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: item.achievement < -10 ? '#333333' : item.achievement < 0 ? '#333333' : '#333333', height: 70, width: 105, marginRight: 20 }}>
<Typography style={{ color: '#fff', fontWeight: 'bold', fontSize: 12 }}>{item.achievement}</Typography>
</div> </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> </div>
<img src={item.val === 'up' ? Images.up : Images.down} /> <div style={{ width: '5%', display: 'grid', alignContent: 'center' }}>
<img src={item.is_higher === false ? Images.down : Images.up} />
</div> </div>
</div> </div>
)
})
))} ))}
{/* <div style={{ height: 56, backgroundColor: '#ffffff', display: 'flex' }}> {/* <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 }}>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment