Skip to content

Commit

Permalink
fix: MkChartの型エラーとbytesオプションが機能していない問題を修正
Browse files Browse the repository at this point in the history
  • Loading branch information
@hideki0403
hideki0403 committed Jan 5, 2024
1 parent de56fe5 commit fe49440
Showing 1 changed file with 28 additions and 20 deletions.
48 changes: 28 additions & 20 deletions packages/frontend/src/components/MkChart.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import { useChartTooltip } from '@/scripts/use-chart-tooltip.js';
import { chartVLine } from '@/scripts/chart-vline.js';
import { alpha } from '@/scripts/color.js';
import date from '@/filters/date.js';
import bytes from '@/filters/bytes.js';
import { initChart } from '@/scripts/init-chart.js';
import { chartLegend } from '@/scripts/chart-legend.js';
import MkChartLegend from '@/components/MkChartLegend.vue';
Expand Down Expand Up @@ -95,7 +96,7 @@ const getColor = (i) => {
};

const now = new Date();
let chartInstance: Chart = null;
let chartInstance: Chart | null = null;
let chartData: {
series: {
name: string;
Expand All @@ -108,9 +109,10 @@ let chartData: {
y: number;
}[];
}[];
} = null;
bytes?: boolean;
} | null = null;

const chartEl = shallowRef<HTMLCanvasElement>(null);
const chartEl = shallowRef<HTMLCanvasElement | null>(null);
const fetching = ref(true);

const getDate = (ago: number) => {
Expand All @@ -132,6 +134,7 @@ const format = (arr) => {
const { handler: externalTooltipHandler } = useChartTooltip();

const render = () => {
if (chartData == null || chartEl.value == null) return;
if (chartInstance) {
chartInstance.destroy();
}
Expand Down Expand Up @@ -188,7 +191,6 @@ const render = () => {
stacked: props.stacked,
offset: false,
time: {
stepSize: 1,
unit: props.span === 'day' ? 'month' : 'day',
displayFormats: {
day: 'M/d',
Expand All @@ -198,6 +200,7 @@ const render = () => {
grid: {
},
ticks: {
stepSize: 1,
display: props.detailed,
maxRotation: 0,
autoSkipPadding: 16,
Expand Down Expand Up @@ -237,6 +240,9 @@ const render = () => {
duration: 0,
},
external: externalTooltipHandler,
callbacks: {
label: (item) => chartData?.bytes ? bytes(item.parsed.y * 1000, 1) : item.parsed.y.toString(),
},
},
zoom: props.detailed ? {
pan: {
Expand Down Expand Up @@ -265,10 +271,9 @@ const render = () => {
},
},
} : undefined,
gradient,
},
},
plugins: [chartVLine(vLineColor), ...(props.detailed ? [chartLegend(legendEl.value)] : [])],
plugins: [gradient, chartVLine(vLineColor), ...(props.detailed && legendEl.value ? [chartLegend(legendEl.value)] : [])],
});
};

Expand Down Expand Up @@ -566,7 +571,7 @@ const fetchDriveFilesChart = 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 {
series: [{
name: 'In',
Expand All @@ -588,7 +593,7 @@ const fetchInstanceRequestsChart = async (): 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 {
series: [{
name: 'Users',
Expand All @@ -603,7 +608,7 @@ const fetchInstanceUsersChart = 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 {
series: [{
name: 'Notes',
Expand All @@ -618,7 +623,7 @@ const fetchInstanceNotesChart = 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 {
series: [{
name: 'Following',
Expand All @@ -641,23 +646,23 @@ const fetchInstanceFfChart = 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 {
bytes: true,
series: [{
name: 'Drive usage',
type: 'area',
color: '#008FFB',
data: format(total
? raw.drive.totalUsage
? sum(raw.drive.incUsage)
: 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 });
const raw = await os.apiGet('charts/instance', { host: props.args?.host, limit: props.limit, span: props.span });
return {
series: [{
name: 'Drive files',
Expand All @@ -672,11 +677,11 @@ const fetchInstanceDriveFilesChart = async (total: boolean): Promise<typeof char
};

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 {
series: [...(props.args.withoutAll ? [] : [{
series: [...(props.args?.withoutAll ? [] : [{
name: 'All',
type: 'line',
type: 'line' as const,
data: format(sum(raw.inc, negate(raw.dec))),
color: '#888888',
}]), {
Expand Down Expand Up @@ -704,7 +709,7 @@ const fetchPerUserNotesChart = 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 {
series: [{
name: 'Unique PV (user)',
Expand All @@ -731,7 +736,7 @@ const fetchPerUserPvChart = 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 {
series: [{
name: 'Local',
Expand All @@ -746,7 +751,7 @@ const fetchPerUserFollowingChart = 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 {
series: [{
name: 'Local',
Expand All @@ -761,8 +766,9 @@ const fetchPerUserFollowersChart = 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 {
bytes: true,
series: [{
name: 'Inc',
type: 'area',
Expand Down Expand Up @@ -806,6 +812,8 @@ const fetchAndRender = async () => {
case 'per-user-following': return fetchPerUserFollowingChart();
case 'per-user-followers': return fetchPerUserFollowersChart();
case 'per-user-drive': return fetchPerUserDriveChart();

default: return null;
}
};
fetching.value = true;
Expand Down

0 comments on commit fe49440

Please sign in to comment.