watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-04 04:37:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Added useFormat hook to format special values.

Browse source
This commit is contained in:
Mike Cao 2023-08-07 15:02:50 -07:00
parent a71cf675ae
commit 2eee9c23c3
9 changed files with 68 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

7
components/metrics/BrowsersTable.js
View file

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

6
components/metrics/CountriesTable.js
View file

@ -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 useMessages from 'hooks/useMessages';
import { useLocale, useMessages, useFormat } from 'hooks';
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>

8
components/metrics/DevicesTable.js
View file

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

17
components/pages/reports/insights/InsightsTable.js
View file

@ -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="visitors" label={formatMessage(labels.visitors)} width="100px" />
<GridColumn name="views" label={formatMessage(labels.views)} width="100px">
{row => row.views.toLocaleString()}
</GridColumn>
<GridColumn name="visitors" label={formatMessage(labels.visitors)} width="100px">
{row => row.views.toLocaleString()}
</GridColumn>
</GridTable>
);
}