Skip to content

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

update banyak juga jir, kirain gampang dashboard, jadi pusing aku tuh

parent 1ce45619
Show whitespace changes
Inline Side-by-side
Showing with 302 additions and 82 deletions
src/container/HomePage.js
View file @ 8d2805c3
...@@ -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 @ 8d2805c3
...@@ -41,15 +41,29 @@ export default class DashboardCAT extends Component { ...@@ -41,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 (this.props.location.state !== undefined) {
if (dataStorageCAT != 'datacat' && dataStorageCAT != null) { if (dataStorageCAT != 'datacat' && dataStorageCAT != null) {
this.setState({selectedKPI: JSON.parse(dataStorageCAT).listKPI}) this.setState({ selectedKPI: JSON.parse(dataStorageCAT).listKPI }, () => {
console.log(dataStorageCAT) console.log(dataStorageCAT)
} console.log(this.props.location.state.rawData.companyId)
if (this.props.location.state !== undefined) { 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.setState({ userType: this.props.location.state.userType, intent: 'Home', rawData: this.props.location.state.rawData }, () => {
this.getDetailUser() 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()
} }
...@@ -129,7 +143,13 @@ export default class DashboardCAT extends Component { ...@@ -129,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 {
...@@ -294,7 +314,8 @@ export default class DashboardCAT extends Component { ...@@ -294,7 +314,8 @@ 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))
}) })
...@@ -342,7 +363,14 @@ export default class DashboardCAT extends Component { ...@@ -342,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
...@@ -376,7 +404,7 @@ export default class DashboardCAT extends Component { ...@@ -376,7 +404,7 @@ export default class DashboardCAT extends Component {
selectedMonth.push(item.month_value) selectedMonth.push(item.month_value)
} }
}) })
this.setState({selectedMonth}) this.setState({ selectedMonth })
this.getDasboardCAT() this.getDasboardCAT()
})} })}
disableClearable disableClearable
......
src/container/Laporan/ExceutiveScoreboard.js
View file @ 8d2805c3
...@@ -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