Skip to content

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

Merge branch 'GGMAC' into 'master' 

Ggmac

See merge request !1242
parents e14605fc 8d2805c3
Hide whitespace changes
Inline Side-by-side
Showing with 325 additions and 90 deletions
src/container/HomePage.js
View file @ 747ac531
...@@ -45,12 +45,13 @@ class HomePage extends Component { ...@@ -45,12 +45,13 @@ class HomePage extends Component {
accessMB: false, accessMB: false,
accessMR: false, accessMR: false,
company: [], company: [],
dataDashboardCAT: [] dataDashboardCAT: [],
loading2: false
} }
} }
componentDidMount() { componentDidMount() {
this.setState({ loading: true }) this.setState({ loading: true, loading2: true })
let userId = localStorage.getItem(Constant.USER) let userId = localStorage.getItem(Constant.USER)
api.create().getDetailUser(userId).then((response) => { api.create().getDetailUser(userId).then((response) => {
if (response.data) { if (response.data) {
...@@ -136,7 +137,7 @@ class HomePage extends Component { ...@@ -136,7 +137,7 @@ class HomePage extends Component {
} }
}) })
console.log(data) console.log(data)
this.setState({ dataDashboardCAT: data, loading: false }) this.setState({ dataDashboardCAT: data, loading: false, loading2: false })
} }
}) })
} }
...@@ -642,7 +643,7 @@ class HomePage extends Component { ...@@ -642,7 +643,7 @@ class HomePage extends Component {
<div style={{ padding: 10, backgroundColor: '#fff', borderRadius: 6, paddingBottom: 20, margin: 10, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)', width: 250, marginRight: index == items.category.length - 1 ? 25 : 0, marginLeft: index == 0 ? 5 : 25 }}> <div style={{ padding: 10, backgroundColor: '#fff', borderRadius: 6, paddingBottom: 20, margin: 10, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)', width: 250, marginRight: index == items.category.length - 1 ? 25 : 0, marginLeft: index == 0 ? 5 : 25 }}>
{/* <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', color: '#4b4b4b' }}>{titleCase(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 }}>
...@@ -651,7 +652,7 @@ class HomePage extends Component { ...@@ -651,7 +652,7 @@ class HomePage extends Component {
</div>} </div>}
<div style={{ display: 'flex', justifyContent: 'center', marginTop: item.total_kpi == null ? 50 : 0 }}> <div style={{ display: 'flex', justifyContent: 'center', marginTop: item.total_kpi == null ? 50 : 0 }}>
<div style={{ backgroundColor: item.performanceColor, textAlign: 'center', display: 'flex', justifyContent: 'center', width: 40, height: 21 }}> <div style={{ backgroundColor: item.performanceColor, textAlign: 'center', display: 'flex', justifyContent: 'center', width: 40, height: 21 }}>
<Typography style={{ textAlign: 'center' }}>{item.performance}</Typography> <Typography style={{ textAlign: 'center', color: '#4b4b4b' }}>{item.performance}</Typography>
</div> </div>
</div> </div>
<div style={{ display: 'flex', justifyContent: 'center' }}> <div style={{ display: 'flex', justifyContent: 'center' }}>
...@@ -915,7 +916,7 @@ class HomePage extends Component { ...@@ -915,7 +916,7 @@ class HomePage extends Component {
<div style={{ padding: 10, backgroundColor: '#fff', borderRadius: 6, paddingBottom: 20, margin: 10, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)', width: 250, marginRight: index == items.category.length - 1 ? 25 : 0, marginLeft: index == 0 ? 5 : 25 }}> <div style={{ padding: 10, backgroundColor: '#fff', borderRadius: 6, paddingBottom: 20, margin: 10, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)', width: 250, marginRight: index == items.category.length - 1 ? 25 : 0, marginLeft: index == 0 ? 5 : 25 }}>
{/* <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', color: '#4b4b4b' }}>{titleCase(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 }}>
...@@ -924,7 +925,7 @@ class HomePage extends Component { ...@@ -924,7 +925,7 @@ class HomePage extends Component {
</div>} </div>}
<div style={{ display: 'flex', justifyContent: 'center', marginTop: item.total_kpi == null ? 50 : 0 }}> <div style={{ display: 'flex', justifyContent: 'center', marginTop: item.total_kpi == null ? 50 : 0 }}>
<div style={{ backgroundColor: item.performanceColor, textAlign: 'center', display: 'flex', justifyContent: 'center', width: 40, height: 21 }}> <div style={{ backgroundColor: item.performanceColor, textAlign: 'center', display: 'flex', justifyContent: 'center', width: 40, height: 21 }}>
<Typography style={{ textAlign: 'center' }}>{item.performance}</Typography> <Typography style={{ textAlign: 'center', color: '#4b4b4b' }}>{item.performance}</Typography>
</div> </div>
</div> </div>
<div style={{ display: 'flex', justifyContent: 'center' }}> <div style={{ display: 'flex', justifyContent: 'center' }}>
...@@ -1081,7 +1082,7 @@ class HomePage extends Component { ...@@ -1081,7 +1082,7 @@ class HomePage extends Component {
/> />
</div> </div>
<Paper style={{ width: 450, padding: 20, borderRadius: 10, marginTop: 5 }}> <Paper style={{ width: 450, padding: 20, borderRadius: 10, marginTop: 5 }}>
<Typography style={{ fontWeight: 'bold', textDecorationLine: 'underline' }}>{`Monthly Report - ${this.state.month.month_value} ${this.state.periodeMR.periode} ${this.state.valueSubmitMR}/${this.state.listSubcoMR.length}`}</Typography> {!this.state.loading2 && <Typography style={{ fontWeight: 'bold', textDecorationLine: 'underline' }}>{`Monthly Report - ${this.state.month.month_value} ${this.state.periodeMR.value} ${this.state.valueSubmitMR}/${this.state.listSubcoMR.length}`}</Typography>}
{this.state.listSubcoMR.map((item, index) => { {this.state.listSubcoMR.map((item, index) => {
return ( return (
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, paddingLeft: 10 }}> <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, paddingLeft: 10 }}>
......
src/container/Laporan/DashboardCAT.js
View file @ 747ac531
...@@ -32,7 +32,8 @@ export default class DashboardCAT extends Component { ...@@ -32,7 +32,8 @@ export default class DashboardCAT extends Component {
dataDashboard: [], dataDashboard: [],
selectedKPI: [], selectedKPI: [],
listKPI: [], listKPI: [],
rawData: {} selectedMonth: [],
rawData: null
} }
} }
...@@ -40,15 +41,29 @@ export default class DashboardCAT extends Component { ...@@ -40,15 +41,29 @@ export default class DashboardCAT extends Component {
console.log(this.props) console.log(this.props)
this.props.selectIndex('CAT Dashboard') this.props.selectIndex('CAT Dashboard')
let dataStorageCAT = localStorage.getItem(Constant.DATACAT) let dataStorageCAT = localStorage.getItem(Constant.DATACAT)
console.log(dataStorageCAT)
if (dataStorageCAT != 'datacat' && dataStorageCAT != null) {
this.setState({selectedKPI: JSON.parse(dataStorageCAT).listKPI})
console.log(dataStorageCAT)
}
if (this.props.location.state !== undefined) { if (this.props.location.state !== undefined) {
this.setState({ userType: this.props.location.state.userType, intent: 'Home', rawData: this.props.location.state.rawData }, () => { if (dataStorageCAT != 'datacat' && dataStorageCAT != null) {
this.getDetailUser() this.setState({ selectedKPI: JSON.parse(dataStorageCAT).listKPI }, () => {
}) console.log(dataStorageCAT)
console.log(this.props.location.state.rawData.companyId)
console.log(this.state.selectedKPI)
this.setState({ userType: this.props.location.state.userType, intent: 'Home', rawData: this.props.location.state.rawData, selectedKPI: this.state.selectedKPI.length == 0 ? [] : (JSON.parse(dataStorageCAT).companyId == this.props.location.state.rawData.companyId ? JSON.parse(dataStorageCAT).listKPI : []) }, () => {
this.getDetailUser()
})
})
} else {
this.setState({ userType: this.props.location.state.userType, intent: 'Home', rawData: this.props.location.state.rawData }, () => {
this.getDetailUser()
})
}
// console.log(this.state.selectedKPI)
// console.log(dataStorageCAT)
// console.log(this.state.company.company_id)
// this.setState({ userType: this.props.location.state.userType, intent: 'Home', rawData: this.props.location.state.rawData, selectedKPI: this.state.selectedKPI.length == 0? [] : ((dataStorageCAT != 'datacat' && dataStorageCAT != null) ? (dataStorageCAT.companyId == this.state.company.company_id? JSON.parse(dataStorageCAT).listKPI : []) : [])}, () => {
// this.getDetailUser()
// })
} else { } else {
this.getDetailUser() this.getDetailUser()
} }
...@@ -106,7 +121,7 @@ export default class DashboardCAT extends Component { ...@@ -106,7 +121,7 @@ export default class DashboardCAT extends Component {
if (response.data) { if (response.data) {
if (response.data.status === 'success') { if (response.data.status === 'success') {
let data = response.data.data let data = response.data.data
let comID = this.state.rawData ? this.state.rawData.companyId : 0 let comID = this.state.rawData != null ? this.state.rawData.companyId : 0
// console.log(comID) // console.log(comID)
let companyData = data.map((item) => { let companyData = data.map((item) => {
return { return {
...@@ -128,7 +143,13 @@ export default class DashboardCAT extends Component { ...@@ -128,7 +143,13 @@ export default class DashboardCAT extends Component {
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)
this.setState({ listCompany: defaultProps, company: arrayBaru.length < 1 ? companyData[0] : (index == -1 ? arrayBaru[0] : arrayBaru[index]) }, () => { this.setState({ listCompany: defaultProps, company: arrayBaru.length < 1 ? companyData[0] : (index == -1 ? arrayBaru[0] : arrayBaru[index]) }, () => {
let dataStorageCAT = localStorage.getItem(Constant.DATACAT)
if (dataStorageCAT != 'datacat' && dataStorageCAT != null) {
this.setState({ selectedKPI: JSON.parse(dataStorageCAT).companyId == this.state.company.company_id ? JSON.parse(dataStorageCAT).listKPI : [] })
console.log(dataStorageCAT)
}
this.getLastPeriod() this.getLastPeriod()
}) })
} else { } else {
...@@ -172,7 +193,7 @@ export default class DashboardCAT extends Component { ...@@ -172,7 +193,7 @@ export default class DashboardCAT extends Component {
let data = [] let data = []
console.log(response.data.data) console.log(response.data.data)
console.log(this.state.lastPeriod) console.log(this.state.lastPeriod)
let periodeID = this.state.rawData ? this.state.rawData.periode : 0 let periodeID = this.state.rawData != null ? this.state.rawData.periode : 0
response.data.data.map((item) => { response.data.data.map((item) => {
if (this.state.isApprover) { if (this.state.isApprover) {
if (item >= 2000 && item <= (Number(currentYear) + 1)) { if (item >= 2000 && item <= (Number(currentYear) + 1)) {
...@@ -194,7 +215,7 @@ export default class DashboardCAT extends Component { ...@@ -194,7 +215,7 @@ export default class DashboardCAT extends Component {
getOptionLabel: (option) => option.periode, getOptionLabel: (option) => option.periode,
}; };
let periode = (this.state.lastPeriod == "" ? String(Number(currentYear) + 1) : this.state.lastPeriod) let periode = (this.state.lastPeriod == "" ? String(Number(currentYear) + 1) : this.state.lastPeriod)
let index = periodeData.sort((a, b) => a.periode - b.periode).findIndex((val) => periodeID == 0? val.periode === periode : val.periode == periodeID) let index = periodeData.sort((a, b) => a.periode - b.periode).findIndex((val) => periodeID == 0 ? val.periode === periode : val.periode == periodeID)
// // console.log(this.props.location.state.rawData) // // console.log(this.props.location.state.rawData)
// console.log(this.state.lastPeriod) // console.log(this.state.lastPeriod)
console.log(data) console.log(data)
...@@ -218,7 +239,7 @@ export default class DashboardCAT extends Component { ...@@ -218,7 +239,7 @@ export default class DashboardCAT extends Component {
if (response.data.status === "success") { if (response.data.status === "success") {
console.log(response); console.log(response);
let data = response.data.data let data = response.data.data
let monthID = this.state.rawData ? this.state.rawData.month : 0 let monthID = this.state.rawData != null ? this.state.rawData.month : 0
let monthData = data.map((item) => { let monthData = data.map((item) => {
return { return {
month_id: item.id, month_id: item.id,
...@@ -229,10 +250,16 @@ export default class DashboardCAT extends Component { ...@@ -229,10 +250,16 @@ export default class DashboardCAT extends Component {
options: monthData, options: monthData,
getOptionLabel: (option) => option.month_value, getOptionLabel: (option) => option.month_value,
}; };
let index = data.findIndex((val) => monthID == 0? val.month_name == month : val.id == monthID) let index = data.findIndex((val) => monthID == 0 ? val.month_name == month : val.id == monthID)
console.log(index); console.log(index);
let selectedMonth = []
monthData.map((item, indexs) => {
if (indexs <= index) {
selectedMonth.push(item.month_value)
}
})
this.setState({ listMonth: defaultProps, month: index == -1 ? monthData[0] : monthData[index] }, () => { this.setState({ listMonth: defaultProps, month: index == -1 ? monthData[0] : monthData[index], selectedMonth }, () => {
this.getDasboardCAT() this.getDasboardCAT()
}) })
} else { } else {
...@@ -287,9 +314,10 @@ export default class DashboardCAT extends Component { ...@@ -287,9 +314,10 @@ export default class DashboardCAT extends Component {
this.setState({ selectedKPI: data }, () => { this.setState({ selectedKPI: data }, () => {
let payloadData = { let payloadData = {
userID: localStorage.getItem(Constant.USER), userID: localStorage.getItem(Constant.USER),
listKPI: this.state.selectedKPI listKPI: this.state.selectedKPI,
companyId: this.state.company.company_id
} }
localStorage.setItem(Constant.DATACAT, this.state.selectedKPI.length == 0? 'datacat' : JSON.stringify(payloadData)) localStorage.setItem(Constant.DATACAT, this.state.selectedKPI.length == 0 ? 'datacat' : JSON.stringify(payloadData))
}) })
} }
...@@ -335,7 +363,14 @@ export default class DashboardCAT extends Component { ...@@ -335,7 +363,14 @@ export default class DashboardCAT extends Component {
<Autocomplete <Autocomplete
{...this.state.listCompany} {...this.state.listCompany}
id="month" id="month"
onChange={(event, newInputValue) => this.setState({ company: newInputValue, loading: true, selectedKPI: [] }, () => { onChange={(event, newInputValue) => this.setState({ company: newInputValue, loading: true }, () => {
let dataStorageCAT = localStorage.getItem(Constant.DATACAT)
if (dataStorageCAT != 'datacat' && dataStorageCAT != null) {
this.setState({ selectedKPI: JSON.parse(dataStorageCAT).companyId == this.state.company.company_id ? JSON.parse(dataStorageCAT).listKPI : [] })
console.log(dataStorageCAT)
} else {
this.setState({selectedKPI: []})
}
this.getDasboardCAT() this.getDasboardCAT()
})} })}
disableClearable disableClearable
...@@ -362,6 +397,14 @@ export default class DashboardCAT extends Component { ...@@ -362,6 +397,14 @@ export default class DashboardCAT extends Component {
{...this.state.listMonth} {...this.state.listMonth}
id="month" id="month"
onChange={(event, newInputValue) => this.setState({ month: newInputValue, loading: true }, () => { onChange={(event, newInputValue) => this.setState({ month: newInputValue, loading: true }, () => {
let index = this.state.listMonth.options.findIndex((val) => val.month_id == this.state.month.month_id)
let selectedMonth = []
this.state.listMonth.options.map((item, indexs) => {
if (indexs <= index) {
selectedMonth.push(item.month_value)
}
})
this.setState({ selectedMonth })
this.getDasboardCAT() this.getDasboardCAT()
})} })}
disableClearable disableClearable
...@@ -382,7 +425,7 @@ export default class DashboardCAT extends Component { ...@@ -382,7 +425,7 @@ export default class DashboardCAT extends Component {
</Tabs> </Tabs>
</AppBar> </AppBar>
{this.state.tab === 0 ? {this.state.tab === 0 ?
<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 }} /> <ExceutiveScoreboard selectedKPI={this.state.selectedKPI} selectedMonth={this.state.selectedMonth} 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 ? 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 }} />
......
src/container/Laporan/ExceutiveScoreboard.js
View file @ 747ac531
...@@ -34,6 +34,7 @@ export default class ExceutiveScoreboard extends Component { ...@@ -34,6 +34,7 @@ export default class ExceutiveScoreboard extends Component {
checkYTD: true, checkYTD: true,
checkAB: true, checkAB: true,
checkYoy: true, checkYoy: true,
loading2: false,
newDataParent: [] newDataParent: []
} }
} }
...@@ -41,7 +42,7 @@ export default class ExceutiveScoreboard extends Component { ...@@ -41,7 +42,7 @@ export default class ExceutiveScoreboard extends Component {
componentDidMount() { componentDidMount() {
// console.log() // console.log()
console.log(this.state.dataPayload) console.log(this.state.dataPayload)
this.setState({ loading: true }) this.setState({ loading: true, loading2: true })
this.olahDataChart() this.olahDataChart()
this.getDetailDashboardCAT() this.getDetailDashboardCAT()
} }
...@@ -111,6 +112,7 @@ export default class ExceutiveScoreboard extends Component { ...@@ -111,6 +112,7 @@ export default class ExceutiveScoreboard extends Component {
} }
getDetailDashboardCAT() { getDetailDashboardCAT() {
this.setState({ loading2: true })
let payload = { let payload = {
"company_id": this.state.dataPayload.company.company_id, "company_id": this.state.dataPayload.company.company_id,
"periode": this.state.dataPayload.periode.periode, "periode": this.state.dataPayload.periode.periode,
...@@ -125,9 +127,212 @@ export default class ExceutiveScoreboard extends Component { ...@@ -125,9 +127,212 @@ export default class ExceutiveScoreboard extends Component {
// responseArray.map((item,index) => { // responseArray.map((item,index) => {
// if // if
// }) // })
let asu = responseArray.filter((val) => this.state.selectedKPI.includes(val.category_name)) let aa = responseArray.filter((val) => this.state.selectedKPI.includes(val.category_name))
this.setState({ listDetailKPI: asu }) console.log(aa)
console.log(asu) let arrayNew = []
aa.map((item, index) => {
let act = []
let mbv = []
let yoy = []
let minACT = 0
let maxACT = 0
let minMBV = 0
let maxMBV = 0
let minYOY = 0
let maxYOY = 0
item.nodes.map((items, indexs) => {
act.push(items.nodes_actual_value)
mbv.push(items.nodes_mb_value)
yoy.push(items.nodes_yoy_value)
if (minACT > items.nodes_actual_value) {
minACT = items.nodes_actual_value
}
if (maxACT < items.nodes_actual_value) {
maxACT = items.nodes_actual_value
}
if (minMBV > items.nodes_mb_value) {
minMBV = items.nodes_mb_value
}
if (maxMBV < items.nodes_mb_value) {
maxMBV = items.nodes_mb_value
}
if (minYOY > items.nodes_yoy_value) {
minYOY = items.nodes_yoy_value
}
if (maxYOY < items.nodes_yoy_value) {
maxYOY = items.nodes_yoy_value
}
})
let sortMin = []
let sortMax = []
if (this.state.checkAll) {
sortMin = [minACT, minMBV, minYOY].sort((a, b) => a - b)
sortMax = [maxACT, maxMBV, maxYOY].sort((a, b) => b - a)
} else if (this.state.checkAB && this.state.checkYTD && !this.state.checkYoy) {
sortMin = [minACT, minMBV].sort((a, b) => a - b)
sortMax = [maxACT, maxMBV].sort((a, b) => b - a)
} else if (this.state.checkAB && !this.state.checkYTD && this.state.checkYoy) {
sortMin = [minACT, minYOY].sort((a, b) => a - b)
sortMax = [maxACT, maxYOY].sort((a, b) => b - a)
} else if (this.state.checkAB && !this.state.checkYTD && !this.state.checkYoy) {
sortMin = [minMBV]
sortMax = [maxMBV]
} else if (!this.state.checkAB && this.state.checkYTD && this.state.checkYoy) {
sortMin = [minMBV, minYOY].sort((a, b) => a - b)
sortMax = [maxMBV, maxYOY].sort((a, b) => b - a)
} else if (!this.state.checkAB && this.state.checkYTD && !this.state.checkYoy) {
sortMin = [minMBV]
sortMax = [maxMBV]
} else if (!this.state.checkAB && !this.state.checkYTD && this.state.checkYoy) {
sortMin = [minYOY]
sortMax = [maxYOY]
}
let options = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
data:
this.state.checkAll ?
['Actual', 'MB', 'Yoy']
:
(this.state.checkAB && this.state.checkYTD && !this.state.checkYoy ?
['Actual', 'MB']
:
(this.state.checkAB && !this.state.checkYTD && this.state.checkYoy ?
['Actual', 'Yoy']
:
(this.state.checkAB && !this.state.checkYTD && !this.state.checkYoy ?
['Actual']
:
(!this.state.checkAB && this.state.checkYTD && this.state.checkYoy ?
['MB', 'Yoy']
:
(!this.state.checkAB && this.state.checkYTD && !this.state.checkYoy ?
['MB']
:
['Yoy'])))))
},
grid: {
left: 0,
bottom: 0
},
xAxis: {
type: 'category',
data: this.props.selectedMonth
},
yAxis: {
type: 'value',
min: sortMin[0] - 0.5,
max: sortMax[0] + 0.5,
},
series:
this.state.checkAll ?
[
{
name: 'Actual',
data: act,
type: 'line'
},
{
name: 'MB',
data: mbv,
type: 'line'
},
{
name: 'Yoy',
data: yoy,
type: 'line'
}
]
:
this.state.checkAB && this.state.checkYTD && !this.state.checkYoy ?
[
{
name: 'Actual',
data: act,
type: 'line'
},
{
name: 'MB',
data: mbv,
type: 'line'
},
]
:
this.state.checkAB && !this.state.checkYTD && this.state.checkYoy ?
[
{
name: 'Actual',
data: act,
type: 'line'
},
{
name: 'Yoy',
data: yoy,
type: 'line'
}
]
:
this.state.checkAB && !this.state.checkYTD && !this.state.checkYoy ?
[
{
name: 'Actual',
data: act,
type: 'line'
},
]
:
!this.state.checkAB && this.state.checkYTD && this.state.checkYoy ?
[
{
name: 'MB',
data: mbv,
type: 'line'
},
{
name: 'Yoy',
data: yoy,
type: 'line'
}
]
:
!this.state.checkAB && this.state.checkYTD && !this.state.checkYoy ?
[
{
name: 'MB',
data: mbv,
type: 'line'
},
]
:
[
{
name: 'Yoy',
data: yoy,
type: 'line'
}
]
}
arrayNew.push({ ...item, options})
})
console.log(arrayNew)
console.log(this.state.checkAll)
this.setState({ listDetailKPI: arrayNew }, () => {
setTimeout(() => {
this.setState({loading2: false})
}, 500);
})
// console.log(aa)
} }
}) })
} }
...@@ -169,6 +374,34 @@ export default class ExceutiveScoreboard extends Component { ...@@ -169,6 +374,34 @@ export default class ExceutiveScoreboard extends Component {
] ]
} }
]; ];
const optionzzz = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
grid: {
left: 0,
bottom: 0
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}]
};
return ( return (
<div style={{ padding: 20 }}> <div style={{ padding: 20 }}>
<div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', flexFlow: 'wrap' }}> <div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', flexFlow: 'wrap' }}>
...@@ -303,7 +536,7 @@ export default class ExceutiveScoreboard extends Component { ...@@ -303,7 +536,7 @@ export default class ExceutiveScoreboard extends Component {
checkYTD: true, checkYTD: true,
checkAB: true, checkAB: true,
checkYoy: true checkYoy: true
}) }, () => { this.getDetailDashboardCAT() })
}} }}
name="checkedB" name="checkedB"
color="primary" color="primary"
...@@ -322,7 +555,7 @@ export default class ExceutiveScoreboard extends Component { ...@@ -322,7 +555,7 @@ export default class ExceutiveScoreboard extends Component {
checkYTD: false, checkYTD: false,
checkAB: false, checkAB: false,
checkYoy: false checkYoy: false
}) }, () => { this.getDetailDashboardCAT() })
}} }}
name="checkedB" name="checkedB"
color="primary" color="primary"
...@@ -340,7 +573,7 @@ export default class ExceutiveScoreboard extends Component { ...@@ -340,7 +573,7 @@ export default class ExceutiveScoreboard extends Component {
this.setState({ this.setState({
checkYTD: !this.state.checkYTD 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 }, () => { this.getDetailDashboardCAT() })
}) })
}} }}
name="checkedB" name="checkedB"
...@@ -355,7 +588,7 @@ export default class ExceutiveScoreboard extends Component { ...@@ -355,7 +588,7 @@ export default class ExceutiveScoreboard extends Component {
checked={this.state.checkAB} checked={this.state.checkAB}
onChange={() => { onChange={() => {
this.setState({ checkAB: !this.state.checkAB }, () => { this.setState({ checkAB: !this.state.checkAB }, () => {
this.setState({ checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD }) this.setState({ checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD }, () => { this.getDetailDashboardCAT() })
}) })
}} }}
name="checkedB" name="checkedB"
...@@ -370,7 +603,7 @@ export default class ExceutiveScoreboard extends Component { ...@@ -370,7 +603,7 @@ export default class ExceutiveScoreboard extends Component {
checked={this.state.checkYoy} checked={this.state.checkYoy}
onChange={() => { onChange={() => {
this.setState({ checkYoy: !this.state.checkYoy }, () => { this.setState({ checkYoy: !this.state.checkYoy }, () => {
this.setState({ checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD }) this.setState({ checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD }, () => { this.getDetailDashboardCAT() })
}) })
}} }}
name="checkedB" name="checkedB"
...@@ -407,67 +640,25 @@ export default class ExceutiveScoreboard extends Component { ...@@ -407,67 +640,25 @@ export default class ExceutiveScoreboard extends Component {
/> />
</div> </div>
</div> */} </div> */}
<GridList cellHeight={300} cols={2}> <GridList cellHeight={500} cols={2}>
{this.state.listDetailKPI.map((item, index) => { {this.state.listDetailKPI.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: "#e3e16d",
points: dataAB
})
}
if (this.state.checkYoy === true) {
option.push({
color: "#f27f77",
points: dataYoy
})
}
item.nodes.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 ( return (
<GridListTile key={item} cols={this.state.listDetailKPI.length == 1? 2 : 1} style={{ marginBottom: 10 }}> <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' }}> {!this.state.loading2 && <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> <div>
<span style={{ fontSize: 17 }}>{item.category_name}</span> <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> <Typography style={{ fontSize: 24, fontWeight: 'bold' }}><NumberFormat value={item.current_value} displayType={'text'} thousandSeparator={true} /></Typography>
<Typography style={{ fontSize: 16, fontWeight: 'bold' }}>In IDR mn</Typography> <Typography style={{ fontSize: 16, fontWeight: 'bold' }}>{item.uom}</Typography>
</div> </div>
<div style={{}}> <div style={{}}>
<LineChart {(this.state.checkAB || this.state.checkYTD || this.state.checkYoy) && !this.state.loading && <ReactECharts
width={400} showLoading={this.state.loading2}
height={150} lazyUpdate
data={option} style={{ height: 350, width: '100%', marginTop: 20 }}
// yMin={0} option={item.options}
// yMax={10} />}
// onPointHover={(event, point) => {console.log(event)}}
hideXAxis={true}
hideYAxis={true}
hideXLabel={true}
hideYLabel={true}
/>
</div> </div>
</div> </div>}
</GridListTile> </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