Refined source attribution dashboard design (#15457)

refs https://github.com/TryGhost/Team/issues/1932
refs https://github.com/TryGhost/Team/issues/1941
refs https://github.com/TryGhost/Team/issues/1904
refs https://github.com/TryGhost/Team/issues/1932

- updates attribution sources table design
- updates member profile page design
This commit is contained in:
Djordje Vlaisavljevic 2022-09-22 18:16:42 +02:00 committed by GitHub
parent e93f6071cd
commit a0c6fafba1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 1113 additions and 68 deletions

View File

@ -62,11 +62,15 @@
</div>
{{#if this.hasPaidTiers}}
{{#if (feature "sourceAttribution")}}
{{else}}
<article class="gh-dashboard-minicharts">
<Dashboard::Charts::PaidMrr />
<Dashboard::Charts::PaidBreakdown />
<Dashboard::Charts::PaidMix />
</article>
{{/if}}
{{/if}}
</div>

View File

@ -0,0 +1,83 @@
<section class="gh-dashboard-section gh-dashboard-anchor" {{did-insert this.loadCharts}}>
<article class="gh-dashboard-box">
{{#if this.hasPaidTiers}}
<div class="gh-dashboard-select-title">
<PowerSelect
@selected={{this.selectedDisplayOption}}
@options={{this.displayOptions}}
@searchEnabled={{false}}
@onChange={{this.onDisplayChange}}
@triggerComponent="gh-power-select/trigger"
@triggerClass="gh-contentfilter-menu-trigger"
@dropdownClass="gh-contentfilter-menu-dropdown is-narrow"
@matchTriggerWidth={{false}}
@horizontalPosition="left"
as |option|
>
{{#if option.name}}{{option.name}}{{else}}<span class="red">Unknown option</span>{{/if}}
</PowerSelect>
</div>
<Dashboard::Parts::Metric
@value={{format-number this.totalMembers}}
@trends={{this.hasTrends}}
@percentage={{this.totalMembersTrend}}
@large={{true}}
@embedded={{true}}/>
{{else}}
<Dashboard::Parts::Metric
@label="Total members"
@value={{format-number this.totalMembers}}
@trends={{this.hasTrends}}
@percentage={{this.totalMembersTrend}}
@large={{true}} />
{{/if}}
<div class="gh-dashboard-hero {{unless this.hasPaidTiers 'is-solo'}} {{if (feature "sourceAttribution") 'source-attribution'}}">
<div class="gh-dashboard-chart gh-dashboard-totals">
<div class="gh-dashboard-chart-container">
<div class="gh-dashboard-chart-box">
{{#if this.loading}}
<div class="gh-dashboard-chart-loading">
<div class="gh-loading-spinner"></div>
</div>
{{else}}
<div class="gh-dashboard-fader">
<EmberChart
@type={{this.chartType}}
@data={{this.chartData}}
@options={{this.chartOptions}}
@height={{200}} />
</div>
{{/if}}
</div>
<div id="gh-dashboard-anchor-tooltip" class="gh-dashboard-tooltip">
<div class="gh-dashboard-tooltip-label">
-
</div>
<div class="gh-dashboard-tooltip-value">
<span class="indicator line"></span>
<span class="value"></span>
<span class="metric">{{this.selectedDisplayOption.name}}</span>
</div>
</div>
</div>
<div class="gh-dashboard-chart-ticks">
<span id="gh-dashboard-anchor-date-start">-</span>
<span id="gh-dashboard-anchor-date-end">-</span>
</div>
</div>
{{#if this.hasPaidTiers}}
{{#if (feature "sourceAttribution")}}
{{else}}
<article class="gh-dashboard-minicharts">
<Dashboard::Charts::PaidMrr />
<Dashboard::Charts::PaidBreakdown />
<Dashboard::Charts::PaidMix />
</article>
{{/if}}
{{/if}}
</div>
</article>
</section>

View File

@ -0,0 +1,747 @@
/* global Chart */
import Component from '@glimmer/component';
import moment from 'moment';
import {action} from '@ember/object';
import {getSymbol} from 'ghost-admin/utils/currency';
import {inject as service} from '@ember/service';
import {tracked} from '@glimmer/tracking';
const DATE_FORMAT = 'D MMM, YYYY';
const DISPLAY_OPTIONS = [{
name: 'MRR',
value: 'mrr'
},{
name: 'Total members',
value: 'total'
}, {
name: 'Paid members',
value: 'paid'
}, {
name: 'Free members',
value: 'free'
}];
// custom ChartJS draw function
Chart.defaults.hoverLine = Chart.defaults.line;
Chart.controllers.hoverLine = Chart.controllers.line.extend({
draw: function (ease) {
Chart.controllers.line.prototype.draw.call(this, ease);
if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
let activePoint = this.chart.tooltip._active[0],
ctx = this.chart.ctx,
x = activePoint.tooltipPosition().x,
topY = this.chart.legend.bottom,
bottomY = this.chart.chartArea.bottom;
// draw line
ctx.save();
ctx.beginPath();
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.setLineDash([3, 4]);
ctx.lineWidth = 1;
ctx.strokeStyle = '#7C8B9A';
ctx.stroke();
ctx.restore();
}
}
});
export default class Anchor extends Component {
@service dashboardStats;
@service feature;
@tracked chartDisplay = 'total';
@tracked resizing = false;
@tracked resizeTimer = null;
displayOptions = DISPLAY_OPTIONS;
willDestroy(...args) {
super.willDestroy(...args);
window.removeEventListener('resize', this.resizer, false);
}
// this helps with ChartJS resizing stretching bug when resizing
resizer = () => {
this.resizing = true;
clearTimeout(this.resizeTimer); // this uses a trick to trigger only when resize is done
this.resizeTimer = setTimeout(() => {
this.resizing = false;
}, 500);
};
@action
loadCharts() {
this.dashboardStats.loadMemberCountStats();
window.addEventListener('resize', this.resizer, false);
if (this.hasPaidTiers) {
this.dashboardStats.loadMrrStats();
}
}
@action
onDisplayChange(selected) {
this.chartDisplay = selected.value;
}
get selectedDisplayOption() {
return this.displayOptions.find(d => d.value === this.chartDisplay) ?? this.displayOptions[0];
}
get loading() {
return this.dashboardStats.memberCountStats === null || this.resizing;
}
get totalMembers() {
return this.dashboardStats.memberCounts?.total ?? 0;
}
get isTotalMembersZero() {
return this.dashboardStats.memberCounts && this.totalMembers === 0;
}
get paidMembers() {
return this.dashboardStats.memberCounts?.paid ?? 0;
}
get freeMembers() {
return this.dashboardStats.memberCounts?.free ?? 0;
}
get hasTrends() {
return this.dashboardStats.memberCounts !== null
&& this.dashboardStats.memberCountsTrend !== null;
}
get totalMembersTrend() {
return this.calculatePercentage(this.dashboardStats.memberCountsTrend.total, this.dashboardStats.memberCounts.total);
}
get paidMembersTrend() {
return this.calculatePercentage(this.dashboardStats.memberCountsTrend.paid, this.dashboardStats.memberCounts.paid);
}
get freeMembersTrend() {
return this.calculatePercentage(this.dashboardStats.memberCountsTrend.free, this.dashboardStats.memberCounts.free);
}
get hasPaidTiers() {
return this.dashboardStats.siteStatus?.hasPaidTiers;
}
get chartType() {
return 'hoverLine'; // uses custom ChartJS draw function
}
get chartTitle() {
// paid
if (this.chartDisplay === 'paid') {
return 'Paid members';
// free
} else if (this.chartDisplay === 'free') {
return 'Free members';
// MRR
} else if (this.chartDisplay === 'mrr') {
return 'MRR';
}
// total
return 'Total members';
}
get chartData() {
let stats;
let labels;
let data;
if (this.chartDisplay === 'paid') {
// paid
stats = this.dashboardStats.filledMemberCountStats;
labels = stats.map(stat => stat.date);
data = stats.map(stat => stat.paid + stat.comped);
} else if (this.chartDisplay === 'free') {
// free
stats = this.dashboardStats.filledMemberCountStats;
labels = stats.map(stat => stat.date);
data = stats.map(stat => stat.free);
} else {
// total
stats = this.dashboardStats.filledMemberCountStats;
labels = stats.map(stat => stat.date);
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');
const gradientLine = ctxLine.createLinearGradient(0, 0, 1000, 0);
gradientLine.addColorStop(0, 'rgba(250, 45, 142, 1');
gradientLine.addColorStop(1, 'rgba(143, 66, 255, 1');
// gradient for fill
const canvasFill = document.createElement('canvas');
const ctxFill = canvasFill.getContext('2d');
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.1');
return {
labels: labels,
datasets: [{
data: data,
tension: 1,
cubicInterpolationMode: 'monotone',
fill: true,
fillColor: gradientFill,
backgroundColor: gradientFill,
pointRadius: 0,
pointHitRadius: 10,
pointBorderColor: '#8E42FF',
pointBackgroundColor: '#8E42FF',
pointHoverBackgroundColor: '#8E42FF',
pointHoverBorderColor: '#8E42FF',
pointHoverRadius: 0,
borderColor: gradientLine,
borderJoinStyle: 'miter'
}]
};
}
get mrrCurrencySymbol() {
if (this.dashboardStats.mrrStats === null) {
return '';
}
const firstCurrency = this.dashboardStats.mrrStats[0] ? this.dashboardStats.mrrStats[0].currency : 'usd';
return getSymbol(firstCurrency);
}
get chartOptions() {
let activeDays = this.dashboardStats.chartDays;
let barColor = this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.65)';
return {
maintainAspectRatio: false,
responsiveAnimationDuration: 1,
animation: false,
title: {
display: false
},
legend: {
display: false
},
layout: {
padding: {
top: 2,
bottom: 2,
left: 1,
right: 1
}
},
hover: {
onHover: function (e) {
e.target.style.cursor = 'pointer';
}
},
tooltips: {
enabled: false,
intersect: false,
mode: 'index',
custom: function (tooltip) {
// get tooltip element
const tooltipEl = document.getElementById('gh-dashboard-anchor-tooltip');
const chartContainerEl = tooltipEl.parentElement;
const chartWidth = chartContainerEl.offsetWidth;
const tooltipWidth = tooltipEl.offsetWidth;
// only show tooltip when active
if (tooltip.opacity === 0) {
tooltipEl.style.opacity = 0;
return;
}
// update tooltip styles
tooltipEl.style.opacity = 1;
tooltipEl.style.position = 'absolute';
let offsetX = 0;
if (tooltip.x > chartWidth - tooltipWidth) {
offsetX = tooltipWidth - 10;
}
tooltipEl.style.left = tooltip.x - offsetX + 'px';
tooltipEl.style.top = tooltip.y + 'px';
},
callbacks: {
label: (tooltipItems, data) => {
const value = data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
document.querySelector('#gh-dashboard-anchor-tooltip .gh-dashboard-tooltip-value .value').innerHTML = value;
},
title: (tooltipItems) => {
const value = moment(tooltipItems[0].xLabel).format(DATE_FORMAT);
document.querySelector('#gh-dashboard-anchor-tooltip .gh-dashboard-tooltip-label').innerHTML = value;
}
}
},
scales: {
yAxes: [{
display: true,
gridLines: {
drawTicks: false,
display: true,
drawBorder: false,
color: 'transparent',
zeroLineColor: barColor,
zeroLineWidth: 1
},
ticks: {
display: false
}
}],
xAxes: [{
display: true,
scaleLabel: {
align: 'start'
},
gridLines: {
color: barColor,
borderDash: [3,4],
display: true,
drawBorder: true,
drawTicks: false,
zeroLineWidth: 1,
zeroLineColor: barColor,
zeroLineBorderDash: [3,4]
},
ticks: {
display: false,
autoSkip: false,
callback: function (value, index, values) {
if (index === 0) {
document.getElementById('gh-dashboard-anchor-date-start').innerHTML = moment(value).format(DATE_FORMAT);
}
if (index === (values.length - 1)) {
document.getElementById('gh-dashboard-anchor-date-end').innerHTML = moment(value).format(DATE_FORMAT);
}
if (activeDays === (30 + 1)) {
if (!(index % 2)) {
return value;
}
} else if (activeDays === (90 + 1)) {
if (!(index % 3)) {
return value;
}
} else {
return value;
}
}
}
}]
}
};
}
get chartHeight() {
return 200;
}
get chartHeightSmall() {
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) {
return 100;
}
return 0;
}
return Math.round((to - from) / from * 100);
}
}

View File

@ -1,18 +1,21 @@
<section class="gh-dashboard-section gh-dashboard-recents">
<section class="gh-dashboard-section gh-dashboard-attribution">
<article class="gh-dashboard-box" {{did-insert this.loadData}}>
<h3 class="gh-dashboard-metric-label">Source attribution</h3>
<div style="display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: 64px;
">
<MemberAttribution::SourceAttributionTable @sources={{this.sources}} class="gh-dashboard-recents-posts gh-dashboard-list" />
<div style="border-left: 1px solid #eceef0; padding-left: 48px;display: flex;justify-content: center;align-items: center;">
<div style="max-width: 200px;">
<MemberAttribution::SourceAttributionChart @sources={{this.chartSources}} />
<div style="display: grid;grid-template-columns: 1fr 2fr;grid-gap: 24px;">
<div>
<h3 class="gh-dashboard-metric-label">Attribution</h3>
<div style="display: flex;justify-content: center;align-items: center;">
<div style="max-width: 200px; max-height: 200px;">
<MemberAttribution::SourceAttributionChart @sources={{this.chartSources}} />
</div>
<div id="gh-dashboard-attribution-tooltip" class="gh-dashboard-tooltip">
<div class="gh-dashboard-tooltip-value">
-
</div>
</div>
</div>
</div>
<MemberAttribution::SourceAttributionTable @sources={{this.sources}} class="gh-dashboard-attribution-list gh-dashboard-list" style="justify-content:flex-start;" />
</div>
</article>
</section>

View File

@ -1,4 +1,4 @@
<div class="gh-dashboard-metric {{if @center "is-center"}} {{if @reverse "is-reverse"}} {{if @large "is-large"}}">
<div class="gh-dashboard-metric {{if @center "is-center"}} {{if @reverse "is-reverse"}} {{if @large "is-large"}} {{if @embedded "is-embedded"}}">
<div class="gh-dashboard-metric-data">
{{#if @secondary}}
{{#if @value}}

View File

@ -46,11 +46,14 @@
{{svg-jar "member-add"}}
Created on {{moment-format (moment-site-tz @member.createdAtUTC) "D MMM YYYY"}}
</p>
{{#if (and @member.attribution @member.attribution.url @member.attribution.title) }}
<p>
{{svg-jar "satellite"}}
Signed up on&nbsp;<a href="{{@member.attribution.url}}" target="_blank" rel="noopener noreferrer">{{ @member.attribution.title }}</a>
</p>
{{#if (feature 'sourceAttribution')}}
{{else}}
{{#if (and @member.attribution @member.attribution.url @member.attribution.title) }}
<p>
{{svg-jar "satellite"}}
Signed up on&nbsp;<a href="{{@member.attribution.url}}" target="_blank" rel="noopener noreferrer">{{ @member.attribution.title }}</a>
</p>
{{/if}}
{{/if}}
<p class="gh-member-last-seen">
{{svg-jar "eye"}}
@ -61,6 +64,20 @@
{{/if}}
</p>
</div>
{{#if (feature 'sourceAttribution')}}
<div class="gh-member-details-attribution">
<h4 class="gh-main-section-header small bn">Signup source</h4>
<p>
{{svg-jar "posts"}}
Signed up on&nbsp;<a href="{{@member.attribution.url}}" target="_blank" rel="noopener noreferrer" title="{{ @member.attribution.title }}">{{ @member.attribution.title }}</a>
</p>
<p>
{{svg-jar "earth"}}
Coming from&nbsp;<p title="Social: Twitter">Twitter / Social</p>
</p>
</div>
{{/if}}
{{#if (and (not-eq this.settings.membersSignupAccess "none") (not-eq this.settings.editorDefaultEmailRecipients "disabled"))}}
<div class="gh-member-details-stats-container">
<h4 class="gh-main-section-header small bn">Engagement</h4>

View File

@ -144,7 +144,7 @@
</div>
<div class="period">{{if (eq sub.price.interval "year") "yearly" "monthly"}}</div>
</div>
<div style="margin-left: 16px;">
<div style="margin-left: 16px; flex-grow: 1;">
<h3 class="gh-membertier-name" data-test-text="tier-name" style="align-items:center !important; justify-content:flex-start !important;">
{{tier.name}}
{{#if (eq sub.status "canceled")}}
@ -184,6 +184,51 @@
<span class="gh-cp-membertier-renewal">Renews {{sub.validUntil}}</span>
{{/if}}
</div>
<div class="flex flex-row gh-cp-membertier-details">
Details {{svg-jar "arrow-right-stroke"}}
</div>
<div class="gh-membertier-advanced" data-test-subscription={{index}}>
<div class="gh-membertier-details-container">
{{#if sub.cancellationReason}}
<div class="mb4">
<h4>Cancellation reason</h4>
<div class="gh-membertier-cancelreason">{{sub.cancellationReason}}</div>
</div>
{{/if}}
{{#if sub.offer}}
{{#if (eq sub.offer.type "trial")}}
<div class="mb4">
<h4>Offer</h4>
<span class="gh-cp-membertier-pricelabel"> {{sub.offer.name}} </span>
&ndash; {{sub.offer.amount}} days free
</div>
{{else}}
<div class="mb4">
<h4>Offer</h4>
<span class="gh-cp-membertier-pricelabel"> {{sub.offer.name}} </span>
{{#if (eq sub.offer.type 'fixed')}}
&ndash; {{currency-symbol sub.offer.currency}}{{gh-price-amount sub.offer.amount}} off
{{else}}
&ndash; {{sub.offer.amount}}% off
{{/if}}
</div>
{{/if}}
{{/if}}
<div class="gh-membertier-details">
<div class="gh-membertier-detail">
<h4>Subscription Source</h4>
<p><span class="fw6">Twitter / Social</span></p>
</div>
{{#if (and sub.attribution sub.attribution.url sub.attribution.title)}}
<div class="gh-membertier-detail">
<h4>Subscription page</h4>
<a href="{{sub.attribution.url}}" target="_blank" rel="noopener noreferrer">{{ sub.attribution.title }}</a>
</div>
{{/if}}
<p class="gh-membertier-detail-timestamp">Created on {{sub.startDate}}</p>
</div>
</div>
</div>
</div>
{{#if sub.isComplimentary}}
<span class="action-menu">
@ -251,43 +296,6 @@
</span>
{{/if}}
</div>
<div class="gh-membertier-advanced" data-test-subscription={{index}}>
<div class="gh-membertier-details-container">
{{#if sub.cancellationReason}}
<div class="mb4">
<h4>Cancellation reason</h4>
<div class="gh-membertier-cancelreason">{{sub.cancellationReason}}</div>
</div>
{{/if}}
{{#if sub.offer}}
{{#if (eq sub.offer.type "trial")}}
<div class="mb4">
<h4>Offer</h4>
<span class="gh-cp-membertier-pricelabel"> {{sub.offer.name}} </span>
&ndash; {{sub.offer.amount}} days free
</div>
{{else}}
<div class="mb4">
<h4>Offer</h4>
<span class="gh-cp-membertier-pricelabel"> {{sub.offer.name}} </span>
{{#if (eq sub.offer.type 'fixed')}}
&ndash; {{currency-symbol sub.offer.currency}}{{gh-price-amount sub.offer.amount}} off
{{else}}
&ndash; {{sub.offer.amount}}% off
{{/if}}
</div>
{{/if}}
{{/if}}
<div class="gh-membertier-details">
<h4>Source</h4>
<p>From <span class="fw6">Social: Twitter</span>
{{#if (and sub.attribution sub.attribution.url sub.attribution.title)}}
, subscribed on <a href="{{sub.attribution.url}}" target="_blank" rel="noopener noreferrer">{{ sub.attribution.title }}</a>
{{/if}}
on {{sub.startDate}}</p>
</div>
</div>
</div>
{{/each}}
{{#if (eq tier.subscriptions.length 0)}}

View File

@ -6,7 +6,8 @@ const CHART_COLORS = [
'#CA3FED',
'#E993CC',
'#EE9696',
'#FEC7C0'
'#FEC7C0',
'#E6E9EB'
];
export default class SourceAttributionChart extends Component {
@ -18,18 +19,28 @@ export default class SourceAttributionChart extends Component {
get chartOptions() {
return {
cutoutPercentage: 60,
borderColor: '#555',
cutoutPercentage: 70,
borderColor: '#fff',
legend: {
display: true,
position: 'top',
align: 'start',
display: false,
position: 'bottom',
align: 'center',
labels: {
color: 'rgb(255, 99, 132)',
fontSize: 12,
boxWidth: 10,
padding: 3
padding: 6,
usePointStyle: true,
fontFamily: 'Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Droid Sans,Helvetica Neue,sans-serif'
}
},
hover: {
onHover: function (e) {
e.target.style.cursor = 'pointer';
}
},
tooltips: {
enabled: false
}
};
}

View File

@ -6,7 +6,7 @@
<div class="gh-dashboard-list-title">Paid Conversions</div>
{{/if}}
</div>
<div class="gh-dashboard-list-body">
<div class="gh-dashboard-list-body" style="max-height: 230px; overflow-y: clip; justify-content: flex-start;">
{{#each this.sources as |sourceData|}}
<div class="gh-dashboard-list-item">
<div class="gh-dashboard-list-item-sub">

View File

@ -269,7 +269,7 @@ export default class DashboardMocksService extends Service {
paidSubscribed: paidSubscribed1 + paidSubscribed2,
paidCanceled: paidCanceled1 + paidCanceled2
});
const attributionSources = ['Twitter', 'Ghost Network', 'Product Hunt', 'Direct', 'Ghost Newsletter'];
const attributionSources = ['Twitter', 'Ghost Network', 'Product Hunt', 'Direct', 'Ghost Newsletter', 'Rediverge Newsletter', 'Reddit', 'The Lever Newsletter', 'The Browser Newsletter'];
this.memberAttributionStats.push({
date: date.toISOString().split('T')[0],

View File

@ -618,6 +618,20 @@ Dashboard Metric */
font-size: 2rem;
}
.gh-dashboard-metric.is-embedded {
background: radial-gradient(#fff,hsla(0,0%,100%,.5686274509803921));
z-index: 1;
margin-top: 4px;
align-self: flex-start;
padding-right: 24px;
padding-bottom: 16px;
opacity: 1;
}
.gh-dashboard-hero.source-attribution:not(.is-solo) {
margin-top: -64px;
}
.gh-dashboard-metric-minivalue {
font-size: 1.5rem;
letter-spacing: 0;
@ -986,6 +1000,77 @@ Dashboard Zero */
filter: brightness(0.8);
}
/* ---------------------------------
Dashboard Attribution */
.gh-dashboard-list-item-source {
padding-left: 20px;
position: relative;
}
.gh-dashboard-list-item-source::after {
content: "";
width: 9px;
height: 9px;
border-radius: 8px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
background: #E6E9EB;
}
.gh-dashboard-list-item:first-child .gh-dashboard-list-item-source::after {
background: #8e42ff;
}
.gh-dashboard-list-item:nth-child(2) .gh-dashboard-list-item-source::after {
background: #BB4AE5;
}
.gh-dashboard-list-item:nth-child(3) .gh-dashboard-list-item-source::after {
background: #DD97C9;
}
.gh-dashboard-list-item:nth-child(4) .gh-dashboard-list-item-source::after {
background: #E19A98;
}
.gh-dashboard-list-item:nth-child(5) .gh-dashboard-list-item-source::after {
background: #F5C9C2;
}
.gh-dashboard-attribution-list .gh-dashboard-list-body{
position: relative;
}
.gh-dashboard-attribution-list-scrollable {
overflow-y: auto;
padding-top: 6px;
padding-bottom: 6px;
}
.gh-dashboard-attribution-list .gh-dashboard-list-body:after {
content: " ";
position: absolute;
left: 0;
right: 0;
height: 24px;
bottom: 0;
background: linear-gradient(180deg,#ffffff00,hsl(0deg 0% 100%) 100%);
z-index: 1;
}
.gh-dashboard-attribution-list .gh-dashboard-list-body:before {
content: " ";
position: absolute;
left: 0;
right: 0;
height: 24px;
top: 0;
background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
z-index: 1;
}
/* ---------------------------------
Dashboard Engagement */

View File

@ -747,6 +747,45 @@ label[for="member-description"] + p {
stroke: var(--midgrey);
}
.gh-member-details-attribution {
display: grid;
grid-template-columns: 1fr;
padding: 0 0 3.2rem 0;
}
.gh-member-details-attribution svg {
width: 1.6rem;
height: 1.6rem;
margin-right: .8rem;
flex-shrink: 0;
}
.gh-member-details-attribution p {
display: flex;
align-items: center;
white-space: nowrap;
min-width: 0;
}
.gh-member-details-attribution p a {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-weight: 600;
color: var(--darkgrey);
}
.gh-member-details-attribution svg path, .gh-member-details-attribution svg circle {
stroke: var(--midgrey);
fill: none;
}
.gh-member-details-attribution .gh-main-section-header {
margin-bottom: 1.6rem;
border-bottom: 1px solid var(--whitegrey);
grid-column: 1 !important;
}
.gh-member-details-stats-container {
display: flex;
flex-direction: column;
@ -2321,6 +2360,22 @@ p.gh-members-import-errordetail:first-of-type {
left: auto;
}
.gh-cp-membertier-details {
margin-top: 1px;
color: var(--middarkgrey);
font-weight: 500;
}
.gh-cp-membertier-details svg {
width: 10px;
margin-left: 4px;
}
.gh-cp-membertier-details svg path {
stroke-width: 3px;
stroke: var(--middarkgrey);
}
.gh-membertier-subscription .action-menu .gh-btn-subscription-action:not(:hover) {
border: 1px solid var(--whitegrey);
background: var(--main-bg-color) !important;
@ -2412,7 +2467,8 @@ p.gh-members-import-errordetail:first-of-type {
}
.gh-cp-membertier-attribution .gh-tier-card-header {
padding-bottom: 16px;
display: flex;
align-items: flex-start;
}
.gh-cp-membertier-attribution .tier-actions-menu {
@ -2422,7 +2478,7 @@ p.gh-members-import-errordetail:first-of-type {
.gh-cp-membertier-attribution .gh-tier-card-price {
border: none !important;
background: #f5f6f6;
padding: 10px !important;
padding: 20px 10px !important;
border-radius: 6px;
}
@ -2459,6 +2515,7 @@ p.gh-members-import-errordetail:first-of-type {
}
.gh-cp-membertier-attribution .gh-membertier-advanced {
margin-top: 16px;
padding-top: 16px;
border-top:1px solid #ECEEF0;
}
@ -2476,6 +2533,10 @@ p.gh-members-import-errordetail:first-of-type {
margin: 0;
}
.gh-cp-membertier-attribution .gh-membertier-detail {
margin-bottom: 1.6rem;
}
.gh-cp-membertier-attribution .gh-membertier-details span, .gh-cp-membertier-attribution .gh-membertier-details a {
font-size: 1.4rem;
font-weight: 600;
@ -2484,4 +2545,9 @@ p.gh-members-import-errordetail:first-of-type {
.gh-cp-membertier-attribution .gh-cp-membertier-renewal {
color: #7c8b9a;
}
.gh-cp-membertier-attribution .gh-membertier-detail-timestamp {
font-size: 1.2rem;
color: var(--midgrey);
}

View File

@ -17,9 +17,21 @@
{{/if}}
<div class="gh-dashboard-group {{if this.isTotalMembersZero 'is-zero'}}">
<Dashboard::Charts::Anchor />
{{#if (feature 'sourceAttribution')}}
<Dashboard::Charts::Attribution />
<Dashboard::Charts::Anchors />
{{else}}
<Dashboard::Charts::Anchor />
{{/if}}
{{#if this.hasPaidTiers}}
{{#if (feature 'sourceAttribution')}}
<section class="gh-dashboard-section">
<article class="gh-dashboard-box" style="display:flex; flex:1;flex-direction:row;">
<Dashboard::Charts::PaidBreakdown />
<Dashboard::Charts::PaidMix />
</article>
</section>
<Dashboard::Charts::Attribution />
{{/if}}
{{/if}}
{{#if this.areNewslettersEnabled}}
<Dashboard::Charts::Engagement />

View File

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5px" height="24" width="24">
<title>earth</title>
<defs>
<style>
.a{fill:none;stroke:currentColor;}
</style>
</defs>
<g><circle class="a" cx="12" cy="12" r="11.25" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></circle><path d="M9.88,23.05c-1.57-2.2-2.63-6.33-2.63-11S8.31,3.15,9.88,1" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.12,23.05c1.57-2.2,2.63-6.33,2.63-11S15.69,3.15,14.12,1" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><line x1="0.75" y1="12" x2="23.25" y2="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><line x1="2.05" y1="17.25" x2="21.95" y2="17.25" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><line x1="2.05" y1="6.75" x2="21.95" y2="6.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line></g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB