Skip to content

T
Tia-dev
Commit 09cea0a5 authored by Dida Adams Arizona's avatar Dida Adams Arizona
Browse files
Options

Merge branch 'GGMAC' into 'master' 

CAT issue

See merge request !1487
parents be7ff4c3 dec90f77
Hide whitespace changes
Inline Side-by-side
Showing with 41 additions and 20 deletions
src/container/Laporan/DashboardCAT.js
View file @ 09cea0a5
...@@ -334,6 +334,7 @@ export default class DashboardCAT extends Component { ...@@ -334,6 +334,7 @@ export default class DashboardCAT extends Component {
} }
selectTab = (event, newEvent) => { selectTab = (event, newEvent) => {
// console.log(newEvent)
this.setState({ tab: newEvent }) this.setState({ tab: newEvent })
} }
...@@ -535,10 +536,10 @@ export default class DashboardCAT extends Component { ...@@ -535,10 +536,10 @@ export default class DashboardCAT extends Component {
{!this.state.loading && <div className="padding-20px" style={{ display: 'flex' }}> {!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 }}> <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="white" 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: 'white', fontSize: 11, width: 50, fontWeight: 'bold', backgroundColor: this.state.tab == 0? '#6c84a1' : '#354960' }} />
<Tab label="Strategy Map" style={{ color: '#fff', fontSize: 11 }} /> <Tab label="Strategy Map" style={{ color: 'white', fontSize: 11, width: 50, fontWeight: 'bold', backgroundColor: this.state.tab == 1? '#6c84a1' : '#354960' }} />
<Tab label="KPIs" style={{ color: '#fff', fontSize: 11 }} /> <Tab label="KPIs" style={{ color: 'white', fontSize: 11, width: 50, fontWeight: 'bold', backgroundColor: this.state.tab == 2? '#6c84a1' : '#354960' }} />
</Tabs> </Tabs>
</AppBar> </AppBar>
{this.state.tab === 0 ? {this.state.tab === 0 ?
......
src/container/Laporan/ExceutiveScoreboard.js
View file @ 09cea0a5
...@@ -35,7 +35,8 @@ export default class ExceutiveScoreboard extends Component { ...@@ -35,7 +35,8 @@ export default class ExceutiveScoreboard extends Component {
checkAB: true, checkAB: true,
checkYoy: true, checkYoy: true,
loading2: false, loading2: false,
newDataParent: [] newDataParent: [],
deleteKPIList: false
} }
} }
...@@ -105,9 +106,13 @@ export default class ExceutiveScoreboard extends Component { ...@@ -105,9 +106,13 @@ export default class ExceutiveScoreboard extends Component {
} else { } else {
list.splice(indexID, 1) list.splice(indexID, 1)
} }
// console.log(this.state.deleteKPIList)
if (list.length > 0) {
this.setState({ deleteKPIList: false })
}
this.props.setSelectedKPI(list) this.props.setSelectedKPI(list)
this.getDetailDashboardCAT() this.getDetailDashboardCAT()
// this.setState({ selectedKPI: list }, () => { this.getDetailDashboardCAT() }) // this.setState({ selectedKPI: list }, () => { this.getDetailDashboardCAT() })
} }
...@@ -323,13 +328,13 @@ export default class ExceutiveScoreboard extends Component { ...@@ -323,13 +328,13 @@ export default class ExceutiveScoreboard extends Component {
] ]
} }
arrayNew.push({ ...item, options}) arrayNew.push({ ...item, options })
}) })
console.log(arrayNew) console.log(arrayNew)
console.log(this.state.checkAll) console.log(this.state.checkAll)
this.setState({ listDetailKPI: arrayNew }, () => { this.setState({ listDetailKPI: arrayNew }, () => {
setTimeout(() => { setTimeout(() => {
this.setState({loading2: false}) this.setState({ loading2: false })
}, 500); }, 500);
}) })
// console.log(aa) // console.log(aa)
...@@ -375,6 +380,13 @@ export default class ExceutiveScoreboard extends Component { ...@@ -375,6 +380,13 @@ export default class ExceutiveScoreboard extends Component {
} }
]; ];
const newTitleCase = (val) => {
let value = val
return value.split(' ')
.map(w => w[0].toUpperCase() + w.substr(1).toLowerCase())
.join(' ')
}
const optionzzz = { const optionzzz = {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
...@@ -403,14 +415,14 @@ export default class ExceutiveScoreboard extends Component { ...@@ -403,14 +415,14 @@ export default class ExceutiveScoreboard extends Component {
}; };
return ( return (
<div style={{ padding: 20 }}> <div style={{ padding: 20, width: '100%' }}>
<div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', flexFlow: 'wrap' }}> <div style={{ display: 'flex', width: '100%', flex: 'wrap' }}>
{!this.state.loading && this.state.newDataParent.map((item, index) => { {!this.state.loading && this.state.newDataParent.map((item, index) => {
return ( 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 }}> <div style={{ padding: 10, backgroundColor: this.state.selectIndex === index ? '#6885a6' : '#fff', borderRadius: 6, paddingBottom: 20, marginTop: 10, marginBottom: 10, marginLeft: index == 0 ? 0 : 25, marginRight: index == this.state.newDataParent.length - 1 ? 0 : 25, 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> */} {/* <span style={{ fontSize: '17px', color: this.state.selectIndex === index ? '#fff' : '#7e8085', maxWidth: 100 }}>{item.category_name}</span> */}
<div style={{ fontSize: '17px', width: '100%' }}> <div style={{ fontSize: '17px', width: '100%' }}>
<Typography style={{ textAlign: 'left' }}>{titleCase(String(item.category_name).toLocaleLowerCase())}</Typography> <Typography style={{ textAlign: 'left' }}>{newTitleCase(String(item.category_name).toLocaleLowerCase())}</Typography>
</div> </div>
{item.total_kpi != null && {item.total_kpi != null &&
<div style={{ width: '100%', display: 'flex', justifyContent: 'center', marginTop: String(item.category_name).toLocaleLowerCase().includes('internal') ? 0 : 25 }}> <div style={{ width: '100%', display: 'flex', justifyContent: 'center', marginTop: String(item.category_name).toLocaleLowerCase().includes('internal') ? 0 : 25 }}>
...@@ -481,17 +493,20 @@ export default class ExceutiveScoreboard extends Component { ...@@ -481,17 +493,20 @@ export default class ExceutiveScoreboard extends Component {
deleteKPIList: !this.state.deleteKPIList deleteKPIList: !this.state.deleteKPIList
}, () => { }, () => {
this.props.setSelectedKPI(this.state.deleteKPIList ? [] : this.state.selectedKPI) this.props.setSelectedKPI(this.state.deleteKPIList ? [] : this.state.selectedKPI)
// this.setState({ selectedKPI: this.state.deleteKPIList ? [] : this.state.selectedKPI }) this.setState({ selectedKPI: this.state.deleteKPIList ? [] : this.state.selectedKPI }, () => {
this.getDetailDashboardCAT()
})
}) })
}} }}
name="checkedB" name="checkedB"
color="primary" color="primary"
/> />
} }
label={"Hapus Semua"} label={"Tidak Pilih Semua"}
/> />
</div> </div>
<div style={{ display: 'grid' }}> <div style={{ display: 'grid' }}>
<Typography style={{ fontSize: 11, color: 'red', fontStyle: 'italic', marginTop: 5 }}>* Hanya dapat memilih 4 item KPI </Typography>
{this.state.listKPI.map((item, index) => { {this.state.listKPI.map((item, index) => {
return ( return (
<FormControlLabel <FormControlLabel
......
src/container/Laporan/KPIs.js
View file @ 09cea0a5
...@@ -21,7 +21,6 @@ export default class StrategiMap extends Component { ...@@ -21,7 +21,6 @@ export default class StrategiMap extends Component {
} }
componentDidMount() { componentDidMount() {
console.log(this.props);
this.setState({loading: true}) this.setState({loading: true})
this.olahDataKPI() this.olahDataKPI()
} }
...@@ -146,6 +145,12 @@ export default class StrategiMap extends Component { ...@@ -146,6 +145,12 @@ export default class StrategiMap extends Component {
type: 'line' type: 'line'
}] }]
}; };
const newTitleCase = (val) => {
let value = val
return value.split(' ')
.map(w => w[0].toUpperCase() + w.substr(1).toLowerCase())
.join(' ')
}
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 }}>
...@@ -281,7 +286,7 @@ export default class StrategiMap extends Component { ...@@ -281,7 +286,7 @@ export default class StrategiMap extends Component {
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Trends</Typography> <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Trends</Typography>
</div> </div>
<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 ({this.props.dataPayload.month.month_value})</Typography>
</div> </div>
<div style={{ display: 'grid', alignContent: 'center', width: '10%' }}> <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>
...@@ -331,7 +336,7 @@ export default class StrategiMap extends Component { ...@@ -331,7 +336,7 @@ export default class StrategiMap extends Component {
return ( 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 }}>{index > 0 ? '' : i.category_name}</Typography> <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{index > 0 ? '' : newTitleCase(String(i.category_name).toLocaleLowerCase())}</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.item_name}</Typography> <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{item.item_name}</Typography>
...@@ -376,8 +381,8 @@ export default class StrategiMap extends Component { ...@@ -376,8 +381,8 @@ export default class StrategiMap extends Component {
['Yoy']))))) ['Yoy'])))))
}, },
grid: { grid: {
left: 0, left: 50,
bottom: 0 bottom: 50
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
...@@ -486,7 +491,7 @@ export default class StrategiMap extends Component { ...@@ -486,7 +491,7 @@ export default class StrategiMap extends Component {
{/* <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{item.current_value}</Typography> */} {/* <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{item.current_value}</Typography> */}
</div> </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 == '-' || item.achievement == "" ? '#333333' : this.handleAch(item.achievement) < -10 ? '#333333' : this.handleAch(item.achievement) < 0 ? '#333333' : '#333333', height: 70, width: 105, marginRight: 20 }}> <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: item.achievement == '-' || item.achievement == "" ? 'transparent' : item.is_higher == false ? '#ff0000' : 'green', height: 70, width: 105, marginRight: 20 }}>
{item.achievement == '-' || item.achievement == "" ? {item.achievement == '-' || item.achievement == "" ?
<Typography style={{ color: '#fff', fontWeight: 'bold', fontSize: 12 }}>{item.achievement}</Typography> <Typography style={{ color: '#fff', fontWeight: 'bold', fontSize: 12 }}>{item.achievement}</Typography>
: :
......
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