feat(client): Implement federation widget chart

3 files changed, 14 insertions, 101 deletions

diff --git a/src/client/widgets/federation.vue b/src/client/widgets/federation.vue
index 0f75da5895..02381116e3 100644
--- a/src/client/widgets/federation.vue
+++ b/src/client/widgets/federation.vue
@@ -5,12 +5,12 @@
 	<div class="wbrkwalb">
 		<mk-loading v-if="fetching"/>
 		<transition-group tag="div" name="chart" class="instances" v-else>
-			<div v-for="instance in instances" :key="instance.id">
+			<div v-for="(instance, i) in instances" :key="instance.id">
 				<div class="instance">
 					<a class="a" :href="'https://' + instance.host" target="_blank" :title="instance.host">#{{ instance.host }}</a>
 					<p>{{ instance.softwareName }} {{ instance.softwareVersion }}</p>
 				</div>
-				<!-- TODO: <x-chart class="chart" :src="stat.chart"/> -->
+				<mk-mini-chart class="chart" :src="charts[i].requests.received"/>
 			</div>
 		</transition-group>
 	</div>
@@ -21,7 +21,7 @@
 import { faGlobe } from '@fortawesome/free-solid-svg-icons';
 import MkContainer from '../components/ui/container.vue';
 import define from './define';
-import XChart from './trends.chart.vue';
+import MkMiniChart from '../components/mini-chart.vue';
 
 export default define({
 	name: 'federation',
@@ -33,11 +33,12 @@ export default define({
 	})
 }).extend({
 	components: {
-		MkContainer, XChart
+		MkContainer, MkMiniChart
 	},
 	data() {
 		return {
 			instances: [],
+			charts: [],
 			fetching: true,
 			faGlobe
 		};
@@ -50,14 +51,15 @@ export default define({
 		clearInterval(this.clock);
 	},
 	methods: {
-		fetch() {
-			this.$root.api('federation/instances', {
+		async fetch() {
+			const instances = await this.$root.api('federation/instances', {
 				sort: '+lastCommunicatedAt',
 				limit: 5
-			}).then(instances => {
-				this.instances = instances;
-				this.fetching = false;
 			});
+			const charts = await Promise.all(instances.map(i => this.$root.api('charts/instance', { host: i.host, limit: 16, span: 'hour' })));
+			this.instances = instances;
+			this.charts = charts;
+			this.fetching = false;
 		}
 	}
 });
diff --git a/src/client/widgets/trends.chart.vue b/src/client/widgets/trends.chart.vue
deleted file mode 100644
index 5c4f74b6b4..0000000000
--- a/src/client/widgets/trends.chart.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" style="overflow:visible">
-	<defs>
-		<linearGradient :id="gradientId" x1="0" x2="0" y1="1" y2="0">
-			<stop offset="0%" stop-color="hsl(200, 80%, 70%)"></stop>
-			<stop offset="100%" stop-color="hsl(90, 80%, 70%)"></stop>
-		</linearGradient>
-		<mask :id="maskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY">
-			<polygon
-				:points="polygonPoints"
-				fill="#fff"
-				fill-opacity="0.5"/>
-			<polyline
-				:points="polylinePoints"
-				fill="none"
-				stroke="#fff"
-				stroke-width="2"/>
-			<circle
-				:cx="headX"
-				:cy="headY"
-				r="3"
-				fill="#fff"/>
-		</mask>
-	</defs>
-	<rect
-		x="-10" y="-10"
-		:width="viewBoxX + 20" :height="viewBoxY + 20"
-		:style="`stroke: none; fill: url(#${ gradientId }); mask: url(#${ maskId })`"/>
-</svg>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { v4 as uuid } from 'uuid';
-
-export default Vue.extend({
-	props: {
-		src: {
-			type: Array,
-			required: true
-		}
-	},
-	data() {
-		return {
-			viewBoxX: 50,
-			viewBoxY: 30,
-			gradientId: uuid(),
-			maskId: uuid(),
-			polylinePoints: '',
-			polygonPoints: '',
-			headX: null,
-			headY: null,
-			clock: null
-		};
-	},
-	watch: {
-		src() {
-			this.draw();
-		}
-	},
-	created() {
-		this.draw();
-
-		// Vueが何故かWatchを発動させない場合があるので
-		this.clock = setInterval(this.draw, 1000);
-	},
-	beforeDestroy() {
-		clearInterval(this.clock);
-	},
-	methods: {
-		draw() {
-			const stats = this.src.slice().reverse();
-			const peak = Math.max.apply(null, stats) || 1;
-
-			const polylinePoints = stats.map((n, i) => [
-				i * (this.viewBoxX / (stats.length - 1)),
-				(1 - (n / peak)) * this.viewBoxY
-			]);
-
-			this.polylinePoints = polylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' ');
-
-			this.polygonPoints = `0,${ this.viewBoxY } ${ this.polylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`;
-
-			this.headX = polylinePoints[polylinePoints.length - 1][0];
-			this.headY = polylinePoints[polylinePoints.length - 1][1];
-		}
-	}
-});
-</script>
diff --git a/src/client/widgets/trends.vue b/src/client/widgets/trends.vue
index d4a4b2d289..b439f91d54 100644
--- a/src/client/widgets/trends.vue
+++ b/src/client/widgets/trends.vue
@@ -10,7 +10,7 @@
 					<router-link class="a" :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</router-link>
 					<p>{{ $t('nUsersMentioned', { n: stat.usersCount }) }}</p>
 				</div>
-				<x-chart class="chart" :src="stat.chart"/>
+				<mk-mini-chart class="chart" :src="stat.chart"/>
 			</div>
 		</transition-group>
 	</div>
@@ -21,7 +21,7 @@
 import { faHashtag } from '@fortawesome/free-solid-svg-icons';
 import MkContainer from '../components/ui/container.vue';
 import define from './define';
-import XChart from './trends.chart.vue';
+import MkMiniChart from '../components/mini-chart.vue';
 
 export default define({
 	name: 'hashtags',
@@ -33,7 +33,7 @@ export default define({
 	})
 }).extend({
 	components: {
-		MkContainer, XChart
+		MkContainer, MkMiniChart
 	},
 	data() {
 		return {