Skip to content

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

update

parent ef813eab
Show whitespace changes
Inline Side-by-side
Showing with 442 additions and 337 deletions
src/container/Laporan/DashboardFinancial.js
View file @ 8c85cdaa
...@@ -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>
......
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