+
- {({ width, height }) => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- } />
+ } />
-
-
-
-
-
-
- )}
+
+
+
+
+
+
);
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/retention/users-retention-series/chart.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/retention/users-retention-series/chart.tsx
index be03e574..fe5fae6f 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/retention/users-retention-series/chart.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/retention/users-retention-series/chart.tsx
@@ -1,15 +1,17 @@
'use client';
-import { getYAxisWidth } from '@/components/report/chart/chart-utils';
-import { ResponsiveContainer } from '@/components/report/chart/ResponsiveContainer';
+import {
+ useXAxisProps,
+ useYAxisProps,
+} from '@/components/report-chart/common/axis';
import { useFormatDateInterval } from '@/hooks/useFormatDateInterval';
-import { useNumber } from '@/hooks/useNumerFormatter';
import { formatDate } from '@/utils/date';
import { getChartColor } from '@/utils/theme';
import {
Area,
AreaChart,
Tooltip as RechartTooltip,
+ ResponsiveContainer,
XAxis,
YAxis,
} from 'recharts';
@@ -54,69 +56,61 @@ function Tooltip({ payload }: any) {
}
const Chart = ({ data }: Props) => {
- const max = Math.max(...data.map((d) => d.retention));
- const number = useNumber();
+ const xAxisProps = useXAxisProps();
+ const yAxisProps = useYAxisProps({
+ data: data.map((d) => d.retention),
+ });
return (
-
+
- {({ width, height }) => (
-
-
-
-
-
-
-
+
+
+
+
+
+
+
- } />
+ } />
-
- formatDate(new Date(m))}
- tickLine={false}
- allowDuplicatedCategory={false}
- label={{
- value: 'DATE',
- position: 'insideBottom',
- offset: 0,
- fontSize: 10,
- }}
- />
-
-
- )}
+
+ formatDate(new Date(m))}
+ allowDuplicatedCategory={false}
+ label={{
+ value: 'DATE',
+ position: 'insideBottom',
+ offset: 0,
+ fontSize: 10,
+ }}
+ />
+
+
);
diff --git a/apps/dashboard/src/components/events/event-list-item.tsx b/apps/dashboard/src/components/events/event-list-item.tsx
index 6ed0db7c..740d2189 100644
--- a/apps/dashboard/src/components/events/event-list-item.tsx
+++ b/apps/dashboard/src/components/events/event-list-item.tsx
@@ -1,6 +1,5 @@
'use client';
-import { SerieIcon } from '@/components/report/chart/SerieIcon';
import { Tooltiper } from '@/components/ui/tooltip';
import { useAppParams } from '@/hooks/useAppParams';
import { useNumber } from '@/hooks/useNumerFormatter';
@@ -11,6 +10,7 @@ import Link from 'next/link';
import type { IServiceEvent, IServiceEventMinimal } from '@openpanel/db';
+import { SerieIcon } from '../report-chart/common/serie-icon';
import { EventIcon } from './event-icon';
type EventListItemProps = IServiceEventMinimal | IServiceEvent;
diff --git a/apps/dashboard/src/components/events/list-properties-icon.tsx b/apps/dashboard/src/components/events/list-properties-icon.tsx
index b89654a8..b9e0dce9 100644
--- a/apps/dashboard/src/components/events/list-properties-icon.tsx
+++ b/apps/dashboard/src/components/events/list-properties-icon.tsx
@@ -1,10 +1,5 @@
-import { SerieIcon } from '../report/chart/SerieIcon';
-import {
- Tooltip,
- TooltipContent,
- Tooltiper,
- TooltipTrigger,
-} from '../ui/tooltip';
+import { SerieIcon } from '../report-chart/common/serie-icon';
+import { Tooltiper } from '../ui/tooltip';
interface Props {
country?: string;
diff --git a/apps/dashboard/src/components/events/table/columns.tsx b/apps/dashboard/src/components/events/table/columns.tsx
index b32ace32..56a9a3f5 100644
--- a/apps/dashboard/src/components/events/table/columns.tsx
+++ b/apps/dashboard/src/components/events/table/columns.tsx
@@ -1,6 +1,6 @@
import { EventIcon } from '@/components/events/event-icon';
import { ProjectLink } from '@/components/links';
-import { SerieIcon } from '@/components/report/chart/SerieIcon';
+import { SerieIcon } from '@/components/report-chart/common/serie-icon';
import { TooltipComplete } from '@/components/tooltip-complete';
import { useNumber } from '@/hooks/useNumerFormatter';
import { pushModal } from '@/modals';
diff --git a/apps/dashboard/src/components/overview/filters/overview-filters-drawer-content.tsx b/apps/dashboard/src/components/overview/filters/overview-filters-drawer-content.tsx
index 348c68ef..cdcbf9e2 100644
--- a/apps/dashboard/src/components/overview/filters/overview-filters-drawer-content.tsx
+++ b/apps/dashboard/src/components/overview/filters/overview-filters-drawer-content.tsx
@@ -12,7 +12,7 @@ import {
import { useProfileProperties } from '@/hooks/useProfileProperties';
import { useProfileValues } from '@/hooks/useProfileValues';
import { usePropertyValues } from '@/hooks/usePropertyValues';
-import { GlobeIcon, XIcon } from 'lucide-react';
+import { XIcon } from 'lucide-react';
import type { Options as NuqsOptions } from 'nuqs';
import type {
diff --git a/apps/dashboard/src/components/overview/overview-live-histogram.tsx b/apps/dashboard/src/components/overview/overview-live-histogram.tsx
index 36b57e03..ba0ced38 100644
--- a/apps/dashboard/src/components/overview/overview-live-histogram.tsx
+++ b/apps/dashboard/src/components/overview/overview-live-histogram.tsx
@@ -81,7 +81,7 @@ export function OverviewLiveHistogram({
{staticArray.map((percent, i) => (
))}
@@ -101,7 +101,7 @@ export function OverviewLiveHistogram({
{
setMetric(index);
}}
>
-
+
))}
-
diff --git a/apps/dashboard/src/components/overview/overview-top-devices.tsx b/apps/dashboard/src/components/overview/overview-top-devices.tsx
index 5a998af6..6dfc63e9 100644
--- a/apps/dashboard/src/components/overview/overview-top-devices.tsx
+++ b/apps/dashboard/src/components/overview/overview-top-devices.tsx
@@ -7,7 +7,7 @@ import { cn } from '@/utils/cn';
import { NOT_SET_VALUE } from '@openpanel/constants';
import type { IChartType } from '@openpanel/validation';
-import { LazyChart } from '../report/chart/LazyChart';
+import { ReportChart } from '../report-chart';
import { Widget, WidgetBody } from '../widget';
import { OverviewChartToggle } from './overview-chart-toggle';
import OverviewDetailsButton from './overview-details-button';
@@ -31,238 +31,258 @@ export default function OverviewTopDevices({
title: 'Top devices',
btn: 'Devices',
chart: {
- limit: 10,
- projectId,
- startDate,
- endDate,
- events: [
- {
- segment: 'user',
- filters,
- id: 'A',
- name: isPageFilter ? 'screen_view' : 'session_start',
- },
- ],
- breakdowns: [
- {
- id: 'A',
- name: 'device',
- },
- ],
- chartType,
- lineType: 'monotone',
- interval: interval,
- name: 'Top devices',
- range: range,
- previous: previous,
- metric: 'sum',
+ report: {
+ limit: 10,
+ projectId,
+ startDate,
+ endDate,
+ events: [
+ {
+ segment: 'user',
+ filters,
+ id: 'A',
+ name: isPageFilter ? 'screen_view' : 'session_start',
+ },
+ ],
+ breakdowns: [
+ {
+ id: 'A',
+ name: 'device',
+ },
+ ],
+ chartType,
+ lineType: 'monotone',
+ interval: interval,
+ name: 'Top devices',
+ range: range,
+ previous: previous,
+ metric: 'sum',
+ },
},
},
browser: {
title: 'Top browser',
btn: 'Browser',
chart: {
- limit: 10,
- projectId,
- startDate,
- endDate,
- events: [
- {
- segment: 'user',
- filters,
- id: 'A',
- name: isPageFilter ? 'screen_view' : 'session_start',
- },
- ],
- breakdowns: [
- {
- id: 'A',
- name: 'browser',
- },
- ],
- chartType,
- lineType: 'monotone',
- interval: interval,
- name: 'Top browser',
- range: range,
- previous: previous,
- metric: 'sum',
+ report: {
+ limit: 10,
+ projectId,
+ startDate,
+ endDate,
+ events: [
+ {
+ segment: 'user',
+ filters,
+ id: 'A',
+ name: isPageFilter ? 'screen_view' : 'session_start',
+ },
+ ],
+ breakdowns: [
+ {
+ id: 'A',
+ name: 'browser',
+ },
+ ],
+ chartType,
+ lineType: 'monotone',
+ interval: interval,
+ name: 'Top browser',
+ range: range,
+ previous: previous,
+ metric: 'sum',
+ },
},
},
browser_version: {
title: 'Top Browser Version',
btn: 'Browser Version',
chart: {
- renderSerieName(name) {
- return name[1] || NOT_SET_VALUE;
+ options: {
+ renderSerieName(name) {
+ return name[1] || NOT_SET_VALUE;
+ },
+ },
+ report: {
+ limit: 10,
+ projectId,
+ startDate,
+ endDate,
+ events: [
+ {
+ segment: 'user',
+ filters,
+ id: 'A',
+ name: isPageFilter ? 'screen_view' : 'session_start',
+ },
+ ],
+ breakdowns: [
+ {
+ id: 'A',
+ name: 'browser',
+ },
+ {
+ id: 'B',
+ name: 'browser_version',
+ },
+ ],
+ chartType,
+ lineType: 'monotone',
+ interval: interval,
+ name: 'Top Browser Version',
+ range: range,
+ previous: previous,
+ metric: 'sum',
},
- limit: 10,
- projectId,
- startDate,
- endDate,
- events: [
- {
- segment: 'user',
- filters,
- id: 'A',
- name: isPageFilter ? 'screen_view' : 'session_start',
- },
- ],
- breakdowns: [
- {
- id: 'A',
- name: 'browser',
- },
- {
- id: 'B',
- name: 'browser_version',
- },
- ],
- chartType,
- lineType: 'monotone',
- interval: interval,
- name: 'Top Browser Version',
- range: range,
- previous: previous,
- metric: 'sum',
},
},
os: {
title: 'Top OS',
btn: 'OS',
chart: {
- limit: 10,
- projectId,
- startDate,
- endDate,
- events: [
- {
- segment: 'user',
- filters,
- id: 'A',
- name: isPageFilter ? 'screen_view' : 'session_start',
- },
- ],
- breakdowns: [
- {
- id: 'A',
- name: 'os',
- },
- ],
- chartType,
- lineType: 'monotone',
- interval: interval,
- name: 'Top OS',
- range: range,
- previous: previous,
- metric: 'sum',
+ report: {
+ limit: 10,
+ projectId,
+ startDate,
+ endDate,
+ events: [
+ {
+ segment: 'user',
+ filters,
+ id: 'A',
+ name: isPageFilter ? 'screen_view' : 'session_start',
+ },
+ ],
+ breakdowns: [
+ {
+ id: 'A',
+ name: 'os',
+ },
+ ],
+ chartType,
+ lineType: 'monotone',
+ interval: interval,
+ name: 'Top OS',
+ range: range,
+ previous: previous,
+ metric: 'sum',
+ },
},
},
os_version: {
title: 'Top OS version',
btn: 'OS Version',
chart: {
- renderSerieName(name) {
- return name[1] || NOT_SET_VALUE;
+ options: {
+ renderSerieName(name) {
+ return name[1] || NOT_SET_VALUE;
+ },
+ },
+ report: {
+ limit: 10,
+ projectId,
+ startDate,
+ endDate,
+ events: [
+ {
+ segment: 'user',
+ filters,
+ id: 'A',
+ name: isPageFilter ? 'screen_view' : 'session_start',
+ },
+ ],
+ breakdowns: [
+ {
+ id: 'A',
+ name: 'os',
+ },
+ {
+ id: 'B',
+ name: 'os_version',
+ },
+ ],
+ chartType,
+ lineType: 'monotone',
+ interval: interval,
+ name: 'Top OS version',
+ range: range,
+ previous: previous,
+ metric: 'sum',
},
- limit: 10,
- projectId,
- startDate,
- endDate,
- events: [
- {
- segment: 'user',
- filters,
- id: 'A',
- name: isPageFilter ? 'screen_view' : 'session_start',
- },
- ],
- breakdowns: [
- {
- id: 'A',
- name: 'os',
- },
- {
- id: 'B',
- name: 'os_version',
- },
- ],
- chartType,
- lineType: 'monotone',
- interval: interval,
- name: 'Top OS version',
- range: range,
- previous: previous,
- metric: 'sum',
},
},
brands: {
title: 'Top Brands',
btn: 'Brands',
chart: {
- limit: 10,
- projectId,
- startDate,
- endDate,
- events: [
- {
- segment: 'user',
- filters,
- id: 'A',
- name: isPageFilter ? 'screen_view' : 'session_start',
- },
- ],
- breakdowns: [
- {
- id: 'A',
- name: 'brand',
- },
- ],
- chartType,
- lineType: 'monotone',
- interval: interval,
- name: 'Top Brands',
- range: range,
- previous: previous,
- metric: 'sum',
+ report: {
+ limit: 10,
+ projectId,
+ startDate,
+ endDate,
+ events: [
+ {
+ segment: 'user',
+ filters,
+ id: 'A',
+ name: isPageFilter ? 'screen_view' : 'session_start',
+ },
+ ],
+ breakdowns: [
+ {
+ id: 'A',
+ name: 'brand',
+ },
+ ],
+ chartType,
+ lineType: 'monotone',
+ interval: interval,
+ name: 'Top Brands',
+ range: range,
+ previous: previous,
+ metric: 'sum',
+ },
},
},
models: {
title: 'Top Models',
btn: 'Models',
chart: {
- renderSerieName(name) {
- return name[1] || NOT_SET_VALUE;
+ options: {
+ renderSerieName(name) {
+ return name[1] || NOT_SET_VALUE;
+ },
+ },
+ report: {
+ limit: 10,
+ projectId,
+ startDate,
+ endDate,
+ events: [
+ {
+ segment: 'user',
+ filters,
+ id: 'A',
+ name: isPageFilter ? 'screen_view' : 'session_start',
+ },
+ ],
+ breakdowns: [
+ {
+ id: 'A',
+ name: 'brand',
+ },
+ {
+ id: 'B',
+ name: 'model',
+ },
+ ],
+ chartType,
+ lineType: 'monotone',
+ interval: interval,
+ name: 'Top Models',
+ range: range,
+ previous: previous,
+ metric: 'sum',
},
- limit: 10,
- projectId,
- startDate,
- endDate,
- events: [
- {
- segment: 'user',
- filters,
- id: 'A',
- name: isPageFilter ? 'screen_view' : 'session_start',
- },
- ],
- breakdowns: [
- {
- id: 'A',
- name: 'brand',
- },
- {
- id: 'B',
- name: 'model',
- },
- ],
- chartType,
- lineType: 'monotone',
- interval: interval,
- name: 'Top Models',
- range: range,
- previous: previous,
- metric: 'sum',
},
},
});
@@ -285,33 +305,38 @@ export default function OverviewTopDevices({
- {
- switch (widget.key) {
- case 'devices':
- setFilter('device', item.names[0]);
- break;
- case 'browser':
- setFilter('browser', item.names[0]);
- break;
- case 'browser_version':
- setFilter('browser_version', item.names[1]);
- break;
- case 'os':
- setFilter('os', item.names[0]);
- break;
- case 'os_version':
- setFilter('os_version', item.names[1]);
- break;
- }
+ {
+ switch (widget.key) {
+ case 'devices':
+ setFilter('device', item.names[0]);
+ break;
+ case 'browser':
+ setFilter('browser', item.names[0]);
+ break;
+ case 'browser_version':
+ setFilter('browser_version', item.names[1]);
+ break;
+ case 'os':
+ setFilter('os', item.names[0]);
+ break;
+ case 'os_version':
+ setFilter('os_version', item.names[1]);
+ break;
+ }
+ },
+ }}
+ report={{
+ ...widget.chart.report,
+ previous: false,
}}
/>
-
+
diff --git a/apps/dashboard/src/components/overview/overview-top-events/overview-top-events.tsx b/apps/dashboard/src/components/overview/overview-top-events/overview-top-events.tsx
index ac6ba4ae..642cd56d 100644
--- a/apps/dashboard/src/components/overview/overview-top-events/overview-top-events.tsx
+++ b/apps/dashboard/src/components/overview/overview-top-events/overview-top-events.tsx
@@ -1,7 +1,7 @@
'use client';
import { useState } from 'react';
-import { LazyChart } from '@/components/report/chart/LazyChart';
+import { ReportChart } from '@/components/report-chart';
import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
import { cn } from '@/utils/cn';
@@ -31,70 +31,74 @@ export default function OverviewTopEvents({
title: 'Top events',
btn: 'Your',
chart: {
- limit: 10,
- projectId,
- startDate,
- endDate,
- events: [
- {
- segment: 'event',
- filters: [
- ...filters,
- {
- id: 'ex_session',
- name: 'name',
- operator: 'isNot',
- value: ['session_start', 'session_end', 'screen_view'],
- },
- ],
- id: 'A',
- name: '*',
- },
- ],
- breakdowns: [
- {
- id: 'A',
- name: 'name',
- },
- ],
- chartType,
- lineType: 'monotone',
- interval: interval,
- name: 'Your top events',
- range: range,
- previous: previous,
- metric: 'sum',
+ report: {
+ limit: 10,
+ projectId,
+ startDate,
+ endDate,
+ events: [
+ {
+ segment: 'event',
+ filters: [
+ ...filters,
+ {
+ id: 'ex_session',
+ name: 'name',
+ operator: 'isNot',
+ value: ['session_start', 'session_end', 'screen_view'],
+ },
+ ],
+ id: 'A',
+ name: '*',
+ },
+ ],
+ breakdowns: [
+ {
+ id: 'A',
+ name: 'name',
+ },
+ ],
+ chartType,
+ lineType: 'monotone',
+ interval: interval,
+ name: 'Your top events',
+ range: range,
+ previous: previous,
+ metric: 'sum',
+ },
},
},
all: {
title: 'Top events',
btn: 'All',
chart: {
- limit: 10,
- projectId,
- startDate,
- endDate,
- events: [
- {
- segment: 'event',
- filters: [...filters],
- id: 'A',
- name: '*',
- },
- ],
- breakdowns: [
- {
- id: 'A',
- name: 'name',
- },
- ],
- chartType,
- lineType: 'monotone',
- interval: interval,
- name: 'All top events',
- range: range,
- previous: previous,
- metric: 'sum',
+ report: {
+ limit: 10,
+ projectId,
+ startDate,
+ endDate,
+ events: [
+ {
+ segment: 'event',
+ filters: [...filters],
+ id: 'A',
+ name: '*',
+ },
+ ],
+ breakdowns: [
+ {
+ id: 'A',
+ name: 'name',
+ },
+ ],
+ chartType,
+ lineType: 'monotone',
+ interval: interval,
+ name: 'All top events',
+ range: range,
+ previous: previous,
+ metric: 'sum',
+ },
},
},
conversions: {
@@ -102,39 +106,41 @@ export default function OverviewTopEvents({
btn: 'Conversions',
hide: conversions.length === 0,
chart: {
- limit: 10,
- projectId,
- startDate,
- endDate,
- events: [
- {
- segment: 'event',
- filters: [
- ...filters,
- {
- id: 'conversion',
- name: 'name',
- operator: 'is',
- value: conversions,
- },
- ],
- id: 'A',
- name: '*',
- },
- ],
- breakdowns: [
- {
- id: 'A',
- name: 'name',
- },
- ],
- chartType,
- lineType: 'monotone',
- interval: interval,
- name: 'Conversions',
- range: range,
- previous: previous,
- metric: 'sum',
+ report: {
+ limit: 10,
+ projectId,
+ startDate,
+ endDate,
+ events: [
+ {
+ segment: 'event',
+ filters: [
+ ...filters,
+ {
+ id: 'conversion',
+ name: 'name',
+ operator: 'is',
+ value: conversions,
+ },
+ ],
+ id: 'A',
+ name: '*',
+ },
+ ],
+ breakdowns: [
+ {
+ id: 'A',
+ name: 'name',
+ },
+ ],
+ chartType,
+ lineType: 'monotone',
+ interval: interval,
+ name: 'Conversions',
+ range: range,
+ previous: previous,
+ metric: 'sum',
+ },
},
},
});
@@ -159,10 +165,16 @@ export default function OverviewTopEvents({
-
+
-
+
diff --git a/apps/dashboard/src/components/overview/overview-top-geo.tsx b/apps/dashboard/src/components/overview/overview-top-geo.tsx
index 375da2a7..84e1a566 100644
--- a/apps/dashboard/src/components/overview/overview-top-geo.tsx
+++ b/apps/dashboard/src/components/overview/overview-top-geo.tsx
@@ -1,7 +1,6 @@
'use client';
import { useState } from 'react';
-import { ChartRoot } from '@/components/report/chart';
import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
import { getCountry } from '@/translations/countries';
import { cn } from '@/utils/cn';
@@ -9,7 +8,7 @@ import { cn } from '@/utils/cn';
import { NOT_SET_VALUE } from '@openpanel/constants';
import type { IChartType } from '@openpanel/validation';
-import { LazyChart } from '../report/chart/LazyChart';
+import { ReportChart } from '../report-chart';
import { Widget, WidgetBody } from '../widget';
import { OverviewChartToggle } from './overview-chart-toggle';
import OverviewDetailsButton from './overview-details-button';
@@ -31,110 +30,122 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
title: 'Top countries',
btn: 'Countries',
chart: {
- renderSerieName(name) {
- return getCountry(name[0]) || NOT_SET_VALUE;
+ options: {
+ renderSerieName(name) {
+ return getCountry(name[0]) || NOT_SET_VALUE;
+ },
+ },
+ report: {
+ limit: 10,
+ projectId,
+ startDate,
+ endDate,
+ events: [
+ {
+ segment: 'event',
+ filters,
+ id: 'A',
+ name: isPageFilter ? 'screen_view' : 'session_start',
+ },
+ ],
+ breakdowns: [
+ {
+ id: 'A',
+ name: 'country',
+ },
+ ],
+ chartType,
+ lineType: 'monotone',
+ interval: interval,
+ name: 'Top countries',
+ range: range,
+ previous: previous,
+ metric: 'sum',
},
- limit: 10,
- projectId,
- startDate,
- endDate,
- events: [
- {
- segment: 'event',
- filters,
- id: 'A',
- name: isPageFilter ? 'screen_view' : 'session_start',
- },
- ],
- breakdowns: [
- {
- id: 'A',
- name: 'country',
- },
- ],
- chartType,
- lineType: 'monotone',
- interval: interval,
- name: 'Top countries',
- range: range,
- previous: previous,
- metric: 'sum',
},
},
regions: {
title: 'Top regions',
btn: 'Regions',
chart: {
- renderSerieName(name) {
- return name[1] || NOT_SET_VALUE;
+ options: {
+ renderSerieName(name) {
+ return name[1] || NOT_SET_VALUE;
+ },
+ },
+ report: {
+ limit: 10,
+ projectId,
+ startDate,
+ endDate,
+ events: [
+ {
+ segment: 'event',
+ filters,
+ id: 'A',
+ name: isPageFilter ? 'screen_view' : 'session_start',
+ },
+ ],
+ breakdowns: [
+ {
+ id: 'A',
+ name: 'country',
+ },
+ {
+ id: 'B',
+ name: 'region',
+ },
+ ],
+ chartType,
+ lineType: 'monotone',
+ interval: interval,
+ name: 'Top regions',
+ range: range,
+ previous: previous,
+ metric: 'sum',
},
- limit: 10,
- projectId,
- startDate,
- endDate,
- events: [
- {
- segment: 'event',
- filters,
- id: 'A',
- name: isPageFilter ? 'screen_view' : 'session_start',
- },
- ],
- breakdowns: [
- {
- id: 'A',
- name: 'country',
- },
- {
- id: 'B',
- name: 'region',
- },
- ],
- chartType,
- lineType: 'monotone',
- interval: interval,
- name: 'Top regions',
- range: range,
- previous: previous,
- metric: 'sum',
},
},
cities: {
title: 'Top cities',
btn: 'Cities',
chart: {
- renderSerieName(name) {
- return name[1] || NOT_SET_VALUE;
+ options: {
+ renderSerieName(name) {
+ return name[1] || NOT_SET_VALUE;
+ },
+ },
+ report: {
+ limit: 10,
+ projectId,
+ startDate,
+ endDate,
+ events: [
+ {
+ segment: 'event',
+ filters,
+ id: 'A',
+ name: isPageFilter ? 'screen_view' : 'session_start',
+ },
+ ],
+ breakdowns: [
+ {
+ id: 'A',
+ name: 'country',
+ },
+ {
+ id: 'B',
+ name: 'city',
+ },
+ ],
+ chartType,
+ lineType: 'monotone',
+ interval: interval,
+ name: 'Top cities',
+ range: range,
+ previous: previous,
+ metric: 'sum',
},
- limit: 10,
- projectId,
- startDate,
- endDate,
- events: [
- {
- segment: 'event',
- filters,
- id: 'A',
- name: isPageFilter ? 'screen_view' : 'session_start',
- },
- ],
- breakdowns: [
- {
- id: 'A',
- name: 'country',
- },
- {
- id: 'B',
- name: 'city',
- },
- ],
- chartType,
- lineType: 'monotone',
- interval: interval,
- name: 'Top cities',
- range: range,
- previous: previous,
- metric: 'sum',
},
},
});
@@ -157,29 +168,34 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
- {
- switch (widget.key) {
- case 'countries':
- setWidget('regions');
- setFilter('country', item.names[0]);
- break;
- case 'regions':
- setWidget('cities');
- setFilter('region', item.names[1]);
- break;
- case 'cities':
- setFilter('city', item.names[1]);
- break;
- }
+ {
+ switch (widget.key) {
+ case 'countries':
+ setWidget('regions');
+ setFilter('country', item.names[0]);
+ break;
+ case 'regions':
+ setWidget('cities');
+ setFilter('region', item.names[1]);
+ break;
+ case 'cities':
+ setFilter('city', item.names[1]);
+ break;
+ }
+ },
+ ...widget.chart.options,
+ }}
+ report={{
+ ...widget.chart.report,
+ previous: false,
}}
/>
-
+
@@ -188,9 +204,9 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
Map
- {
if (domain) {
+ if (names[0] === NOT_SET_VALUE) {
+ return names[1];
+ }
+
return names.join('');
}
return (
@@ -44,108 +48,120 @@ export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
title: 'Top pages',
btn: 'Top pages',
chart: {
- renderSerieName,
- limit: 10,
- projectId,
- startDate,
- endDate,
- events: [
- {
- segment: 'event',
- filters,
- id: 'A',
- name: 'screen_view',
- },
- ],
- breakdowns: [
- {
- id: 'A',
- name: 'origin',
- },
- {
- id: 'B',
- name: 'path',
- },
- ],
- chartType,
- lineType: 'monotone',
- interval,
- name: 'Top pages',
- range,
- previous,
- metric: 'sum',
+ options: {
+ renderSerieName,
+ },
+ report: {
+ limit: 10,
+ projectId,
+ startDate,
+ endDate,
+ events: [
+ {
+ segment: 'event',
+ filters,
+ id: 'A',
+ name: 'screen_view',
+ },
+ ],
+ breakdowns: [
+ {
+ id: 'A',
+ name: 'origin',
+ },
+ {
+ id: 'B',
+ name: 'path',
+ },
+ ],
+ chartType,
+ lineType: 'monotone',
+ interval,
+ name: 'Top pages',
+ range,
+ previous,
+ metric: 'sum',
+ },
},
},
entries: {
title: 'Entry Pages',
btn: 'Entries',
chart: {
- renderSerieName,
- limit: 10,
- projectId,
- startDate,
- endDate,
- events: [
- {
- segment: 'event',
- filters,
- id: 'A',
- name: 'session_start',
- },
- ],
- breakdowns: [
- {
- id: 'A',
- name: 'origin',
- },
- {
- id: 'B',
- name: 'path',
- },
- ],
- chartType,
- lineType: 'monotone',
- interval,
- name: 'Entry Pages',
- range,
- previous,
- metric: 'sum',
+ options: {
+ renderSerieName,
+ },
+ report: {
+ limit: 10,
+ projectId,
+ startDate,
+ endDate,
+ events: [
+ {
+ segment: 'event',
+ filters,
+ id: 'A',
+ name: 'session_start',
+ },
+ ],
+ breakdowns: [
+ {
+ id: 'A',
+ name: 'origin',
+ },
+ {
+ id: 'B',
+ name: 'path',
+ },
+ ],
+ chartType,
+ lineType: 'monotone',
+ interval,
+ name: 'Entry Pages',
+ range,
+ previous,
+ metric: 'sum',
+ },
},
},
exits: {
title: 'Exit Pages',
btn: 'Exits',
chart: {
- renderSerieName,
- limit: 10,
- projectId,
- startDate,
- endDate,
- events: [
- {
- segment: 'event',
- filters,
- id: 'A',
- name: 'session_end',
- },
- ],
- breakdowns: [
- {
- id: 'A',
- name: 'origin',
- },
- {
- id: 'B',
- name: 'path',
- },
- ],
- chartType,
- lineType: 'monotone',
- interval,
- name: 'Exit Pages',
- range,
- previous,
- metric: 'sum',
+ options: {
+ renderSerieName,
+ },
+ report: {
+ limit: 10,
+ projectId,
+ startDate,
+ endDate,
+ events: [
+ {
+ segment: 'event',
+ filters,
+ id: 'A',
+ name: 'session_end',
+ },
+ ],
+ breakdowns: [
+ {
+ id: 'A',
+ name: 'origin',
+ },
+ {
+ id: 'B',
+ name: 'path',
+ },
+ ],
+ chartType,
+ lineType: 'monotone',
+ interval,
+ name: 'Exit Pages',
+ range,
+ previous,
+ metric: 'sum',
+ },
},
},
bot: {
@@ -177,32 +193,37 @@ export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
{widget.key === 'bot' ? (
) : (
- [
- {
- title: 'Visit page',
- icon: ExternalLinkIcon,
- onClick: () => {
- window.open(serie.names.join(''), '_blank');
+ [
+ {
+ title: 'Visit page',
+ icon: ExternalLinkIcon,
+ onClick: () => {
+ window.open(serie.names.join(''), '_blank');
+ },
},
- },
- {
- title: 'Set filter',
- icon: FilterIcon,
- onClick: () => {
- setFilter('path', serie.names[1]);
+ {
+ title: 'Set filter',
+ icon: FilterIcon,
+ onClick: () => {
+ setFilter('path', serie.names[1]);
+ },
},
- },
- ]}
+ ],
+ ...widget.chart.options,
+ }}
+ report={{
+ ...widget.chart.report,
+ previous: false,
+ }}
/>
)}
- {widget.chart?.name && (
+ {widget.chart?.report?.name && (
-
+