Ghost/ghost/admin/app/components/dashboard/v5/chart-paid-members.js
Simon Backx 7fdf3c7433 Added mechansim to save prototype state for dashboard 5.0
refs https://github.com/TryGhost/Team/issues/1444

- Moved control panel to separate component
- Moved storage of amount of graph days to load to dashboard stats service
- Moved storage of engagement filtered status to dashboard stats service
- Dropdown state selector
- Save state in localstorage
- SiteStatus object and loadStatus methods in dashboard stats service and mock service
2022-03-24 12:09:09 +01:00

66 lines
1.7 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;
constructor() {
super(...arguments);
this.loadCharts();
}
/**
* 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: false,
backgroundColor: '#14b8ff',
tension: 0.1
},{
data: canceledData,
fill: false,
backgroundColor: '#E16262',
tension: 0.1
}]
};
}
get chartOptions() {
return {
legend: {
display: false
}
};
}
get chartHeight() {
return 150;
}
}