open-vault/ui/app/templates/components/clients/running-total.hbs

<div class="chart-wrapper stacked-charts">
  <div class="single-chart-grid">
    <div class="chart-header has-bottom-margin-xl">
      <h2 class="chart-title">Vault client counts</h2>
      <p class="chart-description">
        A unique active client is any user or service that interacts with Vault. They are made up of direct entities and
        non-entity tokens. As Vault’s primary billing metric, your total client count is the number for which you will be
        charged at the end of your billing period.
      </p>
    </div>

    <div class="chart-container-wide">
      <Clients::LineChart @dataset={{@lineChartData}} />
    </div>

    <div class="chart-subTitle">
      <h2 class="chart-title">Running client total</h2>
      <p class="chart-subtext">The number of clients which interacted with Vault during this date range. </p>
    </div>

    <div class="data-details-top">
      {{#let (get this.getTotalClients 0) as |stat|}}
        <h3 class="data-details">{{capitalize stat.label}}</h3>
        <p class="data-details">
          {{#if stat.total}}
            {{format-number stat.total}}
          {{else}}
            <span class="has-text-danger is-size-8">
              <Icon @name="x-square-fill" />Error getting total
            </span>
          {{/if}}
        </p>
      {{/let}}
    </div>

    <div class="data-details-bottom">
      {{#let (get this.getTotalClients 1) as |stat|}}
        <h3 class="data-details">{{capitalize stat.label}}</h3>
        <p class="data-details">
          {{#if stat.total}}
            {{format-number stat.total}}
          {{else}}
            <span class="has-text-danger is-size-8">
              <Icon @name="x-square-fill" />Error getting total
            </span>
          {{/if}}
        </p>
      {{/let}}
    </div>

    <div class="legend-right">
      <span class="light-dot"></span><span class="legend-label">{{capitalize @chartLegend.0.label}}</span>
      <span class="dark-dot"></span><span class="legend-label">{{capitalize @chartLegend.1.label}}</span>
    </div>
  </div>

  <div class="single-chart-grid">
    <div class="chart-container-wide">
      <Clients::VerticalBarChart @dataset={{@barChartData}} @chartLegend={{@chartLegend}} />
    </div>

    <div class="chart-subTitle">
      <h2 class="chart-title">New monthly clients</h2>
      <p class="chart-subtext">
        Clients which interacted with Vault for the first time during this date range, displayed per month.
      </p>
    </div>

    <div class="data-details-top">
      {{#let (get this.getAverageNewClients 0) as |stat|}}
        <h3 class="data-details">Average new {{stat.label}} per month</h3>
        <p class="data-details">
          {{#if stat.average}}
            {{format-number stat.average}}
          {{else}}
            <span class="has-text-danger is-size-8">
              <Icon @name="x-square-fill" />Average cannot be calculated
            </span>
          {{/if}}
        </p>
      {{/let}}
    </div>

    <div class="data-details-bottom">
      {{#let (get this.getAverageNewClients 1) as |stat|}}
        <h3 class="data-details">Average new {{stat.label}} per month</h3>
        <p class="data-details">
          {{#if stat.average}}
            {{format-number stat.average}}
          {{else}}
            <span class="has-text-danger is-size-8">
              <Icon @name="x-square-fill" />Average cannot be calculated
            </span>
          {{/if}}
        </p>
      {{/let}}
    </div>

    <div class="timestamp">
      Updated Nov 15 2021, 4:07:32 pm
    </div>

    <div class="legend-right">
      <span class="light-dot"></span><span class="legend-label">{{capitalize @chartLegend.0.label}}</span>
      <span class="dark-dot"></span><span class="legend-label">{{capitalize @chartLegend.1.label}}</span>
    </div>
  </div>
</div>