Fix dashboard chart rounding issues

eddyharrington · Apr 1, 2021 · e22e9da · e22e9da
1 parent fed5eb3
commit e22e9da
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/static/js/dashboard.js b/static/js/dashboard.js
@@ -51,7 +51,7 @@ function loadBudgetCharts(budgets) {
                     labels: ['Spent', 'Remaining'],
                     datasets: [{
                         label: budgets[i].name,
-                        data: [budgets[i].spent, budgets[i].remaining],
+                        data: [(Math.round(budgets[i].spent * 100) / 100), (Math.round(budgets[i].remaining * 100) / 100)],
                         backgroundColor: [
                             'rgba(240, 173, 78, 1)',
                             'rgba(2, 184, 117, 1)'
@@ -89,7 +89,7 @@ function loadWeeklySpendingCharts(weeklySpending) {
                 labels: [weeklySpending[0].startOfWeek.slice(5) + " - " + weeklySpending[0].endOfWeek.slice(5), weeklySpending[1].startOfWeek.slice(5) + " - " + weeklySpending[1].endOfWeek.slice(5), weeklySpending[2].startOfWeek.slice(5) + " - " + weeklySpending[2].endOfWeek.slice(5), weeklySpending[3].startOfWeek.slice(5) + " - " + weeklySpending[3].endOfWeek.slice(5)],
                 datasets: [{
                     label: 'Total $ Spent',
-                    data: [weeklySpending[0].amount, weeklySpending[1].amount, weeklySpending[2].amount, weeklySpending[3].amount],
+                    data: [(Math.round(weeklySpending[0].amount * 100) / 100), (Math.round(weeklySpending[1].amount * 100) / 100), (Math.round(weeklySpending[2].amount * 100) / 100), (Math.round(weeklySpending[3].amount * 100) / 100)],
                     pointRadius: 9,
                     fill: false,
                     lineTension: 0.1,
@@ -128,7 +128,7 @@ function loadMonthlySpendingChart(monthlySpending) {
         let amounts = []
         for (i = 0; i < monthlySpending.length; i++) {
             months[i] = monthlySpending[i].name;
-            amounts[i] = monthlySpending[i].amount;
+            amounts[i] = (Math.round(monthlySpending[i].amount * 100) / 100);
         }
 
         // Draw the chart
@@ -209,7 +209,7 @@ function loadSpendingTrendsChart(spendingTrends) {
                 borderColor: "rgba(2, 184, 117, 1)",
                 borderWidth: 2,
                 data: [{
-                    x: spendingTrends[i].totalSpent,
+                    x: (Math.round(spendingTrends[i].totalSpent * 100) / 100),
                     y: spendingTrends[i].totalCount,
                     r: spendingTrends[i].proportionalAmount
                 }]
@@ -278,7 +278,7 @@ function loadPayersSpendingChart(payersSpending) {
                 continue;
             }
             else {
-                payerAmounts.push(payersSpending[i].amount)
+                payerAmounts.push((Math.round(payersSpending[i].amount * 100) / 100))
             }
         }
 

diff --git a/templates/index.html b/templates/index.html
@@ -196,7 +196,6 @@ <h2 style="text-align:left">Your Budgets</h2>
                 <div class="card-body-dash">
                     {% set percent = ((budget["spent"] / budget["amount"]) * 100) %}
                     {% set totalBudgetAmount = (budget["amount"] | usd) %}
-                    {% set totalBudgetAmount = totalBudgetAmount[:-3] %}
                     <p>You've spent {{ percent | round | int }}% of your {{ totalBudgetAmount }} budget</p>
                     <div class="chart-container" style="position: relative; height:17vh">
                         <canvas id="budgetChart.{{ loop.index - 1 }}"></canvas>