TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-28 05:14:12 +03:00
Code Issues Projects Releases Wiki Activity

Added empty state UI for attribution charts on dashboard

Browse Source 
refs https://github.com/TryGhost/Team/issues/1986
This commit is contained in:
Rishabh 2022-09-29 10:05:24 +05:30
parent f9215cbbe4
commit 7e68bc172a
2 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
ghost/admin/app/components/dashboard/charts/attribution.hbs
View File

@ -1,11 +1,13 @@
<section class="gh-dashboard-section gh-dashboard-attribution">
<article class="gh-dashboard-box" {{did-insert this.loadData}}>
{{!-- <h3 class="gh-dashboard-metric-label">Top sources</h3>
<div class="attribution-list-empty">
{{svg-jar "members-outline"}}
<h4>No new members in the past 7 days</h4>
<p>Once someone signs up, you’ll be able to see where they came from here.</p>
</div> --}}
{{#if (is-empty this.sources)}}
<h3 class="gh-dashboard-metric-label">Top sources</h3>
<div class="attribution-list-empty">
{{svg-jar "members-outline"}}
<h4>No new members in the past {{this.chartPeriod}} days</h4>
<p>Once someone signs up, you’ll be able to see where they came from here.</p>
</div>
{{else}}
<div class="gh-dashboard-select">
<PowerSelect
@selected={{this.selectedDisplayOption}}
@ -17,7 +19,7 @@
@dropdownClass="gh-contentfilter-menu-dropdown is-narrow"
@matchTriggerWidth={{false}}
@horizontalPosition="right"
as |option|
>
{{#if option.name}}{{option.name}}{{else}}<span class="red">Unknown option</span>{{/if}}
@ -48,5 +50,6 @@
</div>
</div>
</div>
{{/if}}
</article>
</section>

9
ghost/admin/app/components/dashboard/charts/attribution.js
View File

@ -39,6 +39,15 @@ export default class Recents extends Component {
return this.dashboardStats?.memberSourceAttributionCounts || [];
}
// chartDays value for more than 7 days has an extra day to show all ticks
get chartPeriod() {
if (this.dashboardStats.chartDays > 7) {
return this.dashboardStats.chartDays - 1;
}
return this.dashboardStats.chartDays;
}
get chartSources() {
const counts = this.dashboardStats?.memberSourceAttributionCounts || [];
// filter null source from the list