Merge pull request #3444 from DMPRoadmap/issue_3443_usage_dashboard_bar_chart_broken

Fix for #3443 - bar chart click function broken in usage dashboard

Author: benjaminfaure

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v4.2.1
+
+### Fixed
+- Fixed bar chart click function in the Usage dashboard (GitHub issue #3443)
 ## v4.2.0
 
 **Note this upgrade is mainly a migration from Bootstrap 3 to Bootstrap 5.** 

app/javascript/src/usage/index.js

@@ -42,13 +42,14 @@ $(() => {
     const usersData = JSON.parse($('#users_joined').val());
     if (isObject(usersData)) {
       const chart = createChart('#yearly_users', usersData, '', (event) => {
-        const segment = chart.getElementAtEvent(event)[0];
+        const points = chart.getElementsAtEventForMode(event, 'nearest', { intersect: true }, true);
+        const segment = points[0];
         if (!isUndefined(segment)) {
           const target = $('#users_click_target').val();
-          /* eslint-disable no-underscore-dangle, no-restricted-globals */
-          const label = chart.data.labels[segment._index];
+          /* eslint-disable no-restricted-globals */
+          const label = chart.data.labels[segment.index];
           $(location).attr('href', `${target}?${labelToUrl(label)}`);
-          /* eslint-enable no-underscore-dangle, no-restricted-globals */
+          /* eslint-enable no-restricted-globals */
         }
       });
     }
@@ -59,13 +60,14 @@ $(() => {
     const plansData = JSON.parse($('#plans_created').val());
     if (isObject(plansData)) {
       const chart = createChart('#yearly_plans', plansData, '', (event) => {
-        const segment = chart.getElementAtEvent(event)[0];
+        const points = chart.getElementsAtEventForMode(event, 'nearest', { intersect: true }, true);
+        const segment = points[0];
         if (!isUndefined(segment)) {
           const target = $('#plans_click_target').val();
-          /* eslint-disable no-underscore-dangle, no-restricted-globals */
-          const label = chart.data.labels[segment._index];
+          /* eslint-disable no-restricted-globals */
+          const label = chart.data.labels[segment.index];
           $(location).attr('href', `${target}?${labelToUrl(label)}`);
-          /* eslint-enable no-underscore-dangle, no-restricted-globals */
+          /* eslint-enable no-restricted-globals */
         }
       });
     }