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 {
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 }} />
:
<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>
</div>}
......
src/container/Laporan/KPIs.js
View file @ 3752cf80
......@@ -3,6 +3,7 @@ import { Checkbox, FormControlLabel, Menu, Paper, Typography, Button } from '@ma
import LineChart from 'react-linechart';
import Images from '../../assets/Images'
import NumberFormat from 'react-number-format';
import ReactECharts from 'echarts-for-react';
export default class StrategiMap extends Component {
constructor(props) {
......@@ -13,12 +14,98 @@ export default class StrategiMap extends Component {
checkAll: true,
checkYTD: true,
checkAB: true,
checkYoy: true
checkYoy: true,
loading: false,
dataStrategyNew: []
}
}
componentDidMount() {
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() {
......@@ -32,6 +119,33 @@ export default class StrategiMap extends Component {
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 (
<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 }}>
......@@ -57,7 +171,12 @@ export default class StrategiMap extends Component {
checkAll: true,
checkYTD: true,
checkAB: true,
checkYoy: true
checkYoy: true,
loading: true,
}, () => {
setTimeout(() => {
this.setState({loading: false})
}, 500);
})
}}
name="checkedB"
......@@ -93,9 +212,14 @@ export default class StrategiMap extends Component {
checked={this.state.checkYTD}
onChange={() => {
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"
......@@ -109,8 +233,12 @@ export default class StrategiMap extends Component {
<Checkbox
checked={this.state.checkAB}
onChange={() => {
this.setState({ checkAB: !this.state.checkAB }, () => {
this.setState({ checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD })
this.setState({ checkAB: !this.state.checkAB, loading: true }, () => {
this.setState({ checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD }, () => {
setTimeout(() => {
this.setState({loading: false})
}, 500);
})
})
}}
name="checkedB"
......@@ -124,8 +252,12 @@ export default class StrategiMap extends Component {
<Checkbox
checked={this.state.checkYoy}
onChange={() => {
this.setState({ checkYoy: !this.state.checkYoy }, () => {
this.setState({ checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD })
this.setState({ checkYoy: !this.state.checkYoy, loading: true }, () => {
this.setState({ checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD }, () => {
setTimeout(() => {
this.setState({loading: false})
}, 500);
})
})
}}
name="checkedB"
......@@ -158,44 +290,44 @@ export default class StrategiMap extends Component {
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>vs Prev. Month</Typography>
</div>
</div>
{this.state.dataStrategy.map((i) => (
{this.state.dataStrategyNew.map((i) => (
i.nodes.map((item, index) => {
let dataYTD = []
let dataAB = []
let dataYoy = []
let option = []
if (this.state.checkYTD === true) {
option.push({
color: "steelblue",
points: dataYTD
})
}
if (this.state.checkAB === true) {
option.push({
color: "#e3e16d",
points: dataAB
})
}
if (this.state.checkYoy === true) {
option.push({
color: "#f27f77",
points: dataYoy
})
}
item.trends.map((val, idx) => {
dataYTD.push({
x: idx + 1,
y: val.nodes_actual_value
})
dataAB.push({
x: idx + 1,
y: val.nodes_mb_value
})
dataYoy.push({
x: idx + 1,
y: val.nodes_yoy_value
})
})
// let dataYTD = []
// let dataAB = []
// let dataYoy = []
// let option = []
// if (this.state.checkYTD === true) {
// option.push({
// color: "steelblue",
// points: dataYTD
// })
// }
// if (this.state.checkAB === true) {
// option.push({
// color: "#e3e16d",
// points: dataAB
// })
// }
// if (this.state.checkYoy === true) {
// option.push({
// color: "#f27f77",
// points: dataYoy
// })
// }
// item.trends.map((val, idx) => {
// dataYTD.push({
// x: idx + 1,
// y: val.nodes_actual_value
// })
// dataAB.push({
// x: idx + 1,
// y: val.nodes_mb_value
// })
// dataYoy.push({
// x: idx + 1,
// y: val.nodes_yoy_value
// })
// })
return (
<div style={{ backgroundColor: '#ffffff', display: 'flex', justifyContent: 'space-between', borderBottom: 'solid 3px #979696', padding: '10px 0px' }}>
<div style={{ width: '20%', display: 'grid', alignContent: 'center' }}>
......@@ -207,17 +339,145 @@ export default class StrategiMap extends Component {
</div>
<div style={{ width: '25%', display: 'grid', alignContent: 'center' }}>
<div style={{ marginLeft: -50 }}>
<LineChart
width={400}
height={150}
data={option}
// yMin={0}
// yMax={10}
hideXAxis={true}
hideYAxis={true}
hideXLabel={true}
hideYLabel={true}
/>
{!this.state.loading && (this.state.checkAB || this.state.checkYTD || this.state.checkYoy) && <ReactECharts
// showLoading={this.state.loading2}
// lazyUpdate
style={{ height: 350, width: '100%', marginTop: 20 }}
option={{
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
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>
......@@ -226,8 +486,11 @@ export default class StrategiMap extends Component {
{/* <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{item.current_value}</Typography> */}
</div>
<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 }}>
<Typography style={{ color: '#fff', fontWeight: 'bold', fontSize: 12 }}>{item.achievement}</Typography>
<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 }}>
{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 style={{ width: '5%', display: 'grid', alignContent: 'center' }}>
......
src/container/MonthlyReport.js
View file @ 3752cf80
......@@ -1775,12 +1775,14 @@ export default class MonthlyReport extends Component {
listPL.push({
"item_report_id": item[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]
})
} else {
listPL.push({
"item_report_id": item[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]
})
}
......
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