KPIs.js

import React, { Component } from 'react'
import { Checkbox, FormControlLabel, Menu, Paper, Typography, Button } from '@material-ui/core'
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) {
        super(props)
        this.state = {
            openMenu: false,
            dataStrategy: this.props.data.kpi.category,
            checkAll: true,
            checkYTD: true,
            checkAB: true,
            checkYoy: true,
            loading: false,
            dataStrategyNew: []
        }
    }

    componentDidMount() {
        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() {
        const data = [
            {
                color: "steelblue",
                points: [{ x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: -2 }]
            },
            {
                color: "green",
                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'
            }]
        };
        const newTitleCase = (val) => {
            let value = val
            return value.split(' ')
                .map(w => w[0].toUpperCase() + w.substr(1).toLowerCase())
                .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 (
            <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 }}>
                    <div>
                        <Button aria-controls="simple-menu" aria-haspopup="true" onClick={(e) => this.setState({ openMenu: e.currentTarget })}>
                            Filter
                        </Button>
                        <Menu
                            id="simple-menu"
                            anchorEl={this.state.openMenu}
                            keepMounted
                            open={Boolean(this.state.openMenu)}
                            onClose={() => this.setState({ openMenu: false })}
                        >
                            <div style={{ padding: 20 }}>
                                <div style={{ display: 'flex', borderBottom: 'solid 3px #979696' }}>
                                    <FormControlLabel
                                        control={
                                            <Checkbox
                                                checked={this.state.checkAll}
                                                onChange={() => {
                                                    this.setState({
                                                        checkAll: true,
                                                        checkYTD: true,
                                                        checkAB: true,
                                                        checkYoy: true,
                                                        loading: true,
                                                    }, () => {
                                                        setTimeout(() => {
                                                            this.setState({ loading: false })
                                                        }, 500);
                                                    })
                                                }}
                                                name="checkedB"
                                                color="primary"
                                            />
                                        }
                                        style={{ marginRight: 20 }}
                                        label={"Pilih Semua"}
                                    />
                                    <FormControlLabel
                                        control={
                                            <Checkbox
                                                checked={!this.state.checkAll && !this.state.checkYoy && !this.state.checkAB && !this.state.checkYTD}
                                                onChange={() => {
                                                    this.setState({
                                                        checkAll: false,
                                                        checkYTD: false,
                                                        checkAB: false,
                                                        checkYoy: false
                                                    })
                                                }}
                                                name="checkedB"
                                                color="primary"
                                            />
                                        }
                                        label={"Hapus Semua"}
                                    />
                                </div>
                                <div style={{ display: 'grid' }}>
                                    <FormControlLabel
                                        control={
                                            <Checkbox
                                                checked={this.state.checkYTD}
                                                onChange={() => {
                                                    this.setState({
                                                        checkYTD: !this.state.checkYTD,
                                                        loading: true
                                                    }, () => {
                                                        this.setState({ checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD }, () => {
                                                            setTimeout(() => {
                                                                this.setState({ loading: false })
                                                            }, 500);
                                                        })
                                                    })
                                                }}
                                                name="checkedB"
                                                color="primary"
                                            />
                                        }
                                        label={"Tren YTD"}
                                    />
                                    <FormControlLabel
                                        control={
                                            <Checkbox
                                                checked={this.state.checkAB}
                                                onChange={() => {
                                                    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"
                                                color="primary"
                                            />
                                        }
                                        label={"Actual vs Budget"}
                                    />
                                    <FormControlLabel
                                        control={
                                            <Checkbox
                                                checked={this.state.checkYoy}
                                                onChange={() => {
                                                    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"
                                                color="primary"
                                            />
                                        }
                                        label={"Yoy"}
                                    />
                                </div>
                            </div>
                        </Menu>
                    </div>
                    <div style={{ height: 56, backgroundColor: '#ffffff', display: 'flex', justifyContent: 'space-between', borderBottom: 'solid 3px #979696 ' }}>
                        <div style={{ display: 'grid', alignContent: 'center', width: '20%' }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Category</Typography>
                        </div>
                        <div style={{ display: 'grid', alignContent: 'center', width: '20%' }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>KPI</Typography>
                        </div>
                        <div style={{ display: 'grid', alignContent: 'center', width: '25%' }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Trends</Typography>
                        </div>
                        <div style={{ display: 'grid', alignContent: 'center', width: '10%' }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Current ({this.props.dataPayload.month.month_value})</Typography>
                        </div>
                        <div style={{ display: 'grid', alignContent: 'center', width: '10%' }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Achievement</Typography>
                        </div>
                        <div style={{ display: 'grid', alignContent: 'center', width: '5%' }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>vs Prev. Month</Typography>
                        </div>
                    </div>
                    {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
                            //     })
                            // })
                            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' }}>
                                        <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{index > 0 ? '' : newTitleCase(String(i.category_name).toLocaleLowerCase())}</Typography>
                                    </div>
                                    <div style={{ width: '20%', display: 'grid', alignContent: 'center' }}>
                                        <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{item.item_name}</Typography>
                                        <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{item.unit}</Typography>
                                    </div>
                                    <div style={{ width: '25%', display: 'grid', alignContent: 'center' }}>
                                        <div style={{ marginLeft: -50 }}>
                                            {!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: 50,
                                                        bottom: 50
                                                    },
                                                    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 style={{ width: '10%', display: 'grid', alignContent: 'center' }}>
                                        <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}><NumberFormat value={item.current_value} displayType={'text'} thousandSeparator={true} /></Typography>
                                        {/* <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 == '-' || item.achievement == "" ? 'transparent' : handleColorAch(item) ? 'green' : '#ff0000', height: 70, width: 105, marginRight: 20 }}>
                                            {item.achievement == '-' || item.achievement == "" ?
                                                <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>}
                                        </div>
                                    </div>
                                    <div style={{ width: '5%', display: 'grid', alignContent: 'center' }}>
                                        {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>
                                                :
                                                <img src={handleIsHigher(item) == 'true' ? Images.up : Images.down} />
                                            )
                                        }
                                    </div>
                                </div>
                            )
                        })
                    ))}
                    {/* <div style={{ height: 56, backgroundColor: '#ffffff', display: 'flex' }}>
                        <div style={{ width: '100%', borderBottom: 'solid 1px #979696 ', display: 'grid', alignContent: 'center', marginLeft: 20 }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Category</Typography>
                        </div>
                        <div style={{ width: '75%', borderBottom: 'solid 1px #979696 ', display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>KPI</Typography>
                        </div>
                        <div style={{ width: '100%', borderBottom: 'solid 1px #979696 ', display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Trends</Typography>
                        </div>
                        <div style={{ width: '75%', borderBottom: 'solid 1px #979696 ', display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Current</Typography>
                        </div>
                        <div style={{ width: '75%', borderBottom: 'solid 1px #979696 ', marginRight: 20, display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Achievement</Typography>
                        </div>
                    </div>
                    <div style={{ height: 56, backgroundColor: '#ffffff', display: 'flex' }}>
                        <div style={{ width: '100%', borderBottom: 'solid 1px #979696 ', display: 'grid', alignContent: 'center', marginLeft: 20 }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}></Typography>
                        </div>
                        <div style={{ width: '75%', borderBottom: 'solid 1px #979696 ', display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>KPI</Typography>
                        </div>
                        <div style={{ width: '100%', borderBottom: 'solid 1px #979696 ', display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Trends</Typography>
                        </div>
                        <div style={{ width: '75%', borderBottom: 'solid 1px #979696 ', display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Current</Typography>
                        </div>
                        <div style={{ width: '75%', borderBottom: 'solid 1px #979696 ', marginRight: 20, display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Achievement</Typography>
                        </div>
                    </div> */}
                </Paper>
            </div>
        )
    }
}