From e88f7ca7b2c06cac067c54dd18695ab27f303fab Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 3 Nov 2018 16:44:05 +0900
Subject: [PATCH] [Client] Fix some charts
---
.../views/components/activity.calendar.vue | 14 ++-
.../app/desktop/views/components/activity.vue | 12 +-
.../app/mobile/views/components/activity.vue | 111 +++++++++++++-----
3 files changed, 101 insertions(+), 36 deletions(-)
diff --git a/src/client/app/desktop/views/components/activity.calendar.vue b/src/client/app/desktop/views/components/activity.calendar.vue
index 1a88d1a994..4306aa9282 100644
--- a/src/client/app/desktop/views/components/activity.calendar.vue
+++ b/src/client/app/desktop/views/components/activity.calendar.vue
@@ -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);
diff --git a/src/client/app/desktop/views/components/activity.vue b/src/client/app/desktop/views/components/activity.vue
index bd952c39d2..e9ed532a3e 100644
--- a/src/client/app/desktop/views/components/activity.vue
+++ b/src/client/app/desktop/views/components/activity.vue
@@ -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;
});
},
diff --git a/src/client/app/mobile/views/components/activity.vue b/src/client/app/mobile/views/components/activity.vue
index dcd319cb69..627bebbd32 100644
--- a/src/client/app/mobile/views/components/activity.vue
+++ b/src/client/app/mobile/views/components/activity.vue
@@ -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>