open-vault/ui/app/templates/components/clients/monthly-usage.hbs
claire bontempo ece79f1695
UI/Clients single month template (#13635)
* 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
2022-01-13 10:00:50 -08:00

37 lines
1.1 KiB
Handlebars

<div class="chart-wrapper single-chart-grid">
<div class="chart-header has-bottom-margin-xl">
<h2 class="chart-title">{{@title}}</h2>
{{#if @description}}
<p class="chart-description">{{@description}}</p>
{{/if}}
</div>
<div class="chart-container-wide">
<Clients::VerticalBarChart @dataset={{@verticalBarChartData}} @chartLegend={{@chartLegend}} />
</div>
<div class="chart-subTitle">
<h2 class="chart-title">{{@subTitle}}</h2>
<p class="chart-subtext">{{@subText}}</p>
</div>
<div class="data-details-top">
<h3 class="data-details">{{@dataOne}}</h3>
<p class="data-details">{{@dataOneData}}</p>
</div>
<div class="data-details-bottom">
<h3 class="data-details">{{@dataTwo}}</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>