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 = "") => {
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} />);
......@@ -25,118 +28,93 @@ export default class DashboardFinancial extends React.Component {
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%)"
},
listReportType: [
{
"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%)"
name: 'GRAPH - MONTHLY BY INDUSTRY',
value: 'mtd'
}, {
name: 'GRAPH - YTD BY INDUSTRY',
value: 'ytd'
}, {
name: 'GRAPH - MONTHLY HISTORICAL BY COMPANY',
value: 'summary'
},
{
"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%)"
],
report: {
name: 'GRAPH - MONTHLY BY INDUSTRY',
value: 'mtd'
},
{
"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%)"
}
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)
this.setState({loading: true})
this.getDetailUser()
}
getDetailUser() {
......@@ -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) {
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") {
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()
})
} 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 (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)
}
}
// }
})
let periodeData = data.map((item) => {
return {
......@@ -238,78 +282,139 @@ 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()
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%)",
})
}
})
} 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()
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%)",
})
} 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') {
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;
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>
......@@ -320,18 +425,18 @@ export default class DashboardFinancial extends React.Component {
</Alert>
</Snackbar>
<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' }} >
<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)}
options={this.state.listReportType}
getOptionLabel={(option) => titleCase(option.name)}
id="typereport"
onChange={(event, newInputValue) => this.setState({ report: newInputValue, loading: true, previewTable: false }, () => {
this.getReportType()
this.getDashboardFinancial()
})}
disableClearable
style={{ width: 250 }}
......@@ -339,21 +444,85 @@ export default class DashboardFinancial extends React.Component {
value={this.state.report}
/>
</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
{...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()
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 }}>
</div>}
{/* <div style={{ marginTop: 15 }}>
<Autocomplete
{...this.state.listPeriode}
id="periode"
......@@ -368,89 +537,420 @@ export default class DashboardFinancial extends React.Component {
/>}
value={this.state.periode}
/>
</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 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 }}
<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={{ scheme: 'nivo' }}
defs={[
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={[
{
id: 'dots',
type: 'patternDots',
background: 'inherit',
color: '#38bcb2',
size: 4,
padding: 1,
stagger: true
},
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: [
{
id: 'lines',
type: 'patternLines',
background: 'inherit',
color: '#eed312',
rotation: -45,
lineWidth: 6,
spacing: 10
on: 'hover',
style: {
itemOpacity: 1
}
}
]
}
]}
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: {
id: 'fries'
},
id: 'dots'
},
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: [
{
match: {
id: 'sandwich'
},
id: 'lines'
on: 'hover',
style: {
itemOpacity: 1
}
}
]
}
]}
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}
axisRight={null}
axisBottom={{
tickSize: 5,
tickPadding: 5,
tickSize: 20,
tickPadding: 0,
tickRotation: 0,
legend: 'country',
legend: 'Company',
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={{
tickSize: 5,
tickPadding: 5,
// 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: 'food',
legend: 'Company',
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}
labelSkipHeight={12}
labelTextColor={{ from: 'color', modifiers: [ [ 'darker', 1.6 ] ] }}
labelTextColor={{ from: 'color', modifiers: [['darker', 1.6]] }}
legends={[
{
dataFrom: 'keys',
anchor: 'bottom-right',
direction: 'column',
anchor: 'bottom',
direction: 'row',
justify: false,
translateX: 25,
translateY: 0,
itemsSpacing: 0,
itemWidth: 20,
itemHeight: 24,
translateX: 30,
translateY: 85,
itemsSpacing: 7,
itemWidth: 109,
itemHeight: 10,
itemDirection: 'left-to-right',
itemOpacity: 0.85,
symbolSize: 17,
symbolSize: 25,
effects: [
{
on: 'hover',
......@@ -465,6 +965,7 @@ export default class DashboardFinancial extends React.Component {
motionStiffness={90}
motionDamping={15}
/>
</div>}
</div>
</Paper>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment