ハッシュタグチャートでローカルとリモートを分離するように

src/chart/hashtag.ts

 import autobind from 'autobind-decorator';
-import * as mongo from 'mongodb';
-import Chart, { Partial } from './';
+import Chart, { Obj } from './';
+import { IUser, isLocalUser } from '../models/user';
+import db from '../db/mongodb';
 
 /**
  * ハッシュタグに関するチャート
  */
 type HashtagLog = {
-	/**
-	 * 投稿された数
-	 */
-	count: number;
+	local: {
+		/**
+		 * 投稿された数
+		 */
+		count: number;
+	};
+
+	remote: HashtagLog['local'];
 };
 
 class HashtagChart extends Chart<HashtagLog> {
 	constructor() {
 		super('hashtag', true);
+
+		// 後方互換性のため
+		db.get('chart.hashtag').findOne().then(doc => {
+			if (doc != null && doc.data.local == null) {
+				db.get('chart.hashtag').drop();
+			}
+		});
 	}
 
 	@autobind
 	protected async getTemplate(init: boolean, latest?: HashtagLog): Promise<HashtagLog> {
 		return {
-			count: 0
+			local: {
+				count: 0
+			},
+			remote: {
+				count: 0
+			}
 		};
 	}
 
 	@autobind
-	public async update(hashtag: string, userId: mongo.ObjectId) {
-		const inc: Partial<HashtagLog> = {
+	public async update(hashtag: string, user: IUser) {
+		const update: Obj = {
 			count: 1
 		};
 
-		await this.incIfUnique(inc, 'users', userId.toHexString(), hashtag);
+		await this.incIfUnique({
+			[isLocalUser(user) ? 'local' : 'remote']: update
+		}, 'users', user._id.toHexString(), hashtag);
 	}
 }
 

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

@@ -16,7 +16,6 @@ import Vue from 'vue';
 import XColumn from './deck.column.vue';
 import XHashtagTl from './deck.hashtag-tl.vue';
 import * as ApexCharts from 'apexcharts';
-import * as tinycolor from 'tinycolor2';
 
 export default Vue.extend({
 	components: {
@@ -45,7 +44,8 @@ export default Vue.extend({
 			span: 'hour',
 			limit: 24
 		}).then(stats => {
-			const data = [];
+			const local = [];
+			const remote = [];
 
 			const now = new Date();
 			const y = now.getFullYear();
@@ -55,11 +55,10 @@ export default Vue.extend({
 
 			for (let i = 0; i < 24; i++) {
 				const x = new Date(y, m, d, h - i);
-				data.push([x, stats.count[i]]);
+				local.push([x, stats.local.count[i]]);
+				remote.push([x, stats.remote.count[i]]);
 			}
 
-			const color = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--primary'));
-
 			const chart = new ApexCharts(this.$refs.chart, {
 				chart: {
 					type: 'area',
@@ -82,13 +81,15 @@ export default Vue.extend({
 					width: 2
 				},
 				series: [{
-					name: 'count',
-					data: data
+					name: 'Local',
+					data: local
+				}, {
+					name: 'Remote',
+					data: remote
 				}],
 				xaxis: {
 					type: 'datetime',
-				},
-				colors: [`#${color.clone().toHex()}`]
+				}
 			});
 
 			chart.render();

src/services/register-hashtag.ts

@@ -27,5 +27,5 @@ export default async function(user: IUser, tag: string) {
 		});
 	}
 
-	hashtagChart.update(tag, user._id);
+	hashtagChart.update(tag, user);
 }