Skip to content

T
Tia-dev
Commit 3ad89861 authored by d.arizona's avatar d.arizona
Browse files
Options

update banyak

parent 1237bf43
Hide whitespace changes
Inline Side-by-side
Showing with 397 additions and 242 deletions
src/api/index.js
View file @ 3ad89861
...@@ -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 @ 3ad89861
...@@ -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 @ 3ad89861
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,196 +22,99 @@ export default class ExceutiveScoreboard extends Component { ...@@ -19,196 +22,99 @@ 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) {
let indexMonthID = item.month.findIndex((val) => val.name == `month${this.state.dataPayload.month.month_id}`) let indexMonthID = item.month.findIndex((val) => val.name == `month${this.state.dataPayload.month.month_id}`)
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,74 +123,300 @@ export default class ExceutiveScoreboard extends Component { ...@@ -217,74 +123,300 @@ 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>
<div> {item.total_kpi != null &&
<span style={{ textAlign: 'center', fontSize: '24px', color: selectIndex === index ? "#fff" : '#4b4b4b' }}>{item.child.length}</span> <div style={{ width: '100%', display: 'flex', justifyContent: 'center', marginTop: String(item.category_name).toLocaleLowerCase().includes('internal') ? 0 : 25 }}>
<span style={{ textAlign: 'center', fontSize: '11px', color: selectIndex === index ? "#fff" : '#4b4b4b' }}>KPIs</span> </div> : null} <span style={{ textAlign: 'center', fontSize: '18px', color: selectIndex === index ? "#fff" : '#4b4b4b' }}>{item.total_kpi}</span>
<div style={{ backgroundColor: index === 2 ? "#7cd532" : index === 3 ? "#fcff00" : index === 4 ? "#00b440" : "#00b1f7", textAlign: 'center', width: 40, height: 21 }}> {/* <span style={{ textAlign: 'center', fontSize: '11px', color: selectIndex === index ? "#fff" : '#4b4b4b' }}>KPIs</span> */}
<Typography style={{ textAlign: 'center' }}>{item.rank}</Typography> </div>}
</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>
<ReactSpeedometer <div style={{ display: 'flex', justifyContent: 'center' }}>
maxSegmentLabels={0} <ReactSpeedometer
segmentColors={[ maxSegmentLabels={0}
index === 2 ? "#7cd532" : index === 3 ? "#fcff00" : index === 4 ? "#00b440" : "#00b1f7", segmentColors={[
"#d8d8d8" index === 2 ? "#7cd532" : index === 3 ? "#fcff00" : index === 4 ? "#00b440" : "#00b1f7",
]} "#d8d8d8"
needleColor={this.state.selectIndex === index ? "#fff" : '#4b4b4b'} ]}
value={this.handleValueSpeedo(item)} needleColor={this.state.selectIndex === index ? "#fff" : '#4b4b4b'}
maxValue={5} value={Number(item.current_value)}
customSegmentStops={[0, this.handleValueSpeedo(item), 5]} minValue={Number(item.low)}
width={200} maxValue={Number(item.high)}
height={140} customSegmentStops={[0, Number(item.current_value), 5]}
ringWidth={25} width={200}
textColor={selectIndex === index ? "#fff" : '#4b4b4b'} height={140}
/> ringWidth={25}
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>
<div style={{padding: 10, marginTop: 10, display: 'flex', width: '100%' }}> <div style={{ display: 'flex', marginTop: 15 }}>
{/* <GridList cellHeight={250} cols={3}> <div>
{this.state.newData.filter((val) => val.parent != null).map((tile) => ( <Button aria-controls="simple-menu" aria-haspopup="true" onClick={(e) => this.setState({ openMenuKPI: e.currentTarget })}>
<GridListTile key={tile} cols={1} style={{}}> KPI List
<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'}}> </Button>
<div> <Menu
<span style={{ fontSize: 17 }}>{titleCase(tile.item_name)}</span> id="simple-menu"
<Typography style={{ fontSize: 24, fontWeight: 'bold' }}><NumberFormat value={this.handleValueChild(tile)} displayType={'text'} thousandSeparator={true} prefix={'Rp. '}/></Typography> anchorEl={this.state.openMenuKPI}
<Typography style={{ fontSize: 16, fontWeight: 'bold' }}>In IDR mn</Typography> 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>
<LineChart
width={400}
height={50}
data={tile.arrayChildChart}
yMin={0}
yMax={10}
hideXAxis={true}
hideYAxis={true}
hideXLabel={true}
hideYLabel={true}
/>
</div> </div>
</GridListTile> </Menu>
))} </div>
</GridList> */} </div>
<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>
<span style={{ fontSize: 17 }}>{'kuntul'}</span>
<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>
</div>
<div style={{ marginTop: -50 }}>
<LineChart
width={400}
height={250}
data={data}
// yMin={0}
// yMax={10}
hideXAxis={true}
hideYAxis={true}
hideXLabel={true}
hideYLabel={true}
/>
</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>
)
}
)}
</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 }}>
<div> <div>
<span style={{ fontSize: 17 }}>YTD Revenue</span> <span style={{ fontSize: 17 }}>YTD Revenue</span>
...@@ -303,7 +435,7 @@ export default class ExceutiveScoreboard extends Component { ...@@ -303,7 +435,7 @@ export default class ExceutiveScoreboard extends Component {
hideYLabel={true} hideYLabel={true}
/> />
</div> */} </div> */}
</div> </div>
) )
} }
} }
src/container/Laporan/KPIs.js
View file @ 3ad89861
...@@ -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 @ 3ad89861
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