mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-30 11:54:33 +03:00
6a1edceded
no issue Adds new members growth chart in members list screen to highlight growth of members over different date ranges
55 lines
2.9 KiB
Handlebars
55 lines
2.9 KiB
Handlebars
<div class="flex justify-between mb6 items-stretch gh-members-chart-wrapper">
|
|
|
|
{{!-- 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">
|
|
{{#power-select
|
|
selected=selectedRange
|
|
options=availableRange
|
|
searchEnabled=false
|
|
onchange=(action "changeDateRange")
|
|
tagName="div"
|
|
classNames="gh-contentfilter-menu gh-contentfilter-type"
|
|
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}}
|
|
{{/power-select}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="gh-members-chart-container">
|
|
{{ember-chart type='LineWithLine' options=subData.chartData.options data=subData.chartData.data height=300}}
|
|
</div>
|
|
<div class="flex justify-between pa4 pt0 pb2 nt1">
|
|
<span class="f8 midlightgrey">{{subData.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">{{subData.totalSubs}}</div>
|
|
</div>
|
|
<div class="flex-auto flex flex-column justify-center items-start pa4 bb b--whitegrey">
|
|
{{#if (eq 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 {{range}} days</h3>
|
|
{{/if}}
|
|
<div class="gh-members-chart-summary-data">{{subData.totalSubsInRange}}</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">{{subData.totalSubsToday}}</div>
|
|
</div>
|
|
</div>
|
|
</div> |