Refactor Devices to /query endpoint#6398
Conversation
|
| import { IndexBreakdown } from '../reports/index-breakdown' | ||
| import { chooseBreakdownMetricsByContext } from '../breakdowns' | ||
|
|
||
| type Mode = 'browser' | 'os' | 'size' |
There was a problem hiding this comment.
Perhaps let's use this opportunity to change the stored mode keys to follow a consistent naming pattern (camelCase, plural)? Basically, follow what's done in pages:
type Mode = Extract<BreakdownReportKey, 'pages' | 'entryPages' | 'exitPages'>
const initMode = (storedMode: string): Mode => {
if (['entry-pages', BreakdownReportKey.entryPages].includes(storedMode)) {
return BreakdownReportKey.entryPages
}
if (['exit-pages', BreakdownReportKey.exitPages].includes(storedMode)) {
return BreakdownReportKey.exitPages
}
return BreakdownReportKey.pages
}We'll still use the legacy names for getting the stored tab, but we'll start writing new keys into storage. How about these for new names:
- browsers
- operatingSystems
- screenSizes
| { label: 'Browsers', value: 'browser' }, | ||
| { label: 'Operating systems', value: 'os' }, | ||
| { label: 'Devices', value: 'size' } |
There was a problem hiding this comment.
continuation of my other comment -- switching to enums, we'd update these too (e.g. 'browser' -> BreakdownReportKey.browsers)
| ] | ||
| } | ||
|
|
||
| const DEVICES_METRICS_BY_CONTEXT: MetricsByContext = { |
There was a problem hiding this comment.
I think this could be the new COMMON_METRICS_BY_CONTEXT. The only exceptions (at this stage) would then be:
- pages - already overwrites
defaultDetailedMetrics - entryPages - would be
{...COMMON_METRICS_BY_CONTEXT, defaultDetailedMetrics: ...}(addsvisits) - exitPages - already overwrites
defaultDetailedMetrics
All devices reports would use the common metrics. Also, sources will use these common metrics.
apata
force-pushed
the
query/migrate-conversions
branch
from
d649bb3 to
5903e77
Compare
apata
force-pushed
the
query/migrate-conversions
branch
from
5903e77 to
6191dd6
Compare
| import { BrowserIcon, OsIcon, ScreenSizeIcon } from './icons' | ||
| import { FilterInfo } from '../../components/drilldown-link' | ||
|
|
||
| type SelectedTab = |
There was a problem hiding this comment.
Nitpick: Let's keep consistent style/naming between all of these index components. E.g.: in pages/index.tsx, there's a Mode type defined as:
type Mode = Extract<BreakdownReportKey, 'pages' | 'entryPages' | 'exitPages'>
With tab keys not always representing BreakdownReportKeys, maybe a nice middle ground would be:
type TabKey =
| BreakdownReportKey.browsers
| BreakdownReportKey.operatingSystems
| BreakdownReportKey.screenSizes
type ReportKey =
| TabKey
| BreakdownReportKey.browserVersions
| BreakdownReportKey.operatingSystemVersions// in pages.index.ts
// Also works as ReportKey
type TabKey =
| BreakdownReportKey.pages
| BreakdownReportKey.entryPages
| BreakdownReportKey.exitPages
| const site = useSiteContext() | ||
|
|
||
| const tabKey = `deviceTab__${site.domain}` | ||
| const [mode, setMode] = useState<SelectedTab>( |
There was a problem hiding this comment.
Nitpick; non-blocking: mode -> tab too to be consistent? Would have to change in pages/index.tsx too then.
apata
force-pushed
the
query/migrate-conversions
branch
from
8492ec9 to
5b2b634
Compare
2 participants
Changes
Refactors Devices block and modals to /query endpoint
Tests
Changelog
Documentation
Dark mode