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': '
LLDIKTI Wilayah I
', 'ID_ss': '
LLDIKTI Wilayah II
', 'ID_la': '
LLDIKTI Wilayah II
', 'ID_be': '
LLDIKTI Wilayah II
', 'ID_bb': '
LLDIKTI Wilayah II
', 'ID_jk': '
LLDIKTI Wilayah III
', 'ID_jb': '
LLDIKTI Wilayah IV
', 'ID_bt': '
LLDIKTI Wilayah IV
', 'ID_yo': '
LLDIKTI Wilayah V
', 'ID_jt': '
LLDIKTI Wilayah VI
', 'ID_jl': '
LLDIKTI Wilayah VII
', 'ID_ba': '
LLDIKTI Wilayah VIII
', 'ID_nb': '
LLDIKTI Wilayah VIII
', 'ID_sg': '
LLDIKTI Wilayah IX
', 'ID_sn': '
LLDIKTI Wilayah IX
', 'ID_sr': '
LLDIKTI Wilayah IX
', 'ID_sb': '
LLDIKTI Wilayah X
', 'ID_ri': '
LLDIKTI Wilayah X
', 'ID_kr': '
LLDIKTI Wilayah X
', 'ID_ja': '
LLDIKTI Wilayah X
', 'ID_ks': '
LLDIKTI Wilayah XI
', 'ID_kb': '
LLDIKTI Wilayah XI
', 'ID_ki': '
LLDIKTI Wilayah XI
', 'ID_kt': '
LLDIKTI Wilayah XI
', 'ID_ku': '
LLDIKTI Wilayah XI
', 'ID_ma': '
LLDIKTI Wilayah XII
', 'ID_mu': '
LLDIKTI Wilayah XII
', 'ID_ac': '
LLDIKTI Wilayah XIII
', 'ID_pa': '
LLDIKTI Wilayah XIV
', 'ID_pb': '
LLDIKTI Wilayah XIV
', 'ID_nt': '
LLDIKTI Wilayah XV
', 'ID_go': '
LLDIKTI Wilayah XVI
', 'ID_st': '
LLDIKTI Wilayah XVI
', 'ID_sa': '
LLDIKTI Wilayah XVI
', } class Maps extends Component { state = { LLDIKTI: { 'ID_su': '
LLDIKTI Wilayah I
', 'ID_ss': '
LLDIKTI Wilayah II
', 'ID_la': '
LLDIKTI Wilayah II
', 'ID_be': '
LLDIKTI Wilayah II
', 'ID_bb': '
LLDIKTI Wilayah II
', 'ID_jk': '
LLDIKTI Wilayah III
', 'ID_jb': '
LLDIKTI Wilayah IV
', 'ID_bt': '
LLDIKTI Wilayah IV
', 'ID_yo': '
LLDIKTI Wilayah V
', 'ID_jt': '
LLDIKTI Wilayah VI
', 'ID_jl': '
LLDIKTI Wilayah VII
', 'ID_ba': '
LLDIKTI Wilayah VIII
', 'ID_nb': '
LLDIKTI Wilayah VIII
', 'ID_sg': '
LLDIKTI Wilayah IX
', 'ID_sn': '
LLDIKTI Wilayah IX
', 'ID_sr': '
LLDIKTI Wilayah IX
', 'ID_sb': '
LLDIKTI Wilayah X
', 'ID_ri': '
LLDIKTI Wilayah X
', 'ID_kr': '
LLDIKTI Wilayah X
', 'ID_ja': '
LLDIKTI Wilayah X
', 'ID_ks': '
LLDIKTI Wilayah XI
', 'ID_kb': '
LLDIKTI Wilayah XI
', 'ID_ki': '
LLDIKTI Wilayah XI
', 'ID_kt': '
LLDIKTI Wilayah XI
', 'ID_ku': '
LLDIKTI Wilayah XI
', 'ID_ma': '
LLDIKTI Wilayah XII
', 'ID_mu': '
LLDIKTI Wilayah XII
', 'ID_ac': '
LLDIKTI Wilayah XIII
', 'ID_pa': '
LLDIKTI Wilayah XIV
', 'ID_pb': '
LLDIKTI Wilayah XIV
', 'ID_nt': '
LLDIKTI Wilayah XV
', 'ID_go': '
LLDIKTI Wilayah XVI
', 'ID_st': '
LLDIKTI Wilayah XVI
', 'ID_sa': '
LLDIKTI Wilayah XVI
', }, 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 (
Peta Geografis Wilayah LLDikti
); } } export default Maps;