diff options
Diffstat (limited to 'packages/frontend/src/components/MkHeatmap.vue')
| -rw-r--r-- | packages/frontend/src/components/MkHeatmap.vue | 27 |
1 files changed, 15 insertions, 12 deletions
diff --git a/packages/frontend/src/components/MkHeatmap.vue b/packages/frontend/src/components/MkHeatmap.vue index a77f3627f9..336e127725 100644 --- a/packages/frontend/src/components/MkHeatmap.vue +++ b/packages/frontend/src/components/MkHeatmap.vue @@ -35,10 +35,10 @@ const props = withDefaults(defineProps<{ label: '', }); -const rootEl = shallowRef<HTMLDivElement>(null); -const chartEl = shallowRef<HTMLCanvasElement>(null); +const rootEl = shallowRef<HTMLDivElement | null>(null); +const chartEl = shallowRef<HTMLCanvasElement | null>(null); const now = new Date(); -let chartInstance: Chart = null; +let chartInstance: Chart | null = null; const fetching = ref(true); const { handler: externalTooltipHandler } = useChartTooltip({ @@ -46,6 +46,7 @@ const { handler: externalTooltipHandler } = useChartTooltip({ }); async function renderChart() { + if (rootEl.value == null) return; if (chartInstance) { chartInstance.destroy(); } @@ -64,7 +65,7 @@ async function renderChart() { return new Date(y, m, d - ago); }; - const format = (arr) => { + const format = (arr: number[]) => { return arr.map((v, i) => { const dt = getDate(i); const iso = `${dt.getFullYear()}-${(dt.getMonth() + 1).toString().padStart(2, '0')}-${dt.getDate().toString().padStart(2, '0')}`; @@ -77,7 +78,7 @@ async function renderChart() { }); }; - let values; + let values: number[] = []; if (props.src === 'active-users') { const raw = await misskeyApi('charts/active-users', { limit: chartLimit, span: 'day' }); @@ -114,25 +115,25 @@ async function renderChart() { const marginEachCell = 4; + if (chartEl.value == null) return; + chartInstance = new Chart(chartEl.value, { type: 'matrix', data: { datasets: [{ label: props.label, - data: format(values), - pointRadius: 0, + data: format(values) as any, borderWidth: 0, - borderJoinStyle: 'round', borderRadius: 3, backgroundColor(c) { - const value = c.dataset.data[c.dataIndex].v; + // @ts-expect-error TS(2339) + const value = c.dataset.data[c.dataIndex].v as number; let a = (value - min) / max; if (value !== 0) { // 0でない限りは完全に不可視にはしない a = Math.max(a, 0.05); } return alpha(color, a); }, - fill: true, width(c) { const a = c.chart.chartArea ?? {}; return (a.right - a.left) / weeks - marginEachCell; @@ -206,11 +207,13 @@ async function renderChart() { enabled: false, callbacks: { title(context) { - const v = context[0].dataset.data[context[0].dataIndex]; - return v.d; + // @ts-expect-error TS(2339) + return context[0].dataset.data[context[0].dataIndex].d; }, label(context) { const v = context.dataset.data[context.dataIndex]; + + // @ts-expect-error TS(2339) return [v.v]; }, }, |