その日ごとの「アカウントが作成された回数」もグラフにするようにした
This commit is contained in:
		
							parent
							
								
									7c894ee43a
								
							
						
					
					
						commit
						0e786fbb66
					
				
					 2 changed files with 30 additions and 24 deletions
				
			
		| 
						 | 
					@ -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
 | 
					 | 
				
			||||||
		});
 | 
							});
 | 
				
			||||||
	}
 | 
						}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue