Merge pull request #1702 from syuilo/hashtags-stats

Hashtags stats

locales/ja.yml

@@ -254,6 +254,9 @@ common/views/widgets/posts-monitor.vue:
   title: "投稿チャート"
   toggle: "表示を切り替え"
 
+common/views/widgets/hashtags.vue:
+  title: "ハッシュタグ"
+
 common/views/widgets/server.vue:
   title: "サーバー情報"
   toggle: "表示を切り替え"

src/client/app/common/views/widgets/hashtags.chart.vue

@@ -0,0 +1,78 @@
+<template>
+<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
+	<defs>
+		<linearGradient :id="gradientId" x1="0" x2="0" y1="1" y2="0">
+			<stop offset="0%" stop-color="hsl(200, 80%, 70%)"></stop>
+			<stop offset="100%" stop-color="hsl(90, 80%, 70%)"></stop>
+		</linearGradient>
+		<mask :id="maskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY">
+			<polygon
+				:points="polygonPoints"
+				fill="#fff"
+				fill-opacity="0.5"/>
+			<polyline
+				:points="polylinePoints"
+				fill="none"
+				stroke="#fff"
+				stroke-width="0.7"/>
+			<circle
+				:cx="headX"
+				:cy="headY"
+				r="1.2"
+				fill="#fff"/>
+		</mask>
+	</defs>
+	<rect
+		x="-2" y="-2"
+		:width="viewBoxX + 4" :height="viewBoxY + 4"
+		:style="`stroke: none; fill: url(#${ gradientId }); mask: url(#${ maskId })`"/>
+</svg>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as uuid from 'uuid';
+
+export default Vue.extend({
+	props: {
+		src: {
+			type: Array,
+			required: true
+		}
+	},
+	data() {
+		return {
+			viewBoxX: 50,
+			viewBoxY: 30,
+			gradientId: uuid(),
+			maskId: uuid(),
+			polylinePoints: '',
+			polygonPoints: '',
+			headX: null,
+			headY: null
+		};
+	},
+	watch: {
+		src() {
+			this.draw();
+		}
+	},
+	created() {
+		this.draw();
+	},
+	methods: {
+		draw() {
+			const stats = this.src.slice().reverse();
+			const peak = Math.max.apply(null, stats) || 1;
+
+			const polylinePoints = stats.map((x, i) => [this.viewBoxX - ((stats.length - 1) - i), (1 - (x / peak)) * this.viewBoxY]);
+			this.polylinePoints = polylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' ');
+
+			this.polygonPoints = `${this.viewBoxX - (stats.length - 1)},${ this.viewBoxY } ${ this.polylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`;
+
+			this.headX = polylinePoints[polylinePoints.length - 1][0];
+			this.headY = polylinePoints[polylinePoints.length - 1][1];
+		}
+	}
+});
+</script>

src/client/app/common/views/widgets/hashtags.vue

@@ -0,0 +1,100 @@
+<template>
+<div class="mkw-hashtags">
+	<mk-widget-container :show-header="!props.compact">
+		<template slot="header">%fa:hashtag%%i18n:@title%</template>
+
+		<div class="mkw-hashtags--body" :data-mobile="platform == 'mobile'">
+			<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+			<div v-else>
+				<div v-for="stat in stats" :key="stat.tag">
+					<div class="tag">
+						<router-link :to="`/tags/${ stat.tag }`">#{{ stat.tag }}</router-link>
+					</div>
+					<x-chart class="chart" :src="stat.chart"/>
+				</div>
+			</div>
+		</div>
+	</mk-widget-container>
+</div>
+</template>
+
+<script lang="ts">
+import define from '../../../common/define-widget';
+import XChart from './hashtags.chart.vue';
+
+export default define({
+	name: 'hashtags',
+	props: () => ({
+		compact: false
+	})
+}).extend({
+	components: {
+		XChart
+	},
+	data() {
+		return {
+			stats: [],
+			fetching: true,
+			clock: null
+		};
+	},
+	mounted() {
+		this.fetch();
+		this.clock = setInterval(this.fetch, 1000 * 60 * 10);
+	},
+	beforeDestroy() {
+		clearInterval(this.clock);
+	},
+	methods: {
+		func() {
+			this.props.compact = !this.props.compact;
+			this.save();
+		},
+		fetch() {
+			(this as any).api('hashtags/trend').then(stats => {
+				this.stats = stats;
+				this.fetching = false;
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+root(isDark)
+	.mkw-hashtags--body
+		> .fetching
+			margin 0
+			padding 16px
+			text-align center
+			color #aaa
+
+			> [data-fa]
+				margin-right 4px
+
+		> div
+			> div
+				display flex
+				align-items center
+				padding 16px
+
+				&:not(:last-child)
+					border-bottom solid 1px #393f4f
+
+				> .tag
+					flex 1
+
+					> a
+						color #9baec8
+
+				> .chart
+					width 50px
+					height 30px
+
+.mkw-hashtags[data-darkmode]
+	root(true)
+
+.mkw-hashtags:not([data-darkmode])
+	root(false)
+
+</style>

src/client/app/common/views/widgets/index.ts

@@ -13,6 +13,7 @@ import wSlideshow from './slideshow.vue';
 import wTips from './tips.vue';
 import wDonation from './donation.vue';
 import wNav from './nav.vue';
+import wHashtags from './hashtags.vue';
 
 Vue.component('mkw-analog-clock', wAnalogClock);
 Vue.component('mkw-nav', wNav);
@@ -27,3 +28,4 @@ Vue.component('mkw-posts-monitor', wPostsMonitor);
 Vue.component('mkw-memo', wMemo);
 Vue.component('mkw-rss', wRss);
 Vue.component('mkw-version', wVersion);
+Vue.component('mkw-hashtags', wHashtags);

src/client/app/desktop/views/components/home.vue

@@ -23,6 +23,7 @@
 					<option value="post-form">%i18n:common.widgets.post-form%</option>
 					<option value="messaging">%i18n:common.widgets.messaging%</option>
 					<option value="memo">%i18n:common.widgets.memo%</option>
+					<option value="hashtags">%i18n:common.widgets.hashtags%</option>
 					<option value="posts-monitor">%i18n:common.widgets.posts-monitor%</option>
 					<option value="server">%i18n:common.widgets.server%</option>
 					<option value="donation">%i18n:common.widgets.donation%</option>

src/client/app/desktop/views/pages/deck/deck.widgets-column.vue

@@ -23,6 +23,7 @@
 					<option value="post-form">%i18n:common.widgets.post-form%</option>
 					<option value="messaging">%i18n:common.widgets.messaging%</option>
 					<option value="memo">%i18n:common.widgets.memo%</option>
+					<option value="hashtags">%i18n:common.widgets.hashtags%</option>
 					<option value="posts-monitor">%i18n:common.widgets.posts-monitor%</option>
 					<option value="server">%i18n:common.widgets.server%</option>
 					<option value="donation">%i18n:common.widgets.donation%</option>

src/client/app/mobile/views/pages/widgets.vue

@@ -15,6 +15,7 @@
 					<option value="rss">%i18n:common.widgets.rss%</option>
 					<option value="photo-stream">%i18n:common.widgets.photo-stream%</option>
 					<option value="slideshow">%i18n:common.widgets.slideshow%</option>
+					<option value="hashtags">%i18n:common.widgets.hashtags%</option>
 					<option value="posts-monitor">%i18n:common.widgets.posts-monitor%</option>
 					<option value="version">%i18n:common.widgets.version%</option>
 					<option value="server">%i18n:common.widgets.server%</option>

src/daemons/hashtags-stats-child.ts

@@ -0,0 +1,60 @@
+import Note from '../models/note';
+
+// 10分
+const interval = 1000 * 60 * 10;
+
+async function tick() {
+	const res = await Note.aggregate([{
+		$match: {
+			createdAt: {
+				$gt: new Date(Date.now() - interval)
+			},
+			tags: {
+				$exists: true,
+				$ne: []
+			}
+		}
+	}, {
+		$unwind: '$tags'
+	}, {
+		$group: {
+			_id: '$tags',
+			count: {
+				$sum: 1
+			}
+		}
+	}, {
+		$group: {
+			_id: null,
+			tags: {
+				$push: {
+					tag: '$_id',
+					count: '$count'
+				}
+			}
+		}
+	}, {
+		$project: {
+			_id: false,
+			tags: true
+		}
+	}]) as {
+		tags: Array<{
+			tag: string;
+			count: number;
+		}>
+	};
+
+	const stats = res.tags
+		.sort((a, b) => a.count - b.count)
+		.map(tag => [tag.tag, tag.count])
+		.slice(0, 10);
+
+	console.log(stats);
+
+	process.send(stats);
+}
+
+tick();
+
+setInterval(tick, interval);

src/daemons/hashtags-stats.ts

@@ -0,0 +1,20 @@
+import * as childProcess from 'child_process';
+import Xev from 'xev';
+
+const ev = new Xev();
+
+export default function() {
+	const log = [];
+
+	const p = childProcess.fork(__dirname + '/hashtags-stats-child.js');
+
+	p.on('message', stats => {
+		ev.emit('hashtagsStats', stats);
+		log.push(stats);
+		if (log.length > 30) log.shift();
+	});
+
+	ev.on('requestHashTagsStatsLog', id => {
+		ev.emit('hashtagsStatsLog:' + id, log);
+	});
+}

src/daemons/notes-stats-child.ts

@@ -1,8 +1,8 @@
-import Note from './models/note';
+import Note from '../models/note';
 
 const interval = 5000;
 
-setInterval(async () => {
+async function tick() {
 	const [all, local] = await Promise.all([Note.count({
 		createdAt: {
 			$gte: new Date(Date.now() - interval)
@@ -19,4 +19,8 @@ setInterval(async () => {
 	};
 
 	process.send(stats);
-}, interval);
+}
+
+tick();
+
+setInterval(tick, interval);

src/daemons/server-stats.ts

@@ -5,6 +5,8 @@ import Xev from 'xev';
 
 const ev = new Xev();
 
+const interval = 1000;
+
 /**
  * Report server stats regularly
  */
@@ -15,7 +17,7 @@ export default function() {
 		ev.emit('serverStatsLog:' + id, log);
 	});
 
-	setInterval(() => {
+	async function tick() {
 		osUtils.cpuUsage(cpuUsage => {
 			const disk = diskusage.checkSync(os.platform() == 'win32' ? 'c:' : '/');
 			const stats = {
@@ -32,5 +34,9 @@ export default function() {
 			log.push(stats);
 			if (log.length > 50) log.shift();
 		});
-	}, 1000);
+	}
+
+	tick();
+
+	setInterval(tick, interval);
 }

src/index.ts

@@ -17,8 +17,8 @@ import ProgressBar from './utils/cli/progressbar';
 import EnvironmentInfo from './utils/environmentInfo';
 import MachineInfo from './utils/machineInfo';
 import DependencyInfo from './utils/dependencyInfo';
-import serverStats from './server-stats';
-import notesStats from './notes-stats';
+import serverStats from './daemons/server-stats';
+import notesStats from './daemons/notes-stats';
 
 import loadConfig from './config/load';
 import { Config } from './config/types';

src/server/api/endpoints.ts

@@ -628,6 +628,11 @@ const endpoints: Endpoint[] = [
 		withCredential: true
 	},
 
+	{
+		name: 'hashtags/trend',
+		withCredential: true
+	},
+
 	{
 		name: 'messaging/history',
 		withCredential: true,

src/server/api/endpoints/hashtags/trend.ts

@@ -0,0 +1,80 @@
+import Note from '../../../../models/note';
+
+/**
+ * Get trends of hashtags
+ */
+module.exports = (params, user) => new Promise(async (res, rej) => {
+	const data = await Note.aggregate([{
+		$match: {
+			createdAt: {
+				$gt: new Date(Date.now() - 1000 * 60 * 60)
+			},
+			tags: {
+				$exists: true,
+				$ne: []
+			}
+		}
+	}, {
+		$unwind: '$tags'
+	}, {
+		$group: {
+			_id: '$tags',
+			count: {
+				$sum: 1
+			}
+		}
+	}, {
+		$group: {
+			_id: null,
+			tags: {
+				$push: {
+					tag: '$_id',
+					count: '$count'
+				}
+			}
+		}
+	}, {
+		$project: {
+			_id: false,
+			tags: true
+		}
+	}]) as Array<{
+		tags: Array<{
+			tag: string;
+			count: number;
+		}>
+	}>;
+
+	if (data.length == 0) {
+		return res([]);
+	}
+
+	const hots = data[0].tags
+		.sort((a, b) => b.count - a.count)
+		.map(tag => tag.tag)
+		.slice(0, 10);
+
+	const countPromises: Array<Promise<number[]>> = [];
+
+	for (let i = 0; i < 10; i++) {
+		// 10分
+		const interval = 1000 * 60 * 10;
+
+		countPromises.push(Promise.all(hots.map(tag => Note.count({
+			tags: tag,
+			createdAt: {
+				$lt: new Date(Date.now() - (interval * i)),
+				$gt: new Date(Date.now() - (interval * (i + 1)))
+			}
+		}))));
+	}
+
+	const countsLog = await Promise.all(countPromises);
+
+	const stats = hots.map((tag, i) => ({
+		tag,
+		chart: countsLog.map(counts => counts[i])
+	}));
+
+	res(stats);
+});