Skip to content

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

update ketinggalan wkwk

parent 39218e81
Hide whitespace changes
Inline Side-by-side
Showing with 55 additions and 47 deletions
src/container/HomePage.js
View file @ 758245e9
...@@ -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