From 172a0a85aa14550b64c9b1aded062b110790d39b Mon Sep 17 00:00:00 2001 From: syuilo Date: Mon, 22 Oct 2018 22:00:32 +0900 Subject: [PATCH] Show chart in user column --- package.json | 1 + .../views/pages/deck/deck.user-column.vue | 63 ++++++++++++++++++- src/client/theme/dark.json5 | 2 +- src/client/theme/light.json5 | 2 +- 4 files changed, 64 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 1e588da311..3b172940b0 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "format": "gulp format" }, "dependencies": { + "@antv/g2": "3.3.1", "@fortawesome/fontawesome-svg-core": "1.2.6", "@fortawesome/free-brands-svg-icons": "5.4.1", "@fortawesome/free-regular-svg-icons": "5.4.1", diff --git a/src/client/app/desktop/views/pages/deck/deck.user-column.vue b/src/client/app/desktop/views/pages/deck/deck.user-column.vue index db21f04512..b707bfb090 100644 --- a/src/client/app/desktop/views/pages/deck/deck.user-column.vue +++ b/src/client/app/desktop/views/pages/deck/deck.user-column.vue @@ -39,6 +39,9 @@ :title="`${image.name}\n${(new Date(image.createdAt)).toLocaleString()}`" > +
+
+
@@ -56,6 +59,7 @@ import Menu from '../../../../common/views/components/menu.vue'; import MkUserListsWindow from '../../components/user-lists-window.vue'; import Ok from '../../../../common/views/components/ok.vue'; import { concat } from '../../../../../../prelude/array'; +import * as G2 from '@antv/g2'; const fetchLimit = 10; @@ -127,6 +131,56 @@ export default Vue.extend({ const files = concat(notes.map((n: any): any[] => n.files)); this.images = files.filter(f => image.includes(f.type)).slice(0, 9); }); + + (this as any).api('charts/user/notes', { + userId: this.user.id, + span: 'day', + limit: 30 + }).then(stats => { + const data = []; + + const now = new Date(); + const y = now.getFullYear(); + const m = now.getMonth(); + const d = now.getDate(); + + for (let i = 0; i < 30; i++) { + const x = new Date(y, m, d - i + 1); + data.push({ + x: x, + type: 'normal', + count: stats.diffs.normal[i] + }); + data.push({ + x: x, + type: 'reply', + count: stats.diffs.reply[i] + }); + data.push({ + x: x, + type: 'renote', + count: stats.diffs.renote[i] + }); + } + + const chart = new G2.Chart({ + container: this.$refs.chart as HTMLDivElement, + forceFit: true, + height: 100, + padding: 16, + renderer: 'svg' + }); + + chart.intervalStack().position('x*count').color('type'); + chart.legend(false); + chart.axis('x', false); + chart.axis('count', false); + chart.tooltip(true, { + showTitle: false, + }); + chart.source(data); + chart.render(); + }); }); }, @@ -205,7 +259,7 @@ export default Vue.extend({