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 @@
-
+
#{{ instance.host }}

{{ instance.softwareName }} {{ instance.softwareVersion }}

- +
@@ -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 @@ #{{ stat.tag }}

{{ $t('nUsersMentioned', { n: stat.usersCount }) }}

- + @@ -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 {