Chart Click Callbacks

You may have cases where you want to allow someone to click into your query to “dive deeper” and see additional information. To do this you will need to add Chart Click Callbacks to your query.

Here is a simple callback you can use that when the chart is clicked it will log out all the accessible data

javascript
console.log(clickedDatasetLabel, clickedElementLabel, clickedElementValue, existingQueryParams);

To navigate to a different query you can return the id

javascript
return {
  query_id: '2b2ce86c-14b7-42c3-aba9-45623404a35c'
}

To forward query params, that will be used as part of the filters, you can return the list of params you wish to forward:

javascript
return {
  query_id: '2b2ce86c-14b7-42c3-aba9-45623404a35c',
  query_params_to_forward: ['repository_id', 'team_id'],
};

Finally, if you wish to customize the query params that are forwarded, you can do so by passing them in the additional_query_params object.

javascript
return {
  query_id: '2b2ce86c-14b7-42c3-aba9-45623404a35c',
  query_params_to_forward: ['repository_id', 'team_id'],
  additional_query_params: {
	  begin_date: currentDateString,
	  end_date: newDateString,
	},
};

Here is a full example

javascript
console.log(clickedDatasetLabel, clickedElementLabel, clickedElementValue, existingQueryParams);

let dateString = clickedElementLabel;

// Convert the string to a Date object
let date = new Date(dateString);

let currentDateString = date.toISOString().substring(0, 10);

if (existingQueryParams.time_period_group_by_id === 'week') {
  // Add one week (7 days * 24 hours * 60 minutes * 60 seconds * 1000 milliseconds)
  date.setTime(date.getTime() + 7 * 24 * 60 * 60 * 1000);
} else if (existingQueryParams.time_period_group_by_id === 'month') {
  date.setUTCMonth(date.getUTCMonth() + 1);
}

// Convert back to an ISO string
let newDateString = date.toISOString().substring(0, 10);

additionalQueryParams = {
  begin_date: currentDateString,
  end_date: newDateString,
};

return {
  query_id: 'filtered_lines_of_code_added_list',
  query_params_to_forward: ['repository_id', 'team_id'],
  additional_query_params: additionalQueryParams,
};