feat(client): Implement federation widget chart
This commit is contained in:
parent
e1f2e364a4
commit
bd54e44b35
|
@ -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;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue