open-vault/ui/app/templates/components/clients/monthly-usage.hbs
claire bontempo 0e1424782b
UI/Revert client count work pushed to 1.11, add monthly and activity serializers (#13717)
* adds serializer

* removes all 1.11 related work to monthly/new client counting

* move from new-init-activity to activity

* merge setup changes add monthly model/adapter

* delete new-init-activity files

* add graph to current month view
2022-01-25 14:06:56 -08:00

56 lines
1.8 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 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>