Skip to content

T
Tia-dev
Commit 2f5785b5 authored by rifkaki's avatar rifkaki
Browse files
Options

Merge branch 'master' of http://103.44.149.204/d.arizona/tia-dev into rifka

parents 8004221d b2cdb131
Show whitespace changes
Inline Side-by-side
Showing with 476 additions and 489 deletions
src/container/Laporan/DashboardFinancial.js
View file @ 2f5785b5
...@@ -78,14 +78,15 @@ export default class DashboardFinancial extends React.Component { ...@@ -78,14 +78,15 @@ export default class DashboardFinancial extends React.Component {
minEBITDA: 0, minEBITDA: 0,
maxEBITDA: 0, maxEBITDA: 0,
intervalEBITDA: 0, intervalEBITDA: 0,
data: [ data: [],
], defaultMonth: [],
defaultYear: []
}; };
} }
componentDidMount() { componentDidMount() {
console.log(this.props.height) console.log(this.props.height)
this.setState({loading: true}) this.setState({ loading: true })
this.getDetailUser() this.getDetailUser()
} }
...@@ -164,13 +165,13 @@ export default class DashboardFinancial extends React.Component { ...@@ -164,13 +165,13 @@ export default class DashboardFinancial extends React.Component {
business_unit_name: String(item.business_unit_name).toLocaleLowerCase(), business_unit_name: String(item.business_unit_name).toLocaleLowerCase(),
} }
}) })
businessData.sort((a,b) => a.business_unit_name.localeCompare(b.business_unit_name)) businessData.sort((a, b) => a.business_unit_name.localeCompare(b.business_unit_name))
let defaultProps = { let defaultProps = {
options: businessData, options: businessData,
getOptionLabel: (option) => titleCase(option.business_unit_name), getOptionLabel: (option) => titleCase(option.business_unit_name),
}; };
// let index = arrayBaru.findIndex((val) => val.company_id == comID) // let index = arrayBaru.findIndex((val) => val.company_id == comID)
this.setState({ listBusiness: defaultProps, businessUnit: businessData[0]}, () => { this.setState({ listBusiness: defaultProps, businessUnit: businessData[0] }, () => {
this.getMonth() this.getMonth()
}) })
} else { } else {
...@@ -199,19 +200,28 @@ export default class DashboardFinancial extends React.Component { ...@@ -199,19 +200,28 @@ export default class DashboardFinancial extends React.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 monthData = data.map((item) => { let index = data.findIndex((val) => val.month_name == month)
return { let monthData = []
let defaultMonth = []
data.map((item, indexs) => {
if (indexs <= index + 1) {
monthData.push({
month_id: item.id, month_id: item.id,
month_value: String(item.month_name).substr(0, 3) month_value: String(item.month_name).substr(0, 3)
})
} }
defaultMonth.push({
month_id: item.id,
month_value: String(item.month_name).substr(0, 3)
})
}) })
let defaultProps = { let defaultProps = {
options: monthData, options: monthData,
getOptionLabel: (option) => option.month_value, getOptionLabel: (option) => option.month_value,
}; };
let index = data.findIndex((val) => val.month_name == month)
console.log(index); console.log(monthData);
this.setState({ listMonth: defaultProps, month: index == -1 ? monthData[0] : monthData[index], month2: index == -1 ? monthData[1] : monthData[index+1], }, () => { this.setState({ defaultMonth, listMonth: defaultProps, listMonth2: defaultProps, month: index == -1 ? monthData[0] : monthData[index], month2: index == -1 ? monthData[1] : monthData[index + 1], }, () => {
console.log(this.state.month) console.log(this.state.month)
this.getPeriode() this.getPeriode()
}) })
...@@ -240,7 +250,7 @@ export default class DashboardFinancial extends React.Component { ...@@ -240,7 +250,7 @@ export default class DashboardFinancial extends React.Component {
let data = [] let data = []
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))) {
data.push(item) data.push(item)
} }
// } // }
...@@ -263,7 +273,7 @@ export default class DashboardFinancial extends React.Component { ...@@ -263,7 +273,7 @@ export default class DashboardFinancial extends React.Component {
// console.log(this.state.latestPeriode) // console.log(this.state.latestPeriode)
// console.log(periodeData) // console.log(periodeData)
// console.log(index) // console.log(index)
this.setState({ listPeriode: defaultProps, periode: index === -1 ? periodeData[0] : periodeData[index], periode2: index === -1 ? periodeData[1] : periodeData[index+1] }, () => { this.setState({ listPeriode: defaultProps, listPeriode2: { ...defaultProps, options: [periodeData[index]] }, periode: index === -1 ? periodeData[0] : periodeData[index], periode2: periodeData[index] }, () => {
this.getDashboardFinancial() this.getDashboardFinancial()
}) })
} }
...@@ -284,10 +294,10 @@ export default class DashboardFinancial extends React.Component { ...@@ -284,10 +294,10 @@ export default class DashboardFinancial extends React.Component {
}, },
toolbox: { toolbox: {
feature: { feature: {
dataView: {show: true, readOnly: false}, dataView: { show: true, readOnly: false },
magicType: {show: true, type: ['line', 'bar']}, magicType: { show: true, type: ['line', 'bar'] },
restore: {show: true}, restore: { show: true },
saveAsImage: {show: true} saveAsImage: { show: true }
} }
}, },
legend: { legend: {
...@@ -367,13 +377,13 @@ export default class DashboardFinancial extends React.Component { ...@@ -367,13 +377,13 @@ export default class DashboardFinancial extends React.Component {
const handleName = (name) => { const handleName = (name) => {
let newName = '' let newName = ''
if(String(name).includes(':')) { if (String(name).includes(':')) {
let indexTidu = String(name).indexOf(':') let indexTidu = String(name).indexOf(':')
let indexSpace = String(name).indexOf(' ') let indexSpace = String(name).indexOf(' ')
if (indexTidu > indexSpace) { if (indexTidu > indexSpace) {
newName = String(name).substr(0,indexSpace) newName = String(name).substr(0, indexSpace)
} else { } else {
newName = String(name).substr(0,indexTidu) newName = String(name).substr(0, indexTidu)
} }
} else { } else {
// if (String(name).includes('Consolidated')) { // if (String(name).includes('Consolidated')) {
...@@ -389,7 +399,7 @@ export default class DashboardFinancial extends React.Component { ...@@ -389,7 +399,7 @@ export default class DashboardFinancial extends React.Component {
api.create().getDashboardFinancial(payload).then((res) => { api.create().getDashboardFinancial(payload).then((res) => {
console.log(res) console.log(res)
if (res.data) { if (res.data) {
let response = res.data.data.ytd != null? res.data.data.ytd : (res.data.data.mtd != null? res.data.data.mtd : res.data.data.summary) let response = res.data.data.ytd != null ? res.data.data.ytd : (res.data.data.mtd != null ? res.data.data.mtd : res.data.data.summary)
let revenue = [] let revenue = []
let totalAssets = [] let totalAssets = []
...@@ -414,7 +424,11 @@ export default class DashboardFinancial extends React.Component { ...@@ -414,7 +424,11 @@ export default class DashboardFinancial extends React.Component {
let minEBITDA = response.ebitda.vertical_pointing[1] let minEBITDA = response.ebitda.vertical_pointing[1]
let intervalEBITDA = Number(response.ebitda.interval) let intervalEBITDA = Number(response.ebitda.interval)
response.revenue.nodes.map((item,index) => { if (response.total_assets != undefined) {
}
response.revenue.nodes.map((item, index) => {
if (this.state.report.value == 'summary') { if (this.state.report.value == 'summary') {
companyRev.push(item.periode) companyRev.push(item.periode)
mbRev.push(item.value) mbRev.push(item.value)
...@@ -427,7 +441,7 @@ export default class DashboardFinancial extends React.Component { ...@@ -427,7 +441,7 @@ export default class DashboardFinancial extends React.Component {
}) })
response.tpat.nodes.map((item,index) => { response.tpat.nodes.map((item, index) => {
if (this.state.report.value == 'summary') { if (this.state.report.value == 'summary') {
companyTPAT.push(item.periode) companyTPAT.push(item.periode)
mbTPAT.push(item.value) mbTPAT.push(item.value)
...@@ -439,7 +453,7 @@ export default class DashboardFinancial extends React.Component { ...@@ -439,7 +453,7 @@ export default class DashboardFinancial extends React.Component {
} }
}) })
response.ebitda.nodes.map((item,index) => { response.ebitda.nodes.map((item, index) => {
if (this.state.report.value == 'summary') { if (this.state.report.value == 'summary') {
companyEBITDA.push(item.periode) companyEBITDA.push(item.periode)
mbEBITDA.push(item.value) mbEBITDA.push(item.value)
...@@ -452,7 +466,7 @@ export default class DashboardFinancial extends React.Component { ...@@ -452,7 +466,7 @@ export default class DashboardFinancial extends React.Component {
}) })
if (this.state.report.value == 'summary') { if (this.state.report.value == 'summary') {
response.revenue.nodes.map((item,index) => { response.revenue.nodes.map((item, index) => {
totalAssets.push({ totalAssets.push({
"company": item.company, "company": item.company,
"MB": item.value_mb, "MB": item.value_mb,
...@@ -462,9 +476,9 @@ export default class DashboardFinancial extends React.Component { ...@@ -462,9 +476,9 @@ export default class DashboardFinancial extends React.Component {
}) })
}) })
} }
this.setState({companyRev, mbRev, mrRev, minRev, maxRev, intervalRev, companyTPAT, mbTPAT, mrTPAT, minTPAT, maxTPAT, intervalTPAT, companyEBITDA, mbEBITDA, mrEBITDA, minEBITDA, maxEBITDA, intervalEBITDA}, () => { this.setState({ companyRev, mbRev, mrRev, minRev, maxRev, intervalRev, companyTPAT, mbTPAT, mrTPAT, minTPAT, maxTPAT, intervalTPAT, companyEBITDA, mbEBITDA, mrEBITDA, minEBITDA, maxEBITDA, intervalEBITDA }, () => {
console.log(companyTPAT) console.log(companyTPAT)
this.setState({loading: false}) this.setState({ loading: false })
}) })
} }
}) })
...@@ -539,11 +553,21 @@ export default class DashboardFinancial extends React.Component { ...@@ -539,11 +553,21 @@ export default class DashboardFinancial extends React.Component {
value={this.state.report} value={this.state.report}
/> />
</div> </div>
<div style={{ display: 'flex', marginTop: 10}}> <div style={{ display: 'flex', marginTop: 10 }}>
<Autocomplete <Autocomplete
{...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 indexMonth1 = this.state.listMonth.options.findIndex((val) => val.month_value == newInputValue.month_value)
let listMonth2 = []
this.state.listMonth.options.map((item, index) => {
if (index >= indexMonth1) {
listMonth2.push(item)
}
})
this.setState({ listMonth2: Number(this.state.periode.periode) < Number(this.state.periode2.periode) ? this.state.listMonth2 : { ...this.state.listMonth2, options: listMonth2, month2: listMonth2[0] } }, () => {
this.setState({ month2: Number(this.state.periode.periode) < Number(this.state.periode2.periode) ? this.state.month2 : this.state.listMonth2.options[0] })
})
this.getDashboardFinancial() this.getDashboardFinancial()
})} })}
disableClearable disableClearable
...@@ -555,16 +579,67 @@ export default class DashboardFinancial extends React.Component { ...@@ -555,16 +579,67 @@ export default class DashboardFinancial extends React.Component {
{...this.state.listPeriode} {...this.state.listPeriode}
id="periode" id="periode"
onChange={(event, newInputValue) => this.setState({ periode: newInputValue, loading: true }, () => { onChange={(event, newInputValue) => this.setState({ periode: newInputValue, loading: true }, () => {
let indexPeriode1 = this.state.listPeriode.options.findIndex((val) => val.periode == newInputValue.periode)
let listPeriode2 = []
let listMonth = []
let listMonth2 = this.state.listMonth2.options
let dateNow = new Date()
let dateNow2 = new Date()
let yearNow = dateNow.getFullYear()
dateNow2.setMonth(dateNow2.getMonth() - 1);
let month = format(dateNow2, 'MMMM')
this.state.listPeriode.options.map((item, index) => {
if (index >= indexPeriode1) {
listPeriode2.push(item)
}
})
let data = this.state.defaultMonth
let index = data.findIndex((val) => val.month_value == String(month).substr(0, 3))
let monthData = []
let monthData2 = []
if (Number(newInputValue.periode) < Number(yearNow)) {
listMonth = this.state.defaultMonth
data.map((item, indexs) => {
if (indexs <= index + 1) {
monthData2.push({
month_id: item.month_id,
month_value: String(item.month_value).substr(0, 3)
})
}
})
listMonth2 = monthData2
} else {
data.map((item, indexs) => {
if (indexs <= index + 1) {
monthData.push({
month_id: item.month_id,
month_value: String(item.month_value).substr(0, 3)
})
}
})
listMonth = monthData
}
this.setState({ listPeriode2: { ...this.state.listPeriode2, options: listPeriode2, periode2: listPeriode2[0], } }, () => {
this.setState({
periode2: Number(this.state.periode.periode) < Number(this.state.periode2.periode) ? this.state.periode2 : this.state.listPeriode2.options[0],
listMonth: { ...this.state.listMonth, options: listMonth },
listMonth2: { ...this.state.listMonth2, options: listMonth2 },
month: Number(newInputValue.periode) < Number(this.state.periode.periode) ? this.state.month : listMonth[0]
}, () => {
this.getDashboardFinancial() this.getDashboardFinancial()
})
})
})} })}
disableClearable disableClearable
style={{ width: 250 }} style={{ width: 250 }}
renderInput={(params) => <TextField {...params} label="Period" margin="normal" style={{ marginTop: 7 }} />} renderInput={(params) => <TextField {...params} label="Period" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.periode} value={this.state.periode}
/> />
{this.state.report.value == 'summary' && <Typography style={{ fontSize: '16px', color: 'black', alignSelf: 'center', marginLeft: 25, marginRight: 25, paddingTop: 25}}>To</Typography>} {this.state.report.value == 'summary' && <Typography style={{ fontSize: '16px', color: 'black', alignSelf: 'center', marginLeft: 25, marginRight: 25, paddingTop: 25 }}>To</Typography>}
{this.state.report.value == 'summary' && <Autocomplete {this.state.report.value == 'summary' && <Autocomplete
{...this.state.listMonth} {...this.state.listMonth2}
id="month" id="month"
onChange={(event, newInputValue) => this.setState({ month2: newInputValue, loading: true }, () => { onChange={(event, newInputValue) => this.setState({ month2: newInputValue, loading: true }, () => {
this.getDashboardFinancial() this.getDashboardFinancial()
...@@ -575,10 +650,53 @@ export default class DashboardFinancial extends React.Component { ...@@ -575,10 +650,53 @@ export default class DashboardFinancial extends React.Component {
value={this.state.month2} value={this.state.month2}
/>} />}
{this.state.report.value == 'summary' && <Autocomplete {this.state.report.value == 'summary' && <Autocomplete
{...this.state.listPeriode} {...this.state.listPeriode2}
id="periode" id="periode"
onChange={(event, newInputValue) => this.setState({ periode2: newInputValue, loading: true }, () => { onChange={(event, newInputValue) => this.setState({ periode2: newInputValue, loading: true }, () => {
let dateNow = new Date()
let yearNow = dateNow.getFullYear()
let data = this.state.defaultMonth
let monthData2 = []
let dateNow2 = new Date()
dateNow2.setMonth(dateNow2.getMonth() - 1);
let month = format(dateNow2, 'MMMM')
if (Number(this.state.periode2.periode) < Number(yearNow)) {
if (Number(this.state.periode2.periode) == Number(this.state.periode.periode)) {
let index = data.findIndex((val) => val.month_value == this.state.month.month_value)
data.map((item, indexs) => {
if (indexs >= index) {
monthData2.push({
month_id: item.month_id,
month_value: String(item.month_value).substr(0, 3)
})
}
})
let listMonth2 = monthData2
this.setState({ month2: listMonth2[0], listMonth2: {...this.state.listMonth2, options: listMonth2} }, () => {
this.getDashboardFinancial()
})
} else {
this.setState({ listMonth2: { ...this.state.listMonth2, options: this.state.defaultMonth } }, () => {
this.getDashboardFinancial()
})
}
} else {
let index = data.findIndex((val) => val.month_value == String(month).substr(0, 3))
data.map((item, indexs) => {
if (indexs <= index + 1) {
monthData2.push({
month_id: item.month_id,
month_value: String(item.month_value).substr(0, 3)
})
}
})
let listMonth2 = monthData2
this.setState({ listMonth2: { ...this.state.listMonth2, options: listMonth2 } }, () => {
this.setState({ month2: this.state.listMonth2.options[0] }, () => {
this.getDashboardFinancial() this.getDashboardFinancial()
})
})
}
})} })}
disableClearable disableClearable
style={{ width: 250 }} style={{ width: 250 }}
...@@ -634,18 +752,18 @@ export default class DashboardFinancial extends React.Component { ...@@ -634,18 +752,18 @@ export default class DashboardFinancial extends React.Component {
/> />
</div> */} </div> */}
</div> </div>
<Divider style={{marginTop: 15}}/> <Divider style={{ marginTop: 15 }} />
<div style={{ minWidth: 'max-content', padding: '20px 20px 0px 20px'}}> <div style={{ minWidth: 'max-content', padding: '20px 20px 0px 20px' }}>
<div> <div>
<Typography style={{ fontSize: '16px', color: 'black' }}>{this.state.report.value == 'mtd'? 'Graph MTD by Industry' : this.state.report.value == 'ytd'? 'Graph YTD by Industry' : 'Graph Monthly Historical by Company'}</Typography> <Typography style={{ fontSize: '16px', color: 'black' }}>{this.state.report.value == 'mtd' ? 'Graph MTD by Industry' : this.state.report.value == 'ytd' ? 'Graph YTD by Industry' : 'Graph Monthly Historical by Company'}</Typography>
{this.state.month != null && this.state.periode != null && <Typography style={{ fontSize: '16px', color: 'black' }}>Period : {String(this.state.month.month_value).toLocaleUpperCase()} {this.state.periode.periode}</Typography>} {this.state.month != null && this.state.periode != null && <Typography style={{ fontSize: '16px', color: 'black' }}>Period : {String(this.state.month.month_value).toLocaleUpperCase()} {this.state.periode.periode}</Typography>}
<Typography style={{ fontSize: '16px', color: 'black' }}>in IDR mn</Typography> <Typography style={{ fontSize: '16px', color: 'black' }}>in IDR mn</Typography>
</div> </div>
<div style={{ height: Number(0.6 * this.props.height), border: '1px solid black', marginTop: 25, paddingBottom: 50}}> <div style={{ height: Number(0.6 * this.props.height), border: '1px solid black', marginTop: 25, paddingBottom: 50 }}>
{this.state.businessUnit != null && <Typography style={{ fontSize: '16px', color: 'black', textAlign: 'center', marginTop: 10, marginBottom: 10 }}>{`Revenue ${this.state.report.value == 'mtd' || this.state.report.value == 'ytd'? String(this.state.report.value).toLocaleUpperCase() : ''} - ${this.state.report.value == 'mtd' || this.state.report.value == 'ytd'? titleCase(this.state.businessUnit.business_unit_name) : this.state.company.company_name}`}</Typography>} {this.state.businessUnit != null && <Typography style={{ fontSize: '16px', color: 'black', textAlign: 'center', marginTop: 10, marginBottom: 10 }}>{`Revenue ${this.state.report.value == 'mtd' || this.state.report.value == 'ytd' ? String(this.state.report.value).toLocaleUpperCase() : ''} - ${this.state.report.value == 'mtd' || this.state.report.value == 'ytd' ? titleCase(this.state.businessUnit.business_unit_name) : this.state.company.company_name}`}</Typography>}
{!this.state.loading && <ReactECharts {!this.state.loading && <ReactECharts
style={{height: 500, width: '100%', marginTop: 20}} style={{ height: 500, width: '100%', marginTop: 20 }}
option={{ option={{
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
...@@ -658,12 +776,12 @@ export default class DashboardFinancial extends React.Component { ...@@ -658,12 +776,12 @@ export default class DashboardFinancial extends React.Component {
}, },
toolbox: { toolbox: {
feature: { feature: {
restore: {show: true}, restore: { show: true },
saveAsImage: {show: true} saveAsImage: { show: true }
} }
}, },
legend: { legend: {
data: ['Revenue', 'GP Margin'] data: ['MB', 'MR', 'Revenue', 'GP Margin']
}, },
xAxis: [ xAxis: [
{ {
...@@ -674,7 +792,7 @@ export default class DashboardFinancial extends React.Component { ...@@ -674,7 +792,7 @@ export default class DashboardFinancial extends React.Component {
} }
} }
], ],
yAxis: this.state.report.value != 'summary'? yAxis: this.state.report.value != 'summary' ?
[ [
{ {
type: 'value', type: 'value',
...@@ -704,7 +822,7 @@ export default class DashboardFinancial extends React.Component { ...@@ -704,7 +822,7 @@ export default class DashboardFinancial extends React.Component {
} }
] ]
, ,
series: this.state.report.value != 'summary'? series: this.state.report.value != 'summary' ?
[ [
{ {
name: 'MB', name: 'MB',
...@@ -734,10 +852,10 @@ export default class DashboardFinancial extends React.Component { ...@@ -734,10 +852,10 @@ export default class DashboardFinancial extends React.Component {
/>} />}
</div> </div>
<div style={{ height: Number(0.6 * this.props.height), border: '1px solid black', marginTop: 50, paddingBottom: 50}}> <div style={{ height: Number(0.6 * this.props.height), border: '1px solid black', marginTop: 50, paddingBottom: 50 }}>
{this.state.businessUnit != null && <Typography style={{ fontSize: '16px', color: 'black', textAlign: 'center', marginTop: 10, marginBottom: 10 }}>{`TPAT ${this.state.report.value == 'mtd' || this.state.report.value == 'ytd'? String(this.state.report.value).toLocaleUpperCase() : ''} - ${this.state.report.value == 'mtd' || this.state.report.value == 'ytd'? titleCase(this.state.businessUnit.business_unit_name) : this.state.company.company_name}`}</Typography>} {this.state.businessUnit != null && <Typography style={{ fontSize: '16px', color: 'black', textAlign: 'center', marginTop: 10, marginBottom: 10 }}>{`TPAT ${this.state.report.value == 'mtd' || this.state.report.value == 'ytd' ? String(this.state.report.value).toLocaleUpperCase() : ''} - ${this.state.report.value == 'mtd' || this.state.report.value == 'ytd' ? titleCase(this.state.businessUnit.business_unit_name) : this.state.company.company_name}`}</Typography>}
{!this.state.loading && <ReactECharts {!this.state.loading && <ReactECharts
style={{height: 500, width: '100%', marginTop: 20}} style={{ height: 500, width: '100%', marginTop: 20 }}
option={{ option={{
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
...@@ -750,12 +868,12 @@ export default class DashboardFinancial extends React.Component { ...@@ -750,12 +868,12 @@ export default class DashboardFinancial extends React.Component {
}, },
toolbox: { toolbox: {
feature: { feature: {
restore: {show: true}, restore: { show: true },
saveAsImage: {show: true} saveAsImage: { show: true }
} }
}, },
legend: { legend: {
data: ['TPAT', 'TPAT Margin'] data: ['MB', 'MR', 'TPAT', 'TPAT Margin']
}, },
xAxis: [ xAxis: [
{ {
...@@ -766,7 +884,7 @@ export default class DashboardFinancial extends React.Component { ...@@ -766,7 +884,7 @@ export default class DashboardFinancial extends React.Component {
} }
} }
], ],
yAxis: this.state.report.value != 'summary'? yAxis: this.state.report.value != 'summary' ?
[ [
{ {
type: 'value', type: 'value',
...@@ -796,7 +914,7 @@ export default class DashboardFinancial extends React.Component { ...@@ -796,7 +914,7 @@ export default class DashboardFinancial extends React.Component {
} }
] ]
, ,
series: this.state.report.value != 'summary'? series: this.state.report.value != 'summary' ?
[ [
{ {
name: 'MB', name: 'MB',
...@@ -838,8 +956,8 @@ export default class DashboardFinancial extends React.Component { ...@@ -838,8 +956,8 @@ export default class DashboardFinancial extends React.Component {
}, },
toolbox: { toolbox: {
feature: { feature: {
dataView: {show: true, readOnly: false}, // dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']}, // magicType: {show: true, type: ['bar']},
restore: {show: true}, restore: {show: true},
saveAsImage: {show: true} saveAsImage: {show: true}
} }
...@@ -900,10 +1018,10 @@ export default class DashboardFinancial extends React.Component { ...@@ -900,10 +1018,10 @@ export default class DashboardFinancial extends React.Component {
/> */} /> */}
</div> </div>
<div style={{ height: Number(0.6 * this.props.height), border: '1px solid black', marginTop: 50, paddingBottom: 50}}> <div style={{ height: Number(0.6 * this.props.height), border: '1px solid black', marginTop: 50, paddingBottom: 50 }}>
{this.state.businessUnit != null && <Typography style={{ fontSize: '16px', color: 'black', textAlign: 'center', marginTop: 10, marginBottom: 10 }}>{`EBITDA ${this.state.report.value == 'mtd' || this.state.report.value == 'ytd'? String(this.state.report.value).toLocaleUpperCase() : ''} - ${this.state.report.value == 'mtd' || this.state.report.value == 'ytd'? titleCase(this.state.businessUnit.business_unit_name) : this.state.company.company_name}`}</Typography>} {this.state.businessUnit != null && <Typography style={{ fontSize: '16px', color: 'black', textAlign: 'center', marginTop: 10, marginBottom: 10 }}>{`EBITDA ${this.state.report.value == 'mtd' || this.state.report.value == 'ytd' ? String(this.state.report.value).toLocaleUpperCase() : ''} - ${this.state.report.value == 'mtd' || this.state.report.value == 'ytd' ? titleCase(this.state.businessUnit.business_unit_name) : this.state.company.company_name}`}</Typography>}
{!this.state.loading && <ReactECharts {!this.state.loading && <ReactECharts
style={{height: 500, width: '100%', marginTop: 20}} style={{ height: 500, width: '100%', marginTop: 20 }}
option={{ option={{
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
...@@ -916,12 +1034,12 @@ export default class DashboardFinancial extends React.Component { ...@@ -916,12 +1034,12 @@ export default class DashboardFinancial extends React.Component {
}, },
toolbox: { toolbox: {
feature: { feature: {
restore: {show: true}, restore: { show: true },
saveAsImage: {show: true} saveAsImage: { show: true }
} }
}, },
legend: { legend: {
data: ['EBITDA', 'EBITDA Margin'] data: ['MB', 'MR', 'EBITDA', 'EBITDA Margin']
}, },
xAxis: [ xAxis: [
{ {
...@@ -932,7 +1050,7 @@ export default class DashboardFinancial extends React.Component { ...@@ -932,7 +1050,7 @@ export default class DashboardFinancial extends React.Component {
} }
} }
], ],
yAxis: this.state.report.value != 'summary'? yAxis: this.state.report.value != 'summary' ?
[ [
{ {
type: 'value', type: 'value',
...@@ -962,7 +1080,7 @@ export default class DashboardFinancial extends React.Component { ...@@ -962,7 +1080,7 @@ export default class DashboardFinancial extends React.Component {
} }
] ]
, ,
series: this.state.report.value != 'summary'? series: this.state.report.value != 'summary' ?
[ [
{ {
name: 'MB', name: 'MB',
...@@ -992,110 +1110,97 @@ export default class DashboardFinancial extends React.Component { ...@@ -992,110 +1110,97 @@ export default class DashboardFinancial extends React.Component {
/>} />}
</div> </div>
{/* {this.state.report.value == 'summary' && <div style={{ height: Number(0.5 * this.props.height), border: '1px solid black', marginTop: 50, paddingBottom: 50}}> {this.state.report.value == 'summary' && <div style={{ height: Number(0.6 * this.props.height), border: '1px solid black', marginTop: 50, paddingBottom: 50 }}>
<Typography style={{ fontSize: '16px', color: 'black', textAlign: 'center', marginTop: 10, marginBottom: 10 }}>{`Total Assets - ${this.state.company.company_name}`}</Typography> <Typography style={{ fontSize: '16px', color: 'black', textAlign: 'center', marginTop: 10, marginBottom: 10 }}>{`Total Assets - ${this.state.company.company_name}`}</Typography>
<ResponsiveBar {!this.state.loading && <ReactECharts
data={this.state.totalAssets} style={{ height: 500, width: '100%', marginTop: 20 }}
keys={['MB', 'MR']} option={{
indexBy="company" tooltip: {
margin={{ top: 50, right: 50, bottom: 100, left: 75 }} trigger: 'axis',
padding={0.3} axisPointer: {
groupMode="grouped" type: 'cross',
valueScale={{ type: 'linear' }} crossStyle: {
indexScale={{ type: 'band', round: true }} color: '#999'
colors={['#2a70c0','#5399ea']} }
// defs={[ }
// { },
// id: 'dots', toolbox: {
// type: 'patternDots', feature: {
// background: 'inherit', restore: { show: true },
// color: '#5399ea', saveAsImage: { show: true }
// size: 4, }
// padding: 1, },
// stagger: true legend: {
// }, data: ['MB', 'MR', 'EBITDA', 'EBITDA Margin']
// { },
// id: 'lines', xAxis: [
// type: 'patternLines',
// background: 'inherit',
// color: '#2a70c0',
// rotation: -45,
// lineWidth: 6,
// spacing: 10
// }
// ]}
// fill={[
// {
// match: {
// id: 'MB'
// },
// id: 'dots'
// },
// {
// match: {
// id: 'MR'
// },
// id: 'lines'
// }
// ]}
borderColor={{ from: 'color', modifiers: [['darker', 1.6]] }}
axisTop={null}
axisRight={null}
axisBottom={{
tickSize: 20,
tickPadding: 0,
tickRotation: 0,
legend: 'Company',
legendPosition: 'middle',
// legendOffset: 32,
// renderTick: CustomTick,
// lineStyle: { stroke: '#f47560', strokeWidth: 1 },
// textStyle: { fill: '#e25c3b' },
// legend: 'Company',
// legendPosition: 'middle',
// legendOrientation: 'vertical',
legendOffset: 50,
}}
// axisLeft={{
// tickSize: 5,
// tickPadding: 5,
// tickRotation: 0,
// legend: 'food',
// legendPosition: 'middle',
// legendOffset: -40
// }}
labelSkipWidth={12}
labelSkipHeight={12}
labelTextColor={{ from: 'color', modifiers: [['darker', 1.6]] }}
legends={[
{ {
dataFrom: 'keys', type: 'category',
anchor: 'bottom', data: this.state.companyEBITDA,
direction: 'row', axisPointer: {
justify: false, type: 'shadow'
translateX: 30, }
translateY: 85, }
itemsSpacing: 7, ],
itemWidth: 109, yAxis: this.state.report.value != 'summary' ?
itemHeight: 10, [
itemDirection: 'left-to-right',
itemOpacity: 0.85,
symbolSize: 25,
effects: [
{ {
on: 'hover', type: 'value',
style: { name: '(Rp bn)',
itemOpacity: 1 min: this.state.minEBITDA,
max: this.state.maxEBITDA,
interval: this.state.intervalEBITDA
}
] :
[
{
type: 'value',
name: '(Rp bn)',
min: this.state.minEBITDA,
max: this.state.maxEBITDA,
interval: this.state.intervalEBITDA
},
{
type: 'value',
name: '(%)',
min: 0,
max: 100,
interval: 20,
axisLabel: {
formatter: '{value}%'
} }
} }
] ]
,
series: this.state.report.value != 'summary' ?
[
{
name: 'MB',
type: 'bar',
data: this.state.mbEBITDA
},
{
name: 'MR',
type: 'bar',
data: this.state.mrEBITDA
} }
]} ] :
animate={true} [
motionStiffness={90} {
motionDamping={15} name: 'EBITDA',
/> type: 'bar',
</div>} */} data: this.state.mbEBITDA
},
{
name: 'EBITDA Margin',
type: 'line',
yAxisIndex: 1,
data: this.state.mrEBITDA
}
]
}}
/>}
</div>}
</div> </div>
</Paper> </Paper>
</div> </div>
......
src/container/MasterData/MasterDataCAT/EditMasterDataCAT.js
View file @ 2f5785b5
...@@ -16,6 +16,7 @@ export default class EditMasterDataCAT extends Component { ...@@ -16,6 +16,7 @@ export default class EditMasterDataCAT extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
loading: true,
company: null, company: null,
parent: null, parent: null,
reportType: null, reportType: null,
...@@ -26,13 +27,15 @@ export default class EditMasterDataCAT extends Component { ...@@ -26,13 +27,15 @@ export default class EditMasterDataCAT extends Component {
listPeriode: null, listPeriode: null,
errorWeight: false, errorWeight: false,
msgErrorWeight: '', msgErrorWeight: '',
getParent: [] getParent: [],
periode: null,
created_by: '',
updated_by: ''
} }
} }
componentDidMount() { componentDidMount() {
this.getInputType() this.getInputType()
this.getPerusahaan()
this.getReportType() this.getReportType()
let date = format(new Date, 'yyyy-MM-dd') let date = format(new Date, 'yyyy-MM-dd')
this.setState({ this.setState({
...@@ -65,7 +68,7 @@ export default class EditMasterDataCAT extends Component { ...@@ -65,7 +68,7 @@ export default class EditMasterDataCAT 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.company_id : 0 let comID = this.props.data[8]
let companyData = data.map((item) => { let companyData = data.map((item) => {
return { return {
company_id: item.company_id, company_id: item.company_id,
...@@ -137,8 +140,8 @@ export default class EditMasterDataCAT extends Component { ...@@ -137,8 +140,8 @@ export default class EditMasterDataCAT extends Component {
}; };
// 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 periode = String(Number(currentYear)) let periode = String(Number(currentYear))
let index = data.sort((a, b) => a - b).findIndex((val) => val === periode) let index = data.sort((a, b) => a - b).findIndex((val) => val == this.props.data[6])
// console.log(data) // console.log(this.props.data)
// console.log(this.state.latestPeriode) // console.log(this.state.latestPeriode)
// console.log(periodeData) // console.log(periodeData)
console.log(index) console.log(index)
...@@ -181,7 +184,7 @@ export default class EditMasterDataCAT extends Component { ...@@ -181,7 +184,7 @@ export default class EditMasterDataCAT extends Component {
handleReportName(item) { handleReportName(item) {
let indexString = String(item).indexOf('-') let indexString = String(item).indexOf('-')
let gantiNama = String(item).substr(0, indexString) let gantiNama = indexString === -1 ? item : String(item).substr(0, indexString)
return gantiNama return gantiNama
} }
...@@ -219,7 +222,7 @@ export default class EditMasterDataCAT extends Component { ...@@ -219,7 +222,7 @@ export default class EditMasterDataCAT extends Component {
"detail": simpan "detail": simpan
} }
console.log(payload) console.log(payload)
this.props.createReportItems(payload) this.props.updateReportItems(payload)
} }
...@@ -261,48 +264,6 @@ export default class EditMasterDataCAT extends Component { ...@@ -261,48 +264,6 @@ export default class EditMasterDataCAT extends Component {
}) })
} }
getPerusahaan() {
api.create().getPerusahaanActive().then((response) => {
// console.log(response)
if (response.data) {
if (response.ok) {
if (response.data.status === 'success') {
let data = response.data.data
let companyData = data.map((item) => {
return {
company_id: item.company_id,
company_name: item.company_name
}
})
companyData.push({
company_id: 0,
company_name: 'Default'
})
let typeProps = {
options: companyData.sort((a, b) => a.company_id - b.company_id),
getOptionLabel: (option) => option.company_name,
};
this.setState({ listCompany: typeProps, companyData: response.data.data })
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
// alert(response.data.message)
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
}
})
}
getReportType() { getReportType() {
api.create().getReportType().then((response) => { api.create().getReportType().then((response) => {
// console.log(response) // console.log(response)
...@@ -341,71 +302,23 @@ export default class EditMasterDataCAT extends Component { ...@@ -341,71 +302,23 @@ export default class EditMasterDataCAT extends Component {
}) })
} }
getParent() {
if (this.state.reportType !== null && this.state.company !== null) {
let payload = {
"report_id": this.state.reportType.report_id,
"company_id": this.state.company.company_id
}
api.create().getReportParent(payload).then((response) => {
// console.log(response)
if (response.data) {
if (response.ok) {
if (response.data.status === 'success') {
let data = response.data.data
let parentData = data.map((item) => {
return {
item_report_id: item.item_report_id,
description: item.description
}
})
let defaultProps = {
options: parentData,
getOptionLabel: (option) => titleCase(option.description),
};
this.setState({ listParent: defaultProps, parentData: response.data.data })
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
// alert(response.data.message)
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
}
})
}
}
handleDate(item) { handleDate(item) {
let value = format(item, 'dd MMMM yyyy') let value = format(item, 'dd MMMM yyyy')
return value return value
} }
getDetailMasterDataCat() { getDetailMasterDataCat() {
console.log(this.props); this.setState({ loading: true })
api.create().getDetailMasterDataCat(this.props.data[1], this.props.data[6]).then((response) => { api.create().getDetailMasterDataCat(this.props.data[8], this.props.data[6]).then((response) => {
console.log(response); // console.log(response);
if (response.data) { if (response.data) {
if (response.ok) { if (response.data.status === "success") {
if (response.data.status === 'success') { this.setState({ getParent: response.data.data.filter((val) => String(val.type_item_report_name).toLocaleLowerCase() != 'break'), created_by: response.data.data[0].created, updated_by: response.data.data[0].created_at }, () => {
let data = response.data.data // console.log(this.state.getParent[0].created);
this.setState({ this.setState({ loading: false })
tempData: response.data.data, })
getCompanyID: data.company_id
}, () => this.getInputType(),
this.getPerusahaan(),
this.getReportType())
// console.log(response.data.data)
} else { } else {
// alert(response.data.message)
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => { this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) { if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => { setTimeout(() => {
...@@ -415,9 +328,6 @@ export default class EditMasterDataCAT extends Component { ...@@ -415,9 +328,6 @@ export default class EditMasterDataCAT extends Component {
} }
}) })
} }
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else { } else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' }) this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
} }
...@@ -437,7 +347,7 @@ export default class EditMasterDataCAT extends Component { ...@@ -437,7 +347,7 @@ export default class EditMasterDataCAT extends Component {
<div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}> <div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
<div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}> <div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title"> <div className="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Create Data</span> <span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Edit Data</span>
</div> </div>
</div> </div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}> <div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
...@@ -464,11 +374,8 @@ export default class EditMasterDataCAT extends Component { ...@@ -464,11 +374,8 @@ export default class EditMasterDataCAT extends Component {
<Autocomplete <Autocomplete
{...this.state.listCompany} {...this.state.listCompany}
id="company" id="company"
disabled={this.state.intent === 'Home' ? true : false} onChange={(event, newInputValue) => this.setState({ company_name: newInputValue }, () => this.getParent(), this.clearMessage())}
onChange={(event, newInputValue) => this.setState({ company: newInputValue, loading: true, previewTable: false }, () => { debug
this.getReportType()
})}
disableClearable
style={{ width: 250 }} style={{ width: 250 }}
renderInput={(params) => renderInput={(params) =>
<TextField {...params} <TextField {...params}
...@@ -589,7 +496,7 @@ export default class EditMasterDataCAT extends Component { ...@@ -589,7 +496,7 @@ export default class EditMasterDataCAT extends Component {
disabled disabled
// onChange={(e) => this.handleChange(e, null)} // onChange={(e) => this.handleChange(e, null)}
// value={this.state.order} // value={this.state.order}
value={this.handleReportName(item.description)} value={this.handleReportName(item.item_report_name)}
// error={this.state.errorOrder} // error={this.state.errorOrder}
// helperText={this.state.msgErrorOrder} // helperText={this.state.msgErrorOrder}
inputProps={{ inputProps={{
...@@ -673,9 +580,11 @@ export default class EditMasterDataCAT extends Component { ...@@ -673,9 +580,11 @@ export default class EditMasterDataCAT extends Component {
<div className="margin-top-10px" style={{ paddingTop: 10, paddingBottom: 30, paddingRight: 30, paddingLeft: 30 }}> <div className="margin-top-10px" style={{ paddingTop: 10, paddingBottom: 30, paddingRight: 30, paddingLeft: 30 }}>
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<Typography style={{ fontSize: 11, width: '13%' }}>Created By :</Typography> <Typography style={{ fontSize: 11, width: '13%' }}>Created By :</Typography>
{!this.state.loading && <Typography style={{ fontSize: 11 }}>: {this.state.created_by}</Typography>}
</div> </div>
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<Typography style={{ fontSize: 11, width: '13%' }}>Updated By :</Typography> <Typography style={{ fontSize: 11, width: '13%' }}>Updated By :</Typography>
{!this.state.loading && <Typography style={{ fontSize: 11 }}>: {this.state.updated_by}</Typography>}
</div> </div>
</div> </div>
</div> </div>
......
src/container/MasterData/MasterDataCAT/MasterDataCAT.js
View file @ 2f5785b5
...@@ -722,7 +722,7 @@ export default class MasterDataCAT extends Component { ...@@ -722,7 +722,7 @@ export default class MasterDataCAT extends Component {
} }
createReportItems = (payload) => { createReportItems = (payload) => {
this.setState({ add: false }) this.setState({ add: false, edit: false })
api.create().saveMasterDataCat(payload).then(response => { api.create().saveMasterDataCat(payload).then(response => {
// console.log(response); // console.log(response);
if (response.data) { if (response.data) {
...@@ -781,33 +781,6 @@ export default class MasterDataCAT extends Component { ...@@ -781,33 +781,6 @@ export default class MasterDataCAT extends Component {
} }
} }
// updateReportItems = (payload) => {
// this.setState({ edit: false })
// api.create().updateReportItems(payload).then(response => {
// if (response.data) {
// if (response.ok) {
// if (response.data.status == 'success') {
// this.getData()
// this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
// } else {
// this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
// if (response.data.message.includes("Someone Logged In")) {
// setTimeout(() => {
// localStorage.removeItem(Constant.TOKEN)
// window.location.reload();
// }, 1000);
// }
// })
// }
// } else {
// this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
// }
// } else {
// this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
// }
// })
// }
uploadReportItems() { uploadReportItems() {
api.create().uploadReportItems(this.state.payload).then(response => { api.create().uploadReportItems(this.state.payload).then(response => {
if (response.data) { if (response.data) {
......
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