open-vault/ui/app/templates/components/clients/monthly-usage.hbs

<div class="chart-wrapper single-chart-grid">
  <div class="chart-header has-bottom-margin-xl">
    <h2 class="chart-title">Vault usage</h2>
    <p class="chart-description">
      This data can be used to understand how many total clients are using Vault each month for the time period selected
      above.
    </p>
  </div>

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

  <div class="chart-subTitle">
    <h2 class="chart-title">Total monthly clients</h2>
    <p class="chart-subtext">
      Each unique client is counted once per month. This can help with capacity planning.
    </p>
  </div>

  <div class="data-details-top">
    <h3 class="data-details">Average total clients per month</h3>
    <p class="data-details">
      {{#if this.averageTotalClients}}
        {{format-number this.averageTotalClients}}
      {{else}}
        <span class="has-text-danger is-size-8">
          <Icon @name="x-square-fill" />Average cannot be calculated
        </span>
      {{/if}}
    </p>
  </div>

  <div class="data-details-bottom">
    <h3 class="data-details">Average new clients per month</h3>
    <p class="data-details">
      {{#if this.averageNewClients}}
        {{format-number this.averageNewClients}}
      {{else}}
        <span class="has-text-danger is-size-8">
          <Icon @name="x-square-fill" />Average cannot be calculated
        </span>
      {{/if}}
    </p>
  </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>