Skip to content

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

deploy demo

parent 35a51ad9
Hide whitespace changes
Inline Side-by-side
Showing with 50 additions and 45 deletions
src/container/HomePage.js
View file @ 4ad98e6e
...@@ -46,12 +46,13 @@ class HomePage extends Component { ...@@ -46,12 +46,13 @@ class HomePage extends Component {
accessMR: false, accessMR: false,
company: [], company: [],
dataDashboardCAT: [], dataDashboardCAT: [],
loading2: false loading2: false,
loading3: false
} }
} }
componentDidMount() { componentDidMount() {
this.setState({ loading: true, loading2: true }) this.setState({ loading: true, loading2: true, loading3: true })
let userId = localStorage.getItem(Constant.USER) let userId = localStorage.getItem(Constant.USER)
api.create().getDetailUser(userId).then((response) => { api.create().getDetailUser(userId).then((response) => {
if (response.data) { if (response.data) {
...@@ -137,7 +138,11 @@ class HomePage extends Component { ...@@ -137,7 +138,11 @@ class HomePage extends Component {
} }
}) })
console.log(data) console.log(data)
this.setState({ dataDashboardCAT: data, loading: false, loading2: false }) this.setState({ dataDashboardCAT: data, loading: false, loading2: false }, () => {
setTimeout(() => {
this.setState({loading3: false})
}, 1000);
})
} }
}) })
} }
...@@ -588,7 +593,7 @@ class HomePage extends Component { ...@@ -588,7 +593,7 @@ class HomePage extends Component {
let tahun = new Date().getFullYear() let tahun = new Date().getFullYear()
return ( return (
<div style={{ flex: 1, backgroundColor: '#f8f8f8', minHeight: this.props.height }}> <div style={{ flex: 1, backgroundColor: '#f8f8f8', minHeight: this.props.height }}>
{this.state.loading && loadingComponent} {(this.state.loading || this.state.loading2 || this.state.loading3) && loadingComponent}
{this.state.isApprover === true ? {this.state.isApprover === true ?
<div> <div>
<div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}> <div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
...@@ -601,7 +606,7 @@ class HomePage extends Component { ...@@ -601,7 +606,7 @@ class HomePage extends Component {
<Autocomplete <Autocomplete
{...this.state.listMonthCAT} {...this.state.listMonthCAT}
id="monthCAT" id="monthCAT"
onChange={(event, newInputValue) => this.setState({ monthCAT: newInputValue, loading: true }, () => { onChange={(event, newInputValue) => this.setState({ monthCAT: newInputValue, loading: true, loading3: true}, () => {
this.getDashboardCAT() this.getDashboardCAT()
// if (this.state.isApprover === true) { // if (this.state.isApprover === true) {
// this.getCompanySubmitted() // this.getCompanySubmitted()
...@@ -618,7 +623,7 @@ class HomePage extends Component { ...@@ -618,7 +623,7 @@ class HomePage extends Component {
<Autocomplete <Autocomplete
{...this.state.listPeriodeCAT} {...this.state.listPeriodeCAT}
id="periodeCAT" id="periodeCAT"
onChange={(event, newInputValue) => this.setState({ periodeCAT: newInputValue, loading: true }, () => { onChange={(event, newInputValue) => this.setState({ periodeCAT: newInputValue, loading: true, loading3: true }, () => {
this.getDashboardCAT() this.getDashboardCAT()
// if (this.state.isApprover === true) { // if (this.state.isApprover === true) {
// this.getCompanySubmitted() // this.getCompanySubmitted()
...@@ -633,48 +638,48 @@ class HomePage extends Component { ...@@ -633,48 +638,48 @@ class HomePage extends Component {
value={this.state.periodeCAT} value={this.state.periodeCAT}
/> />
</div> </div>
{this.state.dataDashboardCAT.map((items, indexs) => { {this.state.dataDashboardCAT.map((item, index) => {
return ( return (
<div> <div>
<Typography style={{ color: '#656565', fontSize: '16px', marginTop: 20 }}>{items.item_business}</Typography> <Typography style={{ color: '#656565', fontSize: '16px', marginTop: 20 }}>{item.item_business}</Typography>
<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) => { {item.category.map((items, indexs) => {
return ( return (
<Link to={{ <Link to={{
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: items.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: indexs == item.category.length - 1 ? 25 : 0, marginLeft: indexs == 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' }}>{items.category_name}</Typography>
</div> </div>
{item.total_kpi != null && {items.total_kpi != null &&
<div style={{ width: '100%', display: 'flex', justifyContent: 'center', marginTop: 10 }}> <div style={{ width: '100%', display: 'flex', justifyContent: 'center', marginTop: 10 }}>
<span style={{ textAlign: 'center', fontSize: '18px', color: "#fff" }}>{item.total_kpi}</span> <span style={{ textAlign: 'center', fontSize: '18px', color: "#fff" }}>{item.total_kpi}</span>
{/* <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: item.total_kpi == null ? 50 : 0 }}> <div style={{ display: 'flex', justifyContent: 'center', marginTop: items.total_kpi == null ? 50 : 0 }}>
<div style={{ backgroundColor: item.performanceColor, textAlign: 'center', display: 'flex', justifyContent: 'center', width: 40, height: 21 }}> <div style={{ backgroundColor: items.performanceColor, textAlign: 'center', display: 'flex', justifyContent: 'center', width: 40, height: 21 }}>
<Typography style={{ textAlign: 'center', color: '#4b4b4b' }}>{item.performance}</Typography> <Typography style={{ textAlign: 'center', color: '#4b4b4b' }}>{items.performance}</Typography>
</div> </div>
</div> </div>
<div style={{ display: 'flex', justifyContent: 'center' }}> <div style={{ display: 'flex', justifyContent: 'center' }}>
<ReactSpeedometer <ReactSpeedometer
maxSegmentLabels={0} maxSegmentLabels={0}
segmentColors={[ segmentColors={[
item.performanceColor, items.performanceColor,
"#d8d8d8" "#d8d8d8"
]} ]}
needleColor={"#4b4b4b"} needleColor={"#4b4b4b"}
value={Number(item.current_value).toFixed(2)} value={Number(items.current_value).toFixed(2)}
valueFormat={'.2f'} valueFormat={'.2f'}
minValue={Number(item.low)} minValue={Number(items.low)}
maxValue={Number(item.high)} maxValue={Number(items.high)}
customSegmentStops={[0, Number(item.current_value), 5]} customSegmentStops={[0, Number(items.current_value), 5]}
width={200} width={200}
height={140} height={140}
ringWidth={25} ringWidth={25}
...@@ -682,13 +687,13 @@ class HomePage extends Component { ...@@ -682,13 +687,13 @@ class HomePage 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 == '-' ? {items.is_higher == '-' ?
<div style={{ textAlign: '-webkit-center' }}> <div style={{ textAlign: '-webkit-center' }}>
<Typography style={{ fontSize: 16, color: '#4b4b4b' }}> - </Typography> <Typography style={{ fontSize: 16, color: '#4b4b4b' }}> - </Typography>
</div> </div>
: :
<div style={{ textAlign: '-webkit-center' }}> <div style={{ textAlign: '-webkit-center' }}>
{item.is_higher == 'true' ? {items.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>
...@@ -875,7 +880,7 @@ class HomePage extends Component { ...@@ -875,7 +880,7 @@ class HomePage extends Component {
<Autocomplete <Autocomplete
{...this.state.listMonthCAT} {...this.state.listMonthCAT}
id="monthCAT" id="monthCAT"
onChange={(event, newInputValue) => this.setState({ monthCAT: newInputValue, loading: true }, () => { onChange={(event, newInputValue) => this.setState({ monthCAT: newInputValue, loading: true, loading3: true }, () => {
this.getDashboardCAT() this.getDashboardCAT()
// if (this.state.isApprover === true) { // if (this.state.isApprover === true) {
// this.getCompanySubmitted() // this.getCompanySubmitted()
...@@ -892,7 +897,7 @@ class HomePage extends Component { ...@@ -892,7 +897,7 @@ class HomePage extends Component {
<Autocomplete <Autocomplete
{...this.state.listPeriodeCAT} {...this.state.listPeriodeCAT}
id="periodeCAT" id="periodeCAT"
onChange={(event, newInputValue) => this.setState({ periodeCAT: newInputValue, loading: true }, () => { onChange={(event, newInputValue) => this.setState({ periodeCAT: newInputValue, loading: true, loading3: true }, () => {
this.getDashboardCAT() this.getDashboardCAT()
// if (this.state.isApprover === true) { // if (this.state.isApprover === true) {
// this.getCompanySubmitted() // this.getCompanySubmitted()
...@@ -907,62 +912,62 @@ class HomePage extends Component { ...@@ -907,62 +912,62 @@ class HomePage extends Component {
value={this.state.periodeCAT} value={this.state.periodeCAT}
/> />
</div> </div>
{this.state.dataDashboardCAT.map((items, indexs) => { {this.state.dataDashboardCAT.map((item, index) => {
return ( return (
<div> <div>
<Typography style={{ color: '#656565', fontSize: '16px', marginTop: 20 }}>{items.item_business}</Typography> <Typography style={{ color: '#656565', fontSize: '16px', marginTop: 20 }}>{item.item_business}</Typography>
<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) => { {item.category.map((items, indexs) => {
return ( return (
<Link to={{ <Link to={{
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: items.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: indexs == item.category.length - 1 ? 25 : 0, marginLeft: indexs == 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' }}>{items.category_name}</Typography>
</div> </div>
{item.total_kpi != null && {items.total_kpi != null &&
<div style={{ width: '100%', display: 'flex', justifyContent: 'center', marginTop: 10 }}> <div style={{ width: '100%', display: 'flex', justifyContent: 'center', marginTop: 10 }}>
<span style={{ textAlign: 'center', fontSize: '18px', color: "#fff" }}>{item.total_kpi}</span> <span style={{ textAlign: 'center', fontSize: '18px', color: "#fff" }}>{items.total_kpi}</span>
{/* <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: item.total_kpi == null ? 50 : 0 }}> <div style={{ display: 'flex', justifyContent: 'center', marginTop: items.total_kpi == null ? 50 : 0 }}>
<div style={{ backgroundColor: item.performanceColor, textAlign: 'center', display: 'flex', justifyContent: 'center', width: 40, height: 21 }}> <div style={{ backgroundColor: items.performanceColor, textAlign: 'center', display: 'flex', justifyContent: 'center', width: 40, height: 21 }}>
<Typography style={{ textAlign: 'center', color: '#4b4b4b' }}>{item.performance}</Typography> <Typography style={{ textAlign: 'center', color: '#4b4b4b' }}>{items.performance}</Typography>
</div> </div>
</div> </div>
<div style={{ display: 'flex', justifyContent: 'center' }}> {!this.state.loading3 && <div style={{ display: 'flex', justifyContent: 'center' }}>
<ReactSpeedometer <ReactSpeedometer
maxSegmentLabels={0} maxSegmentLabels={0}
segmentColors={[ segmentColors={[
item.performanceColor, items.performanceColor,
"#d8d8d8" "#d8d8d8"
]} ]}
needleColor={"#4b4b4b"} needleColor={"#4b4b4b"}
value={Number(item.current_value).toFixed(2)} value={Number(items.current_value).toFixed(2)}
valueFormat={'.2f'} valueFormat={'.2f'}
minValue={Number(item.low)} minValue={Number(items.low)}
maxValue={Number(item.high)} maxValue={Number(items.high)}
customSegmentStops={[0, Number(item.current_value), 5]} customSegmentStops={[0, Number(items.current_value), 5]}
width={200} width={200}
height={140} height={140}
ringWidth={25} ringWidth={25}
textColor={'#4b4b4b'} textColor={'#4b4b4b'}
/> />
</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 == '-' ? {items.is_higher == '-' ?
<div style={{ textAlign: '-webkit-center' }}> <div style={{ textAlign: '-webkit-center' }}>
<Typography style={{ fontSize: 16, color: '#4b4b4b' }}> - </Typography> <Typography style={{ fontSize: 16, color: '#4b4b4b' }}> - </Typography>
</div> </div>
: :
<div style={{ textAlign: '-webkit-center' }}> <div style={{ textAlign: '-webkit-center' }}>
{item.is_higher == 'true' ? {items.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>
......
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