added sms_sent and sms_remaining data to the bar chart

app/assets/javascripts/chartDashboard.js

@@ -5,9 +5,10 @@ document.addEventListener('DOMContentLoaded', function () {
     canvas.width = canvas.parentElement.clientWidth;
     canvas.height = 100;
 
-    var sentMessages = 80000;
-    var totalMessages = 250000;
-    var remainingMessages = totalMessages - sentMessages;
+    var chartContainer = document.getElementById('chartContainer');
+    var sms_sent = parseInt(chartContainer.getAttribute('data-sms-sent'));
+    var sms_remaining_messages = parseInt(chartContainer.getAttribute('data-sms-allowance-remaining'));
+    var totalMessages = sms_sent + sms_remaining_messages;
 
     var myChart = new Chart(ctx, {
         type: 'bar',
@@ -15,12 +16,12 @@ document.addEventListener('DOMContentLoaded', function () {
             labels: [''],
             datasets: [{
                 label: 'Messages Sent',
-                data: [sentMessages],
+                data: [sms_sent],
                 backgroundColor: '#0076d6',
             },
             {
                 label: 'Remaining',
-                data: [remainingMessages],
+                data: [sms_remaining_messages],
                 backgroundColor: '#fa9441',
             }]
         },
@@ -81,6 +82,6 @@ document.addEventListener('DOMContentLoaded', function () {
     });
 
     // Update the message below the chart
-    document.getElementById('message').innerText = `${sentMessages.toLocaleString()} sent / ${remainingMessages.toLocaleString()} remaining`;
+    document.getElementById('message').innerText = `${sms_sent.toLocaleString()} sent / ${sms_remaining_messages.toLocaleString()} remaining`;
 
 });

app/main/views/dashboard.py

@@ -78,12 +78,25 @@ def service_dashboard(service_id):
         for job in job_response
         if aggregate_notifications_by_job.get(job["id"], [])
     ]
+    yearly_usage = billing_api_client.get_annual_usage_for_service(
+        service_id,
+        get_current_financial_year(),
+    )
+    free_sms_allowance = billing_api_client.get_free_sms_fragment_limit_for_year(
+        current_service.id,
+    )
+    usage_data = get_annual_usage_breakdown(yearly_usage, free_sms_allowance)
+    sms_sent=usage_data['sms_sent'],
+    sms_allowance_remaining=usage_data['sms_allowance_remaining'],
+
     return render_template(
         "views/dashboard/dashboard.html",
         updates_url=url_for(".service_dashboard_updates", service_id=service_id),
         partials=get_dashboard_partials(service_id),
         job_and_notifications=job_and_notifications,
         service_data_retention_days=service_data_retention_days,
+        sms_sent=sms_sent[0],
+        sms_allowance_remaining=sms_allowance_remaining[0],
     )
 
 

app/templates/views/dashboard/dashboard.html

@@ -22,18 +22,18 @@
       Messages sent
     </h2>
 
-    <div id="chartContainer">
-      <h3 class="margin-bottom-1">2024 Total Message Allowance</h3>
-      <canvas id="myChart" height="100"></canvas>
-    </div>
-    <div id="message"></div>
-
-
     {{ ajax_block(partials, updates_url, 'inbox') }}
 
     {{ ajax_block(partials, updates_url, 'totals') }}
 
     {{ ajax_block(partials, updates_url, 'template-statistics') }}
+    {% if current_user.has_permissions('manage_service') %}
+    <div id="chartContainer" data-sms-sent="{{ sms_sent }}" data-sms-allowance-remaining="{{ sms_allowance_remaining }}">
+      <h3 class="margin-bottom-1">2024 Total Message Allowance</h3>
+      <canvas id="myChart" height="100"></canvas>
+    </div>
+    <div id="message"></div>
+  {% endif %}
     <h2 class="margin-top-4 margin-bottom-1">Recent Batches</h2>
     <div class="table-wrapper">
       <table class="usa-table usa-table--borderless job-table">