diff --git a/ghost/admin/app/components/dashboard/dashboard-v5.hbs b/ghost/admin/app/components/dashboard/dashboard-v5.hbs index b6973a7269..f877771bd9 100644 --- a/ghost/admin/app/components/dashboard/dashboard-v5.hbs +++ b/ghost/admin/app/components/dashboard/dashboard-v5.hbs @@ -6,11 +6,18 @@ {{#if this.hasPaidTiers}} {{/if}} - - {{#if this.areNewslettersEnabled}} - - {{/if}} +
+ + + {{#if this.areNewslettersEnabled}} + + {{/if}} + + {{#if this.isTotalMembersZero}} + + {{/if}} +
{{/if}} diff --git a/ghost/admin/app/components/dashboard/dashboard-v5.js b/ghost/admin/app/components/dashboard/dashboard-v5.js index 593de615b7..6220525d5e 100644 --- a/ghost/admin/app/components/dashboard/dashboard-v5.js +++ b/ghost/admin/app/components/dashboard/dashboard-v5.js @@ -18,6 +18,10 @@ export default class DashboardDashboardV5Component extends Component { return this.dashboardStats.memberCounts?.total ?? 0; } + get isTotalMembersZero() { + return this.dashboardStats.memberCounts && this.totalMembers === 0; + } + get hasPaidTiers() { return this.dashboardStats.siteStatus?.hasPaidTiers; } diff --git a/ghost/admin/app/components/dashboard/v5/charts/anchor.hbs b/ghost/admin/app/components/dashboard/v5/charts/anchor.hbs index 858e313d8a..8a699a5a14 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/anchor.hbs +++ b/ghost/admin/app/components/dashboard/v5/charts/anchor.hbs @@ -82,14 +82,4 @@ - - {{#if this.isTotalMembersZero}} -
-
- graph-stats-ascend -

Get your first member to unlock analytics!

-

Analytics will appear here as soon as someone subscribes to your site.

-
-
- {{/if}} diff --git a/ghost/admin/app/components/dashboard/v5/charts/anchor.js b/ghost/admin/app/components/dashboard/v5/charts/anchor.js index 9f100b318c..bb47f5c427 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/anchor.js +++ b/ghost/admin/app/components/dashboard/v5/charts/anchor.js @@ -210,11 +210,6 @@ export default class Anchor extends Component { const gradientFill = ctxFill.createLinearGradient(0, 0, 1000, 0); gradientFill.addColorStop(0, 'rgba(250, 45, 142, 0.2'); gradientFill.addColorStop(1, 'rgba(143, 66, 255, 0.02'); - - // fake data - console.log('stats', stats); - console.log('labels', labels); - console.log('data', data); return { labels: labels, diff --git a/ghost/admin/app/components/dashboard/v5/charts/engagement.js b/ghost/admin/app/components/dashboard/v5/charts/engagement.js index ae180cc2d5..b10cde0539 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/engagement.js +++ b/ghost/admin/app/components/dashboard/v5/charts/engagement.js @@ -48,6 +48,11 @@ export default class Engagement extends Component { } get data30Days() { + // fake empty data + if (this.isTotalMembersZero) { + return '30%'; + } + if (this.loading) { return '- %'; } @@ -63,6 +68,11 @@ export default class Engagement extends Component { } get data7Days() { + // fake empty data + if (this.isTotalMembersZero) { + return '60%'; + } + if (this.loading) { return '- %'; } @@ -78,6 +88,11 @@ export default class Engagement extends Component { } get dataSubscribers() { + // fake empty data + if (this.isTotalMembersZero) { + return '123'; + } + if (!this.dashboardStats.newsletterSubscribers) { return '-'; } @@ -92,4 +107,12 @@ export default class Engagement extends Component { get hasPaidTiers() { return this.dashboardStats.siteStatus?.hasPaidTiers; } + + get totalMembers() { + return this.dashboardStats.memberCounts?.total ?? 0; + } + + get isTotalMembersZero() { + return this.dashboardStats.memberCounts && this.totalMembers === 0; + } } diff --git a/ghost/admin/app/components/dashboard/v5/charts/mrr.js b/ghost/admin/app/components/dashboard/v5/charts/mrr.js index 6c18123159..9925aa6aac 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/mrr.js +++ b/ghost/admin/app/components/dashboard/v5/charts/mrr.js @@ -64,6 +64,14 @@ export default class Mrr extends Component { return 'hoverLine'; // uses custom ChartJS draw function } + get totalMembers() { + return this.dashboardStats.memberCounts?.total ?? 0; + } + + get isTotalMembersZero() { + return this.dashboardStats.memberCounts && this.totalMembers === 0; + } + get mrrCurrencySymbol() { if (this.dashboardStats.mrrStats === null) { return ''; @@ -74,6 +82,11 @@ export default class Mrr extends Component { } get currentMRRFormatted() { + // fake empty data + if (this.isTotalMembersZero) { + return '$123'; + } + if (this.dashboardStats.mrrStats === null) { return '-'; } @@ -83,9 +96,18 @@ export default class Mrr extends Component { } get chartData() { - const stats = this.dashboardStats.filledMrrStats; - const labels = stats.map(stat => stat.date); - const data = stats.map(stat => stat.mrr); + let stats = this.dashboardStats.filledMrrStats; + let labels = stats.map(stat => stat.date); + let data = stats.map(stat => stat.mrr); + + console.log('this.isTotalMembersZero', this.isTotalMembersZero); + + // with no members yet, let's show empty state with dummy data + if (this.isTotalMembersZero) { + stats = this.emptyData.stats; + labels = this.emptyData.labels; + data = this.emptyData.data; + } // gradient for fill const canvas = document.createElement('canvas'); @@ -218,6 +240,228 @@ export default class Mrr extends Component { }; } + // used for empty state + get emptyData() { + return { + stats: [ + { + "date": "2022-04-07", + "mrr": 0, + "currency": "usd" + }, + { + "date": "2022-04-08", + "mrr": 0, + "currency": "usd" + }, + { + "date": "2022-04-09", + "mrr": 1500, + "currency": "usd" + }, + { + "date": "2022-04-10", + "mrr": 2000, + "currency": "usd" + }, + { + "date": "2022-04-11", + "mrr": 4500, + "currency": "usd" + }, + { + "date": "2022-04-12", + "mrr": 7500, + "currency": "usd" + }, + { + "date": "2022-04-13", + "mrr": 11000, + "currency": "usd" + }, + { + "date": "2022-04-14", + "mrr": 12500, + "currency": "usd" + }, + { + "date": "2022-04-15", + "mrr": 14500, + "currency": "usd" + }, + { + "date": "2022-04-16", + "mrr": 18000, + "currency": "usd" + }, + { + "date": "2022-04-17", + "mrr": 21500, + "currency": "usd" + }, + { + "date": "2022-04-18", + "mrr": 25000, + "currency": "usd" + }, + { + "date": "2022-04-19", + "mrr": 28000, + "currency": "usd" + }, + { + "date": "2022-04-20", + "mrr": 30000, + "currency": "usd" + }, + { + "date": "2022-04-21", + "mrr": 34000, + "currency": "usd" + }, + { + "date": "2022-04-22", + "mrr": 35000, + "currency": "usd" + }, + { + "date": "2022-04-23", + "mrr": 35500, + "currency": "usd" + }, + { + "date": "2022-04-24", + "mrr": 37000, + "currency": "usd" + }, + { + "date": "2022-04-25", + "mrr": 38000, + "currency": "usd" + }, + { + "date": "2022-04-26", + "mrr": 40500, + "currency": "usd" + }, + { + "date": "2022-04-27", + "mrr": 43500, + "currency": "usd" + }, + { + "date": "2022-04-28", + "mrr": 47000, + "currency": "usd" + }, + { + "date": "2022-04-29", + "mrr": 48000, + "currency": "usd" + }, + { + "date": "2022-04-30", + "mrr": 50500, + "currency": "usd" + }, + { + "date": "2022-05-01", + "mrr": 53500, + "currency": "usd" + }, + { + "date": "2022-05-02", + "mrr": 55000, + "currency": "usd" + }, + { + "date": "2022-05-03", + "mrr": 56500, + "currency": "usd" + }, + { + "date": "2022-05-04", + "mrr": 57000, + "currency": "usd" + }, + { + "date": "2022-05-05", + "mrr": 58000, + "currency": "usd" + }, + { + "date": "2022-05-06", + "mrr": 58500, + "currency": "usd" + } + ], + labels: [ + "2022-04-07", + "2022-04-08", + "2022-04-09", + "2022-04-10", + "2022-04-11", + "2022-04-12", + "2022-04-13", + "2022-04-14", + "2022-04-15", + "2022-04-16", + "2022-04-17", + "2022-04-18", + "2022-04-19", + "2022-04-20", + "2022-04-21", + "2022-04-22", + "2022-04-23", + "2022-04-24", + "2022-04-25", + "2022-04-26", + "2022-04-27", + "2022-04-28", + "2022-04-29", + "2022-04-30", + "2022-05-01", + "2022-05-02", + "2022-05-03", + "2022-05-04", + "2022-05-05", + "2022-05-06" + ], + data: [ + 0, + 1500, + 4000, + 5000, + 9000, + 11500, + 22500, + 26000, + 30000, + 30000, + 31000, + 33000, + 33500, + 35500, + 36500, + 36500, + 40000, + 40500, + 43500, + 47000, + 49000, + 49500, + 50000, + 50000, + 53000, + 56000, + 58000, + 61000, + 63500, + 63500 + ] + } + } + calculatePercentage(from, to) { if (from === 0) { if (to > 0) { diff --git a/ghost/admin/app/components/dashboard/v5/charts/paid-mix.js b/ghost/admin/app/components/dashboard/v5/charts/paid-mix.js index 1df56a45e1..47c8a0fcce 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/paid-mix.js +++ b/ghost/admin/app/components/dashboard/v5/charts/paid-mix.js @@ -36,7 +36,15 @@ export default class PaidMix extends Component { get hasMultipleTiers() { return this.dashboardStats.siteStatus?.hasMultipleTiers; - } + } + + get totalMembers() { + return this.dashboardStats.memberCounts?.total ?? 0; + } + + get isTotalMembersZero() { + return this.dashboardStats.memberCounts && this.totalMembers === 0; + } @action onSwitchMode(selected) { @@ -65,6 +73,24 @@ export default class PaidMix extends Component { const annualPercentage = Math.round(this.dashboardStats.paidMembersByCadence.year / totalCadence * 100); const barThickness = 5; + // fake empty data + if (this.isTotalMembersZero) { + return { + labels: ['Cadence'], + datasets: [{ + label: 'Monthly', + data: [60], + backgroundColor: '#8E42FF', + barThickness + }, { + label: 'Annual', + data: [40], + backgroundColor: '#FB76B4', + barThickness + }] + }; + } + if (this.mode === 'cadence') { return { labels: ['Cadence'], diff --git a/ghost/admin/app/components/dashboard/v5/parts/loading.hbs b/ghost/admin/app/components/dashboard/v5/parts/loading.hbs new file mode 100644 index 0000000000..82de91c330 --- /dev/null +++ b/ghost/admin/app/components/dashboard/v5/parts/loading.hbs @@ -0,0 +1,3 @@ +
+ +
diff --git a/ghost/admin/app/components/dashboard/v5/parts/zero.hbs b/ghost/admin/app/components/dashboard/v5/parts/zero.hbs new file mode 100644 index 0000000000..235cc91ed2 --- /dev/null +++ b/ghost/admin/app/components/dashboard/v5/parts/zero.hbs @@ -0,0 +1,6 @@ +
+
+

Get your first member to unlock analytics!

+

Analytics will appear here as soon as someone
subscribes to your site.

+
+
diff --git a/ghost/admin/app/styles/app-dark.css b/ghost/admin/app/styles/app-dark.css index f5ec0c5575..14a4e759e7 100644 --- a/ghost/admin/app/styles/app-dark.css +++ b/ghost/admin/app/styles/app-dark.css @@ -1163,6 +1163,22 @@ kbd { background: #1c1e21; } +.gh-dashboard5-recents .gh-dashboard5-list-item:hover { + background: rgba(28, 30, 33, 0.7); +} + +.gh-dashboard5-resource .gh-dashboard5-list-item:hover { + background: rgba(28, 30, 33, 0.3); +} + .gh-dashboard5-community .gh-dashboard5-resource-footer { color: #fff; } + +.gh-dashboard5-zero { + background: rgb(21, 23, 25, 0.8); +} + +.gh-dashboard5-zero-message { + background-color: #1c1e21; +} diff --git a/ghost/admin/app/styles/layouts/dashboard-v5.css b/ghost/admin/app/styles/layouts/dashboard-v5.css index e14fec0ece..2f6823f82f 100644 --- a/ghost/admin/app/styles/layouts/dashboard-v5.css +++ b/ghost/admin/app/styles/layouts/dashboard-v5.css @@ -878,13 +878,23 @@ Dashboard v5 Anchor */ right: -18px; } -.gh-dashboard5-anchor-empty { +.gh-dashboard5-group { + position: relative; +} + + +/* --------------------------------- +Dashboard v5 Zero */ + +.gh-dashboard5-zero { position: absolute; - top: 16px; - left: 16px; - width: calc(100% - 32px); - height: calc(100% - 32px); + top: 0; + left: 0; + width: 100%; + height: 100%; background: rgba(255,255,255,0.8); + border: 1px solid var(--whitegrey); + border-radius: 6px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); @@ -893,41 +903,35 @@ Dashboard v5 Anchor */ justify-content: center; } -.gh-dashboard5-anchor-empty-message { - background: #ffffff; - width: 416px; - padding: 32px 48px 48px; +.gh-dashboard5-zero-message { + background: #fff url(icons/analytics.svg) no-repeat 50% 36px; + background-size: 48px 48px; + min-width: 400px; + padding: 96px 48px 48px; border-radius: 8px; text-align: center; - box-shadow: 0 4px 20px rgba(0,0,0,0.075); + box-shadow: 0 4px 24px rgba(0,0,0,0.066); } -.gh-dashboard5-anchor-empty-message svg { - width: 48px; - height: auto; - margin: 0 0 16px; - fill: red; -} - -.gh-dashboard5-anchor-empty-message h4 { +.gh-dashboard5-zero-message h4 { font-size: 1.55rem; font-weight: 700; line-height: 1em; - margin: 0 0 12px; + margin: 0 0 10px; padding: 0; color: var(--black); white-space: nowrap; letter-spacing: -.3px; } -.gh-dashboard5-anchor-empty-message p { +.gh-dashboard5-zero-message p { font-size: 1.2rem; font-weight: 600; - line-height: 1.4em; + line-height: 1.5em; color: var(--black); letter-spacing: -.1px; - margin: 0; padding: 0; + margin: 0; } diff --git a/ghost/admin/public/assets/icons/analytics.svg b/ghost/admin/public/assets/icons/analytics.svg index 64be19a396..894cbccb50 100644 --- a/ghost/admin/public/assets/icons/analytics.svg +++ b/ghost/admin/public/assets/icons/analytics.svg @@ -1 +1,14 @@ -graph-stats-ascend \ No newline at end of file + + + + + + + + + + + + + +