Skip to content

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

Merge branch 'GGMAC' into 'master' 

update

See merge request !1235
parents 06f35954 7819577c
Show whitespace changes
Inline Side-by-side
Showing with 127 additions and 55 deletions
src/container/HomePage.js
View file @ 23469c2f
...@@ -687,7 +687,7 @@ class HomePage extends Component { ...@@ -687,7 +687,7 @@ class HomePage extends Component {
{(this.state.accessMB || this.state.accessMR) && {(this.state.accessMB || this.state.accessMR) &&
<div style={{ flex: 1, paddingLeft: 20, paddingRight: 20, paddingTop: 20, paddingBottom: 0, width: '100%' }}> <div style={{ flex: 1, paddingLeft: 20, paddingRight: 20, paddingTop: 20, paddingBottom: 0, width: '100%' }}>
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Tasks to be Complete</Typography> <Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Tasks to be Completed</Typography>
</div> </div>
</div> </div>
} }
......
src/container/Laporan/DashboardCAT.js
View file @ 23469c2f
...@@ -29,7 +29,9 @@ export default class DashboardCAT extends Component { ...@@ -29,7 +29,9 @@ export default class DashboardCAT extends Component {
listMonth: null, listMonth: null,
month: null, month: null,
loading: true, loading: true,
dataDashboard: [] dataDashboard: [],
selectedKPI: [],
listKPI: []
} }
} }
...@@ -233,8 +235,8 @@ export default class DashboardCAT extends Component { ...@@ -233,8 +235,8 @@ export default class DashboardCAT extends Component {
getDasboardCAT() { getDasboardCAT() {
let payload = { let payload = {
"company_id" : this.state.company.company_id, "company_id": this.state.company.company_id,
"periode" : this.state.periode.periode, "periode": this.state.periode.periode,
"months": this.state.month.month_id "months": this.state.month.month_id
} }
let dataDashboard = [] let dataDashboard = []
...@@ -242,9 +244,9 @@ export default class DashboardCAT extends Component { ...@@ -242,9 +244,9 @@ 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({dataDashboard : res.data.data}, () => { this.setState({ dataDashboard: res.data.data }, () => {
setTimeout(() => { setTimeout(() => {
this.setState({loading: false}) this.setState({ loading: false })
}, 400); }, 400);
}) })
} }
...@@ -263,6 +265,10 @@ export default class DashboardCAT extends Component { ...@@ -263,6 +265,10 @@ export default class DashboardCAT extends Component {
this.setState({ tab: newEvent }) this.setState({ tab: newEvent })
} }
setSelectedKPI(data) {
this.setState({ selectedKPI: data })
}
render() { render() {
const perusahaan = [ const perusahaan = [
{ value: 'TAP Group', label: 'TAP Group' }, { value: 'TAP Group', label: 'TAP Group' },
...@@ -298,14 +304,14 @@ export default class DashboardCAT extends Component { ...@@ -298,14 +304,14 @@ export default class DashboardCAT extends Component {
</Snackbar> </Snackbar>
{this.state.loading && loadingComponent} {this.state.loading && loadingComponent}
<div className={"main-color"} style={{ padding: 27 }}> <div className={"main-color"} style={{ padding: 27 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>ON CHANGE CAT</Typography> <Typography style={{ fontSize: '16px', color: 'white' }}>Dashboard CAT Report</Typography>
</div> </div>
<div style={{padding: 20}}> <div style={{ padding: 20 }}>
<div style={{ marginTop: 0}}> <div style={{ marginTop: 0 }}>
<Autocomplete <Autocomplete
{...this.state.listCompany} {...this.state.listCompany}
id="month" id="month"
onChange={(event, newInputValue) => this.setState({ company: newInputValue, loading: true }, () => { onChange={(event, newInputValue) => this.setState({ company: newInputValue, loading: true, selectedKPI: [] }, () => {
this.getDasboardCAT() this.getDasboardCAT()
})} })}
disableClearable disableClearable
...@@ -343,21 +349,21 @@ export default class DashboardCAT extends Component { ...@@ -343,21 +349,21 @@ export default class DashboardCAT extends Component {
</div> </div>
{!this.state.loading && <div className="padding-20px" style={{ display: 'flex' }}> {!this.state.loading && <div className="padding-20px" style={{ display: 'flex' }}>
<Paper style={{ marginTop: 10, minWidth: this.props.open ? this.props.width - 360 : this.props.width - 100}}> <Paper style={{ marginTop: 10, minWidth: this.props.open ? this.props.width - 360 : this.props.width - 100 }}>
<AppBar position="static" style={{ borderTopRightRadius: 10, borderTopLeftRadius: 10 }}> <AppBar position="static" style={{ borderTopRightRadius: 10, borderTopLeftRadius: 10 }}>
<Tabs indicatorColor="primary" value={this.state.tab} onChange={this.selectTab} aria-label="simple tabs example" style={{ backgroundColor: '#354960', borderColor: 'transparent',borderTopRightRadius: 10, borderTopLeftRadius: 10 }}> <Tabs indicatorColor="primary" value={this.state.tab} onChange={this.selectTab} aria-label="simple tabs example" style={{ backgroundColor: '#354960', borderColor: 'transparent', borderTopRightRadius: 10, borderTopLeftRadius: 10 }}>
<Tab label="Executive Scoreboard" style={{ color: '#fff', fontSize: 11 }} /> <Tab label="Executive Scoreboard" style={{ color: '#fff', fontSize: 11 }} />
<Tab label="Strategy Map" style={{ color: '#fff', fontSize: 11 }} /> <Tab label="Strategy Map" style={{ color: '#fff', fontSize: 11 }} />
<Tab label="KPIs" style={{ color: '#fff', fontSize: 11 }} /> <Tab label="KPIs" style={{ color: '#fff', fontSize: 11 }} />
</Tabs> </Tabs>
</AppBar> </AppBar>
{this.state.tab === 0 ? {this.state.tab === 0 ?
<ExceutiveScoreboard height={this.props.height} data={this.state.dataDashboard} dataPayload={{month: this.state.month, periode: this.state.periode, company: this.state.company}}/> <ExceutiveScoreboard selectedKPI={this.state.selectedKPI} setSelectedKPI={this.setSelectedKPI.bind(this)} height={this.props.height} data={this.state.dataDashboard} dataPayload={{ month: this.state.month, periode: this.state.periode, company: this.state.company }} />
: :
this.state.tab === 1 ? this.state.tab === 1 ?
<StrategiMap height={this.props.height} data={this.state.dataDashboard} dataPayload={{month: this.state.month, periode: this.state.periode, company: this.state.company}}/> <StrategiMap height={this.props.height} data={this.state.dataDashboard} dataPayload={{ month: this.state.month, periode: this.state.periode, company: this.state.company }} />
: :
<KPIs height={this.props.height} width={this.props.open ? this.props.width - 360 : this.props.width - 100} data={this.state.dataDashboard} dataPayload={{month: this.state.month, periode: this.state.periode, company: this.state.company}} /> <KPIs height={this.props.height} width={this.props.open ? this.props.width - 360 : this.props.width - 100} data={this.state.dataDashboard} dataPayload={{ month: this.state.month, periode: this.state.periode, company: this.state.company }} />
} }
</Paper> </Paper>
</div>} </div>}
......
src/container/Laporan/ExceutiveScoreboard.js
View file @ 23469c2f
...@@ -28,12 +28,13 @@ export default class ExceutiveScoreboard extends Component { ...@@ -28,12 +28,13 @@ export default class ExceutiveScoreboard extends Component {
selectIndex: null, selectIndex: null,
loading: false, loading: false,
listKPI: [], listKPI: [],
selectedKPI: [], selectedKPI: this.props.selectedKPI,
listDetailKPI: [], listDetailKPI: [],
checkAll: true, checkAll: true,
checkYTD: true, checkYTD: true,
checkAB: true, checkAB: true,
checkYoy: true checkYoy: true,
newDataParent: []
} }
} }
...@@ -42,10 +43,35 @@ export default class ExceutiveScoreboard extends Component { ...@@ -42,10 +43,35 @@ export default class ExceutiveScoreboard extends Component {
console.log(this.state.dataPayload) console.log(this.state.dataPayload)
this.setState({ loading: true }) this.setState({ loading: true })
this.olahDataChart() this.olahDataChart()
this.getDetailDashboardCAT()
} }
olahDataChart() { olahDataChart() {
let listKPI = [] let listKPI = []
let newDataParent = []
this.state.data.executive_scoreboard.category.map((item, index) => {
let perfomanceScore = 'K'
let lastTotal = Number(item.current_value).toFixed(2)
if (lastTotal >= 1.00 && lastTotal <= 2.00) {
perfomanceScore = 'K'
} else if (lastTotal >= 2.01 && lastTotal <= 2.75) {
perfomanceScore = 'C'
} else if (lastTotal >= 2.76 && lastTotal <= 3.00) {
perfomanceScore = 'B-'
} else if (lastTotal >= 3.01 && lastTotal <= 3.75) {
perfomanceScore = 'B'
} else if (lastTotal >= 3.76 && lastTotal <= 4.00) {
perfomanceScore = 'B+'
} else if (lastTotal >= 4.01 && lastTotal <= 4.75) {
perfomanceScore = 'BS'
} else if (lastTotal >= 4.76 && lastTotal <= 5.00) {
perfomanceScore = 'IST'
}
newDataParent.push({ ...item, current_value: Number(item.current_value).toFixed(2), perfomanceScore })
})
console.log(newDataParent)
this.state.data.kpi.category.map((item, index) => { this.state.data.kpi.category.map((item, index) => {
if (item.nodes.length > 0) { if (item.nodes.length > 0) {
item.nodes.map((items, indexs) => { item.nodes.map((items, indexs) => {
...@@ -53,7 +79,7 @@ export default class ExceutiveScoreboard extends Component { ...@@ -53,7 +79,7 @@ export default class ExceutiveScoreboard extends Component {
}) })
} }
}) })
this.setState({ loading: false, listKPI }) this.setState({ loading: false, listKPI, newDataParent })
} }
handleValueChild(item) { handleValueChild(item) {
...@@ -78,7 +104,10 @@ export default class ExceutiveScoreboard extends Component { ...@@ -78,7 +104,10 @@ export default class ExceutiveScoreboard extends Component {
} else { } else {
list.splice(indexID, 1) list.splice(indexID, 1)
} }
this.setState({ selectedKPI: list }, () => { this.getDetailDashboardCAT() })
this.props.setSelectedKPI(list)
this.getDetailDashboardCAT()
// this.setState({ selectedKPI: list }, () => { this.getDetailDashboardCAT() })
} }
getDetailDashboardCAT() { getDetailDashboardCAT() {
...@@ -103,6 +132,26 @@ export default class ExceutiveScoreboard extends Component { ...@@ -103,6 +132,26 @@ export default class ExceutiveScoreboard extends Component {
}) })
} }
handleBackgroundPerform(total) {
let color = 'white'
if (total >= 1.00 && total <= 2.00) {
color = 'red'
} else if (total >= 2.01 && total <= 2.75) {
color = 'yellow'
} else if (total >= 2.76 && total <= 3.00) {
color = 'lightgreen'
} else if (total >= 3.01 && total <= 3.75) {
color = 'yellowgreen'
} else if (total >= 3.76 && total <= 4.00) {
color = 'forestgreen'
} else if (total >= 4.01 && total <= 4.75) {
color = 'deepskyblue'
} else if (total >= 4.76 && total <= 5.00) {
color = 'dodgerblue'
}
return color
}
render() { render() {
let { selectIndex } = this.state let { selectIndex } = this.state
let yuk = [1, 2, 3] let yuk = [1, 2, 3]
...@@ -123,7 +172,7 @@ export default class ExceutiveScoreboard extends Component { ...@@ -123,7 +172,7 @@ 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.data.executive_scoreboard.category.map((item, index) => { {!this.state.loading && this.state.newDataParent.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)', width: 250 }}> <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> */} {/* <span style={{ fontSize: '17px', color: this.state.selectIndex === index ? '#fff' : '#7e8085', maxWidth: 100 }}>{item.category_name}</span> */}
...@@ -136,7 +185,7 @@ export default class ExceutiveScoreboard extends Component { ...@@ -136,7 +185,7 @@ export default class ExceutiveScoreboard extends Component {
{/* <span style={{ textAlign: 'center', fontSize: '11px', color: selectIndex === index ? "#fff" : '#4b4b4b' }}>KPIs</span> */} {/* <span style={{ textAlign: 'center', fontSize: '11px', color: selectIndex === index ? "#fff" : '#4b4b4b' }}>KPIs</span> */}
</div>} </div>}
<div style={{ display: 'flex', justifyContent: 'center', marginTop: String(item.category_name).toLocaleLowerCase() == 'overall' ? 50 : 0 }}> <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 }}> <div style={{ backgroundColor: this.handleBackgroundPerform(Number(item.current_value).toFixed(2)), textAlign: 'center', display: 'flex', justifyContent: 'center', width: 40, height: 21 }}>
<Typography style={{ textAlign: 'center' }}>{item.performance}</Typography> <Typography style={{ textAlign: 'center' }}>{item.performance}</Typography>
</div> </div>
</div> </div>
...@@ -144,14 +193,15 @@ export default class ExceutiveScoreboard extends Component { ...@@ -144,14 +193,15 @@ export default class ExceutiveScoreboard extends Component {
<ReactSpeedometer <ReactSpeedometer
maxSegmentLabels={0} maxSegmentLabels={0}
segmentColors={[ segmentColors={[
index === 2 ? "#7cd532" : index === 3 ? "#fcff00" : index === 4 ? "#00b440" : "#00b1f7", this.handleBackgroundPerform(Number(item.current_value).toFixed(2)),
"#d8d8d8" "#d8d8d8"
]} ]}
needleColor={this.state.selectIndex === index ? "#fff" : '#4b4b4b'} needleColor={this.state.selectIndex === index ? "#fff" : '#4b4b4b'}
value={Number(item.current_value)} value={Number(item.current_value).toFixed(2)}
valueFormat={'.2f'}
minValue={Number(item.low)} minValue={Number(item.low)}
maxValue={Number(item.high)} maxValue={Number(item.high)}
customSegmentStops={[0, Number(item.current_value), 5]} customSegmentStops={[0, Number(item.current_value).toFixed(2), 5]}
width={200} width={200}
height={140} height={140}
ringWidth={25} ringWidth={25}
...@@ -159,11 +209,17 @@ export default class ExceutiveScoreboard extends Component { ...@@ -159,11 +209,17 @@ export default class ExceutiveScoreboard extends Component {
/> />
</div> </div>
<div style={{ backgroundColor: 'transparent', display: 'flex', marginTop: 20, placeContent: 'center' }}> <div style={{ backgroundColor: 'transparent', display: 'flex', marginTop: 20, placeContent: 'center' }}>
{item.is_higher == '-' ?
<div style={{ textAlign: '-webkit-center' }}> <div style={{ textAlign: '-webkit-center' }}>
{item.is_higher ? <Typography style={{ fontSize: 16, color: '#4b4b4b' }}> - </Typography>
</div>
:
<div style={{ textAlign: '-webkit-center' }}>
{item.is_higher == 'true' ?
<img src={Images.up} /> : <img src={Images.down} />} <img src={Images.up} /> : <img src={Images.down} />}
<Typography style={{ fontSize: 16, color: '#4b4b4b' }}>vs Last Month</Typography> <Typography style={{ fontSize: 16, color: '#4b4b4b' }}>vs Last Month</Typography>
</div> </div>
}
</div> </div>
</div> </div>
) )
...@@ -191,7 +247,8 @@ export default class ExceutiveScoreboard extends Component { ...@@ -191,7 +247,8 @@ export default class ExceutiveScoreboard extends Component {
this.setState({ this.setState({
deleteKPIList: !this.state.deleteKPIList deleteKPIList: !this.state.deleteKPIList
}, () => { }, () => {
this.setState({ selectedKPI: this.state.deleteKPIList ? [] : this.state.selectedKPI }) this.props.setSelectedKPI(this.state.deleteKPIList ? [] : this.state.selectedKPI)
// this.setState({ selectedKPI: this.state.deleteKPIList ? [] : this.state.selectedKPI })
}) })
}} }}
name="checkedB" name="checkedB"
...@@ -350,8 +407,8 @@ export default class ExceutiveScoreboard extends Component { ...@@ -350,8 +407,8 @@ export default class ExceutiveScoreboard extends Component {
/> />
</div> </div>
</div> */} </div> */}
<GridList cellHeight={250} cols={2}> <GridList cellHeight={300} cols={2}>
{this.state.listDetailKPI.map((item,index) => { {this.state.listDetailKPI.map((item, index) => {
let dataYTD = [] let dataYTD = []
let dataAB = [] let dataAB = []
let dataYoy = [] let dataYoy = []
...@@ -389,8 +446,8 @@ export default class ExceutiveScoreboard extends Component { ...@@ -389,8 +446,8 @@ export default class ExceutiveScoreboard extends Component {
}) })
}) })
return ( return (
<GridListTile key={item} cols={1} style={{marginBottom: 10}}> <GridListTile key={item} cols={this.state.listDetailKPI.length == 1? 2 : 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 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> <div>
<span style={{ fontSize: 17 }}>{item.category_name}</span> <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: 24, fontWeight: 'bold' }}><NumberFormat value={item.current_value} displayType={'text'} thousandSeparator={true} prefix={'Rp. '} /></Typography>
...@@ -403,6 +460,7 @@ export default class ExceutiveScoreboard extends Component { ...@@ -403,6 +460,7 @@ export default class ExceutiveScoreboard extends Component {
data={option} data={option}
// yMin={0} // yMin={0}
// yMax={10} // yMax={10}
// onPointHover={(event, point) => {console.log(event)}}
hideXAxis={true} hideXAxis={true}
hideYAxis={true} hideYAxis={true}
hideXLabel={true} hideXLabel={true}
......
src/container/Laporan/KPIs.js
View file @ 23469c2f
...@@ -94,7 +94,7 @@ export default class StrategiMap extends Component { ...@@ -94,7 +94,7 @@ export default class StrategiMap extends Component {
this.setState({ this.setState({
checkYTD: !this.state.checkYTD checkYTD: !this.state.checkYTD
}, () => { }, () => {
this.setState({checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD}) this.setState({ checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD })
}) })
}} }}
name="checkedB" name="checkedB"
...@@ -108,8 +108,8 @@ export default class StrategiMap extends Component { ...@@ -108,8 +108,8 @@ 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}) this.setState({ checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD })
}) })
}} }}
name="checkedB" name="checkedB"
...@@ -123,8 +123,8 @@ export default class StrategiMap extends Component { ...@@ -123,8 +123,8 @@ 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}) this.setState({ checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD })
}) })
}} }}
name="checkedB" name="checkedB"
...@@ -164,19 +164,19 @@ export default class StrategiMap extends Component { ...@@ -164,19 +164,19 @@ export default class StrategiMap extends Component {
let dataYoy = [] let dataYoy = []
let option = [] let option = []
if (this.state.checkYTD === true) { if (this.state.checkYTD === true) {
option.push( { option.push({
color: "steelblue", color: "steelblue",
points: dataYTD points: dataYTD
}) })
} }
if (this.state.checkAB === true) { if (this.state.checkAB === true) {
option.push( { option.push({
color: "#e3e16d", color: "#e3e16d",
points: dataAB points: dataAB
}) })
} }
if (this.state.checkYoy === true) { if (this.state.checkYoy === true) {
option.push( { option.push({
color: "#f27f77", color: "#f27f77",
points: dataYoy points: dataYoy
}) })
...@@ -223,13 +223,17 @@ export default class StrategiMap extends Component { ...@@ -223,13 +223,17 @@ 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', justifyContent: 'center', alignItems:'center' }}> <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>
</div> </div>
<div style={{ width: '5%', display: 'grid', alignContent: 'center' }}> <div style={{ width: '5%', display: 'grid', alignContent: 'center' }}>
<img src={item.is_higher === false ? Images.down : Images.up} /> {item.is_higher == '-' ?
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>-</Typography>
:
<img src={item.is_higher == false ? Images.down : Images.up} />
}
</div> </div>
</div> </div>
) )
......
src/container/Laporan/StrategiMap.js
View file @ 23469c2f
...@@ -20,12 +20,12 @@ export default class StrategiMap extends Component { ...@@ -20,12 +20,12 @@ export default class StrategiMap extends Component {
render() { render() {
return ( return (
<div style={{ padding: 20 }}> <div style={{ padding: 20 }}>
<div style={{display: 'flex'}}> <div style={{ display: 'flex' }}>
<FormControl component="fieldset"> <FormControl component="fieldset">
<FormControlLabel value="end" control={<Radio color="primary" checked={this.state.radioValue} onClick={() => this.setState({radioValue: true})}/>} label="Actual vs Prev. Month" /> <FormControlLabel value="end" control={<Radio color="primary" checked={this.state.radioValue} onClick={() => this.setState({ radioValue: true })} />} label="Actual vs Prev. Month" />
</FormControl> </FormControl>
<FormControl component="fieldset"> <FormControl component="fieldset">
<FormControlLabel value="end" control={<Radio color="primary" checked={!this.state.radioValue} onClick={() => this.setState({radioValue: false})} />} label="YOY" /> <FormControlLabel value="end" control={<Radio color="primary" checked={!this.state.radioValue} onClick={() => this.setState({ radioValue: false })} />} label="YOY" />
</FormControl> </FormControl>
</div> </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%' }}>
...@@ -59,10 +59,14 @@ export default class StrategiMap extends Component { ...@@ -59,10 +59,14 @@ export default class StrategiMap extends Component {
<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: 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 }}> <div style={{ backgroundColor: this.state.radioValue ? (items.is_higher_actual == '-' ? '#d8d8d8' : (items.is_higher_actual == 'true' ? '#cbf4a8' : '#faaaaa')) : (items.is_higher_yoy == '-' ? 'white' : (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)} /> {items.is_higher_actual == '-' ?
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'-'}</Typography>
:
<img src={this.state.radioValue ? (items.is_higher_actual == 'true' ? Images.up : Images.down) : (items.is_higher_yoy == 'true' ? 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' }}>{this.state.radioValue ? 'Last Month' : 'YOY'}</Typography>
</div> </div>
</div> </div>
</GridListTile> </GridListTile>
......
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