From 1b526761348064871fb3636d8f23baf27bb1e7be Mon Sep 17 00:00:00 2001
From: LeonidShv <matembit1996@gmail.com>
Date: Tue, 20 Feb 2024 18:04:55 +0200
Subject: [PATCH 1/5] feat: add google charts, map page, clean code

---
 {pages/Dashboard/api => api}/environment.ts |  0
 api/index.ts                                |  5 ++++
 app/router.options.ts                       |  6 ++++
 components/VChart.vue                       |  4 +--
 package-lock.json                           |  9 ++++++
 package.json                                |  1 +
 pages/Dashboard/api/index.ts                |  5 ----
 pages/Dashboard/store/environment.ts        |  2 +-
 pages/Map/MapPage.vue                       | 33 +++++++++++++++++++++
 9 files changed, 57 insertions(+), 8 deletions(-)
 rename {pages/Dashboard/api => api}/environment.ts (100%)
 create mode 100644 api/index.ts
 delete mode 100644 pages/Dashboard/api/index.ts
 create mode 100644 pages/Map/MapPage.vue

diff --git a/pages/Dashboard/api/environment.ts b/api/environment.ts
similarity index 100%
rename from pages/Dashboard/api/environment.ts
rename to api/environment.ts
diff --git a/api/index.ts b/api/index.ts
new file mode 100644
index 0000000..96f58a0
--- /dev/null
+++ b/api/index.ts
@@ -0,0 +1,5 @@
+import environment from "@/api/environment";
+
+export default {
+  environment,
+};
diff --git a/app/router.options.ts b/app/router.options.ts
index 0fddeec..99ecf37 100644
--- a/app/router.options.ts
+++ b/app/router.options.ts
@@ -10,5 +10,11 @@ export default <RouterConfig>{
           (r) => r.default || r,
         ),
     },
+    {
+      name: "map",
+      path: "/map-pollution",
+      component: () =>
+        import("@/pages/Map/MapPage.vue").then((r) => r.default || r),
+    },
   ],
 };
diff --git a/components/VChart.vue b/components/VChart.vue
index 0128d7a..0dba61b 100644
--- a/components/VChart.vue
+++ b/components/VChart.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from "vue";
+import { onUpdated } from "vue";
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -49,7 +49,7 @@ interface Props {
   caption: string;
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   type: EChartType.Line,
   data: {},
   caption: "",
diff --git a/package-lock.json b/package-lock.json
index 1d766d9..51811a8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "element-plus": "^2.4.4",
         "pinia": "^2.1.7",
         "vue-chartjs": "^5.3.0",
+        "vue-google-charts": "^1.1.0",
         "vue3-lottie": "^3.2.0"
       },
       "devDependencies": {
@@ -14419,6 +14420,14 @@
         "eslint": ">=6.0.0"
       }
     },
+    "node_modules/vue-google-charts": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/vue-google-charts/-/vue-google-charts-1.1.0.tgz",
+      "integrity": "sha512-wGAgAynIIUKmP5eJUFlx69e8gjIDpyqHlVsvFyrnd2tGZk3a6FI83dRhdssxPyOc9y41+2QEfqUV9SsR+n6s5A==",
+      "peerDependencies": {
+        "vue": "^3.0.0-0 || ^2.6.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.2.5",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.5.tgz",
diff --git a/package.json b/package.json
index a8106d6..d705060 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "element-plus": "^2.4.4",
     "pinia": "^2.1.7",
     "vue-chartjs": "^5.3.0",
+    "vue-google-charts": "^1.1.0",
     "vue3-lottie": "^3.2.0"
   }
 }
diff --git a/pages/Dashboard/api/index.ts b/pages/Dashboard/api/index.ts
deleted file mode 100644
index 8ef401b..0000000
--- a/pages/Dashboard/api/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import environment from "@/pages/Dashboard/api/environment";
-
-export default {
-  environment,
-};
diff --git a/pages/Dashboard/store/environment.ts b/pages/Dashboard/store/environment.ts
index 1a76396..75e9810 100644
--- a/pages/Dashboard/store/environment.ts
+++ b/pages/Dashboard/store/environment.ts
@@ -1,7 +1,7 @@
 import { ref } from "vue";
 import { defineStore } from "pinia";
 import type { Ref } from "vue";
-import api from "@/pages/Dashboard/api";
+import api from "@/api";
 
 import type {
   IParamsEnvironment,
diff --git a/pages/Map/MapPage.vue b/pages/Map/MapPage.vue
new file mode 100644
index 0000000..b6266f7
--- /dev/null
+++ b/pages/Map/MapPage.vue
@@ -0,0 +1,33 @@
+<template>
+  <section>
+    <GChart
+      type="GeoChart"
+      :settings="{
+        packages: ['geochart'],
+      }"
+      :data="chartData"
+      :options="chartOptions"
+    />
+  </section>
+</template>
+
+<script setup>
+import { GChart } from "vue-google-charts";
+
+const chartData = ref([
+  ["Country", "Popularity"],
+  ["Germany", 2000],
+  ["United States", 3000],
+  ["Brazil", 4000],
+  ["Canada", 5000],
+  ["France", 600],
+  ["RU", 0],
+]);
+
+const chartOptions = ref({
+  chart: {
+    title: "Company Performance",
+    subtitle: "Sales, Expenses, and Profit: 2014-2017",
+  },
+});
+</script>

From d566cea411acf605bca3f59a23e4fcef70ce2c00 Mon Sep 17 00:00:00 2001
From: LeonidShv <matembit1996@gmail.com>
Date: Fri, 23 Feb 2024 14:28:06 +0200
Subject: [PATCH 2/5] draft commit

---
 components/VChart.vue                         |   6 +-
 components/VChartG.vue                        |  87 ++++++++
 interfaces/enums.ts                           |   7 +
 package-lock.json                             | 134 +++++++++++++
 package.json                                  |   1 +
 .../components/ThePiaChartAbsolute.vue        |   6 +-
 pages/Dashboard/composables/dashboard.ts      |  21 ++
 pages/Map/MapPage.vue                         |  39 ++--
 pages/Map/components/TheChartGeo.vue          |  22 +++
 pages/Map/components/TheMapChart.vue          | 186 ++++++++++++++++++
 pages/Map/store/environmentMap.ts             |  37 ++++
 11 files changed, 517 insertions(+), 29 deletions(-)
 create mode 100644 components/VChartG.vue
 create mode 100644 pages/Map/components/TheChartGeo.vue
 create mode 100644 pages/Map/components/TheMapChart.vue
 create mode 100644 pages/Map/store/environmentMap.ts

diff --git a/components/VChart.vue b/components/VChart.vue
index 5fefbc5..7331974 100644
--- a/components/VChart.vue
+++ b/components/VChart.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, onUpdated } from "vue";
 import { Vue3Lottie } from "vue3-lottie";
 import {
   Chart as ChartJS,
@@ -70,6 +70,10 @@ const props = withDefaults(defineProps<Props>(), {
   caption: "",
 });
 
+onUpdated(() => {
+  console.log(props.type, props.data);
+});
+
 const myStyles = ref({
   width: "100%",
   position: "relative",
diff --git a/components/VChartG.vue b/components/VChartG.vue
new file mode 100644
index 0000000..ea92f0e
--- /dev/null
+++ b/components/VChartG.vue
@@ -0,0 +1,87 @@
+<template>
+  <el-container v-loading="isLoading">
+    <figure>
+      <div class="chart">
+        <GChart
+          v-if="chartData.length"
+          :type="type"
+          :settings="settings"
+          :data="chartData"
+        />
+        <div v-else-if="showNoData" class="no-data">
+          <Vue3Lottie :animation-data="noData" :height="200" :width="200" />
+          <p class="no-data__text">No data</p>
+        </div>
+      </div>
+
+      <figcaption class="m-t-2">
+        {{ caption }}
+      </figcaption>
+    </figure>
+  </el-container>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { Vue3Lottie } from "vue3-lottie";
+import { GChart } from "vue-google-charts";
+
+import noData from "@/assets/animations/noData.json";
+
+import type { IChartPie, IChartDefault } from "@/interfaces/chart";
+import { EChartTypeG } from "@/interfaces/enums";
+
+interface Props {
+  isLoading: boolean;
+  type: EChartTypeG;
+  chartData: IChartPie | IChartDefault | any;
+  caption: string;
+  settings: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isLoading: false,
+  type: EChartTypeG.LineChart,
+  chartData: {},
+  caption: "",
+  settings: null,
+});
+
+const showNoData = computed(() => {
+  return !props.isLoading && !props.chartData.length;
+});
+</script>
+
+<style lang="scss" scoped>
+figcaption {
+  display: block;
+  color: var(--dark);
+}
+
+figure {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.chart {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.no-data {
+  width: 300px;
+  height: 230px;
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+}
+.no-data__text {
+  text-align: center;
+}
+</style>
diff --git a/interfaces/enums.ts b/interfaces/enums.ts
index 38d7215..3e2240e 100644
--- a/interfaces/enums.ts
+++ b/interfaces/enums.ts
@@ -4,6 +4,13 @@ export enum EChartType {
   Bar = "Bar",
 }
 
+export enum EChartTypeG {
+  GeoChart = "GeoChart",
+  LineChart = "LineChart",
+  PieChart = "PieChart",
+  ColumnChart = "ColumnChart",
+}
+
 export enum EDatePickerType {
   year = "year",
   date = "date",
diff --git a/package-lock.json b/package-lock.json
index 51811a8..bc0ea9e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@vueuse/core": "^10.7.2",
         "axios": "^1.6.3",
         "chart.js": "^4.4.1",
+        "chartjs-chart-geo": "^4.2.8",
         "element-plus": "^2.4.4",
         "pinia": "^2.1.7",
         "vue-chartjs": "^5.3.0",
@@ -3474,11 +3475,29 @@
         "node": "^16.14.0 || >=18.0.0"
       }
     },
+    "node_modules/@types/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-scale-chromatic": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.3.tgz",
+      "integrity": "sha512-laXM4+1o5ImZv3RpFAsTRn3TEkzqkytiOY0Dz0sq5cnd1dtNlk6sHLon4OvqaiJb28T0S/TdsBI3Sjsy+keJrw=="
+    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.14",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz",
+      "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg=="
+    },
     "node_modules/@types/http-proxy": {
       "version": "1.17.14",
       "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.14.tgz",
@@ -3540,6 +3559,23 @@
       "integrity": "sha512-/wdoPq1QqkSj9/QOeKkFquEuPzQbHTWAMPH/PaUMB+JuR31lXhlWXRZ52IpfDYVlDOUBvX09uBrPwxGT1hjNBg==",
       "dev": true
     },
+    "node_modules/@types/topojson-client": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/@types/topojson-client/-/topojson-client-3.1.4.tgz",
+      "integrity": "sha512-Ntf3ZSetMYy7z3PrVCvcqmdRoVhgKA9UKN0ZuuZf8Ts2kcyL4qK34IXBs6qO5fem62EK4k03PtkJPVoroVu4/w==",
+      "dependencies": {
+        "@types/geojson": "*",
+        "@types/topojson-specification": "*"
+      }
+    },
+    "node_modules/@types/topojson-specification": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/topojson-specification/-/topojson-specification-1.0.5.tgz",
+      "integrity": "sha512-C7KvcQh+C2nr6Y2Ub4YfgvWvWCgP2nOQMtfhlnwsRL4pYmmwzBS7HclGiS87eQfDOU/DLQpX6GEscviaz4yLIQ==",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.20",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
@@ -5048,6 +5084,25 @@
         "pnpm": ">=7"
       }
     },
+    "node_modules/chartjs-chart-geo": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/chartjs-chart-geo/-/chartjs-chart-geo-4.2.8.tgz",
+      "integrity": "sha512-pvPiY0056hyquQzgGCxu6q9UlqQjZJNTvn+a9Jy53VClEG3O6TE1TJ8qCqRiIOjhGHEd7jFvbUmYrzP6lkkeug==",
+      "dependencies": {
+        "@types/d3-geo": "^3.1.0",
+        "@types/d3-scale-chromatic": "^3.0.3",
+        "@types/topojson-client": "^3.1.4",
+        "d3-array": "^3.2.4",
+        "d3-color": "^3.1.0",
+        "d3-geo": "^3.1.0",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale-chromatic": "^3.0.0",
+        "topojson-client": "^3.1.0"
+      },
+      "peerDependencies": {
+        "chart.js": "^4.1.0"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -5576,6 +5631,59 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-JEo5HxXDdDYXCaWdwLRt79y7giK8SbhZJbFWXqbRTolCHFI5jRqteLzCsq51NKbUoX0PjBVSohxrx+NoOUujYA==",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz",
+      "integrity": "sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/dayjs": {
       "version": "1.11.10",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
@@ -7954,6 +8062,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/ioredis": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ioredis/-/ioredis-5.3.2.tgz",
@@ -12966,6 +13082,24 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/topojson-client": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/topojson-client/-/topojson-client-3.1.0.tgz",
+      "integrity": "sha512-605uxS6bcYxGXw9qi62XyrV6Q3xwbndjachmNxu8HWTtVPxZfEJN9fd/SZS1Q54Sn2y0TMyMxFj/cJINqGHrKw==",
+      "dependencies": {
+        "commander": "2"
+      },
+      "bin": {
+        "topo2geo": "bin/topo2geo",
+        "topomerge": "bin/topomerge",
+        "topoquantize": "bin/topoquantize"
+      }
+    },
+    "node_modules/topojson-client/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+    },
     "node_modules/totalist": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
diff --git a/package.json b/package.json
index d705060..8e974ab 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "@vueuse/core": "^10.7.2",
     "axios": "^1.6.3",
     "chart.js": "^4.4.1",
+    "chartjs-chart-geo": "^4.2.8",
     "element-plus": "^2.4.4",
     "pinia": "^2.1.7",
     "vue-chartjs": "^5.3.0",
diff --git a/pages/Dashboard/components/ThePiaChartAbsolute.vue b/pages/Dashboard/components/ThePiaChartAbsolute.vue
index 1083d9c..6a219c5 100644
--- a/pages/Dashboard/components/ThePiaChartAbsolute.vue
+++ b/pages/Dashboard/components/ThePiaChartAbsolute.vue
@@ -38,6 +38,10 @@
     </VFormItem>
   </VForm>
   <div class="pie-chart__wrapper d-flex">
+    <p>map</p>
+    <TheChartGeo :data="chartPie" />
+    <br />
+    <br />
     <VChart
       :data="chartPie"
       :type="EChartType.Pie"
@@ -59,7 +63,7 @@ import {
   EDatePickerSize,
 } from "@/interfaces/enums";
 import { useEnvironmentStore } from "@/pages/Dashboard/store/environment";
-
+import TheChartGeo from "@/pages/Map/components/TheChartGeo";
 const { getAreaStructure, getPieChartData } = useDashboard();
 
 const store = useEnvironmentStore();
diff --git a/pages/Dashboard/composables/dashboard.ts b/pages/Dashboard/composables/dashboard.ts
index 475f1cc..2307cbb 100644
--- a/pages/Dashboard/composables/dashboard.ts
+++ b/pages/Dashboard/composables/dashboard.ts
@@ -43,6 +43,26 @@ export function useDashboard() {
     return [{ data, backgroundColor, borderColor }];
   }
 
+  function getMapChartData(
+    dataSetsSeries: IDataSetsSeries,
+    structureSeries: IStructureSeries[],
+  ) {
+    const areaStructure = getAreaStructure(structureSeries);
+
+    const data = [["Country", "Element ton"]];
+    let index = 0;
+
+    for (const key in dataSetsSeries) {
+      const rest = Object.entries(dataSetsSeries[key].observations)
+        .sort((a, b) => Number(a[0]) - Number(b[0]))
+        .map((item) => Math.round(item[1][0] * tonsPerGGCoefficient));
+
+      data.push([areaStructure[index], rest[0]]);
+      index++;
+    }
+    return data;
+  }
+
   function getDefaultChartData(
     dataSetsSeries: IDataSetsSeries,
     structureSeries: IStructureSeries[],
@@ -72,5 +92,6 @@ export function useDashboard() {
     getAreaStructure,
     getPieChartData,
     getDefaultChartData,
+    getMapChartData,
   };
 }
diff --git a/pages/Map/MapPage.vue b/pages/Map/MapPage.vue
index b6266f7..eda64a8 100644
--- a/pages/Map/MapPage.vue
+++ b/pages/Map/MapPage.vue
@@ -1,33 +1,18 @@
 <template>
   <section>
-    <GChart
-      type="GeoChart"
-      :settings="{
-        packages: ['geochart'],
-      }"
-      :data="chartData"
-      :options="chartOptions"
-    />
+    <h2 class="m-b-1">Different countries | one element</h2>
+    <h3>Absolute values</h3>
+    <TheMapChart />
   </section>
 </template>
 
-<script setup>
-import { GChart } from "vue-google-charts";
-
-const chartData = ref([
-  ["Country", "Popularity"],
-  ["Germany", 2000],
-  ["United States", 3000],
-  ["Brazil", 4000],
-  ["Canada", 5000],
-  ["France", 600],
-  ["RU", 0],
-]);
-
-const chartOptions = ref({
-  chart: {
-    title: "Company Performance",
-    subtitle: "Sales, Expenses, and Profit: 2014-2017",
-  },
-});
+<script setup lang="ts">
+import TheMapChart from "@/pages/Map/components/TheMapChart.vue";
 </script>
+
+<style lang="scss" scoped>
+h3 {
+  font-size: 24px;
+  margin-bottom: 8px;
+}
+</style>
diff --git a/pages/Map/components/TheChartGeo.vue b/pages/Map/components/TheChartGeo.vue
new file mode 100644
index 0000000..9f8fafb
--- /dev/null
+++ b/pages/Map/components/TheChartGeo.vue
@@ -0,0 +1,22 @@
+<template>
+	<svg-map :map="Taiwan" />
+</template>
+
+<script>
+import { SvgMap } from "vue-svg-map";
+import Taiwan from "@svg-maps/taiwan";
+
+export default {
+	name: "MyMap",
+	components: {
+		SvgMap
+	},
+	data() {
+		return {
+			Taiwan
+		};
+	}
+};
+</script>
+
+<style src="vue-svg-map/dist/index.css"></style>
\ No newline at end of file
diff --git a/pages/Map/components/TheMapChart.vue b/pages/Map/components/TheMapChart.vue
new file mode 100644
index 0000000..aea225d
--- /dev/null
+++ b/pages/Map/components/TheMapChart.vue
@@ -0,0 +1,186 @@
+<template>
+  <VForm class="d-flex gap-1 m-b-1">
+    <VFormItem>
+      <VSelect
+        v-model="elementForPieRelativeChart"
+        :options="elements"
+        placeholder="Elements"
+        filterable
+        :isLoading="isLoading"
+        @change="modifyPieRelativeChartCriteria"
+      />
+    </VFormItem>
+
+    <VFormItem>
+      <VSelect
+        v-model="countriesForPieRelativeChart"
+        :options="countries"
+        filterable
+        placeholder="Countries"
+        multiple
+        :isLoading="isLoading"
+        @change="modifyPieRelativeChartCriteria"
+      />
+    </VFormItem>
+  </VForm>
+  <div class="d-flex gap-2 pie-chart__wrapper">
+    <TheChartGeo />
+    <!-- <VChartG
+      :type="EChartTypeG.GeoChart"
+      :settings="{
+        packages: ['geochart'],
+      }"
+      :chartData="chartData"
+    /> -->
+    <!-- mapsApiKey: 'AIzaSyDKRFMEVEnD2kXnKAWhPFPA-DwgFusA6mM' -->
+    <!-- <VChart
+      class="pie-chart"
+      :data="chartPieRelative"
+      :type="EChartType.Pie"
+      :isLoading="isLoading"
+      caption="Picture 3. Emissions from various countries, measured in tons in the 2020."
+    />
+    <VChart
+      class="pie-chart"
+      :data="chartPiePerPerson"
+      :type="EChartType.Pie"
+      :isLoading="isLoading"
+      caption="Picture 4.Emissions from various countries, measured in tons per person in the 2020."
+    />
+    <VChart
+      class="pie-chart"
+      :data="chartPiePerArea"
+      :type="EChartType.Pie"
+      :isLoading="isLoading"
+      caption="Picture 5. Emissions from various countries, measured in tons per square kilometer in the year 2020."
+    /> -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { EChartTypeG } from "@/interfaces/enums";
+import VChartG from "@/components/VChartG.vue";
+import TheChartGeo from "@/pages/Map/components/TheChartGeo.vue";
+
+// TODO: IParamsEnvironment -> IParamsEnvironmentRead
+import type { IParamsEnvironment } from "@/pages/Dashboard/interfaces/environment.ts";
+import { countries, elements } from "@/constants";
+
+import { useDashboard } from "@/pages/Dashboard/composables/dashboard";
+
+import { useEnvironmentMapStore } from "@/pages/Map/store/environmentMap";
+
+const { getAreaStructure, getMapChartData } = useDashboard();
+
+const chartData = ref([
+  ["Country", "Element ton"],
+  ["Germany", 2000],
+  ["United States", 3000],
+  ["Brazil", 4000],
+  ["Canada", 5000],
+  ["France", 600],
+  ["RU", 0],
+]);
+
+const store = useEnvironmentMapStore();
+const {
+  dataSetsSeriesForPieRelativeChart,
+  structureSeriesForPieRelativeChart,
+} = storeToRefs(store);
+const { readEnvironmentPieRelativeChart } = store;
+
+const elementForPieRelativeChart = ref("EN_ATM_CO2E_XLULUCF");
+const countriesForPieRelativeChart = ref(countries.map(({ value }) => value));
+const chartPieRelative = ref({
+  labels: [],
+  datasets: [],
+});
+const chartPiePerPerson = ref({
+  labels: [],
+  datasets: [],
+});
+const chartPiePerArea = ref({
+  labels: [],
+  datasets: [],
+});
+
+const isLoading = ref(true);
+
+// TODO: modifyPieRelativeChartCriteria divide on less functions
+const modifyPieRelativeChartCriteria = async () => {
+  const params: IParamsEnvironment = {
+    detail: "full",
+    startPeriod: "2020-01-01",
+    endPeriod: "2020-12-31",
+    dimensionAtObservation: "TIME_PERIOD",
+  };
+
+  try {
+    isLoading.value = true;
+    await readEnvironmentPieRelativeChart(
+      elementForPieRelativeChart.value,
+      countriesForPieRelativeChart.value.join("+"),
+      params,
+    );
+  } finally {
+    isLoading.value = false;
+  }
+
+  const datasets = getMapChartData(
+    dataSetsSeriesForPieRelativeChart.value,
+    structureSeriesForPieRelativeChart.value,
+  );
+  chartData.value = datasets;
+  console.log("datasets", datasets);
+
+  const datasetsPerPerson = JSON.parse(JSON.stringify(datasets));
+  const datasetsPerArea = JSON.parse(JSON.stringify(datasets));
+  const areaStructure = getAreaStructure(
+    structureSeriesForPieRelativeChart.value,
+  );
+  const filteredCountries = countries.filter(({ label }) =>
+    areaStructure?.includes(label),
+  );
+
+  datasetsPerPerson[0].data = datasets[0].data.map((item: any, i) => {
+    const emissionsPerCoefficient =
+      item / filteredCountries[i].population["2020"];
+    return emissionsPerCoefficient;
+  });
+
+  datasetsPerArea[0].data = datasets[0].data.map((item: any, i) => {
+    const emissionsPerCoefficient = item / filteredCountries[i].area["2020"];
+    return emissionsPerCoefficient;
+  });
+
+  chartPieRelative.value = {
+    datasets,
+    labels: areaStructure,
+  };
+
+  chartPiePerPerson.value = {
+    datasets: datasetsPerPerson,
+    labels: areaStructure,
+  };
+
+  chartPiePerArea.value = {
+    datasets: datasetsPerArea,
+    labels: areaStructure,
+  };
+};
+
+onMounted(async () => {
+  await modifyPieRelativeChartCriteria();
+});
+</script>
+
+<style lang="scss" scoped>
+.pie-chart {
+  width: 30%;
+
+  &__wrapper {
+    height: 400px;
+  }
+}
+</style>
diff --git a/pages/Map/store/environmentMap.ts b/pages/Map/store/environmentMap.ts
new file mode 100644
index 0000000..d738aee
--- /dev/null
+++ b/pages/Map/store/environmentMap.ts
@@ -0,0 +1,37 @@
+import { ref } from "vue";
+import { defineStore } from "pinia";
+import type { Ref } from "vue";
+import api from "@/api";
+
+import type {
+  IParamsEnvironment,
+  IDataSetsSeries,
+  IStructureSeries,
+} from "@/pages/Dashboard/interfaces/environment.ts";
+
+export const useEnvironmentMapStore = defineStore("environmentMap", () => {
+  const dataSetsSeriesForPieRelativeChart: Ref<IDataSetsSeries> = ref({});
+  const structureSeriesForPieRelativeChart: Ref<IStructureSeries[]> = ref([]);
+
+  async function readEnvironmentPieRelativeChart(
+    elements: string,
+    countries: string,
+    params: IParamsEnvironment,
+  ): Promise<void> {
+    const response = await api.environment.readEnvironment(
+      elements,
+      countries,
+      params,
+    );
+
+    dataSetsSeriesForPieRelativeChart.value = response.data.dataSets[0].series;
+    structureSeriesForPieRelativeChart.value =
+      response.data.structure.dimensions.series;
+  }
+
+  return {
+    readEnvironmentPieRelativeChart,
+    dataSetsSeriesForPieRelativeChart,
+    structureSeriesForPieRelativeChart,
+  };
+});

From 7f2e697ebe625e7c08dd0a4b9bdb55577f965e60 Mon Sep 17 00:00:00 2001
From: LeonidShv <matembit1996@gmail.com>
Date: Tue, 9 Apr 2024 22:08:00 +0300
Subject: [PATCH 3/5] infra: clean code

---
 constants/index.ts                            |  2 +
 helpers/index.ts                              | 21 +++++++
 interfaces/common.ts                          | 12 ++++
 .../components/ThePiaChartAbsolute.vue        |  9 +--
 .../components/ThePiaChartRelative.vue        |  3 +-
 pages/Dashboard/composables/dashboard.ts      | 50 ++--------------
 pages/Dashboard/interfaces/environment.ts     | 12 ----
 pages/Dashboard/store/environment.ts          |  3 +-
 pages/Map/components/TheChartGeo.vue          | 22 -------
 pages/Map/components/TheMapChart.vue          | 58 +++++--------------
 pages/Map/composables/map.ts                  | 30 ++++++++++
 pages/Map/interfaces/map.ts                   | 17 ++++++
 pages/Map/store/environmentMap.ts             | 37 ------------
 pages/Map/store/map.ts                        | 38 ++++++++++++
 14 files changed, 147 insertions(+), 167 deletions(-)
 delete mode 100644 pages/Map/components/TheChartGeo.vue
 create mode 100644 pages/Map/composables/map.ts
 create mode 100644 pages/Map/interfaces/map.ts
 delete mode 100644 pages/Map/store/environmentMap.ts
 create mode 100644 pages/Map/store/map.ts

diff --git a/constants/index.ts b/constants/index.ts
index 9c40a00..833e830 100644
--- a/constants/index.ts
+++ b/constants/index.ts
@@ -515,3 +515,5 @@ export const colors: string[] = [
 export const additionalColor = "#607274";
 
 export const debounceTime = 750;
+
+export const tonsPerGGCoefficient = 1000;
diff --git a/helpers/index.ts b/helpers/index.ts
index f89800e..ce360f3 100644
--- a/helpers/index.ts
+++ b/helpers/index.ts
@@ -1,5 +1,6 @@
 import { useEventBus, useDebounceFn } from "@vueuse/core";
 import { debounceTime } from "@/constants";
+import type { IStructureSeries } from "@/interfaces/common.ts";
 
 const { emit } = useEventBus("vue-use-event-bus");
 
@@ -17,3 +18,23 @@ export const showNotification = useDebounceFn((errors) => {
 
   errors = [];
 }, debounceTime);
+
+export function getAreaStructure(
+  structureSeriesForPieChart: IStructureSeries[],
+) {
+  if (!structureSeriesForPieChart) {
+    return undefined;
+  }
+console.log('structureSeriesForPieChart', structureSeriesForPieChart);
+
+  const refAreaItem = structureSeriesForPieChart.find(
+    ({ role }) => role === "REF_AREA",
+  );
+
+  if (!refAreaItem || !refAreaItem.values) {
+    return undefined;
+  }
+
+  const areaStructure = refAreaItem.values.map(({ name }) => name);
+  return areaStructure;
+}
diff --git a/interfaces/common.ts b/interfaces/common.ts
index 3e5d1dc..38a6a74 100644
--- a/interfaces/common.ts
+++ b/interfaces/common.ts
@@ -13,3 +13,15 @@ export interface IElement {
   value: string;
   label: string;
 }
+
+interface StructureSeriesValuesItem {
+  id: string;
+  name: string;
+}
+export interface IStructureSeries {
+  id: string;
+  name: string;
+  keyPosition: number;
+  role: string;
+  values: StructureSeriesValuesItem[];
+}
diff --git a/pages/Dashboard/components/ThePiaChartAbsolute.vue b/pages/Dashboard/components/ThePiaChartAbsolute.vue
index 6a219c5..732ae79 100644
--- a/pages/Dashboard/components/ThePiaChartAbsolute.vue
+++ b/pages/Dashboard/components/ThePiaChartAbsolute.vue
@@ -38,10 +38,6 @@
     </VFormItem>
   </VForm>
   <div class="pie-chart__wrapper d-flex">
-    <p>map</p>
-    <TheChartGeo :data="chartPie" />
-    <br />
-    <br />
     <VChart
       :data="chartPie"
       :type="EChartType.Pie"
@@ -63,8 +59,9 @@ import {
   EDatePickerSize,
 } from "@/interfaces/enums";
 import { useEnvironmentStore } from "@/pages/Dashboard/store/environment";
-import TheChartGeo from "@/pages/Map/components/TheChartGeo";
-const { getAreaStructure, getPieChartData } = useDashboard();
+import { getAreaStructure } from "@/helpers/index";
+
+const { getPieChartData } = useDashboard();
 
 const store = useEnvironmentStore();
 const { dataSetsSeriesForPieChart, structureSeriesForPieChart } =
diff --git a/pages/Dashboard/components/ThePiaChartRelative.vue b/pages/Dashboard/components/ThePiaChartRelative.vue
index f243410..f1ec8dd 100644
--- a/pages/Dashboard/components/ThePiaChartRelative.vue
+++ b/pages/Dashboard/components/ThePiaChartRelative.vue
@@ -55,8 +55,9 @@ import { countries, elements } from "@/constants";
 import { useDashboard } from "@/pages/Dashboard/composables/dashboard";
 import { EChartType } from "@/interfaces/enums";
 import { useEnvironmentStore } from "@/pages/Dashboard/store/environment";
+import { getAreaStructure } from "@/helpers/index";
 
-const { getAreaStructure, getPieChartData } = useDashboard();
+const { getPieChartData } = useDashboard();
 
 const store = useEnvironmentStore();
 const {
diff --git a/pages/Dashboard/composables/dashboard.ts b/pages/Dashboard/composables/dashboard.ts
index 2307cbb..b2608ae 100644
--- a/pages/Dashboard/composables/dashboard.ts
+++ b/pages/Dashboard/composables/dashboard.ts
@@ -1,29 +1,9 @@
-import { colors, additionalColor } from "@/constants";
-import type {
-  IStructureSeries,
-  IDataSetsSeries,
-} from "@/pages/Dashboard/interfaces/environment.ts";
-
-const tonsPerGGCoefficient = 1000;
+import { colors, additionalColor, tonsPerGGCoefficient } from "@/constants";
+import { getAreaStructure } from "@/helpers/index";
+import type { IDataSetsSeries } from "@/pages/Dashboard/interfaces/environment";
+import type { IStructureSeries } from "@/interfaces/common";
 
 export function useDashboard() {
-  function getAreaStructure(structureSeriesForPieChart: IStructureSeries[]) {
-    if (!structureSeriesForPieChart || !structureSeriesForPieChart) {
-      return undefined;
-    }
-
-    const refAreaItem = structureSeriesForPieChart.find(
-      ({ role }) => role === "REF_AREA",
-    );
-
-    if (!refAreaItem || !refAreaItem.values) {
-      return undefined;
-    }
-
-    const areaStructure = refAreaItem.values.map(({ name }) => name);
-    return areaStructure;
-  }
-
   function getPieChartData(dataSetsSeries: IDataSetsSeries) {
     const data = [];
     const backgroundColor = [];
@@ -43,26 +23,6 @@ export function useDashboard() {
     return [{ data, backgroundColor, borderColor }];
   }
 
-  function getMapChartData(
-    dataSetsSeries: IDataSetsSeries,
-    structureSeries: IStructureSeries[],
-  ) {
-    const areaStructure = getAreaStructure(structureSeries);
-
-    const data = [["Country", "Element ton"]];
-    let index = 0;
-
-    for (const key in dataSetsSeries) {
-      const rest = Object.entries(dataSetsSeries[key].observations)
-        .sort((a, b) => Number(a[0]) - Number(b[0]))
-        .map((item) => Math.round(item[1][0] * tonsPerGGCoefficient));
-
-      data.push([areaStructure[index], rest[0]]);
-      index++;
-    }
-    return data;
-  }
-
   function getDefaultChartData(
     dataSetsSeries: IDataSetsSeries,
     structureSeries: IStructureSeries[],
@@ -89,9 +49,7 @@ export function useDashboard() {
   }
 
   return {
-    getAreaStructure,
     getPieChartData,
     getDefaultChartData,
-    getMapChartData,
   };
 }
diff --git a/pages/Dashboard/interfaces/environment.ts b/pages/Dashboard/interfaces/environment.ts
index 4ae33ca..d2761c6 100644
--- a/pages/Dashboard/interfaces/environment.ts
+++ b/pages/Dashboard/interfaces/environment.ts
@@ -14,15 +14,3 @@ export interface IDataSetsSeries {
     };
   };
 }
-
-interface StructureSeriesValuesItem {
-  id: string;
-  name: string;
-}
-export interface IStructureSeries {
-  id: string;
-  name: string;
-  keyPosition: number;
-  role: string;
-  values: StructureSeriesValuesItem[];
-}
diff --git a/pages/Dashboard/store/environment.ts b/pages/Dashboard/store/environment.ts
index 75e9810..ef0cb1b 100644
--- a/pages/Dashboard/store/environment.ts
+++ b/pages/Dashboard/store/environment.ts
@@ -6,9 +6,10 @@ import api from "@/api";
 import type {
   IParamsEnvironment,
   IDataSetsSeries,
-  IStructureSeries,
 } from "@/pages/Dashboard/interfaces/environment.ts";
 
+import type { IStructureSeries } from "@/interfaces/common.ts";
+
 export const useEnvironmentStore = defineStore("environment", () => {
   const dataSetsSeriesForDefaultChart: Ref<IDataSetsSeries> = ref({});
   const structureSeriesForDefaultChart: Ref<IStructureSeries[]> = ref([]);
diff --git a/pages/Map/components/TheChartGeo.vue b/pages/Map/components/TheChartGeo.vue
deleted file mode 100644
index 9f8fafb..0000000
--- a/pages/Map/components/TheChartGeo.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-	<svg-map :map="Taiwan" />
-</template>
-
-<script>
-import { SvgMap } from "vue-svg-map";
-import Taiwan from "@svg-maps/taiwan";
-
-export default {
-	name: "MyMap",
-	components: {
-		SvgMap
-	},
-	data() {
-		return {
-			Taiwan
-		};
-	}
-};
-</script>
-
-<style src="vue-svg-map/dist/index.css"></style>
\ No newline at end of file
diff --git a/pages/Map/components/TheMapChart.vue b/pages/Map/components/TheMapChart.vue
index aea225d..add724a 100644
--- a/pages/Map/components/TheMapChart.vue
+++ b/pages/Map/components/TheMapChart.vue
@@ -24,36 +24,14 @@
     </VFormItem>
   </VForm>
   <div class="d-flex gap-2 pie-chart__wrapper">
-    <TheChartGeo />
-    <!-- <VChartG
+    <VChartG
       :type="EChartTypeG.GeoChart"
       :settings="{
         packages: ['geochart'],
       }"
       :chartData="chartData"
-    /> -->
-    <!-- mapsApiKey: 'AIzaSyDKRFMEVEnD2kXnKAWhPFPA-DwgFusA6mM' -->
-    <!-- <VChart
-      class="pie-chart"
-      :data="chartPieRelative"
-      :type="EChartType.Pie"
-      :isLoading="isLoading"
-      caption="Picture 3. Emissions from various countries, measured in tons in the 2020."
     />
-    <VChart
-      class="pie-chart"
-      :data="chartPiePerPerson"
-      :type="EChartType.Pie"
-      :isLoading="isLoading"
-      caption="Picture 4.Emissions from various countries, measured in tons per person in the 2020."
-    />
-    <VChart
-      class="pie-chart"
-      :data="chartPiePerArea"
-      :type="EChartType.Pie"
-      :isLoading="isLoading"
-      caption="Picture 5. Emissions from various countries, measured in tons per square kilometer in the year 2020."
-    /> -->
+    <!-- mapsApiKey: 'secret key' -->
   </div>
 </template>
 
@@ -61,17 +39,14 @@
 import { ref, onMounted } from "vue";
 import { EChartTypeG } from "@/interfaces/enums";
 import VChartG from "@/components/VChartG.vue";
-import TheChartGeo from "@/pages/Map/components/TheChartGeo.vue";
-
-// TODO: IParamsEnvironment -> IParamsEnvironmentRead
-import type { IParamsEnvironment } from "@/pages/Dashboard/interfaces/environment.ts";
 import { countries, elements } from "@/constants";
+import { getAreaStructure } from "@/helpers/index";
+import { useMap } from "@/pages/Map/composables/map";
+import { useMapStore } from "@/pages/Map/store/map";
 
-import { useDashboard } from "@/pages/Dashboard/composables/dashboard";
+import type { IParamsEnvironmentMap } from "@/pages/Map/interfaces/map";
 
-import { useEnvironmentMapStore } from "@/pages/Map/store/environmentMap";
-
-const { getAreaStructure, getMapChartData } = useDashboard();
+const { getMapChartData } = useMap();
 
 const chartData = ref([
   ["Country", "Element ton"],
@@ -83,11 +58,10 @@ const chartData = ref([
   ["RU", 0],
 ]);
 
-const store = useEnvironmentMapStore();
-const {
-  dataSetsSeriesForPieRelativeChart,
-  structureSeriesForPieRelativeChart,
-} = storeToRefs(store);
+const store = useMapStore();
+const { structureSeriesForMapChart, dataSetsSeriesForMapChart } =
+  storeToRefs(store);
+
 const { readEnvironmentPieRelativeChart } = store;
 
 const elementForPieRelativeChart = ref("EN_ATM_CO2E_XLULUCF");
@@ -109,7 +83,7 @@ const isLoading = ref(true);
 
 // TODO: modifyPieRelativeChartCriteria divide on less functions
 const modifyPieRelativeChartCriteria = async () => {
-  const params: IParamsEnvironment = {
+  const params: IParamsEnvironmentMap = {
     detail: "full",
     startPeriod: "2020-01-01",
     endPeriod: "2020-12-31",
@@ -128,16 +102,15 @@ const modifyPieRelativeChartCriteria = async () => {
   }
 
   const datasets = getMapChartData(
-    dataSetsSeriesForPieRelativeChart.value,
-    structureSeriesForPieRelativeChart.value,
+    structureSeriesForMapChart.value,
+    dataSetsSeriesForMapChart.value,
   );
   chartData.value = datasets;
-  console.log("datasets", datasets);
 
   const datasetsPerPerson = JSON.parse(JSON.stringify(datasets));
   const datasetsPerArea = JSON.parse(JSON.stringify(datasets));
   const areaStructure = getAreaStructure(
-    structureSeriesForPieRelativeChart.value,
+    dataSetsSeriesForMapChart.value,
   );
   const filteredCountries = countries.filter(({ label }) =>
     areaStructure?.includes(label),
@@ -184,3 +157,4 @@ onMounted(async () => {
   }
 }
 </style>
+~/pages/Map/store/map
\ No newline at end of file
diff --git a/pages/Map/composables/map.ts b/pages/Map/composables/map.ts
new file mode 100644
index 0000000..c0ebb30
--- /dev/null
+++ b/pages/Map/composables/map.ts
@@ -0,0 +1,30 @@
+import { getAreaStructure } from "@/helpers/index";
+import { tonsPerGGCoefficient } from "@/constants";
+import type { IDataSetsSeriesMap } from "@/pages/Map/interfaces/map";
+import type { IStructureSeries } from "@/interfaces/common";
+
+export function useMap() {
+  function getMapChartData(
+    dataSetsSeries: IDataSetsSeriesMap,
+    structureSeries: IStructureSeries[],
+  ) {
+    const areaStructure = getAreaStructure(structureSeries);
+
+    const data = [["Country", "Element ton"]];
+    let index = 0;
+
+    for (const key in dataSetsSeries) {
+      const rest = Object.entries(dataSetsSeries[key].observations)
+        .sort((a, b) => Number(a[0]) - Number(b[0]))
+        .map((item) => Math.round(item[1][0] * tonsPerGGCoefficient));
+
+      data.push([areaStructure[index], rest[0]]);
+      index++;
+    }
+    return data;
+  }
+
+  return {
+    getMapChartData,
+  };
+}
diff --git a/pages/Map/interfaces/map.ts b/pages/Map/interfaces/map.ts
new file mode 100644
index 0000000..4385576
--- /dev/null
+++ b/pages/Map/interfaces/map.ts
@@ -0,0 +1,17 @@
+// INFO: WET, to reduce code coupling
+export interface IDataSetsSeriesMap {
+  [key: string]: {
+    attributes: any[];
+    annotations: any[];
+    observations: {
+      [key: string]: number[];
+    };
+  };
+}
+
+export interface IParamsEnvironmentMap {
+  detail: string;
+  startPeriod: string;
+  endPeriod: string;
+  dimensionAtObservation: string;
+}
diff --git a/pages/Map/store/environmentMap.ts b/pages/Map/store/environmentMap.ts
deleted file mode 100644
index d738aee..0000000
--- a/pages/Map/store/environmentMap.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { ref } from "vue";
-import { defineStore } from "pinia";
-import type { Ref } from "vue";
-import api from "@/api";
-
-import type {
-  IParamsEnvironment,
-  IDataSetsSeries,
-  IStructureSeries,
-} from "@/pages/Dashboard/interfaces/environment.ts";
-
-export const useEnvironmentMapStore = defineStore("environmentMap", () => {
-  const dataSetsSeriesForPieRelativeChart: Ref<IDataSetsSeries> = ref({});
-  const structureSeriesForPieRelativeChart: Ref<IStructureSeries[]> = ref([]);
-
-  async function readEnvironmentPieRelativeChart(
-    elements: string,
-    countries: string,
-    params: IParamsEnvironment,
-  ): Promise<void> {
-    const response = await api.environment.readEnvironment(
-      elements,
-      countries,
-      params,
-    );
-
-    dataSetsSeriesForPieRelativeChart.value = response.data.dataSets[0].series;
-    structureSeriesForPieRelativeChart.value =
-      response.data.structure.dimensions.series;
-  }
-
-  return {
-    readEnvironmentPieRelativeChart,
-    dataSetsSeriesForPieRelativeChart,
-    structureSeriesForPieRelativeChart,
-  };
-});
diff --git a/pages/Map/store/map.ts b/pages/Map/store/map.ts
new file mode 100644
index 0000000..401eaf0
--- /dev/null
+++ b/pages/Map/store/map.ts
@@ -0,0 +1,38 @@
+import { ref } from "vue";
+import { defineStore } from "pinia";
+import type { Ref } from "vue";
+import api from "@/api";
+
+import type {
+  IParamsEnvironmentMap,
+  IDataSetsSeriesMap,
+} from "@/pages/Map/interfaces/map";
+
+import type { IStructureSeries } from "@/interfaces/common.ts";
+
+export const useMapStore = defineStore("map", () => {
+  const dataSetsSeriesForMapChart: Ref<IDataSetsSeriesMap> = ref({});
+  const structureSeriesForMapChart: Ref<IStructureSeries[]> = ref([]);
+
+  async function readEnvironmentPieRelativeChart(
+    elements: string,
+    countries: string,
+    params: IParamsEnvironmentMap,
+  ): Promise<void> {
+    const response = await api.environment.readEnvironment(
+      elements,
+      countries,
+      params,
+    );
+
+    dataSetsSeriesForMapChart.value = response.data.dataSets[0].series;
+    structureSeriesForMapChart.value =
+      response.data.structure.dimensions.series;
+  }
+
+  return {
+    readEnvironmentPieRelativeChart,
+    dataSetsSeriesForMapChart,
+    structureSeriesForMapChart,
+  };
+});

From 8e93bd3944be037052b730af981620fc2f3ed735 Mon Sep 17 00:00:00 2001
From: LeonidShv <matembit1996@gmail.com>
Date: Tue, 9 Apr 2024 22:50:24 +0300
Subject: [PATCH 4/5] clean code

---
 pages/Map/components/TheMapChart.vue | 53 ++--------------------------
 1 file changed, 2 insertions(+), 51 deletions(-)

diff --git a/pages/Map/components/TheMapChart.vue b/pages/Map/components/TheMapChart.vue
index add724a..d6bee68 100644
--- a/pages/Map/components/TheMapChart.vue
+++ b/pages/Map/components/TheMapChart.vue
@@ -40,7 +40,6 @@ import { ref, onMounted } from "vue";
 import { EChartTypeG } from "@/interfaces/enums";
 import VChartG from "@/components/VChartG.vue";
 import { countries, elements } from "@/constants";
-import { getAreaStructure } from "@/helpers/index";
 import { useMap } from "@/pages/Map/composables/map";
 import { useMapStore } from "@/pages/Map/store/map";
 
@@ -66,22 +65,9 @@ const { readEnvironmentPieRelativeChart } = store;
 
 const elementForPieRelativeChart = ref("EN_ATM_CO2E_XLULUCF");
 const countriesForPieRelativeChart = ref(countries.map(({ value }) => value));
-const chartPieRelative = ref({
-  labels: [],
-  datasets: [],
-});
-const chartPiePerPerson = ref({
-  labels: [],
-  datasets: [],
-});
-const chartPiePerArea = ref({
-  labels: [],
-  datasets: [],
-});
 
 const isLoading = ref(true);
 
-// TODO: modifyPieRelativeChartCriteria divide on less functions
 const modifyPieRelativeChartCriteria = async () => {
   const params: IParamsEnvironmentMap = {
     detail: "full",
@@ -102,45 +88,11 @@ const modifyPieRelativeChartCriteria = async () => {
   }
 
   const datasets = getMapChartData(
-    structureSeriesForMapChart.value,
     dataSetsSeriesForMapChart.value,
+    structureSeriesForMapChart.value,
   );
-  chartData.value = datasets;
-
-  const datasetsPerPerson = JSON.parse(JSON.stringify(datasets));
-  const datasetsPerArea = JSON.parse(JSON.stringify(datasets));
-  const areaStructure = getAreaStructure(
-    dataSetsSeriesForMapChart.value,
-  );
-  const filteredCountries = countries.filter(({ label }) =>
-    areaStructure?.includes(label),
-  );
-
-  datasetsPerPerson[0].data = datasets[0].data.map((item: any, i) => {
-    const emissionsPerCoefficient =
-      item / filteredCountries[i].population["2020"];
-    return emissionsPerCoefficient;
-  });
-
-  datasetsPerArea[0].data = datasets[0].data.map((item: any, i) => {
-    const emissionsPerCoefficient = item / filteredCountries[i].area["2020"];
-    return emissionsPerCoefficient;
-  });
-
-  chartPieRelative.value = {
-    datasets,
-    labels: areaStructure,
-  };
 
-  chartPiePerPerson.value = {
-    datasets: datasetsPerPerson,
-    labels: areaStructure,
-  };
-
-  chartPiePerArea.value = {
-    datasets: datasetsPerArea,
-    labels: areaStructure,
-  };
+  chartData.value = datasets;
 };
 
 onMounted(async () => {
@@ -157,4 +109,3 @@ onMounted(async () => {
   }
 }
 </style>
-~/pages/Map/store/map
\ No newline at end of file

From fb9e018df579d7c95deb15a466b27bf7387490b7 Mon Sep 17 00:00:00 2001
From: LeonidShv <matembit1996@gmail.com>
Date: Tue, 9 Apr 2024 22:56:29 +0300
Subject: [PATCH 5/5] clean code

---
 components/VChart.vue | 6 +-----
 helpers/index.ts      | 1 -
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/components/VChart.vue b/components/VChart.vue
index 7331974..5fefbc5 100644
--- a/components/VChart.vue
+++ b/components/VChart.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onUpdated } from "vue";
+import { computed } from "vue";
 import { Vue3Lottie } from "vue3-lottie";
 import {
   Chart as ChartJS,
@@ -70,10 +70,6 @@ const props = withDefaults(defineProps<Props>(), {
   caption: "",
 });
 
-onUpdated(() => {
-  console.log(props.type, props.data);
-});
-
 const myStyles = ref({
   width: "100%",
   position: "relative",
diff --git a/helpers/index.ts b/helpers/index.ts
index ce360f3..31333bd 100644
--- a/helpers/index.ts
+++ b/helpers/index.ts
@@ -25,7 +25,6 @@ export function getAreaStructure(
   if (!structureSeriesForPieChart) {
     return undefined;
   }
-console.log('structureSeriesForPieChart', structureSeriesForPieChart);
 
   const refAreaItem = structureSeriesForPieChart.find(
     ({ role }) => role === "REF_AREA",