TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-26 04:13:30 +03:00
Code Issues Projects Releases Wiki Activity

Updated open rate chart

Browse Source 
- changed to bar chart
- added handling of empty dataset
This commit is contained in:
Peter Zimon 2021-02-23 12:50:54 +01:00
parent c7bc501d23
commit 92dbc288ec
5 changed files with 55 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ghost/admin/app/components/gh-members-chart.hbs
View File

@ -3,7 +3,7 @@
<GhLoadingSpinner />
{{else}}
<EmberChart
@type="LineWithLine"
@type={{this.type}}
@options={{this.chartOptions}}
@data={{this.chartData}}
@height={{300}} />

47
ghost/admin/app/components/gh-members-chart.js
View File

@ -126,6 +126,18 @@ export default Component.extend({
// Internal ----------------------------------------------------------------
setChartData({dateLabels, dateValues, label = 'Total Members'}) {
let backgroundColors = this.lineColor;
if (this.chartType === 'open-rate') {
backgroundColors = dateValues.map((dateValue) => {
if (dateValue) {
return this.lineColor;
} else {
return (this.nightShift ? '#7C8B9A' : '#CED4D9');
}
});
}
this.set('chartData', {
labels: dateLabels,
datasets: [{
@ -133,11 +145,13 @@ export default Component.extend({
cubicInterpolationMode: 'monotone',
data: dateValues,
fill: false,
backgroundColor: this.lineColor,
backgroundColor: backgroundColors,
pointRadius: 0,
pointHitRadius: 10,
borderColor: this.lineColor,
borderJoinStyle: 'miter'
borderJoinStyle: 'miter',
maxBarThickness: 20,
minBarLength: 2
}]
});
},
@ -145,6 +159,10 @@ export default Component.extend({
setChartOptions({rangeInDays}) {
let maxTicksAllowed = this.isSmall ? 3 : this.getTicksForRange(rangeInDays);
if (this.chartType === 'open-rate') {
maxTicksAllowed = 0;
}
this.setChartJSDefaults();
let options = {
responsive: true,
@ -176,6 +194,15 @@ export default Component.extend({
titleFontStyle: 'normal',
titleFontColor: 'rgba(255, 255, 255, 0.7)',
titleMarginBottom: 3,
filter: (tooltipItems, data) => {
if (this.chartType === 'open-rate') {
let label = data.labels[tooltipItems.index];
if (label === '') {
return false;
}
}
return true;
},
callbacks: {
label: (tooltipItems, data) => {
const labelText = data.datasets[tooltipItems.datasetIndex].label;
@ -184,9 +211,19 @@ export default Component.extend({
const currency = getSymbol(this.stats.currency);
valueText = `${currency}${valueText}`;
}
if (this.chartType === 'open-rate') {
valueText = `${valueText}%`;
}
return `${labelText}: ${valueText}`;
},
title: function (tooltipItems) {
title: (tooltipItems) => {
if (this.chartType === 'open-rate') {
if (tooltipItems.length) {
return tooltipItems[0].xLabel;
} else {
return '';
}
}
return moment(tooltipItems[0].xLabel).format(DATE_FORMAT);
}
}
@ -215,7 +252,7 @@ export default Component.extend({
autoSkip: false,
fontColor: '#626D79',
maxTicksLimit: 10,
callback: function (value, index, values) {
callback: (value, index, values) => {
let step = (values.length - 1) / (maxTicksAllowed);
let steps = [];
for (let i = 0; i < maxTicksAllowed; i++) {
@ -225,7 +262,7 @@ export default Component.extend({
if (index === 0) {
return value;
}
if (index === (values.length - 1)) {
if (index === (values.length - 1) && this.chartType !== 'open-rate') {
return 'Today';
}

6
ghost/admin/app/controllers/dashboard.js
View File

@ -167,11 +167,11 @@ export default class DashboardController extends Controller {
rangeInDays: 30
},
data: {
label: 'Open Rate',
dateLabels: results.map(d => d.submittedAt),
label: 'Open rate',
dateLabels: results.map(d => d.subject),
dateValues: results.map(d => d.openRate)
},
title: 'Open Rate',
title: 'Open rate',
stats: results
};
this.newsletterOpenRatesLoading = false;

9
ghost/admin/app/services/members-stats.js
View File

@ -144,10 +144,11 @@ export default class MembersStatsService extends Service {
@task
*_fetchNewsletterStatsTask() {
const limit = 5;
let query = {
filter: 'email_count:-0',
order: 'submitted_at desc',
limit: 10
limit: limit
};
const results = yield this.store.query('email', query);
const data = results.toArray();
@ -160,8 +161,8 @@ export default class MembersStatsService extends Service {
});
const paddedResults = [];
if (data.length < 10) {
const pad = 10 - data.length;
if (data.length < limit) {
const pad = limit - data.length;
const lastSubmittedAt = data.length > 0 ? data[results.length - 1].submittedAtUTC : moment();
for (let i = 0; i < pad; i++) {
paddedResults.push({
@ -171,7 +172,7 @@ export default class MembersStatsService extends Service {
});
}
}
stats = stats.concat(paddedResults);
stats = stats .concat(paddedResults);
stats.reverse();
this.newsletterStats = stats;
return stats;

8
ghost/admin/app/templates/dashboard.hbs
View File

@ -24,7 +24,7 @@
</div>
{{#if this.mrrStatsData}}
<div class="gh-dashboard-chart">
<GhMembersChart @nightShift={{feature "nightShift"}} @showSummary={{false}} @showRange={{false}} @chartType="mrr" @chartStats={{this.mrrStatsData}} />
<GhMembersChart @type="LineWithLine" @nightShift={{feature "nightShift"}} @showSummary={{false}} @showRange={{false}} @chartType="mrr" @chartStats={{this.mrrStatsData}} />
</div>
{{else}}
<div class="gh-dashboard-chart nodata">
@ -43,7 +43,7 @@
</div>
</div>
<div class="gh-dashboard-chart small">
<GhMembersChart @nightShift={{feature "nightShift"}} @chartSize="small" @showSummary={{false}} @chartType="all-members" @showRange={{false}} @chartStats={{this.memberCountStatsData.all}} />
<GhMembersChart @type="LineWithLine" @nightShift={{feature "nightShift"}} @chartSize="small" @showSummary={{false}} @chartType="all-members" @showRange={{false}} @chartStats={{this.memberCountStatsData.all}} />
</div>
</div>
</div>
@ -57,7 +57,7 @@
</div>
</div>
<div class="gh-dashboard-chart small">
<GhMembersChart @nightShift={{feature "nightShift"}} @chartSize="small" @showSummary={{false}} @chartType="paid-members" @showRange={{false}} @chartStats={{this.memberCountStatsData.paid}} />
<GhMembersChart @type="LineWithLine" @nightShift={{feature "nightShift"}} @chartSize="small" @showSummary={{false}} @chartType="paid-members" @showRange={{false}} @chartStats={{this.memberCountStatsData.paid}} />
</div>
</div>
</div>
@ -71,7 +71,7 @@
</div>
</div>
<div class="gh-dashboard-chart small">
<GhMembersChart @nightShift={{feature "nightShift"}} @chartSize="small" @showSummary={{false}} @chartType="paid-members" @showRange={{false}} @chartStats={{this.newsletterOpenRatesData}} />
<GhMembersChart @type="bar" @nightShift={{feature "nightShift"}} @chartSize="small" @showSummary={{false}} @chartType="open-rate" @showRange={{false}} @chartStats={{this.newsletterOpenRatesData}} />
</div>
</div>
</div>