[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);
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;
this.data.slice().reverse().forEach(d => {
this.data.slice().reverse().forEach((d, i) => {
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.v = peak == 0 ? 0 : d.total / (peak / 2);

View File

@ -43,11 +43,17 @@ export default Vue.extend({
};
},
mounted() {
(this as any).api('aggregation/users/activity', {
(this as any).api('charts/user/notes', {
userId: this.user.id,
limit: 20 * 7
span: 'day',
limit: 7 * 20
}).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;
});
},

View File

@ -1,23 +1,13 @@
<template>
<div class="mk-activity">
<svg v-if="data" ref="canvas" viewBox="0 0 30 1" preserveAspectRatio="none">
<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 ref="chart"></div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import * as ApexCharts from 'apexcharts';
export default Vue.extend({
props: ['user'],
data() {
@ -28,19 +18,84 @@ export default Vue.extend({
};
},
mounted() {
(this as any).api('aggregation/users/activity', {
(this as any).api('charts/user/notes', {
userId: this.user.id,
limit: 30
}).then(data => {
data.forEach(d => d.total = d.notes + d.replies + d.renotes);
this.peak = Math.max.apply(null, data.map(d => d.total));
data.forEach(d => {
d.notesH = d.notes / this.peak;
d.repliesH = d.replies / this.peak;
d.renotesH = d.renotes / this.peak;
span: 'day',
limit: 21
}).then(stats => {
const normal = [];
const reply = [];
const renote = [];
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
margin 0 auto
> svg
display block
width 100%
height 80px
> rect
transform-origin center
</style>