Feat/add map infographic

api/index.ts

@@ -0,0 +1,5 @@
+import environment from "@/api/environment";
+
+export default {
+  environment,
+};

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),
+    },
   ],
 };

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>

constants/index.ts

@@ -515,3 +515,5 @@ export const colors: string[] = [
 export const additionalColor = "#607274";
 
 export const debounceTime = 750;
+
+export const tonsPerGGCoefficient = 1000;

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,22 @@ export const showNotification = useDebounceFn((errors) => {
 
   errors = [];
 }, debounceTime);
+
+export function getAreaStructure(
+  structureSeriesForPieChart: IStructureSeries[],
+) {
+  if (!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;
+}

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[];
+}

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",

package.json

@@ -33,9 +33,11 @@
     "@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",
+    "vue-google-charts": "^1.1.0",
     "vue3-lottie": "^3.2.0"
   }
 }