From 5146054d84bec902d9d9ec0182809ef5ea0b3134 Mon Sep 17 00:00:00 2001
From: koi-chan <koi-chan@mail.kazagakure.net>
Date: Sun, 24 Nov 2024 19:11:37 +0900
Subject: [PATCH] =?UTF-8?q?chartjs-4:=20=E8=A8=AD=E5=AE=9A=E3=82=92?=
 =?UTF-8?q?=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../controllers/speeches_chart_controller.js  | 52 ++++++++++---------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/app/javascript/controllers/speeches_chart_controller.js b/app/javascript/controllers/speeches_chart_controller.js
index f190d990..7c04e049 100644
--- a/app/javascript/controllers/speeches_chart_controller.js
+++ b/app/javascript/controllers/speeches_chart_controller.js
@@ -1,7 +1,7 @@
 /* eslint no-console:0 */
 
 import { Controller } from "stimulus";
-import Chart from "chart.js";
+import { Chart } from "chart.js/auto";
 import MessageListStyle from "../message_list_style";
 
 class SpeechesChartController extends Controller {
@@ -44,37 +44,37 @@ class SpeechesChartController extends Controller {
       data,
       options: {
         scales: {
-          yAxes: [{
-            ticks: { beginAtZero: true },
-          }]
+          y: {
+	    beginAtZero: true
+          }
         },
 
-        legend: { display: false },
+        plugins: {
+          legend: { display: false },
 
-        tooltips: {
-          callbacks: {
-            // SpeechesChartControllerのthisを使いたいため、アロー関数にする
-            title: (tooltipItems, _data) => {
-              const tooltipItem = tooltipItems[0];
-              return this.dates[tooltipItem.index];
-            },
-          }
+          tooltip: {
+            callbacks: {
+              // SpeechesChartControllerのthisを使いたいため、アロー関数にする
+              title: (tooltipItems, _data) => {
+                const tooltipItem = tooltipItems[0];
+                return this.dates[tooltipItem.dataIndex];
+	      },
+            }
+          },
         },
 
-        hover: {
-          // SpeechesChartControllerのthisを使いたいため、アロー関数にする
-          onHover: (_e, elements) => {
-            const chartClassList = this.chartTarget.classList;
+        // SpeechesChartControllerのthisを使いたいため、アロー関数にする
+        onHover: (_e, elements) => {
+          const chartClassList = this.chartTarget.classList;
 
-            if (elements[0] === undefined) {
-              chartClassList.remove(this.linkClass);
-            } else {
-              chartClassList.add(this.linkClass);
-            }
+          if (elements[0] === undefined) {
+            chartClassList.remove(this.linkClass);
+          } else {
+            chartClassList.add(this.linkClass);
           }
         },
 
-        animation: { duration: 400 },
+        animation: { active: { duration: 400 } },
       },
     });
   }
@@ -84,14 +84,16 @@ class SpeechesChartController extends Controller {
    * @param {MouseEvent} e クリックに関するマウスイベント。
    */
   goToDayPage(e) {
-    const activePoints = this.chart.getElementsAtEvent(e);
+    const activePoints = this.chart.getElementsAtEventForMode(
+      e, 'index', { intersect: true }, false
+    );
     const clicked = activePoints[0];
     if (clicked === undefined) {
       return;
     }
 
     // YYYY-mm-ddの9文字目から→dd
-    const dd = this.dates[clicked._index].slice(8);
+    const dd = this.dates[clicked.index].slice(8);
     const dayPath = `${document.location.pathname}/${dd}`;
     const href = MessageListStyle.get() === "raw" ?
       `${dayPath}?style=raw` : dayPath;