Skip to content

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

CAT issue

parent be7ff4c3
Show whitespace changes
Inline Side-by-side
Showing with 41 additions and 20 deletions
src/container/Laporan/DashboardCAT.js
View file @ dec90f77
...@@ -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 @ dec90f77
...@@ -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 @ dec90f77
...@@ -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