diff --git a/ghost/admin/app/components/dashboard/dashboard-v5.js b/ghost/admin/app/components/dashboard/dashboard-v5.js index 434122678b..593de615b7 100644 --- a/ghost/admin/app/components/dashboard/dashboard-v5.js +++ b/ghost/admin/app/components/dashboard/dashboard-v5.js @@ -14,6 +14,10 @@ export default class DashboardDashboardV5Component extends Component { return this.dashboardStats.siteStatus === null; } + get totalMembers() { + return this.dashboardStats.memberCounts?.total ?? 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 8a699a5a14..858e313d8a 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/anchor.hbs +++ b/ghost/admin/app/components/dashboard/v5/charts/anchor.hbs @@ -82,4 +82,14 @@ + + {{#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 8aa73ef480..9f100b318c 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/anchor.js +++ b/ghost/admin/app/components/dashboard/v5/charts/anchor.js @@ -65,6 +65,7 @@ export default class Anchor extends Component { @service dashboardStats; @service feature; @tracked chartDisplay = 'total'; + @tracked totalMembersOverall = null; daysOptions = DAYS_OPTIONS; displayOptions = DISPLAY_OPTIONS; @@ -81,6 +82,8 @@ export default class Anchor extends Component { loadCharts() { this.dashboardStats.loadMemberCountStats(); + console.log('this.dashboardStats.memberCounts', this.dashboardStats.memberCounts); + if (this.hasPaidTiers) { this.dashboardStats.loadMrrStats(); } @@ -112,6 +115,14 @@ export default class Anchor extends Component { return this.dashboardStats.memberCounts?.total ?? 0; } + get isTotalMembersZero() { + return this.dashboardStats.memberCounts && this.totalMembers === 0; + } + + get isTotalMembersMoreThanZero() { + return this.dashboardStats.memberCounts && this.totalMembers > 0; + } + get paidMembers() { return this.dashboardStats.memberCounts?.paid ?? 0; } @@ -179,6 +190,13 @@ export default class Anchor extends Component { data = stats.map(stat => stat.paid + stat.free + stat.comped); } + // 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 line const canvasLine = document.createElement('canvas'); const ctxLine = canvasLine.getContext('2d'); @@ -192,6 +210,11 @@ 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, @@ -345,6 +368,378 @@ export default class Anchor extends Component { return 180; } + // used for empty state + get emptyData() { + return { + stats: [ + { + "date": "2022-04-07", + "free": 2610, + "tier1": 295, + "tier2": 20, + "paid": 315, + "comped": 0, + "paidSubscribed": 2, + "paidCanceled": 1 + }, + { + "date": "2022-04-08", + "free": 2765, + "tier1": 298, + "tier2": 24, + "paid": 322, + "comped": 0, + "paidSubscribed": 7, + "paidCanceled": 0 + }, + { + "date": "2022-04-09", + "free": 3160, + "tier1": 299, + "tier2": 28, + "paid": 327, + "comped": 0, + "paidSubscribed": 5, + "paidCanceled": 0 + }, + { + "date": "2022-04-10", + "free": 3580, + "tier1": 300, + "tier2": 30, + "paid": 330, + "comped": 0, + "paidSubscribed": 4, + "paidCanceled": 1 + }, + { + "date": "2022-04-11", + "free": 3583, + "tier1": 301, + "tier2": 31, + "paid": 332, + "comped": 0, + "paidSubscribed": 2, + "paidCanceled": 0 + }, + { + "date": "2022-04-12", + "free": 3857, + "tier1": 303, + "tier2": 36, + "paid": 339, + "comped": 0, + "paidSubscribed": 8, + "paidCanceled": 1 + }, + { + "date": "2022-04-13", + "free": 4223, + "tier1": 304, + "tier2": 39, + "paid": 343, + "comped": 0, + "paidSubscribed": 4, + "paidCanceled": 0 + }, + { + "date": "2022-04-14", + "free": 4289, + "tier1": 306, + "tier2": 42, + "paid": 348, + "comped": 0, + "paidSubscribed": 6, + "paidCanceled": 1 + }, + { + "date": "2022-04-15", + "free": 4458, + "tier1": 307, + "tier2": 49, + "paid": 356, + "comped": 0, + "paidSubscribed": 8, + "paidCanceled": 0 + }, + { + "date": "2022-04-16", + "free": 4752, + "tier1": 307, + "tier2": 49, + "paid": 356, + "comped": 0, + "paidSubscribed": 1, + "paidCanceled": 1 + }, + { + "date": "2022-04-17", + "free": 4947, + "tier1": 310, + "tier2": 50, + "paid": 360, + "comped": 0, + "paidSubscribed": 5, + "paidCanceled": 1 + }, + { + "date": "2022-04-18", + "free": 5047, + "tier1": 312, + "tier2": 49, + "paid": 361, + "comped": 0, + "paidSubscribed": 2, + "paidCanceled": 1 + }, + { + "date": "2022-04-19", + "free": 5430, + "tier1": 314, + "tier2": 55, + "paid": 369, + "comped": 0, + "paidSubscribed": 8, + "paidCanceled": 0 + }, + { + "date": "2022-04-20", + "free": 5760, + "tier1": 316, + "tier2": 57, + "paid": 373, + "comped": 0, + "paidSubscribed": 4, + "paidCanceled": 0 + }, + { + "date": "2022-04-21", + "free": 6022, + "tier1": 318, + "tier2": 63, + "paid": 381, + "comped": 0, + "paidSubscribed": 9, + "paidCanceled": 1 + }, + { + "date": "2022-04-22", + "free": 6294, + "tier1": 319, + "tier2": 64, + "paid": 383, + "comped": 0, + "paidSubscribed": 2, + "paidCanceled": 0 + }, + { + "date": "2022-04-23", + "free": 6664, + "tier1": 320, + "tier2": 69, + "paid": 389, + "comped": 0, + "paidSubscribed": 6, + "paidCanceled": 0 + }, + { + "date": "2022-04-24", + "free": 6721, + "tier1": 320, + "tier2": 70, + "paid": 390, + "comped": 0, + "paidSubscribed": 1, + "paidCanceled": 0 + }, + { + "date": "2022-04-25", + "free": 6841, + "tier1": 321, + "tier2": 80, + "paid": 401, + "comped": 0, + "paidSubscribed": 11, + "paidCanceled": 0 + }, + { + "date": "2022-04-26", + "free": 6880, + "tier1": 323, + "tier2": 89, + "paid": 412, + "comped": 0, + "paidSubscribed": 11, + "paidCanceled": 0 + }, + { + "date": "2022-04-27", + "free": 7179, + "tier1": 325, + "tier2": 92, + "paid": 417, + "comped": 0, + "paidSubscribed": 5, + "paidCanceled": 0 + }, + { + "date": "2022-04-28", + "free": 7288, + "tier1": 325, + "tier2": 100, + "paid": 425, + "comped": 0, + "paidSubscribed": 9, + "paidCanceled": 1 + }, + { + "date": "2022-04-29", + "free": 7430, + "tier1": 325, + "tier2": 101, + "paid": 426, + "comped": 0, + "paidSubscribed": 2, + "paidCanceled": 1 + }, + { + "date": "2022-04-30", + "free": 7458, + "tier1": 326, + "tier2": 102, + "paid": 428, + "comped": 0, + "paidSubscribed": 2, + "paidCanceled": 0 + }, + { + "date": "2022-05-01", + "free": 7621, + "tier1": 327, + "tier2": 117, + "paid": 444, + "comped": 0, + "paidSubscribed": 17, + "paidCanceled": 1 + }, + { + "date": "2022-05-02", + "free": 7721, + "tier1": 328, + "tier2": 123, + "paid": 451, + "comped": 0, + "paidSubscribed": 8, + "paidCanceled": 1 + }, + { + "date": "2022-05-03", + "free": 7897, + "tier1": 327, + "tier2": 137, + "paid": 464, + "comped": 0, + "paidSubscribed": 14, + "paidCanceled": 1 + }, + { + "date": "2022-05-04", + "free": 7937, + "tier1": 327, + "tier2": 143, + "paid": 470, + "comped": 0, + "paidSubscribed": 6, + "paidCanceled": 0 + }, + { + "date": "2022-05-05", + "free": 7961, + "tier1": 328, + "tier2": 158, + "paid": 486, + "comped": 0, + "paidSubscribed": 16, + "paidCanceled": 0 + }, + { + "date": "2022-05-06", + "free": 8006, + "tier1": 328, + "tier2": 162, + "paid": 490, + "comped": 0, + "paidSubscribed": 5, + "paidCanceled": 1 + } + ], + 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: [ + 2925, + 3087, + 3487, + 3910, + 3915, + 4196, + 4566, + 4637, + 4814, + 5108, + 5307, + 5408, + 5799, + 6133, + 6403, + 6677, + 7053, + 7111, + 7242, + 7292, + 7596, + 7713, + 7856, + 7886, + 8065, + 8172, + 8361, + 8407, + 8447, + 8496 + ] + } + } + calculatePercentage(from, to) { if (from === 0) { if (to > 0) { diff --git a/ghost/admin/app/components/dashboard/v5/charts/overview.hbs b/ghost/admin/app/components/dashboard/v5/charts/overview.hbs index 7589593c8d..cd0eb7a3eb 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/overview.hbs +++ b/ghost/admin/app/components/dashboard/v5/charts/overview.hbs @@ -1,6 +1,5 @@ -
+
-
-
diff --git a/ghost/admin/app/components/dashboard/v5/charts/overview.js b/ghost/admin/app/components/dashboard/v5/charts/overview.js index 8ce8293ed1..4cd6930d94 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/overview.js +++ b/ghost/admin/app/components/dashboard/v5/charts/overview.js @@ -20,6 +20,14 @@ export default class Overview extends Component { return this.dashboardStats.memberCounts?.total ?? 0; } + get isTotalMembersZero() { + return this.dashboardStats.memberCounts && this.totalMembers === 0; + } + + get isTotalMembersMoreThanZero() { + return this.dashboardStats.memberCounts && this.totalMembers > 0; + } + get paidMembers() { return this.dashboardStats.memberCounts?.paid ?? 0; } diff --git a/ghost/admin/app/styles/layouts/dashboard-v5.css b/ghost/admin/app/styles/layouts/dashboard-v5.css index 1a4d9aabe9..e14fec0ece 100644 --- a/ghost/admin/app/styles/layouts/dashboard-v5.css +++ b/ghost/admin/app/styles/layouts/dashboard-v5.css @@ -757,6 +757,10 @@ Dashboard v5 Overview */ position: relative; } +.gh-dashboard5-overview.is-hidden { + display: none; +} + .gh-dashboard5-overview .gh-dashboard5-area { flex-direction: row; padding: 24px; @@ -874,6 +878,58 @@ Dashboard v5 Anchor */ right: -18px; } +.gh-dashboard5-anchor-empty { + position: absolute; + top: 16px; + left: 16px; + width: calc(100% - 32px); + height: calc(100% - 32px); + background: rgba(255,255,255,0.8); + + -webkit-backdrop-filter: blur(3px); + backdrop-filter: blur(3px); + display: flex; + align-items: center; + justify-content: center; +} + +.gh-dashboard5-anchor-empty-message { + background: #ffffff; + width: 416px; + padding: 32px 48px 48px; + border-radius: 8px; + text-align: center; + box-shadow: 0 4px 20px rgba(0,0,0,0.075); +} + +.gh-dashboard5-anchor-empty-message svg { + width: 48px; + height: auto; + margin: 0 0 16px; + fill: red; +} + +.gh-dashboard5-anchor-empty-message h4 { + font-size: 1.55rem; + font-weight: 700; + line-height: 1em; + margin: 0 0 12px; + padding: 0; + color: var(--black); + white-space: nowrap; + letter-spacing: -.3px; +} + +.gh-dashboard5-anchor-empty-message p { + font-size: 1.2rem; + font-weight: 600; + line-height: 1.4em; + color: var(--black); + letter-spacing: -.1px; + margin: 0; + padding: 0; +} + /* --------------------------------- Dashboard v5 Engagement */ diff --git a/ghost/admin/public/assets/icons/analytics.svg b/ghost/admin/public/assets/icons/analytics.svg new file mode 100644 index 0000000000..64be19a396 --- /dev/null +++ b/ghost/admin/public/assets/icons/analytics.svg @@ -0,0 +1 @@ +graph-stats-ascend \ No newline at end of file