From df05e48b3f9c6f8aecc4174a8c71d9856ff1d571 Mon Sep 17 00:00:00 2001
From: David Hansmann <hansmann.d@debitel.net>
Date: Fri, 27 Feb 2026 12:14:33 +0100
Subject: [PATCH 1/3] initial kimarite user overlay

---
 resources/js/Components/Kimarite/Graph.vue | 75 ++++++++++++++++++++++
 1 file changed, 75 insertions(+)

diff --git a/resources/js/Components/Kimarite/Graph.vue b/resources/js/Components/Kimarite/Graph.vue
index f97ad6e..16342ec 100644
--- a/resources/js/Components/Kimarite/Graph.vue
+++ b/resources/js/Components/Kimarite/Graph.vue
@@ -63,6 +63,78 @@ const syncRegressionColorsPlugin = {
 
 ChartJS.register(syncRegressionColorsPlugin)
 
+const KIMARITE_API_URL = 'https://www.sumo-api.com/api/kimarite/'
+
+let customTooltipEl: HTMLElement | null = null
+
+function debounce<A extends unknown[]>(fn: (...args: A) => void, ms: number): (...args: A) => void {
+  let timeoutId: ReturnType<typeof setTimeout>
+  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 || []
+  let inner = ''
+  if (title.length) {
+    const titleStr = Array.isArray(title) ? title.join('') : String(title)
+    inner += `<div style="font-weight:bold;margin-bottom:4px">${titleStr}</div>`
+  }
+  body.forEach((b: { lines: string[] }) => {
+    inner += `<div>${(b.lines || []).join('<br>')}</div><br>`
+  })
+
+  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
+    }
+
+    fetch(KIMARITE_API_URL+`${kimariteType}?limit=10&sortOrder=desc`)
+      .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})<br>`
+        });
+        inner += `<div>${kimariteList}</div>`
+
+        if (tooltip.opacity === 0) {
+          if (customTooltipEl) {
+            customTooltipEl.remove()
+            customTooltipEl = null
+          }
+          return
+        }
+
+        if (!customTooltipEl) {
+          customTooltipEl = document.createElement('div')
+          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 = '<button type="button" class="kimarite-tooltip-close" style="position:absolute;top:4px;right:4px;background:none;border:none;color:#fff;cursor:pointer;font-size:16px;line-height:1;padding:2px;">×</button>'
+        customTooltipEl.innerHTML = `<div style="position:relative"><div style="padding-right:20px">${inner}</div>${closeBtn}</div>`
+        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 +143,9 @@ const options = computed(() => ({
       forceOverride: true,
     },
     syncRegressionColors: {},
+    tooltip: {
+      external: externalKimariteTooltip,
+    },
   },
   scales: {
     y: {

From 5322e99014b7fa2f8c42b493ddd4cc6d2f87214a Mon Sep 17 00:00:00 2001
From: David Hansmann <hansmann.d@debitel.net>
Date: Fri, 27 Feb 2026 12:35:06 +0100
Subject: [PATCH 2/3] offsets for bashos

---
 resources/js/Components/Kimarite/Graph.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/resources/js/Components/Kimarite/Graph.vue b/resources/js/Components/Kimarite/Graph.vue
index 16342ec..279d0a8 100644
--- a/resources/js/Components/Kimarite/Graph.vue
+++ b/resources/js/Components/Kimarite/Graph.vue
@@ -81,9 +81,9 @@ function externalKimariteTooltipImpl(context: { tooltip: { opacity: number; x: n
 
   const title = tooltip.title || []
   const body = tooltip.body || []
+  const titleStr = title.length ? (Array.isArray(title) ? title.join('') : String(title)) : ''
   let inner = ''
   if (title.length) {
-    const titleStr = Array.isArray(title) ? title.join('') : String(title)
     inner += `<div style="font-weight:bold;margin-bottom:4px">${titleStr}</div>`
   }
   body.forEach((b: { lines: string[] }) => {
@@ -99,7 +99,17 @@ function externalKimariteTooltipImpl(context: { tooltip: { opacity: number; x: n
       return
     }
 
-    fetch(KIMARITE_API_URL+`${kimariteType}?limit=10&sortOrder=desc`)
+    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 = ''

From e67272a479e1f4df5e400dfb25ff8522654becd5 Mon Sep 17 00:00:00 2001
From: David Hansmann <hansmann.d@debitel.net>
Date: Fri, 27 Feb 2026 12:39:15 +0100
Subject: [PATCH 3/3] replacing overlay instead of adding multiple

---
 resources/js/Components/Kimarite/Graph.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/resources/js/Components/Kimarite/Graph.vue b/resources/js/Components/Kimarite/Graph.vue
index 279d0a8..6826c68 100644
--- a/resources/js/Components/Kimarite/Graph.vue
+++ b/resources/js/Components/Kimarite/Graph.vue
@@ -65,6 +65,7 @@ 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<A extends unknown[]>(fn: (...args: A) => void, ms: number): (...args: A) => void {
@@ -119,20 +120,20 @@ function externalKimariteTooltipImpl(context: { tooltip: { opacity: number; x: n
         });
         inner += `<div>${kimariteList}</div>`
 
-        if (tooltip.opacity === 0) {
-          if (customTooltipEl) {
-            customTooltipEl.remove()
-            customTooltipEl = null
-          }
-          return
+        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 = '<button type="button" class="kimarite-tooltip-close" style="position:absolute;top:4px;right:4px;background:none;border:none;color:#fff;cursor:pointer;font-size:16px;line-height:1;padding:2px;">×</button>'
         customTooltipEl.innerHTML = `<div style="position:relative"><div style="padding-right:20px">${inner}</div>${closeBtn}</div>`
         customTooltipEl.querySelector('.kimarite-tooltip-close')?.addEventListener('click', () => {