## Description Adds drilldown support for report bar charts powered by `ReportContainer`. Clicking a non-zero report bar now opens a right-side drawer with the conversations or messages that contributed to that bucket, with each row linking to the underlying conversation and message rows linking with `messageId`. This includes a new `GET /api/v2/accounts/:account_id/reports/drilldown` endpoint, backend drilldown builders/serializers, generic chart click emission, local drawer state via `useReportDrilldown`, compact drilldown cards, pagination, stale-response protection, and validation for unsupported drilldown dimensions. Fixes # CW-4497 https://linear.app/chatwoot/issue/CW-4497/drill-down-on-agent-conversations-report ## Type of change - [x] Bug fix (non-breaking change which fixes an issue) - [x] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality not to work as expected) - [ ] This change requires a documentation update ## How Has This Been Tested? Ran the focused backend and frontend checks for the drilldown endpoint, builder, chart click handling, drawer/card UI, API helper, and stale-response handling. Here are the screenshots on how it looks like: <img width="1792" height="1199" alt="Screenshot 2026-06-02 at 11 32 11 PM" src="https://github.com/user-attachments/assets/6bdb8832-b9df-4bf3-9a2a-beaefe203b6e" /> <img width="1791" height="1230" alt="Screenshot 2026-06-02 at 11 32 34 PM" src="https://github.com/user-attachments/assets/36e92eb7-3208-4855-87f4-0c7f316df54d" /> <img width="1784" height="1235" alt="Screenshot 2026-06-02 at 11 32 46 PM" src="https://github.com/user-attachments/assets/f7a53916-74f2-4622-9305-042e0ac9e877" /> ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules --------- Co-authored-by: Vishnu Narayanan <iamwishnu@gmail.com> Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
150 lines
3.3 KiB
JavaScript
150 lines
3.3 KiB
JavaScript
/* global axios */
|
|
import ApiClient from './ApiClient';
|
|
|
|
const getTimeOffset = () => -new Date().getTimezoneOffset() / 60;
|
|
|
|
class ReportsAPI extends ApiClient {
|
|
constructor() {
|
|
super('reports', { accountScoped: true, apiVersion: 'v2' });
|
|
}
|
|
|
|
getReports({
|
|
metric,
|
|
from,
|
|
to,
|
|
type = 'account',
|
|
id,
|
|
groupBy,
|
|
businessHours,
|
|
}) {
|
|
return axios.get(`${this.url}`, {
|
|
params: {
|
|
metric,
|
|
since: from,
|
|
until: to,
|
|
type,
|
|
id,
|
|
group_by: groupBy,
|
|
business_hours: businessHours,
|
|
timezone_offset: getTimeOffset(),
|
|
},
|
|
});
|
|
}
|
|
|
|
getDrilldown({
|
|
metric,
|
|
bucketTimestamp,
|
|
from,
|
|
to,
|
|
type = 'account',
|
|
id,
|
|
groupBy,
|
|
businessHours,
|
|
page,
|
|
perPage,
|
|
signal,
|
|
}) {
|
|
const requestConfig = {
|
|
params: {
|
|
metric,
|
|
bucket_timestamp: bucketTimestamp,
|
|
since: from,
|
|
until: to,
|
|
type,
|
|
id,
|
|
group_by: groupBy,
|
|
business_hours: businessHours,
|
|
timezone_offset: getTimeOffset(),
|
|
page,
|
|
per_page: perPage,
|
|
},
|
|
};
|
|
|
|
if (signal) {
|
|
requestConfig.signal = signal;
|
|
}
|
|
|
|
return axios.get(`${this.url}/drilldown`, requestConfig);
|
|
}
|
|
|
|
// eslint-disable-next-line default-param-last
|
|
getSummary(since, until, type = 'account', id, groupBy, businessHours) {
|
|
return axios.get(`${this.url}/summary`, {
|
|
params: {
|
|
since,
|
|
until,
|
|
type,
|
|
id,
|
|
group_by: groupBy,
|
|
business_hours: businessHours,
|
|
timezone_offset: getTimeOffset(),
|
|
},
|
|
});
|
|
}
|
|
|
|
getConversationMetric(type = 'account', page = 1) {
|
|
return axios.get(`${this.url}/conversations`, {
|
|
params: {
|
|
type,
|
|
page,
|
|
},
|
|
});
|
|
}
|
|
|
|
getAgentReports({ from: since, to: until, businessHours }) {
|
|
return axios.get(`${this.url}/agents`, {
|
|
params: { since, until, business_hours: businessHours },
|
|
});
|
|
}
|
|
|
|
getConversationsSummaryReports({ from: since, to: until, businessHours }) {
|
|
return axios.get(`${this.url}/conversations_summary`, {
|
|
params: { since, until, business_hours: businessHours },
|
|
});
|
|
}
|
|
|
|
getConversationTrafficCSV({ daysBefore = 6 } = {}) {
|
|
return axios.get(`${this.url}/conversation_traffic`, {
|
|
params: { timezone_offset: getTimeOffset(), days_before: daysBefore },
|
|
});
|
|
}
|
|
|
|
getLabelReports({ from: since, to: until, businessHours }) {
|
|
return axios.get(`${this.url}/labels`, {
|
|
params: { since, until, business_hours: businessHours },
|
|
});
|
|
}
|
|
|
|
getInboxReports({ from: since, to: until, businessHours }) {
|
|
return axios.get(`${this.url}/inboxes`, {
|
|
params: { since, until, business_hours: businessHours },
|
|
});
|
|
}
|
|
|
|
getTeamReports({ from: since, to: until, businessHours }) {
|
|
return axios.get(`${this.url}/teams`, {
|
|
params: { since, until, business_hours: businessHours },
|
|
});
|
|
}
|
|
|
|
getBotMetrics({ from, to } = {}) {
|
|
return axios.get(`${this.url}/bot_metrics`, {
|
|
params: { since: from, until: to },
|
|
});
|
|
}
|
|
|
|
getBotSummary({ from, to, groupBy, businessHours } = {}) {
|
|
return axios.get(`${this.url}/bot_summary`, {
|
|
params: {
|
|
since: from,
|
|
until: to,
|
|
type: 'account',
|
|
group_by: groupBy,
|
|
business_hours: businessHours,
|
|
},
|
|
});
|
|
}
|
|
}
|
|
|
|
export default new ReportsAPI();
|