mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-29 13:52:10 +03:00
91873d1857
no issue - added `format-number` helper that uses browser's built-in `toLocaleString()` method to format numbers such as adding commas or periods to improve number readability (`123,000` instead of `123000`) - updated members chart totals to use the helper - replaced direct `.toLocaleString()` usage with the new helper so we can change global number formatting if needed
64 lines
3.2 KiB
Handlebars
64 lines
3.2 KiB
Handlebars
<div class="flex justify-between mb6 items-stretch gh-members-chart-wrapper"
|
|
{{did-insert (perform this.fetchStatsTask)}}
|
|
>
|
|
|
|
{{!-- Chart title/filter graph --}}
|
|
<div class="flex-auto bg-white br3 shadow-1 bg-grouped-table mr6 gh-members-chart-box">
|
|
<div class="flex justify-between items-center gh-members-chart-header">
|
|
<h2 class="f-small ttu midgrey fw5 mb0">Total members</h2>
|
|
<div class="view-actions">
|
|
<div class="gh-contentfilter gh-contentfilter-menu gh-contentfilter-type">
|
|
<PowerSelect
|
|
@selected={{this.selectedRange}}
|
|
@options={{this.availableRanges}}
|
|
@searchEnabled={{false}}
|
|
@onChange={{action "changeDateRange"}}
|
|
@triggerComponent="gh-power-select/trigger"
|
|
@triggerClass="gh-contentfilter-menu-trigger"
|
|
@dropdownClass="gh-contentfilter-menu-dropdown gh-members-chart-dropdown"
|
|
@matchTriggerWidth={{false}}
|
|
data-test-type-select="true"
|
|
as |range|
|
|
>
|
|
{{range.name}}
|
|
</PowerSelect>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="gh-members-chart-container">
|
|
{{#if this.fetchStatsTask.isRunning}}
|
|
<GhLoadingSpinner />
|
|
{{else}}
|
|
<EmberChart
|
|
@type="LineWithLine"
|
|
@options={{this.chartOptions}}
|
|
@data={{this.chartData}}
|
|
@height={{300}} />
|
|
{{/if}}
|
|
</div>
|
|
<div class="flex justify-between pa4 pt0 pb2 nt1">
|
|
<span class="f8 midlightgrey">{{this.startDateLabel}}</span>
|
|
<span class="f8 midlightgrey">Today</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{!-- Summary --}}
|
|
<div class="flex flex-column justify-between gh-members-chart-summary bg-white br3 shadow-1 bg-grouped-table">
|
|
<div class="flex-auto flex flex-column justify-center items-start pa4 bb b--whitegrey">
|
|
<h3 class="f-small ttu midgrey fw5">Total Members</h3>
|
|
<div class="gh-members-chart-summary-data">{{if this.fetchStatsTask.isRunning "-" (format-number this.stats.total)}}</div>
|
|
</div>
|
|
<div class="flex-auto flex flex-column justify-center items-start pa4 bb b--whitegrey">
|
|
{{#if (eq this.range "all-time")}}
|
|
<h3 class="f-small ttu midgrey fw5">All time signups</h3>
|
|
{{else}}
|
|
<h3 class="f-small ttu midgrey fw5">Signed up in the last {{this.range}} days</h3>
|
|
{{/if}}
|
|
<div class="gh-members-chart-summary-data">{{if this.fetchStatsTask.isRunning "-" (format-number this.stats.total_in_range)}}</div>
|
|
</div>
|
|
<div class="flex-auto flex flex-column justify-center items-start pa4">
|
|
<h3 class="f-small ttu midgrey fw5">Signed up today</h3>
|
|
<div class="gh-members-chart-summary-data">{{if this.fetchStatsTask.isRunning "-" (format-number this.stats.new_today)}}</div>
|
|
</div>
|
|
</div>
|
|
</div> |