Skip to content

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

Merge branch 'GGMAC' into 'master' 

update

See merge request !1216
parents 45b7b38b 8c85cdaa
Hide whitespace changes
Inline Side-by-side
Showing with 442 additions and 337 deletions
src/container/Laporan/DashboardFinancial.js
View file @ b2cdb131
...@@ -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_value: String(item.month_name).substr(0, 3)
})
}
defaultMonth.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)
} })
}) })
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: {
...@@ -356,7 +366,7 @@ export default class DashboardFinancial extends React.Component { ...@@ -356,7 +366,7 @@ export default class DashboardFinancial extends React.Component {
} }
if (this.state.report.value == 'summary') { if (this.state.report.value == 'summary') {
payload = { payload = {
...payload, ...payload,
"company_id": this.state.company.company_id, "company_id": this.state.company.company_id,
"periode_from": this.state.periode.periode, "periode_from": this.state.periode.periode,
"periode_to": this.state.periode2.periode, "periode_to": this.state.periode2.periode,
...@@ -364,24 +374,24 @@ export default class DashboardFinancial extends React.Component { ...@@ -364,24 +374,24 @@ export default class DashboardFinancial extends React.Component {
"month_to": this.state.month2.month_id "month_to": this.state.month2.month_id
} }
} }
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')) {
// newName = `asd \n baba` // newName = `asd \n baba`
// } else { // } else {
let splitName = String(name).split(' ') let splitName = String(name).split(' ')
console.log(splitName) console.log(splitName)
newName = name newName = name
// } // }
} }
return newName return newName
...@@ -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,8 +424,12 @@ export default class DashboardFinancial extends React.Component { ...@@ -414,8 +424,12 @@ 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) {
if (this.state.report.value == 'summary') {
}
response.revenue.nodes.map((item, index) => {
if (this.state.report.value == 'summary') {
companyRev.push(item.periode) companyRev.push(item.periode)
mbRev.push(item.value) mbRev.push(item.value)
mrRev.push(item.gp_margin) mrRev.push(item.gp_margin)
...@@ -424,27 +438,27 @@ export default class DashboardFinancial extends React.Component { ...@@ -424,27 +438,27 @@ export default class DashboardFinancial extends React.Component {
mbRev.push(item.value_mb) mbRev.push(item.value_mb)
mrRev.push(item.value_mr) mrRev.push(item.value_mr)
} }
}) })
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)
mrTPAT.push(item.gp_margin) mrTPAT.push(item.gp_margin)
} else { } else {
companyTPAT.push(handleName(item.company)) companyTPAT.push(handleName(item.company))
mbTPAT.push(item.value_mb) mbTPAT.push(item.value_mb)
mrTPAT.push(item.value_mr) mrTPAT.push(item.value_mr)
} }
}) })
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)
mrEBITDA.push(item.gp_margin) mrEBITDA.push(item.gp_margin)
} else { } else {
companyEBITDA.push(handleName(item.company)) companyEBITDA.push(handleName(item.company))
mbEBITDA.push(item.value_mb) mbEBITDA.push(item.value_mb)
mrEBITDA.push(item.value_mr) mrEBITDA.push(item.value_mr)
...@@ -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,
...@@ -460,16 +474,16 @@ export default class DashboardFinancial extends React.Component { ...@@ -460,16 +474,16 @@ export default class DashboardFinancial extends React.Component {
"MR": item.value_mr, "MR": item.value_mr,
"MRColor": "hsl(212, 78%, 62%)", "MRColor": "hsl(212, 78%, 62%)",
}) })
}) })
} }
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 })
}) })
} }
}) })
} }
render() { render() {
const { data: chartData } = this.state; const { data: chartData } = this.state;
const loadingComponent = ( const loadingComponent = (
...@@ -484,7 +498,7 @@ export default class DashboardFinancial extends React.Component { ...@@ -484,7 +498,7 @@ export default class DashboardFinancial extends React.Component {
); );
const CustomTick = tick => { const CustomTick = tick => {
const theme = useTheme() const theme = useTheme()
return ( return (
<g transform={`translate(${tick.x},${tick.y + 22})`}> <g transform={`translate(${tick.x},${tick.y + 22})`}>
{/* <rect x={-14} y={-6} rx={3} ry={3} width={28} height={24} fill="rgba(0, 0, 0, .05)" /> {/* <rect x={-14} y={-6} rx={3} ry={3} width={28} height={24} fill="rgba(0, 0, 0, .05)" />
...@@ -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 }, () => {
this.getDashboardFinancial() 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()
})
})
})} })}
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 }, () => {
this.getDashboardFinancial() 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()
})
})
}
})} })}
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,70 +792,70 @@ export default class DashboardFinancial extends React.Component { ...@@ -674,70 +792,70 @@ export default class DashboardFinancial extends React.Component {
} }
} }
], ],
yAxis: this.state.report.value != 'summary'? yAxis: this.state.report.value != 'summary' ?
[ [
{ {
type: 'value', type: 'value',
name: '(Rp bn)', name: '(Rp bn)',
min: this.state.minRev, min: this.state.minRev,
max: this.state.maxRev, max: this.state.maxRev,
interval: this.state.intervalRev interval: this.state.intervalRev
}
] :
[
{
type: 'value',
name: '(Rp bn)',
min: this.state.minRev,
max: this.state.maxRev,
interval: this.state.intervalRev
},
{
type: 'value',
name: '(%)',
min: 0,
max: 100,
interval: 20,
axisLabel: {
formatter: '{value}%'
} }
} ] :
] [
{
type: 'value',
name: '(Rp bn)',
min: this.state.minRev,
max: this.state.maxRev,
interval: this.state.intervalRev
},
{
type: 'value',
name: '(%)',
min: 0,
max: 100,
interval: 20,
axisLabel: {
formatter: '{value}%'
}
}
]
, ,
series: this.state.report.value != 'summary'? series: this.state.report.value != 'summary' ?
[ [
{ {
name: 'MB', name: 'MB',
type: 'bar', type: 'bar',
data: this.state.mbRev data: this.state.mbRev
}, },
{ {
name: 'MR', name: 'MR',
type: 'bar', type: 'bar',
data: this.state.mrRev data: this.state.mrRev
} }
] : ] :
[ [
{ {
name: 'Revenue', name: 'Revenue',
type: 'bar', type: 'bar',
data: this.state.mbRev data: this.state.mbRev
}, },
{ {
name: 'GP Margin', name: 'GP Margin',
type: 'line', type: 'line',
yAxisIndex: 1, yAxisIndex: 1,
data: this.state.mrRev data: this.state.mrRev
} }
] ]
}} }}
/>} />}
</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,63 +884,63 @@ export default class DashboardFinancial extends React.Component { ...@@ -766,63 +884,63 @@ export default class DashboardFinancial extends React.Component {
} }
} }
], ],
yAxis: this.state.report.value != 'summary'? yAxis: this.state.report.value != 'summary' ?
[ [
{ {
type: 'value', type: 'value',
name: '(Rp bn)', name: '(Rp bn)',
min: this.state.minTPAT, min: this.state.minTPAT,
max: this.state.maxTPAT, max: this.state.maxTPAT,
interval: this.state.intervalTPAT interval: this.state.intervalTPAT
}
] :
[
{
type: 'value',
name: '(Rp bn)',
min: this.state.minTPAT,
max: this.state.maxTPAT,
interval: this.state.intervalTPAT
},
{
type: 'value',
name: '(%)',
min: 0,
max: 100,
interval: 20,
axisLabel: {
formatter: '{value}%'
} }
} ] :
] [
{
type: 'value',
name: '(Rp bn)',
min: this.state.minTPAT,
max: this.state.maxTPAT,
interval: this.state.intervalTPAT
},
{
type: 'value',
name: '(%)',
min: 0,
max: 100,
interval: 20,
axisLabel: {
formatter: '{value}%'
}
}
]
, ,
series: this.state.report.value != 'summary'? series: this.state.report.value != 'summary' ?
[ [
{ {
name: 'MB', name: 'MB',
type: 'bar', type: 'bar',
data: this.state.mbTPAT data: this.state.mbTPAT
}, },
{ {
name: 'MR', name: 'MR',
type: 'bar', type: 'bar',
data: this.state.mrTPAT data: this.state.mrTPAT
} }
] : ] :
[ [
{ {
name: 'TPAT', name: 'TPAT',
type: 'bar', type: 'bar',
data: this.state.mbTPAT data: this.state.mbTPAT
}, },
{ {
name: 'TPAT Margin', name: 'TPAT Margin',
type: 'line', type: 'line',
yAxisIndex: 1, yAxisIndex: 1,
data: this.state.mrTPAT data: this.state.mrTPAT
} }
] ]
}} }}
/>} />}
{/* <ReactECharts {/* <ReactECharts
style={{height: 500, width: '100%'}} style={{height: 500, width: '100%'}}
...@@ -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,170 +1050,157 @@ export default class DashboardFinancial extends React.Component { ...@@ -932,170 +1050,157 @@ export default class DashboardFinancial extends React.Component {
} }
} }
], ],
yAxis: this.state.report.value != 'summary'? yAxis: this.state.report.value != 'summary' ?
[ [
{ {
type: 'value', type: 'value',
name: '(Rp bn)', name: '(Rp bn)',
min: this.state.minEBITDA, min: this.state.minEBITDA,
max: this.state.maxEBITDA, max: this.state.maxEBITDA,
interval: this.state.intervalEBITDA 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}%'
} }
} ] :
] [
{
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'? series: this.state.report.value != 'summary' ?
[ [
{ {
name: 'MB', name: 'MB',
type: 'bar', type: 'bar',
data: this.state.mbEBITDA data: this.state.mbEBITDA
}, },
{ {
name: 'MR', name: 'MR',
type: 'bar', type: 'bar',
data: this.state.mrEBITDA data: this.state.mrEBITDA
} }
] : ] :
[ [
{ {
name: 'EBITDA', name: 'EBITDA',
type: 'bar', type: 'bar',
data: this.state.mbEBITDA data: this.state.mbEBITDA
}, },
{ {
name: 'EBITDA Margin', name: 'EBITDA Margin',
type: 'line', type: 'line',
yAxisIndex: 1, yAxisIndex: 1,
data: this.state.mrEBITDA data: this.state.mrEBITDA
} }
] ]
}} }}
/>} />}
</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', type: 'category',
// color: '#2a70c0', data: this.state.companyEBITDA,
// rotation: -45, axisPointer: {
// lineWidth: 6, type: 'shadow'
// spacing: 10 }
// } }
// ]} ],
// fill={[ yAxis: this.state.report.value != 'summary' ?
// { [
// match: { {
// id: 'MB' type: 'value',
// }, name: '(Rp bn)',
// id: 'dots' min: this.state.minEBITDA,
// }, max: this.state.maxEBITDA,
// { interval: this.state.intervalEBITDA
// 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',
anchor: 'bottom',
direction: 'row',
justify: false,
translateX: 30,
translateY: 85,
itemsSpacing: 7,
itemWidth: 109,
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: '(%)',
min: 0,
max: 100,
interval: 20,
axisLabel: {
formatter: '{value}%'
} }
} }
] ]
} ,
]} series: this.state.report.value != 'summary' ?
animate={true} [
motionStiffness={90} {
motionDamping={15} name: 'MB',
/> type: 'bar',
</div>} */} data: this.state.mbEBITDA
},
{
name: 'MR',
type: 'bar',
data: this.state.mrEBITDA
}
] :
[
{
name: 'EBITDA',
type: 'bar',
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