2023-07-27 05:31:52 +00:00
|
|
|
<!--
|
2024-02-13 15:59:27 +00:00
|
|
|
SPDX-FileCopyrightText: syuilo and misskey-project
|
2023-07-27 05:31:52 +00:00
|
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
-->
|
|
|
|
|
2018-11-02 18:00:23 +00:00
|
|
|
<template>
|
2022-12-27 03:43:21 +00:00
|
|
|
<div :class="$style.root">
|
2023-01-09 00:41:25 +00:00
|
|
|
<MkFoldableSection class="item">
|
2022-12-27 03:43:21 +00:00
|
|
|
<template #header>Chart</template>
|
|
|
|
<div :class="$style.chart">
|
|
|
|
<div class="selects">
|
2022-06-29 06:41:06 +00:00
|
|
|
<MkSelect v-model="chartSrc" style="margin: 0; flex: 1;">
|
2022-07-20 13:24:26 +00:00
|
|
|
<optgroup :label="i18n.ts.federation">
|
|
|
|
<option value="federation">{{ i18n.ts._charts.federation }}</option>
|
|
|
|
<option value="ap-request">{{ i18n.ts._charts.apRequest }}</option>
|
2022-06-29 06:41:06 +00:00
|
|
|
</optgroup>
|
2022-07-20 13:24:26 +00:00
|
|
|
<optgroup :label="i18n.ts.users">
|
|
|
|
<option value="users">{{ i18n.ts._charts.usersIncDec }}</option>
|
|
|
|
<option value="users-total">{{ i18n.ts._charts.usersTotal }}</option>
|
|
|
|
<option value="active-users">{{ i18n.ts._charts.activeUsers }}</option>
|
2022-06-29 06:41:06 +00:00
|
|
|
</optgroup>
|
2022-07-20 13:24:26 +00:00
|
|
|
<optgroup :label="i18n.ts.notes">
|
|
|
|
<option value="notes">{{ i18n.ts._charts.notesIncDec }}</option>
|
|
|
|
<option value="local-notes">{{ i18n.ts._charts.localNotesIncDec }}</option>
|
|
|
|
<option value="remote-notes">{{ i18n.ts._charts.remoteNotesIncDec }}</option>
|
|
|
|
<option value="notes-total">{{ i18n.ts._charts.notesTotal }}</option>
|
2022-06-29 06:41:06 +00:00
|
|
|
</optgroup>
|
2022-07-20 13:24:26 +00:00
|
|
|
<optgroup :label="i18n.ts.drive">
|
|
|
|
<option value="drive-files">{{ i18n.ts._charts.filesIncDec }}</option>
|
|
|
|
<option value="drive">{{ i18n.ts._charts.storageUsageIncDec }}</option>
|
2022-06-29 06:41:06 +00:00
|
|
|
</optgroup>
|
|
|
|
</MkSelect>
|
|
|
|
<MkSelect v-model="chartSpan" style="margin: 0 0 0 10px;">
|
2022-07-20 13:24:26 +00:00
|
|
|
<option value="hour">{{ i18n.ts.perHour }}</option>
|
|
|
|
<option value="day">{{ i18n.ts.perDay }}</option>
|
2022-06-29 06:41:06 +00:00
|
|
|
</MkSelect>
|
|
|
|
</div>
|
2022-12-27 03:43:21 +00:00
|
|
|
<div class="chart _panel">
|
2022-12-30 23:17:00 +00:00
|
|
|
<MkChart :src="chartSrc" :span="chartSpan" :limit="chartLimit" :detailed="true"></MkChart>
|
2022-06-29 06:41:06 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2023-01-09 00:41:25 +00:00
|
|
|
</MkFoldableSection>
|
2022-12-27 03:43:21 +00:00
|
|
|
|
2023-01-09 00:41:25 +00:00
|
|
|
<MkFoldableSection class="item">
|
2022-12-27 03:43:21 +00:00
|
|
|
<template #header>Active users heatmap</template>
|
2022-12-30 09:26:36 +00:00
|
|
|
<MkSelect v-model="heatmapSrc" style="margin: 0 0 12px 0;">
|
|
|
|
<option value="active-users">Active users</option>
|
|
|
|
<option value="notes">Notes</option>
|
|
|
|
<option value="ap-requests-inbox-received">AP Requests: inboxReceived</option>
|
|
|
|
<option value="ap-requests-deliver-succeeded">AP Requests: deliverSucceeded</option>
|
|
|
|
<option value="ap-requests-deliver-failed">AP Requests: deliverFailed</option>
|
|
|
|
</MkSelect>
|
2022-12-27 03:43:21 +00:00
|
|
|
<div class="_panel" :class="$style.heatmap">
|
2024-01-12 06:29:06 +00:00
|
|
|
<MkHeatmap :src="heatmapSrc" :label="'Read & Write'"/>
|
2022-06-29 06:41:06 +00:00
|
|
|
</div>
|
2023-01-09 00:41:25 +00:00
|
|
|
</MkFoldableSection>
|
2022-12-27 03:43:21 +00:00
|
|
|
|
2023-01-09 00:41:25 +00:00
|
|
|
<MkFoldableSection class="item">
|
2022-12-28 05:13:47 +00:00
|
|
|
<template #header>Retention rate</template>
|
2023-05-12 01:29:27 +00:00
|
|
|
<div class="_panel" :class="$style.retentionHeatmap">
|
2022-12-28 05:13:47 +00:00
|
|
|
<MkRetentionHeatmap/>
|
|
|
|
</div>
|
2023-05-12 01:29:27 +00:00
|
|
|
<div class="_panel" :class="$style.retentionLine">
|
|
|
|
<MkRetentionLineChart/>
|
|
|
|
</div>
|
2023-01-09 00:41:25 +00:00
|
|
|
</MkFoldableSection>
|
2022-12-28 05:13:47 +00:00
|
|
|
|
2023-01-09 00:41:25 +00:00
|
|
|
<MkFoldableSection class="item">
|
2022-12-27 03:43:21 +00:00
|
|
|
<template #header>Federation</template>
|
|
|
|
<div :class="$style.federation">
|
|
|
|
<div class="pies">
|
|
|
|
<div class="sub">
|
|
|
|
<div class="title">Sub</div>
|
|
|
|
<canvas ref="subDoughnutEl"></canvas>
|
|
|
|
</div>
|
|
|
|
<div class="pub">
|
|
|
|
<div class="title">Pub</div>
|
|
|
|
<canvas ref="pubDoughnutEl"></canvas>
|
|
|
|
</div>
|
|
|
|
</div>
|
2022-06-29 06:41:06 +00:00
|
|
|
</div>
|
2023-01-09 00:41:25 +00:00
|
|
|
</MkFoldableSection>
|
2018-11-02 18:00:23 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
2022-06-29 06:41:06 +00:00
|
|
|
<script lang="ts" setup>
|
2023-12-07 05:42:09 +00:00
|
|
|
import { onMounted, ref, shallowRef } from 'vue';
|
2023-01-02 01:18:47 +00:00
|
|
|
import { Chart } from 'chart.js';
|
2023-01-07 06:09:46 +00:00
|
|
|
import MkSelect from '@/components/MkSelect.vue';
|
2022-08-30 15:24:33 +00:00
|
|
|
import MkChart from '@/components/MkChart.vue';
|
2023-09-19 07:37:43 +00:00
|
|
|
import { useChartTooltip } from '@/scripts/use-chart-tooltip.js';
|
|
|
|
import * as os from '@/os.js';
|
2024-01-04 09:32:46 +00:00
|
|
|
import { misskeyApiGet } from '@/scripts/misskey-api.js';
|
2023-09-19 07:37:43 +00:00
|
|
|
import { i18n } from '@/i18n.js';
|
2024-01-12 06:29:06 +00:00
|
|
|
import MkHeatmap, { type HeatmapSource } from '@/components/MkHeatmap.vue';
|
2023-01-09 00:41:25 +00:00
|
|
|
import MkFoldableSection from '@/components/MkFoldableSection.vue';
|
2022-12-28 05:13:47 +00:00
|
|
|
import MkRetentionHeatmap from '@/components/MkRetentionHeatmap.vue';
|
2023-05-12 01:29:27 +00:00
|
|
|
import MkRetentionLineChart from '@/components/MkRetentionLineChart.vue';
|
2023-09-19 07:37:43 +00:00
|
|
|
import { initChart } from '@/scripts/init-chart.js';
|
2018-11-02 18:00:23 +00:00
|
|
|
|
2023-01-02 01:18:47 +00:00
|
|
|
initChart();
|
2020-01-29 19:37:25 +00:00
|
|
|
|
2022-12-30 23:17:00 +00:00
|
|
|
const chartLimit = 500;
|
2023-12-07 05:42:09 +00:00
|
|
|
const chartSpan = ref<'hour' | 'day'>('hour');
|
|
|
|
const chartSrc = ref('active-users');
|
2024-01-12 06:29:06 +00:00
|
|
|
const heatmapSrc = ref<HeatmapSource>('active-users');
|
2023-12-07 05:42:09 +00:00
|
|
|
const subDoughnutEl = shallowRef<HTMLCanvasElement>();
|
|
|
|
const pubDoughnutEl = shallowRef<HTMLCanvasElement>();
|
2022-06-29 06:41:06 +00:00
|
|
|
|
2022-12-26 04:26:21 +00:00
|
|
|
const { handler: externalTooltipHandler1 } = useChartTooltip({
|
|
|
|
position: 'middle',
|
|
|
|
});
|
|
|
|
const { handler: externalTooltipHandler2 } = useChartTooltip({
|
|
|
|
position: 'middle',
|
|
|
|
});
|
2022-06-29 06:41:06 +00:00
|
|
|
|
|
|
|
function createDoughnut(chartEl, tooltip, data) {
|
2022-06-30 13:02:08 +00:00
|
|
|
const chartInstance = new Chart(chartEl, {
|
2022-06-29 06:41:06 +00:00
|
|
|
type: 'doughnut',
|
|
|
|
data: {
|
|
|
|
labels: data.map(x => x.name),
|
|
|
|
datasets: [{
|
|
|
|
backgroundColor: data.map(x => x.color),
|
2022-06-30 12:38:34 +00:00
|
|
|
borderColor: getComputedStyle(document.documentElement).getPropertyValue('--panel'),
|
|
|
|
borderWidth: 2,
|
|
|
|
hoverOffset: 0,
|
2022-06-29 06:41:06 +00:00
|
|
|
data: data.map(x => x.value),
|
|
|
|
}],
|
2020-08-09 06:51:02 +00:00
|
|
|
},
|
2022-06-29 06:41:06 +00:00
|
|
|
options: {
|
2022-07-01 08:08:45 +00:00
|
|
|
maintainAspectRatio: false,
|
2022-06-29 06:41:06 +00:00
|
|
|
layout: {
|
|
|
|
padding: {
|
2022-06-30 11:15:14 +00:00
|
|
|
left: 16,
|
|
|
|
right: 16,
|
|
|
|
top: 16,
|
|
|
|
bottom: 16,
|
2022-06-29 06:41:06 +00:00
|
|
|
},
|
|
|
|
},
|
2022-06-30 13:02:08 +00:00
|
|
|
onClick: (ev) => {
|
2024-01-30 10:53:53 +00:00
|
|
|
if (ev.native == null) return;
|
|
|
|
const hit = chartInstance.getElementsAtEventForMode(ev.native, 'nearest', { intersect: true }, false)[0];
|
2022-06-30 13:02:08 +00:00
|
|
|
if (hit && data[hit.index].onClick) {
|
|
|
|
data[hit.index].onClick();
|
|
|
|
}
|
|
|
|
},
|
2022-06-29 06:41:06 +00:00
|
|
|
plugins: {
|
|
|
|
legend: {
|
|
|
|
display: false,
|
|
|
|
},
|
|
|
|
tooltip: {
|
|
|
|
enabled: false,
|
|
|
|
mode: 'index',
|
|
|
|
animation: {
|
|
|
|
duration: 0,
|
|
|
|
},
|
|
|
|
external: tooltip,
|
|
|
|
},
|
|
|
|
},
|
2020-08-09 06:51:02 +00:00
|
|
|
},
|
2022-06-29 06:41:06 +00:00
|
|
|
});
|
2022-06-30 13:02:08 +00:00
|
|
|
|
|
|
|
return chartInstance;
|
2022-06-29 06:41:06 +00:00
|
|
|
}
|
2018-11-02 18:00:23 +00:00
|
|
|
|
2022-06-29 06:41:06 +00:00
|
|
|
onMounted(() => {
|
2024-01-04 09:32:46 +00:00
|
|
|
misskeyApiGet('federation/stats', { limit: 30 }).then(fedStats => {
|
2024-01-30 10:53:53 +00:00
|
|
|
type ChartData = {
|
|
|
|
name: string,
|
|
|
|
color: string | null,
|
|
|
|
value: number,
|
|
|
|
onClick?: () => void,
|
|
|
|
}[];
|
|
|
|
|
|
|
|
const subs: ChartData = fedStats.topSubInstances.map(x => ({
|
2022-06-30 13:02:08 +00:00
|
|
|
name: x.host,
|
|
|
|
color: x.themeColor,
|
|
|
|
value: x.followersCount,
|
|
|
|
onClick: () => {
|
|
|
|
os.pageWindow(`/instance-info/${x.host}`);
|
|
|
|
},
|
2024-01-30 10:53:53 +00:00
|
|
|
}));
|
|
|
|
|
|
|
|
subs.push({
|
|
|
|
name: '(other)',
|
|
|
|
color: '#80808080',
|
|
|
|
value: fedStats.otherFollowersCount,
|
|
|
|
});
|
|
|
|
|
|
|
|
createDoughnut(subDoughnutEl.value, externalTooltipHandler1, subs);
|
2022-06-30 13:02:08 +00:00
|
|
|
|
2024-01-30 10:53:53 +00:00
|
|
|
const pubs: ChartData = fedStats.topPubInstances.map(x => ({
|
2022-06-30 13:02:08 +00:00
|
|
|
name: x.host,
|
|
|
|
color: x.themeColor,
|
|
|
|
value: x.followingCount,
|
|
|
|
onClick: () => {
|
|
|
|
os.pageWindow(`/instance-info/${x.host}`);
|
|
|
|
},
|
2024-01-30 10:53:53 +00:00
|
|
|
}));
|
|
|
|
|
|
|
|
pubs.push({
|
|
|
|
name: '(other)',
|
|
|
|
color: '#80808080',
|
|
|
|
value: fedStats.otherFollowingCount,
|
|
|
|
});
|
|
|
|
|
|
|
|
createDoughnut(pubDoughnutEl.value, externalTooltipHandler2, pubs);
|
2022-06-29 06:41:06 +00:00
|
|
|
});
|
2018-11-02 18:00:23 +00:00
|
|
|
});
|
|
|
|
</script>
|
2020-02-16 17:21:27 +00:00
|
|
|
|
2022-12-27 03:43:21 +00:00
|
|
|
<style lang="scss" module>
|
|
|
|
.root {
|
|
|
|
&:global {
|
|
|
|
> .item {
|
|
|
|
margin-bottom: 16px;
|
2022-06-29 06:41:06 +00:00
|
|
|
}
|
2022-01-04 06:36:14 +00:00
|
|
|
}
|
2022-12-27 03:43:21 +00:00
|
|
|
}
|
2022-01-04 06:36:14 +00:00
|
|
|
|
2022-12-27 03:43:21 +00:00
|
|
|
.chart {
|
|
|
|
&:global {
|
|
|
|
> .selects {
|
|
|
|
display: flex;
|
|
|
|
margin-bottom: 12px;
|
|
|
|
}
|
|
|
|
|
|
|
|
> .chart {
|
|
|
|
padding: 16px;
|
|
|
|
}
|
2022-12-27 03:30:34 +00:00
|
|
|
}
|
2022-12-27 03:43:21 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.heatmap {
|
|
|
|
padding: 16px;
|
|
|
|
margin-bottom: 16px;
|
|
|
|
}
|
2022-12-27 03:30:34 +00:00
|
|
|
|
2023-05-12 01:29:27 +00:00
|
|
|
.retentionHeatmap {
|
|
|
|
padding: 16px;
|
|
|
|
margin-bottom: 16px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.retentionLine {
|
2022-12-28 05:13:47 +00:00
|
|
|
padding: 16px;
|
|
|
|
margin-bottom: 16px;
|
|
|
|
}
|
|
|
|
|
2022-12-27 03:43:21 +00:00
|
|
|
.federation {
|
|
|
|
&:global {
|
|
|
|
> .pies {
|
|
|
|
display: flex;
|
|
|
|
gap: 16px;
|
|
|
|
|
|
|
|
> .sub, > .pub {
|
|
|
|
flex: 1;
|
|
|
|
min-width: 0;
|
|
|
|
position: relative;
|
|
|
|
background: var(--panel);
|
|
|
|
border-radius: var(--radius);
|
|
|
|
padding: 24px;
|
|
|
|
max-height: 300px;
|
|
|
|
|
|
|
|
> .title {
|
|
|
|
position: absolute;
|
|
|
|
top: 24px;
|
|
|
|
left: 24px;
|
|
|
|
}
|
2022-06-29 06:41:06 +00:00
|
|
|
}
|
2022-07-01 08:08:45 +00:00
|
|
|
|
2022-12-27 03:43:21 +00:00
|
|
|
@media (max-width: 600px) {
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
2022-07-01 08:08:45 +00:00
|
|
|
}
|
2020-02-16 17:21:27 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|