diff --git a/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx b/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
index ef0d2b90..1e14c4c5 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
@@ -7,6 +7,7 @@ import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { ReactNode } from 'react';
import { Button, Icon, Text } from 'react-basics';
+import Lightning from 'assets/lightning.svg';
import styles from './WebsiteHeader.module.css';
export function WebsiteHeader({
@@ -52,7 +53,7 @@ export function WebsiteHeader({
},
{
label: formatMessage(labels.events),
- icon: ,
+ icon: ,
path: '/events',
},
];
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteTableView.tsx b/src/app/(main)/websites/[websiteId]/WebsiteTableView.tsx
index e530f2ba..2782cac6 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteTableView.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteTableView.tsx
@@ -1,4 +1,3 @@
-import { useState } from 'react';
import { Grid, GridRow } from 'components/layout/Grid';
import PagesTable from 'components/metrics/PagesTable';
import ReferrersTable from 'components/metrics/ReferrersTable';
@@ -9,13 +8,15 @@ import WorldMap from 'components/metrics/WorldMap';
import CountriesTable from 'components/metrics/CountriesTable';
import EventsTable from 'components/metrics/EventsTable';
import EventsChart from 'components/metrics/EventsChart';
+import { usePathname } from 'next/navigation';
export default function WebsiteTableView({ websiteId }: { websiteId: string }) {
- const [countryData, setCountryData] = useState();
+ const pathname = usePathname();
const tableProps = {
websiteId,
limit: 10,
};
+ const isSharePage = pathname.includes('/share/');
return (
@@ -29,13 +30,15 @@ export default function WebsiteTableView({ websiteId }: { websiteId: string }) {
-
-
-
-
-
-
+
+
+ {isSharePage && (
+
+
+
+
+ )}
);
}
diff --git a/src/assets/lightning.svg b/src/assets/lightning.svg
new file mode 100644
index 00000000..14cb95d9
--- /dev/null
+++ b/src/assets/lightning.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/hooks/queries/useWebsiteMetrics.ts b/src/components/hooks/queries/useWebsiteMetrics.ts
index 088b31ac..184fd4d4 100644
--- a/src/components/hooks/queries/useWebsiteMetrics.ts
+++ b/src/components/hooks/queries/useWebsiteMetrics.ts
@@ -4,7 +4,7 @@ import { useFilterParams } from '../useFilterParams';
export function useWebsiteMetrics(
websiteId: string,
- queryParams: { type: string; limit: number; search: string; startAt?: number; endAt?: number },
+ queryParams: { type: string; limit?: number; search?: string; startAt?: number; endAt?: number },
options?: Omit void }, 'queryKey' | 'queryFn'>,
) {
const { get, useQuery } = useApi();
diff --git a/src/components/metrics/CountriesTable.tsx b/src/components/metrics/CountriesTable.tsx
index 87a7838e..592ade8a 100644
--- a/src/components/metrics/CountriesTable.tsx
+++ b/src/components/metrics/CountriesTable.tsx
@@ -4,21 +4,12 @@ import { useLocale, useMessages, useFormat } from 'components/hooks';
import MetricsTable, { MetricsTableProps } from './MetricsTable';
import TypeIcon from 'components/common/TypeIcon';
-export function CountriesTable({
- onDataLoad,
- ...props
-}: {
- onDataLoad: (data: any) => void;
-} & MetricsTableProps) {
+export function CountriesTable({ ...props }: MetricsTableProps) {
const { locale } = useLocale();
const { countryNames } = useCountryNames(locale);
const { formatMessage, labels } = useMessages();
const { formatCountry } = useFormat();
- const handleDataLoad = (data: any) => {
- onDataLoad?.(data);
- };
-
const renderLink = ({ x: code }) => {
return (
);
}
diff --git a/src/components/metrics/WorldMap.tsx b/src/components/metrics/WorldMap.tsx
index 54483270..5cebd428 100644
--- a/src/components/metrics/WorldMap.tsx
+++ b/src/components/metrics/WorldMap.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
import { colord } from 'colord';
import HoverTooltip from 'components/common/HoverTooltip';
import { ISO_COUNTRIES, MAP_FILE } from 'lib/constants';
-import { useTheme } from 'components/hooks';
+import { useDateRange, useTheme, useWebsiteMetrics } from 'components/hooks';
import { useCountryNames } from 'components/hooks';
import { useLocale } from 'components/hooks';
import { useMessages } from 'components/hooks';
@@ -12,16 +12,35 @@ import { formatLongNumber } from 'lib/format';
import { percentFilter } from 'lib/filters';
import styles from './WorldMap.module.css';
-export function WorldMap({ data = [], className }: { data?: any[]; className?: string }) {
+export function WorldMap({
+ websiteId,
+ data,
+ className,
+}: {
+ websiteId?: string;
+ data?: any[];
+ className?: string;
+}) {
const [tooltip, setTooltipPopup] = useState();
const { theme, colors } = useTheme();
const { locale } = useLocale();
const { formatMessage, labels } = useMessages();
const { countryNames } = useCountryNames(locale);
const visitorsLabel = formatMessage(labels.visitors).toLocaleLowerCase(locale);
- const metrics = useMemo(() => (data ? percentFilter(data) : []), [data]);
+ const {
+ dateRange: { startDate, endDate },
+ } = useDateRange(websiteId);
+ const { data: mapData } = useWebsiteMetrics(websiteId, {
+ type: 'country',
+ startAt: +startDate,
+ endAt: +endDate,
+ });
+ const metrics = useMemo(
+ () => (data || mapData ? percentFilter((data || mapData) as any[]) : []),
+ [data, mapData],
+ );
- function getFillColor(code: string) {
+ const getFillColor = (code: string) => {
if (code === 'AQ') return;
const country = metrics?.find(({ x }) => x === code);
@@ -32,19 +51,19 @@ export function WorldMap({ data = [], className }: { data?: any[]; className?: s
return colord(colors.map.baseColor)
[theme === 'light' ? 'lighten' : 'darken'](0.4 * (1.0 - country.z / 100))
.toHex();
- }
+ };
- function getOpacity(code) {
+ const getOpacity = (code: string) => {
return code === 'AQ' ? 0 : 1;
- }
+ };
- function handleHover(code) {
+ const handleHover = (code: string) => {
if (code === 'AQ') return;
const country = metrics?.find(({ x }) => x === code);
setTooltipPopup(
`${countryNames[code]}: ${formatLongNumber(country?.y || 0)} ${visitorsLabel}` as any,
);
- }
+ };
return (