Skip to content

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

Merge branch 'GGMAC' into 'master' 

update cat

See merge request !1252
parents 3243f5e9 3752cf80
Hide whitespace changes
Inline Side-by-side
Showing with 324 additions and 59 deletions
src/container/Laporan/DashboardCAT.js
View file @ 67f70ffb
...@@ -501,7 +501,7 @@ export default class DashboardCAT extends Component { ...@@ -501,7 +501,7 @@ export default class DashboardCAT extends Component {
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} selectedMonth={this.state.selectedMonth} 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/KPIs.js
View file @ 67f70ffb
...@@ -3,6 +3,7 @@ import { Checkbox, FormControlLabel, Menu, Paper, Typography, Button } from '@ma ...@@ -3,6 +3,7 @@ import { Checkbox, FormControlLabel, Menu, Paper, Typography, Button } from '@ma
import LineChart from 'react-linechart'; import LineChart from 'react-linechart';
import Images from '../../assets/Images' import Images from '../../assets/Images'
import NumberFormat from 'react-number-format'; import NumberFormat from 'react-number-format';
import ReactECharts from 'echarts-for-react';
export default class StrategiMap extends Component { export default class StrategiMap extends Component {
constructor(props) { constructor(props) {
...@@ -13,12 +14,98 @@ export default class StrategiMap extends Component { ...@@ -13,12 +14,98 @@ export default class StrategiMap extends Component {
checkAll: true, checkAll: true,
checkYTD: true, checkYTD: true,
checkAB: true, checkAB: true,
checkYoy: true checkYoy: true,
loading: false,
dataStrategyNew: []
} }
} }
componentDidMount() { componentDidMount() {
console.log(this.props); console.log(this.props);
this.setState({loading: true})
this.olahDataKPI()
}
olahDataKPI() {
console.log(this.state.dataStrategy)
let arrayNew = this.state.dataStrategyNew
this.state.dataStrategy.map((item, index) => {
let arrayNodes = []
item.nodes.map((itemz, indexz) => {
let act = []
let mbv = []
let yoy = []
let minACT = 0
let maxACT = 0
let minMBV = 0
let maxMBV = 0
let minYOY = 0
let maxYOY = 0
itemz.trends.map((items, indexs) => {
act.push(items.nodes_actual_value)
mbv.push(items.nodes_mb_value)
yoy.push(items.nodes_yoy_value)
if (minACT > items.nodes_actual_value) {
minACT = items.nodes_actual_value
}
if (maxACT < items.nodes_actual_value) {
maxACT = items.nodes_actual_value
}
if (minMBV > items.nodes_mb_value) {
minMBV = items.nodes_mb_value
}
if (maxMBV < items.nodes_mb_value) {
maxMBV = items.nodes_mb_value
}
if (minYOY > items.nodes_yoy_value) {
minYOY = items.nodes_yoy_value
}
if (maxYOY < items.nodes_yoy_value) {
maxYOY = items.nodes_yoy_value
}
})
let sortMin = []
let sortMax = []
if (this.state.checkAll) {
sortMin = [minACT, minMBV, minYOY].sort((a, b) => a - b)
sortMax = [maxACT, maxMBV, maxYOY].sort((a, b) => b - a)
} else if (this.state.checkAB && this.state.checkYTD && !this.state.checkYoy) {
sortMin = [minACT, minMBV].sort((a, b) => a - b)
sortMax = [maxACT, maxMBV].sort((a, b) => b - a)
} else if (this.state.checkAB && !this.state.checkYTD && this.state.checkYoy) {
sortMin = [minACT, minYOY].sort((a, b) => a - b)
sortMax = [maxACT, maxYOY].sort((a, b) => b - a)
} else if (this.state.checkAB && !this.state.checkYTD && !this.state.checkYoy) {
sortMin = [minMBV]
sortMax = [maxMBV]
} else if (!this.state.checkAB && this.state.checkYTD && this.state.checkYoy) {
sortMin = [minMBV, minYOY].sort((a, b) => a - b)
sortMax = [maxMBV, maxYOY].sort((a, b) => b - a)
} else if (!this.state.checkAB && this.state.checkYTD && !this.state.checkYoy) {
sortMin = [minMBV]
sortMax = [maxMBV]
} else if (!this.state.checkAB && !this.state.checkYTD && this.state.checkYoy) {
sortMin = [minYOY]
sortMax = [maxYOY]
}
arrayNodes.push({ ...itemz, trends: {act, mbv, yoy, minACT, maxACT, minMBV, maxMBV, minYOY, maxYOY, sortMin, sortMax} })
})
arrayNew.push({ ...item, nodes: arrayNodes })
})
console.log(arrayNew)
console.log(this.state.checkAll)
this.setState({ dataStrategyNew: arrayNew }, () => {
setTimeout(() => {
this.setState({ loading: false })
}, 500);
})
}
handleAch(item) {
let value = String(item)
value = String(value).substr(0, String(value).length - 1)
return Number(value)
} }
render() { render() {
...@@ -32,6 +119,33 @@ export default class StrategiMap extends Component { ...@@ -32,6 +119,33 @@ export default class StrategiMap extends Component {
points: [{ x: 1, y: 2 }, { x: 2, y: 3 }, { x: 3, y: 5 }] points: [{ x: 1, y: 2 }, { x: 2, y: 3 }, { x: 3, y: 5 }]
} }
]; ];
const optionvv = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
grid: {
left: 0,
bottom: 0
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}]
};
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 }}>
...@@ -57,7 +171,12 @@ export default class StrategiMap extends Component { ...@@ -57,7 +171,12 @@ export default class StrategiMap extends Component {
checkAll: true, checkAll: true,
checkYTD: true, checkYTD: true,
checkAB: true, checkAB: true,
checkYoy: true checkYoy: true,
loading: true,
}, () => {
setTimeout(() => {
this.setState({loading: false})
}, 500);
}) })
}} }}
name="checkedB" name="checkedB"
...@@ -93,9 +212,14 @@ export default class StrategiMap extends Component { ...@@ -93,9 +212,14 @@ export default class StrategiMap extends Component {
checked={this.state.checkYTD} checked={this.state.checkYTD}
onChange={() => { onChange={() => {
this.setState({ this.setState({
checkYTD: !this.state.checkYTD checkYTD: !this.state.checkYTD,
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(() => {
this.setState({loading: false})
}, 500);
})
}) })
}} }}
name="checkedB" name="checkedB"
...@@ -109,8 +233,12 @@ export default class StrategiMap extends Component { ...@@ -109,8 +233,12 @@ 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, 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(() => {
this.setState({loading: false})
}, 500);
})
}) })
}} }}
name="checkedB" name="checkedB"
...@@ -124,8 +252,12 @@ export default class StrategiMap extends Component { ...@@ -124,8 +252,12 @@ 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, 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(() => {
this.setState({loading: false})
}, 500);
})
}) })
}} }}
name="checkedB" name="checkedB"
...@@ -158,44 +290,44 @@ export default class StrategiMap extends Component { ...@@ -158,44 +290,44 @@ export default class StrategiMap extends Component {
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>vs Prev. Month</Typography> <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>vs Prev. Month</Typography>
</div> </div>
</div> </div>
{this.state.dataStrategy.map((i) => ( {this.state.dataStrategyNew.map((i) => (
i.nodes.map((item, index) => { i.nodes.map((item, index) => {
let dataYTD = [] // let dataYTD = []
let dataAB = [] // let dataAB = []
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
}) // })
} // }
item.trends.map((val, idx) => { // item.trends.map((val, idx) => {
dataYTD.push({ // dataYTD.push({
x: idx + 1, // x: idx + 1,
y: val.nodes_actual_value // y: val.nodes_actual_value
}) // })
dataAB.push({ // dataAB.push({
x: idx + 1, // x: idx + 1,
y: val.nodes_mb_value // y: val.nodes_mb_value
}) // })
dataYoy.push({ // dataYoy.push({
x: idx + 1, // x: idx + 1,
y: val.nodes_yoy_value // y: val.nodes_yoy_value
}) // })
}) // })
return ( return (
<div style={{ backgroundColor: '#ffffff', display: 'flex', justifyContent: 'space-between', borderBottom: 'solid 3px #979696', padding: '10px 0px' }}> <div style={{ backgroundColor: '#ffffff', display: 'flex', justifyContent: 'space-between', borderBottom: 'solid 3px #979696', padding: '10px 0px' }}>
<div style={{ width: '20%', display: 'grid', alignContent: 'center' }}> <div style={{ width: '20%', display: 'grid', alignContent: 'center' }}>
...@@ -207,17 +339,145 @@ export default class StrategiMap extends Component { ...@@ -207,17 +339,145 @@ export default class StrategiMap extends Component {
</div> </div>
<div style={{ width: '25%', display: 'grid', alignContent: 'center' }}> <div style={{ width: '25%', display: 'grid', alignContent: 'center' }}>
<div style={{ marginLeft: -50 }}> <div style={{ marginLeft: -50 }}>
<LineChart {!this.state.loading && (this.state.checkAB || this.state.checkYTD || this.state.checkYoy) && <ReactECharts
width={400} // showLoading={this.state.loading2}
height={150} // lazyUpdate
data={option} style={{ height: 350, width: '100%', marginTop: 20 }}
// yMin={0} option={{
// yMax={10} tooltip: {
hideXAxis={true} trigger: 'axis',
hideYAxis={true} axisPointer: {
hideXLabel={true} type: 'cross',
hideYLabel={true} crossStyle: {
/> color: '#999'
}
}
},
legend: {
data:
this.state.checkAll ?
['Actual', 'MB', 'Yoy']
:
(this.state.checkAB && this.state.checkYTD && !this.state.checkYoy ?
['Actual', 'MB']
:
(this.state.checkAB && !this.state.checkYTD && this.state.checkYoy ?
['Actual', 'Yoy']
:
(this.state.checkAB && !this.state.checkYTD && !this.state.checkYoy ?
['Actual']
:
(!this.state.checkAB && this.state.checkYTD && this.state.checkYoy ?
['MB', 'Yoy']
:
(!this.state.checkAB && this.state.checkYTD && !this.state.checkYoy ?
['MB']
:
['Yoy'])))))
},
grid: {
left: 0,
bottom: 0
},
xAxis: {
type: 'category',
data: this.props.selectedMonth
},
yAxis: {
type: 'value',
min: item.trends.sortMin[0] - 0.5,
max: item.trends.sortMax[0] + 0.5,
},
series:
this.state.checkAll ?
[
{
name: 'Actual',
data: item.trends.act,
type: 'line'
},
{
name: 'MB',
data: item.trends.mbv,
type: 'line'
},
{
name: 'Yoy',
data: item.trends.yoy,
type: 'line'
}
]
:
this.state.checkAB && this.state.checkYTD && !this.state.checkYoy ?
[
{
name: 'Actual',
data: item.trends.act,
type: 'line'
},
{
name: 'MB',
data: item.trends.mbv,
type: 'line'
},
]
:
this.state.checkAB && !this.state.checkYTD && this.state.checkYoy ?
[
{
name: 'Actual',
data: item.trends.act,
type: 'line'
},
{
name: 'Yoy',
data: item.trends.yoy,
type: 'line'
}
]
:
this.state.checkAB && !this.state.checkYTD && !this.state.checkYoy ?
[
{
name: 'Actual',
data: item.trends.act,
type: 'line'
},
]
:
!this.state.checkAB && this.state.checkYTD && this.state.checkYoy ?
[
{
name: 'MB',
data: item.trends.mbv,
type: 'line'
},
{
name: 'Yoy',
data: item.trends.yoy,
type: 'line'
}
]
:
!this.state.checkAB && this.state.checkYTD && !this.state.checkYoy ?
[
{
name: 'MB',
data: item.trends.mbv,
type: 'line'
},
]
:
[
{
name: 'Yoy',
data: item.trends.yoy,
type: 'line'
}
]
}}
/>}
</div> </div>
</div> </div>
...@@ -226,8 +486,11 @@ export default class StrategiMap extends Component { ...@@ -226,8 +486,11 @@ 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 < -10 ? '#333333' : item.achievement < 0 ? '#333333' : '#333333', height: 70, width: 105, marginRight: 20 }}> <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: item.achievement == '-' || item.achievement == "" ? '#333333' : this.handleAch(item.achievement) < -10 ? '#333333' : this.handleAch(item.achievement) < 0 ? '#333333' : '#333333', height: 70, width: 105, marginRight: 20 }}>
<Typography style={{ color: '#fff', fontWeight: 'bold', fontSize: 12 }}>{item.achievement}</Typography> {item.achievement == '-' || item.achievement == "" ?
<Typography style={{ color: '#fff', fontWeight: 'bold', fontSize: 12 }}>{item.achievement}</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' }}>
......
src/container/MonthlyReport.js
View file @ 67f70ffb
...@@ -1775,12 +1775,14 @@ export default class MonthlyReport extends Component { ...@@ -1775,12 +1775,14 @@ export default class MonthlyReport extends Component {
listPL.push({ listPL.push({
"item_report_id": item[1], "item_report_id": item[1],
"actual": item[0] == 1 ? "" : Number(item[6].value).toFixed(1), "actual": item[0] == 1 ? "" : Number(item[6].value).toFixed(1),
"rolling_outlook": item[0] == 1 ? "" : Number(item[6].value_ro).toFixed(1),
"notes": item[8] "notes": item[8]
}) })
} else { } else {
listPL.push({ listPL.push({
"item_report_id": item[1], "item_report_id": item[1],
"actual": item[0] == 1 ? "" : Number(item[6].value).toFixed(1), "actual": item[0] == 1 ? "" : Number(item[6].value).toFixed(1),
"rolling_outlook": item[0] == 1 ? "" : Number(item[6].value_ro).toFixed(1),
"notes": item[8] "notes": item[8]
}) })
} }
......
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