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 = "") => { ...@@ -282,6 +282,8 @@ const create = (type = "") => {
const getReportFRLastMR = (body) => api.post('/transaction/summary_ratio/monthly_report_last_year/get_report_hierarki', body) 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 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 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 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 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) const getHierarkiReportMTD = (body) => api.post('/transaction/summary_mtd/summary/get_report_hierarki', body)
...@@ -695,7 +697,9 @@ const create = (type = "") => { ...@@ -695,7 +697,9 @@ const create = (type = "") => {
getParentItemReport, getParentItemReport,
saveMasterDataCat, saveMasterDataCat,
getDetailMasterDataCat, getDetailMasterDataCat,
deleteMasterDataCat deleteMasterDataCat,
getListChildDashboardCAT,
getDashboardCATDetail
} }
} }
......
src/container/Laporan/DashboardCAT.js
View file @ 774159cd
...@@ -28,6 +28,7 @@ export default class DashboardCAT extends Component { ...@@ -28,6 +28,7 @@ export default class DashboardCAT extends Component {
periode: null, periode: null,
listMonth: null, listMonth: null,
month: null, month: null,
loading: true,
dataDashboard: [] dataDashboard: []
} }
} }
...@@ -241,7 +242,11 @@ export default class DashboardCAT extends Component { ...@@ -241,7 +242,11 @@ export default class DashboardCAT extends Component {
if (res.data.status == 'success') { if (res.data.status == 'success') {
console.log(res) console.log(res)
// let resp = res.data.data // 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 { // else {
// this.setState({loading: false}) // this.setState({loading: false})
......
src/container/Laporan/KPIs.js
View file @ 774159cd
...@@ -69,7 +69,7 @@ export default class StrategiMap extends Component { ...@@ -69,7 +69,7 @@ export default class StrategiMap extends Component {
<FormControlLabel <FormControlLabel
control={ control={
<Checkbox <Checkbox
checked={!this.state.checkAll} checked={!this.state.checkAll && !this.state.checkYoy && !this.state.checkAB && !this.state.checkYTD}
onChange={() => { onChange={() => {
this.setState({ this.setState({
checkAll: false, checkAll: false,
...@@ -93,6 +93,8 @@ export default class StrategiMap extends Component { ...@@ -93,6 +93,8 @@ export default class StrategiMap extends Component {
onChange={() => { onChange={() => {
this.setState({ this.setState({
checkYTD: !this.state.checkYTD checkYTD: !this.state.checkYTD
}, () => {
this.setState({checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD})
}) })
}} }}
name="checkedB" name="checkedB"
...@@ -106,7 +108,9 @@ export default class StrategiMap extends Component { ...@@ -106,7 +108,9 @@ export default class StrategiMap extends Component {
<Checkbox <Checkbox
checked={this.state.checkAB} checked={this.state.checkAB}
onChange={() => { 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" name="checkedB"
color="primary" color="primary"
...@@ -119,7 +123,9 @@ export default class StrategiMap extends Component { ...@@ -119,7 +123,9 @@ export default class StrategiMap extends Component {
<Checkbox <Checkbox
checked={this.state.checkYoy} checked={this.state.checkYoy}
onChange={() => { 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" name="checkedB"
color="primary" color="primary"
...@@ -165,13 +171,13 @@ export default class StrategiMap extends Component { ...@@ -165,13 +171,13 @@ export default class StrategiMap extends Component {
} }
if (this.state.checkAB === true) { if (this.state.checkAB === true) {
option.push( { option.push( {
color: "yellow", color: "#e3e16d",
points: dataAB points: dataAB
}) })
} }
if (this.state.checkYoy === true) { if (this.state.checkYoy === true) {
option.push( { option.push( {
color: "red", color: "#f27f77",
points: dataYoy points: dataYoy
}) })
} }
...@@ -199,11 +205,10 @@ export default class StrategiMap extends Component { ...@@ -199,11 +205,10 @@ export default class StrategiMap extends Component {
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{item.unit}</Typography> <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{item.unit}</Typography>
</div> </div>
<div style={{ width: '25%', display: 'grid', alignContent: 'center' }}> <div style={{ width: '25%', display: 'grid', alignContent: 'center' }}>
<div style={{ marginLeft: -50 }}> <div style={{ marginLeft: -50 }}>
<LineChart <LineChart
width={400} width={400}
height={70} height={150}
data={option} data={option}
// yMin={0} // yMin={0}
// yMax={10} // yMax={10}
...@@ -218,7 +223,7 @@ export default class StrategiMap extends Component { ...@@ -218,7 +223,7 @@ export default class StrategiMap extends Component {
<div style={{ width: '10%', display: 'grid', alignContent: 'center' }}> <div style={{ width: '10%', display: 'grid', alignContent: 'center' }}>
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{item.current_value}</Typography> <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{item.current_value}</Typography>
</div> </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 }}> <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> <Typography style={{ color: '#fff', fontWeight: 'bold', fontSize: 12 }}>{item.achievement}</Typography>
</div> </div>
......
src/container/Laporan/StrategiMap.js
View file @ 774159cd
import React, { Component } from 'react' import React, { Component } from 'react'
// import { Paper, Typography } from '@material-ui/core' // import { Paper, Typography } from '@material-ui/core'
import Images from '../../assets/Images' 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 { export default class StrategiMap extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { 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 { ...@@ -19,6 +20,14 @@ export default class StrategiMap extends Component {
render() { render() {
return ( return (
<div style={{ padding: 20 }}> <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%' }}> <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={{ height: 56, borderTopLeftRadius: 10, borderTopRightRadius: 10, backgroundColor: '#f1f1f1', display: 'flex' }}>
<div style={{ width: '25%', borderRight: 'solid 1px #d8d8d8', display: 'grid', alignContent: 'center', paddingLeft: 20 }}> <div style={{ width: '25%', borderRight: 'solid 1px #d8d8d8', display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
...@@ -40,25 +49,25 @@ export default class StrategiMap extends Component { ...@@ -40,25 +49,25 @@ export default class StrategiMap extends Component {
<div style={{ width: '75%', borderRight: 'solid 1px #d8d8d8', paddingRight: 20 }}> <div style={{ width: '75%', borderRight: 'solid 1px #d8d8d8', paddingRight: 20 }}>
<div style={{ display: 'flex', alignContent: 'center', padding: 20, borderBottom: 'solid 1px #d8d8d8' }}> <div style={{ display: 'flex', alignContent: 'center', padding: 20, borderBottom: 'solid 1px #d8d8d8' }}>
<GridList cellHeight={100} cols={3}> <GridList cellHeight={100} cols={3}>
{item.nodes.length < 1? {item.nodes.length < 1 ?
<div style={{height: 75}}/> <div style={{ height: 75 }} />
: :
item.nodes.map((items, indexs) => { item.nodes.map((items, indexs) => {
return ( return (
<GridListTile key={items} cols={item.nodes.length == 1? 3 : item.nodes.length == 2? 2 : 1} style={{}}> <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: 'flex', minWidth: 220, borderRadius: 6, marginLeft: 10 }}>
<div style={{ display: 'grid', alignContent: 'center', backgroundColor: '#6885a6', width: 155, borderTopLeftRadius: 6, borderBottomLeftRadius: 6, padding: 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> <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>
<div style={{ backgroundColor: items.is_higher ? '#cbf4a8' : '#faaaaa', width: 68, borderTopRightRadius: 6, borderBottomRightRadius: 6, textAlign: 'center', paddingTop: 10, paddingBottom: 10 }}> </GridListTile>
<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>
)
})}
</GridList> </GridList>
</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