Skip to content

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

Merge branch 'GGMAC' into 'master' 

update banyak

See merge request !1231
parents 4b62c50e 3ad89861
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 397 additions and 242 deletions
src/api/index.js
View file @ 774159cd
......@@ -282,6 +282,8 @@ const create = (type = "") => {
const getReportFRLastMR = (body) => api.post('/transaction/summary_ratio/monthly_report_last_year/get_report_hierarki', body)
const getReportBSSuma = (body) => api.post('/transaction/summary_balance_sheet/summary/get_report_hierarki', body)
const getDashboardCAT = (body) => api.post('/transaction/dashboard/get_dashboard_cat', body)
const getListChildDashboardCAT = (body) => api.get(`/transaction/dashboard/get_item_cat/${body}`)
const getDashboardCATDetail = (body) => api.post('/transaction/dashboard/get_dashboard_cat_detail', body)
const getHierarkiReportYtd = (body) => api.post('/transaction/summary_ytd/summary/get_report_hierarki', body)
const getHierarkiReportHistorical = (body) => api.post('/transaction/summary_historical/summary/get_report_hierarki', body)
const getHierarkiReportMTD = (body) => api.post('/transaction/summary_mtd/summary/get_report_hierarki', body)
......@@ -695,7 +697,9 @@ const create = (type = "") => {
getParentItemReport,
saveMasterDataCat,
getDetailMasterDataCat,
deleteMasterDataCat
deleteMasterDataCat,
getListChildDashboardCAT,
getDashboardCATDetail
}
}
......
src/container/Laporan/DashboardCAT.js
View file @ 774159cd
......@@ -28,6 +28,7 @@ export default class DashboardCAT extends Component {
periode: null,
listMonth: null,
month: null,
loading: true,
dataDashboard: []
}
}
......@@ -241,7 +242,11 @@ export default class DashboardCAT extends Component {
if (res.data.status == 'success') {
console.log(res)
// let resp = res.data.data
this.setState({loading: false, dataDashboard : res.data.data})
this.setState({dataDashboard : res.data.data}, () => {
setTimeout(() => {
this.setState({loading: false})
}, 400);
})
}
// else {
// this.setState({loading: false})
......
src/container/Laporan/KPIs.js
View file @ 774159cd
......@@ -69,7 +69,7 @@ export default class StrategiMap extends Component {
<FormControlLabel
control={
<Checkbox
checked={!this.state.checkAll}
checked={!this.state.checkAll && !this.state.checkYoy && !this.state.checkAB && !this.state.checkYTD}
onChange={() => {
this.setState({
checkAll: false,
......@@ -93,6 +93,8 @@ export default class StrategiMap extends Component {
onChange={() => {
this.setState({
checkYTD: !this.state.checkYTD
}, () => {
this.setState({checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD})
})
}}
name="checkedB"
......@@ -106,7 +108,9 @@ export default class StrategiMap extends Component {
<Checkbox
checked={this.state.checkAB}
onChange={() => {
this.setState({ checkAB: !this.state.checkAB })
this.setState({ checkAB: !this.state.checkAB}, () => {
this.setState({checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD})
})
}}
name="checkedB"
color="primary"
......@@ -119,7 +123,9 @@ export default class StrategiMap extends Component {
<Checkbox
checked={this.state.checkYoy}
onChange={() => {
this.setState({ checkYoy: !this.state.checkYoy })
this.setState({ checkYoy: !this.state.checkYoy}, () => {
this.setState({checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD})
})
}}
name="checkedB"
color="primary"
......@@ -165,13 +171,13 @@ export default class StrategiMap extends Component {
}
if (this.state.checkAB === true) {
option.push( {
color: "yellow",
color: "#e3e16d",
points: dataAB
})
}
if (this.state.checkYoy === true) {
option.push( {
color: "red",
color: "#f27f77",
points: dataYoy
})
}
......@@ -199,11 +205,10 @@ export default class StrategiMap extends Component {
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{item.unit}</Typography>
</div>
<div style={{ width: '25%', display: 'grid', alignContent: 'center' }}>
<div style={{ marginLeft: -50 }}>
<LineChart
width={400}
height={70}
height={150}
data={option}
// yMin={0}
// yMax={10}
......@@ -218,7 +223,7 @@ export default class StrategiMap extends Component {
<div style={{ width: '10%', display: 'grid', alignContent: 'center' }}>
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{item.current_value}</Typography>
</div>
<div style={{ width: '10%', display: 'flex' }}>
<div style={{ width: '10%', display: 'flex', justifyContent: 'center', alignItems:'center' }}>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: item.achievement < -10 ? '#333333' : item.achievement < 0 ? '#333333' : '#333333', height: 70, width: 105, marginRight: 20 }}>
<Typography style={{ color: '#fff', fontWeight: 'bold', fontSize: 12 }}>{item.achievement}</Typography>
</div>
......
src/container/Laporan/StrategiMap.js
View file @ 774159cd
import React, { Component } from 'react'
// import { Paper, Typography } from '@material-ui/core'
import Images from '../../assets/Images'
import { GridList, Paper, Typography, GridListTile } from '@material-ui/core'
import { GridList, Paper, Typography, GridListTile, FormControl, FormControlLabel, Radio } from '@material-ui/core'
export default class StrategiMap extends Component {
constructor(props) {
super(props)
this.state = {
dataStrategy: this.props.data.strategy_map.category
dataStrategy: this.props.data.strategy_map.category,
radioValue: true
}
}
......@@ -19,6 +20,14 @@ export default class StrategiMap extends Component {
render() {
return (
<div style={{ padding: 20 }}>
<div style={{display: 'flex'}}>
<FormControl component="fieldset">
<FormControlLabel value="end" control={<Radio color="primary" checked={this.state.radioValue} onClick={() => this.setState({radioValue: true})}/>} label="Actual vs Prev. Month" />
</FormControl>
<FormControl component="fieldset">
<FormControlLabel value="end" control={<Radio color="primary" checked={!this.state.radioValue} onClick={() => this.setState({radioValue: false})} />} label="YOY" />
</FormControl>
</div>
<Paper style={{ borderRadius: 10, boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.5)', width: '100%' }}>
<div style={{ height: 56, borderTopLeftRadius: 10, borderTopRightRadius: 10, backgroundColor: '#f1f1f1', display: 'flex' }}>
<div style={{ width: '25%', borderRight: 'solid 1px #d8d8d8', display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
......@@ -40,25 +49,25 @@ export default class StrategiMap extends Component {
<div style={{ width: '75%', borderRight: 'solid 1px #d8d8d8', paddingRight: 20 }}>
<div style={{ display: 'flex', alignContent: 'center', padding: 20, borderBottom: 'solid 1px #d8d8d8' }}>
<GridList cellHeight={100} cols={3}>
{item.nodes.length < 1?
<div style={{height: 75}}/>
:
item.nodes.map((items, indexs) => {
return (
<GridListTile key={items} cols={item.nodes.length == 1? 3 : item.nodes.length == 2? 2 : 1} style={{}}>
<div style={{ display: 'flex', minWidth: 220, borderRadius: 6, marginLeft: 10}}>
<div style={{ display: 'grid', alignContent: 'center', backgroundColor: '#6885a6', width: 155, borderTopLeftRadius: 6, borderBottomLeftRadius: 6, padding: 10 }}>
<Typography style={{ color: '#fff', fontSize: 12, textAlign: 'center' }}>{items.item_name}</Typography>
{item.nodes.length < 1 ?
<div style={{ height: 75 }} />
:
item.nodes.map((items, indexs) => {
return (
<GridListTile key={items} cols={item.nodes.length == 1 ? 3 : item.nodes.length == 2 ? 2 : 1} style={{}}>
<div style={{ display: 'flex', minWidth: 220, borderRadius: 6, marginLeft: 10 }}>
<div style={{ display: 'grid', alignContent: 'center', backgroundColor: '#6885a6', width: 155, borderTopLeftRadius: 6, borderBottomLeftRadius: 6, padding: 10 }}>
<Typography style={{ color: '#fff', fontSize: 12, textAlign: 'center' }}>{items.item_name}</Typography>
</div>
<div style={{ backgroundColor: this.state.radioValue? (items.is_higher_actual ? '#cbf4a8' : '#faaaaa') : (items.is_higher_yoy ? '#cbf4a8' : '#faaaaa'), width: 68, borderTopRightRadius: 6, borderBottomRightRadius: 6, textAlign: 'center', paddingTop: 10, paddingBottom: 10 }}>
<img src={this.state.radioValue? (items.is_higher_actual ? Images.up : Images.down) : (items.is_higher_yoy ? Images.up : Images.down)} />
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'vs'}</Typography>
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'Last Month'}</Typography>
</div>
</div>
<div style={{ backgroundColor: items.is_higher ? '#cbf4a8' : '#faaaaa', width: 68, borderTopRightRadius: 6, borderBottomRightRadius: 6, textAlign: 'center', paddingTop: 10, paddingBottom: 10 }}>
<img src={items.is_higher ? Images.up : Images.down} />
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'vs'}</Typography>
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'Last Month'}</Typography>
</div>
</div>
</GridListTile>
)
})}
</GridListTile>
)
})}
</GridList>
</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