Skip to content

T
Tia-dev
Commit 7819577c authored by d.arizona's avatar d.arizona
Browse files
Options

update

parent 774159cd
Hide whitespace changes
Inline Side-by-side
Showing with 127 additions and 55 deletions
src/container/HomePage.js
View file @ 7819577c
......@@ -687,7 +687,7 @@ class HomePage extends Component {
{(this.state.accessMB || this.state.accessMR) &&
<div style={{ flex: 1, paddingLeft: 20, paddingRight: 20, paddingTop: 20, paddingBottom: 0, width: '100%' }}>
<div style={{ display: 'flex' }}>
<Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Tasks to be Complete</Typography>
<Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Tasks to be Completed</Typography>
</div>
</div>
}
......
src/container/Laporan/DashboardCAT.js
View file @ 7819577c
......@@ -29,7 +29,9 @@ export default class DashboardCAT extends Component {
listMonth: null,
month: null,
loading: true,
dataDashboard: []
dataDashboard: [],
selectedKPI: [],
listKPI: []
}
}
......@@ -96,8 +98,8 @@ export default class DashboardCAT extends Component {
company_id: item.company_id,
company_name: item.company_name,
}
})
})
let arrayBaru = []
this.state.userCompany.map((item, index) => {
let indexID = companyData.findIndex((val) => val.company_id == item)
......@@ -233,8 +235,8 @@ export default class DashboardCAT extends Component {
getDasboardCAT() {
let payload = {
"company_id" : this.state.company.company_id,
"periode" : this.state.periode.periode,
"company_id": this.state.company.company_id,
"periode": this.state.periode.periode,
"months": this.state.month.month_id
}
let dataDashboard = []
......@@ -242,12 +244,12 @@ export default class DashboardCAT extends Component {
if (res.data.status == 'success') {
console.log(res)
// let resp = res.data.data
this.setState({dataDashboard : res.data.data}, () => {
this.setState({ dataDashboard: res.data.data }, () => {
setTimeout(() => {
this.setState({loading: false})
this.setState({ loading: false })
}, 400);
})
}
}
// else {
// this.setState({loading: false})
// }
......@@ -263,6 +265,10 @@ export default class DashboardCAT extends Component {
this.setState({ tab: newEvent })
}
setSelectedKPI(data) {
this.setState({ selectedKPI: data })
}
render() {
const perusahaan = [
{ value: 'TAP Group', label: 'TAP Group' },
......@@ -298,14 +304,14 @@ export default class DashboardCAT extends Component {
</Snackbar>
{this.state.loading && loadingComponent}
<div className={"main-color"} style={{ padding: 27 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>ON CHANGE CAT</Typography>
<Typography style={{ fontSize: '16px', color: 'white' }}>Dashboard CAT Report</Typography>
</div>
<div style={{padding: 20}}>
<div style={{ marginTop: 0}}>
<div style={{ padding: 20 }}>
<div style={{ marginTop: 0 }}>
<Autocomplete
{...this.state.listCompany}
id="month"
onChange={(event, newInputValue) => this.setState({ company: newInputValue, loading: true }, () => {
onChange={(event, newInputValue) => this.setState({ company: newInputValue, loading: true, selectedKPI: [] }, () => {
this.getDasboardCAT()
})}
disableClearable
......@@ -341,23 +347,23 @@ export default class DashboardCAT extends Component {
/>
</div>
</div>
{!this.state.loading && <div className="padding-20px" style={{ display: 'flex' }}>
<Paper style={{ marginTop: 10, minWidth: this.props.open ? this.props.width - 360 : this.props.width - 100}}>
<Paper style={{ marginTop: 10, minWidth: this.props.open ? this.props.width - 360 : this.props.width - 100 }}>
<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="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} data={this.state.dataDashboard} dataPayload={{month: this.state.month, periode: this.state.periode, company: this.state.company}}/>
<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 }} />
:
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} 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}} />
<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>
</div>}
......
src/container/Laporan/ExceutiveScoreboard.js
View file @ 7819577c
......@@ -28,12 +28,13 @@ export default class ExceutiveScoreboard extends Component {
selectIndex: null,
loading: false,
listKPI: [],
selectedKPI: [],
selectedKPI: this.props.selectedKPI,
listDetailKPI: [],
checkAll: true,
checkYTD: true,
checkAB: true,
checkYoy: true
checkYoy: true,
newDataParent: []
}
}
......@@ -42,10 +43,35 @@ export default class ExceutiveScoreboard extends Component {
console.log(this.state.dataPayload)
this.setState({ loading: true })
this.olahDataChart()
this.getDetailDashboardCAT()
}
olahDataChart() {
let listKPI = []
let newDataParent = []
this.state.data.executive_scoreboard.category.map((item, index) => {
let perfomanceScore = 'K'
let lastTotal = Number(item.current_value).toFixed(2)
if (lastTotal >= 1.00 && lastTotal <= 2.00) {
perfomanceScore = 'K'
} else if (lastTotal >= 2.01 && lastTotal <= 2.75) {
perfomanceScore = 'C'
} else if (lastTotal >= 2.76 && lastTotal <= 3.00) {
perfomanceScore = 'B-'
} else if (lastTotal >= 3.01 && lastTotal <= 3.75) {
perfomanceScore = 'B'
} else if (lastTotal >= 3.76 && lastTotal <= 4.00) {
perfomanceScore = 'B+'
} else if (lastTotal >= 4.01 && lastTotal <= 4.75) {
perfomanceScore = 'BS'
} else if (lastTotal >= 4.76 && lastTotal <= 5.00) {
perfomanceScore = 'IST'
}
newDataParent.push({ ...item, current_value: Number(item.current_value).toFixed(2), perfomanceScore })
})
console.log(newDataParent)
this.state.data.kpi.category.map((item, index) => {
if (item.nodes.length > 0) {
item.nodes.map((items, indexs) => {
......@@ -53,7 +79,7 @@ export default class ExceutiveScoreboard extends Component {
})
}
})
this.setState({ loading: false, listKPI })
this.setState({ loading: false, listKPI, newDataParent })
}
handleValueChild(item) {
......@@ -78,7 +104,10 @@ export default class ExceutiveScoreboard extends Component {
} else {
list.splice(indexID, 1)
}
this.setState({ selectedKPI: list }, () => { this.getDetailDashboardCAT() })
this.props.setSelectedKPI(list)
this.getDetailDashboardCAT()
// this.setState({ selectedKPI: list }, () => { this.getDetailDashboardCAT() })
}
getDetailDashboardCAT() {
......@@ -103,6 +132,26 @@ export default class ExceutiveScoreboard extends Component {
})
}
handleBackgroundPerform(total) {
let color = 'white'
if (total >= 1.00 && total <= 2.00) {
color = 'red'
} else if (total >= 2.01 && total <= 2.75) {
color = 'yellow'
} else if (total >= 2.76 && total <= 3.00) {
color = 'lightgreen'
} else if (total >= 3.01 && total <= 3.75) {
color = 'yellowgreen'
} else if (total >= 3.76 && total <= 4.00) {
color = 'forestgreen'
} else if (total >= 4.01 && total <= 4.75) {
color = 'deepskyblue'
} else if (total >= 4.76 && total <= 5.00) {
color = 'dodgerblue'
}
return color
}
render() {
let { selectIndex } = this.state
let yuk = [1, 2, 3]
......@@ -123,7 +172,7 @@ export default class ExceutiveScoreboard extends Component {
return (
<div style={{ padding: 20 }}>
<div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', flexFlow: 'wrap' }}>
{!this.state.loading && this.state.data.executive_scoreboard.category.map((item, index) => {
{!this.state.loading && this.state.newDataParent.map((item, index) => {
return (
<div style={{ padding: 10, backgroundColor: this.state.selectIndex === index ? '#6885a6' : '#fff', borderRadius: 6, paddingBottom: 20, margin: 10, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)', width: 250 }}>
{/* <span style={{ fontSize: '17px', color: this.state.selectIndex === index ? '#fff' : '#7e8085', maxWidth: 100 }}>{item.category_name}</span> */}
......@@ -136,7 +185,7 @@ export default class ExceutiveScoreboard extends Component {
{/* <span style={{ textAlign: 'center', fontSize: '11px', color: selectIndex === index ? "#fff" : '#4b4b4b' }}>KPIs</span> */}
</div>}
<div style={{ display: 'flex', justifyContent: 'center', marginTop: String(item.category_name).toLocaleLowerCase() == 'overall' ? 50 : 0 }}>
<div style={{ backgroundColor: index === 2 ? "#7cd532" : index === 3 ? "#fcff00" : index === 4 ? "#00b440" : "#00b1f7", textAlign: 'center', display: 'flex', justifyContent: 'center', width: 40, height: 21 }}>
<div style={{ backgroundColor: this.handleBackgroundPerform(Number(item.current_value).toFixed(2)), textAlign: 'center', display: 'flex', justifyContent: 'center', width: 40, height: 21 }}>
<Typography style={{ textAlign: 'center' }}>{item.performance}</Typography>
</div>
</div>
......@@ -144,14 +193,15 @@ export default class ExceutiveScoreboard extends Component {
<ReactSpeedometer
maxSegmentLabels={0}
segmentColors={[
index === 2 ? "#7cd532" : index === 3 ? "#fcff00" : index === 4 ? "#00b440" : "#00b1f7",
this.handleBackgroundPerform(Number(item.current_value).toFixed(2)),
"#d8d8d8"
]}
needleColor={this.state.selectIndex === index ? "#fff" : '#4b4b4b'}
value={Number(item.current_value)}
value={Number(item.current_value).toFixed(2)}
valueFormat={'.2f'}
minValue={Number(item.low)}
maxValue={Number(item.high)}
customSegmentStops={[0, Number(item.current_value), 5]}
customSegmentStops={[0, Number(item.current_value).toFixed(2), 5]}
width={200}
height={140}
ringWidth={25}
......@@ -159,11 +209,17 @@ export default class ExceutiveScoreboard extends Component {
/>
</div>
<div style={{ backgroundColor: 'transparent', display: 'flex', marginTop: 20, placeContent: 'center' }}>
<div style={{ textAlign: '-webkit-center' }}>
{item.is_higher ?
<img src={Images.up} /> : <img src={Images.down} />}
<Typography style={{ fontSize: 16, color: '#4b4b4b' }}>vs Last Month</Typography>
</div>
{item.is_higher == '-' ?
<div style={{ textAlign: '-webkit-center' }}>
<Typography style={{ fontSize: 16, color: '#4b4b4b' }}> - </Typography>
</div>
:
<div style={{ textAlign: '-webkit-center' }}>
{item.is_higher == 'true' ?
<img src={Images.up} /> : <img src={Images.down} />}
<Typography style={{ fontSize: 16, color: '#4b4b4b' }}>vs Last Month</Typography>
</div>
}
</div>
</div>
)
......@@ -191,7 +247,8 @@ export default class ExceutiveScoreboard extends Component {
this.setState({
deleteKPIList: !this.state.deleteKPIList
}, () => {
this.setState({ selectedKPI: this.state.deleteKPIList ? [] : this.state.selectedKPI })
this.props.setSelectedKPI(this.state.deleteKPIList ? [] : this.state.selectedKPI)
// this.setState({ selectedKPI: this.state.deleteKPIList ? [] : this.state.selectedKPI })
})
}}
name="checkedB"
......@@ -350,8 +407,8 @@ export default class ExceutiveScoreboard extends Component {
/>
</div>
</div> */}
<GridList cellHeight={250} cols={2}>
{this.state.listDetailKPI.map((item,index) => {
<GridList cellHeight={300} cols={2}>
{this.state.listDetailKPI.map((item, index) => {
let dataYTD = []
let dataAB = []
let dataYoy = []
......@@ -389,8 +446,8 @@ export default class ExceutiveScoreboard extends Component {
})
})
return (
<GridListTile key={item} cols={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 }}>
<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>
......@@ -403,6 +460,7 @@ export default class ExceutiveScoreboard extends Component {
data={option}
// yMin={0}
// yMax={10}
// onPointHover={(event, point) => {console.log(event)}}
hideXAxis={true}
hideYAxis={true}
hideXLabel={true}
......
src/container/Laporan/KPIs.js
View file @ 7819577c
......@@ -91,10 +91,10 @@ export default class StrategiMap extends Component {
<Checkbox
checked={this.state.checkYTD}
onChange={() => {
this.setState({
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 })
})
}}
name="checkedB"
......@@ -108,8 +108,8 @@ export default class StrategiMap extends Component {
<Checkbox
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({ checkAB: !this.state.checkAB }, () => {
this.setState({ checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD })
})
}}
name="checkedB"
......@@ -123,8 +123,8 @@ export default class StrategiMap extends Component {
<Checkbox
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({ checkYoy: !this.state.checkYoy }, () => {
this.setState({ checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD })
})
}}
name="checkedB"
......@@ -164,19 +164,19 @@ export default class StrategiMap extends Component {
let dataYoy = []
let option = []
if (this.state.checkYTD === true) {
option.push( {
option.push({
color: "steelblue",
points: dataYTD
})
}
if (this.state.checkAB === true) {
option.push( {
option.push({
color: "#e3e16d",
points: dataAB
})
}
if (this.state.checkYoy === true) {
option.push( {
option.push({
color: "#f27f77",
points: dataYoy
})
......@@ -223,13 +223,17 @@ export default class StrategiMap extends Component {
<div style={{ width: '10%', display: 'grid', alignContent: 'center' }}>
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{item.current_value}</Typography>
</div>
<div style={{ width: '10%', display: 'flex', justifyContent: 'center', alignItems:'center' }}>
<div style={{ width: '10%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<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: '5%', display: 'grid', alignContent: 'center' }}>
<img src={item.is_higher === false ? Images.down : Images.up} />
{item.is_higher == '-' ?
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>-</Typography>
:
<img src={item.is_higher == false ? Images.down : Images.up} />
}
</div>
</div>
)
......
src/container/Laporan/StrategiMap.js
View file @ 7819577c
......@@ -20,12 +20,12 @@ export default class StrategiMap extends Component {
render() {
return (
<div style={{ padding: 20 }}>
<div style={{display: 'flex'}}>
<div style={{ display: 'flex' }}>
<FormControl component="fieldset">
<FormControlLabel value="end" control={<Radio color="primary" checked={this.state.radioValue} onClick={() => this.setState({radioValue: true})}/>} label="Actual vs Prev. Month" />
<FormControlLabel value="end" control={<Radio color="primary" checked={this.state.radioValue} onClick={() => this.setState({ radioValue: true })} />} label="Actual vs Prev. Month" />
</FormControl>
<FormControl component="fieldset">
<FormControlLabel value="end" control={<Radio color="primary" checked={!this.state.radioValue} onClick={() => this.setState({radioValue: false})} />} label="YOY" />
<FormControlLabel value="end" control={<Radio color="primary" checked={!this.state.radioValue} onClick={() => this.setState({ radioValue: false })} />} label="YOY" />
</FormControl>
</div>
<Paper style={{ borderRadius: 10, boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.5)', width: '100%' }}>
......@@ -59,10 +59,14 @@ export default class StrategiMap extends Component {
<div style={{ display: 'grid', alignContent: 'center', backgroundColor: '#6885a6', width: 155, borderTopLeftRadius: 6, borderBottomLeftRadius: 6, padding: 10 }}>
<Typography style={{ color: '#fff', fontSize: 12, textAlign: 'center' }}>{items.item_name}</Typography>
</div>
<div style={{ backgroundColor: this.state.radioValue? (items.is_higher_actual ? '#cbf4a8' : '#faaaaa') : (items.is_higher_yoy ? '#cbf4a8' : '#faaaaa'), width: 68, borderTopRightRadius: 6, borderBottomRightRadius: 6, textAlign: 'center', paddingTop: 10, paddingBottom: 10 }}>
<img src={this.state.radioValue? (items.is_higher_actual ? Images.up : Images.down) : (items.is_higher_yoy ? Images.up : Images.down)} />
<div style={{ backgroundColor: this.state.radioValue ? (items.is_higher_actual == '-' ? '#d8d8d8' : (items.is_higher_actual == 'true' ? '#cbf4a8' : '#faaaaa')) : (items.is_higher_yoy == '-' ? 'white' : (items.is_higher_yoy ? '#cbf4a8' : '#faaaaa')), width: 68, borderTopRightRadius: 6, borderBottomRightRadius: 6, textAlign: 'center', paddingTop: 10, paddingBottom: 10 }}>
{items.is_higher_actual == '-' ?
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'-'}</Typography>
:
<img src={this.state.radioValue ? (items.is_higher_actual == 'true' ? Images.up : Images.down) : (items.is_higher_yoy == 'true' ? Images.up : Images.down)} />
}
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'vs'}</Typography>
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'Last Month'}</Typography>
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{this.state.radioValue ? 'Last Month' : 'YOY'}</Typography>
</div>
</div>
</GridListTile>
......
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