OpenSource/Sharkey
OpenSource/Sharkey
1
0
Fork 0
mirror of https://activitypub.software/TransFem-org/Sharkey.git synced 2024-12-15 09:15:44 +01:00
Code Issues Projects Releases Packages 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">
<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;
}
}
});

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