Merge pull request #391 from cre-ne-jp/chartjs-4

Chart.js 4.x へ更新する

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,54 +44,58 @@ 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, _c) => {
+          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 },
       },
     });
+
+    this.chartTarget.classList.add("chartjs-render-monitor");
   }
 
   /**
    * クリックされた日付に対応するページに移動する。
    * @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;

package.json

@@ -4,7 +4,7 @@
     "@fortawesome/free-brands-svg-icons": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
-    "chart.js": "^2.9.4",
+    "chart.js": "^4.4.6",
     "css-loader": "^7.1.2",
     "flatpickr": "^4.6.13",
     "js-cookie": "^3.0.5",

test/system/channel_days_index_chart_test.rb

@@ -28,7 +28,7 @@ class ChannelDaysIndexChartTest < ApplicationSystemTestCase
   test '月のページにおいてグラフが描画されている' do
     visit(@browse_month.path)
 
-    sleep(0.1)
+    sleep(0.5)
 
     chart_canvas = find_chart_canvas
     assert do
@@ -43,7 +43,7 @@ class ChannelDaysIndexChartTest < ApplicationSystemTestCase
 
     visit(@browse_month.path)
 
-    sleep(0.1)
+    sleep(0.5)
 
     chart_canvas = find_chart_canvas
     chart_canvas.click
@@ -69,7 +69,7 @@ class ChannelDaysIndexChartTest < ApplicationSystemTestCase
 
     visit(@browse_month.path)
 
-    sleep(0.1)
+    sleep(0.5)
 
     chart_canvas = find_chart_canvas
     chart_canvas.click