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
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/ExceutiveScoreboard.js
View file @ 774159cd
import React, { Component } from 'react'
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 LineChart from 'react-linechart';
import { titleCase } from '../../library/Utils';
import NumberFormat from 'react-number-format';
import { tr } from 'date-fns/locale';
import ReactECharts from 'echarts-for-react';
import api from '../../api';
export default class ExceutiveScoreboard extends Component {
constructor(props) {
......@@ -19,196 +22,99 @@ export default class ExceutiveScoreboard extends Component {
{ judul: "Financial", kpi: 5, rank: 'B+', value: 3.52, status: 'up' },
],
arraySpeedo: [],
data: [],
data: this.props.data,
newData: [],
dataPayload: this.props.dataPayload,
selectIndex: null,
loading: false
loading: false,
listKPI: [],
selectedKPI: [],
listDetailKPI: [],
checkAll: true,
checkYTD: true,
checkAB: true,
checkYoy: true
}
}
componentDidMount() {
// console.log()
console.log(this.state.dataPayload)
let arrOverAll = []
let newData = []
let totalOverAll = 0
this.setState({loading: true})
this.setState({ loading: true })
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() {
let arrayChart = []
this.state.data.map((item,index) => {
let arrayChildChart = []
// if (item.parent != null) {
item.month.map((items,indexs) => {
arrayChildChart.push({
x: indexs,
y: items.value == null? indexs : items.value
})
})
arrayChart.push({
...item,
arrayChildChart: [{
color: "steelblue",
points: arrayChildChart
}]
let listKPI = []
this.state.data.kpi.category.map((item, index) => {
if (item.nodes.length > 0) {
item.nodes.map((items, indexs) => {
listKPI.push(items.item_name)
})
// } 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) {
let data = this.state.newData.filter((val) => val.parent != null)
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}`)
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) {
let indexMonthID = item.month.findIndex((val) => val.name == `month${this.state.dataPayload.month.month_id}`)
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() {
let { selectIndex } = this.state
let yuk = [1,2,3]
let yuk = [1, 2, 3]
const data = [
{
color: "steelblue",
points: [
{ x: 1, y: 2 },
{ x: 2, y: 1 },
{ x: 1, y: 4.1 },
{ x: 2, y: 0 },
{ x: 3, y: 3 },
{ x: 4, y: 2 },
{ x: 5, y: 4 },
{ x: 4, y: 0 },
{ x: 5, y: -2 },
{ x: 6, y: 5 },
{ x: 7, y: 4 },
]
......@@ -217,74 +123,300 @@ export default class ExceutiveScoreboard extends Component {
return (
<div style={{ padding: 20 }}>
<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 (
<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))}>
<span style={{ fontSize: '17px', color: this.state.selectIndex === index ? '#fff' : '#7e8085', maxWidth: 100}}>{item.item_name}</span>
<div style={{ backgroundColor: 'transparent', display: 'flex', marginTop: index === 0 ? 54 : 30, placeContent: 'center' }}>
<div>
{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 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.category_name}</span> */}
<div style={{ fontSize: '17px', width: '100%' }}>
<Typography style={{ textAlign: 'left' }}>{titleCase(String(item.category_name).toLocaleLowerCase())}</Typography>
</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>
<ReactSpeedometer
maxSegmentLabels={0}
segmentColors={[
index === 2 ? "#7cd532" : index === 3 ? "#fcff00" : index === 4 ? "#00b440" : "#00b1f7",
"#d8d8d8"
]}
needleColor={this.state.selectIndex === index ? "#fff" : '#4b4b4b'}
value={this.handleValueSpeedo(item)}
maxValue={5}
customSegmentStops={[0, this.handleValueSpeedo(item), 5]}
width={200}
height={140}
ringWidth={25}
textColor={selectIndex === index ? "#fff" : '#4b4b4b'}
/>
<div style={{ display: 'flex', justifyContent: 'center' }}>
<ReactSpeedometer
maxSegmentLabels={0}
segmentColors={[
index === 2 ? "#7cd532" : index === 3 ? "#fcff00" : index === 4 ? "#00b440" : "#00b1f7",
"#d8d8d8"
]}
needleColor={this.state.selectIndex === index ? "#fff" : '#4b4b4b'}
value={Number(item.current_value)}
minValue={Number(item.low)}
maxValue={Number(item.high)}
customSegmentStops={[0, Number(item.current_value), 5]}
width={200}
height={140}
ringWidth={25}
textColor={selectIndex === index ? "#fff" : '#4b4b4b'}
/>
</div>
<div style={{ backgroundColor: 'transparent', display: 'flex', marginTop: 20, placeContent: 'center' }}>
<div style={{ textAlign: '-webkit-center' }}>
{item.id === 99 ?
{item.is_higher ?
<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 style={{padding: 10, marginTop: 10, display: 'flex', width: '100%' }}>
{/* <GridList cellHeight={250} cols={3}>
{this.state.newData.filter((val) => val.parent != null).map((tile) => (
<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>
<span style={{ fontSize: 17 }}>{titleCase(tile.item_name)}</span>
<Typography style={{ fontSize: 24, fontWeight: 'bold' }}><NumberFormat value={this.handleValueChild(tile)} displayType={'text'} thousandSeparator={true} prefix={'Rp. '}/></Typography>
<Typography style={{ fontSize: 16, fontWeight: 'bold' }}>In IDR mn</Typography>
<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>
<LineChart
width={400}
height={50}
data={tile.arrayChildChart}
yMin={0}
yMax={10}
hideXAxis={true}
hideYAxis={true}
hideXLabel={true}
hideYLabel={true}
/>
</div>
</GridListTile>
))}
</GridList> */}
</Menu>
</div>
</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 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>
<span style={{ fontSize: 17 }}>YTD Revenue</span>
......@@ -303,7 +435,7 @@ export default class ExceutiveScoreboard extends Component {
hideYLabel={true}
/>
</div> */}
</div>
</div>
)
}
}
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