johan/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat(client): Implement federation widget chart

Browse source
This commit is contained in:
syuilo 2020-07-25 16:31:21 +09:00
parent e1f2e364a4
commit bd54e44b35
3 changed files with 14 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
src/client/widgets/trends.chart.vue → src/client/components/mini-chart.vue
View file

20
src/client/widgets/federation.vue
View file

@ -5,12 +5,12 @@
<div class="wbrkwalb"> <div class="wbrkwalb">
<mk-loading v-if="fetching"/> <mk-loading v-if="fetching"/>
<transition-group tag="div" name="chart" class="instances" v-else> <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"> <div class="instance">
<a class="a" :href="'https://' + instance.host" target="_blank" :title="instance.host">#{{ instance.host }}</a> <a class="a" :href="'https://' + instance.host" target="_blank" :title="instance.host">#{{ instance.host }}</a>
<p>{{ instance.softwareName }} {{ instance.softwareVersion }}</p> <p>{{ instance.softwareName }} {{ instance.softwareVersion }}</p>
</div> </div>
<!-- TODO: <x-chart class="chart" :src="stat.chart"/> --> <mk-mini-chart class="chart" :src="charts[i].requests.received"/>
</div> </div>
</transition-group> </transition-group>
</div> </div>
@ -21,7 +21,7 @@
import { faGlobe } from '@fortawesome/free-solid-svg-icons'; import { faGlobe } from '@fortawesome/free-solid-svg-icons';
import MkContainer from '../components/ui/container.vue'; import MkContainer from '../components/ui/container.vue';
import define from './define'; import define from './define';
import XChart from './trends.chart.vue'; import MkMiniChart from '../components/mini-chart.vue';
export default define({ export default define({
name: 'federation', name: 'federation',
@ -33,11 +33,12 @@ export default define({
}) })
}).extend({ }).extend({
components: { components: {
MkContainer, XChart MkContainer, MkMiniChart
}, },
data() { data() {
return { return {
instances: [], instances: [],
charts: [],
fetching: true, fetching: true,
faGlobe faGlobe
}; };
@ -50,14 +51,15 @@ export default define({
clearInterval(this.clock); clearInterval(this.clock);
}, },
methods: { methods: {
fetch() { async fetch() {
this.$root.api('federation/instances', { const instances = await this.$root.api('federation/instances', {
sort: '+lastCommunicatedAt', sort: '+lastCommunicatedAt',
limit: 5 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;
} }
} }
}); });

6
src/client/widgets/trends.vue
View file

@ -10,7 +10,7 @@
<router-link class="a" :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</router-link> <router-link class="a" :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</router-link>
<p>{{ $t('nUsersMentioned', { n: stat.usersCount }) }}</p> <p>{{ $t('nUsersMentioned', { n: stat.usersCount }) }}</p>
</div> </div>
<x-chart class="chart" :src="stat.chart"/> <mk-mini-chart class="chart" :src="stat.chart"/>
</div> </div>
</transition-group> </transition-group>
</div> </div>
@ -21,7 +21,7 @@
import { faHashtag } from '@fortawesome/free-solid-svg-icons'; import { faHashtag } from '@fortawesome/free-solid-svg-icons';
import MkContainer from '../components/ui/container.vue'; import MkContainer from '../components/ui/container.vue';
import define from './define'; import define from './define';
import XChart from './trends.chart.vue'; import MkMiniChart from '../components/mini-chart.vue';
export default define({ export default define({
name: 'hashtags', name: 'hashtags',
@ -33,7 +33,7 @@ export default define({
}) })
}).extend({ }).extend({
components: { components: {
MkContainer, XChart MkContainer, MkMiniChart
}, },
data() { data() {
return { return {