mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-03 00:15:11 +03:00
3b9525dd63
refs: https://github.com/TryGhost/Team/issues/1462 - remove dummy percentages where not necessary - trying out a narrower width for the dashboard - added in a basic layout for the various charts - added more specific styles to each of the graphs - tried out a different way of displaying metrics - different way to show headers for each module - made the grid and flex layouts a little more flexible - there are some bits to still clean up with code
114 lines
3.4 KiB
JavaScript
114 lines
3.4 KiB
JavaScript
import Component from '@glimmer/component';
|
|
import {action} from '@ember/object';
|
|
import {inject as service} from '@ember/service';
|
|
|
|
export default class ChartPaidMembers extends Component {
|
|
@service dashboardStats;
|
|
|
|
/**
|
|
* Call this method when you need to fetch new data from the server. In this component, it will get called
|
|
* when the days parameter changes and on initialisation.
|
|
*/
|
|
@action
|
|
loadCharts() {
|
|
// The dashboard stats service will take care or reusing and limiting API-requests between charts
|
|
this.dashboardStats.loadMemberCountStats();
|
|
}
|
|
|
|
get loading() {
|
|
return this.dashboardStats.memberCountStats === null;
|
|
}
|
|
|
|
get chartType() {
|
|
return 'bar';
|
|
}
|
|
|
|
get chartData() {
|
|
const stats = this.dashboardStats.memberCountStats;
|
|
const labels = stats.map(stat => stat.date);
|
|
const newData = stats.map(stat => stat.newPaid);
|
|
const canceledData = stats.map(stat => -stat.canceledPaid);
|
|
|
|
return {
|
|
labels: labels,
|
|
datasets: [
|
|
{
|
|
data: newData,
|
|
fill: true,
|
|
backgroundColor: '#14b8ff',
|
|
tension: 0.1,
|
|
borderWidth: 0,
|
|
barThickness: 10,
|
|
minBarLength: 3
|
|
},{
|
|
data: canceledData,
|
|
fill: true,
|
|
backgroundColor: '#E16262',
|
|
tension: 0.1,
|
|
borderWidth: 0,
|
|
barThickness: 10,
|
|
minBarLength: 3
|
|
}]
|
|
};
|
|
}
|
|
|
|
get chartOptions() {
|
|
return {
|
|
title: {
|
|
display: false
|
|
},
|
|
legend: {
|
|
display: false
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
gridLines: {
|
|
drawTicks: false,
|
|
display: true,
|
|
drawBorder: false
|
|
},
|
|
ticks: {
|
|
display: false,
|
|
maxTicksLimit: 5,
|
|
fontColor: '#7C8B9A',
|
|
padding: 8,
|
|
precision: 0
|
|
}
|
|
}],
|
|
xAxes: [{
|
|
gridLines: {
|
|
drawTicks: false,
|
|
display: false,
|
|
drawBorder: false
|
|
},
|
|
ticks: {
|
|
display: false,
|
|
maxTicksLimit: 5,
|
|
autoSkip: true,
|
|
maxRotation: 0,
|
|
minRotation: 0
|
|
},
|
|
type: 'time',
|
|
time: {
|
|
displayFormats: {
|
|
'millisecond': 'MMM DD',
|
|
'second': 'MMM DD',
|
|
'minute': 'MMM DD',
|
|
'hour': 'MMM DD',
|
|
'day': 'MMM DD',
|
|
'week': 'MMM DD',
|
|
'month': 'MMM DD',
|
|
'quarter': 'MMM DD',
|
|
'year': 'MMM DD',
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
};
|
|
}
|
|
|
|
get chartHeight() {
|
|
return 100;
|
|
}
|
|
}
|