mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-04-15 03:01:37 -05:00
Cleaned up sourceAttribution flag (#16740)
no issue This commit removes the `sourceAttribution` feature flag from the codebase.
This commit is contained in:
Simon Backx
GitHub
parent
aede64acb9
commit
05bba5135d
14 changed files with 34 additions and 1623 deletions
|
|
@ -40,7 +40,7 @@
|
|||
@large={{true}} />
|
||||
{{/if}}
|
||||
|
||||
<div class="gh-dashboard-hero {{unless this.hasPaidTiers 'is-solo'}} {{if (feature "sourceAttribution") 'source-attribution'}}">
|
||||
<div class="gh-dashboard-hero {{unless this.hasPaidTiers 'is-solo'}} source-attribution">
|
||||
<div class="gh-dashboard-chart gh-dashboard-totals">
|
||||
<div class="gh-dashboard-chart-container">
|
||||
<div class="gh-dashboard-chart-box">
|
||||
|
|
@ -74,17 +74,6 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -1,78 +0,0 @@
|
|||
<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={{component "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>
|
||||
{{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'}}">
|
||||
<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>
|
||||
|
|
@ -1,741 +0,0 @@
|
|||
/* global Chart */
|
||||
|
||||
import Component from '@glimmer/component';
|
||||
import moment from 'moment-timezone';
|
||||
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: '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';
|
||||
}
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<div class="gh-dashboard-minichart gh-dashboard-mrr">
|
||||
<div class="gh-dashboard-content">
|
||||
<div class="gh-dashboard-data">
|
||||
<Dashboard::Parts::Metric
|
||||
@label={{this.chartTitle}}
|
||||
@value="{{this.currentMRRFormatted}}"
|
||||
@trends={{this.hasTrends}}
|
||||
@percentage={{this.mrrTrend}} />
|
||||
</div>
|
||||
<div class="gh-dashboard-chart">
|
||||
{{#if this.loading}}
|
||||
<div class="gh-dashboard-chart-loading">
|
||||
<div class="gh-loading-spinner"></div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="gh-dashboard-chart-container">
|
||||
<div class="gh-dashboard-chart-box">
|
||||
<EmberChart
|
||||
@type={{this.chartType}}
|
||||
@data={{this.chartData}}
|
||||
@options={{this.chartOptions}}
|
||||
@height={{110}} />
|
||||
</div>
|
||||
|
||||
<div id="gh-dashboard-mrr-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">MRR</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,477 +0,0 @@
|
|||
/* global Chart */
|
||||
|
||||
import Component from '@glimmer/component';
|
||||
import moment from 'moment-timezone';
|
||||
import {getSymbol} from 'ghost-admin/utils/currency';
|
||||
import {ghPriceAmount} from '../../../helpers/gh-price-amount';
|
||||
import {inject as service} from '@ember/service';
|
||||
|
||||
const DATE_FORMAT = 'D MMM, YYYY';
|
||||
|
||||
// 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 PaidMrr extends Component {
|
||||
@service dashboardStats;
|
||||
@service feature;
|
||||
|
||||
get loading() {
|
||||
return this.dashboardStats.mrrStats === null;
|
||||
}
|
||||
|
||||
get currentMRR() {
|
||||
return this.dashboardStats.currentMRR ?? 0;
|
||||
}
|
||||
|
||||
get mrrTrend() {
|
||||
return this.calculatePercentage(this.dashboardStats.currentMRRTrend, this.dashboardStats.currentMRR);
|
||||
}
|
||||
|
||||
get hasTrends() {
|
||||
return this.dashboardStats.currentMRR !== null
|
||||
&& this.dashboardStats.currentMRRTrend !== null;
|
||||
}
|
||||
|
||||
get chartTitle() {
|
||||
return 'MRR';
|
||||
}
|
||||
|
||||
get chartType() {
|
||||
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 '';
|
||||
}
|
||||
|
||||
const firstCurrency = this.dashboardStats.mrrStats[0] ? this.dashboardStats.mrrStats[0].currency : 'usd';
|
||||
return getSymbol(firstCurrency);
|
||||
}
|
||||
|
||||
get currentMRRFormatted() {
|
||||
// fake empty data
|
||||
if (this.isTotalMembersZero) {
|
||||
return '$123';
|
||||
}
|
||||
|
||||
if (this.dashboardStats.mrrStats === null) {
|
||||
return '-';
|
||||
}
|
||||
|
||||
const valueText = ghPriceAmount(this.currentMRR, {cents: false});
|
||||
return `${this.mrrCurrencySymbol}${valueText}`;
|
||||
}
|
||||
|
||||
get chartData() {
|
||||
let stats = this.dashboardStats.filledMrrStats;
|
||||
let labels = stats.map(stat => stat.date);
|
||||
let data = stats.map(stat => stat.mrr);
|
||||
|
||||
// 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');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const gradient = ctx.createLinearGradient(0, 0, 0, 120);
|
||||
gradient.addColorStop(0, 'rgba(143, 66, 255, 0.15');
|
||||
gradient.addColorStop(1, 'rgba(143, 66, 255, 0.0');
|
||||
|
||||
return {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
data: data,
|
||||
tension: 1,
|
||||
cubicInterpolationMode: 'monotone',
|
||||
fill: false,
|
||||
fillColor: gradient,
|
||||
backgroundColor: gradient,
|
||||
pointRadius: 0,
|
||||
pointHitRadius: 10,
|
||||
pointBorderColor: '#8E42FF',
|
||||
pointBackgroundColor: '#8E42FF',
|
||||
pointHoverBackgroundColor: '#8E42FF',
|
||||
pointHoverBorderColor: '#8E42FF',
|
||||
pointHoverRadius: 0,
|
||||
borderColor: '#8E42FF',
|
||||
borderJoinStyle: 'miter'
|
||||
}]
|
||||
};
|
||||
}
|
||||
|
||||
get chartOptions() {
|
||||
const that = this;
|
||||
const barColor = this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.65)';
|
||||
|
||||
return {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
title: {
|
||||
display: false
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
layout: {
|
||||
padding: {
|
||||
top: 2,
|
||||
bottom: 2,
|
||||
left: 0,
|
||||
right: 0
|
||||
}
|
||||
},
|
||||
hover: {
|
||||
onHover: function (e) {
|
||||
e.target.style.cursor = 'pointer';
|
||||
}
|
||||
},
|
||||
animation: false,
|
||||
responsiveAnimationDuration: 1,
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
intersect: false,
|
||||
mode: 'index',
|
||||
custom: function (tooltip) {
|
||||
// get tooltip element
|
||||
const tooltipEl = document.getElementById('gh-dashboard-mrr-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;
|
||||
}
|
||||
|
||||
let offsetX = 0;
|
||||
if (tooltip.x > chartWidth - tooltipWidth) {
|
||||
offsetX = tooltipWidth - 10;
|
||||
}
|
||||
|
||||
// update tooltip styles
|
||||
tooltipEl.style.opacity = 1;
|
||||
tooltipEl.style.position = 'absolute';
|
||||
tooltipEl.style.left = tooltip.x - offsetX + 'px';
|
||||
tooltipEl.style.top = tooltip.y + 'px';
|
||||
},
|
||||
callbacks: {
|
||||
label: (tooltipItems, data) => {
|
||||
const value = `${that.mrrCurrencySymbol}${ghPriceAmount(data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index], {cents: false})}`;
|
||||
document.querySelector('#gh-dashboard-mrr-tooltip .gh-dashboard-tooltip-value .value').innerHTML = value;
|
||||
},
|
||||
title: (tooltipItems) => {
|
||||
const value = moment(tooltipItems[0].xLabel).format(DATE_FORMAT);
|
||||
document.querySelector('#gh-dashboard-mrr-tooltip .gh-dashboard-tooltip-label').innerHTML = value;
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
display: true,
|
||||
gridLines: {
|
||||
drawTicks: false,
|
||||
display: false,
|
||||
drawBorder: false,
|
||||
color: 'transparent',
|
||||
zeroLineColor: barColor,
|
||||
zeroLineWidth: 1
|
||||
},
|
||||
ticks: {
|
||||
display: false
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
align: 'start'
|
||||
},
|
||||
gridLines: {
|
||||
color: barColor,
|
||||
borderDash: [4,4],
|
||||
display: false,
|
||||
drawBorder: true,
|
||||
drawTicks: false,
|
||||
zeroLineWidth: 1,
|
||||
zeroLineColor: barColor,
|
||||
zeroLineBorderDash: [4,4]
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
beginAtZero: true
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 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) {
|
||||
return 100;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
return Math.round((to - from) / from * 100);
|
||||
}
|
||||
}
|
||||
|
|
@ -42,21 +42,6 @@
|
|||
Unknown location
|
||||
{{/if}}
|
||||
</p>
|
||||
{{#if (not (feature 'sourceAttribution'))}}
|
||||
<p>
|
||||
{{svg-jar "member-add"}}
|
||||
Created on {{moment-format (moment-site-tz @member.createdAtUTC) "D MMM YYYY"}}
|
||||
</p>
|
||||
{{/if}}
|
||||
{{#if (feature 'sourceAttribution')}}
|
||||
{{else}}
|
||||
{{#if (and @member.attribution @member.attribution.url @member.attribution.title) }}
|
||||
<p>
|
||||
{{svg-jar "satellite"}}
|
||||
Signed up on <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"}}
|
||||
{{#if (not (is-empty @member.lastSeenAtUTC))}}
|
||||
|
|
@ -66,28 +51,26 @@
|
|||
{{/if}}
|
||||
</p>
|
||||
</div>
|
||||
{{#if (feature 'sourceAttribution')}}
|
||||
<div class="gh-member-details-attribution">
|
||||
<h4 class="gh-main-section-header small bn">Signup info</h4>
|
||||
<div class="gh-member-details-attribution">
|
||||
<h4 class="gh-main-section-header small bn">Signup info</h4>
|
||||
<p>
|
||||
{{svg-jar "member-add"}}
|
||||
Created — <span>{{moment-format (moment-site-tz @member.createdAtUTC) "D MMM YYYY"}}</span>
|
||||
</p>
|
||||
{{#if this.referrerSource}}
|
||||
<p>
|
||||
{{svg-jar "member-add"}}
|
||||
Created — <span>{{moment-format (moment-site-tz @member.createdAtUTC) "D MMM YYYY"}}</span>
|
||||
{{svg-jar "earth"}}
|
||||
Source — <span title="{{this.referrerSource}}">{{this.referrerSource}}</span>
|
||||
</p>
|
||||
{{#if this.referrerSource}}
|
||||
<p>
|
||||
{{svg-jar "earth"}}
|
||||
Source — <span title="{{this.referrerSource}}">{{this.referrerSource}}</span>
|
||||
</p>
|
||||
{{/if}}
|
||||
{{#if (and @member.attribution.url @member.attribution.title)}}
|
||||
<p>
|
||||
{{svg-jar "posts"}}
|
||||
Page — <a href="{{@member.attribution.url}}" target="_blank" rel="noopener noreferrer" title="{{ @member.attribution.title }}">{{ @member.attribution.title }}</a>
|
||||
</p>
|
||||
{{!-- <a href="#" class="gh-member-details-attribution-docs">Learn more →</a> --}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{#if (and @member.attribution.url @member.attribution.title)}}
|
||||
<p>
|
||||
{{svg-jar "posts"}}
|
||||
Page — <a href="{{@member.attribution.url}}" target="_blank" rel="noopener noreferrer" title="{{ @member.attribution.title }}">{{ @member.attribution.title }}</a>
|
||||
</p>
|
||||
{{!-- <a href="#" class="gh-member-details-attribution-docs">Learn more →</a> --}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#if (and (not-eq this.settings.membersSignupAccess "none") (not-eq this.settings.editorDefaultEmailRecipients "disabled"))}}
|
||||
<div class="gh-member-details-stats-container">
|
||||
|
|
|
|||
|
|
@ -108,7 +108,6 @@
|
|||
|
||||
{{#each this.tiers as |tier|}}
|
||||
<div class="gh-main-section-content grey gh-member-tier-container" data-test-tier={{tier.id}}>
|
||||
{{#if (feature "sourceAttribution")}}
|
||||
<div class="gh-main-content-card gh-cp-membertier gh-cp-membertier-attribution gh-membertier-subscription {{if (gt tier.subscriptions.length 1) "multiple-subs" ""}}">
|
||||
{{#each tier.subscriptions as |sub index|}}
|
||||
<div class="gh-tier-card-header flex items-center">
|
||||
|
|
@ -265,190 +264,6 @@
|
|||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="gh-main-content-card gh-cp-membertier {{if (gt tier.subscriptions.length 1) "multiple-subs" ""}}">
|
||||
<h3 class="gh-membertier-name" data-test-text="tier-name">
|
||||
{{tier.name}}
|
||||
{{#if (gt tier.subscriptions.length 1)}}
|
||||
<span class="gh-membertier-subcount">{{tier.subscriptions.length}} subscriptions</span>
|
||||
{{/if}}
|
||||
</h3>
|
||||
|
||||
{{#each tier.subscriptions as |sub index|}}
|
||||
<div class="gh-membertier-subscription" data-test-subscription={{index}}>
|
||||
<div class="gh-membertier-details-container">
|
||||
<div>
|
||||
{{#if sub.trialUntil}}
|
||||
<span class="gh-cp-membertier-pricelabel">Free trial</span>
|
||||
{{else}}
|
||||
<span class="gh-cp-membertier-pricelabel">{{sub.price.nickname}}</span>
|
||||
{{/if}}
|
||||
|
||||
–
|
||||
{{#if (eq sub.status "canceled")}}
|
||||
<span class="gh-cp-membertier-renewal">Ended {{sub.validUntil}}</span>
|
||||
<span class="gh-badge archived" data-test-text="member-subscription-status">Cancelled</span>
|
||||
{{else if sub.cancel_at_period_end}}
|
||||
<span class="gh-cp-membertier-renewal">Has access until {{sub.validUntil}}</span>
|
||||
<span class="gh-badge archived" data-test-text="member-subscription-status">Cancelled</span>
|
||||
{{else if sub.compExpiry}}
|
||||
<span class="gh-cp-membertier-renewal">Expires {{sub.compExpiry}}</span>
|
||||
<span class="gh-badge active" data-test-text="member-subscription-status">Active</span>
|
||||
{{else if sub.trialUntil}}
|
||||
<span class="gh-cp-membertier-renewal">Ends {{sub.trialUntil}}</span>
|
||||
<span class="gh-badge active" data-test-text="member-subscription-status">Active</span>
|
||||
{{else}}
|
||||
<span class="gh-cp-membertier-renewal">Renews {{sub.validUntil}}</span>
|
||||
<span class="gh-badge active" data-test-text="member-subscription-status">Active</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{#if sub.cancellationReason}}
|
||||
<div class="gh-membertier-cancelreason"><span class="fw6">Cancellation reason:</span> {{sub.cancellationReason}}</div>
|
||||
{{/if}}
|
||||
{{#if sub.offer}}
|
||||
{{#if (eq sub.offer.type "trial")}}
|
||||
<div>
|
||||
<span class="gh-cp-membertier-pricelabel"> {{sub.offer.name}} </span>
|
||||
offer
|
||||
({{sub.offer.amount}} days free)
|
||||
</div>
|
||||
{{else}}
|
||||
<div>
|
||||
<span class="gh-cp-membertier-pricelabel"> {{sub.offer.name}} </span>
|
||||
offer
|
||||
{{#if (eq sub.offer.type 'fixed')}}
|
||||
({{currency-symbol sub.offer.currency}}{{gh-price-amount sub.offer.amount}} off)
|
||||
{{else}}
|
||||
({{sub.offer.amount}}% off)
|
||||
{{/if}}
|
||||
applied to subscription
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
<div class="gh-membertier-details">
|
||||
<span class="gh-membertier-created">Created on {{sub.startDate}}</span>
|
||||
{{#if (and sub.attribution sub.attribution.url sub.attribution.title) }}
|
||||
<span class="gh-membertier-separator">·</span>
|
||||
<span class="gh-membertier-started">Subscribed on <a href="{{sub.attribution.url}}" target="_blank" rel="noopener noreferrer">{{ sub.attribution.title }}</a></span>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gh-membertier-price-container">
|
||||
<div class="gh-tier-card-price">
|
||||
<div class="flex items-start">
|
||||
<span class="currency-symbol">{{sub.price.currencySymbol}}</span>
|
||||
<span class="amount">{{sub.price.nonDecimalAmount}}</span>
|
||||
</div>
|
||||
<div class="period">{{if (eq sub.price.interval "year") "yearly" "monthly"}}</div>
|
||||
</div>
|
||||
|
||||
{{#if sub.isComplimentary}}
|
||||
<span class="action-menu">
|
||||
<GhDropdownButton
|
||||
@dropdownName="subscription-menu-complimentary"
|
||||
@classNames="gh-btn gh-btn-outline gh-btn-icon fill gh-btn-subscription-action icon-only"
|
||||
@title="Actions"
|
||||
data-test-button="subscription-actions"
|
||||
>
|
||||
<span>
|
||||
{{svg-jar "dotdotdot"}}
|
||||
<span class="hidden">Subscription menu</span>
|
||||
</span>
|
||||
</GhDropdownButton>
|
||||
<GhDropdown
|
||||
@name="subscription-menu-complimentary"
|
||||
@tagName="ul"
|
||||
@classNames="tier-actions-menu dropdown-menu dropdown-align-right"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
{{on "click" (fn this.removeComplimentary (or tier.id tier.tier_id))}}
|
||||
data-test-button="remove-complimentary"
|
||||
>
|
||||
<span class="red">Remove complimentary subscription</span>
|
||||
</button>
|
||||
</li>
|
||||
</GhDropdown>
|
||||
</span>
|
||||
{{else}}
|
||||
<span class="action-menu">
|
||||
<GhDropdownButton @dropdownName="subscription-menu-{{sub.id}}" @classNames="gh-btn gh-btn-outline gh-btn-icon fill gh-btn-subscription-action icon-only" @title="Actions">
|
||||
<span>
|
||||
{{svg-jar "dotdotdot"}}
|
||||
<span class="hidden">Subscription menu</span>
|
||||
</span>
|
||||
</GhDropdownButton>
|
||||
<GhDropdown @name="subscription-menu-{{sub.id}}" @tagName="ul" @classNames="tier-actions-menu dropdown-menu dropdown-align-right">
|
||||
<li>
|
||||
<a href="https://dashboard.stripe.com/customers/{{sub.customer.id}}" target="_blank" rel="noopener noreferrer">
|
||||
View Stripe customer
|
||||
</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<a href="https://dashboard.stripe.com/subscriptions/{{sub.id}}" target="_blank" rel="noopener noreferrer">
|
||||
View Stripe subscription
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
{{#if (not-eq sub.status "canceled")}}
|
||||
{{#if sub.cancel_at_period_end}}
|
||||
<button type="button" {{on "click" (fn this.continueSubscription sub.id)}}>
|
||||
<span>Continue subscription</span>
|
||||
</button>
|
||||
{{else}}
|
||||
<button type="button" {{on "click" (fn this.cancelSubscription sub.id)}}>
|
||||
<span class="red">Cancel subscription</span>
|
||||
</button>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</li>
|
||||
</GhDropdown>
|
||||
</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
|
||||
{{#if (eq tier.subscriptions.length 0)}}
|
||||
<div class="gh-membertier-subscription">
|
||||
<div>
|
||||
<div>
|
||||
<span class="gh-cp-membertier-pricelabel">Complimentary</span>
|
||||
<span class="gh-badge active">Active</span>
|
||||
</div>
|
||||
<div class="gh-membertier-created">Created on</div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="gh-tier-card-price">
|
||||
<div class="flex items-start">
|
||||
<span class="currency-symbol">$</span>
|
||||
<span class="amount">0</span>
|
||||
</div>
|
||||
<div class="period">yearly</div>
|
||||
</div>
|
||||
<span class="action-menu">
|
||||
<GhDropdownButton @dropdownName="subscription-menu-complimentary" @classNames="gh-btn gh-btn-outline gh-btn-icon fill gh-btn-subscription-action icon-only" @title="Actions">
|
||||
<span>
|
||||
{{svg-jar "dotdotdot"}}
|
||||
<span class="hidden">Subscription menu</span>
|
||||
</span>
|
||||
</GhDropdownButton>
|
||||
<GhDropdown @name="subscription-menu-complimentary" @tagName="ul" @classNames="tier-actions-menu dropdown-menu dropdown-align-right">
|
||||
<li>
|
||||
<button type="button" {{on "click" (fn this.removeComplimentary tier.id)}}>
|
||||
<span class="red">Remove complimentary subscription</span>
|
||||
</button>
|
||||
</li>
|
||||
</GhDropdown>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/each}}
|
||||
|
||||
|
|
|
|||
|
|
@ -295,7 +295,7 @@ export default class Analytics extends Component {
|
|||
}
|
||||
|
||||
get showSources() {
|
||||
return this.feature.get('sourceAttribution') && this.post.showAttributionAnalytics;
|
||||
return this.post.showAttributionAnalytics;
|
||||
}
|
||||
|
||||
get showMentions() {
|
||||
|
|
|
|||
|
|
@ -252,7 +252,7 @@ export default class Analytics extends Component {
|
|||
}
|
||||
|
||||
get showSources() {
|
||||
return this.feature.get('sourceAttribution') && this.post.showAttributionAnalytics;
|
||||
return this.post.showAttributionAnalytics;
|
||||
}
|
||||
|
||||
get isLoaded() {
|
||||
|
|
|
|||
|
|
@ -61,7 +61,6 @@ export default class FeatureService extends Service {
|
|||
// labs flags
|
||||
@feature('urlCache') urlCache;
|
||||
@feature('memberAttribution') memberAttribution;
|
||||
@feature('sourceAttribution') sourceAttribution;
|
||||
@feature('lexicalEditor') lexicalEditor;
|
||||
@feature('lexicalMultiplayer') lexicalMultiplayer;
|
||||
@feature('audienceFeedback') audienceFeedback;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<section class="gh-canvas" {{scroll-top}}>
|
||||
<div class="gh-dashboard">
|
||||
{{#if (feature 'sourceAttribution')}}
|
||||
<GhCanvasHeader class="gh-canvas-header sticky">
|
||||
<h2 class="gh-canvas-title" data-test-screen-title>
|
||||
Dashboard
|
||||
|
|
@ -79,15 +78,6 @@
|
|||
</div>
|
||||
{{/unless}}
|
||||
</GhCanvasHeader>
|
||||
{{else}}
|
||||
<div class="gh-dashboard-inner">
|
||||
<GhCanvasHeader class="gh-canvas-header">
|
||||
<h2 class="gh-canvas-title" data-test-screen-title>
|
||||
Dashboard
|
||||
</h2>
|
||||
</GhCanvasHeader>
|
||||
</div>
|
||||
{{/if}}
|
||||
<section class="gh-dashboard-layout">
|
||||
{{#if this.isLoading }}
|
||||
<GhLoadingSpinner />
|
||||
|
|
@ -98,24 +88,18 @@
|
|||
{{/if}}
|
||||
|
||||
<div class="gh-dashboard-group {{if this.isTotalMembersZero 'is-zero'}}">
|
||||
{{#if (feature 'sourceAttribution')}}
|
||||
<Dashboard::Charts::AnchorAttribution />
|
||||
{{else}}
|
||||
<Dashboard::Charts::Anchor />
|
||||
{{/if}}
|
||||
{{#if (feature 'sourceAttribution')}}
|
||||
{{#if this.hasPaidTiers}}
|
||||
<section class="gh-dashboard-section">
|
||||
<article class="gh-dashboard-box gh-dashboard-minicharts-attribution">
|
||||
<Dashboard::Charts::PaidBreakdown />
|
||||
<Dashboard::Charts::PaidMix />
|
||||
</article>
|
||||
</section>
|
||||
{{/if}}
|
||||
{{#unless this.membersUtils.isMembersInviteOnly}}
|
||||
<Dashboard::Charts::Attribution />
|
||||
{{/unless}}
|
||||
<Dashboard::Charts::AnchorAttribution />
|
||||
{{#if this.hasPaidTiers}}
|
||||
<section class="gh-dashboard-section">
|
||||
<article class="gh-dashboard-box gh-dashboard-minicharts-attribution">
|
||||
<Dashboard::Charts::PaidBreakdown />
|
||||
<Dashboard::Charts::PaidMix />
|
||||
</article>
|
||||
</section>
|
||||
{{/if}}
|
||||
{{#unless this.membersUtils.isMembersInviteOnly}}
|
||||
<Dashboard::Charts::Attribution />
|
||||
{{/unless}}
|
||||
{{#if this.areNewslettersEnabled}}
|
||||
<Dashboard::Charts::Engagement />
|
||||
{{/if}}
|
||||
|
|
@ -142,27 +126,6 @@
|
|||
<Dashboard::Resources::WhatsNew />
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if (not (feature 'sourceAttribution'))}}
|
||||
{{#unless this.isTotalMembersZero}}
|
||||
<div class="gh-dashboard-select">
|
||||
<PowerSelect
|
||||
@selected={{this.selectedDaysOption}}
|
||||
@options={{this.daysOptions}}
|
||||
@searchEnabled={{false}}
|
||||
@onChange={{this.onDaysChange}}
|
||||
@triggerComponent={{component "gh-power-select/trigger"}}
|
||||
@triggerClass="gh-contentfilter-menu-trigger"
|
||||
@dropdownClass="gh-contentfilter-menu-dropdown is-narrow"
|
||||
@matchTriggerWidth={{false}}
|
||||
@horizontalPosition="right"
|
||||
as |option|
|
||||
>
|
||||
{{#if option.name}}{{option.name}}{{else}}<span class="red">Unknown option</span>{{/if}}
|
||||
</PowerSelect>
|
||||
</div>
|
||||
{{/unless}}
|
||||
{{/if}}
|
||||
</section>
|
||||
|
||||
{{#if (enable-developer-experiments)}}
|
||||
|
|
|
|||
|
|
@ -77,7 +77,6 @@
|
|||
<p>Customize emails and set email addresses</p>
|
||||
</div>
|
||||
</LinkTo>
|
||||
{{#if (feature 'sourceAttribution')}}
|
||||
<LinkTo class="gh-setting-group" @route="settings.analytics" data-test-nav="members-analytics">
|
||||
<span class="green">{{svg-jar "chart"}}</span>
|
||||
<div>
|
||||
|
|
@ -85,7 +84,6 @@
|
|||
<p>Decide what data you collect</p>
|
||||
</div>
|
||||
</LinkTo>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<div class="gh-setting-header">Advanced</div>
|
||||
|
|
@ -123,4 +121,4 @@
|
|||
</LinkTo>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@ const messages = {
|
|||
|
||||
// flags in this list always return `true`, allows quick global enable prior to full flag removal
|
||||
const GA_FEATURES = [
|
||||
'sourceAttribution',
|
||||
'memberAttribution',
|
||||
'audienceFeedback',
|
||||
'themeErrorsNotification',
|
||||
|
|
|
|||
|
|
@ -718,7 +718,7 @@ exports[`Settings API Edit Can edit a setting 2: [headers] 1`] = `
|
|||
Object {
|
||||
"access-control-allow-origin": "http://127.0.0.1:2369",
|
||||
"cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0",
|
||||
"content-length": "4068",
|
||||
"content-length": "4041",
|
||||
"content-type": "application/json; charset=utf-8",
|
||||
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
|
||||
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue