Show chart in user column
This commit is contained in:
parent
d37c06884d
commit
172a0a85aa
|
@ -20,6 +20,7 @@
|
||||||
"format": "gulp format"
|
"format": "gulp format"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@antv/g2": "3.3.1",
|
||||||
"@fortawesome/fontawesome-svg-core": "1.2.6",
|
"@fortawesome/fontawesome-svg-core": "1.2.6",
|
||||||
"@fortawesome/free-brands-svg-icons": "5.4.1",
|
"@fortawesome/free-brands-svg-icons": "5.4.1",
|
||||||
"@fortawesome/free-regular-svg-icons": "5.4.1",
|
"@fortawesome/free-regular-svg-icons": "5.4.1",
|
||||||
|
|
|
@ -39,6 +39,9 @@
|
||||||
:title="`${image.name}\n${(new Date(image.createdAt)).toLocaleString()}`"
|
:title="`${image.name}\n${(new Date(image.createdAt)).toLocaleString()}`"
|
||||||
></router-link>
|
></router-link>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="activity">
|
||||||
|
<div ref="chart"></div>
|
||||||
|
</div>
|
||||||
<div class="tl">
|
<div class="tl">
|
||||||
<x-notes ref="timeline" :more="existMore ? fetchMoreNotes : null"/>
|
<x-notes ref="timeline" :more="existMore ? fetchMoreNotes : null"/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -56,6 +59,7 @@ import Menu from '../../../../common/views/components/menu.vue';
|
||||||
import MkUserListsWindow from '../../components/user-lists-window.vue';
|
import MkUserListsWindow from '../../components/user-lists-window.vue';
|
||||||
import Ok from '../../../../common/views/components/ok.vue';
|
import Ok from '../../../../common/views/components/ok.vue';
|
||||||
import { concat } from '../../../../../../prelude/array';
|
import { concat } from '../../../../../../prelude/array';
|
||||||
|
import * as G2 from '@antv/g2';
|
||||||
|
|
||||||
const fetchLimit = 10;
|
const fetchLimit = 10;
|
||||||
|
|
||||||
|
@ -127,6 +131,56 @@ export default Vue.extend({
|
||||||
const files = concat(notes.map((n: any): any[] => n.files));
|
const files = concat(notes.map((n: any): any[] => n.files));
|
||||||
this.images = files.filter(f => image.includes(f.type)).slice(0, 9);
|
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>
|
<style lang="stylus" scoped>
|
||||||
.zubukjlciycdsyynicqrnlsmdwmymzqu
|
.zubukjlciycdsyynicqrnlsmdwmymzqu
|
||||||
background var(--deckUserColumnBg)
|
background var(--deckColumnBg)
|
||||||
|
|
||||||
> .is-remote
|
> .is-remote
|
||||||
padding 8px 16px
|
padding 8px 16px
|
||||||
|
@ -283,7 +337,7 @@ export default Vue.extend({
|
||||||
|
|
||||||
> .pinned
|
> .pinned
|
||||||
padding-bottom 16px
|
padding-bottom 16px
|
||||||
background var(--deckUserColumnBg)
|
background var(--deckColumnBg)
|
||||||
|
|
||||||
> p
|
> p
|
||||||
margin 0
|
margin 0
|
||||||
|
@ -309,6 +363,11 @@ export default Vue.extend({
|
||||||
background-clip content-box
|
background-clip content-box
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
|
|
||||||
|
> .activity
|
||||||
|
margin-bottom 16px
|
||||||
|
background var(--face)
|
||||||
|
line-height 0
|
||||||
|
|
||||||
> .tl
|
> .tl
|
||||||
background var(--face)
|
background var(--face)
|
||||||
|
|
||||||
|
|
|
@ -174,7 +174,7 @@
|
||||||
desktopSettingsNavItemHover: ':lighten<10<$text',
|
desktopSettingsNavItemHover: ':lighten<10<$text',
|
||||||
|
|
||||||
deckAcrylicColumnBg: 'rgba(0, 0, 0, 0.25)',
|
deckAcrylicColumnBg: 'rgba(0, 0, 0, 0.25)',
|
||||||
deckUserColumnBg: ':darken<3<@face',
|
deckColumnBg: ':darken<3<@face',
|
||||||
|
|
||||||
mobileHeaderBg: ':lighten<5<$secondary',
|
mobileHeaderBg: ':lighten<5<$secondary',
|
||||||
mobileHeaderFg: '$text',
|
mobileHeaderFg: '$text',
|
||||||
|
|
|
@ -174,7 +174,7 @@
|
||||||
desktopSettingsNavItemHover: ':darken<10<$text',
|
desktopSettingsNavItemHover: ':darken<10<$text',
|
||||||
|
|
||||||
deckAcrylicColumnBg: 'rgba(0, 0, 0, 0.1)',
|
deckAcrylicColumnBg: 'rgba(0, 0, 0, 0.1)',
|
||||||
deckUserColumnBg: ':darken<4<@face',
|
deckColumnBg: ':darken<4<@face',
|
||||||
|
|
||||||
mobileHeaderBg: ':lighten<5<$secondary',
|
mobileHeaderBg: ':lighten<5<$secondary',
|
||||||
mobileHeaderFg: '$text',
|
mobileHeaderFg: '$text',
|
||||||
|
|
Loading…
Reference in New Issue