From 9731503826edab77b388ea03220fda66261e02ea Mon Sep 17 00:00:00 2001
From: James Cole <james@firefly-iii.org>
Date: Fri, 10 Dec 2021 15:43:42 +0100
Subject: [PATCH] Fix https://github.com/firefly-iii/firefly-iii/issues/5352

---
 .../src/components/dashboard/BudgetLimitRow.vue   |  2 --
 .../src/components/dashboard/MainBudgetList.vue   | 15 ++++++++++-----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/dashboard/BudgetLimitRow.vue b/frontend/src/components/dashboard/BudgetLimitRow.vue
index 2762557363..d26762a4ef 100644
--- a/frontend/src/components/dashboard/BudgetLimitRow.vue
+++ b/frontend/src/components/dashboard/BudgetLimitRow.vue
@@ -31,8 +31,6 @@
                       <span v-if="budgetLimit.pctGreen > 35">
                         {{ $t('firefly.spent_x_of_y', {amount: Intl.NumberFormat(locale, {style: 'currency', currency: budgetLimit.currency_code}).format(budgetLimit.spent), total: Intl.NumberFormat(locale, {style: 'currency', currency: budgetLimit.currency_code}).format(budgetLimit.amount)}) }}
                       </span>
-
-
         </div>
 
         <div :aria-valuenow="budgetLimit.pctOrange" :style="'width: '+ budgetLimit.pctOrange + '%;'"
diff --git a/frontend/src/components/dashboard/MainBudgetList.vue b/frontend/src/components/dashboard/MainBudgetList.vue
index 7b092989cd..896f6c84c5 100644
--- a/frontend/src/components/dashboard/MainBudgetList.vue
+++ b/frontend/src/components/dashboard/MainBudgetList.vue
@@ -214,26 +214,31 @@ export default {
               let pctGreen = 0;
               let pctOrange = 0;
               let pctRed = 0;
-              console.log('Collected "' + period + '" budget limit #' + currentId + ' (part of budget #' + budgetId + ')');
+              //console.log('Collected "' + period + '" budget limit #' + currentId + ' (part of budget #' + budgetId + ')');
               console.log('Spent ' + spentFloatPos + ' of ' + amount);
 
               // remove budget info from rawBudgets if it's there:
               this.filterBudgets(budgetId, currencyId);
-
+              let name = this.budgets[current.attributes.budget_id].name;
               // spent within budget:
               if (0.0 !== spentFloat && spentFloatPos < amount) {
+                console.log('Spent ' + name + ' in budget');
                 pctGreen = (spentFloatPos / amount) * 100;
+                console.log('pctGreen is ' + pctGreen);
               }
 
               // spent over budget
               if (0.0 !== spentFloatPos && spentFloatPos > amount) {
-                pctOrange = (spentFloatPos / amount) * 100;
+                //console.log('Spent ' + name + ' OVER budget');
+                pctOrange = (amount / spentFloatPos) * 100;
                 pctRed = 100 - pctOrange;
+                //console.log('orange is ' + pctOrange);
+                //console.log('red is    ' + pctRed);
               }
               // spent exactly on budget
               if (0.0 !== spentFloatPos && spentFloatPos === amount) {
-                pctOrange = 0;
-                pctRed = 100;
+                pctOrange = 100;
+                pctRed = 0;
               }
 
               let obj = {