From 2eee9c23c3dee26cdf967d23d55390e55ae666bc Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Mon, 7 Aug 2023 15:02:50 -0700 Subject: [PATCH] Added useFormat hook to format special values. --- components/metrics/BrowsersTable.js | 7 ++-- components/metrics/CountriesTable.js | 6 +-- components/metrics/DevicesTable.js | 8 ++-- .../pages/reports/insights/InsightsTable.js | 17 ++++++-- hooks/index.js | 1 + hooks/useFormat.js | 39 +++++++++++++++++++ hooks/useMessages.js | 4 +- lib/data.ts | 4 +- queries/analytics/reports/getInsights.ts | 1 + 9 files changed, 68 insertions(+), 19 deletions(-) create mode 100644 hooks/useFormat.js diff --git a/components/metrics/BrowsersTable.js b/components/metrics/BrowsersTable.js index 2920280f..bf4d0aaa 100644 --- a/components/metrics/BrowsersTable.js +++ b/components/metrics/BrowsersTable.js @@ -1,16 +1,17 @@ +import { useRouter } from 'next/router'; import FilterLink from 'components/common/FilterLink'; import MetricsTable from 'components/metrics/MetricsTable'; -import { BROWSERS } from 'lib/constants'; import useMessages from 'hooks/useMessages'; -import { useRouter } from 'next/router'; +import useFormat from 'hooks/useFormat'; export function BrowsersTable({ websiteId, ...props }) { const { formatMessage, labels } = useMessages(); const { basePath } = useRouter(); + const { formatBrowser } = useFormat(); function renderLink({ x: browser }) { return ( - + {browser} {code} diff --git a/components/metrics/DevicesTable.js b/components/metrics/DevicesTable.js index 0b8d5708..98690d0a 100644 --- a/components/metrics/DevicesTable.js +++ b/components/metrics/DevicesTable.js @@ -2,18 +2,16 @@ import MetricsTable from './MetricsTable'; import FilterLink from 'components/common/FilterLink'; import useMessages from 'hooks/useMessages'; import { useRouter } from 'next/router'; +import { useFormat } from 'hooks'; export function DevicesTable({ websiteId, ...props }) { const { formatMessage, labels } = useMessages(); const { basePath } = useRouter(); + const { formatDevice } = useFormat(); function renderLink({ x: device }) { return ( - + {device} {groups.map(({ name, label }) => { - return ; + return ( + + {row => formatValue(row[name], name)} + + ); })} - - + + {row => row.views.toLocaleString()} + + + {row => row.views.toLocaleString()} + ); } diff --git a/hooks/index.js b/hooks/index.js index 6a9b3b35..004260b0 100644 --- a/hooks/index.js +++ b/hooks/index.js @@ -6,6 +6,7 @@ export * from './useDocumentClick'; export * from './useEscapeKey'; export * from './useFilters'; export * from './useForceUpdate'; +export * from './useFormat'; export * from './useLanguageNames'; export * from './useLocale'; export * from './useMessages'; diff --git a/hooks/useFormat.js b/hooks/useFormat.js new file mode 100644 index 00000000..3fd10ec8 --- /dev/null +++ b/hooks/useFormat.js @@ -0,0 +1,39 @@ +import useMessages from './useMessages'; +import { BROWSERS } from 'lib/constants'; +import useLocale from './useLocale'; +import useCountryNames from './useCountryNames'; + +export function useFormat() { + const { formatMessage, labels } = useMessages(); + const { locale } = useLocale(); + const countryNames = useCountryNames(locale); + + const formatBrowser = value => { + return BROWSERS[value] || value; + }; + + const formatCountry = value => { + return countryNames[value] || value; + }; + + const formatDevice = value => { + return formatMessage(labels[value] || labels.unknown); + }; + + const formatValue = (value, type) => { + switch (type) { + case 'browser': + return formatBrowser(value); + case 'country': + return formatCountry(value); + case 'device': + return formatDevice(value); + default: + return value; + } + }; + + return { formatBrowser, formatCountry, formatDevice, formatValue }; +} + +export default useFormat; diff --git a/hooks/useMessages.js b/hooks/useMessages.js index 0719afd8..3c13fab0 100644 --- a/hooks/useMessages.js +++ b/hooks/useMessages.js @@ -4,11 +4,11 @@ import { messages, labels } from 'components/messages'; export function useMessages() { const { formatMessage } = useIntl(); - function getMessage(id) { + const getMessage = id => { const message = Object.values(messages).find(value => value.id === id); return message ? formatMessage(message) : id; - } + }; return { formatMessage, FormattedMessage, messages, labels, getMessage }; } diff --git a/lib/data.ts b/lib/data.ts index c2c53de3..47023bb4 100644 --- a/lib/data.ts +++ b/lib/data.ts @@ -25,7 +25,7 @@ export function flattenJSON( ).keyValues; } -export function getDynamicDataType(value: any): string { +export function getDataType(value: any): string { let type: string = typeof value; if ((type === 'string' && isValid(value)) || isValid(parseISO(value))) { @@ -36,7 +36,7 @@ export function getDynamicDataType(value: any): string { } function createKey(key, value, acc: { keyValues: any[]; parentKey: string }) { - const type = getDynamicDataType(value); + const type = getDataType(value); let dynamicDataType = null; diff --git a/queries/analytics/reports/getInsights.ts b/queries/analytics/reports/getInsights.ts index 0f778555..b7c8777d 100644 --- a/queries/analytics/reports/getInsights.ts +++ b/queries/analytics/reports/getInsights.ts @@ -41,6 +41,7 @@ async function relationalQuery( and website_event.event_type = {{eventType}} ${filterQuery} group by 1 + limit 500 `, params, );