adding total chart

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>