menu riwayat Maps v 0.1

components/Maps/VectorMap.js

@@ -28,6 +28,7 @@ class VectorMap extends Component {
         require('ika.jvectormap/jquery-jvectormap-world-mill-en.js');
         require('ika.jvectormap/jquery-jvectormap-us-mill-en.js');
         require('ika.jvectormap/jquery-jvectormap-1.2.2.css');
+        require('@/components/Maps/jquery-jvectormap.id.js');
 
         window.requestAnimationFrame(() => this.drawMap());
 
@@ -48,7 +49,7 @@ class VectorMap extends Component {
 
     render() {
         return (
-            <div ref={this.setRef} style={{height: this.props.height}}/>
+            <div ref={this.setRef} style={{ height: this.props.height }} />
         )
     }
 }

components/Riwayat/Maps.js

@@ -0,0 +1,176 @@
+import React, { Component } from 'react';
+import ContentWrapper from '@/components/Layout/ContentWrapper';
+
+import VectorMap from '@/components/Maps/VectorMap';
+import { Container, Row, Col, Card, CardHeader, CardBody } from "reactstrap";
+
+const defaultColors = {
+    markerColor: '#f20226',
+    bgColor: 'transparent',
+    scaleColors: ['#3E3A8E'],
+    regionFill: '#bbbec6'
+};
+
+const RegionValues = {
+    'ID_su': 11100,
+    'ID_su': 111,
+    'ID_ss': 13131,
+    'ID_la': 3131,
+    'ID_be': 313,
+    'ID_bb': 3131,
+    'ID_jk': 2212,
+    'ID_jb': 99,
+    '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': '<h4>LLDIKTI Wilayah II</h4>',
+    'ID_la': '<h4>LLDIKTI Wilayah II</h4>',
+    'ID_be': '<h4>LLDIKTI Wilayah II</h4>',
+    'ID_bb': '<h4>LLDIKTI Wilayah II</h4>',
+    'ID_jk': '<h4>LLDIKTI Wilayah III</h4>',
+    'ID_jb': '<h4>LLDIKTI Wilayah IV</h4>',
+    'ID_bt': '<h4>LLDIKTI Wilayah IV</h4>',
+    'ID_yo': '<h4>LLDIKTI Wilayah V</h4>',
+    'ID_jt': '<h4>LLDIKTI Wilayah VI</h4>',
+    'ID_jl': '<h4>LLDIKTI Wilayah VII</h4>',
+    'ID_ba': '<h4>LLDIKTI Wilayah VIII</h4>',
+    'ID_nb': '<h4>LLDIKTI Wilayah VIII</h4>',
+    'ID_sg': '<h4>LLDIKTI Wilayah IX</h4>',
+    'ID_sn': '<h4>LLDIKTI Wilayah IX</h4>',
+    'ID_sr': '<h4>LLDIKTI Wilayah IX</h4>',
+    'ID_sb': '<h4>LLDIKTI Wilayah X</h4>',
+    'ID_ri': '<h4>LLDIKTI Wilayah X</h4>',
+    'ID_kr': '<h4>LLDIKTI Wilayah X</h4>',
+    'ID_ja': '<h4>LLDIKTI Wilayah X</h4>',
+    'ID_ks': '<h4>LLDIKTI Wilayah XI</h4>',
+    'ID_kb': '<h4>LLDIKTI Wilayah XI</h4>',
+    'ID_ki': '<h4>LLDIKTI Wilayah XI</h4>',
+    'ID_kt': '<h4>LLDIKTI Wilayah XI</h4>',
+    'ID_ku': '<h4>LLDIKTI Wilayah XI</h4>',
+    'ID_ma': '<h4>LLDIKTI Wilayah XII</h4>',
+    'ID_mu': '<h4>LLDIKTI Wilayah XII</h4>',
+    'ID_ac': '<h4>LLDIKTI Wilayah XIII</h4>',
+    'ID_pa': '<h4>LLDIKTI Wilayah XIV</h4>',
+    'ID_pb': '<h4>LLDIKTI Wilayah XIV</h4>',
+    'ID_nt': '<h4>LLDIKTI Wilayah XV</h4>',
+    'ID_go': '<h4>LLDIKTI Wilayah XVI</h4>',
+    'ID_st': '<h4>LLDIKTI Wilayah XVI</h4>',
+    'ID_sa': '<h4>LLDIKTI Wilayah XVI</h4>',
+
+
+
+}
+
+class Maps extends Component {
+
+    state = {
+        series: {
+            regions: [{
+                values: RegionValues,
+                scale: defaultColors.scaleColors,
+                normalizeFunction: 'polynomial'
+            }]
+        },
+        markers: [
+
+            // { latLng: [0.293347, 101.706825], name: 'aceh' },
+            // { latLng: [4.695135, 96.749397], name: 'ID_ac' },
+            // { latLng: [-0.52, 166.93], name: 'Nauru' },
+            // { latLng: [-8.51, 179.21], name: 'Tuvalu' },
+            // { latLng: [7.11, 171.06], name: 'Marshall Islands' },
+            // { latLng: [17.3, -62.73], name: 'Saint Kitts and Nevis' },
+            // { latLng: [3.2, 73.22], name: 'Maldives' },
+            // { latLng: [35.88, 14.5], name: 'Malta' },
+            // { latLng: [41.0, -71.06], name: 'New England' },
+            // { latLng: [12.05, -61.75], name: 'Grenada' },
+            // { latLng: [13.16, -59.55], name: 'Barbados' },
+            // { latLng: [17.11, -61.85], name: 'Antigua and Barbuda' },
+            // { latLng: [-4.61, 55.45], name: 'Seychelles' },
+            // { latLng: [7.35, 134.46], name: 'Palau' },
+            // { latLng: [42.5, 1.51], name: 'Andorra' }
+        ],
+        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.8
+                },
+                selected: {
+                    fill: 'blue'
+                },
+                selectedHover: {}
+            },
+            focusOn: {
+                x: 0.4,
+                y: 0.6,
+                scale: 1
+            },
+            markerStyle: {
+                initial: {
+                    fill: defaultColors.markerColor,
+                    stroke: defaultColors.markerColor
+                }
+            },
+            onRegionLabelShow: (e, el, code) => {
+                if (RegionValues[code])
+                    el.html(LLDIKTI[code] + el.html() + ' : ' + RegionValues[code] + ' pelaporan');
+            }
+        }
+    }
+
+    render() {
+        return (
+            <Card className="card-default">
+                <CardBody>
+                    <VectorMap height="370px" 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;

package-lock.json

@@ -1471,6 +1471,139 @@
         "commander": "^2.15.1"
       }
     },
+    "@emotion/babel-plugin": {
+      "version": "11.9.5",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.9.5.tgz",
+      "integrity": "sha512-n+9y6TSsvAsOc0hXmdVtqgU6B+ils+zrzTZGg1aV2BkZtBbL7DiasLSpu3fUFwXOkYm63j7+649yb+HhyZxYSA==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/plugin-syntax-jsx": "^7.17.12",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.5",
+        "@emotion/serialize": "^1.0.2",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.0.13"
+      },
+      "dependencies": {
+        "@babel/helper-module-imports": {
+          "version": "7.18.6",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz",
+          "integrity": "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==",
+          "requires": {
+            "@babel/types": "^7.18.6"
+          }
+        },
+        "@babel/helper-plugin-utils": {
+          "version": "7.18.9",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.9.tgz",
+          "integrity": "sha512-aBXPT3bmtLryXaoJLyYPXPlSD4p1ld9aYeR+sJNOZjJJGiOpb+fKfh3NkcCu7J54nUJwCERPBExCCpyCOHnu/w=="
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.18.6",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz",
+          "integrity": "sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g=="
+        },
+        "@babel/plugin-syntax-jsx": {
+          "version": "7.18.6",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz",
+          "integrity": "sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.18.6"
+          }
+        },
+        "@babel/runtime": {
+          "version": "7.18.9",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz",
+          "integrity": "sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "@babel/types": {
+          "version": "7.18.9",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.18.9.tgz",
+          "integrity": "sha512-WwMLAg2MvJmt/rKEVQBBhIVffMmnilX4oe0sRe7iPOHIGsqpruFHHdrfj4O1CMMtgMtCU4oPafZjDPCRgO57Wg==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.18.6",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
+        "@emotion/memoize": {
+          "version": "0.7.5",
+          "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+          "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
+        },
+        "@emotion/serialize": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.4.tgz",
+          "integrity": "sha512-1JHamSpH8PIfFwAMryO2bNka+y8+KA5yga5Ocf2d7ZEiJjb7xlLW7aknBGZqJLajuLOvJ+72vN+IBSwPlXD1Pg==",
+          "requires": {
+            "@emotion/hash": "^0.8.0",
+            "@emotion/memoize": "^0.7.4",
+            "@emotion/unitless": "^0.7.5",
+            "@emotion/utils": "^1.0.0",
+            "csstype": "^3.0.2"
+          }
+        },
+        "@emotion/utils": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.1.0.tgz",
+          "integrity": "sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ=="
+        },
+        "babel-plugin-macros": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+          "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+          "requires": {
+            "@babel/runtime": "^7.12.5",
+            "cosmiconfig": "^7.0.0",
+            "resolve": "^1.19.0"
+          }
+        },
+        "cosmiconfig": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz",
+          "integrity": "sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==",
+          "requires": {
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.2.1",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.10.0"
+          }
+        },
+        "csstype": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
+          "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
+        },
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+        },
+        "regenerator-runtime": {
+          "version": "0.13.9",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+          "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
+        },
+        "stylis": {
+          "version": "4.0.13",
+          "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
+          "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
+        }
+      }
+    },
     "@emotion/cache": {
       "version": "10.0.29",
       "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
@@ -1510,11 +1643,79 @@
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
       "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
     },
+    "@emotion/is-prop-valid": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.3.tgz",
+      "integrity": "sha512-RFg04p6C+1uO19uG8N+vqanzKqiM9eeV1LDOG3bmkYmuOj7NbKNlFC/4EZq5gnwAIlcC/jOT24f8Td0iax2SXA==",
+      "requires": {
+        "@emotion/memoize": "^0.7.4"
+      }
+    },
     "@emotion/memoize": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
       "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
     },
+    "@emotion/react": {
+      "version": "11.9.3",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.9.3.tgz",
+      "integrity": "sha512-g9Q1GcTOlzOEjqwuLF/Zd9LC+4FljjPjDfxSM7KmEakm+hsHXk+bYZ2q+/hTJzr0OUNkujo72pXLQvXj6H+GJQ==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/babel-plugin": "^11.7.1",
+        "@emotion/cache": "^11.9.3",
+        "@emotion/serialize": "^1.0.4",
+        "@emotion/utils": "^1.1.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "dependencies": {
+        "@emotion/cache": {
+          "version": "11.9.3",
+          "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.9.3.tgz",
+          "integrity": "sha512-0dgkI/JKlCXa+lEXviaMtGBL0ynpx4osh7rjOXE71q9bIF8G+XhJgvi+wDu0B0IdCVx37BffiwXlN9I3UuzFvg==",
+          "requires": {
+            "@emotion/memoize": "^0.7.4",
+            "@emotion/sheet": "^1.1.1",
+            "@emotion/utils": "^1.0.0",
+            "@emotion/weak-memoize": "^0.2.5",
+            "stylis": "4.0.13"
+          }
+        },
+        "@emotion/serialize": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.4.tgz",
+          "integrity": "sha512-1JHamSpH8PIfFwAMryO2bNka+y8+KA5yga5Ocf2d7ZEiJjb7xlLW7aknBGZqJLajuLOvJ+72vN+IBSwPlXD1Pg==",
+          "requires": {
+            "@emotion/hash": "^0.8.0",
+            "@emotion/memoize": "^0.7.4",
+            "@emotion/unitless": "^0.7.5",
+            "@emotion/utils": "^1.0.0",
+            "csstype": "^3.0.2"
+          }
+        },
+        "@emotion/sheet": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.1.tgz",
+          "integrity": "sha512-J3YPccVRMiTZxYAY0IOq3kd+hUP8idY8Kz6B/Cyo+JuXq52Ek+zbPbSQUrVQp95aJ+lsAW7DPL1P2Z+U1jGkKA=="
+        },
+        "@emotion/utils": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.1.0.tgz",
+          "integrity": "sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ=="
+        },
+        "csstype": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
+          "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
+        },
+        "stylis": {
+          "version": "4.0.13",
+          "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
+          "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
+        }
+      }
+    },
     "@emotion/serialize": {
       "version": "0.11.16",
       "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
@@ -1532,6 +1733,42 @@
       "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz",
       "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA=="
     },
+    "@emotion/styled": {
+      "version": "11.9.3",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.9.3.tgz",
+      "integrity": "sha512-o3sBNwbtoVz9v7WB1/Y/AmXl69YHmei2mrVnK7JgyBJ//Rst5yqPZCecEJlMlJrFeWHp+ki/54uN265V2pEcXA==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/babel-plugin": "^11.7.1",
+        "@emotion/is-prop-valid": "^1.1.3",
+        "@emotion/serialize": "^1.0.4",
+        "@emotion/utils": "^1.1.0"
+      },
+      "dependencies": {
+        "@emotion/serialize": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.4.tgz",
+          "integrity": "sha512-1JHamSpH8PIfFwAMryO2bNka+y8+KA5yga5Ocf2d7ZEiJjb7xlLW7aknBGZqJLajuLOvJ+72vN+IBSwPlXD1Pg==",
+          "requires": {
+            "@emotion/hash": "^0.8.0",
+            "@emotion/memoize": "^0.7.4",
+            "@emotion/unitless": "^0.7.5",
+            "@emotion/utils": "^1.0.0",
+            "csstype": "^3.0.2"
+          }
+        },
+        "@emotion/utils": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.1.0.tgz",
+          "integrity": "sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ=="
+        },
+        "csstype": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
+          "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
+        }
+      }
+    },
     "@emotion/stylis": {
       "version": "0.8.5",
       "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
@@ -1856,6 +2093,11 @@
         }
       }
     },
+    "@south-paw/react-vector-maps": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@south-paw/react-vector-maps/-/react-vector-maps-3.1.0.tgz",
+      "integrity": "sha512-wjoSzfoMPynA+8owHD4lABYxxdqVhFwZ5k4CchlkSpmkqsQNtG8Mfj7C2+niG6p4Ouzu6rC3hQ2BRJRZDXolHw=="
+    },
     "@swc/helpers": {
       "version": "0.2.14",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.2.14.tgz",
@@ -1936,7 +2178,7 @@
     "@types/warning": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
-      "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI="
+      "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA=="
     },
     "@webassemblyjs/ast": {
       "version": "1.9.0",

package.json

@@ -15,6 +15,8 @@
   },
   "dependencies": {
     "@babel/polyfill": "7.2.5",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
     "@fortawesome/fontawesome-free": "5.15.3",
     "@fullcalendar/bootstrap": "4.4.2",
     "@fullcalendar/core": "^4.4.2",
@@ -24,6 +26,7 @@
     "@fullcalendar/react": "^4.4.2",
     "@fullcalendar/timegrid": "^4.4.2",
     "@react-google-maps/api": "1.13.0",
+    "@south-paw/react-vector-maps": "^3.1.0",
     "animate.css": "3.7.2",
     "apexcharts": "^3.35.4",
     "axios": "^0.25.0",

pages/app/riwayat/index.js

@@ -12,6 +12,8 @@ import Router from "next/router";
 import TableRiwayat from "@/components/Riwayat/TableRiwayat";
 import ChartData from "@/components/Riwayat/ChartData";
 import ChartDataBar from "@/components/Riwayat/ChartDataBar";
+import Maps from "@/components/Riwayat/Maps"
+
 
 class Riwayat extends Component {
   render() {
@@ -24,6 +26,9 @@ class Riwayat extends Component {
           <Col lg="6">
             <ChartDataBar />
           </Col>
+          <Col lg="6">
+            <Maps />
+          </Col>
           <Col lg="12">
             <ChartData />
             <TableRiwayat />