mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-17 23:44:39 -05:00
Removed a ton of unnecessary files and refactored the MRR component to be consistent
refs: https://github.com/TryGhost/Team/issues/1531
This commit is contained in:
James Morris
parent
c488ca4dc5
commit
236f6589c2
10 changed files with 2 additions and 342 deletions
|
|
@ -58,7 +58,7 @@
|
|||
|
||||
{{#if this.hasPaidTiers}}
|
||||
<article class="gh-dashboard5-minicharts">
|
||||
<Dashboard::v5::Charts::Mrr />
|
||||
<Dashboard::v5::Charts::PaidMrr />
|
||||
<Dashboard::v5::Charts::PaidBreakdown />
|
||||
<Dashboard::v5::Charts::PaidMix />
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -1,28 +0,0 @@
|
|||
<section class="gh-dashboard5-section gh-dashboard5-email-open-rate" {{did-insert this.loadCharts}}>
|
||||
<article class="gh-dashboard5-box">
|
||||
<Dashboard::v5::Parts::Metric
|
||||
@label="Email open rate"
|
||||
@value="{{this.currentOpenRate}}%"
|
||||
/>
|
||||
|
||||
<div class="gh-dashboard5-chart">
|
||||
{{#if this.loading}}
|
||||
<div class="gh-dashboard5-chart-loading" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
|
||||
{{else}}
|
||||
<div class="gh-dashboard5-chart-ticks">
|
||||
<span>100%</span>
|
||||
<span>75%</span>
|
||||
<span>50%</span>
|
||||
<span>25%</span>
|
||||
</div>
|
||||
<div class="gh-dashboard5-chart-container">
|
||||
<EmberChart
|
||||
@type={{this.chartType}}
|
||||
@data={{this.chartData}}
|
||||
@options={{this.chartOptions}}
|
||||
@height={{this.chartHeight}} />
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
|
@ -1,124 +0,0 @@
|
|||
import Component from '@glimmer/component';
|
||||
import {action} from '@ember/object';
|
||||
import {inject as service} from '@ember/service';
|
||||
|
||||
export default class EmailOpenRate extends Component {
|
||||
@service dashboardStats;
|
||||
@service feature;
|
||||
|
||||
/**
|
||||
* Call this method when you need to fetch new data from the server.
|
||||
*/
|
||||
@action
|
||||
loadCharts() {
|
||||
// The dashboard stats service will take care or reusing and limiting API-requests between charts
|
||||
this.dashboardStats.loadEmailOpenRateStats();
|
||||
}
|
||||
|
||||
get currentOpenRate() {
|
||||
if (this.dashboardStats.emailOpenRateStats === null || this.dashboardStats.emailOpenRateStats.length === 0) {
|
||||
return '-';
|
||||
}
|
||||
|
||||
return this.dashboardStats.emailOpenRateStats[this.dashboardStats.emailOpenRateStats.length - 1].openRate;
|
||||
}
|
||||
|
||||
get loading() {
|
||||
return this.dashboardStats.emailOpenRateStats === null;
|
||||
}
|
||||
|
||||
get chartType() {
|
||||
return 'bar';
|
||||
}
|
||||
|
||||
get chartData() {
|
||||
const stats = this.dashboardStats.emailOpenRateStats;
|
||||
const labels = stats.map(stat => stat.subject);
|
||||
const data = stats.map(stat => stat.openRate);
|
||||
|
||||
return {
|
||||
labels,
|
||||
datasets: [{
|
||||
data,
|
||||
fill: false,
|
||||
backgroundColor: '#14B8FF',
|
||||
cubicInterpolationMode: 'monotone',
|
||||
barThickness: 18,
|
||||
minBarLength: 4
|
||||
}]
|
||||
};
|
||||
}
|
||||
|
||||
get chartOptions() {
|
||||
return {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
title: {
|
||||
display: false
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
hover: {
|
||||
onHover: function (e) {
|
||||
e.target.style.cursor = 'pointer';
|
||||
}
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
mode: 'index',
|
||||
displayColors: false,
|
||||
backgroundColor: '#15171A',
|
||||
xPadding: 7,
|
||||
yPadding: 7,
|
||||
cornerRadius: 5,
|
||||
caretSize: 7,
|
||||
caretPadding: 5,
|
||||
bodyFontSize: 12.5,
|
||||
titleFontSize: 12,
|
||||
titleFontStyle: 'normal',
|
||||
titleFontColor: 'rgba(255, 255, 255, 0.7)',
|
||||
titleMarginBottom: 3
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
gridLines: {
|
||||
drawTicks: false,
|
||||
display: false,
|
||||
drawBorder: false
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
maxTicksLimit: 5,
|
||||
fontColor: '#7C8B9A',
|
||||
padding: 8,
|
||||
precision: 0
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
color: this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.85)',
|
||||
borderDash: [4,4],
|
||||
display: true,
|
||||
drawBorder: true,
|
||||
drawTicks: false,
|
||||
zeroLineWidth: 1,
|
||||
zeroLineColor: this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.85)',
|
||||
zeroLineBorderDash: [4,4]
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
maxTicksLimit: 5,
|
||||
autoSkip: true,
|
||||
maxRotation: 0,
|
||||
minRotation: 0
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
get chartHeight() {
|
||||
return 125;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<section class="gh-dashboard5-section gh-dashboard5-email">
|
||||
<article class="gh-dashboard5-box">
|
||||
<div {{did-insert this.loadCharts}} class="gh-dashboard5-rows">
|
||||
<div class="gh-dashboard5-row">
|
||||
<Dashboard::v5::Parts::Metric
|
||||
@label="Newsletter subscribers"
|
||||
@value={{format-number this.dataSubscribers.total}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="gh-dashboard5-row">
|
||||
<Dashboard::v5::Parts::Metric
|
||||
@label="Emails sent over last 30 days"
|
||||
@value={{format-number this.dataEmailsSent}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
import Component from '@glimmer/component';
|
||||
import {action} from '@ember/object';
|
||||
import {inject as service} from '@ember/service';
|
||||
|
||||
export default class Email extends Component {
|
||||
@service dashboardStats;
|
||||
|
||||
/**
|
||||
* Call this method when you need to fetch new data from the server.
|
||||
*/
|
||||
@action
|
||||
loadCharts() {
|
||||
// The dashboard stats service will take care or reusing and limiting API-requests between charts
|
||||
this.dashboardStats.loadNewsletterSubscribers();
|
||||
this.dashboardStats.loadEmailsSent();
|
||||
}
|
||||
|
||||
get dataSubscribers() {
|
||||
// @todo: show paid, free, total together
|
||||
return this.dashboardStats.newsletterSubscribers ?? {
|
||||
total: 0,
|
||||
free: 0,
|
||||
paid: 0
|
||||
};
|
||||
}
|
||||
|
||||
get dataEmailsSent() {
|
||||
return this.dashboardStats.emailsSent30d ?? 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -35,7 +35,7 @@ Chart.controllers.hoverLine = Chart.controllers.line.extend({
|
|||
}
|
||||
});
|
||||
|
||||
export default class Mrr extends Component {
|
||||
export default class PaidMrr extends Component {
|
||||
@service dashboardStats;
|
||||
@service feature;
|
||||
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<section class="gh-dashboard5-section gh-dashboard5-section-main gh-dashboard5-multi">
|
||||
<article class="gh-dashboard5-box is-faded">
|
||||
|
||||
<div class="gh-dashboard5-thirds">
|
||||
|
||||
<div class="gh-dashboard5-thirds-main">
|
||||
<div class="gh-dashboard5-list-header">
|
||||
<Dashboard::v5::Parts::Metric @label="Resources" />
|
||||
</div>
|
||||
<div class="gh-members-help-card">
|
||||
<div class="gh-members-help-content">
|
||||
<div class="thumbnail" style="background-image: url(assets/img/marketing/members-1.jpg);"></div>
|
||||
<div class="text">
|
||||
<h3>Building your audience with subscriber signups</h3>
|
||||
<p>Learn how to turn anonymous visitors into logged-in members with memberships in Ghost.</p>
|
||||
<a href="https://ghost.org/resources/build-audience-subscriber-signups/" target="_blank" rel="noopener noreferrer" class="gh-btn gh-btn-link">Start building →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-dashboard5-articles-footer">
|
||||
<a href="https://ghost.org/resources/" target="_blank" rel="noopener noreferrer">See all resources →</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-dashboard5-thirds-sub">
|
||||
<Dashboard::v5::Resources::StaffPicks />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</article>
|
||||
</section>
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
import Component from '@glimmer/component';
|
||||
import fetch from 'fetch';
|
||||
import {action} from '@ember/object';
|
||||
import {task} from 'ember-concurrency';
|
||||
import {tracked} from '@glimmer/tracking';
|
||||
|
||||
const RSS_FEED_URL = 'https://zapier.com/engine/rss/678920/ghoststaffpicks';
|
||||
const LIMIT = 3;
|
||||
|
||||
export default class Multi extends Component {
|
||||
@tracked loading = null;
|
||||
@tracked error = null;
|
||||
@tracked staffPicks = null;
|
||||
|
||||
@action
|
||||
load() {
|
||||
this.loading = true;
|
||||
this.fetch.perform().then(() => {
|
||||
this.loading = false;
|
||||
}, (error) => {
|
||||
this.error = error;
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
@task
|
||||
*fetch() {
|
||||
let response = yield fetch(RSS_FEED_URL);
|
||||
if (!response.ok) {
|
||||
// eslint-disable-next-line
|
||||
console.error('Failed to fetch staff picks', {response});
|
||||
this.error = 'Failed to fetch';
|
||||
return;
|
||||
}
|
||||
|
||||
const str = yield response.text();
|
||||
const document = new DOMParser().parseFromString(str, 'text/xml');
|
||||
|
||||
const items = document.querySelectorAll('channel > item');
|
||||
this.staffPicks = [];
|
||||
|
||||
for (let index = 0; index < items.length && index < LIMIT; index += 1) {
|
||||
const item = items[index];
|
||||
const title = item.getElementsByTagName('title')[0].textContent;
|
||||
const link = item.getElementsByTagName('link')[0].textContent;
|
||||
const creator = item.getElementsByTagName('dc:creator')[0].textContent;
|
||||
|
||||
const entry = {
|
||||
title,
|
||||
link,
|
||||
creator
|
||||
};
|
||||
|
||||
this.staffPicks.push(entry);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
<section class="gh-dashboard5-section gh-dashboard5-triple">
|
||||
|
||||
<div class="gh-dashboard5-tabs">
|
||||
<button type="button" class="gh-dashboard5-tab {{if this.postsTabSelected 'is-selected'}}" {{on "click" this.changeTabToPosts}}>
|
||||
<Dashboard::v5::Parts::Metric
|
||||
@label="Recent posts" />
|
||||
</button>
|
||||
{{#if this.areMembersEnabled}}
|
||||
<button type="button" class="gh-dashboard5-tab {{if this.activityTabSelected 'is-selected'}}" {{on "click" this.changeTabToActivity}}>
|
||||
<Dashboard::v5::Parts::Metric
|
||||
@label="Member activity" />
|
||||
</button>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<div class="gh-dashboard5-articles">
|
||||
<a class="gh-dashboard5-article" href="https://ghost.org/help/offers" target="_blank" rel="noopener noreferrer">
|
||||
<div class="gh-dashboard5-article-content">
|
||||
<div class="gh-dashboard5-article-thumbnail" style="background-image: url(assets/img/marketing/offers-1.jpg);"></div>
|
||||
<div class="gh-dashboard5-article-text">
|
||||
<h3>How to create offers in Ghost</h3>
|
||||
<p>Find out how to create and promote offers to increase your subscriptions.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-btn gh-dashboard5-article-link"><span>Read more</span></div>
|
||||
</a>
|
||||
|
||||
<a class="gh-dashboard5-article" href="https://ghost.org/help/offers" target="_blank" rel="noopener noreferrer">
|
||||
<div class="gh-dashboard5-article-content">
|
||||
<div class="gh-dashboard5-article-thumbnail" style="background-image: url(assets/img/marketing/offers-1.jpg);"></div>
|
||||
<div class="gh-dashboard5-article-text">
|
||||
<h3>How to create offers in Ghost</h3>
|
||||
<p>Find out how to create and promote offers to increase your subscriptions.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-btn gh-dashboard5-article-link"><span>Read more</span></div>
|
||||
</a>
|
||||
|
||||
<a class="gh-dashboard5-article" href="https://ghost.org/help/offers" target="_blank" rel="noopener noreferrer">
|
||||
<div class="gh-dashboard5-article-content">
|
||||
<div class="gh-dashboard5-article-thumbnail" style="background-image: url(assets/img/marketing/offers-1.jpg);"></div>
|
||||
<div class="gh-dashboard5-article-text">
|
||||
<h3>How to create offers in Ghost</h3>
|
||||
<p>Find out how to create and promote offers to increase your subscriptions.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-btn gh-dashboard5-article-link"><span>Read more</span></div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
Loading…
Add table
Reference in a new issue