notifications-admin/app/templates/components/big-number.html

{% macro big_number(number, label, link=None, currency='', smaller=False, smallest=False) %}
  {% if link %}
    <a class="big-number-link" href="{{ link }}">
  {% endif %}
  <div class="big-number{% if smaller %}-smaller{% endif %}{% if smallest %}-smallest{% endif %}">
    <div class="big-number-number">
      {% if number is number %}
        {% if currency %}
          {{ "{}{:,.2f}".format(currency, number) }}
        {% else %}
          {{ "{:,}".format(number) }}
        {% endif %}
      {% else %}
        {{ number }}
      {% endif %}
    </div>
    {% if label %}
      <span class="big-number-label">{{ label }}</span>
    {% endif %}
  </div>
  {% if link %}
    </a>
  {% endif %}
{% endmacro %}


{% macro big_number_with_status(
  number,
  label,
  failures,
  failure_percentage,
  danger_zone=False,
  failure_link=None,
  link=None,
  show_failures=True,
  smaller=False,
  smallest=False
) %}
  <div class="big-number-with-status">
    {{ big_number(number, label, link=link, smaller=smaller, smallest=smallest) }}
    {% if show_failures %}
      <div class="big-number-status{% if danger_zone %}-failing{% endif %}">
        {% if failures %}
          {% if failure_link %}
            <a href="{{ failure_link }}">
              {{ "{:,}".format(failures) }} failed – {{ failure_percentage }}%
            </a>
          {% else %}
            {{ "{:,}".format(failures) }} failed – {{ failure_percentage }}%
          {% endif %}
        {% else %}
          No failures
        {% endif %}
      </div>
    {% endif %}
  </div>
{% endmacro %}


{% macro big_number_simple(number, label) %}
  <div class="big-number-dark bottom-gutter-2-3">
    <div class="big-number-number">
      {% if number is number %}
        {{ "{:,}".format(number) }}
      {% else %}
        {{ number }}
      {% endif %}
    </div>
    {% if label %}
      <span class="big-number-label">{{ label }}</span>
    {% endif %}
  </div>
{% endmacro %}