Added useFormat hook to format special values.

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 (
-      <FilterLink id="browser" value={browser} label={BROWSERS[browser] || browser}>
+      <FilterLink id="browser" value={browser} label={formatBrowser(browser)}>
         <img
           src={`${basePath}/images/browsers/${browser || 'unknown'}.png`}
           alt={browser}

components/metrics/CountriesTable.js

@@ -1,8 +1,7 @@
 import { useRouter } from 'next/router';
 import FilterLink from 'components/common/FilterLink';
 import useCountryNames from 'hooks/useCountryNames';
-import useLocale from 'hooks/useLocale';
+import { useLocale, useMessages, useFormat } from 'hooks';
-import useMessages from 'hooks/useMessages';
 import MetricsTable from './MetricsTable';
 
 export function CountriesTable({ websiteId, ...props }) {
@@ -10,6 +9,7 @@ export function CountriesTable({ websiteId, ...props }) {
   const countryNames = useCountryNames(locale);
   const { formatMessage, labels } = useMessages();
   const { basePath } = useRouter();
+  const { formatCountry } = useFormat();
 
   function renderLink({ x: code }) {
     return (
@@ -17,7 +17,7 @@ export function CountriesTable({ websiteId, ...props }) {
         id="country"
         className={locale}
         value={countryNames[code] && code}
-        label={countryNames[code]}
+        label={formatCountry(code)}
       >
         <img src={`${basePath}/images/flags/${code?.toLowerCase() || 'xx'}.png`} alt={code} />
       </FilterLink>

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 (
-      <FilterLink
+      <FilterLink id="device" value={labels[device] && device} label={formatDevice(device)}>
-        id="device"
-        value={labels[device] && device}
-        label={formatMessage(labels[device] || labels.unknown)}
-      >
         <img
           src={`${basePath}/images/device/${device?.toLowerCase() || 'unknown'}.png`}
           alt={device}

components/pages/reports/insights/InsightsTable.js

@@ -1,20 +1,29 @@
 import { useContext } from 'react';
 import { GridTable, GridColumn } from 'react-basics';
-import { useMessages } from 'hooks';
+import { useFormat, useMessages } from 'hooks';
 import { ReportContext } from '../Report';
 
 export function InsightsTable() {
   const { report } = useContext(ReportContext);
   const { formatMessage, labels } = useMessages();
   const { groups = [] } = report?.parameters || {};
+  const { formatValue } = useFormat();
 
   return (
     <GridTable data={report?.data || []}>
       {groups.map(({ name, label }) => {
-        return <GridColumn key={name} name={name} label={label} />;
+        return (
+          <GridColumn key={name} name={name} label={label}>
+            {row => formatValue(row[name], name)}
+          </GridColumn>
+        );
       })}
-      <GridColumn name="views" label={formatMessage(labels.views)} width="100px" />
+      <GridColumn name="views" label={formatMessage(labels.views)} width="100px">
-      <GridColumn name="visitors" label={formatMessage(labels.visitors)} width="100px" />
+        {row => row.views.toLocaleString()}
+      </GridColumn>
+      <GridColumn name="visitors" label={formatMessage(labels.visitors)} width="100px">
+        {row => row.views.toLocaleString()}
+      </GridColumn>
     </GridTable>
   );
 }

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';

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;

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 };
 }

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;
 

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,
   );