From ede08b1f6ae2d52ac0f8e1aaa77edc1924f529ce Mon Sep 17 00:00:00 2001
From: Miguel Ribeiro <k.d.mitnick@gmail.com>
Date: Thu, 7 Mar 2024 23:05:00 +0100
Subject: [PATCH] feat: show name of most expensive subscription on statistics
 (#194)

---
 stats.php         | 29 +++++++++++++++++++++++------
 styles/styles.css | 16 ++++++++++++++++
 2 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/stats.php b/stats.php
index c0425c057..9655bc511 100644
--- a/stats.php
+++ b/stats.php
@@ -84,13 +84,14 @@ function getPriceConverted($price, $currency, $database) {
 $activeSubscriptions = 0;
 $inactiveSubscriptions = 0;
 // Calculate total monthly price
-$mostExpensiveSubscription = 0;
+$mostExpensiveSubscription = array();
+$mostExpensiveSubscription['price'] = 0;
 $amountDueThisMonth = 0;
 $totalCostPerMonth = 0;
 $totalSavingsPerMonth = 0;
 
 $statsSubtitleParts = [];
-$query = "SELECT name, price, frequency, cycle, currency_id, next_payment, payer_user_id, category_id, payment_method_id, inactive FROM subscriptions";
+$query = "SELECT name, price, logo, frequency, cycle, currency_id, next_payment, payer_user_id, category_id, payment_method_id, inactive FROM subscriptions";
 $conditions = [];
 $params = [];
 
@@ -132,6 +133,7 @@ function getPriceConverted($price, $currency, $database) {
     foreach ($subscriptions as $subscription) {
       $name = $subscription['name'];
       $price = $subscription['price'];
+      $logo = $subscription['logo'];
       $frequency = $subscription['frequency'];
       $cycle = $subscription['cycle'];
       $currency = $subscription['currency_id'];
@@ -149,8 +151,10 @@ function getPriceConverted($price, $currency, $database) {
         $memberCost[$payerId]['cost'] += $price;
         $categoryCost[$categoryId]['cost'] += $price;
         $paymentMethodCount[$paymentMethodId]['count'] += 1;
-        if ($price > $mostExpensiveSubscription) {
-          $mostExpensiveSubscription = $price;
+        if ($price > $mostExpensiveSubscription['price']) {
+          $mostExpensiveSubscription['price'] = $price;
+          $mostExpensiveSubscription['name'] = $name;
+          $mostExpensiveSubscription['logo'] = $logo;
         }
 
         // Calculate ammount due this month
@@ -301,9 +305,22 @@ function getPriceConverted($price, $currency, $database) {
       <span><?= CurrencyFormatter::format($averageSubscriptionCost, $code) ?></span>
       <div class="title"><?= translate('average_monthly', $i18n) ?></div>
     </div>
-    <div class="statistic">
-      <span><?= CurrencyFormatter::format($mostExpensiveSubscription, $code) ?></span>
+    <div class="statistic short">
+      <span><?= CurrencyFormatter::format($mostExpensiveSubscription['price'], $code) ?></span>
       <div class="title"><?= translate('most_expensive', $i18n) ?></div>
+      <?php
+        if ($mostExpensiveSubscription['logo']) {
+          ?>
+            <div class="subtitle">
+              <img src="images/uploads/logos/<?= $mostExpensiveSubscription['logo'] ?>" alt="<?= $mostExpensiveSubscription['name'] ?>" title="<?= $mostExpensiveSubscription['name'] ?>" />
+            </div>
+          <?php
+        } else {
+          ?>
+            <div class="subtitle"><?= $mostExpensiveSubscription['name'] ?></div>
+          <?php
+        }
+      ?>
     </div>
     <div class="statistic">
       <span><?= CurrencyFormatter::format($amountDueThisMonth, $code) ?></span>
diff --git a/styles/styles.css b/styles/styles.css
index 8b347378f..0b8f42563 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -1247,6 +1247,10 @@ input[type="checkbox"] {
   box-sizing: border-box;
 }
 
+.statistic.short {
+  padding-bottom: 15px;
+}
+
 .statistic.empty {
   background-color: transparent;
   border: none;
@@ -1269,9 +1273,21 @@ input[type="checkbox"] {
 }
 
 .statistic > .title {
+  margin-top: 5px;
   text-align: center;
 }
 
+.statistic > .subtitle {
+  font-size: 25px;
+  color: #8FBFFA;
+  margin-top: 10px;
+  text-align: center;
+}
+
+.statistic > .subtitle > img {
+  width: 100px;
+}
+
 .graphs {
   display: flex;
   flex-direction: row;