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.
Image without caption
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, };
Share