Upgraded Chart.js to version 4.4.2

pontoon/contributors/static/js/profile.js

@@ -64,6 +64,8 @@ var Pontoon = (function (my) {
                   style.getPropertyValue('--forest-green-1'),
                 pointHoverBorderColor: style.getPropertyValue('--white-1'),
                 order: 2,
+                fill: true,
+                tension: 0.4,
               },
               {
                 type: 'line',
@@ -82,64 +84,74 @@ var Pontoon = (function (my) {
                 ),
                 pointHoverBorderColor: style.getPropertyValue('--white-1'),
                 order: 1,
+                fill: true,
+                tension: 0.4,
               },
             ],
           },
           options: {
-            legend: {
-              display: false,
-            },
-            tooltips: {
-              mode: 'index',
-              intersect: false,
-              borderColor: style.getPropertyValue('--status-translated'),
-              borderWidth: 1,
-              caretPadding: 5,
-              xPadding: 10,
-              yPadding: 10,
-              callbacks: {
-                label: function (items, chart) {
-                  const label = chart.datasets[items.datasetIndex].label;
-                  const value = nf.format(items.yLabel / 100);
-
-                  return `${label}: ${value}`;
+            clip: false,
+            plugins: {
+              tooltip: {
+                mode: 'index',
+                intersect: false,
+                borderColor: style.getPropertyValue('--status-translated'),
+                borderWidth: 1,
+                caretPadding: 5,
+                padding: {
+                  x: 10,
+                  y: 10,
+                },
+                callbacks: {
+                  labelColor: function (context) {
+                    return {
+                      borderColor: '#fff',
+                      backgroundColor:
+                        context.dataset.hoverBackgroundColor ||
+                        context.dataset.pointBackgroundColor,
+                      borderWidth: 0.3,
+                    };
+                  },
+                  label: function (context) {
+                    const { parsed, chart, datasetIndex } = context;
+                    const label = chart.data.datasets[datasetIndex].label;
+                    const value = nf.format(parsed.y / 100);
+
+                    return `${label}: ${value}`;
+                  },
                 },
               },
             },
             scales: {
-              xAxes: [
-                {
-                  type: 'time',
-                  time: {
-                    displayFormats: {
-                      month: 'MMM',
-                    },
-                    tooltipFormat: 'MMMM YYYY',
-                  },
-                  gridLines: {
-                    display: false,
-                  },
-                  offset: true,
-                  ticks: {
-                    source: 'data',
+              x: {
+                type: 'time',
+                time: {
+                  displayFormats: {
+                    month: 'MMM',
                   },
+                  tooltipFormat: 'MMMM YYYY',
                 },
-              ],
-              yAxes: [
-                {
-                  gridLines: {
-                    display: false,
-                  },
-                  position: 'right',
-                  ticks: {
-                    beginAtZero: true,
-                    maxTicksLimit: 3,
-                    max: 100,
-                    precision: 0,
-                    callback: (value) => nf.format(value / 100),
-                  },
+                grid: {
+                  display: false,
                 },
-              ],
+                offset: true,
+                ticks: {
+                  source: 'data',
+                },
+              },
+              y: {
+                grid: {
+                  display: false,
+                },
+                position: 'right',
+                ticks: {
+                  maxTicksLimit: 3,
+                  precision: 0,
+                  callback: (value) => nf.format(value / 100),
+                },
+                beginAtZero: true,
+                max: 100,
+              },
             },
           },
         });

pontoon/insights/static/js/insights.js

@@ -2,10 +2,6 @@ const nf = new Intl.NumberFormat('en', {
   style: 'percent',
 });
 
-const shortMonthFormat = new Intl.DateTimeFormat('en', {
-  month: 'short',
-});
-
 const longMonthFormat = new Intl.DateTimeFormat('en', {
   month: 'long',
   year: 'numeric',
@@ -15,6 +11,67 @@ const style = getComputedStyle(document.body);
 
 // eslint-disable-next-line no-var
 var Pontoon = (function (my) {
+  const getOrCreateLegendList = (id) => {
+    id = id + '-legend';
+    const legendContainer = document.getElementById(id);
+    let listContainer = legendContainer.querySelector('ul');
+
+    if (!listContainer) {
+      listContainer = document.createElement('ul');
+      legendContainer.appendChild(listContainer);
+    }
+
+    return listContainer;
+  };
+  const htmlLegendPlugin = {
+    id: 'htmlLegend',
+    afterUpdate(chart) {
+      const ul = getOrCreateLegendList(chart.canvas.id);
+
+      // Remove old legend items
+      while (ul.firstChild) {
+        ul.firstChild.remove();
+      }
+
+      // Generate custom legend items using the provided logic
+      const labels = chart.data.datasets
+        .map((dataset, index) => {
+          const disabled = chart.getDatasetMeta(index).hidden ? 'disabled' : '';
+          const color = dataset.borderColor || dataset.backgroundColor;
+
+          return `<li class="${disabled}"><i class="icon" style="background-color:${color}"></i><span class="label">${dataset.label}</span></li>`;
+        })
+        .join('');
+
+      // Add the generated legend items to the list
+      ul.innerHTML = labels;
+
+      // Add click event listeners for toggling dataset visibility
+      Array.from(ul.getElementsByTagName('li')).forEach((li, index) => {
+        li.onclick = (e) => {
+          const meta = chart.getDatasetMeta(index);
+          const dataset = chart.data.datasets[index];
+
+          if (e.altKey || e.metaKey) {
+            // Show clicked and hide the rest
+            chart.data.datasets.forEach((ds, i) => {
+              const meta = chart.getDatasetMeta(i);
+              meta.hidden = i === index ? null : true;
+            });
+            Array.from(ul.getElementsByTagName('li')).forEach((li, i) => {
+              li.classList.toggle('disabled', i !== index);
+            });
+          } else {
+            // Toggle clicked
+            meta.hidden = meta.hidden === null ? !dataset.hidden : null;
+            li.classList.toggle('disabled');
+          }
+          chart.update();
+        };
+      });
+    },
+  };
+
   return $.extend(true, my, {
     insights: {
       renderCharts: function () {
@@ -56,90 +113,102 @@ var Pontoon = (function (my) {
             borderWidth: item.name === 'All' ? 3 : 1,
             pointBackgroundColor: color,
             pointHitRadius: 10,
-            pointRadius: 4,
+            pointRadius: 3.25,
             pointHoverRadius: 6,
             pointHoverBackgroundColor: color,
             pointHoverBorderColor: style.getPropertyValue('--white-1'),
             spanGaps: true,
+            fill: true,
+            tension: 0.4,
           };
         });
 
-        const pretranslationQualityChart = new Chart(chart, {
+        new Chart(chart, {
           type: 'bar',
           data: {
             labels: chart.data('dates'),
             datasets: datasets,
           },
           options: {
-            legend: {
-              display: false,
-            },
-            legendCallback: Pontoon.insights.customLegend(chart),
-            tooltips: {
-              position: 'nearest',
-              mode: 'index',
-              intersect: false,
-              borderColor: style.getPropertyValue('--white-1'),
-              borderWidth: 1,
-              caretPadding: 5,
-              xPadding: 10,
-              yPadding: 10,
-              callbacks: {
-                label: function (items, chart) {
-                  const label = chart.datasets[items.datasetIndex].label;
-                  const value = nf.format(items.yLabel / 100);
-
-                  return `${label}: ${value}`;
+            clip: false,
+            scales: {
+              x: {
+                type: 'time',
+                time: {
+                  displayFormats: {
+                    month: 'MMM',
+                  },
+                  tooltipFormat: 'MMMM YYYY',
                 },
-                title: function (items) {
-                  const date = parseInt(items[0].label);
-                  const title = longMonthFormat.format(new Date(date));
-                  return `${title}`;
+                grid: {
+                  display: false,
+                },
+                ticks: {
+                  source: 'data',
                 },
               },
-            },
-            scales: {
-              xAxes: [
-                {
-                  gridLines: {
-                    display: false,
-                  },
-                  ticks: {
-                    source: 'data',
-                    callback: (value) =>
-                      shortMonthFormat.format(new Date(value)),
+              y: {
+                grid: {
+                  display: false,
+                },
+                position: 'right',
+                ticks: {
+                  maxTicksLimit: 3,
+                  precision: 0,
+                  callback: function (value) {
+                    return nf.format(value / 100);
                   },
                 },
-              ],
-              yAxes: [
-                {
-                  gridLines: {
-                    display: false,
+                beginAtZero: true,
+                max: 100,
+              },
+            },
+            plugins: {
+              htmlLegend: {
+                containerID: chart,
+              },
+              legend: {
+                display: false,
+              },
+              tooltip: {
+                position: 'nearest',
+                mode: 'index',
+                intersect: false,
+                borderColor: style.getPropertyValue('--white-1'),
+                borderWidth: 1,
+                caretPadding: 5,
+                padding: {
+                  x: 10,
+                  y: 10,
+                },
+                callbacks: {
+                  labelColor: function (context) {
+                    return {
+                      borderColor: '#fff',
+                      backgroundColor:
+                        context.dataset.hoverBackgroundColor ||
+                        context.dataset.pointBackgroundColor,
+                      borderWidth: 0.3,
+                    };
+                  },
+                  label: function (context) {
+                    const { chart, datasetIndex, parsed } = context;
+
+                    const label = chart.data.datasets[datasetIndex].label;
+                    const value = nf.format(parsed.y / 100);
+                    return `${label}: ${value}`;
                   },
-                  position: 'right',
-                  ticks: {
-                    beginAtZero: true,
-                    maxTicksLimit: 3,
-                    max: 100,
-                    precision: 0,
-                    callback: (value) => nf.format(value / 100),
+                  title: function (tooltipItems) {
+                    const date = tooltipItems[0].parsed.x;
+                    const title = longMonthFormat.format(new Date(date));
+                    return title;
                   },
                 },
-              ],
+              },
             },
           },
+          plugins: [htmlLegendPlugin],
         });
-
-        // Render custom legend
-        const chartId = chart.attr('id');
-        chart
-          .parent()
-          .next('.legend')
-          .html(pretranslationQualityChart.generateLegend());
-        Pontoon.insights.attachCustomLegendHandler(
-          pretranslationQualityChart,
-          `#${chartId}-legend .label`,
-        );
       },
     },
   });