analytics: Add summary statistics section and user statstics.

Adds a section to the top of the stats page for organization
summary statistics. Also, adds the first two statistics to that
section for total users in the organization and users that have
been active in the past 15 days.

static/js/stats/stats.js

@@ -101,6 +101,28 @@ $(() => {
     // Add configuration for any additional tooltips here.
 });
 
+// SUMMARY STATISTICS
+function get_user_summary_statistics(data) {
+    if (data.length === 0) {
+        return;
+    }
+
+    // Users that are not deactivated and are not bots.
+    const total_users = data.all_time.at(-1);
+    const total_users_string = total_users.toLocaleString();
+
+    $("#id_total_users").text(total_users_string);
+    $("#id_total_users").closest("summary-stats").show();
+
+    // Users that have been active in the last 15 days and are not bots.
+    const active_fifeteen_day_users = data._15day.at(-1);
+    const active_fifteen_day_users_string = active_fifeteen_day_users.toLocaleString();
+
+    $("#id_active_fifteen_day_users").text(active_fifteen_day_users_string);
+    $("#id_active_fifteen_day_users").closest("summary-stats").show();
+}
+
+// PLOTLY CHARTS
 function populate_messages_sent_over_time(data) {
     if (data.end_times.length === 0) {
         // TODO: do something nicer here
@@ -785,6 +807,7 @@ function populate_number_of_users(data) {
     // Initial drawing of plot
     draw_or_update_plot(all_time_trace, true);
     $("#all_time_actives_button").addClass("selected");
+    get_user_summary_statistics(data.everyone);
 }
 
 function populate_messages_read_over_time(data) {

static/styles/portico/stats.css

@@ -30,6 +30,20 @@ p {
     text-align: center;
 }
 
+.summary-stats {
+    vertical-align: top;
+    margin: 0 auto;
+    padding: 20px;
+    border: 2px solid hsl(0, 0%, 93%);
+    background-color: hsl(0, 0%, 100%);
+    width: 395px;
+
+    h1 {
+        margin-top: 0;
+        font-size: 1.5em;
+    }
+}
+
 .flex-container {
     display: flex;
     flex-flow: wrap;

templates/analytics/stats.html

@@ -21,6 +21,14 @@
         <div id="id_stats_errors" class="alert alert-error"></div>
         <div class="center-charts">
             <h1 class="analytics-page-header">{% trans %}Zulip analytics for {{ target_name }}{% endtrans %}</h1>
+            <div class="summary-stats">
+                <h1>{{ _("Organization summary") }}</h1>
+                <ul>
+                    <li>{{ _("Number of users") }}: <span id="id_total_users"></span></li>
+                    <li>{{ _("Users active during the last 15 days") }}: <span id="id_active_fifteen_day_users"></span></li>
+
+                </ul>
+            </div>
             <div class="flex-container">
                 <div class="chart-container">
                     <h1>{{ _("Active users") }}</h1>