From f48720c9159d4d4ba7ea86e0098f50896e7b484c Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Sun, 6 Aug 2023 22:52:17 -0700 Subject: [PATCH] Breakdown feature for insights report. --- components/messages.js | 7 +++ components/pages/reports/ReportDetails.js | 2 + .../reports/insights/InsightsParameters.js | 54 +++++++++---------- .../pages/reports/insights/InsightsTable.js | 9 ++-- pages/api/reports/insights.ts | 19 +++---- queries/analytics/reports/getInsights.ts | 6 +-- 6 files changed, 51 insertions(+), 46 deletions(-) diff --git a/components/messages.js b/components/messages.js index a31e2875..286a5788 100644 --- a/components/messages.js +++ b/components/messages.js @@ -162,6 +162,13 @@ export const labels = defineMessages({ totalRecords: { id: 'labels.total-records', defaultMessage: 'Total records' }, insights: { id: 'label.insights', defaultMessage: 'Insights' }, dropoff: { id: 'label.dropoff', defaultMessage: 'Dropoff' }, + referrer: { id: 'label.referrer', defaultMessage: 'Referrer' }, + country: { id: 'label.country', defaultMessage: 'Country' }, + region: { id: 'label.region', defaultMessage: 'Region' }, + city: { id: 'label.city', defaultMessage: 'City' }, + browser: { id: 'label.browser', defaultMessage: 'Browser' }, + device: { id: 'label.device', defaultMessage: 'Device' }, + pageTitle: { id: 'label.pageTitle', defaultMessage: 'Page title' }, }); export const messages = defineMessages({ diff --git a/components/pages/reports/ReportDetails.js b/components/pages/reports/ReportDetails.js index c41d12f6..df130760 100644 --- a/components/pages/reports/ReportDetails.js +++ b/components/pages/reports/ReportDetails.js @@ -1,9 +1,11 @@ import FunnelReport from './funnel/FunnelReport'; import EventDataReport from './event-data/EventDataReport'; +import InsightsReport from './insights/InsightsReport'; const reports = { funnel: FunnelReport, 'event-data': EventDataReport, + insights: InsightsReport, }; export default function ReportDetails({ reportId, reportType }) { diff --git a/components/pages/reports/insights/InsightsParameters.js b/components/pages/reports/insights/InsightsParameters.js index 5b9b8f18..5d7e1fca 100644 --- a/components/pages/reports/insights/InsightsParameters.js +++ b/components/pages/reports/insights/InsightsParameters.js @@ -11,20 +11,6 @@ import PopupForm from '../PopupForm'; import FilterSelectForm from '../FilterSelectForm'; import FieldSelectForm from '../FieldSelectForm'; -const fieldOptions = [ - { name: 'url', type: 'string' }, - { name: 'title', type: 'string' }, - { name: 'referrer', type: 'string' }, - { name: 'query', type: 'string' }, - { name: 'browser', type: 'string' }, - { name: 'os', type: 'string' }, - { name: 'device', type: 'string' }, - { name: 'country', type: 'string' }, - { name: 'region', type: 'string' }, - { name: 'city', type: 'string' }, - { name: 'language', type: 'string' }, -]; - export function InsightsParameters() { const { report, runReport, updateReport, isRunning } = useContext(ReportContext); const { formatMessage, labels } = useMessages(); @@ -33,9 +19,23 @@ export function InsightsParameters() { const { websiteId, dateRange, filters, groups } = parameters || {}; const queryEnabled = websiteId && dateRange && (filters?.length || groups?.length); + const fieldOptions = [ + { name: 'url_path', type: 'string', label: formatMessage(labels.url) }, + { name: 'page_title', type: 'string', label: formatMessage(labels.pageTitle) }, + { name: 'referrer_domain', type: 'string', label: formatMessage(labels.referrer) }, + { name: 'url_query', type: 'string', label: formatMessage(labels.query) }, + { name: 'browser', type: 'string', label: formatMessage(labels.browser) }, + { name: 'os', type: 'string', label: formatMessage(labels.os) }, + { name: 'device', type: 'string', label: formatMessage(labels.device) }, + { name: 'country', type: 'string', label: formatMessage(labels.country) }, + { name: 'region', type: 'string', label: formatMessage(labels.region) }, + { name: 'city', type: 'string', label: formatMessage(labels.city) }, + { name: 'language', type: 'string', label: formatMessage(labels.language) }, + ]; + const parameterGroups = [ - { label: formatMessage(labels.filters), group: REPORT_PARAMETERS.filters }, { label: formatMessage(labels.breakdown), group: REPORT_PARAMETERS.groups }, + { label: formatMessage(labels.filters), group: REPORT_PARAMETERS.filters }, ]; const parameterData = { @@ -71,12 +71,12 @@ export function InsightsParameters() { {(close, element) => { return ( - {group === REPORT_PARAMETERS.filters && ( - - )} {group === REPORT_PARAMETERS.groups && ( )} + {group === REPORT_PARAMETERS.filters && ( + + )} ); }} @@ -95,19 +95,19 @@ export function InsightsParameters() { items={parameterData[group]} onRemove={index => handleRemove(group, index)} > - {({ name, value }) => { + {({ value, label }) => { return (
- {group === REPORT_PARAMETERS.filters && ( - <> -
{name}
-
{value[0]}
-
{value[1]}
- - )} {group === REPORT_PARAMETERS.groups && ( <> -
{name}
+
{label}
+ + )} + {group === REPORT_PARAMETERS.filters && ( + <> +
{label}
+
{value[0]}
+
{value[1]}
)}
diff --git a/components/pages/reports/insights/InsightsTable.js b/components/pages/reports/insights/InsightsTable.js index d751445b..7832a899 100644 --- a/components/pages/reports/insights/InsightsTable.js +++ b/components/pages/reports/insights/InsightsTable.js @@ -6,14 +6,15 @@ import { ReportContext } from '../Report'; export function InsightsTable() { const { report } = useContext(ReportContext); const { formatMessage, labels } = useMessages(); - const { fields = [] } = report?.parameters || {}; + const { groups = [] } = report?.parameters || {}; return ( - {fields.map(({ name }) => { - return ; + {groups.map(({ name, label }) => { + return ; })} - + + ); } diff --git a/pages/api/reports/insights.ts b/pages/api/reports/insights.ts index f245153f..44f72063 100644 --- a/pages/api/reports/insights.ts +++ b/pages/api/reports/insights.ts @@ -13,7 +13,7 @@ export interface InsightsRequestBody { }; fields: { name: string; type: string; value: string }[]; filters: string[]; - groups: string[]; + groups: { name: string; type: string }[]; } export default async ( @@ -27,24 +27,19 @@ export default async ( const { websiteId, dateRange: { startDate, endDate }, - fields, - filters, groups, + filters, } = req.body; if (!(await canViewWebsite(req.auth, websiteId))) { return unauthorized(res); } - const data = await getInsights( - websiteId, - { - ...filters, - startDate: new Date(startDate), - endDate: new Date(endDate), - }, - groups, - ); + const data = await getInsights(websiteId, groups, { + ...filters, + startDate: new Date(startDate), + endDate: new Date(endDate), + }); return ok(res, data); } diff --git a/queries/analytics/reports/getInsights.ts b/queries/analytics/reports/getInsights.ts index 93569fe7..0f778555 100644 --- a/queries/analytics/reports/getInsights.ts +++ b/queries/analytics/reports/getInsights.ts @@ -5,7 +5,7 @@ import { EVENT_TYPE } from 'lib/constants'; import { QueryFilters } from 'lib/types'; export async function getInsights( - ...args: [websiteId: string, filters: QueryFilters, groups: { name: string; type: string }[]] + ...args: [websiteId: string, groups: { name: string; type: string }[], filters: QueryFilters] ) { return runQuery({ [PRISMA]: () => relationalQuery(...args), @@ -15,8 +15,8 @@ export async function getInsights( async function relationalQuery( websiteId: string, - filters: QueryFilters, groups: { name: string; type: string }[], + filters: QueryFilters, ): Promise< { x: string; @@ -48,8 +48,8 @@ async function relationalQuery( async function clickhouseQuery( websiteId: string, - filters: QueryFilters, groups: { name: string; type: string }[], + filters: QueryFilters, ): Promise< { x: string;