Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-17 23:44:39 -05:00
Code Issues Activity

Better faked graphs and various tweaks for Dashboard 5.0 prototype

Browse source 
refs: https://github.com/TryGhost/Team/issues/1436

- added in lots of demo graphs using EmberChart
- renamed some files in v5 folder for better conventions
- put each graph for new dashboard into separate components
This commit is contained in:
James Morris 2022-03-22 15:37:17 +00:00 • committed by Rishabh
parent fcf7f516b8
commit d05d22c177
22 changed files with 318 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
ghost/admin/app/components/dashboard/dashboard-v5.hbs
View file

@ -1,7 +1,7 @@
<section>
{{#if this.areMembersEnabled}}
<section class="prototype-section">
<Dashboard::V5::MembersCounts />
<Dashboard::V5::ChartMembersCounts />
</section>
<section class="prototype-section">
@ -10,35 +10,43 @@
</article>
<article class="gh-dashboard-box">
Total members graph
<Dashboard::V5::ChartTotalMembers />
</article>
{{#if this.hasPaidTiers}}
<article class="gh-dashboard-box">
MRR graph
<div class="prototype-section">
<div class="prototype-counts">
<article class="prototype-box">
<Dashboard::V5::ChartMonthlyRevenue />
</article>
<article class="gh-dashboard-box">
Total paid graph
<article class="prototype-box">
<Dashboard::V5::ChartTotalPaid />
</article>
</div>
</div>
<div class="prototype-section">
<div class="prototype-counts">
<article class="prototype-box">
<Dashboard::V5::ChartPaidMembers />
</article>
<article class="gh-dashboard-box">
Paid members graph (new, canceled)
</article>
<article class="gh-dashboard-box">
Paid mix with cadence or tiers segmented control
<article class="prototype-box">
<Dashboard::V5::ChartPaidMix />
</article>
</div>
</div>
{{/if}}
</section>
<section class="prototype-section">
<Dashboard::V5::MembersEngagement />
<Dashboard::V5::ChartEngagement />
</section>
{{/if}}
{{#if this.areNewslettersEnabled}}
<section class="prototype-section">
<Dashboard::V5::MembersEmail />
<Dashboard::V5::ChartEmailOpenRate />
</section>
{{/if}}
@ -55,6 +63,13 @@
Activity feed
</article>
</section>
<section class="prototype-section">
<h2>Resources</h2>
<article class="gh-dashboard-box">
<Dashboard::V5::ResourceGeneral />
</article>
</section>
</section>
<div class="gh-main-section prototype-panel">

25
ghost/admin/app/components/dashboard/v5/chart-email-open-rate.hbs Normal file
View file

@ -0,0 +1,25 @@
<h2>Email</h2>
<div class="prototype-counts">
<div class="prototype-counts col">
<div class="prototype-box">
<div class="number">{{this.dataSubscribers}}</div>
<div>Newsletter subscribers</div>
</div>
<div class="prototype-box">
<div class="number">{{this.dataEmailsSent}}</div>
<div>Emails sent in the past 30 days</div>
</div>
</div>
<div class="prototype-box">
<h4>Email open rate</h4>
<EmberChart
@type={{this.chartType}}
@data={{this.chartData}}
@options={{this.chartOptions}}
@height={{this.chartHeight}} />
</div>
</div>

39
ghost/admin/app/components/dashboard/v5/chart-email-open-rate.js Normal file
View file

@ -0,0 +1,39 @@
import Component from '@glimmer/component';
export default class ChartEmailOpenRate extends Component {
get dataSubscribers() {
return '9,250';
}
get dataEmailsSent() {
return '40.3k';
}
get chartType() {
return 'bar';
}
get chartData() {
return {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June'],
datasets: [{
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
backgroundColor: '#14b8ff',
tension: 0.1
}]
};
}
get chartOptions() {
return {
legend: {
display: false
}
};
}
get chartHeight() {
return 150;
}
}

4
ghost/admin/app/components/dashboard/v5/members-engagement.hbs → ghost/admin/app/components/dashboard/v5/chart-engagement.hbs
View file

@ -2,12 +2,12 @@
<div class="prototype-counts">
<div class="prototype-box">
<div class="number">67%</div>
<div class="number">{{this.data30Days}}</div>
<div>Engaged in past 30 days</div>
</div>
<div class="prototype-box">
<div class="number">31%</div>
<div class="number">{{this.data7Days}}</div>
<div>Engaged in past 7 days</div>
</div>
</div>

11
ghost/admin/app/components/dashboard/v5/chart-engagement.js Normal file
View file

@ -0,0 +1,11 @@
import Component from '@glimmer/component';
export default class ChartEngagement extends Component {
get data30Days() {
return '67%';
}
get data7Days() {
return '31%';
}
}

6
ghost/admin/app/components/dashboard/v5/members-counts.hbs → ghost/admin/app/components/dashboard/v5/chart-members-counts.hbs
View file

@ -1,16 +1,16 @@
<div class="prototype-counts">
<div class="prototype-box">
<div class="number">10.000</div>
<div class="number">{{this.dataTotalMembers}}</div>
<div>Total members</div>
</div>
<div class="prototype-box">
<div class="number">1.500</div>
<div class="number">{{this.dataPaidMembers}}</div>
<div>Paid members</div>
</div>
<div class="prototype-box">
<div class="number">8.500</div>
<div class="number">{{this.dataFreeMembers}}</div>
<div>Free members</div>
</div>
</div>

15
ghost/admin/app/components/dashboard/v5/chart-members-counts.js Normal file
View file

@ -0,0 +1,15 @@
import Component from '@glimmer/component';
export default class ChartMembersCounts extends Component {
get dataTotalMembers() {
return '10,000';
}
get dataPaidMembers() {
return '1,500';
}
get dataFreeMembers() {
return '8,500';
}
}

6
ghost/admin/app/components/dashboard/v5/chart-monthly-revenue.hbs Normal file
View file

@ -0,0 +1,6 @@
<h4>MRR</h4>
<EmberChart
@type={{this.chartType}}
@data={{this.chartData}}
@options={{this.chartOptions}}
@height={{this.chartHeight}} />

31
ghost/admin/app/components/dashboard/v5/chart-monthly-revenue.js Normal file
View file

@ -0,0 +1,31 @@
import Component from '@glimmer/component';
export default class ChartMonthlyRevenue extends Component {
get chartType() {
return 'line';
}
get chartData() {
return {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June'],
datasets: [{
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: '#14b8ff',
tension: 0.1
}]
};
}
get chartOptions() {
return {
legend: {
display: false
}
};
}
get chartHeight() {
return 150;
}
}

6
ghost/admin/app/components/dashboard/v5/chart-paid-members.hbs Normal file
View file

@ -0,0 +1,6 @@
<h4>Paid members</h4>
<EmberChart
@type={{this.chartType}}
@data={{this.chartData}}
@options={{this.chartOptions}}
@height={{this.chartHeight}} />

37
ghost/admin/app/components/dashboard/v5/chart-paid-members.js Normal file
View file

@ -0,0 +1,37 @@
import Component from '@glimmer/component';
export default class ChartPaidMembers extends Component {
get chartType() {
return 'bar';
}
get chartData() {
return {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June'],
datasets: [
{
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
backgroundColor: '#14b8ff',
tension: 0.1
},{
data: [-65, -59, -80, -81, -56, -55, -40],
fill: false,
backgroundColor: '#E16262',
tension: 0.1
}]
};
}
get chartOptions() {
return {
legend: {
display: false
}
};
}
get chartHeight() {
return 150;
}
}

6
ghost/admin/app/components/dashboard/v5/chart-paid-mix.hbs Normal file
View file

@ -0,0 +1,6 @@
<h4>Paid mix</h4>
<EmberChart
@type={{this.chartType}}
@data={{this.chartData}}
@options={{this.chartOptions}}
@height={{this.chartHeight}} />

31
ghost/admin/app/components/dashboard/v5/chart-paid-mix.js Normal file
View file

@ -0,0 +1,31 @@
import Component from '@glimmer/component';
export default class ChartPaidMix extends Component {
get chartType() {
return 'pie';
}
get chartData() {
return {
labels: ['Monthly', 'Annual'],
datasets: [{
data: [20, 80],
fill: false,
backgroundColor: ['#14b8ff'],
tension: 0.1
}]
};
}
get chartOptions() {
return {
legend: {
display: false
}
};
}
get chartHeight() {
return 150;
}
}

6
ghost/admin/app/components/dashboard/v5/chart-total-members.hbs Normal file
View file

@ -0,0 +1,6 @@
<h4>Total members</h4>
<EmberChart
@type={{this.chartType}}
@data={{this.chartData}}
@options={{this.chartOptions}}
@height={{this.chartHeight}} />

31
ghost/admin/app/components/dashboard/v5/chart-total-members.js Normal file
View file

@ -0,0 +1,31 @@
import Component from '@glimmer/component';
export default class ChartTotalMembers extends Component {
get chartType() {
return 'line';
}
get chartData() {
return {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June'],
datasets: [{
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: '#14b8ff',
tension: 0.1
}]
};
}
get chartOptions() {
return {
legend: {
display: false
}
};
}
get chartHeight() {
return 300;
}
}

6
ghost/admin/app/components/dashboard/v5/chart-total-paid.hbs Normal file
View file

@ -0,0 +1,6 @@
<h4>Total paid</h4>
<EmberChart
@type={{this.chartType}}
@data={{this.chartData}}
@options={{this.chartOptions}}
@height={{this.chartHeight}} />

31
ghost/admin/app/components/dashboard/v5/chart-total-paid.js Normal file
View file

@ -0,0 +1,31 @@
import Component from '@glimmer/component';
export default class ChartTotalPaid extends Component {
get chartType() {
return 'line';
}
get chartData() {
return {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June'],
datasets: [{
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: '#14b8ff',
tension: 0.1
}]
};
}
get chartOptions() {
return {
legend: {
display: false
}
};
}
get chartHeight() {
return 150;
}
}

7
ghost/admin/app/components/dashboard/v5/members-counts.js
View file

@ -1,7 +0,0 @@
import Component from '@glimmer/component';
export default class MembersCounts extends Component {
get placeholderGetter() {
return '9.150';
}
}

20
ghost/admin/app/components/dashboard/v5/members-email.hbs
View file

@ -1,20 +0,0 @@
<h2>Email</h2>
<div class="prototype-counts">
<div class="prototype-counts col">
<div class="prototype-box">
<div class="number">{{this.subscribersCount}}</div>
<div>Newsletter Subscribers</div>
</div>
<div class="prototype-box">
<div class="number">40.3k</div>
<div>Emails sent in the past 30 days</div>
</div>
</div>
<div class="prototype-box">
Email open rate graph
</div>
</div>

7
ghost/admin/app/components/dashboard/v5/members-email.js
View file

@ -1,7 +0,0 @@
import Component from '@glimmer/component';
export default class MembersEmail extends Component {
get subscribersCount() {
return '9.150';
}
}

7
ghost/admin/app/components/dashboard/v5/members-engagement.js
View file

@ -1,7 +0,0 @@
import Component from '@glimmer/component';
export default class MembersEngagement extends Component {
get placeholderGetter() {
return '9.150';
}
}

1
ghost/admin/app/components/dashboard/v5/resource-general.hbs Normal file
View file

@ -0,0 +1 @@
Links to resource blog