From c7d469dd9505a55817cd8812d51a825ba7a71a2f Mon Sep 17 00:00:00 2001
From: isKonstantin <me@knst.su>
Date: Sat, 6 Jan 2024 20:03:15 +0300
Subject: [PATCH] Analytics page improvement

---
 components/analytics/pie.vue          |  4 ++
 components/analytics/tagsByMonths.vue | 86 ++++++++++++++++++---------
 lang/en-US.json                       |  6 ++
 lang/ru-RU.json                       |  6 ++
 package.json                          |  2 +-
 5 files changed, 76 insertions(+), 28 deletions(-)

diff --git a/components/analytics/pie.vue b/components/analytics/pie.vue
index 2f59e8d..7ff5f04 100644
--- a/components/analytics/pie.vue
+++ b/components/analytics/pie.vue
@@ -174,6 +174,10 @@ const buildChart = () => {
       },
     },
 
+    stroke: {
+      show: false
+    },
+
     yaxis: {
       labels: {
         formatter: formatter
diff --git a/components/analytics/tagsByMonths.vue b/components/analytics/tagsByMonths.vue
index eb9a3b3..381903b 100644
--- a/components/analytics/tagsByMonths.vue
+++ b/components/analytics/tagsByMonths.vue
@@ -3,11 +3,18 @@
     <transactions-filter-div v-model="filter" :calendar-max-range="configs.maxTimeRangeDaysForMonths"/>
 
     <ApexChart class="w-full max-h-36 mt-4"
-               type="area"
                height="500px"
                :options="chartOptions"
                :series="chartSeries"
-    ></ApexChart>
+    />
+
+    <div class="flex justify-center w-full">
+      <div role="tablist" class="tabs tabs-boxed w-fit">
+        <a role="tab" class="tab px-6" @click="type = 'area'" :class="{ 'tab-active' : type === 'area' }"> {{ $t("analyticsPage.byMonthsSwitcher.area")}} </a>
+        <a role="tab" class="tab px-6" @click="type = 'bar'" :class="{ 'tab-active' : type === 'bar' }"> {{ $t("analyticsPage.byMonthsSwitcher.bar")}} </a>
+        <a role="tab" class="tab px-6" @click="type = 'radar'" :class="{ 'tab-active' : type === 'radar' }"> {{ $t("analyticsPage.byMonthsSwitcher.radar")}} </a>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -23,37 +30,30 @@ const tagsMap = $transactionsTagsApi.getTagsMap();
 const filter = ref();
 const chartSeries = ref([]);
 
-const chartOptions = ref({
-  chart: {
-    id: "tags-by-months",
-    foreColor: undefined
-  },
-
-  xaxis: {
-    categories: [],
-  },
-  yaxis : {
-    decimalsInFloat: 2
-  }
-});
+const type = ref('area');
+
+const chartOptions = ref({});
 
 const currenciesMap = $currenciesApi.getCurrenciesMap();
 const configs = $serverConfigs.configs.analytics;
 
-const buildChart = async () => {
-  const analytics = (await $analyticsApi.getAnalyticsByMonths(filter.value));
-  const sortedAnalytics = new Map(Array.from(analytics).sort(([a], [b]) => a.localeCompare(b)));
+const analytics = ref({});
+
+const fetch = async () => {
+  const analyticsRaw = await $analyticsApi.getAnalyticsByMonths(filter.value);
+  analytics.value = new Map(Array.from(analyticsRaw).sort(([a], [b]) => a.localeCompare(b)));
+}
 
+const buildChart = () => {
   const xaxis = [];
   const series = [];
   const tags = {};
   let decimals = Number.MAX_VALUE;
 
-  chartOptions.value.xaxis.categories = xaxis;
   chartSeries.value = series;
   let i = 0;
 
-  sortedAnalytics.forEach((v, k, m) => {
+  analytics.value.forEach((v, k, m) => {
     const date = new Date(k).toLocaleString(locale.value, {year: 'numeric', month: 'numeric'})
 
     xaxis.push(date);
@@ -88,11 +88,37 @@ const buildChart = async () => {
     decimals = 2;
 
   chartOptions.value = {
-    ... chartOptions.value,
-    ... {
-      yaxis: {
-        decimalsInFloat: decimals
-      }
+    chart: {
+      id: "tags-by-months-" + type.value,
+      type: type.value,
+      stacked: type.value === 'bar',
+      foreColor: undefined
+    },
+
+    plotOptions: {
+      horizontal: false,
+      columnWidth: '55%',
+      endingShape: 'rounded'
+    },
+
+    stroke: {
+      show: type.value !== 'bar',
+      curve: 'smooth',
+      lineCap: 'butt',
+      colors: undefined,
+      width: 2,
+      dashArray: 0,
+    },
+
+    fill: {
+      type: type.value === 'bar' ? "solid" : "gradient",
+    },
+
+    xaxis: {
+      categories: xaxis,
+    },
+    yaxis : {
+      decimalsInFloat: decimals
     }
   }
 
@@ -105,11 +131,17 @@ const buildChart = async () => {
   });
 }
 
-watch(filter, () => {
+watch([analytics, type], () => {
   buildChart();
 })
 
-buildChart();
+watch(filter, () => {
+  fetch();
+})
+
+fetch().then(() => {
+  buildChart();
+})
 
 </script>
 
diff --git a/lang/en-US.json b/lang/en-US.json
index be67cfc..fb27f83 100644
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -113,6 +113,12 @@
   },
 
   "analyticsPage": {
+    "byMonthsSwitcher": {
+      "area": "Area",
+      "bar": "Bar",
+      "radar": "Radar"
+    },
+
     "pie": {
       "noData": "No data",
       "selects": {
diff --git a/lang/ru-RU.json b/lang/ru-RU.json
index 0faf2c5..2c1efd3 100644
--- a/lang/ru-RU.json
+++ b/lang/ru-RU.json
@@ -115,6 +115,12 @@
   },
 
   "analyticsPage": {
+    "byMonthsSwitcher": {
+      "area": "Линейная",
+      "bar": "Столбчатая",
+      "radar": "Паутинная"
+    },
+
     "pie": {
       "noData": "Нет данных",
       "selects": {
diff --git a/package.json b/package.json
index 3cf8ca9..9385359 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "finwave",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "private": true,
   "scripts": {
     "build": "nuxt build",