From d05d22c17760fcac5a2036e1d2c19d978d5ebb69 Mon Sep 17 00:00:00 2001 From: James Morris Date: Tue, 22 Mar 2022 15:37:17 +0000 Subject: [PATCH] Better faked graphs and various tweaks for Dashboard 5.0 prototype 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 --- .../app/components/dashboard/dashboard-v5.hbs | 47 ++++++++++++------- .../dashboard/v5/chart-email-open-rate.hbs | 25 ++++++++++ .../dashboard/v5/chart-email-open-rate.js | 39 +++++++++++++++ ...rs-engagement.hbs => chart-engagement.hbs} | 4 +- .../dashboard/v5/chart-engagement.js | 11 +++++ ...rs-counts.hbs => chart-members-counts.hbs} | 6 +-- .../dashboard/v5/chart-members-counts.js | 15 ++++++ .../dashboard/v5/chart-monthly-revenue.hbs | 6 +++ .../dashboard/v5/chart-monthly-revenue.js | 31 ++++++++++++ .../dashboard/v5/chart-paid-members.hbs | 6 +++ .../dashboard/v5/chart-paid-members.js | 37 +++++++++++++++ .../dashboard/v5/chart-paid-mix.hbs | 6 +++ .../components/dashboard/v5/chart-paid-mix.js | 31 ++++++++++++ .../dashboard/v5/chart-total-members.hbs | 6 +++ .../dashboard/v5/chart-total-members.js | 31 ++++++++++++ .../dashboard/v5/chart-total-paid.hbs | 6 +++ .../dashboard/v5/chart-total-paid.js | 31 ++++++++++++ .../components/dashboard/v5/members-counts.js | 7 --- .../components/dashboard/v5/members-email.hbs | 20 -------- .../components/dashboard/v5/members-email.js | 7 --- .../dashboard/v5/members-engagement.js | 7 --- .../dashboard/v5/resource-general.hbs | 1 + 22 files changed, 318 insertions(+), 62 deletions(-) create mode 100644 ghost/admin/app/components/dashboard/v5/chart-email-open-rate.hbs create mode 100644 ghost/admin/app/components/dashboard/v5/chart-email-open-rate.js rename ghost/admin/app/components/dashboard/v5/{members-engagement.hbs => chart-engagement.hbs} (68%) create mode 100644 ghost/admin/app/components/dashboard/v5/chart-engagement.js rename ghost/admin/app/components/dashboard/v5/{members-counts.hbs => chart-members-counts.hbs} (59%) create mode 100644 ghost/admin/app/components/dashboard/v5/chart-members-counts.js create mode 100644 ghost/admin/app/components/dashboard/v5/chart-monthly-revenue.hbs create mode 100644 ghost/admin/app/components/dashboard/v5/chart-monthly-revenue.js create mode 100644 ghost/admin/app/components/dashboard/v5/chart-paid-members.hbs create mode 100644 ghost/admin/app/components/dashboard/v5/chart-paid-members.js create mode 100644 ghost/admin/app/components/dashboard/v5/chart-paid-mix.hbs create mode 100644 ghost/admin/app/components/dashboard/v5/chart-paid-mix.js create mode 100644 ghost/admin/app/components/dashboard/v5/chart-total-members.hbs create mode 100644 ghost/admin/app/components/dashboard/v5/chart-total-members.js create mode 100644 ghost/admin/app/components/dashboard/v5/chart-total-paid.hbs create mode 100644 ghost/admin/app/components/dashboard/v5/chart-total-paid.js delete mode 100644 ghost/admin/app/components/dashboard/v5/members-counts.js delete mode 100644 ghost/admin/app/components/dashboard/v5/members-email.hbs delete mode 100644 ghost/admin/app/components/dashboard/v5/members-email.js delete mode 100644 ghost/admin/app/components/dashboard/v5/members-engagement.js create mode 100644 ghost/admin/app/components/dashboard/v5/resource-general.hbs diff --git a/ghost/admin/app/components/dashboard/dashboard-v5.hbs b/ghost/admin/app/components/dashboard/dashboard-v5.hbs index 1f8e3607a7..def3ce7c25 100644 --- a/ghost/admin/app/components/dashboard/dashboard-v5.hbs +++ b/ghost/admin/app/components/dashboard/dashboard-v5.hbs @@ -1,7 +1,7 @@
{{#if this.areMembersEnabled}}
- +
@@ -10,35 +10,43 @@
- Total members graph +
{{#if this.hasPaidTiers}} -
- MRR graph -
+
+
+
+ +
-
- Total paid graph -
+
+ +
+
+
-
- Paid members graph (new, canceled) -
+
+
+
+ +
-
- Paid mix with cadence or tiers segmented control -
+
+ +
+
+
{{/if}}
- +
{{/if}} {{#if this.areNewslettersEnabled}}
- +
{{/if}} @@ -55,6 +63,13 @@ Activity feed
+ +
+

Resources

+
+ +
+
diff --git a/ghost/admin/app/components/dashboard/v5/chart-email-open-rate.hbs b/ghost/admin/app/components/dashboard/v5/chart-email-open-rate.hbs new file mode 100644 index 0000000000..4a81339171 --- /dev/null +++ b/ghost/admin/app/components/dashboard/v5/chart-email-open-rate.hbs @@ -0,0 +1,25 @@ +

Email

+ +
+
+
+
{{this.dataSubscribers}}
+
Newsletter subscribers
+
+ +
+
{{this.dataEmailsSent}}
+
Emails sent in the past 30 days
+
+
+ +
+

Email open rate

+ +
+
+ diff --git a/ghost/admin/app/components/dashboard/v5/chart-email-open-rate.js b/ghost/admin/app/components/dashboard/v5/chart-email-open-rate.js new file mode 100644 index 0000000000..6916684aac --- /dev/null +++ b/ghost/admin/app/components/dashboard/v5/chart-email-open-rate.js @@ -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; + } +} diff --git a/ghost/admin/app/components/dashboard/v5/members-engagement.hbs b/ghost/admin/app/components/dashboard/v5/chart-engagement.hbs similarity index 68% rename from ghost/admin/app/components/dashboard/v5/members-engagement.hbs rename to ghost/admin/app/components/dashboard/v5/chart-engagement.hbs index e7be03fd8a..9a0c3308e1 100644 --- a/ghost/admin/app/components/dashboard/v5/members-engagement.hbs +++ b/ghost/admin/app/components/dashboard/v5/chart-engagement.hbs @@ -2,12 +2,12 @@
-
67%
+
{{this.data30Days}}
Engaged in past 30 days
-
31%
+
{{this.data7Days}}
Engaged in past 7 days
\ No newline at end of file diff --git a/ghost/admin/app/components/dashboard/v5/chart-engagement.js b/ghost/admin/app/components/dashboard/v5/chart-engagement.js new file mode 100644 index 0000000000..2516190980 --- /dev/null +++ b/ghost/admin/app/components/dashboard/v5/chart-engagement.js @@ -0,0 +1,11 @@ +import Component from '@glimmer/component'; + +export default class ChartEngagement extends Component { + get data30Days() { + return '67%'; + } + + get data7Days() { + return '31%'; + } +} diff --git a/ghost/admin/app/components/dashboard/v5/members-counts.hbs b/ghost/admin/app/components/dashboard/v5/chart-members-counts.hbs similarity index 59% rename from ghost/admin/app/components/dashboard/v5/members-counts.hbs rename to ghost/admin/app/components/dashboard/v5/chart-members-counts.hbs index 577ce224d7..c64440b145 100644 --- a/ghost/admin/app/components/dashboard/v5/members-counts.hbs +++ b/ghost/admin/app/components/dashboard/v5/chart-members-counts.hbs @@ -1,16 +1,16 @@
-
10.000
+
{{this.dataTotalMembers}}
Total members
-
1.500
+
{{this.dataPaidMembers}}
Paid members
-
8.500
+
{{this.dataFreeMembers}}
Free members
\ No newline at end of file diff --git a/ghost/admin/app/components/dashboard/v5/chart-members-counts.js b/ghost/admin/app/components/dashboard/v5/chart-members-counts.js new file mode 100644 index 0000000000..b392fc0258 --- /dev/null +++ b/ghost/admin/app/components/dashboard/v5/chart-members-counts.js @@ -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'; + } +} diff --git a/ghost/admin/app/components/dashboard/v5/chart-monthly-revenue.hbs b/ghost/admin/app/components/dashboard/v5/chart-monthly-revenue.hbs new file mode 100644 index 0000000000..4cd769c6ba --- /dev/null +++ b/ghost/admin/app/components/dashboard/v5/chart-monthly-revenue.hbs @@ -0,0 +1,6 @@ +

MRR

+ \ No newline at end of file diff --git a/ghost/admin/app/components/dashboard/v5/chart-monthly-revenue.js b/ghost/admin/app/components/dashboard/v5/chart-monthly-revenue.js new file mode 100644 index 0000000000..aa294c5297 --- /dev/null +++ b/ghost/admin/app/components/dashboard/v5/chart-monthly-revenue.js @@ -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; + } +} diff --git a/ghost/admin/app/components/dashboard/v5/chart-paid-members.hbs b/ghost/admin/app/components/dashboard/v5/chart-paid-members.hbs new file mode 100644 index 0000000000..b41a5164b7 --- /dev/null +++ b/ghost/admin/app/components/dashboard/v5/chart-paid-members.hbs @@ -0,0 +1,6 @@ +

Paid members

+ \ No newline at end of file diff --git a/ghost/admin/app/components/dashboard/v5/chart-paid-members.js b/ghost/admin/app/components/dashboard/v5/chart-paid-members.js new file mode 100644 index 0000000000..183258c489 --- /dev/null +++ b/ghost/admin/app/components/dashboard/v5/chart-paid-members.js @@ -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; + } +} diff --git a/ghost/admin/app/components/dashboard/v5/chart-paid-mix.hbs b/ghost/admin/app/components/dashboard/v5/chart-paid-mix.hbs new file mode 100644 index 0000000000..361c4e94d7 --- /dev/null +++ b/ghost/admin/app/components/dashboard/v5/chart-paid-mix.hbs @@ -0,0 +1,6 @@ +

Paid mix

+ \ No newline at end of file diff --git a/ghost/admin/app/components/dashboard/v5/chart-paid-mix.js b/ghost/admin/app/components/dashboard/v5/chart-paid-mix.js new file mode 100644 index 0000000000..32443fce1f --- /dev/null +++ b/ghost/admin/app/components/dashboard/v5/chart-paid-mix.js @@ -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; + } +} diff --git a/ghost/admin/app/components/dashboard/v5/chart-total-members.hbs b/ghost/admin/app/components/dashboard/v5/chart-total-members.hbs new file mode 100644 index 0000000000..654331aeac --- /dev/null +++ b/ghost/admin/app/components/dashboard/v5/chart-total-members.hbs @@ -0,0 +1,6 @@ +

Total members

+ \ No newline at end of file diff --git a/ghost/admin/app/components/dashboard/v5/chart-total-members.js b/ghost/admin/app/components/dashboard/v5/chart-total-members.js new file mode 100644 index 0000000000..2e5e8c4952 --- /dev/null +++ b/ghost/admin/app/components/dashboard/v5/chart-total-members.js @@ -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; + } +} diff --git a/ghost/admin/app/components/dashboard/v5/chart-total-paid.hbs b/ghost/admin/app/components/dashboard/v5/chart-total-paid.hbs new file mode 100644 index 0000000000..5c0ff2bc7d --- /dev/null +++ b/ghost/admin/app/components/dashboard/v5/chart-total-paid.hbs @@ -0,0 +1,6 @@ +

Total paid

+ \ No newline at end of file diff --git a/ghost/admin/app/components/dashboard/v5/chart-total-paid.js b/ghost/admin/app/components/dashboard/v5/chart-total-paid.js new file mode 100644 index 0000000000..7391848b42 --- /dev/null +++ b/ghost/admin/app/components/dashboard/v5/chart-total-paid.js @@ -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; + } +} diff --git a/ghost/admin/app/components/dashboard/v5/members-counts.js b/ghost/admin/app/components/dashboard/v5/members-counts.js deleted file mode 100644 index 714cb250f6..0000000000 --- a/ghost/admin/app/components/dashboard/v5/members-counts.js +++ /dev/null @@ -1,7 +0,0 @@ -import Component from '@glimmer/component'; - -export default class MembersCounts extends Component { - get placeholderGetter() { - return '9.150'; - } -} diff --git a/ghost/admin/app/components/dashboard/v5/members-email.hbs b/ghost/admin/app/components/dashboard/v5/members-email.hbs deleted file mode 100644 index ec36b7ca21..0000000000 --- a/ghost/admin/app/components/dashboard/v5/members-email.hbs +++ /dev/null @@ -1,20 +0,0 @@ -

Email

- -
-
-
-
{{this.subscribersCount}}
-
Newsletter Subscribers
-
- -
-
40.3k
-
Emails sent in the past 30 days
-
-
- -
- Email open rate graph -
-
- diff --git a/ghost/admin/app/components/dashboard/v5/members-email.js b/ghost/admin/app/components/dashboard/v5/members-email.js deleted file mode 100644 index ca592954aa..0000000000 --- a/ghost/admin/app/components/dashboard/v5/members-email.js +++ /dev/null @@ -1,7 +0,0 @@ -import Component from '@glimmer/component'; - -export default class MembersEmail extends Component { - get subscribersCount() { - return '9.150'; - } -} diff --git a/ghost/admin/app/components/dashboard/v5/members-engagement.js b/ghost/admin/app/components/dashboard/v5/members-engagement.js deleted file mode 100644 index 4ed503ad81..0000000000 --- a/ghost/admin/app/components/dashboard/v5/members-engagement.js +++ /dev/null @@ -1,7 +0,0 @@ -import Component from '@glimmer/component'; - -export default class MembersEngagement extends Component { - get placeholderGetter() { - return '9.150'; - } -} diff --git a/ghost/admin/app/components/dashboard/v5/resource-general.hbs b/ghost/admin/app/components/dashboard/v5/resource-general.hbs new file mode 100644 index 0000000000..f5bcd9e065 --- /dev/null +++ b/ghost/admin/app/components/dashboard/v5/resource-general.hbs @@ -0,0 +1 @@ +Links to resource blog \ No newline at end of file