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

This commit is contained in:
syuilo 2018-10-23 09:59:43 +09:00
parent cee1a27348
commit 11c5d257f2
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
3 changed files with 40 additions and 20 deletions

View file

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

View file

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

View file

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