ExceutiveScoreboard.js

import React, { Component } from 'react'
import ReactSpeedometer from "react-d3-speedometer"
import { Paper, Typography } 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' },
            ],
            selectIndex: null
        }
    }
    render() {
        let { selectIndex } = this.state
        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 })}>
                                <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={{ 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>
        )
    }
}