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 this date range.
    </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 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">
      {{format-number this.averageTotalClients}}
    </p>
  </div>

  <div class="data-details-bottom">
    <h3 class="data-details">Average new clients per month</h3>
    <p class="data-details">
      {{format-number this.averageNewClients}}
    </p>
  </div>

  <div class="timestamp">
    {{#if @timestamp}}
      Updated
      {{date-format @timestamp "MMM d yyyy, h:mm:ss aaa"}}
    {{/if}}
  </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>