Skip to content

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

update issue CAT

parent ac2ecfd3
Show whitespace changes
Inline Side-by-side
Showing with 72 additions and 25 deletions
src/container/Laporan/DashboardFinancial.js
View file @ eab60727
...@@ -514,8 +514,8 @@ export default class DashboardFinancial extends React.Component { ...@@ -514,8 +514,8 @@ export default class DashboardFinancial extends React.Component {
type: 'value', type: 'value',
name: '(Rp mn)', name: '(Rp mn)',
min: minRev, min: minRev,
max: maxRev, // max: maxRev,
interval: intervalRev, // interval: intervalRev,
axisLabel: { axisLabel: {
interval: 0, interval: 0,
// rotate: 10, // rotate: 10,
...@@ -533,8 +533,8 @@ export default class DashboardFinancial extends React.Component { ...@@ -533,8 +533,8 @@ export default class DashboardFinancial extends React.Component {
type: 'value', type: 'value',
name: '(Rp mn)', name: '(Rp mn)',
min: minRev, min: minRev,
max: maxRev, // max: maxRev,
interval: intervalRev, // interval: intervalRev,
axisLabel: { axisLabel: {
interval: 0, interval: 0,
textStyle: { textStyle: {
...@@ -549,7 +549,7 @@ export default class DashboardFinancial extends React.Component { ...@@ -549,7 +549,7 @@ export default class DashboardFinancial extends React.Component {
name: '(%)', name: '(%)',
min: 0, min: 0,
max: 100, max: 100,
interval: 20, // interval: 20,
axisLabel: { axisLabel: {
formatter: '{value}%', formatter: '{value}%',
interval: 0, interval: 0,
...@@ -646,8 +646,8 @@ export default class DashboardFinancial extends React.Component { ...@@ -646,8 +646,8 @@ export default class DashboardFinancial extends React.Component {
type: 'value', type: 'value',
name: '(Rp mn)', name: '(Rp mn)',
min: minTPAT, min: minTPAT,
max: maxTPAT, // max: maxTPAT,
interval: intervalTPAT // interval: intervalTPAT
} }
] : ] :
[ [
...@@ -655,8 +655,8 @@ export default class DashboardFinancial extends React.Component { ...@@ -655,8 +655,8 @@ export default class DashboardFinancial extends React.Component {
type: 'value', type: 'value',
name: '(Rp mn)', name: '(Rp mn)',
min: minTPAT, min: minTPAT,
max: maxTPAT, // max: maxTPAT,
interval: intervalTPAT, // interval: intervalTPAT,
axisLabel: { axisLabel: {
interval: 0, interval: 0,
textStyle: { textStyle: {
...@@ -771,8 +771,8 @@ export default class DashboardFinancial extends React.Component { ...@@ -771,8 +771,8 @@ export default class DashboardFinancial extends React.Component {
type: 'value', type: 'value',
name: '(Rp mn)', name: '(Rp mn)',
min: minEBITDA, min: minEBITDA,
max: maxEBITDA, // max: maxEBITDA,
interval: intervalEBITDA, // interval: intervalEBITDA,
axisLabel: { axisLabel: {
interval: 0, interval: 0,
textStyle: { textStyle: {
...@@ -788,8 +788,8 @@ export default class DashboardFinancial extends React.Component { ...@@ -788,8 +788,8 @@ export default class DashboardFinancial extends React.Component {
type: 'value', type: 'value',
name: '(Rp mn)', name: '(Rp mn)',
min: minEBITDA, min: minEBITDA,
max: maxEBITDA, // max: maxEBITDA,
interval: intervalEBITDA, // interval: intervalEBITDA,
axisLabel: { axisLabel: {
interval: 0, interval: 0,
textStyle: { textStyle: {
...@@ -900,8 +900,8 @@ export default class DashboardFinancial extends React.Component { ...@@ -900,8 +900,8 @@ export default class DashboardFinancial extends React.Component {
type: 'value', type: 'value',
name: '(Rp mn)', name: '(Rp mn)',
min: minTA, min: minTA,
max: maxTA, // max: maxTA,
interval: intervalTA // interval: intervalTA
} }
] ]
, ,
......
src/container/Laporan/KPIs.js
View file @ eab60727
...@@ -21,7 +21,7 @@ export default class StrategiMap extends Component { ...@@ -21,7 +21,7 @@ export default class StrategiMap extends Component {
} }
componentDidMount() { componentDidMount() {
this.setState({loading: true}) this.setState({ loading: true })
this.olahDataKPI() this.olahDataKPI()
} }
...@@ -88,7 +88,7 @@ export default class StrategiMap extends Component { ...@@ -88,7 +88,7 @@ export default class StrategiMap extends Component {
sortMin = [minYOY] sortMin = [minYOY]
sortMax = [maxYOY] sortMax = [maxYOY]
} }
arrayNodes.push({ ...itemz, trends: {act, mbv, yoy, minACT, maxACT, minMBV, maxMBV, minYOY, maxYOY, sortMin, sortMax} }) arrayNodes.push({ ...itemz, trends: { act, mbv, yoy, minACT, maxACT, minMBV, maxMBV, minYOY, maxYOY, sortMin, sortMax } })
}) })
arrayNew.push({ ...item, nodes: arrayNodes }) arrayNew.push({ ...item, nodes: arrayNodes })
}) })
...@@ -151,6 +151,49 @@ export default class StrategiMap extends Component { ...@@ -151,6 +151,49 @@ export default class StrategiMap extends Component {
.map(w => w[0].toUpperCase() + w.substr(1).toLowerCase()) .map(w => w[0].toUpperCase() + w.substr(1).toLowerCase())
.join(' ') .join(' ')
} }
const handleIsHigher = (item) => {
let actMo = 0
let prevMo = 0
let isHigh = 'false'
let trends = [...item.trends.act]
let trendsLength = trends.length
if (trendsLength < 2) {
actMo = trends[0]
} else {
actMo = trends[trendsLength-1]
prevMo = trends[trendsLength-2]
}
if (actMo > prevMo) {
isHigh = 'true'
} else if (actMo == prevMo) {
isHigh = 'same'
} else {
isHigh = 'false'
}
return isHigh
}
const handleColorAch = (item) => {
let actMR = 0
let actMB = 0
let isHigh = false
let trendsAct = [...item.trends.act]
let trendsMB = [...item.trends.mbv]
let trendsActLength = trendsAct.length
let trendsMBLength = trendsMB.length
actMR = trendsAct[trendsActLength-1]
actMB = trendsMB[trendsMBLength-1]
if (actMR < actMB) {
isHigh = false
} else {
isHigh = true
}
return isHigh
}
return ( return (
<div style={{ padding: 20, width: this.props.width }}> <div style={{ padding: 20, width: this.props.width }}>
<Paper style={{ borderRadius: 10, boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.5)', padding: 20 }}> <Paper style={{ borderRadius: 10, boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.5)', padding: 20 }}>
...@@ -180,7 +223,7 @@ export default class StrategiMap extends Component { ...@@ -180,7 +223,7 @@ export default class StrategiMap extends Component {
loading: true, loading: true,
}, () => { }, () => {
setTimeout(() => { setTimeout(() => {
this.setState({loading: false}) this.setState({ loading: false })
}, 500); }, 500);
}) })
}} }}
...@@ -222,7 +265,7 @@ export default class StrategiMap extends Component { ...@@ -222,7 +265,7 @@ export default class StrategiMap extends Component {
}, () => { }, () => {
this.setState({ checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD }, () => { this.setState({ checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD }, () => {
setTimeout(() => { setTimeout(() => {
this.setState({loading: false}) this.setState({ loading: false })
}, 500); }, 500);
}) })
}) })
...@@ -241,7 +284,7 @@ export default class StrategiMap extends Component { ...@@ -241,7 +284,7 @@ export default class StrategiMap extends Component {
this.setState({ checkAB: !this.state.checkAB, loading: true }, () => { this.setState({ checkAB: !this.state.checkAB, loading: true }, () => {
this.setState({ checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD }, () => { this.setState({ checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD }, () => {
setTimeout(() => { setTimeout(() => {
this.setState({loading: false}) this.setState({ loading: false })
}, 500); }, 500);
}) })
}) })
...@@ -260,7 +303,7 @@ export default class StrategiMap extends Component { ...@@ -260,7 +303,7 @@ export default class StrategiMap extends Component {
this.setState({ checkYoy: !this.state.checkYoy, loading: true }, () => { this.setState({ checkYoy: !this.state.checkYoy, loading: true }, () => {
this.setState({ checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD }, () => { this.setState({ checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD }, () => {
setTimeout(() => { setTimeout(() => {
this.setState({loading: false}) this.setState({ loading: false })
}, 500); }, 500);
}) })
}) })
...@@ -491,18 +534,22 @@ export default class StrategiMap extends Component { ...@@ -491,18 +534,22 @@ export default class StrategiMap extends Component {
{/* <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 == '-' || item.achievement == "" ? 'transparent' : item.is_higher == false ? '#ff0000' : 'green', height: 70, width: 105, marginRight: 20 }}> <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: item.achievement == '-' || item.achievement == "" ? 'transparent' : handleColorAch(item) ? 'green' : '#ff0000', height: 70, width: 105, marginRight: 20 }}>
{item.achievement == '-' || item.achievement == "" ? {item.achievement == '-' || item.achievement == "" ?
<Typography style={{ color: '#fff', fontWeight: 'bold', fontSize: 12 }}>{item.achievement}</Typography> <Typography style={{ color: '#fff', fontWeight: 'bold', fontSize: 12 }}>-</Typography>
: :
<Typography style={{ color: '#fff', fontWeight: 'bold', fontSize: 12 }}><NumberFormat value={this.handleAch(item.achievement)} displayType={'text'} thousandSeparator={true} suffix={'%'} /></Typography>} <Typography style={{ color: '#fff', fontWeight: 'bold', fontSize: 12 }}><NumberFormat value={this.handleAch(item.achievement)} displayType={'text'} thousandSeparator={true} suffix={'%'} /></Typography>}
</div> </div>
</div> </div>
<div style={{ width: '5%', display: 'grid', alignContent: 'center' }}> <div style={{ width: '5%', display: 'grid', alignContent: 'center' }}>
{item.is_higher == '-' ? {item.trends.act.length == 0 ?
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>-</Typography>
:
(handleIsHigher(item) == 'same' ?
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>-</Typography> <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>-</Typography>
: :
<img src={item.is_higher == false ? Images.down : Images.up} /> <img src={handleIsHigher(item) == 'true' ? Images.up : Images.down} />
)
} }
</div> </div>
</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