1113 lines
21 KiB
Vue
1113 lines
21 KiB
Vue
<template>
|
|
<div class="cbbedffa">
|
|
<canvas ref="chartEl"></canvas>
|
|
<div v-if="fetching" class="fetching">
|
|
<MkLoading />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { onMounted, ref, watch, PropType, onUnmounted } from "vue";
|
|
import {
|
|
Chart,
|
|
ArcElement,
|
|
LineElement,
|
|
BarElement,
|
|
PointElement,
|
|
BarController,
|
|
LineController,
|
|
CategoryScale,
|
|
LinearScale,
|
|
TimeScale,
|
|
Legend,
|
|
Title,
|
|
Tooltip,
|
|
SubTitle,
|
|
Filler,
|
|
} from "chart.js";
|
|
import "chartjs-adapter-date-fns";
|
|
import { enUS } from "date-fns/locale";
|
|
import zoomPlugin from "chartjs-plugin-zoom";
|
|
// https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114242002
|
|
// We can't use gradient because Vite throws a error.
|
|
//import gradient from 'chartjs-plugin-gradient';
|
|
import * as os from "@/os";
|
|
import { defaultStore } from "@/store";
|
|
import { useChartTooltip } from "@/scripts/use-chart-tooltip";
|
|
|
|
const props = defineProps({
|
|
src: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
args: {
|
|
type: Object,
|
|
required: false,
|
|
},
|
|
limit: {
|
|
type: Number,
|
|
required: false,
|
|
default: 90,
|
|
},
|
|
span: {
|
|
type: String as PropType<"hour" | "day">,
|
|
required: true,
|
|
},
|
|
detailed: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false,
|
|
},
|
|
stacked: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false,
|
|
},
|
|
bar: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false,
|
|
},
|
|
aspectRatio: {
|
|
type: Number,
|
|
required: false,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
Chart.register(
|
|
ArcElement,
|
|
LineElement,
|
|
BarElement,
|
|
PointElement,
|
|
BarController,
|
|
LineController,
|
|
CategoryScale,
|
|
LinearScale,
|
|
TimeScale,
|
|
Legend,
|
|
Title,
|
|
Tooltip,
|
|
SubTitle,
|
|
Filler,
|
|
zoomPlugin
|
|
//gradient,
|
|
);
|
|
|
|
const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
|
|
const negate = (arr) => arr.map((x) => -x);
|
|
const alpha = (hex, a) => {
|
|
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
|
|
const r = parseInt(result[1], 16);
|
|
const g = parseInt(result[2], 16);
|
|
const b = parseInt(result[3], 16);
|
|
return `rgba(${r}, ${g}, ${b}, ${a})`;
|
|
};
|
|
|
|
const colors = {
|
|
blue: "#31748f",
|
|
green: "#9ccfd8",
|
|
yellow: "#f6c177",
|
|
red: "#eb6f92",
|
|
purple: "#c4a7e7",
|
|
orange: "#ebbcba",
|
|
lime: "#56949f",
|
|
cyan: "#9ccfd8",
|
|
};
|
|
const colorSets = [
|
|
colors.blue,
|
|
colors.green,
|
|
colors.yellow,
|
|
colors.red,
|
|
colors.purple,
|
|
];
|
|
const getColor = (i) => {
|
|
return colorSets[i % colorSets.length];
|
|
};
|
|
|
|
const now = new Date();
|
|
let chartInstance: Chart = null;
|
|
let chartData: {
|
|
series: {
|
|
name: string;
|
|
type: "line" | "area";
|
|
color?: string;
|
|
dashed?: boolean;
|
|
hidden?: boolean;
|
|
data: {
|
|
x: number;
|
|
y: number;
|
|
}[];
|
|
}[];
|
|
} = null;
|
|
|
|
const chartEl = ref<HTMLCanvasElement>(null);
|
|
const fetching = ref(true);
|
|
|
|
const getDate = (ago: number) => {
|
|
const y = now.getFullYear();
|
|
const m = now.getMonth();
|
|
const d = now.getDate();
|
|
const h = now.getHours();
|
|
|
|
return props.span === "day"
|
|
? new Date(y, m, d - ago)
|
|
: new Date(y, m, d, h - ago);
|
|
};
|
|
|
|
const format = (arr) => {
|
|
return arr.map((v, i) => ({
|
|
x: getDate(i).getTime(),
|
|
y: v,
|
|
}));
|
|
};
|
|
|
|
const { handler: externalTooltipHandler } = useChartTooltip();
|
|
|
|
const render = () => {
|
|
if (chartInstance) {
|
|
chartInstance.destroy();
|
|
}
|
|
|
|
const gridColor = defaultStore.state.darkMode
|
|
? "rgba(255, 255, 255, 0.1)"
|
|
: "rgba(0, 0, 0, 0.1)";
|
|
const vLineColor = defaultStore.state.darkMode
|
|
? "rgba(255, 255, 255, 0.2)"
|
|
: "rgba(0, 0, 0, 0.2)";
|
|
|
|
// フォントカラー
|
|
Chart.defaults.color = getComputedStyle(
|
|
document.documentElement
|
|
).getPropertyValue("--fg");
|
|
|
|
const maxes = chartData.series.map((x, i) =>
|
|
Math.max(...x.data.map((d) => d.y))
|
|
);
|
|
|
|
chartInstance = new Chart(chartEl.value, {
|
|
type: props.bar ? "bar" : "line",
|
|
data: {
|
|
labels: new Array(props.limit)
|
|
.fill(0)
|
|
.map((_, i) => getDate(i).toLocaleString())
|
|
.slice()
|
|
.reverse(),
|
|
datasets: chartData.series.map((x, i) => ({
|
|
parsing: false,
|
|
label: x.name,
|
|
data: x.data.slice().reverse(),
|
|
tension: 0.3,
|
|
pointRadius: 0,
|
|
borderWidth: props.bar ? 0 : 2,
|
|
borderColor: x.color ? x.color : getColor(i),
|
|
borderDash: x.dashed ? [5, 5] : [],
|
|
borderJoinStyle: "round",
|
|
borderRadius: props.bar ? 3 : undefined,
|
|
backgroundColor: props.bar
|
|
? x.color
|
|
? x.color
|
|
: getColor(i)
|
|
: alpha(x.color ? x.color : getColor(i), 0.1),
|
|
/*gradient: props.bar ? undefined : {
|
|
backgroundColor: {
|
|
axis: 'y',
|
|
colors: {
|
|
0: alpha(x.color ? x.color : getColor(i), 0),
|
|
[maxes[i]]: alpha(x.color ? x.color : getColor(i), 0.2),
|
|
},
|
|
},
|
|
},*/
|
|
barPercentage: 0.9,
|
|
categoryPercentage: 0.9,
|
|
fill: x.type === "area",
|
|
clip: 8,
|
|
hidden: !!x.hidden,
|
|
})),
|
|
},
|
|
options: {
|
|
aspectRatio: props.aspectRatio || 2.5,
|
|
layout: {
|
|
padding: {
|
|
left: 0,
|
|
right: 8,
|
|
top: 0,
|
|
bottom: 0,
|
|
},
|
|
},
|
|
scales: {
|
|
x: {
|
|
type: "time",
|
|
stacked: props.stacked,
|
|
offset: false,
|
|
time: {
|
|
stepSize: 1,
|
|
unit: props.span === "day" ? "month" : "day",
|
|
},
|
|
grid: {
|
|
color: gridColor,
|
|
borderColor: "rgb(0, 0, 0, 0)",
|
|
},
|
|
ticks: {
|
|
display: props.detailed,
|
|
maxRotation: 0,
|
|
autoSkipPadding: 16,
|
|
},
|
|
adapters: {
|
|
date: {
|
|
locale: enUS,
|
|
},
|
|
},
|
|
min: getDate(props.limit).getTime(),
|
|
},
|
|
y: {
|
|
position: "left",
|
|
stacked: props.stacked,
|
|
suggestedMax: 50,
|
|
grid: {
|
|
color: gridColor,
|
|
borderColor: "rgb(0, 0, 0, 0)",
|
|
},
|
|
ticks: {
|
|
display: props.detailed,
|
|
//mirror: true,
|
|
},
|
|
},
|
|
},
|
|
interaction: {
|
|
intersect: false,
|
|
mode: "index",
|
|
},
|
|
elements: {
|
|
point: {
|
|
hoverRadius: 5,
|
|
hoverBorderWidth: 2,
|
|
},
|
|
},
|
|
animation: false,
|
|
plugins: {
|
|
legend: {
|
|
display: props.detailed,
|
|
position: "bottom",
|
|
labels: {
|
|
boxWidth: 16,
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: false,
|
|
mode: "index",
|
|
animation: {
|
|
duration: 0,
|
|
},
|
|
external: externalTooltipHandler,
|
|
},
|
|
zoom: props.detailed
|
|
? {
|
|
pan: {
|
|
enabled: true,
|
|
},
|
|
zoom: {
|
|
wheel: {
|
|
enabled: true,
|
|
},
|
|
pinch: {
|
|
enabled: true,
|
|
},
|
|
drag: {
|
|
enabled: false,
|
|
},
|
|
mode: "x",
|
|
},
|
|
limits: {
|
|
x: {
|
|
min: "original",
|
|
max: "original",
|
|
},
|
|
y: {
|
|
min: "original",
|
|
max: "original",
|
|
},
|
|
},
|
|
}
|
|
: undefined,
|
|
//gradient,
|
|
},
|
|
},
|
|
plugins: [
|
|
{
|
|
id: "vLine",
|
|
beforeDraw(chart, args, options) {
|
|
if (chart.tooltip?._active?.length) {
|
|
const activePoint = chart.tooltip._active[0];
|
|
const ctx = chart.ctx;
|
|
const x = activePoint.element.x;
|
|
const topY = chart.scales.y.top;
|
|
const bottomY = chart.scales.y.bottom;
|
|
|
|
ctx.save();
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, bottomY);
|
|
ctx.lineTo(x, topY);
|
|
ctx.lineWidth = 1;
|
|
ctx.strokeStyle = vLineColor;
|
|
ctx.stroke();
|
|
ctx.restore();
|
|
}
|
|
},
|
|
},
|
|
],
|
|
});
|
|
};
|
|
|
|
const exportData = () => {
|
|
// TODO
|
|
};
|
|
|
|
const fetchFederationChart = async (): Promise<typeof chartData> => {
|
|
const raw = await os.apiGet("charts/federation", {
|
|
limit: props.limit,
|
|
span: props.span,
|
|
});
|
|
return {
|
|
series: [
|
|
{
|
|
name: "Received",
|
|
type: "area",
|
|
data: format(raw.inboxInstances),
|
|
color: colors.blue,
|
|
},
|
|
{
|
|
name: "Delivered",
|
|
type: "area",
|
|
data: format(raw.deliveredInstances),
|
|
color: colors.green,
|
|
},
|
|
{
|
|
name: "Stalled",
|
|
type: "area",
|
|
data: format(raw.stalled),
|
|
color: colors.red,
|
|
},
|
|
{
|
|
name: "Pub Active",
|
|
type: "line",
|
|
data: format(raw.pubActive),
|
|
color: colors.purple,
|
|
},
|
|
{
|
|
name: "Sub Active",
|
|
type: "line",
|
|
data: format(raw.subActive),
|
|
color: colors.orange,
|
|
},
|
|
{
|
|
name: "Pub & Sub",
|
|
type: "line",
|
|
data: format(raw.pubsub),
|
|
dashed: true,
|
|
color: colors.cyan,
|
|
},
|
|
{
|
|
name: "Pub",
|
|
type: "line",
|
|
data: format(raw.pub),
|
|
dashed: true,
|
|
color: colors.purple,
|
|
},
|
|
{
|
|
name: "Sub",
|
|
type: "line",
|
|
data: format(raw.sub),
|
|
dashed: true,
|
|
color: colors.orange,
|
|
},
|
|
],
|
|
};
|
|
};
|
|
|
|
const fetchApRequestChart = async (): Promise<typeof chartData> => {
|
|
const raw = await os.apiGet("charts/ap-request", {
|
|
limit: props.limit,
|
|
span: props.span,
|
|
});
|
|
return {
|
|
series: [
|
|
{
|
|
name: "In",
|
|
type: "area",
|
|
color: "#31748f",
|
|
data: format(raw.inboxReceived),
|
|
},
|
|
{
|
|
name: "Out (succ)",
|
|
type: "area",
|
|
color: "#c4a7e7",
|
|
data: format(raw.deliverSucceeded),
|
|
},
|
|
{
|
|
name: "Out (fail)",
|
|
type: "area",
|
|
color: "#f6c177",
|
|
data: format(raw.deliverFailed),
|
|
},
|
|
],
|
|
};
|
|
};
|
|
|
|
const fetchNotesChart = async (type: string): Promise<typeof chartData> => {
|
|
const raw = await os.apiGet("charts/notes", {
|
|
limit: props.limit,
|
|
span: props.span,
|
|
});
|
|
return {
|
|
series: [
|
|
{
|
|
name: "All",
|
|
type: "line",
|
|
data: format(
|
|
type === "combined"
|
|
? sum(
|
|
raw.local.inc,
|
|
negate(raw.local.dec),
|
|
raw.remote.inc,
|
|
negate(raw.remote.dec)
|
|
)
|
|
: sum(raw[type].inc, negate(raw[type].dec))
|
|
),
|
|
color: "#888888",
|
|
},
|
|
{
|
|
name: "Renotes",
|
|
type: "area",
|
|
data: format(
|
|
type === "combined"
|
|
? sum(raw.local.diffs.renote, raw.remote.diffs.renote)
|
|
: raw[type].diffs.renote
|
|
),
|
|
color: colors.green,
|
|
},
|
|
{
|
|
name: "Replies",
|
|
type: "area",
|
|
data: format(
|
|
type === "combined"
|
|
? sum(raw.local.diffs.reply, raw.remote.diffs.reply)
|
|
: raw[type].diffs.reply
|
|
),
|
|
color: colors.yellow,
|
|
},
|
|
{
|
|
name: "Normal",
|
|
type: "area",
|
|
data: format(
|
|
type === "combined"
|
|
? sum(raw.local.diffs.normal, raw.remote.diffs.normal)
|
|
: raw[type].diffs.normal
|
|
),
|
|
color: colors.blue,
|
|
},
|
|
{
|
|
name: "With file",
|
|
type: "area",
|
|
data: format(
|
|
type === "combined"
|
|
? sum(
|
|
raw.local.diffs.withFile,
|
|
raw.remote.diffs.withFile
|
|
)
|
|
: raw[type].diffs.withFile
|
|
),
|
|
color: colors.purple,
|
|
},
|
|
],
|
|
};
|
|
};
|
|
|
|
const fetchNotesTotalChart = async (): Promise<typeof chartData> => {
|
|
const raw = await os.apiGet("charts/notes", {
|
|
limit: props.limit,
|
|
span: props.span,
|
|
});
|
|
return {
|
|
series: [
|
|
{
|
|
name: "Combined",
|
|
type: "line",
|
|
data: format(sum(raw.local.total, raw.remote.total)),
|
|
},
|
|
{
|
|
name: "Local",
|
|
type: "area",
|
|
data: format(raw.local.total),
|
|
},
|
|
{
|
|
name: "Remote",
|
|
type: "area",
|
|
data: format(raw.remote.total),
|
|
},
|
|
],
|
|
};
|
|
};
|
|
|
|
const fetchUsersChart = async (total: boolean): Promise<typeof chartData> => {
|
|
const raw = await os.apiGet("charts/users", {
|
|
limit: props.limit,
|
|
span: props.span,
|
|
});
|
|
return {
|
|
series: [
|
|
{
|
|
name: "Combined",
|
|
type: "line",
|
|
data: format(
|
|
total
|
|
? sum(raw.local.total, raw.remote.total)
|
|
: sum(
|
|
raw.local.inc,
|
|
negate(raw.local.dec),
|
|
raw.remote.inc,
|
|
negate(raw.remote.dec)
|
|
)
|
|
),
|
|
},
|
|
{
|
|
name: "Local",
|
|
type: "area",
|
|
data: format(
|
|
total
|
|
? raw.local.total
|
|
: sum(raw.local.inc, negate(raw.local.dec))
|
|
),
|
|
},
|
|
{
|
|
name: "Remote",
|
|
type: "area",
|
|
data: format(
|
|
total
|
|
? raw.remote.total
|
|
: sum(raw.remote.inc, negate(raw.remote.dec))
|
|
),
|
|
},
|
|
],
|
|
};
|
|
};
|
|
|
|
const fetchActiveUsersChart = async (): Promise<typeof chartData> => {
|
|
const raw = await os.apiGet("charts/active-users", {
|
|
limit: props.limit,
|
|
span: props.span,
|
|
});
|
|
return {
|
|
series: [
|
|
{
|
|
name: "Read & Write",
|
|
type: "area",
|
|
data: format(raw.readWrite),
|
|
color: colors.orange,
|
|
},
|
|
{
|
|
name: "Write",
|
|
type: "area",
|
|
data: format(raw.write),
|
|
color: colors.lime,
|
|
},
|
|
{
|
|
name: "Read",
|
|
type: "area",
|
|
data: format(raw.read),
|
|
color: colors.blue,
|
|
},
|
|
{
|
|
name: "< Week",
|
|
type: "area",
|
|
data: format(raw.registeredWithinWeek),
|
|
color: colors.green,
|
|
},
|
|
{
|
|
name: "< Month",
|
|
type: "area",
|
|
data: format(raw.registeredWithinMonth),
|
|
color: colors.yellow,
|
|
},
|
|
{
|
|
name: "< Year",
|
|
type: "area",
|
|
data: format(raw.registeredWithinYear),
|
|
color: colors.red,
|
|
},
|
|
{
|
|
name: "> Week",
|
|
type: "area",
|
|
data: format(raw.registeredOutsideWeek),
|
|
color: colors.yellow,
|
|
},
|
|
{
|
|
name: "> Month",
|
|
type: "area",
|
|
data: format(raw.registeredOutsideMonth),
|
|
color: colors.red,
|
|
},
|
|
{
|
|
name: "> Year",
|
|
type: "area",
|
|
data: format(raw.registeredOutsideYear),
|
|
color: colors.purple,
|
|
},
|
|
],
|
|
};
|
|
};
|
|
|
|
const fetchDriveChart = async (): Promise<typeof chartData> => {
|
|
const raw = await os.apiGet("charts/drive", {
|
|
limit: props.limit,
|
|
span: props.span,
|
|
});
|
|
return {
|
|
bytes: true,
|
|
series: [
|
|
{
|
|
name: "All",
|
|
type: "line",
|
|
dashed: true,
|
|
data: format(
|
|
sum(
|
|
raw.local.incSize,
|
|
negate(raw.local.decSize),
|
|
raw.remote.incSize,
|
|
negate(raw.remote.decSize)
|
|
)
|
|
),
|
|
},
|
|
{
|
|
name: "Local +",
|
|
type: "area",
|
|
data: format(raw.local.incSize),
|
|
},
|
|
{
|
|
name: "Local -",
|
|
type: "area",
|
|
data: format(negate(raw.local.decSize)),
|
|
},
|
|
{
|
|
name: "Remote +",
|
|
type: "area",
|
|
data: format(raw.remote.incSize),
|
|
},
|
|
{
|
|
name: "Remote -",
|
|
type: "area",
|
|
data: format(negate(raw.remote.decSize)),
|
|
},
|
|
],
|
|
};
|
|
};
|
|
|
|
const fetchDriveFilesChart = async (): Promise<typeof chartData> => {
|
|
const raw = await os.apiGet("charts/drive", {
|
|
limit: props.limit,
|
|
span: props.span,
|
|
});
|
|
return {
|
|
series: [
|
|
{
|
|
name: "All",
|
|
type: "line",
|
|
dashed: true,
|
|
data: format(
|
|
sum(
|
|
raw.local.incCount,
|
|
negate(raw.local.decCount),
|
|
raw.remote.incCount,
|
|
negate(raw.remote.decCount)
|
|
)
|
|
),
|
|
},
|
|
{
|
|
name: "Local +",
|
|
type: "area",
|
|
data: format(raw.local.incCount),
|
|
},
|
|
{
|
|
name: "Local -",
|
|
type: "area",
|
|
data: format(negate(raw.local.decCount)),
|
|
},
|
|
{
|
|
name: "Remote +",
|
|
type: "area",
|
|
data: format(raw.remote.incCount),
|
|
},
|
|
{
|
|
name: "Remote -",
|
|
type: "area",
|
|
data: format(negate(raw.remote.decCount)),
|
|
},
|
|
],
|
|
};
|
|
};
|
|
|
|
const fetchInstanceRequestsChart = async (): Promise<typeof chartData> => {
|
|
const raw = await os.apiGet("charts/instance", {
|
|
host: props.args.host,
|
|
limit: props.limit,
|
|
span: props.span,
|
|
});
|
|
return {
|
|
series: [
|
|
{
|
|
name: "In",
|
|
type: "area",
|
|
color: "#31748f",
|
|
data: format(raw.requests.received),
|
|
},
|
|
{
|
|
name: "Out (succ)",
|
|
type: "area",
|
|
color: "#c4a7e7",
|
|
data: format(raw.requests.succeeded),
|
|
},
|
|
{
|
|
name: "Out (fail)",
|
|
type: "area",
|
|
color: "#f6c177",
|
|
data: format(raw.requests.failed),
|
|
},
|
|
],
|
|
};
|
|
};
|
|
|
|
const fetchInstanceUsersChart = async (
|
|
total: boolean
|
|
): Promise<typeof chartData> => {
|
|
const raw = await os.apiGet("charts/instance", {
|
|
host: props.args.host,
|
|
limit: props.limit,
|
|
span: props.span,
|
|
});
|
|
return {
|
|
series: [
|
|
{
|
|
name: "Users",
|
|
type: "area",
|
|
color: "#31748f",
|
|
data: format(
|
|
total
|
|
? raw.users.total
|
|
: sum(raw.users.inc, negate(raw.users.dec))
|
|
),
|
|
},
|
|
],
|
|
};
|
|
};
|
|
|
|
const fetchInstanceNotesChart = async (
|
|
total: boolean
|
|
): Promise<typeof chartData> => {
|
|
const raw = await os.apiGet("charts/instance", {
|
|
host: props.args.host,
|
|
limit: props.limit,
|
|
span: props.span,
|
|
});
|
|
return {
|
|
series: [
|
|
{
|
|
name: "Posts",
|
|
type: "area",
|
|
color: "#31748f",
|
|
data: format(
|
|
total
|
|
? raw.notes.total
|
|
: sum(raw.notes.inc, negate(raw.notes.dec))
|
|
),
|
|
},
|
|
],
|
|
};
|
|
};
|
|
|
|
const fetchInstanceFfChart = async (
|
|
total: boolean
|
|
): Promise<typeof chartData> => {
|
|
const raw = await os.apiGet("charts/instance", {
|
|
host: props.args.host,
|
|
limit: props.limit,
|
|
span: props.span,
|
|
});
|
|
return {
|
|
series: [
|
|
{
|
|
name: "Following",
|
|
type: "area",
|
|
color: "#31748f",
|
|
data: format(
|
|
total
|
|
? raw.following.total
|
|
: sum(raw.following.inc, negate(raw.following.dec))
|
|
),
|
|
},
|
|
{
|
|
name: "Followers",
|
|
type: "area",
|
|
color: "#c4a7e7",
|
|
data: format(
|
|
total
|
|
? raw.followers.total
|
|
: sum(raw.followers.inc, negate(raw.followers.dec))
|
|
),
|
|
},
|
|
],
|
|
};
|
|
};
|
|
|
|
const fetchInstanceDriveUsageChart = async (
|
|
total: boolean
|
|
): Promise<typeof chartData> => {
|
|
const raw = await os.apiGet("charts/instance", {
|
|
host: props.args.host,
|
|
limit: props.limit,
|
|
span: props.span,
|
|
});
|
|
return {
|
|
bytes: true,
|
|
series: [
|
|
{
|
|
name: "Drive usage",
|
|
type: "area",
|
|
color: "#31748f",
|
|
data: format(
|
|
total
|
|
? raw.drive.totalUsage
|
|
: sum(raw.drive.incUsage, negate(raw.drive.decUsage))
|
|
),
|
|
},
|
|
],
|
|
};
|
|
};
|
|
|
|
const fetchInstanceDriveFilesChart = async (
|
|
total: boolean
|
|
): Promise<typeof chartData> => {
|
|
const raw = await os.apiGet("charts/instance", {
|
|
host: props.args.host,
|
|
limit: props.limit,
|
|
span: props.span,
|
|
});
|
|
return {
|
|
series: [
|
|
{
|
|
name: "Drive files",
|
|
type: "area",
|
|
color: "#31748f",
|
|
data: format(
|
|
total
|
|
? raw.drive.totalFiles
|
|
: sum(raw.drive.incFiles, negate(raw.drive.decFiles))
|
|
),
|
|
},
|
|
],
|
|
};
|
|
};
|
|
|
|
const fetchPerUserNotesChart = async (): Promise<typeof chartData> => {
|
|
const raw = await os.apiGet("charts/user/notes", {
|
|
userId: props.args.user.id,
|
|
limit: props.limit,
|
|
span: props.span,
|
|
});
|
|
return {
|
|
series: [
|
|
...(props.args.withoutAll
|
|
? []
|
|
: [
|
|
{
|
|
name: "All",
|
|
type: "line",
|
|
data: format(sum(raw.inc, negate(raw.dec))),
|
|
color: "#888888",
|
|
},
|
|
]),
|
|
{
|
|
name: "With file",
|
|
type: "area",
|
|
data: format(raw.diffs.withFile),
|
|
color: colors.purple,
|
|
},
|
|
{
|
|
name: "Renotes",
|
|
type: "area",
|
|
data: format(raw.diffs.renote),
|
|
color: colors.green,
|
|
},
|
|
{
|
|
name: "Replies",
|
|
type: "area",
|
|
data: format(raw.diffs.reply),
|
|
color: colors.yellow,
|
|
},
|
|
{
|
|
name: "Normal",
|
|
type: "area",
|
|
data: format(raw.diffs.normal),
|
|
color: colors.blue,
|
|
},
|
|
],
|
|
};
|
|
};
|
|
|
|
const fetchPerUserFollowingChart = async (): Promise<typeof chartData> => {
|
|
const raw = await os.apiGet("charts/user/following", {
|
|
userId: props.args.user.id,
|
|
limit: props.limit,
|
|
span: props.span,
|
|
});
|
|
return {
|
|
series: [
|
|
{
|
|
name: "Local",
|
|
type: "area",
|
|
data: format(raw.local.followings.total),
|
|
},
|
|
{
|
|
name: "Remote",
|
|
type: "area",
|
|
data: format(raw.remote.followings.total),
|
|
},
|
|
],
|
|
};
|
|
};
|
|
|
|
const fetchPerUserFollowersChart = async (): Promise<typeof chartData> => {
|
|
const raw = await os.apiGet("charts/user/following", {
|
|
userId: props.args.user.id,
|
|
limit: props.limit,
|
|
span: props.span,
|
|
});
|
|
return {
|
|
series: [
|
|
{
|
|
name: "Local",
|
|
type: "area",
|
|
data: format(raw.local.followers.total),
|
|
},
|
|
{
|
|
name: "Remote",
|
|
type: "area",
|
|
data: format(raw.remote.followers.total),
|
|
},
|
|
],
|
|
};
|
|
};
|
|
|
|
const fetchPerUserDriveChart = async (): Promise<typeof chartData> => {
|
|
const raw = await os.apiGet("charts/user/drive", {
|
|
userId: props.args.user.id,
|
|
limit: props.limit,
|
|
span: props.span,
|
|
});
|
|
return {
|
|
series: [
|
|
{
|
|
name: "Inc",
|
|
type: "area",
|
|
data: format(raw.incSize),
|
|
},
|
|
{
|
|
name: "Dec",
|
|
type: "area",
|
|
data: format(raw.decSize),
|
|
},
|
|
],
|
|
};
|
|
};
|
|
|
|
const fetchAndRender = async () => {
|
|
const fetchData = () => {
|
|
switch (props.src) {
|
|
case "federation":
|
|
return fetchFederationChart();
|
|
case "ap-request":
|
|
return fetchApRequestChart();
|
|
case "users":
|
|
return fetchUsersChart(false);
|
|
case "users-total":
|
|
return fetchUsersChart(true);
|
|
case "active-users":
|
|
return fetchActiveUsersChart();
|
|
case "notes":
|
|
return fetchNotesChart("combined");
|
|
case "local-notes":
|
|
return fetchNotesChart("local");
|
|
case "remote-notes":
|
|
return fetchNotesChart("remote");
|
|
case "notes-total":
|
|
return fetchNotesTotalChart();
|
|
case "drive":
|
|
return fetchDriveChart();
|
|
case "drive-files":
|
|
return fetchDriveFilesChart();
|
|
case "instance-requests":
|
|
return fetchInstanceRequestsChart();
|
|
case "instance-users":
|
|
return fetchInstanceUsersChart(false);
|
|
case "instance-users-total":
|
|
return fetchInstanceUsersChart(true);
|
|
case "instance-notes":
|
|
return fetchInstanceNotesChart(false);
|
|
case "instance-notes-total":
|
|
return fetchInstanceNotesChart(true);
|
|
case "instance-ff":
|
|
return fetchInstanceFfChart(false);
|
|
case "instance-ff-total":
|
|
return fetchInstanceFfChart(true);
|
|
case "instance-drive-usage":
|
|
return fetchInstanceDriveUsageChart(false);
|
|
case "instance-drive-usage-total":
|
|
return fetchInstanceDriveUsageChart(true);
|
|
case "instance-drive-files":
|
|
return fetchInstanceDriveFilesChart(false);
|
|
case "instance-drive-files-total":
|
|
return fetchInstanceDriveFilesChart(true);
|
|
|
|
case "per-user-notes":
|
|
return fetchPerUserNotesChart();
|
|
case "per-user-following":
|
|
return fetchPerUserFollowingChart();
|
|
case "per-user-followers":
|
|
return fetchPerUserFollowersChart();
|
|
case "per-user-drive":
|
|
return fetchPerUserDriveChart();
|
|
}
|
|
};
|
|
fetching.value = true;
|
|
chartData = await fetchData();
|
|
fetching.value = false;
|
|
render();
|
|
};
|
|
|
|
watch(() => [props.src, props.span], fetchAndRender);
|
|
|
|
onMounted(() => {
|
|
fetchAndRender();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.cbbedffa {
|
|
position: relative;
|
|
|
|
> .fetching {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
-webkit-backdrop-filter: var(--blur, blur(12px));
|
|
backdrop-filter: var(--blur, blur(12px));
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: wait;
|
|
}
|
|
}
|
|
</style>
|