ece79f1695
* create SingleMonth template * updates stattext styling * add flex helper and fix header margin * rename variable in formatNumber helper * update templates with size-specific margins * clarify class name * fix jsdoc param type
64 lines
2.2 KiB
Handlebars
64 lines
2.2 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">{{@title}}</h2>
|
|
<p class="chart-description">{{@description}}</p>
|
|
</div>
|
|
|
|
<div class="chart-container-wide">
|
|
<Clients::LineChart @dataset={{@lineChartData}} />
|
|
</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">{{capitalize @chartLegend.0.label}}</h3>
|
|
<p class="data-details">1,307</p>
|
|
</div>
|
|
|
|
<div class="data-details-bottom">
|
|
<h3 class="data-details">{{capitalize @chartLegend.1.label}}</h3>
|
|
<p class="data-details">8,005</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 {{@chartLegend.0.label}} per month</h3>
|
|
<p class="data-details">{{@dataOneData}}</p>
|
|
</div>
|
|
|
|
<div class="data-details-bottom">
|
|
<h3 class="data-details">Average new {{@chartLegend.1.label}} per month</h3>
|
|
<p class="data-details">{{@dataTwoData}}</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>
|
|
</div> |