Ghost/ghost/admin/app/components/gh-members-chart.hbs

64 lines
2.8 KiB
Handlebars
Raw Normal View History

<div class="flex justify-between mb6 items-stretch gh-members-chart-wrapper gh-main-width"
{{did-insert (perform this.fetchStatsTask)}}
>
{{!-- Chart title/filter graph --}}
2021-02-05 17:43:20 +03:00
<div class="gh-members-chart-box">
<div class="gh-members-chart-header">
2021-02-05 14:04:36 +03:00
<h2 class="gh-members-chart-summary-heading">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 (not this.stats)}}
<GhLoadingSpinner />
{{else}}
<EmberChart
@type="LineWithLine"
@options={{this.chartOptions}}
@data={{this.chartData}}
@height={{300}} />
{{/if}}
</div>
2021-02-05 17:43:20 +03:00
<div class="gh-members-chart-xlabels">
<span>{{this.startDateLabel}}</span>
<span>Today</span>
</div>
</div>
{{!-- Summary --}}
2021-02-05 17:43:20 +03:00
<div class="gh-content-box vertical gh-members-chart-summary">
<section>
2021-02-05 14:04:36 +03:00
<h3 class="gh-members-chart-summary-heading">Total Members</h3>
<div class="gh-members-chart-summary-data">{{if (not this.stats) "-" (format-number this.stats.total)}}</div>
2021-02-05 17:43:20 +03:00
</section>
<section>
{{#if (eq this.selectedRange.days "all-time")}}
2021-02-05 14:04:36 +03:00
<h3 class="gh-members-chart-summary-heading">All time signups</h3>
{{else}}
2021-02-05 14:04:36 +03:00
<h3 class="gh-members-chart-summary-heading">Signed up in the last {{this.selectedRange.days}} days</h3>
{{/if}}
<div class="gh-members-chart-summary-data">{{if (not this.stats) "-" (format-number this.stats.total_in_range)}}</div>
2021-02-05 17:43:20 +03:00
</section>
<section>
2021-02-05 14:04:36 +03:00
<h3 class="gh-members-chart-summary-heading">Signed up today</h3>
<div class="gh-members-chart-summary-data">{{if (not this.stats) "-" (format-number this.stats.new_today)}}</div>
2021-02-05 17:43:20 +03:00
</section>
</div>
</div>