Skip to content

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

Merge branch 'GGMAC' into 'master' 

tambahan mba sab

See merge request !1259
parents 706b7267 758245e9
Hide whitespace changes
Inline Side-by-side
Showing with 55 additions and 47 deletions
src/container/HomePage.js
View file @ 33eba9b5
...@@ -640,54 +640,62 @@ class HomePage extends Component { ...@@ -640,54 +640,62 @@ class HomePage extends Component {
<div style={{ display: 'flex', overflowX: 'scroll', width: this.props.width * 0.9 }}> <div style={{ display: 'flex', overflowX: 'scroll', width: this.props.width * 0.9 }}>
{items.category.map((item, index) => { {items.category.map((item, index) => {
return ( return (
<div style={{ padding: 10, backgroundColor: '#fff', height: 350, borderRadius: 6, paddingBottom: 20, margin: 10, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)', width: 250, marginRight: index == items.category.length - 1 ? 25 : 0, marginLeft: index == 0 ? 5 : 25 }}> <Link to={{
{/* <span style={{ fontSize: '17px', color: this.state.selectIndex === index ? '#fff' : '#7e8085', maxWidth: 100 }}>{item.category_name}</span> */} pathname: `/home/cat-dashboard/`,
<div style={{ fontSize: '17px', width: '100%', height: 25}}> state: {
<Typography style={{ textAlign: 'left', color: '#4b4b4b' }}>{item.category_name}</Typography> userType: 'user',
</div> rawData: { month: this.state.monthCAT.month_id, periode: this.state.periodeCAT.value, companyId: item.company_id }
{item.total_kpi != null && }
<div style={{ width: '100%', display: 'flex', justifyContent: 'center', marginTop: 10 }}> }}>
<span style={{ textAlign: 'center', fontSize: '18px', color: "#fff" }}>{item.total_kpi}</span> <div style={{ padding: 10, backgroundColor: '#fff', height: 350, borderRadius: 6, paddingBottom: 20, margin: 10, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)', width: 250, marginRight: index == items.category.length - 1 ? 25 : 0, marginLeft: index == 0 ? 5 : 25 }}>
{/* <span style={{ textAlign: 'center', fontSize: '11px', color: selectIndex === index ? "#fff" : '#4b4b4b' }}>KPIs</span> */} {/* <span style={{ fontSize: '17px', color: this.state.selectIndex === index ? '#fff' : '#7e8085', maxWidth: 100 }}>{item.category_name}</span> */}
</div>} <div style={{ fontSize: '17px', width: '100%', height: 25 }}>
<div style={{ display: 'flex', justifyContent: 'center', marginTop: item.total_kpi == null ? 50 : 0 }}> <Typography style={{ textAlign: 'left', color: '#4b4b4b' }}>{item.category_name}</Typography>
<div style={{ backgroundColor: item.performanceColor, textAlign: 'center', display: 'flex', justifyContent: 'center', width: 40, height: 21 }}>
<Typography style={{ textAlign: 'center', color: '#4b4b4b' }}>{item.performance}</Typography>
</div> </div>
</div> {item.total_kpi != null &&
<div style={{ display: 'flex', justifyContent: 'center' }}> <div style={{ width: '100%', display: 'flex', justifyContent: 'center', marginTop: 10 }}>
<ReactSpeedometer <span style={{ textAlign: 'center', fontSize: '18px', color: "#fff" }}>{item.total_kpi}</span>
maxSegmentLabels={0} {/* <span style={{ textAlign: 'center', fontSize: '11px', color: selectIndex === index ? "#fff" : '#4b4b4b' }}>KPIs</span> */}
segmentColors={[ </div>}
item.performanceColor, <div style={{ display: 'flex', justifyContent: 'center', marginTop: item.total_kpi == null ? 50 : 0 }}>
"#d8d8d8" <div style={{ backgroundColor: item.performanceColor, textAlign: 'center', display: 'flex', justifyContent: 'center', width: 40, height: 21 }}>
]} <Typography style={{ textAlign: 'center', color: '#4b4b4b' }}>{item.performance}</Typography>
needleColor={"#4b4b4b"}
value={Number(item.current_value).toFixed(2)}
valueFormat={'.2f'}
minValue={Number(item.low)}
maxValue={Number(item.high)}
customSegmentStops={[0, Number(item.current_value), 5]}
width={200}
height={140}
ringWidth={25}
textColor={'#4b4b4b'}
/>
</div>
<div style={{ backgroundColor: 'transparent', display: 'flex', marginTop: 20, placeContent: 'center' }}>
{item.is_higher == '-' ?
<div style={{ textAlign: '-webkit-center' }}>
<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} />}
<Typography style={{ fontSize: 16, color: '#4b4b4b' }}>vs Last Month</Typography>
</div> </div>
} </div>
<div style={{ display: 'flex', justifyContent: 'center' }}>
<ReactSpeedometer
maxSegmentLabels={0}
segmentColors={[
item.performanceColor,
"#d8d8d8"
]}
needleColor={"#4b4b4b"}
value={Number(item.current_value).toFixed(2)}
valueFormat={'.2f'}
minValue={Number(item.low)}
maxValue={Number(item.high)}
customSegmentStops={[0, Number(item.current_value), 5]}
width={200}
height={140}
ringWidth={25}
textColor={'#4b4b4b'}
/>
</div>
<div style={{ backgroundColor: 'transparent', display: 'flex', marginTop: 20, placeContent: 'center' }}>
{item.is_higher == '-' ?
<div style={{ textAlign: '-webkit-center' }}>
<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} />}
<Typography style={{ fontSize: 16, color: '#4b4b4b' }}>vs Last Month</Typography>
</div>
}
</div>
</div> </div>
</div> </Link>
) )
})} })}
</div> </div>
...@@ -910,12 +918,12 @@ class HomePage extends Component { ...@@ -910,12 +918,12 @@ class HomePage extends Component {
pathname: `/home/cat-dashboard/`, pathname: `/home/cat-dashboard/`,
state: { state: {
userType: 'user', userType: 'user',
rawData: {month: this.state.monthCAT.month_id, periode: this.state.periodeCAT.value, companyId: item.company_id} rawData: { month: this.state.monthCAT.month_id, periode: this.state.periodeCAT.value, companyId: item.company_id }
} }
}}> }}>
<div style={{ padding: 10, backgroundColor: '#fff', height: 350, borderRadius: 6, paddingBottom: 20, margin: 10, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)', width: 250, marginRight: index == items.category.length - 1 ? 25 : 0, marginLeft: index == 0 ? 5 : 25 }}> <div style={{ padding: 10, backgroundColor: '#fff', height: 350, borderRadius: 6, paddingBottom: 20, margin: 10, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)', width: 250, marginRight: index == items.category.length - 1 ? 25 : 0, marginLeft: index == 0 ? 5 : 25 }}>
{/* <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> */}
<div style={{ fontSize: '17px', width: '100%', height: 25}}> <div style={{ fontSize: '17px', width: '100%', height: 25 }}>
<Typography style={{ textAlign: 'left', color: '#4b4b4b' }}>{item.category_name}</Typography> <Typography style={{ textAlign: 'left', color: '#4b4b4b' }}>{item.category_name}</Typography>
</div> </div>
{item.total_kpi != null && {item.total_kpi != null &&
......
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