<div class="chart-wrapper single-chart-grid" data-test-monthly-usage>
<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={{concat (unless @verticalBarChartData "chart-empty-state ") "chart-container-wide"}}>
<Clients::VerticalBarChart @dataset={{@verticalBarChartData}} @chartLegend={{@chartLegend}} />
<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.
<div class="data-details-top" data-test-monthly-usage-average-total>
<h3 class="data-details">Average total clients per month</h3>
<p class="data-details">
{{format-number this.averageTotalClients}}
<div class="data-details-bottom" data-test-monthly-usage-average-new>
<h3 class="data-details">Average new clients per month</h3>
{{format-number this.averageNewClients}}
<div data-test-monthly-usage-timestamp class="timestamp">
{{#if @timestamp}}
Updated
{{date-format @timestamp "MMM d yyyy, h:mm:ss aaa"}}
{{/if}}
{{#if @verticalBarChartData}}
<div data-test-monthly-usage-legend 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>