feat: add total monthly cost trend graph to the statistics page

ellite · Dec 21, 2024 · 9eeb08a · 9eeb08a
1 parent 0567b76
commit 9eeb08a
Show file tree

Hide file tree

Showing 22 changed files with 119 additions and 5 deletions.
diff --git a/includes/i18n/de.php b/includes/i18n/de.php
@@ -116,6 +116,7 @@
     "category_split" => "Kategorien",
     "household_split" => "Haushalt",
     "payment_method_split" => "Zahlungsmethode",
+    "total_monthly_cost_trend" => "Trend der monatlichen Gesamtkosten",
     // About page
     "about_and_credits" => "Informationen und Danksagungen",
     "credits" => "Danksagungen",

diff --git a/includes/i18n/el.php b/includes/i18n/el.php
@@ -116,6 +116,7 @@
     "category_split" => "Διαχωρισμός κατηγορίας",
     "household_split" => "Διαχωρισμός νοικοκυριού",
     "payment_method_split" => "Διαχωρισμός τρόπου πληρωμής",
+    "total_monthly_cost_trend" => "Συνολική τάση μηνιαίου κόστους",
     // About page
     "about_and_credits" => "Σχετικά και Credits",
     "credits" => "Credits",

diff --git a/includes/i18n/en.php b/includes/i18n/en.php
@@ -116,6 +116,7 @@
     "category_split" => "Category Split",
     "household_split" => "Household Split",
     "payment_method_split" => "Payment Method Split",
+    "total_monthly_cost_trend" => "Total Monthly Cost Trend",
     // About page
     "about_and_credits" => "About and Credits",
     "credits" => "Credits",

diff --git a/includes/i18n/es.php b/includes/i18n/es.php
@@ -116,6 +116,7 @@
     "category_split" => "División por Categoría",
     "household_split" => "División por Hogar",
     "payment_method_split" => "División por Método de Pago",
+    "total_monthly_cost_trend" => "Tendencia del Costo Mensual Total",
     // About page
     "about_and_credits" => "Acerca de y Créditos",
     "credits" => "Créditos",

diff --git a/includes/i18n/fr.php b/includes/i18n/fr.php
@@ -116,6 +116,8 @@
     "category_split" => "Répartition par catégorie",
     "household_split" => "Répartition du ménage",
     "payment_method_split" => "Répartition par méthode de paiement",
+    "total_monthly_cost_trend" => "Tendance du coût mensuel total",
+
     // Page À propos
     "about_and_credits" => "À propos et crédits",
     "credits" => "Crédits",

diff --git a/includes/i18n/it.php b/includes/i18n/it.php
@@ -122,6 +122,7 @@
     "category_split" => 'Suddivisione per categoria',
     "household_split" => 'Suddivisione per nucleo familiare',
     "payment_method_split" => 'Suddivisione per metodo di pagamento',
+    "total_monthly_cost_trend" => 'Trend del costo mensile totale',
 
     // About
     "about_and_credits" => 'Informazioni e crediti',

diff --git a/includes/i18n/jp.php b/includes/i18n/jp.php
@@ -116,6 +116,7 @@
     "category_split" => "カテゴリ別",
     "household_split" => "世帯別",
     "payment_method_split" => "支払い方法別",
+    "total_monthly_cost_trend" => "月間費用のトレンド",
     // About page
     "about_and_credits" => "概要とクレジット",
     "credits" => "クレジット",

diff --git a/includes/i18n/ko.php b/includes/i18n/ko.php
@@ -116,6 +116,7 @@
     "category_split" => "카테고리별",
     "household_split" => "가구별",
     "payment_method_split" => "지불방법별",
+    "total_monthly_cost_trend" => "월간 총 비용 추이",
     // About page
     "about_and_credits" => "개요 및 크레딧",
     "credits" => "크레딧",

diff --git a/includes/i18n/nl.php b/includes/i18n/nl.php
@@ -116,6 +116,7 @@
     "category_split" => "Categorieverdeling",
     "household_split" => "Huishoudenverdeling",
     "payment_method_split" => "Betaalmethodeverdeling",
+    "total_monthly_cost_trend" => "Totaal maandelijkse kosten trend",
     // About page
     "about_and_credits" => "Over en credits",
     "credits" => "Credits",

diff --git a/includes/i18n/pl.php b/includes/i18n/pl.php
@@ -116,6 +116,7 @@
     "category_split" => "Podział kategorii",
     "household_split" => "Podział gospodarstwa domowego",
     "payment_method_split" => "Podział metod płatności",
+    "total_monthly_cost_trend" => "Całkowity trend kosztów miesięcznych",
     // About page
     "about_and_credits" => "Informacje i podziękowania",
     "credits" => "Podziękowania",

diff --git a/includes/i18n/pt.php b/includes/i18n/pt.php
@@ -116,6 +116,7 @@
     "category_split" => "Por Categoria",
     "household_split" => "Por Membro",
     "payment_method_split" => "Por Método de Pagamento",
+    "total_monthly_cost_trend" => "Tendência do Custo Mensal Total",
     // About page
     "about_and_credits" => "Sobre e Créditos",
     "credits" => "Créditos",

diff --git a/includes/i18n/pt_br.php b/includes/i18n/pt_br.php
@@ -116,6 +116,7 @@
     "category_split" => "Por categoria",
     "household_split" => "Por membro",
     "payment_method_split" => "Por método de pagamento",
+    "total_monthly_cost_trend" => "Tendência de custo mensal total",
     // About page
     "about_and_credits" => "Sobre e Créditos",
     "credits" => "Créditos",

diff --git a/includes/i18n/ru.php b/includes/i18n/ru.php
@@ -116,6 +116,7 @@
     "category_split" => "По категориям",
     "household_split" => "По членам семьи",
     "payment_method_split" => "По способам оплаты",
+    "total_monthly_cost_trend" => "Общая стоимость подписок по месяцам",
     // About page
     "about_and_credits" => "О компании и авторах",
     "credits" => "Благодарности",

diff --git a/includes/i18n/sl.php b/includes/i18n/sl.php
@@ -116,6 +116,7 @@
     "category_split" => "Razdelitev kategorije",
     "household_split" => "Razdelitev gospodinjstva",
     "payment_method_split" => "Razdelitev načina plačila",
+    "total_monthly_cost_trend" => "Trend skupnih mesečnih stroškov",
     // About page
     "about_and_credits" => "O programu in zahvale",
     "credits" => "Zahvale",

diff --git a/includes/i18n/sr.php b/includes/i18n/sr.php
@@ -116,6 +116,7 @@
     "category_split" => "Подела по категоријама",
     "household_split" => "Подела по домаћинству",
     "payment_method_split" => "Подела по начинима плаћања",
+    "total_monthly_cost_trend" => "Тренд укупног месечног трошка",
     // Страница о апликацији
     "about_and_credits" => "О апликацији и заслугама",
     "credits" => "Заслуге",

diff --git a/includes/i18n/sr_lat.php b/includes/i18n/sr_lat.php
@@ -116,6 +116,7 @@
     "category_split" => "Podela po kategorijama",
     "household_split" => "Podela po domaćinstvima",
     "payment_method_split" => "Podela po načinu plaćanja",
+    "total_monthly_cost_trend" => "Trend ukupnog mesečnog troška",
     // Stranica O aplikaciji
     "about_and_credits" => "O aplikaciji i zasluge",
     "credits" => "Zasluge",

diff --git a/includes/i18n/tr.php b/includes/i18n/tr.php
@@ -116,6 +116,7 @@
     "category_split" => "Kategori Bölümü",
     "household_split" => "Hane Bölümü",
     "payment_method_split" => "Ödeme Yöntemi Bölümü",
+    "total_monthly_cost_trend" => "Toplam Aylık Maliyet Eğilimi",
     // About page
     "about_and_credits" => "Hakkında ve Teşekkürler",
     "credits" => "Teşekkürler",

diff --git a/includes/i18n/vi.php b/includes/i18n/vi.php
@@ -116,6 +116,7 @@
     "category_split" => "Phân chia theo danh mục",
     "household_split" => "Phân chia theo hộ gia đình",
     "payment_method_split" => "Phân chia theo phương thức thanh toán",
+    "total_monthly_cost_trend" => "Trend tổng chi phí hàng tháng",
     //  About page
     "about_and_credits" => "Giới thiệu và cảm ơn",
     "credits" => "Cảm ơn",

diff --git a/includes/i18n/zh_cn.php b/includes/i18n/zh_cn.php
@@ -122,6 +122,7 @@
     "category_split" => "分类视图",
     "household_split" => "家庭视图",
     "payment_method_split" => "支付方式视图",
+    "total_monthly_cost_trend" => "总月费用趋势",
 
     // 关于页面
     "about_and_credits" => "关于和鸣谢",

diff --git a/includes/i18n/zh_tw.php b/includes/i18n/zh_tw.php
@@ -116,6 +116,7 @@
     "category_split" => "類別分割",
     "household_split" => "家庭分割",
     "payment_method_split" => "付款方式分割",
+    "total_monthly_cost_trend" => "每月總費用趨勢",
     // 關於頁面
     "about_and_credits" => "關於和致謝",
     "credits" => "致謝",

diff --git a/scripts/stats.js b/scripts/stats.js
@@ -21,11 +21,75 @@ function loadGraph(container, dataPoints, currency, run) {
                     animateRotate: true,
                     animateScale: true,
                 },
+                plugins: {
+                    legend: {
+                        display: true,
+                        position: 'top',
+                    },
+                    tooltip: {
+                        callbacks: {
+                            label: function(context) {
+                                let label = " ";
+                                if (currency) {
+                                    label += new Intl.NumberFormat(navigator.language, { style: 'currency', currency }).format(context.raw);
+                                } else {
+                                    label += new Intl.NumberFormat(navigator.language).format(context.raw);
+                                }
+                                return label;
+                            }
+                        }
+                    }
+                }
+            },
+        });
+    }
+}
+
+function loadLineGraph(container, dataPoints, currency, run) {
+    if (run) {
+        var ctx = document.getElementById(container).getContext('2d');
+
+        var chart = new Chart(ctx, {
+            type: 'line',
+            data: {
+                datasets: [{
+                    label: '',
+                    data: dataPoints.map(point => point.y),
+                }],
+                labels: dataPoints.map(point => {
+                    return `${point.label}`;
+                }),
             },
+            options: {
+                animation: {
+                    animateRotate: true,
+                    animateScale: true,
+                },
+                scales: {
+                    y: {
+                        beginAtZero: false,
+                        ticks: {
+                            callback: function(value, index, values) {
+                                if (currency) {
+                                    return new Intl.NumberFormat(navigator.language, { style: 'currency', currency }).format(value);
+                                } else {
+                                    return new Intl.NumberFormat(navigator.language).format(value);
+                                }
+                            }
+                        }
+                    }
+                },
+                plugins: {
+                    legend: {
+                        display: false
+                    }
+                }
+            }
         });
     }
 }
 
+
 function closeSubMenus() {
     var subMenus = document.querySelectorAll('.filtermenu-submenu-content');
     subMenus.forEach(subMenu => {

diff --git a/stats.php b/stats.php
@@ -263,6 +263,23 @@ function getPriceConverted($price, $currency, $database, $userId)
   }
 }
 
+$query = "SELECT * FROM total_yearly_cost WHERE user_id = :userId";
+$stmt = $db->prepare($query);
+$stmt->bindValue(':userId', $userId, SQLITE3_INTEGER);
+$result = $stmt->execute();
+
+$totalMonthlyCostDataPoints = [];
+while ($row = $result->fetchArray(SQLITE3_ASSOC)) {
+  $totalMonthlyCostDataPoints[] = [
+    "label" => html_entity_decode($row['date']),
+    "y" => round($row['cost'] / 12, 2),
+  ];
+}
+
+$showTotalMonthlyCostGraph = count($totalMonthlyCostDataPoints) > 1;
+echo "ASD -> " . count($totalMonthlyCostDataPoints);
+echo "SHOW: -> " . $showTotalMonthlyCostGraph;
+
 ?>
 <section class="contain">
   <?php
@@ -519,8 +536,8 @@ function getPriceConverted($price, $currency, $database, $userId)
     }
   }
 
-  $showpaymentMethodsGraph = count($paymentMethodDataPoints) > 1;
-  if ($showCategoryCostGraph || $showMemberCostGraph || $showpaymentMethodsGraph) {
+  $showPaymentMethodsGraph = count($paymentMethodDataPoints) > 1;
+  if ($showCategoryCostGraph || $showMemberCostGraph || $showPaymentMethodsGraph) {
     ?>
     <h2><?= translate('split_views', $i18n) ?></h2>
     <div class="graphs">
@@ -549,7 +566,7 @@ function getPriceConverted($price, $currency, $database, $userId)
         <?php
       }
 
-      if ($showpaymentMethodsGraph) {
+      if ($showPaymentMethodsGraph) {
         ?>
         <section class="graph">
           <header>
@@ -560,6 +577,17 @@ function getPriceConverted($price, $currency, $database, $userId)
         <?php
       }
 
+      if ($showTotalMonthlyCostGraph) {
+        ?>
+        <section class="graph">
+          <header>
+            <?= translate('total_monthly_cost_trend', $i18n) ?>
+          </header>
+          <canvas id="totalMonthlyCostChart" style="height: 370px; width: 100%;"></canvas>
+        </section>
+        <?php
+      }
+
       ?>
     </div>
     <?php
@@ -568,14 +596,15 @@ function getPriceConverted($price, $currency, $database, $userId)
 
 </section>
 <?php
-if ($showCategoryCostGraph || $showMemberCostGraph || $showpaymentMethodsGraph) {
+if ($showCategoryCostGraph || $showMemberCostGraph || $showPaymentMethodsGraph || $showTotalMonthlyCostGraph) {
   ?>
   <script src="scripts/libs/chart.js"></script>
   <script type="text/javascript">
     window.onload = function () {
       loadGraph("categorySplitChart", <?php echo json_encode($categoryDataPoints, JSON_NUMERIC_CHECK); ?>, "<?= $code ?>", <?= $showCategoryCostGraph ?>);
       loadGraph("memberSplitChart", <?php echo json_encode($memberDataPoints, JSON_NUMERIC_CHECK); ?>, "<?= $code ?>", <?= $showMemberCostGraph ?>);
-      loadGraph("paymentMethidSplitChart", <?php echo json_encode($paymentMethodDataPoints, JSON_NUMERIC_CHECK); ?>, "", <?= $showpaymentMethodsGraph ?>);
+      loadGraph("paymentMethidSplitChart", <?php echo json_encode($paymentMethodDataPoints, JSON_NUMERIC_CHECK); ?>, "", <?= $showPaymentMethodsGraph ?>);
+      loadLineGraph("totalMonthlyCostChart", <?php echo json_encode($totalMonthlyCostDataPoints, JSON_NUMERIC_CHECK); ?>, "<?= $code ?>", "<?= $showTotalMonthlyCostGraph ?>");
     }
   </script>
   <?php