Skip to content

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

update

parent 774159cd
Hide whitespace changes
Inline Side-by-side
Showing with 127 additions and 55 deletions
src/container/HomePage.js
View file @ 7819577c
...@@ -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 @ 7819577c
...@@ -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: []
} }
} }
...@@ -96,8 +98,8 @@ export default class DashboardCAT extends Component { ...@@ -96,8 +98,8 @@ export default class DashboardCAT extends Component {
company_id: item.company_id, company_id: item.company_id,
company_name: item.company_name, company_name: item.company_name,
} }
}) })
let arrayBaru = [] let arrayBaru = []
this.state.userCompany.map((item, index) => { this.state.userCompany.map((item, index) => {
let indexID = companyData.findIndex((val) => val.company_id == item) let indexID = companyData.findIndex((val) => val.company_id == item)
...@@ -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,12 +244,12 @@ export default class DashboardCAT extends Component { ...@@ -242,12 +244,12 @@ 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);
}) })
} }
// else { // else {
// this.setState({loading: false}) // this.setState({loading: false})
// } // }
...@@ -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
...@@ -341,23 +347,23 @@ export default class DashboardCAT extends Component { ...@@ -341,23 +347,23 @@ export default class DashboardCAT extends Component {
/> />
</div> </div>
</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 @ 7819577c
...@@ -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' }}>
<div style={{ textAlign: '-webkit-center' }}> {item.is_higher == '-' ?
{item.is_higher ? <div style={{ textAlign: '-webkit-center' }}>
<img src={Images.up} /> : <img src={Images.down} />} <Typography style={{ fontSize: 16, color: '#4b4b4b' }}> - </Typography>
<Typography style={{ fontSize: 16, color: '#4b4b4b' }}>vs Last Month</Typography> </div>
</div> :
<div style={{ textAlign: '-webkit-center' }}>
{item.is_higher == 'true' ?
<img src={Images.up} /> : <img src={Images.down} />}
<Typography style={{ fontSize: 16, color: '#4b4b4b' }}>vs Last Month</Typography>
</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 @ 7819577c
...@@ -91,10 +91,10 @@ export default class StrategiMap extends Component { ...@@ -91,10 +91,10 @@ export default class StrategiMap extends Component {
<Checkbox <Checkbox
checked={this.state.checkYTD} checked={this.state.checkYTD}
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}) 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 @ 7819577c
...@@ -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