diff --git a/resources/js/Components/Kimarite/Graph.vue b/resources/js/Components/Kimarite/Graph.vue index f97ad6e..6826c68 100644 --- a/resources/js/Components/Kimarite/Graph.vue +++ b/resources/js/Components/Kimarite/Graph.vue @@ -63,6 +63,89 @@ const syncRegressionColorsPlugin = { ChartJS.register(syncRegressionColorsPlugin) +const KIMARITE_API_URL = 'https://www.sumo-api.com/api/kimarite/' + +const KIMARITE_TOOLTIP_ID = 'kimarite-custom-tooltip' +let customTooltipEl: HTMLElement | null = null + +function debounce(fn: (...args: A) => void, ms: number): (...args: A) => void { + let timeoutId: ReturnType + return (...args: A) => { + clearTimeout(timeoutId) + timeoutId = setTimeout(() => fn(...args), ms) + } +} + +function externalKimariteTooltipImpl(context: { tooltip: { opacity: number; x: number; y: number; title: string[]; body: { lines: string[] }[] } }) { + const { tooltip } = context + if (tooltip.opacity === 0) return + + const title = tooltip.title || [] + const body = tooltip.body || [] + const titleStr = title.length ? (Array.isArray(title) ? title.join('') : String(title)) : '' + let inner = '' + if (title.length) { + inner += `
${titleStr}
` + } + body.forEach((b: { lines: string[] }) => { + inner += `
${(b.lines || []).join('
')}

` + }) + + if(body.length > 0 && body[0].lines.length == 1) { + const split = body[0].lines[0].split(':'); + const kimariteType = split[0].toLowerCase().trim(); + const count = split[1].trim(); + + if(!count || isNaN(0) || parseInt(count) <= 0) { + return + } + + const labels = data.value.labels + const datasets = data.value.datasets[0].data + const idx = labels.indexOf(titleStr) + console.log(idx); + console.log(labels); + console.log(datasets); + console.log(datasets.slice(idx + 1)); + const skip = datasets.slice(idx + 1).reduce((total: number, ds: any) => total += parseInt(ds), 0) + const skipParam = skip > 0 ? `&skip=${skip}` : '' + + fetch(KIMARITE_API_URL+`${kimariteType}?limit=10&sortOrder=desc${skipParam}`) + .then(r => r.json()) + .then(data => { + let kimariteList = '' + + data.records.map((it: any) => { + kimariteList += `${it.bashoId}, day ${it.day}: ${it.kimarite} by ${it.winnerEn} (${it.division})
` + }); + inner += `
${kimariteList}
` + + const existingEl = document.getElementById(KIMARITE_TOOLTIP_ID) + if (existingEl) { + existingEl.remove() + customTooltipEl = null + } + + if (!customTooltipEl) { + customTooltipEl = document.createElement('div') + customTooltipEl.id = KIMARITE_TOOLTIP_ID + customTooltipEl.style.cssText = + 'position:absolute; top:40%; right:20px; opacity:1; background:rgba(0,0,0,0.8); color:#fff; border-radius:6px; padding:8px 12px; font-size:12px; transition:opacity 0.1s; z-index:9999' + document.body.appendChild(customTooltipEl) + } + + const closeBtn = '' + customTooltipEl.innerHTML = `
${inner}
${closeBtn}
` + customTooltipEl.querySelector('.kimarite-tooltip-close')?.addEventListener('click', () => { + customTooltipEl?.remove() + customTooltipEl = null + }) + }) + } +} + +const externalKimariteTooltip = debounce(externalKimariteTooltipImpl, 500) + const options = computed(() => ({ responsive: true, maintainAspectRatio: false, @@ -71,6 +154,9 @@ const options = computed(() => ({ forceOverride: true, }, syncRegressionColors: {}, + tooltip: { + external: externalKimariteTooltip, + }, }, scales: { y: {