From 5c9d1900215fa03b8d1c97b284ebbe08c7e85061 Mon Sep 17 00:00:00 2001
From: Beverly Nguyen <Beverly.Nguyen@gsa.gov>
Date: Mon, 24 Feb 2025 14:44:43 -0800
Subject: [PATCH] total message ratio update

---
 app/assets/javascripts/totalMessagesChart.js | 20 ++++++++++----------
 app/main/views/dashboard.py                  |  5 ++---
 app/templates/views/dashboard/dashboard.html |  2 +-
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/app/assets/javascripts/totalMessagesChart.js b/app/assets/javascripts/totalMessagesChart.js
index cf8808094..2c4003987 100644
--- a/app/assets/javascripts/totalMessagesChart.js
+++ b/app/assets/javascripts/totalMessagesChart.js
@@ -6,17 +6,17 @@
         var chartTitle = document.getElementById('chartTitle').textContent;
 
         // Access data attributes from the HTML
-        var messages_sent = parseInt(chartContainer.getAttribute('data-messages-sent'));
-        var total_message_limit = parseInt(chartContainer.getAttribute('data-total-message-limit'));
-        var totalMessages = messages_sent + total_message_limit;
+        var messagesSent = parseInt(chartContainer.getAttribute('data-messages-sent'));
+        var messagesRemaining = parseInt(chartContainer.getAttribute('data-messages-remaining'));
+        var totalMessages = messagesSent + messagesRemaining;
 
         // Update the message below the chart
-        document.getElementById('message').innerText = `${messages_sent.toLocaleString()} sent / ${total_message_limit.toLocaleString()} remaining`;
+        document.getElementById('message').innerText = `${messagesSent.toLocaleString()} sent / ${messagesRemaining.toLocaleString()} remaining`;
 
         // Calculate minimum width for "Messages Sent" as 1% of the total chart width
-        var minSentPercentage = (messages_sent === 0) ? 0 : 0.02;
+        var minSentPercentage = (messagesSent === 0) ? 0 : 0.02;
         var minSentValue = totalMessages * minSentPercentage;
-        var displaySent = Math.max(messages_sent, minSentValue);
+        var displaySent = Math.max(messagesSent, minSentValue);
         var displayRemaining = totalMessages - displaySent;
 
         var svg = d3.select("#totalMessageChart");
@@ -48,7 +48,7 @@
             .attr("width", 0) // Start with width 0 for animation
             .on('mouseover', function(event) {
                 tooltip.style('display', 'block')
-                    .html(`Messages Sent: ${messages_sent.toLocaleString()}`);
+                    .html(`Messages Sent: ${messagesSent.toLocaleString()}`);
             })
             .on('mousemove', function(event) {
                 tooltip.style('left', `${event.pageX + 10}px`)
@@ -66,7 +66,7 @@
             .attr("width", 0) // Start with width 0 for animation
             .on('mouseover', function(event) {
                 tooltip.style('display', 'block')
-                    .html(`Remaining: ${total_message_limit.toLocaleString()}`);
+                    .html(`Remaining: ${messagesRemaining.toLocaleString()}`);
             })
             .on('mousemove', function(event) {
                 tooltip.style('left', `${event.pageX + 10}px`)
@@ -115,9 +115,9 @@
         var tbodyRow = document.createElement('tr');
 
         var tdMessagesSent = document.createElement('td');
-        tdMessagesSent.textContent = messages_sent.toLocaleString(); // Value for Messages Sent
+        tdMessagesSent.textContent = messagesSent.toLocaleString(); // Value for Messages Sent
         var tdRemaining = document.createElement('td');
-        tdRemaining.textContent = total_message_limit.toLocaleString(); // Value for Remaining
+        tdRemaining.textContent = messagesRemaining.toLocaleString(); // Value for Remaining
 
         tbodyRow.appendChild(tdMessagesSent);
         tbodyRow.appendChild(tdRemaining);
diff --git a/app/main/views/dashboard.py b/app/main/views/dashboard.py
index f18aac3b8..ccebc81fc 100644
--- a/app/main/views/dashboard.py
+++ b/app/main/views/dashboard.py
@@ -55,16 +55,15 @@ def service_dashboard(service_id):
     sorted_jobs = sorted(filtered_jobs, key=lambda job: job["created_at"], reverse=True)
 
     total_messages = service_api_client.get_service_message_ratio(service_id)
-    total_message_limit = total_messages.get('total_message_limit', 0)
+    messages_remaining = total_messages.get('messages_remaining', 0)
     messages_sent = total_messages.get('messages_sent', 0)
-
     return render_template(
         "views/dashboard/dashboard.html",
         updates_url=url_for(".service_dashboard_updates", service_id=service_id),
         partials=get_dashboard_partials(service_id),
         jobs=sorted_jobs,
         service_data_retention_days=service_data_retention_days,
-        total_message_limit=total_message_limit,
+        messages_remaining=messages_remaining,
         messages_sent=messages_sent
     )
 
diff --git a/app/templates/views/dashboard/dashboard.html b/app/templates/views/dashboard/dashboard.html
index 1a515ea7e..15df829f3 100644
--- a/app/templates/views/dashboard/dashboard.html
+++ b/app/templates/views/dashboard/dashboard.html
@@ -26,7 +26,7 @@
 
 {{ ajax_block(partials, updates_url, 'inbox') }}
 
-<div id="totalMessageChartContainer" data-messages-sent="{{ messages_sent }}" data-total-message-limit="{{ total_message_limit }}">
+<div id="totalMessageChartContainer" data-messages-sent="{{ messages_sent }}" data-messages-remaining="{{ messages_remaining }}">
     <h2 id="chartTitle">Total messages</h2>
     <svg id="totalMessageChart"></svg>
     <div id="message"></div>