ptb-fe/components/Riwayat/Maps.js

import React, { Component } from 'react';
import ContentWrapper from '@/components/Layout/ContentWrapper';
import { jumlahLaporan } from "@/actions/pelaporan";
import VectorMap from '@/components/Maps/VectorMap';
import { Container, Row, Col, Card, CardHeader, CardBody } from "reactstrap";

const defaultColors = {
    markerColor: '#f20226',
    bgColor: 'transparent',
    scaleColors: ["#146804", "#ff0000"],
    regionFill: '#bbbec6'
};

const init = {
    'LLDIKTI I': 'ID_su',
    'LLDIKTI II': 'ID_ss',
    'LLDIKTI II': 'ID_la',
    'LLDIKTI II': 'ID_be',
    'LLDIKTI II': 'ID_bb',
    'LLDIKTI III': 'ID_jk',
    'LLDIKTI IV': 'ID_jb',
    'LLDIKTI IV': 'ID_bt',
    'LLDIKTI V': 'ID_yo',
    'LLDIKTI VI': 'ID_jt',
    'LLDIKTI VII': 'ID_jl',
    'LLDIKTI VIII': 'ID_ba',
    'LLDIKTI VIII': 'ID_nb',
    'LLDIKTI IX': 'ID_sg',
    'LLDIKTI IX': 'ID_sn',
    'LLDIKTI IX': 'ID_sr',
    'LLDIKTI X': 'ID_sb',
    'LLDIKTI X': 'ID_ri',
    'LLDIKTI X': 'ID_kr',
    'LLDIKTI X': 'ID_ja',
    'LLDIKTI XI': 'ID_ks',
    'LLDIKTI XI': 'ID_kb',
    'LLDIKTI XI': 'ID_ki',
    'LLDIKTI XI': 'ID_kt',
    'LLDIKTI XI': 'ID_ku',
    'LLDIKTI XII': 'ID_ma',
    'LLDIKTI XII': 'ID_mu',
    'LLDIKTI XIII': 'ID_ac',
    'LLDIKTI XIV': 'ID_pa',
    'LLDIKTI XIV': 'ID_pb',
    'LLDIKTI XV': 'ID_nt',
    'LLDIKTI XVI': 'ID_go',
    'LLDIKTI XVI': 'ID_st',
    'LLDIKTI XVI': 'ID_sa',
}
const RegionValues = {
    'ID_su': 0,
    'ID_su': 0,
    'ID_ss': 0,
    'ID_la': 0,
    'ID_be': 0,
    'ID_bb': 0,
    'ID_jk': 0,
    'ID_jb': 0,
    'ID_bt': 0,
    'ID_yo': 0,
    'ID_jt': 0,
    'ID_jl': 0,
    'ID_ba': 0,
    'ID_nb': 0,
    'ID_sg': 0,
    'ID_sn': 0,
    'ID_sr': 0,
    'ID_sb': 0,
    'ID_ri': 0,
    'ID_kr': 0,
    'ID_ja': 0,
    'ID_ks': 0,
    'ID_kb': 0,
    'ID_ki': 0,
    'ID_kt': 0,
    'ID_ku': 0,
    'ID_ma': 0,
    'ID_mu': 0,
    'ID_ac': 0,
    'ID_pa': 0,
    'ID_pb': 0,
    'ID_nt': 0,
    'ID_go': 0,
    'ID_st': 0,
    'ID_sa': 0,
}
// const RegionValues = {
//     'ID_su': 1,
//     'ID_su': 2,
//     'ID_ss': 3,
//     'ID_la': 4,
//     'ID_be': 5,
//     'ID_bb': 6,
//     'ID_jk': 2,
//     'ID_jb': 9,
//     'ID_bt': 9,
//     'ID_yo': 8,
//     'ID_jt': 5,
//     'ID_jl': 1,
//     'ID_ba': 2,
//     'ID_nb': 1,
//     'ID_sg': 1,
//     'ID_sn': 1,
//     'ID_sr': 1,
//     'ID_sb': 10,
//     'ID_ri': 10,
//     'ID_kr': 10,
//     'ID_ja': 10,
//     'ID_ks': 11,
//     'ID_kb': 11,
//     'ID_ki': 11,
//     'ID_kt': 11,
//     'ID_ku': 11,
//     'ID_ma': 12,
//     'ID_mu': 12,
//     'ID_ac': 13,
//     'ID_pa': 14,
//     'ID_pb': 14,
//     'ID_nt': 15,
//     'ID_go': 16,
//     'ID_st': 16,
//     'ID_sa': 16,
// }
const LLDIKTI = {
    'ID_su': '<h5>LLDIKTI Wilayah I</h5>',
    'ID_ss': '<h5>LLDIKTI Wilayah II</h5>',
    'ID_la': '<h5>LLDIKTI Wilayah II</h5>',
    'ID_be': '<h5>LLDIKTI Wilayah II</h5>',
    'ID_bb': '<h5>LLDIKTI Wilayah II</h5>',
    'ID_jk': '<h5>LLDIKTI Wilayah III</h5>',
    'ID_jb': '<h5>LLDIKTI Wilayah IV</h5>',
    'ID_bt': '<h5>LLDIKTI Wilayah IV</h5>',
    'ID_yo': '<h5>LLDIKTI Wilayah V</h5>',
    'ID_jt': '<h5>LLDIKTI Wilayah VI</h5>',
    'ID_jl': '<h5>LLDIKTI Wilayah VII</h5>',
    'ID_ba': '<h5>LLDIKTI Wilayah VIII</h5>',
    'ID_nb': '<h5>LLDIKTI Wilayah VIII</h5>',
    'ID_sg': '<h5>LLDIKTI Wilayah IX</h5>',
    'ID_sn': '<h5>LLDIKTI Wilayah IX</h5>',
    'ID_sr': '<h5>LLDIKTI Wilayah IX</h5>',
    'ID_sb': '<h5>LLDIKTI Wilayah X</h5>',
    'ID_ri': '<h5>LLDIKTI Wilayah X</h5>',
    'ID_kr': '<h5>LLDIKTI Wilayah X</h5>',
    'ID_ja': '<h5>LLDIKTI Wilayah X</h5>',
    'ID_ks': '<h5>LLDIKTI Wilayah XI</h5>',
    'ID_kb': '<h5>LLDIKTI Wilayah XI</h5>',
    'ID_ki': '<h5>LLDIKTI Wilayah XI</h5>',
    'ID_kt': '<h5>LLDIKTI Wilayah XI</h5>',
    'ID_ku': '<h5>LLDIKTI Wilayah XI</h5>',
    'ID_ma': '<h5>LLDIKTI Wilayah XII</h5>',
    'ID_mu': '<h5>LLDIKTI Wilayah XII</h5>',
    'ID_ac': '<h5>LLDIKTI Wilayah XIII</h5>',
    'ID_pa': '<h5>LLDIKTI Wilayah XIV</h5>',
    'ID_pb': '<h5>LLDIKTI Wilayah XIV</h5>',
    'ID_nt': '<h5>LLDIKTI Wilayah XV</h5>',
    'ID_go': '<h5>LLDIKTI Wilayah XVI</h5>',
    'ID_st': '<h5>LLDIKTI Wilayah XVI</h5>',
    'ID_sa': '<h5>LLDIKTI Wilayah XVI</h5>',
}

class Maps extends Component {

    state = {
        LLDIKTI: {
            'ID_su': '<h5>LLDIKTI Wilayah I</h5>',
            'ID_ss': '<h5>LLDIKTI Wilayah II</h5>',
            'ID_la': '<h5>LLDIKTI Wilayah II</h5>',
            'ID_be': '<h5>LLDIKTI Wilayah II</h5>',
            'ID_bb': '<h5>LLDIKTI Wilayah II</h5>',
            'ID_jk': '<h5>LLDIKTI Wilayah III</h5>',
            'ID_jb': '<h5>LLDIKTI Wilayah IV</h5>',
            'ID_bt': '<h5>LLDIKTI Wilayah IV</h5>',
            'ID_yo': '<h5>LLDIKTI Wilayah V</h5>',
            'ID_jt': '<h5>LLDIKTI Wilayah VI</h5>',
            'ID_jl': '<h5>LLDIKTI Wilayah VII</h5>',
            'ID_ba': '<h5>LLDIKTI Wilayah VIII</h5>',
            'ID_nb': '<h5>LLDIKTI Wilayah VIII</h5>',
            'ID_sg': '<h5>LLDIKTI Wilayah IX</h5>',
            'ID_sn': '<h5>LLDIKTI Wilayah IX</h5>',
            'ID_sr': '<h5>LLDIKTI Wilayah IX</h5>',
            'ID_sb': '<h5>LLDIKTI Wilayah X</h5>',
            'ID_ri': '<h5>LLDIKTI Wilayah X</h5>',
            'ID_kr': '<h5>LLDIKTI Wilayah X</h5>',
            'ID_ja': '<h5>LLDIKTI Wilayah X</h5>',
            'ID_ks': '<h5>LLDIKTI Wilayah XI</h5>',
            'ID_kb': '<h5>LLDIKTI Wilayah XI</h5>',
            'ID_ki': '<h5>LLDIKTI Wilayah XI</h5>',
            'ID_kt': '<h5>LLDIKTI Wilayah XI</h5>',
            'ID_ku': '<h5>LLDIKTI Wilayah XI</h5>',
            'ID_ma': '<h5>LLDIKTI Wilayah XII</h5>',
            'ID_mu': '<h5>LLDIKTI Wilayah XII</h5>',
            'ID_ac': '<h5>LLDIKTI Wilayah XIII</h5>',
            'ID_pa': '<h5>LLDIKTI Wilayah XIV</h5>',
            'ID_pb': '<h5>LLDIKTI Wilayah XIV</h5>',
            'ID_nt': '<h5>LLDIKTI Wilayah XV</h5>',
            'ID_go': '<h5>LLDIKTI Wilayah XVI</h5>',
            'ID_st': '<h5>LLDIKTI Wilayah XVI</h5>',
            'ID_sa': '<h5>LLDIKTI Wilayah XVI</h5>',
        },
        series: {
            regions: [{
                values: RegionValues,
                scale: defaultColors.scaleColors,
                normalizeFunction: 'polynomial'
            }]
        },
        markers: [


            // { latLng: [4.695135, 96.749397], name: 'ID_ac' },
        ],
        options: {
            map: 'id_ID',
            backgroundColor: defaultColors.bgColor,
            zoomMin: 1,
            zoomMax: 8,
            zoomOnScroll: true,
            regionStyle: {
                initial: {
                    'fill': defaultColors.regionFill,
                    'fill-opacity': 1,
                    'stroke': 'none',
                    'stroke-width': 1.5,
                    'stroke-opacity': 1
                },
                hover: {
                    'fill-opacity': 0.5,
                    cursor: 'pointer'
                },
                selected: {
                    fill: 'yellow'
                },
                selectedHover: {}
            },
            focusOn: {
                x: 0.4,
                y: 0.6,
                scale: 1
            },
            markerStyle: {
                initial: {
                    fill: defaultColors.markerColor,
                    stroke: defaultColors.markerColor
                }
            },
            onRegionLabelShow: (event, code, region) => {
                console.log(this.state.RegionValues, RegionValues[region])
                code.html(this.state.LLDIKTI[region] + code.html() + ' : ' + this.state.RegionValues[region] + ' pelaporan');


            }
        }
    }
    async componentDidMount() {
        const { token } = this.props;
        const data = await jumlahLaporan(token);
        const empat = "16"
        // console.log(data.data.filter(e => e._id.includes('LLDIKTI')))
        this.setState({
            RegionValues: {
                'ID_su': 0,
                'ID_su': 0,
                'ID_ss': 0,
                'ID_la': 0,
                'ID_be': 0,
                'ID_bb': 0,
                'ID_jk': 0,
                'ID_jb': 0,
                'ID_bt': 0,
                'ID_yo': 0,
                'ID_jt': 0,
                'ID_jl': 0,
                'ID_ba': 0,
                'ID_nb': 0,
                'ID_sg': 0,
                'ID_sn': 0,
                'ID_sr': 0,
                'ID_sb': 0,
                'ID_ri': 0,
                'ID_kr': 0,
                'ID_ja': 0,
                'ID_ks': 0,
                'ID_kb': 0,
                'ID_ki': 0,
                'ID_kt': 0,
                'ID_ku': 0,
                'ID_ma': 0,
                'ID_mu': 0,
                'ID_ac': 0,
                'ID_pa': 0,
                'ID_pb': 0,
                'ID_nt': 0,
                'ID_go': 0,
                'ID_st': 0,
                'ID_sa': 0,
            }
        })
        // this.setState({ RegionValues: data.data.filter(e => e._id.includes('LLDIKTI')) })


    }
    render() {
        return (
            <Card className="card-default">
                <CardBody>
                    <VectorMap height="395px" options={this.state.options} series={this.state.series} markers={this.state.markers} />
                </CardBody>
                <div align="center">
                    <span>Peta Geografis Wilayah LLDikti</span>
                </div>
            </Card>

        );
    }

}

export default Maps;