Fix3

lang/id.json

@@ -94,5 +94,6 @@
     "mac 10.15": "Mac 10.15",
     "are you want to try again": "are you want to try again",
     "referenceerror: ccount is not defined": "ReferenceError: ccount is not defined",
-    "referenceerror: currency_code is not defined": "ReferenceError: currency_code is not defined"
+    "referenceerror: currency_code is not defined": "ReferenceError: currency_code is not defined",
+    "referenceerror: assignment to undeclared variable acntry": "ReferenceError: assignment to undeclared variable aCntry"
 }

resources/js/Pages/IkeaRoot.vue

@@ -17,19 +17,11 @@ import axios from 'axios';
 import IkeaLogo from './Ikea/IkeaLogo.vue';
 const type = 'GeoChart';
 
-
 const ccountry = ref([]);
 const ccountry_filter = ref([['Country'],]);
 const ccountry_list = ref(['TEST']);
 const selected = ref(null);
 
-const data = [
-  ['Country', 'Popularity'],
-  ['Germany', 200],
-  ['France', 600],
-  ['RU', 700],
-];
-
 const options = {
   region: 150,
 
@@ -46,7 +38,9 @@ const fetch = async () => {
   try {
     const response = await axios.get(route('ccountry.active'))
     ccountry.value = response.data
-    ccountry_filter.value = ccountry.value.map((country) => [ country.country_name ]);
+    let aCntry = ccountry.value.map((country) => [country.country_name]);
+    ccountry_filter.value.push(...aCntry);
+    
     ccountry_list.value = ccountry.value.map((country) => country.country_name);
 
     console.log("TEST=", ccountry_filter.value, ccountry_list.value);
@@ -62,12 +56,17 @@ const fetch = async () => {
     response.isConfirmed && fetch()
   }
 }
+function selectCountry(item,id) {
+  let cCntry = [ ['Country'], ];
+  let aCntry = selected.value.map((country) => [country]);
   
+  ccountry_filter.value = cCntry;
+  ccountry_filter.value.push(...aCntry);
+}
 onMounted(fetch);
 </script>
 
 <template>
-
   <fwb-navbar>
     <template #logo>
       <fwb-navbar-logo alt="IKEA Price Craweler" :image-url="LogoIkea" link="#">
@@ -91,19 +90,16 @@ onMounted(fetch);
       </fwb-navbar-collapse>
     </template>
   </fwb-navbar>
-  
-  <GChart
-    :type="type"
-    :data="ccountry_filter"
-    :options="options"
-    :settings="chart_settings"
-  />
-
-   <multiselect
-      :multiple="true"
-      v-model="selected"
-      :options="ccountry_list">
+  <div class="m-3">
+  <div class="grid gap-2">
+    <div class="justify-center rounded-md border-black border-8 max-w-fit">
+      <GChart :type="type" :data="ccountry_filter" :options="options" :settings="chart_settings" />
+    </div>
+    <div class="max-">
+      <multiselect :multiple="true" v-model="selected" :options="ccountry_list" @select="selectCountry">
       </multiselect>
-
+    </div>
+  </div>
+  </div>
 </template>
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>