usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: MkChartの型エラーとbytesオプションが機能していない問題を修正

This commit is contained in:
yukineko 2024-01-06 03:37:55 +09:00
parent de56fe5f4c
commit fe49440d10
No known key found for this signature in database
GPG Key ID: E5BACB72109B7B90
1 changed files with 28 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
packages/frontend/src/components/MkChart.vue
View File

@ -28,6 +28,7 @@ import { useChartTooltip } from '@/scripts/use-chart-tooltip.js';
import { chartVLine } from '@/scripts/chart-vline.js'; import { chartVLine } from '@/scripts/chart-vline.js';
import { alpha } from '@/scripts/color.js'; import { alpha } from '@/scripts/color.js';
import date from '@/filters/date.js'; import date from '@/filters/date.js';
import bytes from '@/filters/bytes.js';
import { initChart } from '@/scripts/init-chart.js'; import { initChart } from '@/scripts/init-chart.js';
import { chartLegend } from '@/scripts/chart-legend.js'; import { chartLegend } from '@/scripts/chart-legend.js';
import MkChartLegend from '@/components/MkChartLegend.vue'; import MkChartLegend from '@/components/MkChartLegend.vue';
@ -95,7 +96,7 @@ const getColor = (i) => {
}; };
const now = new Date(); const now = new Date();
let chartInstance: Chart = null; let chartInstance: Chart | null = null;
let chartData: { let chartData: {
series: { series: {
name: string; name: string;
@ -108,9 +109,10 @@ let chartData: {
y: number; y: number;
}[]; }[];
}[]; }[];
} = null; bytes?: boolean;
} | null = null;
const chartEl = shallowRef<HTMLCanvasElement>(null); const chartEl = shallowRef<HTMLCanvasElement | null>(null);
const fetching = ref(true); const fetching = ref(true);
const getDate = (ago: number) => { const getDate = (ago: number) => {
@ -132,6 +134,7 @@ const format = (arr) => {
const { handler: externalTooltipHandler } = useChartTooltip(); const { handler: externalTooltipHandler } = useChartTooltip();
const render = () => { const render = () => {
if (chartData == null || chartEl.value == null) return;
if (chartInstance) { if (chartInstance) {
chartInstance.destroy(); chartInstance.destroy();
} }
@ -188,7 +191,6 @@ const render = () => {
stacked: props.stacked, stacked: props.stacked,
offset: false, offset: false,
time: { time: {
stepSize: 1,
unit: props.span === 'day' ? 'month' : 'day', unit: props.span === 'day' ? 'month' : 'day',
displayFormats: { displayFormats: {
day: 'M/d', day: 'M/d',
@ -198,6 +200,7 @@ const render = () => {
grid: { grid: {
}, },
ticks: { ticks: {
stepSize: 1,
display: props.detailed, display: props.detailed,
maxRotation: 0, maxRotation: 0,
autoSkipPadding: 16, autoSkipPadding: 16,
@ -237,6 +240,9 @@ const render = () => {
duration: 0, duration: 0,
}, },
external: externalTooltipHandler, external: externalTooltipHandler,
callbacks: {
label: (item) => chartData?.bytes ? bytes(item.parsed.y * 1000, 1) : item.parsed.y.toString(),
},
}, },
zoom: props.detailed ? { zoom: props.detailed ? {
pan: { pan: {
@ -265,10 +271,9 @@ const render = () => {
}, },
}, },
} : undefined, } : undefined,
gradient,
}, },
}, },
plugins: [chartVLine(vLineColor), ...(props.detailed ? [chartLegend(legendEl.value)] : [])], plugins: [gradient, chartVLine(vLineColor), ...(props.detailed && legendEl.value ? [chartLegend(legendEl.value)] : [])],
}); });
}; };
@ -566,7 +571,7 @@ const fetchDriveFilesChart = async (): Promise<typeof chartData> => {
}; };
const fetchInstanceRequestsChart = async (): Promise<typeof chartData> => { const fetchInstanceRequestsChart = async (): Promise<typeof chartData> => {
const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span }); const raw = await os.apiGet('charts/instance', { host: props.args?.host, limit: props.limit, span: props.span });
return { return {
series: [{ series: [{
name: 'In', name: 'In',
@ -588,7 +593,7 @@ const fetchInstanceRequestsChart = async (): Promise<typeof chartData> => {
}; };
const fetchInstanceUsersChart = async (total: boolean): Promise<typeof chartData> => { 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 }); const raw = await os.apiGet('charts/instance', { host: props.args?.host, limit: props.limit, span: props.span });
return { return {
series: [{ series: [{
name: 'Users', name: 'Users',
@ -603,7 +608,7 @@ const fetchInstanceUsersChart = async (total: boolean): Promise<typeof chartData
}; };
const fetchInstanceNotesChart = async (total: boolean): Promise<typeof chartData> => { 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 }); const raw = await os.apiGet('charts/instance', { host: props.args?.host, limit: props.limit, span: props.span });
return { return {
series: [{ series: [{
name: 'Notes', name: 'Notes',
@ -618,7 +623,7 @@ const fetchInstanceNotesChart = async (total: boolean): Promise<typeof chartData
}; };
const fetchInstanceFfChart = async (total: boolean): Promise<typeof chartData> => { 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 }); const raw = await os.apiGet('charts/instance', { host: props.args?.host, limit: props.limit, span: props.span });
return { return {
series: [{ series: [{
name: 'Following', name: 'Following',
@ -641,7 +646,7 @@ const fetchInstanceFfChart = async (total: boolean): Promise<typeof chartData> =
}; };
const fetchInstanceDriveUsageChart = async (total: boolean): Promise<typeof chartData> => { 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 }); const raw = await os.apiGet('charts/instance', { host: props.args?.host, limit: props.limit, span: props.span });
return { return {
bytes: true, bytes: true,
series: [{ series: [{
@ -649,7 +654,7 @@ const fetchInstanceDriveUsageChart = async (total: boolean): Promise<typeof char
type: 'area', type: 'area',
color: '#008FFB', color: '#008FFB',
data: format(total data: format(total
? raw.drive.totalUsage ? sum(raw.drive.incUsage)
: sum(raw.drive.incUsage, negate(raw.drive.decUsage)), : sum(raw.drive.incUsage, negate(raw.drive.decUsage)),
), ),
}], }],
@ -657,7 +662,7 @@ const fetchInstanceDriveUsageChart = async (total: boolean): Promise<typeof char
}; };
const fetchInstanceDriveFilesChart = async (total: boolean): Promise<typeof chartData> => { 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 }); const raw = await os.apiGet('charts/instance', { host: props.args?.host, limit: props.limit, span: props.span });
return { return {
series: [{ series: [{
name: 'Drive files', name: 'Drive files',
@ -672,11 +677,11 @@ const fetchInstanceDriveFilesChart = async (total: boolean): Promise<typeof char
}; };
const fetchPerUserNotesChart = async (): Promise<typeof chartData> => { 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 }); const raw = await os.apiGet('charts/user/notes', { userId: props.args?.user?.id, limit: props.limit, span: props.span });
return { return {
series: [...(props.args.withoutAll ? [] : [{ series: [...(props.args?.withoutAll ? [] : [{
name: 'All', name: 'All',
type: 'line', type: 'line' as const,
data: format(sum(raw.inc, negate(raw.dec))), data: format(sum(raw.inc, negate(raw.dec))),
color: '#888888', color: '#888888',
}]), { }]), {
@ -704,7 +709,7 @@ const fetchPerUserNotesChart = async (): Promise<typeof chartData> => {
}; };
const fetchPerUserPvChart = async (): Promise<typeof chartData> => { const fetchPerUserPvChart = async (): Promise<typeof chartData> => {
const raw = await os.apiGet('charts/user/pv', { userId: props.args.user.id, limit: props.limit, span: props.span }); const raw = await os.apiGet('charts/user/pv', { userId: props.args?.user?.id, limit: props.limit, span: props.span });
return { return {
series: [{ series: [{
name: 'Unique PV (user)', name: 'Unique PV (user)',
@ -731,7 +736,7 @@ const fetchPerUserPvChart = async (): Promise<typeof chartData> => {
}; };
const fetchPerUserFollowingChart = async (): Promise<typeof chartData> => { 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 }); const raw = await os.apiGet('charts/user/following', { userId: props.args?.user?.id, limit: props.limit, span: props.span });
return { return {
series: [{ series: [{
name: 'Local', name: 'Local',
@ -746,7 +751,7 @@ const fetchPerUserFollowingChart = async (): Promise<typeof chartData> => {
}; };
const fetchPerUserFollowersChart = async (): Promise<typeof chartData> => { 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 }); const raw = await os.apiGet('charts/user/following', { userId: props.args?.user?.id, limit: props.limit, span: props.span });
return { return {
series: [{ series: [{
name: 'Local', name: 'Local',
@ -761,8 +766,9 @@ const fetchPerUserFollowersChart = async (): Promise<typeof chartData> => {
}; };
const fetchPerUserDriveChart = async (): Promise<typeof chartData> => { 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 }); const raw = await os.apiGet('charts/user/drive', { userId: props.args?.user?.id, limit: props.limit, span: props.span });
return { return {
bytes: true,
series: [{ series: [{
name: 'Inc', name: 'Inc',
type: 'area', type: 'area',
@ -806,6 +812,8 @@ const fetchAndRender = async () => {
case 'per-user-following': return fetchPerUserFollowingChart(); case 'per-user-following': return fetchPerUserFollowingChart();
case 'per-user-followers': return fetchPerUserFollowersChart(); case 'per-user-followers': return fetchPerUserFollowersChart();
case 'per-user-drive': return fetchPerUserDriveChart(); case 'per-user-drive': return fetchPerUserDriveChart();
default: return null;
} }
}; };
fetching.value = true; fetching.value = true;