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
Hide 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 {
accessMB: false,
accessMR: false,
company: [],
dataDashboardCAT: []
dataDashboardCAT: [],
loading2: false
}
}
componentDidMount() {
this.setState({ loading: true })
this.setState({ loading: true, loading2: true })
let userId = localStorage.getItem(Constant.USER)
api.create().getDetailUser(userId).then((response) => {
if (response.data) {
......@@ -136,7 +137,7 @@ class HomePage extends Component {
}
})
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 {
<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> */}
<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>
{item.total_kpi != null &&
<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 {
</div>}
<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 }}>
<Typography style={{ textAlign: 'center' }}>{item.performance}</Typography>
<Typography style={{ textAlign: 'center', color: '#4b4b4b' }}>{item.performance}</Typography>
</div>
</div>
<div style={{ display: 'flex', justifyContent: 'center' }}>
......@@ -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 }}>
{/* <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', color: '#4b4b4b' }}>{titleCase(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 }}>
......@@ -924,7 +925,7 @@ class HomePage extends Component {
</div>}
<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 }}>
<Typography style={{ textAlign: 'center' }}>{item.performance}</Typography>
<Typography style={{ textAlign: 'center', color: '#4b4b4b' }}>{item.performance}</Typography>
</div>
</div>
<div style={{ display: 'flex', justifyContent: 'center' }}>
......@@ -1081,7 +1082,7 @@ class HomePage extends Component {
/>
</div>
<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) => {
return (
<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 {
console.log(this.props)
this.props.selectIndex('CAT Dashboard')
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) {
this.setState({ userType: this.props.location.state.userType, intent: 'Home', rawData: this.props.location.state.rawData }, () => {
this.getDetailUser()
})
if (dataStorageCAT != 'datacat' && dataStorageCAT != null) {
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 {
this.getDetailUser()
}
......@@ -129,7 +143,13 @@ export default class DashboardCAT extends Component {
getOptionLabel: (option) => titleCase(option.company_name),
};
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]) }, () => {
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()
})
} else {
......@@ -294,7 +314,8 @@ export default class DashboardCAT extends Component {
this.setState({ selectedKPI: data }, () => {
let payloadData = {
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))
})
......@@ -342,7 +363,14 @@ export default class DashboardCAT extends Component {
<Autocomplete
{...this.state.listCompany}
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()
})}
disableClearable
......@@ -376,7 +404,7 @@ export default class DashboardCAT extends Component {
selectedMonth.push(item.month_value)
}
})
this.setState({selectedMonth})
this.setState({ selectedMonth })
this.getDasboardCAT()
})}
disableClearable
......
src/container/Laporan/ExceutiveScoreboard.js
View file @ 8d2805c3
......@@ -34,6 +34,7 @@ export default class ExceutiveScoreboard extends Component {
checkYTD: true,
checkAB: true,
checkYoy: true,
loading2: false,
newDataParent: []
}
}
......@@ -41,7 +42,7 @@ export default class ExceutiveScoreboard extends Component {
componentDidMount() {
// console.log()
console.log(this.state.dataPayload)
this.setState({ loading: true })
this.setState({ loading: true, loading2: true })
this.olahDataChart()
this.getDetailDashboardCAT()
}
......@@ -111,6 +112,7 @@ export default class ExceutiveScoreboard extends Component {
}
getDetailDashboardCAT() {
this.setState({ loading2: true })
let payload = {
"company_id": this.state.dataPayload.company.company_id,
"periode": this.state.dataPayload.periode.periode,
......@@ -125,9 +127,212 @@ export default class ExceutiveScoreboard extends Component {
// responseArray.map((item,index) => {
// if
// })
let asu = responseArray.filter((val) => this.state.selectedKPI.includes(val.category_name))
this.setState({ listDetailKPI: asu })
console.log(asu)
let aa = responseArray.filter((val) => this.state.selectedKPI.includes(val.category_name))
console.log(aa)
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 {
]
}
];
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 (
<div style={{ padding: 20 }}>
<div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', flexFlow: 'wrap' }}>
......@@ -303,7 +536,7 @@ export default class ExceutiveScoreboard extends Component {
checkYTD: true,
checkAB: true,
checkYoy: true
})
}, () => { this.getDetailDashboardCAT() })
}}
name="checkedB"
color="primary"
......@@ -322,7 +555,7 @@ export default class ExceutiveScoreboard extends Component {
checkYTD: false,
checkAB: false,
checkYoy: false
})
}, () => { this.getDetailDashboardCAT() })
}}
name="checkedB"
color="primary"
......@@ -340,7 +573,7 @@ export default class ExceutiveScoreboard extends Component {
this.setState({
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"
......@@ -355,7 +588,7 @@ export default class ExceutiveScoreboard extends Component {
checked={this.state.checkAB}
onChange={() => {
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"
......@@ -370,7 +603,7 @@ export default class ExceutiveScoreboard extends Component {
checked={this.state.checkYoy}
onChange={() => {
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"
......@@ -407,67 +640,25 @@ export default class ExceutiveScoreboard extends Component {
/>
</div>
</div> */}
<GridList cellHeight={300} cols={2}>
<GridList cellHeight={500} cols={2}>
{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 (
<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' }}>
<GridListTile key={item} cols={this.state.listDetailKPI.length == 1 ? 2 : 1} style={{ marginBottom: 10 }}>
{!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>
<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: 16, fontWeight: 'bold' }}>In IDR mn</Typography>
<Typography style={{ fontSize: 24, fontWeight: 'bold' }}><NumberFormat value={item.current_value} displayType={'text'} thousandSeparator={true} /></Typography>
<Typography style={{ fontSize: 16, fontWeight: 'bold' }}>{item.uom}</Typography>
</div>
<div style={{}}>
<LineChart
width={400}
height={150}
data={option}
// yMin={0}
// yMax={10}
// onPointHover={(event, point) => {console.log(event)}}
hideXAxis={true}
hideYAxis={true}
hideXLabel={true}
hideYLabel={true}
/>
{(this.state.checkAB || this.state.checkYTD || this.state.checkYoy) && !this.state.loading && <ReactECharts
showLoading={this.state.loading2}
lazyUpdate
style={{ height: 350, width: '100%', marginTop: 20 }}
option={item.options}
/>}
</div>
</div>
</div>}
</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