Show chart in user column

This commit is contained in:
syuilo 2018-10-22 22:00:32 +09:00
parent d37c06884d
commit 172a0a85aa
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
4 changed files with 64 additions and 4 deletions

View file

@ -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",

View file

@ -39,6 +39,9 @@
:title="`${image.name}\n${(new Date(image.createdAt)).toLocaleString()}`"
></router-link>
</div>
<div class="activity">
<div ref="chart"></div>
</div>
<div class="tl">
<x-notes ref="timeline" :more="existMore ? fetchMoreNotes : null"/>
</div>
@ -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({
<style lang="stylus" scoped>
.zubukjlciycdsyynicqrnlsmdwmymzqu
background var(--deckUserColumnBg)
background var(--deckColumnBg)
> .is-remote
padding 8px 16px
@ -283,7 +337,7 @@ export default Vue.extend({
> .pinned
padding-bottom 16px
background var(--deckUserColumnBg)
background var(--deckColumnBg)
> p
margin 0
@ -309,6 +363,11 @@ export default Vue.extend({
background-clip content-box
border-radius 4px
> .activity
margin-bottom 16px
background var(--face)
line-height 0
> .tl
background var(--face)

View file

@ -174,7 +174,7 @@
desktopSettingsNavItemHover: ':lighten<10<$text',
deckAcrylicColumnBg: 'rgba(0, 0, 0, 0.25)',
deckUserColumnBg: ':darken<3<@face',
deckColumnBg: ':darken<3<@face',
mobileHeaderBg: ':lighten<5<$secondary',
mobileHeaderFg: '$text',

View file

@ -174,7 +174,7 @@
desktopSettingsNavItemHover: ':darken<10<$text',
deckAcrylicColumnBg: 'rgba(0, 0, 0, 0.1)',
deckUserColumnBg: ':darken<4<@face',
deckColumnBg: ':darken<4<@face',
mobileHeaderBg: ':lighten<5<$secondary',
mobileHeaderFg: '$text',