refactor

packages/frontend/src/pages/admin/overview.active-users.vue

@@ -37,6 +37,8 @@ async function renderChart() {
 		chartInstance.destroy();
 	}
 
+	if (chartEl.value == null) return;
+
 	const getDate = (ago: number) => {
 		const y = now.getFullYear();
 		const m = now.getMonth();
@@ -105,7 +107,6 @@ async function renderChart() {
 					type: 'time',
 					offset: true,
 					time: {
-						stepSize: 1,
 						unit: 'day',
 						displayFormats: {
 							day: 'M/d',
@@ -149,7 +150,9 @@ async function renderChart() {
 					},
 					external: externalTooltipHandler,
 				},
+				...({ // TSを黙らすため
 					gradient,
+				}),
 			},
 		},
 		plugins: [chartVLine(vLineColor)],

packages/frontend/src/pages/admin/overview.ap-requests.vue

@@ -42,6 +42,9 @@ const { handler: externalTooltipHandler } = useChartTooltip();
 const { handler: externalTooltipHandler2 } = useChartTooltip();
 
 onMounted(async () => {
+	if (chartEl.value == null) return;
+	if (chartEl2.value == null) return;
+
 	const now = isChromatic() ? new Date('2024-08-31T10:00:00Z') : new Date();
 
 	const getDate = (ago: number) => {
@@ -122,7 +125,6 @@ onMounted(async () => {
 					stacked: true,
 					offset: false,
 					time: {
-						stepSize: 1,
 						unit: 'day',
 					},
 					grid: {
@@ -144,7 +146,7 @@ onMounted(async () => {
 					ticks: {
 						display: true,
 						//mirror: true,
-						callback: (value, index, values) => value < 0 ? -value : value,
+						callback: (value, index, values) => (value as number) < 0 ? -value : value,
 					},
 				},
 			},
@@ -173,7 +175,9 @@ onMounted(async () => {
 						label: context => `${context.dataset.label}: ${Math.abs(context.parsed.y)}`,
 					},
 				},
+				...({ // TSを黙らすため
 					gradient,
+				}),
 			},
 		},
 		plugins: [chartVLine(vLineColor)],
@@ -213,7 +217,6 @@ onMounted(async () => {
 					type: 'time',
 					offset: false,
 					time: {
-						stepSize: 1,
 						unit: 'day',
 						displayFormats: {
 							day: 'M/d',
@@ -260,7 +263,9 @@ onMounted(async () => {
 					},
 					external: externalTooltipHandler2,
 				},
+				...({ // TSを黙らすため
 					gradient,
+				}),
 			},
 		},
 		plugins: [chartVLine(vLineColor)],

packages/frontend/src/pages/user/activity.following.vue

@@ -161,7 +161,9 @@ async function renderChart() {
 					},
 					external: externalTooltipHandler,
 				},
+				...({ // TSを黙らすため
 					gradient,
+				}),
 			},
 		},
 		plugins: [chartVLine(vLineColor), chartLegend(legendEl.value)],

packages/frontend/src/pages/user/activity.notes.vue

@@ -160,7 +160,9 @@ async function renderChart() {
 					},
 					external: externalTooltipHandler,
 				},
+				...({ // TSを黙らすため
 					gradient,
+				}),
 			},
 		},
 		plugins: [chartVLine(vLineColor), chartLegend(legendEl.value)],

packages/frontend/src/pages/user/activity.pv.vue

@@ -154,8 +154,6 @@ async function renderChart() {
 					display: true,
 					text: 'Unique/Natural PV',
 					padding: {
-						left: 0,
-						right: 0,
 						top: 0,
 						bottom: 12,
 					},
@@ -171,7 +169,9 @@ async function renderChart() {
 					},
 					external: externalTooltipHandler,
 				},
+				...({ // TSを黙らすため
 					gradient,
+				}),
 			},
 		},
 		plugins: [chartVLine(vLineColor), chartLegend(legendEl.value)],

packages/frontend/src/utility/chart-legend.ts

@@ -6,9 +6,11 @@
 import type { Plugin } from 'chart.js';
 import MkChartLegend from '@/components/MkChartLegend.vue';
 
-export const chartLegend = (legend: InstanceType<typeof MkChartLegend>) => ({
+export const chartLegend = (legend: InstanceType<typeof MkChartLegend> | null | undefined) => ({
 	id: 'htmlLegend',
 	afterUpdate(chart, args, options) {
+		if (legend == null) return;
+
 		// Reuse the built-in legendItems generator
 		const items = chart.options.plugins!.legend!.labels!.generateLabels!(chart);