Map of product count

resources/js/Pages/IkeaRoot.vue

@@ -55,11 +55,10 @@ const gChartHeight = gChartWidth == 400 ? 250 : (screenWidth.value *65/100) - 20
 console.log('GCH',screenWidth.value, screenHeight.value, gChartWidth,gChartHeight);
 const options = {
   region: 150,
-  colorAxis: {
-    colors : ['blue','red'],
-    minValue: 0,
-    maxValue: 1 },
-  backgroundColor: '#e5e6f9',
+  colorAxis: {colors: ['#0000ff']},
+  backgroundColor: '#81d4fa',
+  datalessRegionColor: '#f8bbd0',
+  //defaultColor: '#f5f5f5',
   width:  gChartWidth,
   height: gChartHeight,
 };
@@ -84,11 +83,11 @@ const onHover = (data) => {
 };
 
 const chart_coutries = computed(() => {
-    let countries = [["Country"]];
+    let countries = [["Country", "Count"]];
 
     for (let i=0; i < settingsStore.ccountry_list.length ; i++) {
         if (settingsStore.ccountry_list[i].offline == (settingsStore.online ? 'N' : 'Y') || settingsStore.online == true)
-            countries.push([settingsStore.ccountry_list[i].name]);
+            countries.push([settingsStore.ccountry_list[i].name, settingsStore.products_count[settingsStore.ccountry_list[i].code] ]);
     }
     return countries;
 })
@@ -253,6 +252,13 @@ const fetch = async () => {
     settingsStore.settings = response2.data;
     console.log("SETTINGS=",settingsStore.settings);
 
+    const response3 = await axios.get(route("products.count"));
+    settingsStore.products_count = Object.fromEntries(
+      response3.data.map((c) => [c.country, c.cnt])
+    );
+    console.log("PC=",settingsStore.products_count);
+
+
   } catch (e) {
     const response = await Swal.fire({
       title: __("are you want to try again") + "?",

resources/js/settingsStore.js

@@ -10,6 +10,7 @@ export const settingsStore = reactive({
     currency: "EUR",
     online: false,
     ccountry_filter: [["Country"]],
+    products_count: {},
     ccountry_list: [],
     currencyCoef: 1.0,
     settings: {},