open-vault/ui/app/templates/components/clients/running-total.hbs
claire bontempo 6c7dee4824
UI/Add upgrade indicator client charts (#15083)
* clean up activity serailizer

* fix line chart so only plot months with data

* cleanup monthly serializer

* account for empty months in vertical bar chart

* tidy version upgrade info

* fix version history model typo

* extract const into helper

* add upgrade indicator to line chart

* fix tests

* add todos
2022-04-20 08:35:57 -07:00

77 lines
2.7 KiB
Handlebars

<div class="chart-wrapper stacked-charts">
<div class="single-chart-grid">
<div class="chart-header has-bottom-margin-xl">
<h2 class="chart-title">Vault client counts</h2>
<p class="chart-description">
A client is any user or service that interacts with Vault. They are made up of entity clients and non-entity clients.
The total client count number is an important consideration for Vault billing.
</p>
</div>
<div class="chart-container-wide">
<Clients::LineChart @dataset={{@lineChartData}} @upgradeData={{@upgradeData}} />
</div>
<div class="chart-subTitle">
<h2 class="chart-title">Running client total</h2>
<p class="chart-subtext">The number of clients which interacted with Vault during this date range. </p>
</div>
<div class="data-details-top">
<h3 class="data-details">Entity clients</h3>
<p class="data-details">
{{format-number this.entityClientData.runningTotal}}
</p>
</div>
<div class="data-details-bottom">
<h3 class="data-details">Non-entity clients</h3>
<p class="data-details">
{{format-number this.nonEntityClientData.runningTotal}}
</p>
</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>
<div class="single-chart-grid">
<div class="chart-container-wide">
<Clients::VerticalBarChart @dataset={{@barChartData}} @chartLegend={{@chartLegend}} />
</div>
<div class="chart-subTitle">
<h2 class="chart-title">New monthly clients</h2>
<p class="chart-subtext">
Clients which interacted with Vault for the first time during this date range, displayed per month.
</p>
</div>
<div class="data-details-top">
<h3 class="data-details">Average new entity clients per month</h3>
<p class="data-details">
{{format-number this.entityClientData.averageNewClients}}
</p>
</div>
<div class="data-details-bottom">
<h3 class="data-details">Average new non-entity clients per month</h3>
<p class="data-details">
{{format-number this.nonEntityClientData.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>
</div>