DEV: updates chart.js to 3.5.1 (#14107)

app/assets/javascripts/admin/addon/components/admin-graph.js

@@ -27,14 +27,16 @@ export default Component.extend({
       data: data,
       options: {
         responsive: true,
-        tooltips: {
+        plugins: {
+          tooltip: {
             callbacks: {
               title: (context) =>
-              moment(context[0].xLabel, "YYYY-MM-DD").format("LL"),
+                moment(context[0].label, "YYYY-MM-DD").format("LL"),
+            },
           },
         },
         scales: {
-          yAxes: [
+          y: [
             {
               display: true,
               ticks: {

app/assets/javascripts/admin/addon/components/admin-report-chart.js

@@ -112,15 +112,17 @@ export default Component.extend({
       type: "line",
       data,
       options: {
-        tooltips: {
+        plugins: {
+          tooltip: {
             callbacks: {
               title: (tooltipItem) =>
-              moment(tooltipItem[0].xLabel, "YYYY-MM-DD").format("LL"),
+                moment(tooltipItem[0].label, "YYYY-MM-DD").format("LL"),
             },
           },
           legend: {
             display: false,
           },
+        },
         responsive: true,
         maintainAspectRatio: false,
         responsiveAnimationDuration: 0,
@@ -136,15 +138,10 @@ export default Component.extend({
           },
         },
         scales: {
-          yAxes: [
+          y: [
             {
               display: true,
               ticks: {
-                userCallback: (label) => {
-                  if (Math.floor(label) === label) {
-                    return label;
-                  }
-                },
                 callback: (label) => number(label),
                 sampleSize: 5,
                 maxRotation: 25,
@@ -152,7 +149,7 @@ export default Component.extend({
               },
             },
           ],
-          xAxes: [
+          x: [
             {
               display: true,
               gridLines: { display: false },

app/assets/javascripts/admin/addon/components/admin-report-stacked-chart.js

@@ -89,21 +89,24 @@ export default Component.extend({
         animation: {
           duration: 0,
         },
-        tooltips: {
+        plugins: {
+          tooltip: {
             mode: "index",
             intersect: false,
             callbacks: {
               beforeFooter: (tooltipItem) => {
                 let total = 0;
                 tooltipItem.forEach(
-                (item) => (total += parseInt(item.yLabel || 0, 10))
+                  (item) => (total += parseInt(item.parsed.y || 0, 10))
                 );
                 return `= ${total}`;
               },
               title: (tooltipItem) =>
-              moment(tooltipItem[0].xLabel, "YYYY-MM-DD").format("LL"),
+                moment(tooltipItem[0].label, "YYYY-MM-DD").format("LL"),
             },
           },
+        },
+
         layout: {
           padding: {
             left: 0,
@@ -113,16 +116,11 @@ export default Component.extend({
           },
         },
         scales: {
-          yAxes: [
+          y: [
             {
               stacked: true,
               display: true,
               ticks: {
-                userCallback: (label) => {
-                  if (Math.floor(label) === label) {
-                    return label;
-                  }
-                },
                 callback: (label) => number(label),
                 sampleSize: 5,
                 maxRotation: 25,
@@ -130,8 +128,7 @@ export default Component.extend({
               },
             },
           ],
-
+          x: [
-          xAxes: [
             {
               display: true,
               gridLines: { display: false },

app/assets/javascripts/discourse/app/lib/public-js-versions.js

@@ -4,9 +4,9 @@
 export const PUBLIC_JS_VERSIONS = {
   "ace/ace.js": "ace.js/1.4.12/ace.js",
   "jsoneditor.js": "@json-editor/json-editor/2.5.2/jsoneditor.js",
-  "Chart.min.js": "chart.js/2.9.4/Chart.min.js",
+  "Chart.min.js": "chart.js/3.5.1/Chart.min.js",
   "chartjs-plugin-datalabels.min.js":
-    "chartjs-plugin-datalabels/0.7.0/chartjs-plugin-datalabels.min.js",
+    "chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js",
   "diffhtml.min.js": "diffhtml/1.0.0-beta.18/diffhtml.min.js",
   "jquery.magnific-popup.min.js":
     "magnific-popup/1.1.0/jquery.magnific-popup.min.js",

app/assets/javascripts/discourse/tests/acceptance/admin-search-log-term-test.js

@@ -9,7 +9,7 @@ acceptance("Admin - Search Log Term", function (needs) {
     await visit("/admin/logs/search_logs/term?term=ruby");
 
     assert.ok(exists(".search-logs-filter"), "has the search type filter");
-    assert.ok(exists("canvas.chartjs-render-monitor"), "has graph canvas");
+    assert.ok(exists("canvas"), "has graph canvas");
     assert.ok(exists("div.header-search-results"), "has header search results");
   });
 });

package.json

@@ -19,8 +19,8 @@
     "blueimp-file-upload": "10.13.0",
     "bootbox": "3.2.0",
     "bootstrap": "v3.4.1",
-    "chart.js": "2.9.4",
+    "chart.js": "3.5.1",
-    "chartjs-plugin-datalabels": "^0.7.0",
+    "chartjs-plugin-datalabels": "^2.0.0",
     "diffhtml": "^1.0.0-beta.18",
     "eslint-config-discourse": "^1.1.8",
     "handlebars": "^4.7.7",

plugins/poll/assets/javascripts/components/poll-breakdown-chart.js.es6

@@ -5,6 +5,7 @@ import discourseComputed from "discourse-common/utils/decorators";
 import { getColors } from "discourse/plugins/poll/lib/chart-colors";
 import { htmlSafe } from "@ember/template";
 import { mapBy } from "@ember/object/computed";
+import { next } from "@ember/runloop";
 
 export default Component.extend({
   // Arguments:
@@ -92,6 +93,7 @@ export default Component.extend({
       },
       options: {
         plugins: {
+          tooltip: false,
           datalabels: {
             color: "#333",
             backgroundColor: "rgba(255, 255, 255, 0.5)",
@@ -122,10 +124,14 @@ export default Component.extend({
         responsive: true,
         aspectRatio: 1.1,
         animation: { duration: 0 },
-        tooltips: false,
+
+        // wrapping setHighlightedOption in next block as hover can create many events
+        // prevents two sets to happen in the same computation
         onHover: (event, activeElements) => {
           if (!activeElements.length) {
+            next(() => {
               this.setHighlightedOption(null);
+            });
             return;
           }
 
@@ -137,7 +143,9 @@ export default Component.extend({
           // Clear the array to avoid issues in Chart.js
           activeElements.length = 0;
 
+          next(() => {
             this.setHighlightedOption(Number(optionIndex));
+          });
         },
       },
     };

plugins/poll/assets/javascripts/controllers/poll-breakdown.js.es6

@@ -47,7 +47,6 @@ export default Controller.extend(ModalFunctionality, {
     loadScript("/javascripts/Chart.min.js")
       .then(() => loadScript("/javascripts/chartjs-plugin-datalabels.min.js"))
       .then(() => {
-        window.Chart.plugins.unregister(window.ChartDataLabels);
         this.fetchGroupedPollData();
       });
   },

plugins/poll/assets/javascripts/widgets/discourse-poll.js.es6

@@ -465,17 +465,19 @@ createWidget("discourse-poll-pie-canvas", {
     loadScript("/javascripts/Chart.min.js").then(() => {
       const data = attrs.poll.options.mapBy("votes");
       const labels = attrs.poll.options.mapBy("html");
-      const config = pieChartConfig(data, labels);
+      const config = pieChartConfig(data, labels, {
+        legendContainerId: `poll-results-legend-${attrs.id}`,
+      });
 
       const el = document.getElementById(`poll-results-chart-${attrs.id}`);
-      // eslint-disable-next-line
+      this._chart = new Chart(el.getContext("2d"), config);
-      let chart = new Chart(el.getContext("2d"), config);
-      document.getElementById(
-        `poll-results-legend-${attrs.id}`
-      ).innerHTML = chart.generateLegend();
     });
   },
 
+  willRerenderWidget() {
+    this._chart?.destroy();
+  },
+
   buildAttributes(attrs) {
     return {
       id: `poll-results-chart-${attrs.id}`,
@@ -497,15 +499,54 @@ createWidget("discourse-poll-pie-chart", {
     const chart = this.attach("discourse-poll-pie-canvas", attrs);
     contents.push(chart);
 
-    contents.push(h(`div#poll-results-legend-${attrs.id}.pie-chart-legends`));
+    contents.push(h(`ul#poll-results-legend-${attrs.id}.pie-chart-legends`));
 
     return contents;
   },
 });
 
+const htmlLegendPlugin = {
+  id: "htmlLegend",
+
+  afterUpdate(chart, args, options) {
+    const ul = document.getElementById(options.containerID);
+    ul.innerHTML = "";
+
+    const items = chart.options.plugins.legend.labels.generateLabels(chart);
+    items.forEach((item) => {
+      const li = document.createElement("li");
+      li.classList.add("legend");
+      li.onclick = () => {
+        chart.toggleDataVisibility(item.index);
+        chart.update();
+      };
+
+      const boxSpan = document.createElement("span");
+      boxSpan.classList.add("swatch");
+      boxSpan.style.background = item.fillStyle;
+
+      const textContainer = document.createElement("span");
+      textContainer.style.color = item.fontColor;
+      textContainer.innerHTML = item.text;
+
+      if (!chart.getDataVisibility(item.index)) {
+        li.style.opacity = 0.2;
+      } else {
+        li.style.opacity = 1.0;
+      }
+
+      li.appendChild(boxSpan);
+      li.appendChild(textContainer);
+
+      ul.appendChild(li);
+    });
+  },
+};
+
 function pieChartConfig(data, labels, opts = {}) {
   const aspectRatio = "aspectRatio" in opts ? opts.aspectRatio : 2.2;
   const strippedLabels = labels.map((l) => stripHtml(l));
+
   return {
     type: PIE_CHART_TYPE,
     data: {
@@ -517,18 +558,29 @@ function pieChartConfig(data, labels, opts = {}) {
       ],
       labels: strippedLabels,
     },
+    plugins: [htmlLegendPlugin],
     options: {
       responsive: true,
       aspectRatio,
       animation: { duration: 0 },
-      legend: { display: false },
+      plugins: {
-      legendCallback: function (chart) {
+        legend: {
-        let legends = "";
+          labels: {
-        for (let i = 0; i < labels.length; i++) {
+            generateLabels: function (chart) {
-          legends += `<div class="legend"><span class="swatch" style="background-color:
+              return labels.map((text, index) => {
-            ${chart.data.datasets[0].backgroundColor[i]}"></span>${labels[i]}</div>`;
+                return {
-        }
+                  fillStyle: getColors(data.length)[index],
-        return legends;
+                  text,
+                  index,
+                };
+              });
+            },
+          },
+          display: false,
+        },
+        htmlLegend: {
+          containerID: opts?.legendContainerId,
+        },
       },
     },
   };

plugins/poll/assets/stylesheets/common/poll.scss

@@ -130,18 +130,24 @@ div.poll {
   }
 
   .pie-chart-legends {
+    display: flex;
+    justify-content: center;
     text-align: center;
     margin-top: 0.5em;
 
     .legend {
-      display: inline-block;
+      align-items: center;
-      margin: 4px 0 4px 14px;
+      cursor: pointer;
+      display: flex;
+      flex-direction: row;
+      margin-left: 1em;
+      font-size: var(--font-down-0);
 
       .swatch {
+        margin-right: 0.5em;
         display: inline-block;
-        width: 24px;
+        height: 16px;
-        height: 12px;
+        width: 16px;
-        margin-right: 4px;
       }
     }
   }

yarn.lock

@@ -1063,33 +1063,15 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
-chart.js@2.9.4:
+chart.js@3.5.1:
-  version "2.9.4"
+  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.5.1.tgz#73e24d23a4134a70ccdb5e79a917f156b6f3644a"
-  integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
+  integrity sha512-m5kzt72I1WQ9LILwQC4syla/LD/N413RYv2Dx2nnTkRS9iv/ey1xLTt0DnPc/eWV4zI+BgEgDYBIzbQhZHc/PQ==
-  dependencies:
-    chartjs-color "^2.1.0"
-    moment "^2.10.2"
 
-chartjs-color-string@^0.6.0:
+chartjs-plugin-datalabels@^2.0.0:
-  version "0.6.0"
+  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
+  resolved "https://registry.yarnpkg.com/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.0.0.tgz#caacefb26803d968785071eab012dde8746c5939"
-  integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
+  integrity sha512-WBsWihphzM0Y8fmQVm89+iy99mmgejmj5/jcsYqwxSioLRL/zqJ4Scv/eXq5ZqvG3TpojlGzZLeaOaSvDm7fwA==
-  dependencies:
-    color-name "^1.0.0"
-
-chartjs-color@^2.1.0:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
-  integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
-  dependencies:
-    chartjs-color-string "^0.6.0"
-    color-convert "^1.9.3"
-
-chartjs-plugin-datalabels@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-0.7.0.tgz#f72e44edb2db45ef68913e9320bcc50398a205e6"
-  integrity sha512-PKVUX14nYhH0wcdCpgOoC39Gbzvn6cZ7O9n+bwc02yKD9FTnJ7/TSrBcfebmolFZp1Rcicr9xbT0a5HUbigS7g==
 
 chrome-launcher@^0.12.0:
   version "0.12.0"
@@ -1188,7 +1170,7 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
-color-convert@^1.9.0, color-convert@^1.9.3:
+color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -1207,7 +1189,7 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
-color-name@^1.0.0, color-name@~1.1.4:
+color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
@@ -3144,7 +3126,7 @@ moment@2.29.1:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
   integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
 
-"moment@>= 2.9.0", moment@^2.10.2:
+"moment@>= 2.9.0":
   version "2.29.0"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.0.tgz#fcbef955844d91deb55438613ddcec56e86a3425"
   integrity sha512-z6IJ5HXYiuxvFTI6eiQ9dm77uE0gyy1yXNApVHqTcnIKfY9tIwEjlzsZ6u1LQXvVgKeTnv9Xm7NDvJ7lso3MtA==