search

brave / ads-ui

Self-service ads UI
Mozilla Public License 2.0
24 stars 11 forks source link

feat: persist report settings, use relative filtering #1228

Closed IanKrieger closed 3 months ago

IanKrieger commented 4 months ago

Resolves: https://github.com/brave/ads-ui/issues/1227

https://github.com/brave/ads-ui/assets/48930920/7b178d07-0687-4cb0-a2e4-637ce78d8465

github-actions[bot] commented 3 months ago

[puLL-Merge] - brave/ads-ui@1228

Description

This PR makes several changes to the campaign analytics UI, mainly around the filters and metrics selection. It improves the UX for selecting time ranges, operating systems, and metrics to display on the graphs and tables.

Changes ### Changes - `src/components/Date/DateRangePicker.tsx`: - Adds a `timezone` prop to the date pickers to use UTC - Changes the `onChange` handlers to set the time to the start/end of day - `src/locales/*.po`: - Updates translation files with new strings - `src/routes/campaigns/analytics/CampaignAnalytics.tsx`: - Refactors to use a new `useCampaignAnalyticFilter` hook to manage the filter state - Removes some no longer needed local state - `src/routes/campaigns/analytics/MetricSelector.tsx`: - Changes to force a default metric selection if none are selected - `src/routes/campaigns/analytics/ResultsPane.tsx`: - Passes the `campaignOverview` prop through to the `DailyGraph` - `src/routes/campaigns/analytics/TabularData.tsx`: - Removes a stray console.log - `src/routes/campaigns/analytics/filters/BreakdownSelector.tsx`: - Adds a `key` and `value` prop to the `Tab` components - `src/routes/campaigns/analytics/filters/FilterBar.tsx`: - Removes the `minDate` and `maxDate` props - Sets a fixed height on the bar - `src/routes/campaigns/analytics/filters/OsFilter.tsx`: - Refactors to use a new `useOsFilterParams` hook to manage the OS filter state - Forces a default selection if none selected - Adds functions to lookup OS filter entries - `src/routes/campaigns/analytics/filters/TimeFilter.tsx`: - Refactors to use a new `useTimeFilterParams` hook - Adds a date range picker for custom date ranges - Uses sticky state to persist custom range - `src/routes/campaigns/analytics/filters/multi-filters.ts`: - Fixes `applySelection` to handle the filters array being empty - `src/routes/campaigns/analytics/filters/time-filters.test.ts`: - Removes no longer needed tests - `src/routes/campaigns/analytics/filters/time-filters.ts`: - Refactors the time filter options - Adds i18n using `@lingui/macro` - `src/routes/campaigns/analytics/graphs/DailyGraph.tsx`: - Filters out metrics disabled for the campaign - Takes `campaignOverview` prop - `src/routes/campaigns/analytics/graphs/GraphSkeleton.tsx`: - Tweaks the Skeleton settings - `src/routes/campaigns/analytics/graphs/HourlyGraph.tsx`: - Filters out metrics disabled for the campaign - `src/routes/campaigns/analytics/hooks.ts`: - Adds `useOsFilterParams`, `useTimeFilterParams` and `useCampaignAnalyticFilter` hooks - Refactors `useMetricSelection` and `useBreakdownParams` to use a generic function - `src/routes/campaigns/analytics/metrics.ts`: - Adds a new `isEnabledForCampaign` function

Security Hotspots

None identified. The changes are primarily to the UI and client-side state management. No new external data sources or sensitive data handling.