From bd54e44b35f7aeae8766054322e2908881323041 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 25 Jul 2020 16:31:21 +0900
Subject: [PATCH] feat(client): Implement federation widget chart
---
.../mini-chart.vue} | 0
src/client/widgets/federation.vue | 20 ++++++++++---------
src/client/widgets/trends.vue | 6 +++---
3 files changed, 14 insertions(+), 12 deletions(-)
rename src/client/{widgets/trends.chart.vue => components/mini-chart.vue} (100%)
diff --git a/src/client/widgets/trends.chart.vue b/src/client/components/mini-chart.vue
similarity index 100%
rename from src/client/widgets/trends.chart.vue
rename to src/client/components/mini-chart.vue
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.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 {