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
Show 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/ExceutiveScoreboard.js
View file @ 774159cd
import React, { Component } from 'react' import React, { Component } from 'react'
import ReactSpeedometer from "react-d3-speedometer" import ReactSpeedometer from "react-d3-speedometer"
import { GridList, Paper, Typography, GridListTile } from '@material-ui/core' import { GridList, GridListTile, Checkbox, FormControlLabel, Menu, Paper, Typography, Button } from '@material-ui/core'
import Images from '../../assets/Images' import Images from '../../assets/Images'
import LineChart from 'react-linechart'; import LineChart from 'react-linechart';
import { titleCase } from '../../library/Utils'; import { titleCase } from '../../library/Utils';
import NumberFormat from 'react-number-format'; import NumberFormat from 'react-number-format';
import { tr } from 'date-fns/locale'; import { tr } from 'date-fns/locale';
import ReactECharts from 'echarts-for-react';
import api from '../../api';
export default class ExceutiveScoreboard extends Component { export default class ExceutiveScoreboard extends Component {
constructor(props) { constructor(props) {
...@@ -19,177 +22,45 @@ export default class ExceutiveScoreboard extends Component { ...@@ -19,177 +22,45 @@ export default class ExceutiveScoreboard extends Component {
{ judul: "Financial", kpi: 5, rank: 'B+', value: 3.52, status: 'up' }, { judul: "Financial", kpi: 5, rank: 'B+', value: 3.52, status: 'up' },
], ],
arraySpeedo: [], arraySpeedo: [],
data: [], data: this.props.data,
newData: [], newData: [],
dataPayload: this.props.dataPayload, dataPayload: this.props.dataPayload,
selectIndex: null, selectIndex: null,
loading: false loading: false,
listKPI: [],
selectedKPI: [],
listDetailKPI: [],
checkAll: true,
checkYTD: true,
checkAB: true,
checkYoy: true
} }
} }
componentDidMount() { componentDidMount() {
// console.log() // console.log()
console.log(this.state.dataPayload) console.log(this.state.dataPayload)
let arrOverAll = [] this.setState({ loading: true })
let newData = []
let totalOverAll = 0
this.setState({loading: true})
this.olahDataChart() this.olahDataChart()
if (this.state.data.length > 0) {
this.state.data.map((item,index) => {
if(item.parent == null || item.parent == 'null') {
arrOverAll.push(item)
} else {
totalOverAll +=
this.state.dataPayload.month.month_id == 1? Number(item.month1 == null? 0 : item.month1) :
this.state.dataPayload.month.month_id == 2? Number(item.month2 == null? 0 : item.month2) :
this.state.dataPayload.month.month_id == 3? Number(item.month3 == null? 0 : item.month3) :
this.state.dataPayload.month.month_id == 4? Number(item.month4 == null? 0 : item.month4) :
this.state.dataPayload.month.month_id == 5? Number(item.month5 == null? 0 : item.month5) :
this.state.dataPayload.month.month_id == 6? Number(item.month6 == null? 0 : item.month6) :
this.state.dataPayload.month.month_id == 7? Number(item.month7 == null? 0 : item.month7) :
this.state.dataPayload.month.month_id == 8? Number(item.month8 == null? 0 : item.month8) :
this.state.dataPayload.month.month_id == 9? Number(item.month9 == null? 0 : item.month9) :
this.state.dataPayload.month.month_id == 10? Number(item.month10 == null? 0 : item.month10) :
this.state.dataPayload.month.month_id == 11? Number(item.month11 == null? 0 : item.month11) :
Number(item.month12 == null? 0 : item.month12)
}
})
let indexFinancial = arrOverAll.findIndex((val) => String(val.item_name).toLocaleLowerCase().includes('financial'))
let indexCust = arrOverAll.findIndex((val) => String(val.item_name).toLocaleLowerCase().includes('customer'))
let indexInternal = arrOverAll.findIndex((val) => String(val.item_name).toLocaleLowerCase().includes('internal'))
let indexLearn = arrOverAll.findIndex((val) => String(val.item_name).toLocaleLowerCase().includes('learn'))
let arrFinancial = []
let arrCust = []
let arrInternal = []
let arrLearn = []
console.log(indexFinancial)
console.log(indexCust)
console.log(indexInternal)
console.log(indexLearn)
if (indexFinancial != -1) {
arrFinancial = this.state.data.filter((val) => val.parent == arrOverAll[indexFinancial].item_report_id)
}
if (indexCust != -1) {
arrCust = this.state.data.filter((val) => val.parent == arrOverAll[indexCust].item_report_id)
}
if (indexInternal != -1) {
arrInternal = this.state.data.filter((val) => val.parent == arrOverAll[indexInternal].item_report_id)
}
if (indexLearn != -1) {
arrLearn = this.state.data.filter((val) => val.parent == arrOverAll[indexLearn].item_report_id)
}
console.log(totalOverAll)
console.log(arrOverAll)
console.log(arrFinancial)
console.log(arrCust)
console.log(arrInternal)
console.log(arrLearn)
}
} }
olahDataChart() { olahDataChart() {
let arrayChart = [] let listKPI = []
this.state.data.map((item,index) => { this.state.data.kpi.category.map((item, index) => {
let arrayChildChart = [] if (item.nodes.length > 0) {
// if (item.parent != null) { item.nodes.map((items, indexs) => {
item.month.map((items,indexs) => { listKPI.push(items.item_name)
arrayChildChart.push({
x: indexs,
y: items.value == null? indexs : items.value
})
})
arrayChart.push({
...item,
arrayChildChart: [{
color: "steelblue",
points: arrayChildChart
}]
})
// } else {
// arrayChart.push(item)
// }
})
console.log(arrayChart)
let arrayDataParent = arrayChart.filter((val) => val.parent == null || val.parent == 'null')
let arrayDataChild = arrayChart.filter((val) => val.parent != null || val.parent != 'null')
let arraySpeedo = []
this.setState({newData: arrayChart}, () => {
arrayDataParent.map((item,index) => {
// console.log(arrayDataChild.filter((val) => val.parent == item.item_report_id))
if (index == 0) {
arraySpeedo.push({
company_id: item.company_id,
decprev: item.decprev,
id: 99,
item_name: "Overall",
item_report_id: 9999,
arrayChildChart: [],
child: arrayDataChild,
month: item.month
}) })
} }
arraySpeedo.push({
...item, child: arrayDataChild.filter((val) => val.parent == item.item_report_id)
})
})
console.log(arraySpeedo)
arraySpeedo.map((item,index) => {
if (item.id != 99) {
let indexID = arraySpeedo.findIndex((val) => item.item_report_id == val.item_report_id)
let indexMonthIDParent = item.month.findIndex((val) => val.name == `month${this.state.dataPayload.month.month_id}`)
let total = 0
item.child.map((items,indexs) => {
let specMonth = items.month.filter((val) => val.name == `month${this.state.dataPayload.month.month_id}`)
total += Number(specMonth[0].value)
})
arraySpeedo[indexID].month[indexMonthIDParent].value = total
}
})
let totalOverAll = 0
// arraySpeedo.map((item,index) => {
// let indexMonthIDParent = item.month.findIndex((val) => val.name == `month${this.state.dataPayload.month.month_id}`)
// if (item.id != 99) {
// totalOverAll += item.month[indexMonthIDParent].value
// }
// })
// let indexOverall = arraySpeedo.findIndex((val) => val.id == 99)
// let indexMonthIDParent = arraySpeedo[indexOverall].month.findIndex((val) => val.name == `month${this.state.dataPayload.month.month_id}`)
// arraySpeedo[indexOverall].month[indexMonthIDParent].value = totalOverAll
console.log('skl', totalOverAll)
console.log('part2', arraySpeedo)
this.setState({arraySpeedo, loading: false})
// arraySpeedo.map((item,index) => {
// if (index == 0) {
// arraySpeedoNew.push(item)
// } else {
// arraySpeedoNew.push(item)
// }
// })
}) })
this.setState({ loading: false, listKPI })
} }
handleValueChild(item) { handleValueChild(item) {
let data = this.state.newData.filter((val) => val.parent != null) let data = this.state.newData.filter((val) => val.parent != null)
let indexID = data.findIndex((val) => val.item_name == item.item_name) let indexID = data.findIndex((val) => val.item_name == item.item_name)
let indexMonthID = data[indexID].month.findIndex((val) => val.name == `month${this.state.dataPayload.month.month_id}`) let indexMonthID = data[indexID].month.findIndex((val) => val.name == `month${this.state.dataPayload.month.month_id}`)
return data[indexID].month[indexMonthID].value == null? 0 : data[indexID].month[indexMonthID].value return data[indexID].month[indexMonthID].value == null ? 0 : data[indexID].month[indexMonthID].value
} }
handleValueSpeedo(item) { handleValueSpeedo(item) {
...@@ -197,18 +68,53 @@ export default class ExceutiveScoreboard extends Component { ...@@ -197,18 +68,53 @@ export default class ExceutiveScoreboard extends Component {
return item.month[indexMonthID].value return item.month[indexMonthID].value
} }
handleListKPI(item) {
let list = this.state.selectedKPI
let indexID = list.findIndex((val) => val == item)
if (indexID == -1) {
if (list.length < 4) {
list.push(item)
}
} else {
list.splice(indexID, 1)
}
this.setState({ selectedKPI: list }, () => { this.getDetailDashboardCAT() })
}
getDetailDashboardCAT() {
let payload = {
"company_id": this.state.dataPayload.company.company_id,
"periode": this.state.dataPayload.periode.periode,
"months": this.state.dataPayload.month.month_id,
"checklist": this.state.selectedKPI
}
console.log(payload)
api.create().getDashboardCATDetail(payload).then((res) => {
if (res.data) {
let responseArray = res.data.data.executive_scoreboard.category
// let newArr = []
// responseArray.map((item,index) => {
// if
// })
let asu = responseArray.filter((val) => this.state.selectedKPI.includes(val.category_name))
this.setState({ listDetailKPI: asu })
console.log(asu)
}
})
}
render() { render() {
let { selectIndex } = this.state let { selectIndex } = this.state
let yuk = [1,2,3] let yuk = [1, 2, 3]
const data = [ const data = [
{ {
color: "steelblue", color: "steelblue",
points: [ points: [
{ x: 1, y: 2 }, { x: 1, y: 4.1 },
{ x: 2, y: 1 }, { x: 2, y: 0 },
{ x: 3, y: 3 }, { x: 3, y: 3 },
{ x: 4, y: 2 }, { x: 4, y: 0 },
{ x: 5, y: 4 }, { x: 5, y: -2 },
{ x: 6, y: 5 }, { x: 6, y: 5 },
{ x: 7, y: 4 }, { x: 7, y: 4 },
] ]
...@@ -217,21 +123,24 @@ export default class ExceutiveScoreboard extends Component { ...@@ -217,21 +123,24 @@ export default class ExceutiveScoreboard extends Component {
return ( return (
<div style={{ padding: 20 }}> <div style={{ padding: 20 }}>
<div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', flexFlow: 'wrap' }}> <div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', flexFlow: 'wrap' }}>
{/* {!this.state.loading && this.state.arraySpeedo.map((item, index) => { {!this.state.loading && this.state.data.executive_scoreboard.category.map((item, index) => {
return ( return (
<div style={{ padding: 10, backgroundColor: this.state.selectIndex === index ? '#6885a6' : '#fff', borderRadius: 6, paddingBottom: 20, margin: 10, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)' }} onClick={() => this.setState({ selectIndex: index }, () => console.log(item))}> <div style={{ padding: 10, backgroundColor: this.state.selectIndex === index ? '#6885a6' : '#fff', borderRadius: 6, paddingBottom: 20, margin: 10, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)', width: 250 }}>
<span style={{ fontSize: '17px', color: this.state.selectIndex === index ? '#fff' : '#7e8085', maxWidth: 100}}>{item.item_name}</span> {/* <span style={{ fontSize: '17px', color: this.state.selectIndex === index ? '#fff' : '#7e8085', maxWidth: 100 }}>{item.category_name}</span> */}
<div style={{ backgroundColor: 'transparent', display: 'flex', marginTop: index === 0 ? 54 : 30, placeContent: 'center' }}> <div style={{ fontSize: '17px', width: '100%' }}>
<div> <Typography style={{ textAlign: 'left' }}>{titleCase(String(item.category_name).toLocaleLowerCase())}</Typography>
{index != 0 ?
<div>
<span style={{ textAlign: 'center', fontSize: '24px', color: selectIndex === index ? "#fff" : '#4b4b4b' }}>{item.child.length}</span>
<span style={{ textAlign: 'center', fontSize: '11px', color: selectIndex === index ? "#fff" : '#4b4b4b' }}>KPIs</span> </div> : null}
<div style={{ backgroundColor: index === 2 ? "#7cd532" : index === 3 ? "#fcff00" : index === 4 ? "#00b440" : "#00b1f7", textAlign: 'center', width: 40, height: 21 }}>
<Typography style={{ textAlign: 'center' }}>{item.rank}</Typography>
</div> </div>
{item.total_kpi != null &&
<div style={{ width: '100%', display: 'flex', justifyContent: 'center', marginTop: String(item.category_name).toLocaleLowerCase().includes('internal') ? 0 : 25 }}>
<span style={{ textAlign: 'center', fontSize: '18px', color: selectIndex === index ? "#fff" : '#4b4b4b' }}>{item.total_kpi}</span>
{/* <span style={{ textAlign: 'center', fontSize: '11px', color: selectIndex === index ? "#fff" : '#4b4b4b' }}>KPIs</span> */}
</div>}
<div style={{ display: 'flex', justifyContent: 'center', marginTop: String(item.category_name).toLocaleLowerCase() == 'overall' ? 50 : 0 }}>
<div style={{ backgroundColor: index === 2 ? "#7cd532" : index === 3 ? "#fcff00" : index === 4 ? "#00b440" : "#00b1f7", textAlign: 'center', display: 'flex', justifyContent: 'center', width: 40, height: 21 }}>
<Typography style={{ textAlign: 'center' }}>{item.performance}</Typography>
</div> </div>
</div> </div>
<div style={{ display: 'flex', justifyContent: 'center' }}>
<ReactSpeedometer <ReactSpeedometer
maxSegmentLabels={0} maxSegmentLabels={0}
segmentColors={[ segmentColors={[
...@@ -239,50 +148,273 @@ export default class ExceutiveScoreboard extends Component { ...@@ -239,50 +148,273 @@ export default class ExceutiveScoreboard extends Component {
"#d8d8d8" "#d8d8d8"
]} ]}
needleColor={this.state.selectIndex === index ? "#fff" : '#4b4b4b'} needleColor={this.state.selectIndex === index ? "#fff" : '#4b4b4b'}
value={this.handleValueSpeedo(item)} value={Number(item.current_value)}
maxValue={5} minValue={Number(item.low)}
customSegmentStops={[0, this.handleValueSpeedo(item), 5]} maxValue={Number(item.high)}
customSegmentStops={[0, Number(item.current_value), 5]}
width={200} width={200}
height={140} height={140}
ringWidth={25} ringWidth={25}
textColor={selectIndex === index ? "#fff" : '#4b4b4b'} textColor={selectIndex === index ? "#fff" : '#4b4b4b'}
/> />
</div>
<div style={{ backgroundColor: 'transparent', display: 'flex', marginTop: 20, placeContent: 'center' }}> <div style={{ backgroundColor: 'transparent', display: 'flex', marginTop: 20, placeContent: 'center' }}>
<div style={{ textAlign: '-webkit-center' }}> <div style={{ textAlign: '-webkit-center' }}>
{item.id === 99 ? {item.is_higher ?
<img src={Images.up} /> : <img src={Images.down} />} <img src={Images.up} /> : <img src={Images.down} />}
<Typography style={{ fontSize: 16, color: this.state.selectIndex === index ? '#fff' : '#4b4b4b' }}>vs Last Month</Typography> <Typography style={{ fontSize: 16, color: '#4b4b4b' }}>vs Last Month</Typography>
</div>
</div> </div>
</div> </div>
)
})}
</div> </div>
<div style={{ display: 'flex', marginTop: 15 }}>
<div>
<Button aria-controls="simple-menu" aria-haspopup="true" onClick={(e) => this.setState({ openMenuKPI: e.currentTarget })}>
KPI List
</Button>
<Menu
id="simple-menu"
anchorEl={this.state.openMenuKPI}
keepMounted
open={Boolean(this.state.openMenuKPI)}
onClose={() => this.setState({ openMenuKPI: false })}
>
<div style={{ padding: 20 }}>
<div style={{ display: 'flex', borderBottom: 'solid 3px #979696' }}>
<FormControlLabel
control={
<Checkbox
checked={this.state.deleteKPIList}
onChange={() => {
this.setState({
deleteKPIList: !this.state.deleteKPIList
}, () => {
this.setState({ selectedKPI: this.state.deleteKPIList ? [] : this.state.selectedKPI })
})
}}
name="checkedB"
color="primary"
/>
}
label={"Hapus Semua"}
/>
</div>
<div style={{ display: 'grid' }}>
{this.state.listKPI.map((item, index) => {
return (
<FormControlLabel
control={
<Checkbox
checked={this.state.selectedKPI.includes(item)}
onChange={() => {
this.handleListKPI(item)
}}
name="checkedB"
color="primary"
/>
}
label={item}
/>
) )
})} */} })}
</div>
</div>
</Menu>
</div>
<div>
<Button aria-controls="simple-menu" aria-haspopup="true" onClick={(e) => this.setState({ openMenu: e.currentTarget })}>
Filter
</Button>
<Menu
id="simple-menu"
anchorEl={this.state.openMenu}
keepMounted
open={Boolean(this.state.openMenu)}
onClose={() => this.setState({ openMenu: false })}
>
<div style={{ padding: 20 }}>
<div style={{ display: 'flex', borderBottom: 'solid 3px #979696' }}>
<FormControlLabel
control={
<Checkbox
checked={this.state.checkAll}
onChange={() => {
this.setState({
checkAll: true,
checkYTD: true,
checkAB: true,
checkYoy: true
})
}}
name="checkedB"
color="primary"
/>
}
style={{ marginRight: 20 }}
label={"Pilih Semua"}
/>
<FormControlLabel
control={
<Checkbox
checked={!this.state.checkAll && !this.state.checkYoy && !this.state.checkAB && !this.state.checkYTD}
onChange={() => {
this.setState({
checkAll: false,
checkYTD: false,
checkAB: false,
checkYoy: false
})
}}
name="checkedB"
color="primary"
/>
}
label={"Hapus Semua"}
/>
</div>
<div style={{ display: 'grid' }}>
<FormControlLabel
control={
<Checkbox
checked={this.state.checkYTD}
onChange={() => {
this.setState({
checkYTD: !this.state.checkYTD
}, () => {
this.setState({ checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD })
})
}}
name="checkedB"
color="primary"
/>
}
label={"Tren YTD"}
/>
<FormControlLabel
control={
<Checkbox
checked={this.state.checkAB}
onChange={() => {
this.setState({ checkAB: !this.state.checkAB }, () => {
this.setState({ checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD })
})
}}
name="checkedB"
color="primary"
/>
}
label={"Actual vs Budget"}
/>
<FormControlLabel
control={
<Checkbox
checked={this.state.checkYoy}
onChange={() => {
this.setState({ checkYoy: !this.state.checkYoy }, () => {
this.setState({ checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD })
})
}}
name="checkedB"
color="primary"
/>
}
label={"Yoy"}
/>
</div>
</div> </div>
<div style={{padding: 10, marginTop: 10, display: 'flex', width: '100%' }}> </Menu>
{/* <GridList cellHeight={250} cols={3}> </div>
{this.state.newData.filter((val) => val.parent != null).map((tile) => ( </div>
<GridListTile key={tile} cols={1} style={{}}>
<div style={{ maxWidth: 566, height: 233, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)', padding: 20, marginLeft: 5, marginTop: 5, marginRight: 5, display: 'inline-grid'}}> <div style={{ padding: 10, marginTop: 10, display: 'flex', width: '100%' }}>
{/* <div style={{ maxWidth: 566, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)', padding: 20, marginLeft: 5, marginTop: 5, marginRight: 5, display: 'inline-grid' }}>
<div> <div>
<span style={{ fontSize: 17 }}>{titleCase(tile.item_name)}</span> <span style={{ fontSize: 17 }}>{'kuntul'}</span>
<Typography style={{ fontSize: 24, fontWeight: 'bold' }}><NumberFormat value={this.handleValueChild(tile)} displayType={'text'} thousandSeparator={true} prefix={'Rp. '}/></Typography> <Typography style={{ fontSize: 24, fontWeight: 'bold' }}><NumberFormat value={123345} displayType={'text'} thousandSeparator={true} prefix={'Rp. '} /></Typography>
<Typography style={{ fontSize: 16, fontWeight: 'bold' }}>In IDR mn</Typography> <Typography style={{ fontSize: 16, fontWeight: 'bold' }}>In IDR mn</Typography>
</div> </div>
<div style={{ marginTop: -50 }}>
<LineChart <LineChart
width={400} width={400}
height={50} height={250}
data={tile.arrayChildChart} data={data}
yMin={0} // yMin={0}
yMax={10} // yMax={10}
hideXAxis={true} hideXAxis={true}
hideYAxis={true} hideYAxis={true}
hideXLabel={true} hideXLabel={true}
hideYLabel={true} hideYLabel={true}
/> />
</div> </div>
</div> */}
<GridList cellHeight={250} cols={2}>
{this.state.listDetailKPI.map((item,index) => {
let dataYTD = []
let dataAB = []
let dataYoy = []
let option = []
if (this.state.checkYTD === true) {
option.push({
color: "steelblue",
points: dataYTD
})
}
if (this.state.checkAB === true) {
option.push({
color: "#e3e16d",
points: dataAB
})
}
if (this.state.checkYoy === true) {
option.push({
color: "#f27f77",
points: dataYoy
})
}
item.nodes.map((val, idx) => {
dataYTD.push({
x: idx + 1,
y: val.nodes_actual_value
})
dataAB.push({
x: idx + 1,
y: val.nodes_mb_value
})
dataYoy.push({
x: idx + 1,
y: val.nodes_yoy_value
})
})
return (
<GridListTile key={item} cols={1} style={{marginBottom: 10}}>
<div style={{ width: 600, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)', padding: 20, marginLeft: 15, marginTop: index > 1? 20 : 5, marginRight: 5, display: 'inline-grid' }}>
<div>
<span style={{ fontSize: 17 }}>{item.category_name}</span>
<Typography style={{ fontSize: 24, fontWeight: 'bold' }}><NumberFormat value={item.current_value} displayType={'text'} thousandSeparator={true} prefix={'Rp. '} /></Typography>
<Typography style={{ fontSize: 16, fontWeight: 'bold' }}>In IDR mn</Typography>
</div>
<div style={{}}>
<LineChart
width={400}
height={150}
data={option}
// yMin={0}
// yMax={10}
hideXAxis={true}
hideYAxis={true}
hideXLabel={true}
hideYLabel={true}
/>
</div>
</div>
</GridListTile> </GridListTile>
))} )
</GridList> */} }
)}
</GridList>
</div> </div>
{/* <div style={{ width: 566, height: 233, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)', padding: 20, justifyContent: 'space-between', display: 'grid', margin: 10 }}> {/* <div style={{ width: 566, height: 233, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)', padding: 20, justifyContent: 'space-between', display: 'grid', margin: 10 }}>
......
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,18 +49,18 @@ export default class StrategiMap extends Component { ...@@ -40,18 +49,18 @@ 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>
<div style={{ backgroundColor: items.is_higher ? '#cbf4a8' : '#faaaaa', width: 68, borderTopRightRadius: 6, borderBottomRightRadius: 6, textAlign: 'center', paddingTop: 10, paddingBottom: 10 }}> <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={items.is_higher ? Images.up : Images.down} /> <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' }}>{'vs'}</Typography>
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'Last Month'}</Typography> <Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'Last Month'}</Typography>
</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