[Client] Fix some charts

This commit is contained in:
syuilo 2018-11-03 16:44:05 +09:00
parent c26ed1421b
commit e88f7ca7b2
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
3 changed files with 101 additions and 36 deletions

View file

@ -32,9 +32,21 @@ export default Vue.extend({
this.data.forEach(d => d.total = d.notes + d.replies + d.renotes); this.data.forEach(d => d.total = d.notes + d.replies + d.renotes);
const peak = Math.max.apply(null, this.data.map(d => d.total)); const peak = Math.max.apply(null, this.data.map(d => d.total));
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth();
const day = now.getDate();
let x = 0; let x = 0;
this.data.slice().reverse().forEach(d => { this.data.slice().reverse().forEach((d, i) => {
d.x = x; d.x = x;
const date = new Date(year, month, day - i);
d.date = {
year: date.getFullYear(),
month: date.getMonth(),
day: date.getDate()
};
d.date.weekday = (new Date(d.date.year, d.date.month - 1, d.date.day)).getDay(); d.date.weekday = (new Date(d.date.year, d.date.month - 1, d.date.day)).getDay();
d.v = peak == 0 ? 0 : d.total / (peak / 2); d.v = peak == 0 ? 0 : d.total / (peak / 2);

View file

@ -43,11 +43,17 @@ export default Vue.extend({
}; };
}, },
mounted() { mounted() {
(this as any).api('aggregation/users/activity', { (this as any).api('charts/user/notes', {
userId: this.user.id, userId: this.user.id,
limit: 20 * 7 span: 'day',
limit: 7 * 20
}).then(activity => { }).then(activity => {
this.activity = activity; this.activity = activity.diffs.normal.map((_, i) => ({
total: activity.diffs.normal[i] + activity.diffs.reply[i] + activity.diffs.renote[i],
notes: activity.diffs.normal[i],
replies: activity.diffs.reply[i],
renotes: activity.diffs.renote[i]
}));
this.fetching = false; this.fetching = false;
}); });
}, },

View file

@ -1,23 +1,13 @@
<template> <template>
<div class="mk-activity"> <div class="mk-activity">
<svg v-if="data" ref="canvas" viewBox="0 0 30 1" preserveAspectRatio="none"> <div ref="chart"></div>
<g v-for="(d, i) in data">
<rect width="0.8" :height="d.notesH"
:x="i + 0.1" :y="1 - d.notesH - d.repliesH - d.renotesH"
fill="#41ddde"/>
<rect width="0.8" :height="d.repliesH"
:x="i + 0.1" :y="1 - d.repliesH - d.renotesH"
fill="#f7796c"/>
<rect width="0.8" :height="d.renotesH"
:x="i + 0.1" :y="1 - d.renotesH"
fill="#a1de41"/>
</g>
</svg>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import * as ApexCharts from 'apexcharts';
export default Vue.extend({ export default Vue.extend({
props: ['user'], props: ['user'],
data() { data() {
@ -28,19 +18,84 @@ export default Vue.extend({
}; };
}, },
mounted() { mounted() {
(this as any).api('aggregation/users/activity', { (this as any).api('charts/user/notes', {
userId: this.user.id, userId: this.user.id,
limit: 30 span: 'day',
}).then(data => { limit: 21
data.forEach(d => d.total = d.notes + d.replies + d.renotes); }).then(stats => {
this.peak = Math.max.apply(null, data.map(d => d.total)); const normal = [];
data.forEach(d => { const reply = [];
d.notesH = d.notes / this.peak; const renote = [];
d.repliesH = d.replies / this.peak;
d.renotesH = d.renotes / this.peak; const now = new Date();
const y = now.getFullYear();
const m = now.getMonth();
const d = now.getDate();
for (let i = 0; i < 21; i++) {
const x = new Date(y, m, d - i);
normal.push([
x,
stats.diffs.normal[i]
]);
reply.push([
x,
stats.diffs.reply[i]
]);
renote.push([
x,
stats.diffs.renote[i]
]);
}
const chart = new ApexCharts(this.$refs.chart, {
chart: {
type: 'bar',
stacked: true,
height: 100,
sparkline: {
enabled: true
},
},
plotOptions: {
bar: {
columnWidth: '90%',
endingShape: 'rounded'
}
},
grid: {
clipMarkers: false,
padding: {
top: 0,
right: 8,
bottom: 0,
left: 8
}
},
tooltip: {
shared: true,
intersect: false
},
series: [{
name: 'Normal',
data: normal
}, {
name: 'Reply',
data: reply
}, {
name: 'Renote',
data: renote
}],
xaxis: {
type: 'datetime',
crosshairs: {
width: 1,
opacity: 1
}
}
}); });
data.reverse();
this.data = data; chart.render();
}); });
} }
}); });
@ -51,12 +106,4 @@ export default Vue.extend({
max-width 600px max-width 600px
margin 0 auto margin 0 auto
> svg
display block
width 100%
height 80px
> rect
transform-origin center
</style> </style>