From 1a5502bc5d830bc7edbb5836b898d07948cfb0b5 Mon Sep 17 00:00:00 2001
From: X <astinx@hotmail.com>
Date: Sat, 5 Dec 2020 15:40:19 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=A0=E9=99=A4google=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                              |   2 -
 src/components/ReportMap.vue              | 654 ----------------------
 src/global-components/GoogleMapLoader.vue |  23 -
 src/global-components/index.js            |  12 -
 src/views/Dashboard.vue                   |  20 -
 yarn.lock                                 |  12 -
 6 files changed, 723 deletions(-)
 delete mode 100644 src/components/ReportMap.vue
 delete mode 100644 src/global-components/GoogleMapLoader.vue

diff --git a/package.json b/package.json
index aacb410..fe5667c 100644
--- a/package.json
+++ b/package.json
@@ -24,14 +24,12 @@
     "@ckeditor/ckeditor5-paragraph": "^21.0.0",
     "@ckeditor/ckeditor5-theme-lark": "^21.0.0",
     "@ckeditor/ckeditor5-vue": "^1.0.1",
-    "@google/markerclusterer": "^2.0.8",
     "@popperjs/core": "^2.4.4",
     "cash-dom": "^8.0.0",
     "chart.js": "^2.9.3",
     "core-js": "^3.6.5",
     "dayjs": "^1.8.29",
     "feather-icons": "^4.28.0",
-    "google-maps-api-loader": "^1.1.1",
     "highlight.js": "^10.1.1",
     "js-beautify": "^1.11.0",
     "litepicker": "^1.5.7",
diff --git a/src/components/ReportMap.vue b/src/components/ReportMap.vue
deleted file mode 100644
index 9b69e26..0000000
--- a/src/components/ReportMap.vue
+++ /dev/null
@@ -1,654 +0,0 @@
-<script>
-import GoogleMapLoader from "@/global-components/GoogleMapLoader";
-import MarkerClusterer from "@google/markerclusterer";
-
-export default {
-  extends: GoogleMapLoader,
-  data() {
-    return {
-      apiKey: "",
-      center: {
-        lat: -6.2425342,
-        lng: 106.8626478
-      }
-    };
-  },
-  computed: {
-    darkMode() {
-      return this.$store.state.main.darkMode;
-    }
-  },
-  watch: {
-    darkMode() {
-      this.init();
-    }
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    async init() {
-      let self = this;
-      var lightStyle = [
-        {
-          elementType: "geometry",
-          stylers: [
-            {
-              color: "#f5f5f5"
-            }
-          ]
-        },
-        {
-          elementType: "labels.icon",
-          stylers: [
-            {
-              visibility: "off"
-            }
-          ]
-        },
-        {
-          elementType: "labels.text.fill",
-          stylers: [
-            {
-              color: "#616161"
-            }
-          ]
-        },
-        {
-          elementType: "labels.text.stroke",
-          stylers: [
-            {
-              color: "#f5f5f5"
-            }
-          ]
-        },
-        {
-          featureType: "administrative.land_parcel",
-          elementType: "labels",
-          stylers: [
-            {
-              visibility: "off"
-            }
-          ]
-        },
-        {
-          featureType: "administrative.land_parcel",
-          elementType: "labels.text.fill",
-          stylers: [
-            {
-              color: "#bdbdbd"
-            }
-          ]
-        },
-        {
-          featureType: "poi",
-          elementType: "geometry",
-          stylers: [
-            {
-              color: "#eeeeee"
-            }
-          ]
-        },
-        {
-          featureType: "poi",
-          elementType: "labels.text",
-          stylers: [
-            {
-              visibility: "off"
-            }
-          ]
-        },
-        {
-          featureType: "poi",
-          elementType: "labels.text.fill",
-          stylers: [
-            {
-              color: "#757575"
-            }
-          ]
-        },
-        {
-          featureType: "poi.park",
-          elementType: "geometry",
-          stylers: [
-            {
-              color: "#e5e5e5"
-            }
-          ]
-        },
-        {
-          featureType: "poi.park",
-          elementType: "geometry.fill",
-          stylers: [
-            {
-              visibility: "off"
-            }
-          ]
-        },
-        {
-          featureType: "poi.park",
-          elementType: "labels.text.fill",
-          stylers: [
-            {
-              color: "#9e9e9e"
-            }
-          ]
-        },
-        {
-          featureType: "road",
-          elementType: "geometry",
-          stylers: [
-            {
-              color: "#ffffff"
-            }
-          ]
-        },
-        {
-          featureType: "road.arterial",
-          elementType: "labels",
-          stylers: [
-            {
-              visibility: "off"
-            }
-          ]
-        },
-        {
-          featureType: "road.arterial",
-          elementType: "labels.text.fill",
-          stylers: [
-            {
-              color: "#757575"
-            }
-          ]
-        },
-        {
-          featureType: "road.highway",
-          elementType: "geometry",
-          stylers: [
-            {
-              color: "#dadada"
-            }
-          ]
-        },
-        {
-          featureType: "road.highway",
-          elementType: "labels",
-          stylers: [
-            {
-              visibility: "off"
-            }
-          ]
-        },
-        {
-          featureType: "road.highway",
-          elementType: "labels.text.fill",
-          stylers: [
-            {
-              color: "#616161"
-            }
-          ]
-        },
-        {
-          featureType: "road.local",
-          stylers: [
-            {
-              visibility: "off"
-            }
-          ]
-        },
-        {
-          featureType: "road.local",
-          elementType: "labels",
-          stylers: [
-            {
-              visibility: "off"
-            }
-          ]
-        },
-        {
-          featureType: "road.local",
-          elementType: "labels.text.fill",
-          stylers: [
-            {
-              color: "#9e9e9e"
-            }
-          ]
-        },
-        {
-          featureType: "transit.line",
-          elementType: "geometry",
-          stylers: [
-            {
-              color: "#e5e5e5"
-            }
-          ]
-        },
-        {
-          featureType: "transit.line",
-          elementType: "geometry.fill",
-          stylers: [
-            {
-              visibility: "off"
-            }
-          ]
-        },
-        {
-          featureType: "transit.station",
-          elementType: "geometry",
-          stylers: [
-            {
-              color: "#eeeeee"
-            }
-          ]
-        },
-        {
-          featureType: "transit.station",
-          elementType: "geometry.fill",
-          stylers: [
-            {
-              visibility: "off"
-            }
-          ]
-        },
-        {
-          featureType: "water",
-          elementType: "geometry",
-          stylers: [
-            {
-              color: "#c9c9c9"
-            }
-          ]
-        },
-        {
-          featureType: "water",
-          elementType: "geometry.fill",
-          stylers: [
-            {
-              color: "#e0e3e8"
-            }
-          ]
-        },
-        {
-          featureType: "water",
-          elementType: "labels.text.fill",
-          stylers: [
-            {
-              color: "#9e9e9e"
-            }
-          ]
-        }
-      ];
-      var darkStyle = [
-        {
-          elementType: "geometry",
-          stylers: [
-            {
-              color: "#242f3e"
-            }
-          ]
-        },
-        {
-          elementType: "labels.text.fill",
-          stylers: [
-            {
-              color: "#746855"
-            }
-          ]
-        },
-        {
-          elementType: "labels.text.stroke",
-          stylers: [
-            {
-              color: "#242f3e"
-            }
-          ]
-        },
-        {
-          featureType: "administrative.land_parcel",
-          elementType: "labels",
-          stylers: [
-            {
-              visibility: "off"
-            }
-          ]
-        },
-        {
-          featureType: "administrative.land_parcel",
-          elementType: "labels.text.fill",
-          stylers: [
-            {
-              color: "#bdbdbd"
-            }
-          ]
-        },
-        {
-          featureType: "administrative.locality",
-          elementType: "labels.text.fill",
-          stylers: [
-            {
-              color: "#d59563"
-            }
-          ]
-        },
-        {
-          featureType: "poi",
-          elementType: "geometry",
-          stylers: [
-            {
-              color: "#eeeeee"
-            }
-          ]
-        },
-        {
-          featureType: "poi",
-          elementType: "labels.text",
-          stylers: [
-            {
-              visibility: "off"
-            }
-          ]
-        },
-        {
-          featureType: "poi",
-          elementType: "labels.text.fill",
-          stylers: [
-            {
-              color: "#d59563"
-            }
-          ]
-        },
-        {
-          featureType: "poi.park",
-          elementType: "geometry",
-          stylers: [
-            {
-              color: "#263c3f"
-            }
-          ]
-        },
-        {
-          featureType: "poi.park",
-          elementType: "geometry.fill",
-          stylers: [
-            {
-              visibility: "off"
-            }
-          ]
-        },
-        {
-          featureType: "poi.park",
-          elementType: "labels.text.fill",
-          stylers: [
-            {
-              color: "#6b9a76"
-            }
-          ]
-        },
-        {
-          featureType: "road",
-          elementType: "geometry",
-          stylers: [
-            {
-              color: "#38414e"
-            }
-          ]
-        },
-        {
-          featureType: "road",
-          elementType: "geometry.stroke",
-          stylers: [
-            {
-              color: "#212a37"
-            }
-          ]
-        },
-        {
-          featureType: "road",
-          elementType: "labels.text.fill",
-          stylers: [
-            {
-              color: "#9ca5b3"
-            }
-          ]
-        },
-        {
-          featureType: "road.arterial",
-          elementType: "labels",
-          stylers: [
-            {
-              visibility: "off"
-            }
-          ]
-        },
-        {
-          featureType: "road.arterial",
-          elementType: "labels.text.fill",
-          stylers: [
-            {
-              color: "#757575"
-            }
-          ]
-        },
-        {
-          featureType: "road.highway",
-          elementType: "geometry",
-          stylers: [
-            {
-              color: "#746855"
-            }
-          ]
-        },
-        {
-          featureType: "road.highway",
-          elementType: "geometry.stroke",
-          stylers: [
-            {
-              color: "#1f2835"
-            }
-          ]
-        },
-        {
-          featureType: "road.highway",
-          elementType: "labels",
-          stylers: [
-            {
-              visibility: "off"
-            }
-          ]
-        },
-        {
-          featureType: "road.highway",
-          elementType: "labels.text.fill",
-          stylers: [
-            {
-              color: "#f3d19c"
-            }
-          ]
-        },
-        {
-          featureType: "road.local",
-          stylers: [
-            {
-              visibility: "off"
-            }
-          ]
-        },
-        {
-          featureType: "road.local",
-          elementType: "labels",
-          stylers: [
-            {
-              visibility: "off"
-            }
-          ]
-        },
-        {
-          featureType: "transit",
-          elementType: "geometry",
-          stylers: [
-            {
-              color: "#2f3948"
-            }
-          ]
-        },
-        {
-          featureType: "transit.line",
-          elementType: "geometry",
-          stylers: [
-            {
-              color: "#e5e5e5"
-            }
-          ]
-        },
-        {
-          featureType: "transit.line",
-          elementType: "geometry.fill",
-          stylers: [
-            {
-              visibility: "off"
-            }
-          ]
-        },
-        {
-          featureType: "transit.station",
-          elementType: "geometry",
-          stylers: [
-            {
-              color: "#eeeeee"
-            }
-          ]
-        },
-        {
-          featureType: "transit.station",
-          elementType: "geometry.fill",
-          stylers: [
-            {
-              visibility: "off"
-            }
-          ]
-        },
-        {
-          featureType: "transit.station",
-          elementType: "labels.text.fill",
-          stylers: [
-            {
-              color: "#d59563"
-            }
-          ]
-        },
-        {
-          featureType: "water",
-          elementType: "geometry",
-          stylers: [
-            {
-              color: "#17263c"
-            }
-          ]
-        },
-        {
-          featureType: "water",
-          elementType: "geometry.fill",
-          stylers: [
-            {
-              color: "#171f29"
-            }
-          ]
-        },
-        {
-          featureType: "water",
-          elementType: "labels.text.fill",
-          stylers: [
-            {
-              color: "#515c6d"
-            }
-          ]
-        },
-        {
-          featureType: "water",
-          elementType: "labels.text.stroke",
-          stylers: [
-            {
-              color: "#17263c"
-            }
-          ]
-        }
-      ];
-      let { google, map } = await this.initializeMap({
-        apiKey: this.apiKey,
-        mapConfig(google) {
-          return {
-            zoom: 10,
-            styles: self.darkMode ? darkStyle : lightStyle,
-            zoomControl: true,
-            zoomControlOptions: {
-              position: google.maps.ControlPosition.LEFT_BOTTOM
-            },
-            streetViewControl: false,
-            center: self.center
-          };
-        }
-      });
-
-      let infoWindow = new google.maps.InfoWindow({
-        minWidth: 400,
-        maxWidth: 400
-      });
-
-      let location = require("@/assets/json/location.json");
-      new MarkerClusterer(
-        map,
-        location.map(function(markerElem) {
-          let point = new google.maps.LatLng(
-            parseFloat(markerElem.latitude),
-            parseFloat(markerElem.longitude)
-          );
-          let infowincontent = `
-            <div class="font-medium">
-              ${markerElem.name}
-            </div>
-            <div class="mt-1 text-gray-600">
-              Latitude: ${markerElem.latitude}, Longitude: ${markerElem.longitude}
-            </div>`;
-          let marker = new google.maps.Marker({
-            map: map,
-            position: point,
-            icon: {
-              url: require("@/assets/images/map-marker.png")
-            }
-          });
-
-          google.maps.event.addListener(marker, "click", function() {
-            infoWindow.setContent(infowincontent);
-            google.maps.event.addListener(infoWindow, "domready", function() {
-              cash(".arrow_box")
-                .closest(".gm-style-iw-d")
-                .removeAttr("style");
-              cash(".arrow_box")
-                .closest(".gm-style-iw-d")
-                .attr("style", "overflow:visible");
-              cash(".arrow_box")
-                .closest(".gm-style-iw-d")
-                .parent()
-                .removeAttr("style");
-            });
-
-            infoWindow.open(map, marker);
-          });
-          return marker;
-        }),
-        {
-          styles: [
-            {
-              width: 51,
-              height: 50,
-              textColor: "white",
-              url: require("@/assets/images/map-marker-region.png"),
-              anchor: [0, 0]
-            }
-          ]
-        }
-      );
-    }
-  }
-};
-</script>
diff --git a/src/global-components/GoogleMapLoader.vue b/src/global-components/GoogleMapLoader.vue
deleted file mode 100644
index 32f36a7..0000000
--- a/src/global-components/GoogleMapLoader.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <div ref="googleMap"></div>
-</template>
-
-<script>
-import GoogleMapsApiLoader from "google-maps-api-loader";
-
-export default {
-  methods: {
-    async initializeMap(config) {
-      const google = await GoogleMapsApiLoader({
-        apiKey: config.apiKey
-      });
-      const mapContainer = this.$refs.googleMap;
-      const map = new google.maps.Map(mapContainer, config.mapConfig(google));
-      return {
-        map: map,
-        google: google
-      };
-    }
-  }
-};
-</script>
diff --git a/src/global-components/index.js b/src/global-components/index.js
index 0550b93..a32af9f 100644
--- a/src/global-components/index.js
+++ b/src/global-components/index.js
@@ -1,22 +1,10 @@
 import Vue from "vue";
-import "./Highlight";
-import "./LineChart";
-import "./DonutChart";
-import "./BarChart";
-import "./PieChart";
-import "./GoogleMapLoader";
-import "./LitePicker";
-import "./Tippy";
-import "./TippyContent";
-import "./TailSelect";
-import "./LoadingIcon";
 
 Vue.component("Highlight", () => import("./Highlight"));
 Vue.component("LineChart", () => import("./LineChart"));
 Vue.component("DonutChart", () => import("./DonutChart"));
 Vue.component("BarChart", () => import("./BarChart"));
 Vue.component("PieChart", () => import("./PieChart"));
-Vue.component("GoogleMapLoader", () => import("./GoogleMapLoader"));
 Vue.component("LitePicker", () => import("./LitePicker"));
 Vue.component("Tippy", () => import("./Tippy"));
 Vue.component("TippyContent", () => import("./TippyContent"));
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 642d16c..9d724cb 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -188,7 +188,6 @@
             </div>
           </div>
           <div class="report-chart">
-            <ReportLineChart :height="273" class="mt-6" />
           </div>
         </div>
       </div>
@@ -202,7 +201,6 @@
           >
         </div>
         <div class="intro-y box p-5 mt-5">
-          <ReportPieChart :height="210" class="mt-3" />
           <div class="mt-8">
             <div class="flex items-center">
               <div class="w-2 h-2 bg-theme-11 rounded-full mr-3"></div>
@@ -241,7 +239,6 @@
           >
         </div>
         <div class="intro-y box p-5 mt-5">
-          <ReportDonutChart :height="210" class="mt-3" />
           <div class="mt-8">
             <div class="flex items-center">
               <div class="w-2 h-2 bg-theme-11 rounded-full mr-3"></div>
@@ -293,7 +290,6 @@
             250 Official stores in 21 countries, click the marker to see
             location details.
           </div>
-          <ReportMap class="report-maps mt-5 bg-gray-200 rounded-md" />
         </div>
       </div>
       <!-- END: Official Store -->
@@ -348,7 +344,6 @@
                 <div class="text-gray-600 mt-1">300 Sales</div>
               </div>
               <div class="flex-none ml-auto relative">
-                <ReportDonutChart1 :width="90" :height="90" />
                 <div
                   class="font-medium absolute w-full h-full flex items-center justify-center top-0 left-0"
                 >
@@ -369,7 +364,6 @@
               </div>
             </div>
             <div class="mt-4">
-              <SimpleLineChart1 :height="60" class="-ml-1" />
             </div>
           </div>
         </div>
@@ -381,7 +375,6 @@
                 <div class="text-gray-600 mt-1">1450 Products</div>
               </div>
               <div class="flex-none ml-auto relative">
-                <ReportDonutChart1 :width="90" :height="90" />
                 <div
                   class="font-medium absolute w-full h-full flex items-center justify-center top-0 left-0"
                 >
@@ -402,7 +395,6 @@
               </div>
             </div>
             <div class="mt-4">
-              <SimpleLineChart1 :height="60" class="-ml-1" />
             </div>
           </div>
         </div>
@@ -998,22 +990,10 @@
 </template>
 
 <script>
-import ReportLineChart from "@/components/ReportLineChart";
-import ReportDonutChart from "@/components/ReportDonutChart";
-import ReportPieChart from "@/components/ReportPieChart";
-import ReportMap from "@/components/ReportMap";
-import ReportDonutChart1 from "@/components/ReportDonutChart1";
-import SimpleLineChart1 from "@/components/SimpleLineChart1";
 import VueSlickCarousel from "vue-slick-carousel";
 
 export default {
   components: {
-    ReportLineChart,
-    ReportDonutChart,
-    ReportPieChart,
-    ReportMap,
-    ReportDonutChart1,
-    SimpleLineChart1,
     VueSlickCarousel
   },
   data() {
diff --git a/yarn.lock b/yarn.lock
index 751a675..e1eaf66 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1169,11 +1169,6 @@
     postcss "7.0.32"
     purgecss "^2.3.0"
 
-"@google/markerclusterer@^2.0.8":
-  version "2.0.9"
-  resolved "https://registry.yarnpkg.com/@google/markerclusterer/-/markerclusterer-2.0.9.tgz#04e50e1bd0ea90e7c21ae487e5890180ce9a5f83"
-  integrity sha512-MMOvRRZTe8MtfLmr+3GmpnvbQPvdta7DhLgeapm3NpdBGe7sr8Gt3TvR/2ckBHttzjKz/dGd4v+GPmM34cC0Sg==
-
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -4952,13 +4947,6 @@ globule@^1.0.0:
     lodash "~4.17.10"
     minimatch "~3.0.2"
 
-google-maps-api-loader@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/google-maps-api-loader/-/google-maps-api-loader-1.1.1.tgz#b600602451300521ba1b5d7493e7071d7931ac00"
-  integrity sha512-+bxumYl6WCxKDjygLFF2FxrNyKIB0QgWKFb+EZ6F5wt/MoU2cm/8se9uQ0o1nY7389F2qe6ocdpSFn1bKQAD5w==
-  dependencies:
-    es6-promise "^4.0.5"
-
 graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"