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 = "") => {
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 getFullApproveMonthly = (body) => api.post('/transaction/monthly_report/get_approved_submit', body)
const getDashboardFinancial = (body) => api.post('/transaction/dashboard/get_dashboard_financial', body)
//CASH FLOW
const getDetailReportCF = (body) => api.post('/transaction/cash_flow/master_budget/get_report_hierarki', body)
......@@ -662,7 +662,8 @@ const create = (type = "") => {
createReportFRMB,
createReportFRMR,
getFullApproveMB,
getFullApproveMonthly
getFullApproveMonthly,
getDashboardFinancial
}
}
......
src/container/Laporan/DashboardFinancial.js
View file @ 29a8cad4
import * as React from 'react';
import Paper from '@material-ui/core/Paper';
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 { Autocomplete } from '@material-ui/lab';
import { titleCase } from '../../library/Utils';
import api from '../../api';
import Constant from '../../library/Constant';
import { format } from 'date-fns';
import { PropagateLoader } from 'react-spinners';
const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
......@@ -17,141 +20,116 @@ const Alert = withStyles({
// website examples showcase many properties,
// you'll often use just a few of them.
// const MyResponsiveBar = ({ data /* see data tab */ }) => (
// )
export default class DashboardFinancial extends React.Component {
constructor(props) {
super(props);
constructor(props) {
super(props);
this.state = {
data: [
{
"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",
"hot dog": 144,
"hot dogColor": "hsl(102, 70%, 50%)",
"burger": 62,
"burgerColor": "hsl(308, 70%, 50%)",
"sandwich": 59,
"sandwichColor": "hsl(101, 70%, 50%)",
"kebab": 117,
"kebabColor": "hsl(152, 70%, 50%)",
"fries": 57,
"friesColor": "hsl(297, 70%, 50%)",
"donut": 34,
"donutColor": "hsl(319, 70%, 50%)"
},
{
"country": "AL",
"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%)"
}
],
};
}
this.state = {
listReportType: [
{
name: 'GRAPH - MONTHLY BY INDUSTRY',
value: 'mtd'
}, {
name: 'GRAPH - YTD BY INDUSTRY',
value: 'ytd'
}, {
name: 'GRAPH - MONTHLY HISTORICAL BY COMPANY',
value: 'summary'
},
],
report: {
name: 'GRAPH - MONTHLY BY INDUSTRY',
value: 'mtd'
},
listCompany: null,
company: null,
listPeriode: null,
periode: null,
listMonth: null,
month: null,
listBusiness: null,
businessUnit: null,
listPeriode2: null,
periode2: null,
listMonth2: null,
month2: null,
loading: false,
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() {
console.log(this.props.height)
}
componentDidMount() {
console.log(this.props.height)
this.setState({loading: true})
this.getDetailUser()
}
getDetailUser() {
let userId = localStorage.getItem(Constant.USER)
api.create().getDetailUser(userId).then((response) => {
if (response.data) {
if (response.ok) {
if (response.data.status === 'success') {
this.setState({ userCompany: response.data.data.company }, () => {
this.getCompanyActive()
})
getDetailUser() {
let userId = localStorage.getItem(Constant.USER)
api.create().getDetailUser(userId).then((response) => {
if (response.data) {
if (response.ok) {
if (response.data.status === 'success') {
this.setState({ userCompany: response.data.data.company }, () => {
this.getCompanyActive()
})
}
}
}
}
})
})
}
getCompanyActive() {
......@@ -182,7 +160,7 @@ export default class DashboardFinancial extends React.Component {
};
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.getLastPeriod()
this.getAllBusiness()
})
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
......@@ -200,13 +178,83 @@ export default class DashboardFinancial extends React.Component {
})
}
getLastPeriod() {
api.create().getLastPeriod(this.state.company.company_id).then(response => {
getAllBusiness() {
api.create().getUnitBisnisActive().then((response) => {
// console.log(response);
if (response.data.status === "success") {
this.setState({ lastPeriod: response.data.data.last_periode, latestPeriode: response.data.data.latest_periode }, () => {
this.getPeriode()
})
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") {
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 {
if (response.data.status === "success") {
let data = []
response.data.data.map((item) => {
if (this.state.isApprover) {
if (item >= 2000 && item <= (Number(currentYear) + 1)) {
data.push(item)
}
} else {
if ((item >= 2000) && (item == this.state.lastPeriod || item < this.state.lastPeriod)) {
data.push(item)
}
// if (this.state.isApprover) {
if (item >= 2000 && item <= (Number(currentYear) + 1)) {
data.push(item)
}
// }
})
let periodeData = data.map((item) => {
return {
......@@ -238,238 +282,695 @@ export default class DashboardFinancial extends React.Component {
options: periodeData,
getOptionLabel: (option) => option.periode,
};
let periode = (this.state.lastPeriod == "" ? String(Number(currentYear) + 1) : this.state.lastPeriod)
let index = data.sort((a, b) => a - b).findIndex((val) => val === periode)
// console.log(data)
// let periode = (this.state.lastPeriod == "" ? String(Number(currentYear) + 1) : this.state.lastPeriod)
let dateNow = new Date()
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(periodeData)
// console.log(index)
this.setState({ listPeriode: defaultProps, periode: index === -1 ? periodeData[0] : periodeData[index] }, () => {
// this.getDataTable()
// this.getSubmission()
this.getReportType()
// if (this.state.isApprover === true) {
// this.getCompanySubmitted()
// } else {
// this.getRevision()
// }
this.setState({ listPeriode: defaultProps, periode: index === -1 ? periodeData[0] : periodeData[index], periode2: index === -1 ? periodeData[1] : periodeData[index+1] }, () => {
this.getDashboardFinancial()
})
}
}
})
}
getReportType() {
getDashboardFinancial() {
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,
"report_type": "Master Budget",
"months": this.state.month.month_id
}
api.create().getReportTypeBody(payload).then(response => {
console.log(response);
if (response.data) {
if (response.data.status === "success") {
if (this.state.report.value === 2) {
response.data.data.map((item, index) => {
if (item.report_name === 'Balance Sheet') {
this.setState({ revisionType: item.revision }, ()=> {
this.getSubmission()
})
}
})
} else if (this.state.report.value === 1) {
response.data.data.map((item, index) => {
if (item.report_name === 'Profit Loss') {
this.setState({ revisionType: item.revision }, ()=> {
this.getSubmission()
})
}
})
} else {
this.setState({ revisionType: 0 }, ()=> {
this.getSubmission()
})
}
} else {
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();
}, 1000);
}
if (this.state.report.value == 'summary') {
payload = {
...payload,
"company_id": this.state.company.company_id,
"periode_from": this.state.periode.periode,
"periode_to": this.state.periode2.periode,
"month_from": this.state.month.month_id,
"month_to": this.state.month2.month_id
}
}
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%)",
})
})
response.tpat.nodes.map((item,index) => {
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 {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', loading: false })
console.log(revenue)
this.setState({revenue, ebitda, tpat, totalAssets})
}
})
}
render() {
const { data: chartData } = this.state;
return (
<div style={{ flex: 1, backgroundColor: '#f8f8f8' }} ref={this.myRef}>
<div>
<div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Dashboard Financial</Typography>
</div>
<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 , height: this.props.height}}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>FINANCIAL SUMMARY OF TRIPUTRA GROUP</Typography>
</div>
<div style={{ minWidth: 'max-content', padding: '20px 20px 0px 20px' }}>
<div style={{ marginTop: 15 }}>
<Autocomplete
options={this.state.reportType}
getOptionLabel={(option) => titleCase(option.label)}
id="typereport"
onChange={(event, newInputValue) => this.setState({ report: newInputValue, loading: true, previewTable: false }, () => {
this.getReportType()
})}
disableClearable
style={{ width: 250 }}
renderInput={(params) => <TextField {...params} label="Report Type" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.report}
/>
</div>
<div style={{ marginTop: 15 }}>
<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.getReportType()
})}
disableClearable
style={{ width: 250 }}
renderInput={(params) => <TextField {...params} label="Company" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.company}
/>
render() {
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 (
<div style={{ flex: 1, backgroundColor: '#f8f8f8' }} ref={this.myRef}>
{this.state.loading && loadingComponent}
<div>
<div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Dashboard Financial</Typography>
</div>
<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 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 style={{ minWidth: 'max-content', padding: '20px 20px 0px 20px' }}>
<div style={{ marginTop: 15 }}>
<Autocomplete
options={this.state.listReportType}
getOptionLabel={(option) => titleCase(option.name)}
id="typereport"
onChange={(event, newInputValue) => this.setState({ report: newInputValue, loading: true, previewTable: false }, () => {
this.getDashboardFinancial()
})}
disableClearable
style={{ width: 250 }}
renderInput={(params) => <TextField {...params} label="Report Type" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.report}
/>
</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 style={{height: Number(0.3 * this.props.height)}}>
<ResponsiveBar
data={chartData}
keys={[ 'hot dog', 'burger', 'sandwich', 'kebab', 'fries', 'donut' ]}
indexBy="country"
margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
padding={0.3}
groupMode="grouped"
valueScale={{ type: 'linear' }}
indexScale={{ type: 'band', round: true }}
colors={{ scheme: 'nivo' }}
defs={[
{
id: 'dots',
type: 'patternDots',
background: 'inherit',
color: '#38bcb2',
size: 4,
padding: 1,
stagger: true
},
{
id: 'lines',
type: 'patternLines',
background: 'inherit',
color: '#eed312',
rotation: -45,
lineWidth: 6,
spacing: 10
}
]}
fill={[
{
match: {
id: 'fries'
},
id: 'dots'
},
{
match: {
id: 'sandwich'
},
id: 'lines'
}
]}
borderColor={{ from: 'color', modifiers: [ [ 'darker', 1.6 ] ] }}
axisTop={null}
axisRight={null}
axisBottom={{
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: 'country',
legendPosition: 'middle',
legendOffset: 32
}}
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-right',
direction: 'column',
justify: false,
translateX: 25,
translateY: 0,
itemsSpacing: 0,
itemWidth: 20,
itemHeight: 24,
itemDirection: 'left-to-right',
itemOpacity: 0.85,
symbolSize: 17,
effects: [
<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 style={{ height: Number(0.5 * 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 && <ResponsiveBar
data={this.state.revenue}
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={[
{
on: 'hover',
style: {
itemOpacity: 1
}
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>
</Paper>
]}
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={[
{
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>
);
}
);
}
}
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