その日ごとの「アカウントが作成された回数」もグラフにするようにした

This commit is contained in:
syuilo 2017-08-12 18:02:28 +09:00
parent 7c894ee43a
commit 0e786fbb66
2 changed files with 30 additions and 24 deletions

View file

@ -15,15 +15,8 @@ module.exports = params => new Promise(async (res, rej) => {
const [limit = 365, limitErr] = $(params.limit).optional.number().range(1, 365).$; const [limit = 365, limitErr] = $(params.limit).optional.number().range(1, 365).$;
if (limitErr) return rej('invalid limit param'); if (limitErr) return rej('invalid limit param');
const startTime = new Date(new Date().setMonth(new Date().getMonth() - 1));
const users = await User const users = await User
.find({ .find({}, {
$or: [
{ deleted_at: { $exists: false } },
{ deleted_at: { $gt: startTime } }
]
}, {
_id: false, _id: false,
created_at: true, created_at: true,
deleted_at: true deleted_at: true
@ -34,24 +27,30 @@ module.exports = params => new Promise(async (res, rej) => {
const graph = []; const graph = [];
for (let i = 0; i < limit; i++) { for (let i = 0; i < limit; i++) {
let day = new Date(new Date().setDate(new Date().getDate() - i)); let dayStart = new Date(new Date().setDate(new Date().getDate() - i));
day = new Date(day.setMilliseconds(999)); dayStart = new Date(dayStart.setMilliseconds(0));
day = new Date(day.setSeconds(59)); dayStart = new Date(dayStart.setSeconds(0));
day = new Date(day.setMinutes(59)); dayStart = new Date(dayStart.setMinutes(0));
day = new Date(day.setHours(23)); dayStart = new Date(dayStart.setHours(0));
let dayEnd = new Date(new Date().setDate(new Date().getDate() - i));
dayEnd = new Date(dayEnd.setMilliseconds(999));
dayEnd = new Date(dayEnd.setSeconds(59));
dayEnd = new Date(dayEnd.setMinutes(59));
dayEnd = new Date(dayEnd.setHours(23));
// day = day.getTime(); // day = day.getTime();
const count = users.filter(f => const total = users.filter(u =>
f.created_at < day && (f.deleted_at == null || f.deleted_at > day) u.created_at < dayEnd && (u.deleted_at == null || u.deleted_at > dayEnd)
).length;
const created = users.filter(u =>
u.created_at < dayEnd && u.created_at > dayStart
).length; ).length;
graph.push({ graph.push({
date: { total: total,
year: day.getFullYear(), created: created
month: day.getMonth() + 1, // In JavaScript, month is zero-based.
day: day.getDate()
},
count: count
}); });
} }

View file

@ -168,7 +168,12 @@
<mk-users-chart> <mk-users-chart>
<svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none"> <svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none">
<polyline <polyline
riot-points={ points } riot-points={ createdPoints }
fill="none"
stroke-width="1"
stroke="#1cde84"/>
<polyline
riot-points={ totalPoints }
fill="none" fill="none"
stroke-width="1" stroke-width="1"
stroke="#555"/> stroke="#555"/>
@ -187,7 +192,8 @@
this.viewBoxY = 80; this.viewBoxY = 80;
this.data = this.opts.data.reverse(); this.data = this.opts.data.reverse();
const peak = Math.max.apply(null, this.data.map(d => d.count)); const totalPeak = Math.max.apply(null, this.data.map(d => d.total));
const createdPeak = Math.max.apply(null, this.data.map(d => d.created));
this.on('mount', () => { this.on('mount', () => {
this.render(); this.render();
@ -195,7 +201,8 @@
this.render = () => { this.render = () => {
this.update({ this.update({
points: this.data.map((d, i) => `${i},${(1 - (d.count / peak)) * this.viewBoxY}`).join(' ') totalPoints: this.data.map((d, i) => `${i},${(1 - (d.total / totalPeak)) * this.viewBoxY}`).join(' '),
createdPoints: this.data.map((d, i) => `${i},${(1 - (d.created / createdPeak)) * this.viewBoxY}`).join(' ')
}); });
}; };
</script> </script>