Skip to content

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

Merge branch 'GGMAC' into 'master' 

Ggmac

See merge request !1145
parents b7ae1996 5cda3348
Show whitespace changes
Inline Side-by-side
Showing with 858 additions and 356 deletions
src/api/index.js
View file @ 29a8cad4
...@@ -277,7 +277,7 @@ const create = (type = "") => { ...@@ -277,7 +277,7 @@ const create = (type = "") => {
const getHierarkiReportCPSM = (body) => api.post('/transaction/summary_cpsm/summary/get_report_hierarki', body) const getHierarkiReportCPSM = (body) => api.post('/transaction/summary_cpsm/summary/get_report_hierarki', body)
const getFullApproveMB = (body) => api.post('/transaction/master_budget/get_approved_submit', body) const getFullApproveMB = (body) => api.post('/transaction/master_budget/get_approved_submit', body)
const getFullApproveMonthly = (body) => api.post('/transaction/monthly_report/get_approved_submit', body) const getFullApproveMonthly = (body) => api.post('/transaction/monthly_report/get_approved_submit', body)
const getDashboardFinancial = (body) => api.post('/transaction/dashboard/get_dashboard_financial', body)
//CASH FLOW //CASH FLOW
const getDetailReportCF = (body) => api.post('/transaction/cash_flow/master_budget/get_report_hierarki', body) const getDetailReportCF = (body) => api.post('/transaction/cash_flow/master_budget/get_report_hierarki', body)
...@@ -662,7 +662,8 @@ const create = (type = "") => { ...@@ -662,7 +662,8 @@ const create = (type = "") => {
createReportFRMB, createReportFRMB,
createReportFRMR, createReportFRMR,
getFullApproveMB, getFullApproveMB,
getFullApproveMonthly getFullApproveMonthly,
getDashboardFinancial
} }
} }
......
src/container/Laporan/DashboardFinancial.js
View file @ 29a8cad4
import * as React from 'react'; import * as React from 'react';
import Paper from '@material-ui/core/Paper'; import Paper from '@material-ui/core/Paper';
import { ResponsiveBar } from '@nivo/bar' import { ResponsiveBar } from '@nivo/bar'
import { Snackbar, TextField, Typography, withStyles } from '@material-ui/core'; import { useTheme } from '@nivo/core'
import { Divider, Snackbar, TextField, Typography, withStyles } from '@material-ui/core';
import MuiAlert from '@material-ui/lab/Alert'; import MuiAlert from '@material-ui/lab/Alert';
import { Autocomplete } from '@material-ui/lab'; import { Autocomplete } from '@material-ui/lab';
import { titleCase } from '../../library/Utils'; import { titleCase } from '../../library/Utils';
import api from '../../api'; import api from '../../api';
import Constant from '../../library/Constant'; import Constant from '../../library/Constant';
import { format } from 'date-fns';
import { PropagateLoader } from 'react-spinners';
const Alert = withStyles({ const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />); })((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
...@@ -25,118 +28,93 @@ export default class DashboardFinancial extends React.Component { ...@@ -25,118 +28,93 @@ export default class DashboardFinancial extends React.Component {
super(props); super(props);
this.state = { this.state = {
data: [ listReportType: [
{
"country": "AD",
"hot dog": 6,
"hot dogColor": "hsl(228, 70%, 50%)",
"burger": 53,
"burgerColor": "hsl(29, 70%, 50%)",
"sandwich": 74,
"sandwichColor": "hsl(148, 70%, 50%)",
"kebab": 132,
"kebabColor": "hsl(54, 70%, 50%)",
"fries": 46,
"friesColor": "hsl(2, 70%, 50%)",
"donut": 146,
"donutColor": "hsl(60, 70%, 50%)"
},
{
"country": "AE",
"hot dog": 167,
"hot dogColor": "hsl(340, 70%, 50%)",
"burger": 133,
"burgerColor": "hsl(160, 70%, 50%)",
"sandwich": 46,
"sandwichColor": "hsl(330, 70%, 50%)",
"kebab": 68,
"kebabColor": "hsl(298, 70%, 50%)",
"fries": 11,
"friesColor": "hsl(89, 70%, 50%)",
"donut": 119,
"donutColor": "hsl(40, 70%, 50%)"
},
{
"country": "AF",
"hot dog": 60,
"hot dogColor": "hsl(188, 70%, 50%)",
"burger": 120,
"burgerColor": "hsl(252, 70%, 50%)",
"sandwich": 138,
"sandwichColor": "hsl(152, 70%, 50%)",
"kebab": 45,
"kebabColor": "hsl(256, 70%, 50%)",
"fries": 132,
"friesColor": "hsl(201, 70%, 50%)",
"donut": 130,
"donutColor": "hsl(191, 70%, 50%)"
},
{
"country": "AG",
"hot dog": 84,
"hot dogColor": "hsl(356, 70%, 50%)",
"burger": 102,
"burgerColor": "hsl(161, 70%, 50%)",
"sandwich": 157,
"sandwichColor": "hsl(177, 70%, 50%)",
"kebab": 65,
"kebabColor": "hsl(74, 70%, 50%)",
"fries": 105,
"friesColor": "hsl(82, 70%, 50%)",
"donut": 90,
"donutColor": "hsl(138, 70%, 50%)"
},
{ {
"country": "AI", name: 'GRAPH - MONTHLY BY INDUSTRY',
"hot dog": 144, value: 'mtd'
"hot dogColor": "hsl(102, 70%, 50%)", }, {
"burger": 62, name: 'GRAPH - YTD BY INDUSTRY',
"burgerColor": "hsl(308, 70%, 50%)", value: 'ytd'
"sandwich": 59, }, {
"sandwichColor": "hsl(101, 70%, 50%)", name: 'GRAPH - MONTHLY HISTORICAL BY COMPANY',
"kebab": 117, value: 'summary'
"kebabColor": "hsl(152, 70%, 50%)",
"fries": 57,
"friesColor": "hsl(297, 70%, 50%)",
"donut": 34,
"donutColor": "hsl(319, 70%, 50%)"
}, },
{ ],
"country": "AL", report: {
"hot dog": 84, name: 'GRAPH - MONTHLY BY INDUSTRY',
"hot dogColor": "hsl(288, 70%, 50%)", value: 'mtd'
"burger": 93,
"burgerColor": "hsl(288, 70%, 50%)",
"sandwich": 23,
"sandwichColor": "hsl(64, 70%, 50%)",
"kebab": 128,
"kebabColor": "hsl(118, 70%, 50%)",
"fries": 199,
"friesColor": "hsl(125, 70%, 50%)",
"donut": 184,
"donutColor": "hsl(334, 70%, 50%)"
}, },
{ listCompany: null,
"country": "AM", company: null,
"hot dog": 44, listPeriode: null,
"hot dogColor": "hsl(239, 70%, 50%)", periode: null,
"burger": 17, listMonth: null,
"burgerColor": "hsl(306, 70%, 50%)", month: null,
"sandwich": 58, listBusiness: null,
"sandwichColor": "hsl(317, 70%, 50%)", businessUnit: null,
"kebab": 51, listPeriode2: null,
"kebabColor": "hsl(148, 70%, 50%)", periode2: null,
"fries": 151, listMonth2: null,
"friesColor": "hsl(344, 70%, 50%)", month2: null,
"donut": 174, loading: false,
"donutColor": "hsl(190, 70%, 50%)" data: [
} // {
// "country": "AD",
// "hot dog": 6,
// "hot dogColor": "hsl(228, 70%, 50%)",
// "burger": 53,
// "burgerColor": "hsl(29, 70%, 50%)"
// },
// {
// "country": "AE",
// "hot dog": 167,
// "hot dogColor": "hsl(340, 70%, 50%)",
// "burger": 133,
// "burgerColor": "hsl(160, 70%, 50%)"
// },
// {
// "country": "AF",
// "hot dog": 60,
// "hot dogColor": "hsl(188, 70%, 50%)",
// "burger": 120,
// "burgerColor": "hsl(252, 70%, 50%)"
// },
// {
// "country": "AG",
// "hot dog": 38000,
// "hot dogColor": "hsl(356, 70%, 50%)",
// "burger": 28700,
// "burgerColor": "hsl(161, 70%, 50%)"
// },
// {
// "country": "AI",
// "hot dog": 4000,
// "hot dogColor": "hsl(102, 70%, 50%)",
// "burger": 25000,
// "burgerColor": "hsl(308, 70%, 50%)"
// },
// {
// "country": "AL",
// "hot dog": 1000000,
// "hot dogColor": "hsl(288, 70%, 50%)",
// "burger": 50000,
// "burgerColor": "hsl(288, 70%, 50%)"
// },
// {
// "country": "AM",
// "hot dog": 35000,
// "hot dogColor": "hsl(239, 70%, 50%)",
// "burger": 150,
// "burgerColor": "hsl(306, 70%, 50%)"
// }
], ],
}; };
} }
componentDidMount() { componentDidMount() {
console.log(this.props.height) console.log(this.props.height)
this.setState({loading: true})
this.getDetailUser()
} }
getDetailUser() { getDetailUser() {
...@@ -182,7 +160,7 @@ export default class DashboardFinancial extends React.Component { ...@@ -182,7 +160,7 @@ export default class DashboardFinancial extends React.Component {
}; };
let index = arrayBaru.findIndex((val) => val.company_id == comID) let index = arrayBaru.findIndex((val) => val.company_id == comID)
this.setState({ listCompany: defaultProps, company: arrayBaru.length < 1 ? companyData[0] : (index == -1 ? arrayBaru[0] : arrayBaru[index]) }, () => { this.setState({ listCompany: defaultProps, company: arrayBaru.length < 1 ? companyData[0] : (index == -1 ? arrayBaru[0] : arrayBaru[index]) }, () => {
this.getLastPeriod() this.getAllBusiness()
}) })
} else { } else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => { this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
...@@ -200,13 +178,83 @@ export default class DashboardFinancial extends React.Component { ...@@ -200,13 +178,83 @@ export default class DashboardFinancial extends React.Component {
}) })
} }
getLastPeriod() { getAllBusiness() {
api.create().getLastPeriod(this.state.company.company_id).then(response => { api.create().getUnitBisnisActive().then((response) => {
// console.log(response); // console.log(response);
if (response.data) {
if (response.data.status === 'success') {
let data = response.data.data
console.log(data)
// let comID = this.state.rawData ? this.state.rawData.company_id : 0
let businessData = data.map((item) => {
return {
business_unit_id: item.business_unit_id,
business_unit_name: String(item.business_unit_name).toLocaleLowerCase(),
}
})
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.getMonth()
})
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', listCompany: null, company: null })
}
})
}
getMonth() {
api.create().getMonthTransaction().then(response => {
let dateNow = new Date()
dateNow.setMonth(dateNow.getMonth() - 1);
let month = format(dateNow, 'MMMM')
console.log(response);
if (response.data) {
if (response.data.status === "success") { if (response.data.status === "success") {
this.setState({ lastPeriod: response.data.data.last_periode, latestPeriode: response.data.data.latest_periode }, () => { console.log(response);
let data = response.data.data
let monthData = data.map((item) => {
return {
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(this.state.month)
this.getPeriode() this.getPeriode()
}) })
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
} }
}) })
} }
...@@ -219,15 +267,11 @@ export default class DashboardFinancial extends React.Component { ...@@ -219,15 +267,11 @@ export default class DashboardFinancial extends React.Component {
if (response.data.status === "success") { if (response.data.status === "success") {
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) + 1)) {
data.push(item) data.push(item)
} }
} else { // }
if ((item >= 2000) && (item == this.state.lastPeriod || item < this.state.lastPeriod)) {
data.push(item)
}
}
}) })
let periodeData = data.map((item) => { let periodeData = data.map((item) => {
return { return {
...@@ -238,78 +282,139 @@ export default class DashboardFinancial extends React.Component { ...@@ -238,78 +282,139 @@ export default class DashboardFinancial extends React.Component {
options: periodeData, options: periodeData,
getOptionLabel: (option) => option.periode, getOptionLabel: (option) => option.periode,
}; };
let periode = (this.state.lastPeriod == "" ? String(Number(currentYear) + 1) : this.state.lastPeriod) // let periode = (this.state.lastPeriod == "" ? String(Number(currentYear) + 1) : this.state.lastPeriod)
let index = data.sort((a, b) => a - b).findIndex((val) => val === periode) let dateNow = new Date()
// console.log(data) dateNow.setMonth(dateNow.getMonth() - 1);
let yearNow = dateNow.getFullYear()
let index = data.sort((a, b) => a - b).findIndex((val) => val == yearNow)
console.log(data)
// 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] }, () => { this.setState({ listPeriode: defaultProps, periode: index === -1 ? periodeData[0] : periodeData[index], periode2: index === -1 ? periodeData[1] : periodeData[index+1] }, () => {
// this.getDataTable() this.getDashboardFinancial()
// this.getSubmission()
this.getReportType()
// if (this.state.isApprover === true) {
// this.getCompanySubmitted()
// } else {
// this.getRevision()
// }
}) })
} }
} }
}) })
} }
getReportType() { getDashboardFinancial() {
let payload = { let payload = {
"company_id": this.state.company.company_id, "report_type": this.state.report.value,
"business_unit_id": this.state.businessUnit.business_unit_id,
"periode": this.state.periode.periode, "periode": this.state.periode.periode,
"report_type": "Master Budget", "months": this.state.month.month_id
} }
api.create().getReportTypeBody(payload).then(response => { if (this.state.report.value == 'summary') {
console.log(response); payload = {
if (response.data) { ...payload,
if (response.data.status === "success") { "company_id": this.state.company.company_id,
if (this.state.report.value === 2) { "periode_from": this.state.periode.periode,
response.data.data.map((item, index) => { "periode_to": this.state.periode2.periode,
if (item.report_name === 'Balance Sheet') { "month_from": this.state.month.month_id,
this.setState({ revisionType: item.revision }, ()=> { "month_to": this.state.month2.month_id
this.getSubmission() }
}
api.create().getDashboardFinancial(payload).then((res) => {
console.log(res)
if (res.data) {
this.setState({loading: false})
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 tpat = []
let ebitda = []
let totalAssets = []
response.revenue.nodes.map((item,index) => {
revenue.push({
"company": item.company,
"MB": item.value_mb,
"MBColor": "hsl(212, 64%, 46%)",
"MR": item.value_mr,
"MRColor": "hsl(212, 78%, 62%)",
}) })
}
}) })
} else if (this.state.report.value === 1) {
response.data.data.map((item, index) => { response.tpat.nodes.map((item,index) => {
if (item.report_name === 'Profit Loss') { tpat.push({
this.setState({ revisionType: item.revision }, ()=> { "company": item.company,
this.getSubmission() "MB": item.value_mb,
"MBColor": "hsl(212, 64%, 46%)",
"MR": item.value_mr,
"MRColor": "hsl(212, 78%, 62%)",
})
}) })
}
response.ebitda.nodes.map((item,index) => {
ebitda.push({
"company": item.company,
"MB": item.value_mb,
"MBColor": "hsl(212, 64%, 46%)",
"MR": item.value_mr,
"MRColor": "hsl(212, 78%, 62%)",
}) })
} else {
this.setState({ revisionType: 0 }, ()=> {
this.getSubmission()
}) })
}
} else { if (this.state.report.value == 'summary') {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => { response.revenue.nodes.map((item,index) => {
if (response.data.message.includes("Someone Logged In")) { totalAssets.push({
setTimeout(() => { "company": item.company,
localStorage.removeItem(Constant.TOKEN) "MB": item.value_mb,
window.location.reload(); "MBColor": "hsl(212, 64%, 46%)",
}, 1000); "MR": item.value_mr,
} "MRColor": "hsl(212, 78%, 62%)",
})
}) })
} }
} else { console.log(revenue)
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', loading: false }) this.setState({revenue, ebitda, tpat, totalAssets})
} }
}) })
} }
render() { render() {
const { data: chartData } = this.state; const { data: chartData } = this.state;
const loadingComponent = (
<div style={{ position: 'fixed', zIndex: 110, top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'rgba(255,255,255,0.8)' }}>
<PropagateLoader
// css={override}
size={20}
color={"#274B80"}
loading={this.state.loading}
/>
</div>
);
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)" />
<rect x={-12} y={-12} rx={2} ry={2} width={24} height={24} fill="rgb(232, 193, 160)" />
<line stroke="rgb(232, 193, 160)" strokeWidth={1.5} y1={-22} y2={-12} /> */}
<text
lengthAdjust
fontSizeAdjust
textAnchor="middle"
dominantBaseline="middle"
style={{
...theme.axis.ticks.text,
fill: '#333',
fontSize: 11,
// textAlign: 'justify',
}}
>
{tick.value}
</text>
</g>
)
}
return ( return (
<div style={{ flex: 1, backgroundColor: '#f8f8f8' }} ref={this.myRef}> <div style={{ flex: 1, backgroundColor: '#f8f8f8' }} ref={this.myRef}>
{this.state.loading && loadingComponent}
<div> <div>
<div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}> <div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Dashboard Financial</Typography> <Typography style={{ fontSize: '16px', color: 'white' }}>Dashboard Financial</Typography>
...@@ -320,18 +425,18 @@ export default class DashboardFinancial extends React.Component { ...@@ -320,18 +425,18 @@ export default class DashboardFinancial extends React.Component {
</Alert> </Alert>
</Snackbar> </Snackbar>
<div style={{ padding: 20, width: '100%' }}> <div style={{ padding: 20, width: '100%' }}>
<Paper style={{ paddingTop: 10 , height: this.props.height}}> <Paper style={{ paddingTop: 10, minHeight: this.props.height, paddingBottom: 20 }}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} > <div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>FINANCIAL SUMMARY OF TRIPUTRA GROUP</Typography> <Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>FINANCIAL SUMMARY OF TRIPUTRA GROUP</Typography>
</div> </div>
<div style={{ minWidth: 'max-content', padding: '20px 20px 0px 20px' }}> <div style={{ minWidth: 'max-content', padding: '20px 20px 0px 20px' }}>
<div style={{ marginTop: 15 }}> <div style={{ marginTop: 15 }}>
<Autocomplete <Autocomplete
options={this.state.reportType} options={this.state.listReportType}
getOptionLabel={(option) => titleCase(option.label)} getOptionLabel={(option) => titleCase(option.name)}
id="typereport" id="typereport"
onChange={(event, newInputValue) => this.setState({ report: newInputValue, loading: true, previewTable: false }, () => { onChange={(event, newInputValue) => this.setState({ report: newInputValue, loading: true, previewTable: false }, () => {
this.getReportType() this.getDashboardFinancial()
})} })}
disableClearable disableClearable
style={{ width: 250 }} style={{ width: 250 }}
...@@ -339,21 +444,85 @@ export default class DashboardFinancial extends React.Component { ...@@ -339,21 +444,85 @@ export default class DashboardFinancial extends React.Component {
value={this.state.report} value={this.state.report}
/> />
</div> </div>
<div style={{ marginTop: 15 }}> <div style={{ display: 'flex', marginTop: 10}}>
<Autocomplete
{...this.state.listMonth}
id="month"
onChange={(event, newInputValue) => this.setState({ month: newInputValue, loading: true }, () => {
this.getDashboardFinancial()
})}
disableClearable
style={{ minWidth: 250, marginRight: 20 }}
renderInput={(params) => <TextField {...params} label="Month" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.month}
/>
<Autocomplete
{...this.state.listPeriode}
id="periode"
onChange={(event, newInputValue) => this.setState({ periode: newInputValue, loading: true }, () => {
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' && <Autocomplete
{...this.state.listMonth}
id="month"
onChange={(event, newInputValue) => this.setState({ month2: newInputValue, loading: true }, () => {
this.getDashboardFinancial()
})}
disableClearable
style={{ minWidth: 250, marginRight: 20 }}
renderInput={(params) => <TextField {...params} label="Month" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.month2}
/>}
{this.state.report.value == 'summary' && <Autocomplete
{...this.state.listPeriode}
id="periode"
onChange={(event, newInputValue) => this.setState({ periode2: newInputValue, loading: true }, () => {
this.getDashboardFinancial()
})}
disableClearable
style={{ width: 250 }}
renderInput={(params) => <TextField {...params} label="Period" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.periode2}
/>}
</div>
{/* {this.state.report.value == 'summary' && <div style={{ display: 'flex', marginTop: 10}}>
</div>} */}
{this.state.report.value != 'summary' && <div style={{ marginTop: 10 }}>
<Autocomplete
{...this.state.listBusiness}
id="company"
disabled={this.state.intent === 'Home' ? true : false}
onChange={(event, newInputValue) => this.setState({ businessUnit: newInputValue, loading: true, previewTable: false }, () => {
this.getDashboardFinancial()
})}
disableClearable
style={{ width: 250 }}
renderInput={(params) => <TextField {...params} label="Business Unit" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.businessUnit}
/>
</div>}
{this.state.report.value == 'summary' && <div style={{ marginTop: 10 }}>
<Autocomplete <Autocomplete
{...this.state.listCompany} {...this.state.listCompany}
id="company" id="company"
disabled={this.state.intent === 'Home' ? true : false} disabled={this.state.intent === 'Home' ? true : false}
onChange={(event, newInputValue) => this.setState({ company: newInputValue, loading: true, previewTable: false }, () => { onChange={(event, newInputValue) => this.setState({ company: newInputValue, loading: true, previewTable: false }, () => {
this.getReportType() this.getDashboardFinancial()
})} })}
disableClearable disableClearable
style={{ width: 250 }} style={{ width: 250 }}
renderInput={(params) => <TextField {...params} label="Company" margin="normal" style={{ marginTop: 7 }} />} renderInput={(params) => <TextField {...params} label="Company" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.company} value={this.state.company}
/> />
</div> </div>}
<div style={{ marginTop: 15 }}> {/* <div style={{ marginTop: 15 }}>
<Autocomplete <Autocomplete
{...this.state.listPeriode} {...this.state.listPeriode}
id="periode" id="periode"
...@@ -368,89 +537,420 @@ export default class DashboardFinancial extends React.Component { ...@@ -368,89 +537,420 @@ export default class DashboardFinancial extends React.Component {
/>} />}
value={this.state.periode} value={this.state.periode}
/> />
</div> */}
</div> </div>
<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>
{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>
<div style={{height: Number(0.3 * this.props.height)}}>
<ResponsiveBar <div style={{ height: Number(0.5 * this.props.height), border: '1px solid black', marginTop: 25, paddingBottom: 50}}>
data={chartData} {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>}
keys={[ 'hot dog', 'burger', 'sandwich', 'kebab', 'fries', 'donut' ]} {!this.state.loading && <ResponsiveBar
indexBy="country" data={this.state.revenue}
margin={{ top: 50, right: 130, bottom: 50, left: 60 }} keys={['MB', 'MR']}
indexBy="company"
margin={{ top: 50, right: 50, bottom: 100, left: 75 }}
padding={0.3} padding={0.3}
groupMode="grouped" groupMode="grouped"
valueScale={{ type: 'linear' }} valueScale={{ type: 'linear' }}
indexScale={{ type: 'band', round: true }} indexScale={{ type: 'band', round: true }}
colors={{ scheme: 'nivo' }} colors={['#2a70c0','#5399ea']}
defs={[ // 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={[
{ {
id: 'dots', dataFrom: 'keys',
type: 'patternDots', anchor: 'bottom',
background: 'inherit', direction: 'row',
color: '#38bcb2', justify: false,
size: 4, translateX: 30,
padding: 1, translateY: 85,
stagger: true itemsSpacing: 7,
}, itemWidth: 109,
itemHeight: 10,
itemDirection: 'left-to-right',
itemOpacity: 0.85,
symbolSize: 25,
effects: [
{ {
id: 'lines', on: 'hover',
type: 'patternLines', style: {
background: 'inherit', itemOpacity: 1
color: '#eed312', }
rotation: -45, }
lineWidth: 6, ]
spacing: 10
} }
]} ]}
fill={[ animate={true}
motionStiffness={90}
motionDamping={15}
/>}
</div>
<div style={{ height: Number(0.5 * 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 && <ResponsiveBar
data={this.state.tpat}
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={[
{ {
match: { dataFrom: 'keys',
id: 'fries' anchor: 'bottom',
}, direction: 'row',
id: 'dots' justify: false,
}, translateX: 30,
translateY: 85,
itemsSpacing: 7,
itemWidth: 109,
itemHeight: 10,
itemDirection: 'left-to-right',
itemOpacity: 0.85,
symbolSize: 25,
effects: [
{ {
match: { on: 'hover',
id: 'sandwich' style: {
}, itemOpacity: 1
id: 'lines' }
}
]
} }
]} ]}
borderColor={{ from: 'color', modifiers: [ [ 'darker', 1.6 ] ] }} animate={true}
motionStiffness={90}
motionDamping={15}
/>}
</div>
<div style={{ height: Number(0.5 * 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 && <ResponsiveBar
data={this.state.ebitda}
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} axisTop={null}
axisRight={null} axisRight={null}
axisBottom={{ axisBottom={{
tickSize: 5, tickSize: 20,
tickPadding: 5, tickPadding: 0,
tickRotation: 0, tickRotation: 0,
legend: 'country', legend: 'Company',
legendPosition: 'middle', legendPosition: 'middle',
legendOffset: 32 // legendOffset: 32,
// renderTick: CustomTick,
// lineStyle: { stroke: '#f47560', strokeWidth: 1 },
// textStyle: { fill: '#e25c3b' },
// legend: 'Company',
// legendPosition: 'middle',
// legendOrientation: 'vertical',
legendOffset: 50,
}} }}
axisLeft={{ // axisLeft={{
tickSize: 5, // tickSize: 5,
tickPadding: 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',
style: {
itemOpacity: 1
}
}
]
}
]}
animate={true}
motionStiffness={90}
motionDamping={15}
/>}
</div>
{this.state.report.value == 'summary' && <div style={{ height: Number(0.5 * 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, tickRotation: 0,
legend: 'food', legend: 'Company',
legendPosition: 'middle', legendPosition: 'middle',
legendOffset: -40 // 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} labelSkipWidth={12}
labelSkipHeight={12} labelSkipHeight={12}
labelTextColor={{ from: 'color', modifiers: [ [ 'darker', 1.6 ] ] }} labelTextColor={{ from: 'color', modifiers: [['darker', 1.6]] }}
legends={[ legends={[
{ {
dataFrom: 'keys', dataFrom: 'keys',
anchor: 'bottom-right', anchor: 'bottom',
direction: 'column', direction: 'row',
justify: false, justify: false,
translateX: 25, translateX: 30,
translateY: 0, translateY: 85,
itemsSpacing: 0, itemsSpacing: 7,
itemWidth: 20, itemWidth: 109,
itemHeight: 24, itemHeight: 10,
itemDirection: 'left-to-right', itemDirection: 'left-to-right',
itemOpacity: 0.85, itemOpacity: 0.85,
symbolSize: 17, symbolSize: 25,
effects: [ effects: [
{ {
on: 'hover', on: 'hover',
...@@ -465,6 +965,7 @@ export default class DashboardFinancial extends React.Component { ...@@ -465,6 +965,7 @@ export default class DashboardFinancial extends React.Component {
motionStiffness={90} motionStiffness={90}
motionDamping={15} motionDamping={15}
/> />
</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