Skip to content

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

update

parent ef813eab
Hide 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 {
minEBITDA: 0,
maxEBITDA: 0,
intervalEBITDA: 0,
data: [
],
data: [],
defaultMonth: [],
defaultYear: []
};
}
componentDidMount() {
console.log(this.props.height)
this.setState({loading: true})
this.setState({ loading: true })
this.getDetailUser()
}
......@@ -164,13 +165,13 @@ export default class DashboardFinancial extends React.Component {
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 = {
options: businessData,
getOptionLabel: (option) => titleCase(option.business_unit_name),
};
// 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()
})
} else {
......@@ -199,19 +200,28 @@ export default class DashboardFinancial extends React.Component {
if (response.data.status === "success") {
console.log(response);
let data = response.data.data
let monthData = data.map((item) => {
return {
let index = data.findIndex((val) => val.month_name == month)
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_value: String(item.month_name).substr(0, 3)
}
})
})
let defaultProps = {
options: monthData,
getOptionLabel: (option) => option.month_value,
};
let index = data.findIndex((val) => val.month_name == month)
console.log(index);
this.setState({ listMonth: defaultProps, month: index == -1 ? monthData[0] : monthData[index], month2: index == -1 ? monthData[1] : monthData[index+1], }, () => {
console.log(monthData);
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)
this.getPeriode()
})
......@@ -240,7 +250,7 @@ export default class DashboardFinancial extends React.Component {
let data = []
response.data.data.map((item) => {
// if (this.state.isApprover) {
if (item >= 2000 && item <= (Number(currentYear) + 1)) {
if (item >= 2000 && item <= (Number(currentYear))) {
data.push(item)
}
// }
......@@ -263,7 +273,7 @@ export default class DashboardFinancial extends React.Component {
// console.log(this.state.latestPeriode)
// console.log(periodeData)
// 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()
})
}
......@@ -284,10 +294,10 @@ export default class DashboardFinancial extends React.Component {
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
......@@ -356,7 +366,7 @@ export default class DashboardFinancial extends React.Component {
}
if (this.state.report.value == 'summary') {
payload = {
...payload,
...payload,
"company_id": this.state.company.company_id,
"periode_from": this.state.periode.periode,
"periode_to": this.state.periode2.periode,
......@@ -364,24 +374,24 @@ export default class DashboardFinancial extends React.Component {
"month_to": this.state.month2.month_id
}
}
const handleName = (name) => {
let newName = ''
if(String(name).includes(':')) {
if (String(name).includes(':')) {
let indexTidu = String(name).indexOf(':')
let indexSpace = String(name).indexOf(' ')
if (indexTidu > indexSpace) {
newName = String(name).substr(0,indexSpace)
newName = String(name).substr(0, indexSpace)
} else {
newName = String(name).substr(0,indexTidu)
newName = String(name).substr(0, indexTidu)
}
} else {
// if (String(name).includes('Consolidated')) {
// newName = `asd \n baba`
// } else {
let splitName = String(name).split(' ')
console.log(splitName)
newName = name
let splitName = String(name).split(' ')
console.log(splitName)
newName = name
// }
}
return newName
......@@ -389,7 +399,7 @@ export default class DashboardFinancial extends React.Component {
api.create().getDashboardFinancial(payload).then((res) => {
console.log(res)
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 totalAssets = []
......@@ -414,8 +424,12 @@ export default class DashboardFinancial extends React.Component {
let minEBITDA = response.ebitda.vertical_pointing[1]
let intervalEBITDA = Number(response.ebitda.interval)
response.revenue.nodes.map((item,index) => {
if (this.state.report.value == 'summary') {
if (response.total_assets != undefined) {
}
response.revenue.nodes.map((item, index) => {
if (this.state.report.value == 'summary') {
companyRev.push(item.periode)
mbRev.push(item.value)
mrRev.push(item.gp_margin)
......@@ -424,27 +438,27 @@ export default class DashboardFinancial extends React.Component {
mbRev.push(item.value_mb)
mrRev.push(item.value_mr)
}
})
response.tpat.nodes.map((item,index) => {
if (this.state.report.value == 'summary') {
response.tpat.nodes.map((item, index) => {
if (this.state.report.value == 'summary') {
companyTPAT.push(item.periode)
mbTPAT.push(item.value)
mrTPAT.push(item.gp_margin)
} else {
} else {
companyTPAT.push(handleName(item.company))
mbTPAT.push(item.value_mb)
mrTPAT.push(item.value_mr)
}
})
response.ebitda.nodes.map((item,index) => {
if (this.state.report.value == 'summary') {
response.ebitda.nodes.map((item, index) => {
if (this.state.report.value == 'summary') {
companyEBITDA.push(item.periode)
mbEBITDA.push(item.value)
mrEBITDA.push(item.gp_margin)
} else {
} else {
companyEBITDA.push(handleName(item.company))
mbEBITDA.push(item.value_mb)
mrEBITDA.push(item.value_mr)
......@@ -452,7 +466,7 @@ export default class DashboardFinancial extends React.Component {
})
if (this.state.report.value == 'summary') {
response.revenue.nodes.map((item,index) => {
response.revenue.nodes.map((item, index) => {
totalAssets.push({
"company": item.company,
"MB": item.value_mb,
......@@ -460,16 +474,16 @@ export default class DashboardFinancial extends React.Component {
"MR": item.value_mr,
"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)
this.setState({loading: false})
this.setState({ loading: false })
})
}
})
}
render() {
const { data: chartData } = this.state;
const loadingComponent = (
......@@ -484,7 +498,7 @@ export default class DashboardFinancial extends React.Component {
);
const CustomTick = tick => {
const theme = useTheme()
return (
<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)" />
......@@ -539,11 +553,21 @@ export default class DashboardFinancial extends React.Component {
value={this.state.report}
/>
</div>
<div style={{ display: 'flex', marginTop: 10}}>
<div style={{ display: 'flex', marginTop: 10 }}>
<Autocomplete
{...this.state.listMonth}
id="month"
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()
})}
disableClearable
......@@ -555,16 +579,67 @@ export default class DashboardFinancial extends React.Component {
{...this.state.listPeriode}
id="periode"
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
style={{ width: 250 }}
renderInput={(params) => <TextField {...params} label="Period" margin="normal" style={{ marginTop: 7 }} />}
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.listMonth}
{...this.state.listMonth2}
id="month"
onChange={(event, newInputValue) => this.setState({ month2: newInputValue, loading: true }, () => {
this.getDashboardFinancial()
......@@ -575,10 +650,53 @@ export default class DashboardFinancial extends React.Component {
value={this.state.month2}
/>}
{this.state.report.value == 'summary' && <Autocomplete
{...this.state.listPeriode}
{...this.state.listPeriode2}
id="periode"
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
style={{ width: 250 }}
......@@ -634,18 +752,18 @@ export default class DashboardFinancial extends React.Component {
/>
</div> */}
</div>
<Divider style={{marginTop: 15}}/>
<div style={{ minWidth: 'max-content', padding: '20px 20px 0px 20px'}}>
<Divider style={{ marginTop: 15 }} />
<div style={{ minWidth: 'max-content', padding: '20px 20px 0px 20px' }}>
<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>}
<Typography style={{ fontSize: '16px', color: 'black' }}>in IDR mn</Typography>
</div>
<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.loading && <ReactECharts
style={{height: 500, width: '100%', marginTop: 20}}
<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.loading && <ReactECharts
style={{ height: 500, width: '100%', marginTop: 20 }}
option={{
tooltip: {
trigger: 'axis',
......@@ -658,12 +776,12 @@ export default class DashboardFinancial extends React.Component {
},
toolbox: {
feature: {
restore: {show: true},
saveAsImage: {show: true}
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
data: ['Revenue', 'GP Margin']
data: ['MB', 'MR', 'Revenue', 'GP Margin']
},
xAxis: [
{
......@@ -674,70 +792,70 @@ export default class DashboardFinancial extends React.Component {
}
}
],
yAxis: this.state.report.value != 'summary'?
[
{
type: 'value',
name: '(Rp bn)',
min: this.state.minRev,
max: this.state.maxRev,
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}%'
yAxis: this.state.report.value != 'summary' ?
[
{
type: 'value',
name: '(Rp bn)',
min: this.state.minRev,
max: this.state.maxRev,
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}%'
}
}
]
,
series: this.state.report.value != 'summary'?
[
{
name: 'MB',
type: 'bar',
data: this.state.mbRev
},
{
name: 'MR',
type: 'bar',
data: this.state.mrRev
}
] :
[
{
name: 'Revenue',
type: 'bar',
data: this.state.mbRev
},
{
name: 'GP Margin',
type: 'line',
yAxisIndex: 1,
data: this.state.mrRev
}
]
}}
series: this.state.report.value != 'summary' ?
[
{
name: 'MB',
type: 'bar',
data: this.state.mbRev
},
{
name: 'MR',
type: 'bar',
data: this.state.mrRev
}
] :
[
{
name: 'Revenue',
type: 'bar',
data: this.state.mbRev
},
{
name: 'GP Margin',
type: 'line',
yAxisIndex: 1,
data: this.state.mrRev
}
]
}}
/>}
</div>
<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.loading && <ReactECharts
style={{height: 500, width: '100%', marginTop: 20}}
<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.loading && <ReactECharts
style={{ height: 500, width: '100%', marginTop: 20 }}
option={{
tooltip: {
trigger: 'axis',
......@@ -750,12 +868,12 @@ export default class DashboardFinancial extends React.Component {
},
toolbox: {
feature: {
restore: {show: true},
saveAsImage: {show: true}
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
data: ['TPAT', 'TPAT Margin']
data: ['MB', 'MR', 'TPAT', 'TPAT Margin']
},
xAxis: [
{
......@@ -766,63 +884,63 @@ export default class DashboardFinancial extends React.Component {
}
}
],
yAxis: this.state.report.value != 'summary'?
[
{
type: 'value',
name: '(Rp bn)',
min: this.state.minTPAT,
max: this.state.maxTPAT,
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}%'
yAxis: this.state.report.value != 'summary' ?
[
{
type: 'value',
name: '(Rp bn)',
min: this.state.minTPAT,
max: this.state.maxTPAT,
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}%'
}
}
]
,
series: this.state.report.value != 'summary'?
[
{
name: 'MB',
type: 'bar',
data: this.state.mbTPAT
},
{
name: 'MR',
type: 'bar',
data: this.state.mrTPAT
}
] :
[
{
name: 'TPAT',
type: 'bar',
data: this.state.mbTPAT
},
{
name: 'TPAT Margin',
type: 'line',
yAxisIndex: 1,
data: this.state.mrTPAT
}
]
}}
series: this.state.report.value != 'summary' ?
[
{
name: 'MB',
type: 'bar',
data: this.state.mbTPAT
},
{
name: 'MR',
type: 'bar',
data: this.state.mrTPAT
}
] :
[
{
name: 'TPAT',
type: 'bar',
data: this.state.mbTPAT
},
{
name: 'TPAT Margin',
type: 'line',
yAxisIndex: 1,
data: this.state.mrTPAT
}
]
}}
/>}
{/* <ReactECharts
style={{height: 500, width: '100%'}}
......@@ -838,8 +956,8 @@ export default class DashboardFinancial extends React.Component {
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
// dataView: {show: true, readOnly: false},
// magicType: {show: true, type: ['bar']},
restore: {show: true},
saveAsImage: {show: true}
}
......@@ -900,10 +1018,10 @@ export default class DashboardFinancial extends React.Component {
/> */}
</div>
<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.loading && <ReactECharts
style={{height: 500, width: '100%', marginTop: 20}}
<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.loading && <ReactECharts
style={{ height: 500, width: '100%', marginTop: 20 }}
option={{
tooltip: {
trigger: 'axis',
......@@ -916,12 +1034,12 @@ export default class DashboardFinancial extends React.Component {
},
toolbox: {
feature: {
restore: {show: true},
saveAsImage: {show: true}
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
data: ['EBITDA', 'EBITDA Margin']
data: ['MB', 'MR', 'EBITDA', 'EBITDA Margin']
},
xAxis: [
{
......@@ -932,170 +1050,157 @@ export default class DashboardFinancial extends React.Component {
}
}
],
yAxis: this.state.report.value != 'summary'?
[
{
type: 'value',
name: '(Rp bn)',
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}%'
yAxis: this.state.report.value != 'summary' ?
[
{
type: 'value',
name: '(Rp bn)',
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
}
] :
[
{
name: 'EBITDA',
type: 'bar',
data: this.state.mbEBITDA
},
{
name: 'EBITDA Margin',
type: 'line',
yAxisIndex: 1,
data: this.state.mrEBITDA
}
]
}}
series: this.state.report.value != 'summary' ?
[
{
name: 'MB',
type: 'bar',
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>
{/* {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>
<ResponsiveBar
data={this.state.totalAssets}
keys={['MB', 'MR']}
indexBy="company"
margin={{ top: 50, right: 50, bottom: 100, left: 75 }}
padding={0.3}
groupMode="grouped"
valueScale={{ type: 'linear' }}
indexScale={{ type: 'band', round: true }}
colors={['#2a70c0','#5399ea']}
// defs={[
// {
// id: 'dots',
// type: 'patternDots',
// background: 'inherit',
// color: '#5399ea',
// size: 4,
// padding: 1,
// stagger: true
// },
// {
// id: 'lines',
// 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',
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: [
{!this.state.loading && <ReactECharts
style={{ height: 500, width: '100%', marginTop: 20 }}
option={{
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
data: ['MB', 'MR', 'EBITDA', 'EBITDA Margin']
},
xAxis: [
{
type: 'category',
data: this.state.companyEBITDA,
axisPointer: {
type: 'shadow'
}
}
],
yAxis: this.state.report.value != 'summary' ?
[
{
type: 'value',
name: '(Rp bn)',
min: this.state.minEBITDA,
max: this.state.maxEBITDA,
interval: this.state.intervalEBITDA
}
] :
[
{
on: 'hover',
style: {
itemOpacity: 1
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}%'
}
}
]
}
]}
animate={true}
motionStiffness={90}
motionDamping={15}
/>
</div>} */}
,
series: this.state.report.value != 'summary' ?
[
{
name: 'MB',
type: 'bar',
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>
</Paper>
</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