ExceutiveScoreboard.js

import React, { Component } from 'react'
import ReactSpeedometer from "react-d3-speedometer"
import { GridList, Paper, Typography, GridListTile } from '@material-ui/core'
import Images from '../../assets/Images'
import LineChart from 'react-linechart';
import { titleCase } from '../../library/Utils';
import NumberFormat from 'react-number-format';
import { tr } from 'date-fns/locale';

export default class ExceutiveScoreboard extends Component {
    constructor(props) {
        super(props)
        this.state = {
            listDummy: [
                { judul: "Overall", kpi: 0, rank: 'BS', value: 3.67, status: 'up' },
                { judul: "Financial", kpi: 5, rank: 'BS', value: 3.67, status: 'up' },
                { judul: "Customer Perspective", kpi: 2, rank: 'B', value: 3.05, status: 'down' },
                { judul: "Internal Perspective", kpi: 5, rank: 'C', value: 2.61, status: 'down' },
                { judul: "Financial", kpi: 5, rank: 'B+', value: 3.52, status: 'up' },
            ],
            arraySpeedo: [],
            data: [],
            newData: [],
            dataPayload: this.props.dataPayload,
            selectIndex: null,
            loading: false
        }
    }

    componentDidMount() {
        // console.log()
        console.log(this.state.dataPayload)
        let arrOverAll = []
        let newData = []
        let totalOverAll = 0
        this.setState({loading: true})
        this.olahDataChart()
        if (this.state.data.length > 0) {
            this.state.data.map((item,index) => {
                if(item.parent == null || item.parent == 'null') {
                    arrOverAll.push(item)
                } else {
                    totalOverAll += 
                        this.state.dataPayload.month.month_id == 1? Number(item.month1 == null? 0 : item.month1) :
                        this.state.dataPayload.month.month_id == 2? Number(item.month2 == null? 0 : item.month2) :
                        this.state.dataPayload.month.month_id == 3? Number(item.month3 == null? 0 : item.month3) :
                        this.state.dataPayload.month.month_id == 4? Number(item.month4 == null? 0 : item.month4) :
                        this.state.dataPayload.month.month_id == 5? Number(item.month5 == null? 0 : item.month5) :
                        this.state.dataPayload.month.month_id == 6? Number(item.month6 == null? 0 : item.month6) :
                        this.state.dataPayload.month.month_id == 7? Number(item.month7 == null? 0 : item.month7) :
                        this.state.dataPayload.month.month_id == 8? Number(item.month8 == null? 0 : item.month8) :
                        this.state.dataPayload.month.month_id == 9? Number(item.month9 == null? 0 : item.month9) :
                        this.state.dataPayload.month.month_id == 10? Number(item.month10 == null? 0 : item.month10) :
                        this.state.dataPayload.month.month_id == 11? Number(item.month11 == null? 0 : item.month11) : 
                        Number(item.month12 == null? 0 : item.month12) 
                }
            })
            
            let indexFinancial = arrOverAll.findIndex((val) => String(val.item_name).toLocaleLowerCase().includes('financial'))
            let indexCust = arrOverAll.findIndex((val) => String(val.item_name).toLocaleLowerCase().includes('customer'))
            let indexInternal = arrOverAll.findIndex((val) => String(val.item_name).toLocaleLowerCase().includes('internal'))
            let indexLearn = arrOverAll.findIndex((val) => String(val.item_name).toLocaleLowerCase().includes('learn'))
            let arrFinancial = []
            let arrCust = []
            let arrInternal = []
            let arrLearn = []

            console.log(indexFinancial)
            console.log(indexCust)
            console.log(indexInternal)
            console.log(indexLearn)

            if (indexFinancial != -1) {
                arrFinancial = this.state.data.filter((val) => val.parent == arrOverAll[indexFinancial].item_report_id)
            }

            if (indexCust != -1) {
                arrCust = this.state.data.filter((val) => val.parent == arrOverAll[indexCust].item_report_id)
            }

            if (indexInternal != -1) {
                arrInternal = this.state.data.filter((val) => val.parent == arrOverAll[indexInternal].item_report_id)
            }

            if (indexLearn != -1) {
                arrLearn = this.state.data.filter((val) => val.parent == arrOverAll[indexLearn].item_report_id)
            }
            
            console.log(totalOverAll)
            console.log(arrOverAll)
            console.log(arrFinancial)
            console.log(arrCust)
            console.log(arrInternal)
            console.log(arrLearn)
        }
        
    }

    olahDataChart() {
        let arrayChart = []
        this.state.data.map((item,index) => {
            let arrayChildChart = []
            // if (item.parent != null) {
                item.month.map((items,indexs) => {
                    arrayChildChart.push({
                        x: indexs,
                        y: items.value == null? indexs : items.value
                    })
                })
                arrayChart.push({
                    ...item, 
                    arrayChildChart: [{
                        color: "steelblue",
                        points: arrayChildChart
                    }]
                })
            // } else {
            //     arrayChart.push(item)
            // }
        })
        console.log(arrayChart)
        let arrayDataParent = arrayChart.filter((val) => val.parent == null || val.parent == 'null')
        let arrayDataChild = arrayChart.filter((val) => val.parent != null || val.parent != 'null')
        let arraySpeedo = []
        this.setState({newData: arrayChart}, () => {
            arrayDataParent.map((item,index) => {
                // console.log(arrayDataChild.filter((val) => val.parent == item.item_report_id))
                if (index == 0) {
                    arraySpeedo.push({
                        company_id: item.company_id,
                        decprev: item.decprev,
                        id: 99,
                        item_name: "Overall",
                        item_report_id: 9999,
                        arrayChildChart: [],
                        child: arrayDataChild,
                        month: item.month
                    })
                }
                arraySpeedo.push({
                    ...item, child: arrayDataChild.filter((val) => val.parent == item.item_report_id)
                })
            })

            console.log(arraySpeedo)
            arraySpeedo.map((item,index) => {
                if (item.id != 99) {
                    let indexID = arraySpeedo.findIndex((val) => item.item_report_id == val.item_report_id)
                    let indexMonthIDParent = item.month.findIndex((val) => val.name == `month${this.state.dataPayload.month.month_id}`)
                    let total = 0
                    item.child.map((items,indexs) => {
                        let specMonth = items.month.filter((val) => val.name == `month${this.state.dataPayload.month.month_id}`)
                        total += Number(specMonth[0].value)
                    })
                    arraySpeedo[indexID].month[indexMonthIDParent].value = total
                }
            })
            
            
            let totalOverAll = 0
            
            // arraySpeedo.map((item,index) => {
            //     let indexMonthIDParent = item.month.findIndex((val) => val.name == `month${this.state.dataPayload.month.month_id}`)
            //     if (item.id != 99) {
            //         totalOverAll += item.month[indexMonthIDParent].value
            //     }
            // })

            // let indexOverall = arraySpeedo.findIndex((val) => val.id == 99)
            // let indexMonthIDParent = arraySpeedo[indexOverall].month.findIndex((val) => val.name == `month${this.state.dataPayload.month.month_id}`)
            // arraySpeedo[indexOverall].month[indexMonthIDParent].value = totalOverAll

            console.log('skl', totalOverAll)
            console.log('part2', arraySpeedo)

            this.setState({arraySpeedo, loading: false})
            // arraySpeedo.map((item,index) => {
            //     if (index == 0) {
                    
            //         arraySpeedoNew.push(item)
            //     } else {
            //         arraySpeedoNew.push(item)
            //     }
            // })
        })
    }

    handleValueChild(item) {
        let data = this.state.newData.filter((val) => val.parent != null)
        let indexID = data.findIndex((val) => val.item_name == item.item_name)
        let indexMonthID = data[indexID].month.findIndex((val) => val.name == `month${this.state.dataPayload.month.month_id}`)
        return data[indexID].month[indexMonthID].value == null? 0 : data[indexID].month[indexMonthID].value
    }
    
    handleValueSpeedo(item) {
        let indexMonthID = item.month.findIndex((val) => val.name == `month${this.state.dataPayload.month.month_id}`)
        return item.month[indexMonthID].value
    }

    render() {
        let { selectIndex } = this.state
        let yuk = [1,2,3]
        const data = [
            {
                color: "steelblue",
                points: [
                    { x: 1, y: 2 },
                    { x: 2, y: 1 },
                    { x: 3, y: 3 },
                    { x: 4, y: 2 },
                    { x: 5, y: 4 },
                    { x: 6, y: 5 },
                    { x: 7, y: 4 },
                ]
            }
        ];
        return (
            <div style={{ padding: 20 }}>
                <div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', flexFlow: 'wrap' }}>
                    {/* {!this.state.loading && this.state.arraySpeedo.map((item, index) => {
                        return (
                            <div style={{ padding: 10, backgroundColor: this.state.selectIndex === index ? '#6885a6' : '#fff', borderRadius: 6, paddingBottom: 20, margin: 10, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)' }} onClick={() => this.setState({ selectIndex: index }, () => console.log(item))}>
                                <span style={{ fontSize: '17px', color: this.state.selectIndex === index ? '#fff' : '#7e8085', maxWidth: 100}}>{item.item_name}</span>
                                <div style={{ backgroundColor: 'transparent', display: 'flex', marginTop: index === 0 ? 54 : 30, placeContent: 'center' }}>
                                    <div>
                                        {index != 0 ?
                                            <div>
                                                <span style={{ textAlign: 'center', fontSize: '24px', color: selectIndex === index ? "#fff" : '#4b4b4b' }}>{item.child.length}</span>
                                                <span style={{ textAlign: 'center', fontSize: '11px', color: selectIndex === index ? "#fff" : '#4b4b4b' }}>KPIs</span> </div> : null}
                                        <div style={{ backgroundColor: index === 2 ? "#7cd532" : index === 3 ? "#fcff00" : index === 4 ? "#00b440" : "#00b1f7", textAlign: 'center', width: 40, height: 21 }}>
                                            <Typography style={{ textAlign: 'center' }}>{item.rank}</Typography>
                                        </div>
                                    </div>
                                </div>
                                <ReactSpeedometer
                                    maxSegmentLabels={0}
                                    segmentColors={[
                                        index === 2 ? "#7cd532" : index === 3 ? "#fcff00" : index === 4 ? "#00b440" : "#00b1f7",
                                        "#d8d8d8"
                                    ]}
                                    needleColor={this.state.selectIndex === index ? "#fff" : '#4b4b4b'}
                                    value={this.handleValueSpeedo(item)}
                                    maxValue={5}
                                    customSegmentStops={[0, this.handleValueSpeedo(item), 5]}
                                    width={200}
                                    height={140}
                                    ringWidth={25}
                                    textColor={selectIndex === index ? "#fff" : '#4b4b4b'}
                                />
                                <div style={{ backgroundColor: 'transparent', display: 'flex', marginTop: 20, placeContent: 'center' }}>
                                    <div style={{ textAlign: '-webkit-center' }}>
                                        {item.id === 99 ?
                                            <img src={Images.up} /> : <img src={Images.down} />}
                                        <Typography style={{ fontSize: 16, color: this.state.selectIndex === index ? '#fff' : '#4b4b4b' }}>vs Last Month</Typography>
                                    </div>
                                </div>
                            </div>
                        )
                    })} */}
                </div>
                <div style={{padding: 10, marginTop: 10,  display: 'flex', width: '100%' }}>
                    {/* <GridList cellHeight={250} cols={3}>
                        {this.state.newData.filter((val) => val.parent != null).map((tile) => (
                        <GridListTile key={tile} cols={1} style={{}}>
                            <div style={{ maxWidth: 566, height: 233, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)', padding: 20, marginLeft: 5, marginTop: 5, marginRight: 5, display: 'inline-grid'}}>
                                <div>
                                    <span style={{ fontSize: 17 }}>{titleCase(tile.item_name)}</span>
                                    <Typography style={{ fontSize: 24, fontWeight: 'bold' }}><NumberFormat value={this.handleValueChild(tile)} displayType={'text'} thousandSeparator={true} prefix={'Rp. '}/></Typography>
                                    <Typography style={{ fontSize: 16, fontWeight: 'bold' }}>In IDR mn</Typography>
                                </div>
                                <LineChart
                                    width={400}
                                    height={50}
                                    data={tile.arrayChildChart}
                                    yMin={0}
                                    yMax={10}
                                    hideXAxis={true}
                                    hideYAxis={true}
                                    hideXLabel={true}
                                    hideYLabel={true}
                                />
                            </div>
                        </GridListTile>
                        ))}
                    </GridList> */}
                </div>
                
                {/* <div style={{ width: 566, height: 233, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)', padding: 20, justifyContent: 'space-between', display: 'grid', margin: 10 }}>
                        <div>
                            <span style={{ fontSize: 17 }}>YTD Revenue</span>
                            <Typography style={{ fontSize: 24, fontWeight: 'bold' }}>1,016,489.78</Typography>
                            <Typography style={{ fontSize: 16, fontWeight: 'bold' }}>In IDR mn</Typography>
                        </div>
                        <LineChart
                            width={400}
                            height={50}
                            data={data}
                            yMin={0}
                            yMax={10}
                            hideXAxis={true}
                            hideYAxis={true}
                            hideXLabel={true}
                            hideYLabel={true}
                        />
                    </div> */}
                </div>
        )
    }
}