infra: setup custom routing, fix error page, refactoring

* infra: logic encapsulation, refactoring

* infra: axios interceptors

.eslintrc

@@ -0,0 +1,17 @@
+{
+  "root": true,
+  "env": {
+    "browser": true,
+    "node": true,
+  },
+  "parser": "vue-eslint-parser",
+  "parserOptions": {
+    "parser": "@typescript-eslint/parser",
+  },
+  "extends": ["@nuxtjs/eslint-config-typescript", "plugin:prettier/recommended"],
+  "plugins": [],
+  "rules": {
+    "vue/no-multiple-template-root": "off",
+    "vue/attribute-hyphenation": "off",
+  }
+}

app.vue

@@ -9,10 +9,25 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
+import { useEventBus } from "@vueuse/core";
+import { ElNotification } from "element-plus";
 
 import type { Ref } from "vue";
 import type { INavigationItem } from "@/interfaces/navigation";
 
+const { on } = useEventBus("vue-use-event-bus");
+
+interface IElNotification {
+  type: string;
+  title: string;
+  message: string;
+  position: string;
+}
+
+on((params: IElNotification | any) => {
+  ElNotification(params);
+});
+
 const navigation: Ref<INavigationItem[]> = ref([
   {
     path: "/",

app/router.options.ts

@@ -0,0 +1,14 @@
+import type { RouterConfig } from "@nuxt/schema";
+
+export default <RouterConfig>{
+  routes: (_routes) => [
+    {
+      name: "home",
+      path: "/",
+      component: () =>
+        import("@/pages/Dashboard/DashboardPage.vue").then(
+          (r) => r.default || r,
+        ),
+    },
+  ],
+};

components/VChart.vue

@@ -11,6 +11,7 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from "vue";
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -48,7 +49,7 @@ interface Props {
   caption: string;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   type: EChartType.Line,
   data: {},
   caption: "",

constants/index.ts

@@ -511,3 +511,7 @@ export const colors: string[] = [
   "#596FB7",
   "#597E52",
 ];
+
+export const additionalColor = "#607274";
+
+export const debounceTime = 750;

error.vue

@@ -1,10 +1,17 @@
 <template>
-  <!-- TODO: test and refactor -->
   <section class="error">
     <div class="m-auto">
       <Vue3Lottie :animation-data="notFoundPage" :height="200" :width="200" />
 
-      <p class="Error-text">Not found page, please go back to the home page.</p>
+      <template v-if="error.statusCode === 404">
+        <h1>404!</h1>
+        <p class="Error-text">
+          Not found page, please go back to the home page.
+        </p>
+      </template>
+      <template v-else>
+        <p>{{ error.message }}</p>
+      </template>
 
       <a class="error-link" @click="handleError">
         <VButton> Go home </VButton>
@@ -18,7 +25,7 @@ import { Vue3Lottie } from "vue3-lottie";
 
 import notFoundPage from "@/assets/animations/notFoundPage.json";
 
-// const error = useError();
+const error = useError();
 
 const handleError = () => {
   clearError({

helpers/index.ts

@@ -0,0 +1,19 @@
+import { useEventBus, useDebounceFn } from "@vueuse/core";
+import { debounceTime } from "@/constants";
+
+const { emit } = useEventBus("vue-use-event-bus");
+
+export const showNotification = useDebounceFn((errors) => {
+  const uniqueErrors: string[] = Array.from(new Set(errors));
+
+  uniqueErrors.forEach((errorMessage) => {
+    emit({
+      type: "error",
+      title: "Error",
+      message: errorMessage,
+      position: "bottom-right",
+    });
+  });
+
+  errors = [];
+}, debounceTime);

interfaces/common.ts

@@ -1,32 +1,3 @@
-export interface IParamsEnvironment {
-  detail: string;
-  startPeriod: string;
-  endPeriod: string;
-  dimensionAtObservation: string;
-}
-
-export interface IDataSetsSeries {
-  [key: string]: {
-    attributes: any[];
-    annotations: any[];
-    observations: {
-      [key: string]: number[];
-    };
-  };
-}
-
-interface StructureSeriesValuesItem {
-  id: string;
-  name: string;
-}
-export interface IStructureSeries {
-  id: string;
-  name: string;
-  keyPosition: number;
-  role: string;
-  values: StructureSeriesValuesItem[];
-}
-
 export interface ICountry {
   value: string;
   label: string;

lib/axios.ts

@@ -1,7 +1,22 @@
 import axios from "axios";
+import { showNotification } from "@/helpers";
 
 export const api = axios.create({
   baseURL: `${import.meta.env.VITE_BACKEND_URL},${
     import.meta.env.VITE_BACKEND_VERSION
   }`,
 });
+
+const errors: string[] = [];
+
+api.interceptors.response.use(
+  function (response) {
+    return response;
+  },
+  function (error) {
+    errors.push(`Message: ${error.message}. Code: ${error.code}`);
+    showNotification(errors);
+
+    return Promise.reject(error);
+  },
+);

pages/Dashboard/DashboardPage.vue

@@ -0,0 +1,40 @@
+<template>
+  <section class="m-t-2">
+    <section>
+      <h2 class="m-b-1">Different countries | one element</h2>
+      <h3>Absolute values</h3>
+      <TheDefaultChart />
+    </section>
+
+    <section>
+      <h2 class="m-b-1 m-t-2">Different countries | one element | one year</h2>
+      <h3>Absolute values</h3>
+      <ThePiaChartAbsolute />
+    </section>
+    <section>
+      <h2 class="m-b-1 m-t-2">Different countries | one element | 2020 year</h2>
+      <h3>Relative values</h3>
+      <ThePiaChartRelative />
+    </section>
+  </section>
+</template>
+
+<script setup lang="ts">
+import TheDefaultChart from "@/pages/Dashboard/components/TheDefaultChart.vue";
+import ThePiaChartAbsolute from "@/pages/Dashboard/components/ThePiaChartAbsolute.vue";
+import ThePiaChartRelative from "@/pages/Dashboard/components/ThePiaChartRelative.vue";
+</script>
+
+<style lang="scss">
+.chart {
+  flex: 3;
+}
+
+.radio-buttons {
+  flex: 1;
+}
+
+.chart--pie {
+  width: 30%;
+}
+</style>

api/environment.ts → pages/Dashboard/api/environment.ts

@@ -1,6 +1,6 @@
 import type { AxiosResponse } from "axios";
 import { api } from "@/lib/axios";
-import type { IParamsEnvironment } from "@/interfaces/common";
+import type { IParamsEnvironment } from "@/pages/Dashboard/interfaces/environment.ts";
 
 export default {
   readEnvironment: (

pages/Dashboard/api/index.ts

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

pages/Dashboard/components/TheDefaultChart.vue

@@ -0,0 +1,101 @@
+<template>
+  <VForm class="d-flex gap-1 m-b-1">
+    <VFormItem>
+      <VSelect
+        v-model="elementForDefaultChart"
+        :options="elements"
+        placeholder="Elements"
+        filterable
+        @change="modifyDefaultChartCriteria"
+      />
+    </VFormItem>
+
+    <VFormItem>
+      <VSelect
+        v-model="countriesForDefaultChart"
+        :options="countries"
+        filterable
+        placeholder="Countries"
+        multiple
+        @change="modifyDefaultChartCriteria"
+      />
+    </VFormItem>
+  </VForm>
+  <div class="d-flex">
+    <VChart
+      class="chart"
+      :data="chartDefault"
+      :type="chartType"
+      caption="Picture 1. Emissions from various countries, measured in tons, over different years."
+    />
+    <VRadioButtons
+      v-model="chartType"
+      class="radio-buttons"
+      :options="chartTypes"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { countries, elements, years } from "@/constants";
+
+import type { IParamsEnvironment } from "@/pages/Dashboard/interfaces/environment.ts";
+import type { IChartDefault } from "@/interfaces/chart";
+import { EChartType } from "@/interfaces/enums";
+import { useDashboard } from "@/pages/Dashboard/composables/dashboard";
+import { useEnvironmentStore } from "@/pages/Dashboard/store/environment";
+
+const { getDefaultChartData } = useDashboard();
+
+const store = useEnvironmentStore();
+const { dataSetsSeriesForDefaultChart, structureSeriesForDefaultChart } =
+  storeToRefs(store);
+
+const { readEnvironmentDefaultChart } = store;
+
+const elementForDefaultChart = ref("EN_ATM_CO2E_XLULUCF");
+const countriesForDefaultChart = ref(["AUS"]);
+const chartDefault = ref<IChartDefault>({
+  labels: [],
+  datasets: [],
+});
+const chartType = ref(EChartType.Line);
+const chartTypes = [
+  {
+    value: EChartType.Line,
+    label: EChartType.Line,
+  },
+  {
+    value: EChartType.Bar,
+    label: EChartType.Bar,
+  },
+];
+
+const modifyDefaultChartCriteria = async () => {
+  const params: IParamsEnvironment = {
+    detail: "full",
+    startPeriod: "1960-01-01",
+    endPeriod: "2020-12-31",
+    dimensionAtObservation: "TIME_PERIOD",
+  };
+
+  await readEnvironmentDefaultChart(
+    elementForDefaultChart.value,
+    countriesForDefaultChart.value.join("+"),
+    params,
+  );
+
+  const datasets = getDefaultChartData(
+    dataSetsSeriesForDefaultChart.value,
+    structureSeriesForDefaultChart.value,
+  );
+  chartDefault.value = {
+    datasets,
+    labels: years,
+  };
+};
+
+onMounted(async () => {
+  await modifyDefaultChartCriteria();
+});
+</script>