Skip to content

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

update cat

parent 3243f5e9
Hide whitespace changes
Inline Side-by-side
Showing with 324 additions and 59 deletions
src/container/Laporan/DashboardCAT.js
View file @ 3752cf80
...@@ -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 @ 3752cf80
...@@ -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 @ 3752cf80
...@@ -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