85b2263dce
* clarify timestamp in jsdocs * make title bottom margin smaller * add monthly usage component * fix doubled up css * clean up average helpers * copy update * change arg to component variable * fix awkward grammar * clean up mirage handler * address comments * remove prop
46 lines
1.4 KiB
Handlebars
46 lines
1.4 KiB
Handlebars
<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> |