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 {
}
selectTab = (event, newEvent) => {
// console.log(newEvent)
this.setState({ tab: newEvent })
}
......@@ -535,10 +536,10 @@ export default class DashboardCAT extends Component {
{!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 }}>
<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 }}>
<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 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: 'white', fontSize: 11, width: 50, fontWeight: 'bold', backgroundColor: this.state.tab == 0? '#6c84a1' : '#354960' }} />
<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: 'white', fontSize: 11, width: 50, fontWeight: 'bold', backgroundColor: this.state.tab == 2? '#6c84a1' : '#354960' }} />
</Tabs>
</AppBar>
{this.state.tab === 0 ?
......
src/container/Laporan/ExceutiveScoreboard.js
View file @ dec90f77
......@@ -35,7 +35,8 @@ export default class ExceutiveScoreboard extends Component {
checkAB: true,
checkYoy: true,
loading2: false,
newDataParent: []
newDataParent: [],
deleteKPIList: false
}
}
......@@ -105,9 +106,13 @@ export default class ExceutiveScoreboard extends Component {
} else {
list.splice(indexID, 1)
}
// console.log(this.state.deleteKPIList)
if (list.length > 0) {
this.setState({ deleteKPIList: false })
}
this.props.setSelectedKPI(list)
this.getDetailDashboardCAT()
// this.setState({ selectedKPI: list }, () => { this.getDetailDashboardCAT() })
}
......@@ -323,13 +328,13 @@ export default class ExceutiveScoreboard extends Component {
]
}
arrayNew.push({ ...item, options})
arrayNew.push({ ...item, options })
})
console.log(arrayNew)
console.log(this.state.checkAll)
this.setState({ listDetailKPI: arrayNew }, () => {
setTimeout(() => {
this.setState({loading2: false})
this.setState({ loading2: false })
}, 500);
})
// console.log(aa)
......@@ -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 = {
tooltip: {
trigger: 'axis',
......@@ -403,14 +415,14 @@ export default class ExceutiveScoreboard extends Component {
};
return (
<div style={{ padding: 20 }}>
<div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', flexFlow: 'wrap' }}>
<div style={{ padding: 20, width: '100%' }}>
<div style={{ display: 'flex', width: '100%', flex: 'wrap' }}>
{!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 }}>
<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> */}
<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>
{item.total_kpi != null &&
<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 {
deleteKPIList: !this.state.deleteKPIList
}, () => {
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"
color="primary"
/>
}
label={"Hapus Semua"}
label={"Tidak Pilih Semua"}
/>
</div>
<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) => {
return (
<FormControlLabel
......
src/container/Laporan/KPIs.js
View file @ dec90f77
......@@ -21,7 +21,6 @@ export default class StrategiMap extends Component {
}
componentDidMount() {
console.log(this.props);
this.setState({loading: true})
this.olahDataKPI()
}
......@@ -146,6 +145,12 @@ export default class StrategiMap extends Component {
type: 'line'
}]
};
const newTitleCase = (val) => {
let value = val
return value.split(' ')
.map(w => w[0].toUpperCase() + w.substr(1).toLowerCase())
.join(' ')
}
return (
<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 }}>
......@@ -281,7 +286,7 @@ export default class StrategiMap extends Component {
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Trends</Typography>
</div>
<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 style={{ display: 'grid', alignContent: 'center', width: '10%' }}>
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Achievement</Typography>
......@@ -331,7 +336,7 @@ export default class StrategiMap extends Component {
return (
<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 }}>{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 style={{ width: '20%', display: 'grid', alignContent: 'center' }}>
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{item.item_name}</Typography>
......@@ -376,8 +381,8 @@ export default class StrategiMap extends Component {
['Yoy'])))))
},
grid: {
left: 0,
bottom: 0
left: 50,
bottom: 50
},
xAxis: {
type: 'category',
......@@ -486,7 +491,7 @@ export default class StrategiMap extends Component {
{/* <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={{ 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 == "" ?
<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