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
Hide 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} />);
...@@ -17,141 +20,116 @@ const Alert = withStyles({ ...@@ -17,141 +20,116 @@ const Alert = withStyles({
// website examples showcase many properties, // website examples showcase many properties,
// you'll often use just a few of them. // you'll often use just a few of them.
// const MyResponsiveBar = ({ data /* see data tab */ }) => ( // const MyResponsiveBar = ({ data /* see data tab */ }) => (
// ) // )
export default class DashboardFinancial extends React.Component { export default class DashboardFinancial extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
data: [ listReportType: [
{ {
"country": "AD", name: 'GRAPH - MONTHLY BY INDUSTRY',
"hot dog": 6, value: 'mtd'
"hot dogColor": "hsl(228, 70%, 50%)", }, {
"burger": 53, name: 'GRAPH - YTD BY INDUSTRY',
"burgerColor": "hsl(29, 70%, 50%)", value: 'ytd'
"sandwich": 74, }, {
"sandwichColor": "hsl(148, 70%, 50%)", name: 'GRAPH - MONTHLY HISTORICAL BY COMPANY',
"kebab": 132, value: 'summary'
"kebabColor": "hsl(54, 70%, 50%)", },
"fries": 46, ],
"friesColor": "hsl(2, 70%, 50%)", report: {
"donut": 146, name: 'GRAPH - MONTHLY BY INDUSTRY',
"donutColor": "hsl(60, 70%, 50%)" value: 'mtd'
}, },
{ listCompany: null,
"country": "AE", company: null,
"hot dog": 167, listPeriode: null,
"hot dogColor": "hsl(340, 70%, 50%)", periode: null,
"burger": 133, listMonth: null,
"burgerColor": "hsl(160, 70%, 50%)", month: null,
"sandwich": 46, listBusiness: null,
"sandwichColor": "hsl(330, 70%, 50%)", businessUnit: null,
"kebab": 68, listPeriode2: null,
"kebabColor": "hsl(298, 70%, 50%)", periode2: null,
"fries": 11, listMonth2: null,
"friesColor": "hsl(89, 70%, 50%)", month2: null,
"donut": 119, loading: false,
"donutColor": "hsl(40, 70%, 50%)" data: [
}, // {
{ // "country": "AD",
"country": "AF", // "hot dog": 6,
"hot dog": 60, // "hot dogColor": "hsl(228, 70%, 50%)",
"hot dogColor": "hsl(188, 70%, 50%)", // "burger": 53,
"burger": 120, // "burgerColor": "hsl(29, 70%, 50%)"
"burgerColor": "hsl(252, 70%, 50%)", // },
"sandwich": 138, // {
"sandwichColor": "hsl(152, 70%, 50%)", // "country": "AE",
"kebab": 45, // "hot dog": 167,
"kebabColor": "hsl(256, 70%, 50%)", // "hot dogColor": "hsl(340, 70%, 50%)",
"fries": 132, // "burger": 133,
"friesColor": "hsl(201, 70%, 50%)", // "burgerColor": "hsl(160, 70%, 50%)"
"donut": 130, // },
"donutColor": "hsl(191, 70%, 50%)" // {
}, // "country": "AF",
{ // "hot dog": 60,
"country": "AG", // "hot dogColor": "hsl(188, 70%, 50%)",
"hot dog": 84, // "burger": 120,
"hot dogColor": "hsl(356, 70%, 50%)", // "burgerColor": "hsl(252, 70%, 50%)"
"burger": 102, // },
"burgerColor": "hsl(161, 70%, 50%)", // {
"sandwich": 157, // "country": "AG",
"sandwichColor": "hsl(177, 70%, 50%)", // "hot dog": 38000,
"kebab": 65, // "hot dogColor": "hsl(356, 70%, 50%)",
"kebabColor": "hsl(74, 70%, 50%)", // "burger": 28700,
"fries": 105, // "burgerColor": "hsl(161, 70%, 50%)"
"friesColor": "hsl(82, 70%, 50%)", // },
"donut": 90, // {
"donutColor": "hsl(138, 70%, 50%)" // "country": "AI",
}, // "hot dog": 4000,
{ // "hot dogColor": "hsl(102, 70%, 50%)",
"country": "AI", // "burger": 25000,
"hot dog": 144, // "burgerColor": "hsl(308, 70%, 50%)"
"hot dogColor": "hsl(102, 70%, 50%)", // },
"burger": 62, // {
"burgerColor": "hsl(308, 70%, 50%)", // "country": "AL",
"sandwich": 59, // "hot dog": 1000000,
"sandwichColor": "hsl(101, 70%, 50%)", // "hot dogColor": "hsl(288, 70%, 50%)",
"kebab": 117, // "burger": 50000,
"kebabColor": "hsl(152, 70%, 50%)", // "burgerColor": "hsl(288, 70%, 50%)"
"fries": 57, // },
"friesColor": "hsl(297, 70%, 50%)", // {
"donut": 34, // "country": "AM",
"donutColor": "hsl(319, 70%, 50%)" // "hot dog": 35000,
}, // "hot dogColor": "hsl(239, 70%, 50%)",
{ // "burger": 150,
"country": "AL", // "burgerColor": "hsl(306, 70%, 50%)"
"hot dog": 84, // }
"hot dogColor": "hsl(288, 70%, 50%)", ],
"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%)"
},
{
"country": "AM",
"hot dog": 44,
"hot dogColor": "hsl(239, 70%, 50%)",
"burger": 17,
"burgerColor": "hsl(306, 70%, 50%)",
"sandwich": 58,
"sandwichColor": "hsl(317, 70%, 50%)",
"kebab": 51,
"kebabColor": "hsl(148, 70%, 50%)",
"fries": 151,
"friesColor": "hsl(344, 70%, 50%)",
"donut": 174,
"donutColor": "hsl(190, 70%, 50%)"
}
],
};
}
componentDidMount() { componentDidMount() {
console.log(this.props.height) console.log(this.props.height)
} this.setState({loading: true})
this.getDetailUser()
}
getDetailUser() { getDetailUser() {
let userId = localStorage.getItem(Constant.USER) let userId = localStorage.getItem(Constant.USER)
api.create().getDetailUser(userId).then((response) => { api.create().getDetailUser(userId).then((response) => {
if (response.data) { if (response.data) {
if (response.ok) { if (response.ok) {
if (response.data.status === 'success') { if (response.data.status === 'success') {
this.setState({ userCompany: response.data.data.company }, () => { this.setState({ userCompany: response.data.data.company }, () => {
this.getCompanyActive() this.getCompanyActive()
}) })
}
} }
} }
} })
})
} }
getCompanyActive() { getCompanyActive() {
...@@ -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.status === "success") { if (response.data) {
this.setState({ lastPeriod: response.data.data.last_periode, latestPeriode: response.data.data.latest_periode }, () => { if (response.data.status === 'success') {
this.getPeriode() 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") {
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()
})
} 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,238 +282,695 @@ export default class DashboardFinancial extends React.Component { ...@@ -238,238 +282,695 @@ 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)
} else if (this.state.report.value === 1) { if (res.data) {
response.data.data.map((item, index) => { this.setState({loading: false})
if (item.report_name === 'Profit Loss') { let response = res.data.data.ytd != null? res.data.data.ytd : (res.data.data.mtd != null? res.data.data.mtd : res.data.data.summary)
this.setState({ revisionType: item.revision }, ()=> { let revenue = []
this.getSubmission() let tpat = []
}) let ebitda = []
} let totalAssets = []
}) response.revenue.nodes.map((item,index) => {
} else { revenue.push({
this.setState({ revisionType: 0 }, ()=> { "company": item.company,
this.getSubmission() "MB": item.value_mb,
}) "MBColor": "hsl(212, 64%, 46%)",
} "MR": item.value_mr,
} else { "MRColor": "hsl(212, 78%, 62%)",
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => {
if (response.data.message.includes("Someone Logged In")) { })
setTimeout(() => { })
localStorage.removeItem(Constant.TOKEN)
window.location.reload(); response.tpat.nodes.map((item,index) => {
}, 1000); tpat.push({
} "company": item.company,
"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%)",
}) })
})
if (this.state.report.value == 'summary') {
response.revenue.nodes.map((item,index) => {
totalAssets.push({
"company": item.company,
"MB": item.value_mb,
"MBColor": "hsl(212, 64%, 46%)",
"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() {
const { data: chartData } = this.state; render() {
const { data: chartData } = this.state;
return ( const loadingComponent = (
<div style={{ flex: 1, backgroundColor: '#f8f8f8' }} ref={this.myRef}> <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)' }}>
<div> <PropagateLoader
<div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}> // css={override}
<Typography style={{ fontSize: '16px', color: 'white' }}>Dashboard Financial</Typography> size={20}
</div> color={"#274B80"}
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}> loading={this.state.loading}
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}> />
{this.state.messageAlert} </div>
</Alert> );
</Snackbar> const CustomTick = tick => {
<div style={{ padding: 20, width: '100%' }}> const theme = useTheme()
<Paper style={{ paddingTop: 10 , height: this.props.height}}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} > return (
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>FINANCIAL SUMMARY OF TRIPUTRA GROUP</Typography> <g transform={`translate(${tick.x},${tick.y + 22})`}>
</div> {/* <rect x={-14} y={-6} rx={3} ry={3} width={28} height={24} fill="rgba(0, 0, 0, .05)" />
<div style={{ minWidth: 'max-content', padding: '20px 20px 0px 20px' }}> <rect x={-12} y={-12} rx={2} ry={2} width={24} height={24} fill="rgb(232, 193, 160)" />
<div style={{ marginTop: 15 }}> <line stroke="rgb(232, 193, 160)" strokeWidth={1.5} y1={-22} y2={-12} /> */}
<Autocomplete <text
options={this.state.reportType} lengthAdjust
getOptionLabel={(option) => titleCase(option.label)} fontSizeAdjust
id="typereport" textAnchor="middle"
onChange={(event, newInputValue) => this.setState({ report: newInputValue, loading: true, previewTable: false }, () => { dominantBaseline="middle"
this.getReportType() style={{
})} ...theme.axis.ticks.text,
disableClearable fill: '#333',
style={{ width: 250 }} fontSize: 11,
renderInput={(params) => <TextField {...params} label="Report Type" margin="normal" style={{ marginTop: 7 }} />} // textAlign: 'justify',
value={this.state.report} }}
/> >
</div> {tick.value}
<div style={{ marginTop: 15 }}> </text>
<Autocomplete </g>
{...this.state.listCompany} )
id="company" }
disabled={this.state.intent === 'Home' ? true : false} return (
onChange={(event, newInputValue) => this.setState({ company: newInputValue, loading: true, previewTable: false }, () => { <div style={{ flex: 1, backgroundColor: '#f8f8f8' }} ref={this.myRef}>
this.getReportType() {this.state.loading && loadingComponent}
})} <div>
disableClearable <div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
style={{ width: 250 }} <Typography style={{ fontSize: '16px', color: 'white' }}>Dashboard Financial</Typography>
renderInput={(params) => <TextField {...params} label="Company" margin="normal" style={{ marginTop: 7 }} />} </div>
value={this.state.company} <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
/> <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert}
</Alert>
</Snackbar>
<div style={{ padding: 20, width: '100%' }}>
<Paper style={{ paddingTop: 10, minHeight: this.props.height, paddingBottom: 20 }}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>FINANCIAL SUMMARY OF TRIPUTRA GROUP</Typography>
</div> </div>
<div style={{ marginTop: 15 }}> <div style={{ minWidth: 'max-content', padding: '20px 20px 0px 20px' }}>
<Autocomplete <div style={{ marginTop: 15 }}>
{...this.state.listPeriode} <Autocomplete
id="periode" options={this.state.listReportType}
onChange={(event, newInputValue) => this.setState({ periode: newInputValue, loading: true, previewTable: false }, () => { getOptionLabel={(option) => titleCase(option.name)}
this.getReportType() id="typereport"
})} onChange={(event, newInputValue) => this.setState({ report: newInputValue, loading: true, previewTable: false }, () => {
disabled={this.state.intent === 'Home' ? true : false} this.getDashboardFinancial()
disableClearable })}
style={{ width: 250 }} disableClearable
renderInput={(params) => style={{ width: 250 }}
<TextField {...params} label="Period" margin="normal" style={{ marginTop: 7 }} renderInput={(params) => <TextField {...params} label="Report Type" margin="normal" style={{ marginTop: 7 }} />}
/>} value={this.state.report}
value={this.state.periode} />
/> </div>
<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
{...this.state.listCompany}
id="company"
disabled={this.state.intent === 'Home' ? true : false}
onChange={(event, newInputValue) => this.setState({ company: newInputValue, loading: true, previewTable: false }, () => {
this.getDashboardFinancial()
})}
disableClearable
style={{ width: 250 }}
renderInput={(params) => <TextField {...params} label="Company" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.company}
/>
</div>}
{/* <div style={{ marginTop: 15 }}>
<Autocomplete
{...this.state.listPeriode}
id="periode"
onChange={(event, newInputValue) => this.setState({ periode: newInputValue, loading: true, previewTable: false }, () => {
this.getReportType()
})}
disabled={this.state.intent === 'Home' ? true : false}
disableClearable
style={{ width: 250 }}
renderInput={(params) =>
<TextField {...params} label="Period" margin="normal" style={{ marginTop: 7 }}
/>}
value={this.state.periode}
/>
</div> */}
</div> </div>
</div> <Divider style={{marginTop: 15}}/>
<div style={{height: Number(0.3 * this.props.height)}}> <div style={{ minWidth: 'max-content', padding: '20px 20px 0px 20px'}}>
<ResponsiveBar <div>
data={chartData} <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>
keys={[ 'hot dog', 'burger', 'sandwich', 'kebab', 'fries', 'donut' ]} {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>}
indexBy="country" <Typography style={{ fontSize: '16px', color: 'black' }}>in IDR mn</Typography>
margin={{ top: 50, right: 130, bottom: 50, left: 60 }} </div>
padding={0.3}
groupMode="grouped" <div style={{ height: Number(0.5 * this.props.height), border: '1px solid black', marginTop: 25, paddingBottom: 50}}>
valueScale={{ type: 'linear' }} {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>}
indexScale={{ type: 'band', round: true }} {!this.state.loading && <ResponsiveBar
colors={{ scheme: 'nivo' }} data={this.state.revenue}
defs={[ keys={['MB', 'MR']}
{ indexBy="company"
id: 'dots', margin={{ top: 50, right: 50, bottom: 100, left: 75 }}
type: 'patternDots', padding={0.3}
background: 'inherit', groupMode="grouped"
color: '#38bcb2', valueScale={{ type: 'linear' }}
size: 4, indexScale={{ type: 'band', round: true }}
padding: 1, colors={['#2a70c0','#5399ea']}
stagger: true // defs={[
}, // {
{ // id: 'dots',
id: 'lines', // type: 'patternDots',
type: 'patternLines', // background: 'inherit',
background: 'inherit', // color: '#5399ea',
color: '#eed312', // size: 4,
rotation: -45, // padding: 1,
lineWidth: 6, // stagger: true
spacing: 10 // },
} // {
]} // id: 'lines',
fill={[ // type: 'patternLines',
{ // background: 'inherit',
match: { // color: '#2a70c0',
id: 'fries' // rotation: -45,
}, // lineWidth: 6,
id: 'dots' // spacing: 10
}, // }
{ // ]}
match: { // fill={[
id: 'sandwich' // {
}, // match: {
id: 'lines' // id: 'MB'
} // },
]} // id: 'dots'
borderColor={{ from: 'color', modifiers: [ [ 'darker', 1.6 ] ] }} // },
axisTop={null} // {
axisRight={null} // match: {
axisBottom={{ // id: 'MR'
tickSize: 5, // },
tickPadding: 5, // id: 'lines'
tickRotation: 0, // }
legend: 'country', // ]}
legendPosition: 'middle', borderColor={{ from: 'color', modifiers: [['darker', 1.6]] }}
legendOffset: 32 axisTop={null}
}} axisRight={null}
axisLeft={{ axisBottom={{
tickSize: 5, tickSize: 20,
tickPadding: 5, tickPadding: 0,
tickRotation: 0, tickRotation: 0,
legend: 'food', legend: 'Company',
legendPosition: 'middle', legendPosition: 'middle',
legendOffset: -40 // legendOffset: 32,
}} // renderTick: CustomTick,
labelSkipWidth={12} // lineStyle: { stroke: '#f47560', strokeWidth: 1 },
labelSkipHeight={12} // textStyle: { fill: '#e25c3b' },
labelTextColor={{ from: 'color', modifiers: [ [ 'darker', 1.6 ] ] }} // legend: 'Company',
legends={[ // legendPosition: 'middle',
{ // legendOrientation: 'vertical',
dataFrom: 'keys', legendOffset: 50,
anchor: 'bottom-right', }}
direction: 'column', // axisLeft={{
justify: false, // tickSize: 5,
translateX: 25, // tickPadding: 5,
translateY: 0, // tickRotation: 0,
itemsSpacing: 0, // legend: 'food',
itemWidth: 20, // legendPosition: 'middle',
itemHeight: 24, // legendOffset: -40
itemDirection: 'left-to-right', // }}
itemOpacity: 0.85, labelSkipWidth={12}
symbolSize: 17, labelSkipHeight={12}
effects: [ labelTextColor={{ from: 'color', modifiers: [['darker', 1.6]] }}
legends={[
{ {
on: 'hover', dataFrom: 'keys',
style: { anchor: 'bottom',
itemOpacity: 1 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}
animate={true} motionDamping={15}
motionStiffness={90} />}
motionDamping={15} </div>
/>
</div> <div style={{ height: Number(0.5 * this.props.height), border: '1px solid black', marginTop: 50, paddingBottom: 50}}>
</Paper> {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={[
{
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>
<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}
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',
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,
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',
style: {
itemOpacity: 1
}
}
]
}
]}
animate={true}
motionStiffness={90}
motionDamping={15}
/>
</div>}
</div>
</Paper>
</div>
</div> </div>
</div> </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