adding total chart

app/main/views/organizations.py

@@ -5,7 +5,12 @@ from functools import partial
 from flask import flash, redirect, render_template, request, url_for
 from flask_login import current_user
 
-from app import current_organization, org_invite_api_client, organizations_client
+from app import (
+    current_organization,
+    org_invite_api_client,
+    organizations_client,
+    service_api_client,
+)
 from app.main import main
 from app.main.forms import (
     AdminBillingDetailsForm,
@@ -67,6 +72,17 @@ def add_organization():
 def organization_dashboard(org_id):
     year, current_financial_year = requested_and_current_financial_year(request)
     services = current_organization.services_and_usage(financial_year=year)["services"]
+
+    total_messages_sent = 0
+    total_messages_remaining = 0
+
+    for service in services:
+        service_message_ratio = service_api_client.get_service_message_ratio(
+            service["service_id"]
+        )
+        total_messages_sent += service_message_ratio.get("messages_sent", 0)
+        total_messages_remaining += service_message_ratio.get("messages_remaining", 0)
+
     return render_template(
         "views/organizations/organization/index.html",
         services=services,
@@ -84,6 +100,8 @@ def organization_dashboard(org_id):
         download_link=url_for(
             ".download_organization_usage_report", org_id=org_id, selected_year=year
         ),
+        messages_sent=total_messages_sent,
+        messages_remaining=total_messages_remaining,
     )
 
 

app/templates/views/organizations/organization/index.html

@@ -17,8 +17,43 @@
   <p class="usa-body">Combined totals across all services in {{ current_org.name }}</p>
 
   <div class="margin-bottom-3">
-    {{ pill(years, selected_year, big_number_args={'smallest': True}) }}
+    <nav aria-label="Financial year selector">
+      <ul class="usa-list usa-list--unstyled display-flex flex-gap-05 padding-0 margin-0">
+        {% for label, year, link, display_text in years %}
+          <li>
+            {% if selected_year == year %}
+              <button class="usa-button" disabled aria-current="page">
+                {{ display_text }}
+              </button>
+            {% else %}
+              <a href="{{ link }}" class="usa-button" role="button">
+                {{ display_text }}
+              </a>
+            {% endif %}
+          </li>
+        {% endfor %}
+      </ul>
+    </nav>
   </div>
+
+  <div id="totalMessageChartContainer" data-messages-sent="{{ messages_sent|default(0) }}" data-messages-remaining="{{ messages_remaining|default(0) }}">
+    <div class="grid-row flex-align-center">
+      <h2 id="chartTitle" class="margin-right-1">Total messages</h2>
+      <button
+        type="button"
+        class="usa-tooltip usa-tooltip__information margin-right-0"
+        data-position="top"
+        title="Total messages track the sum of messages across all services in this organization: pending, failed, or delivered"
+      >
+        <span class="usa-sr-only">More information</span>
+        i
+      </button>
+    </div>
+    <svg id="totalMessageChart"></svg>
+    <div id="message"></div>
+  </div>
+  <div id="totalMessageTable" class="margin-bottom-3"></div>
+
   <div class="grid-row margin-bottom-3">
     <div class="grid-col-6">
       <h2 class="font-heading-md">Emails</h2>