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';

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' },
            ],
            data: this.props.data,
            dataPayload: this.props.dataPayload,
            selectIndex: null
        }
    }

    componentDidMount() {
        console.log(this.props.data)
        console.log(this.state.dataPayload)
        let arrOverAll = []
        let totalOverAll = 0
        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)
        }
        
    }


    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.listDummy.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(this.state.data))}>
                                <span style={{ fontSize: '17px', color: this.state.selectIndex === index ? '#fff' : '#7e8085' }}>{item.judul}</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.kpi}</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={item.value}
                                    maxValue={5}
                                    customSegmentStops={[0, item.value, 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.status === "up" ?
                                            <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}>
                        {yuk.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 }}>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>
                        </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>
        )
    }
}