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

[gjacob24]

Fixes #3443

Changes proposed in this PR:

• getElementAtEvent replaced by getElementsAtEventForMode

[aaronskiba]

The bar chart click function is now working. :) Given these code changes, I think no-underscore-dangle, can now be removed from eslint-disable throughout the file (can be double-checked by executing yarn run eslint app/javascript/src/usage/index.js).

[gjacob24]

Thanks Aaron! I didn't know that. I'll create another commit to remove it now.

[aaronskiba]

No problem, the fix looks good. :)

It might even be good to do a refactor here? There is a lot of duplication amidst the original code. I just threw it into ChatGPT and got the following suggestion. I didn't really test it though.

// Function to create a chart and handle redirection on click
function createChartWithRedirect(chartElementId, dataElementId, targetElementId) {
  if (!isUndefined($(dataElementId).val())) {
    const data = JSON.parse($(dataElementId).val());
    if (isObject(data)) {
      const chart = createChart(chartElementId, data, '', (event) => {
        const points = chart.getElementsAtEventForMode(event, 'nearest', { intersect: true }, true);
        const segment = points[0];
        if (!isUndefined(segment)) {
          const target = $(targetElementId).val();
          /* eslint-disable no-restricted-globals */
          const label = chart.data.labels[segment.index];
          $(location).attr('href', `${target}?${labelToUrl(label)}`);
          /* eslint-enable no-restricted-globals */
        }
      });
    }
  }
}

// Create the Users joined chart
createChartWithRedirect('#yearly_users', '#users_joined', '#users_click_target');

// Create the Plans created chart
createChartWithRedirect('#yearly_plans', '#plans_created', '#plans_click_target');