zias/stats
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor(dashboard): the chart component is now cleaned up and easier to extend

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-09-12 09:30:48 +02:00
parent 3e19f90e51
commit 558761ca9d
76 changed files with 2910 additions and 2475 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/dashboard/src/components/overview/filters/overview-filters-drawer-content.tsx
View File

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

4
apps/dashboard/src/components/overview/overview-live-histogram.tsx
View File

@@ -81,7 +81,7 @@ export function OverviewLiveHistogram({
{staticArray.map((percent, i) => (
<div
key={i}
className="flex-1 animate-pulse rounded bg-def-200"
className="flex-1 animate-pulse rounded-t bg-def-200"
style={{ height: `${percent}%` }}
/>
))}
@@ -101,7 +101,7 @@ export function OverviewLiveHistogram({
<TooltipTrigger asChild>
<div
className={cn(
'flex-1 rounded transition-all ease-in-out hover:scale-110',
'flex-1 rounded-t transition-all ease-in-out hover:scale-110',
minute.count === 0 ? 'bg-def-200' : 'bg-highlight'
)}
style={{

21
apps/dashboard/src/components/overview/overview-metrics.tsx
View File

@@ -1,12 +1,12 @@
'use client';
import { useOverviewOptions } from '@/components/overview/useOverviewOptions';
import { ChartRoot } from '@/components/report/chart';
import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
import { cn } from '@/utils/cn';
import type { IChartProps } from '@openpanel/validation';
import { ReportChart } from '../report-chart';
import { OverviewLiveHistogram } from './overview-live-histogram';
interface OverviewMetricsProps {
@@ -151,6 +151,7 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
formula: 'A/B*100',
metric: 'average',
unit: '%',
maxDomain: 100,
},
{
id: 'Visit duration',
@@ -186,7 +187,7 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
metric: 'average',
unit: 'min',
},
] satisfies (IChartProps & { id: string })[];
] satisfies (IChartProps & { id: string; maxDomain?: number })[];
const selectedMetric = reports[metric]!;
@@ -198,30 +199,32 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
<button
key={index}
className={cn(
'col-span-2 flex-1 p-4 shadow-[0_0_0_0.5px] shadow-border md:col-span-1',
'col-span-2 flex-1 shadow-[0_0_0_0.5px] shadow-border md:col-span-1',
index === metric && 'bg-def-100'
)}
onClick={() => {
setMetric(index);
}}
>
<ChartRoot hideID {...report} />
<ReportChart report={report} options={{ hideID: true }} />
</button>
))}
<div
className={cn(
'col-span-4 min-h-28 flex-1 p-4 shadow-[0_0_0_0.5px] shadow-border max-md:row-start-1 md:col-span-2'
'col-span-4 min-h-16 flex-1 p-4 pb-0 shadow-[0_0_0_0.5px] shadow-border max-md:row-start-1 md:col-span-2'
)}
>
<OverviewLiveHistogram projectId={projectId} />
</div>
</div>
<div className="card col-span-6 p-4">
<ChartRoot
<ReportChart
key={selectedMetric.id}
hideID
{...selectedMetric}
chartType="linear"
options={{ hideID: true, maxDomain: selectedMetric.maxDomain }}
report={{
...selectedMetric,
chartType: 'linear',
}}
/>
</div>
</div>

459
apps/dashboard/src/components/overview/overview-top-devices.tsx
View File

@@ -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({
</WidgetButtons>
</WidgetHead>
<WidgetBody>
<LazyChart
hideID
{...widget.chart}
previous={false}
onClick={(item) => {
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;
}
<ReportChart
options={{
...widget.chart.options,
hideID: true,
onClick: (item) => {
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,
}}
/>
</WidgetBody>
<WidgetFooter>
<OverviewDetailsButton chart={widget.chart} />
<OverviewDetailsButton chart={widget.chart.report} />
<OverviewChartToggle {...{ chartType, setChartType }} />
</WidgetFooter>
</Widget>

200
apps/dashboard/src/components/overview/overview-top-events/overview-top-events.tsx
View File

@@ -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({
</WidgetButtons>
</WidgetHead>
<WidgetBody>
<LazyChart hideID {...widget.chart} previous={false} />
<ReportChart
options={{ hideID: true }}
report={{
...widget.chart.report,
previous: false,
}}
/>
</WidgetBody>
<WidgetFooter>
<OverviewDetailsButton chart={widget.chart} />
<OverviewDetailsButton chart={widget.chart.report} />
<OverviewChartToggle {...{ chartType, setChartType }} />
</WidgetFooter>
</Widget>

242
apps/dashboard/src/components/overview/overview-top-geo.tsx
View File

@@ -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) {
</WidgetButtons>
</WidgetHead>
<WidgetBody>
<LazyChart
hideID
{...widget.chart}
previous={false}
onClick={(item) => {
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;
}
<ReportChart
options={{
hideID: true,
onClick: (item) => {
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,
}}
/>
</WidgetBody>
<WidgetFooter>
<OverviewDetailsButton chart={widget.chart} />
<OverviewDetailsButton chart={widget.chart.report} />
<OverviewChartToggle {...{ chartType, setChartType }} />
</WidgetFooter>
</Widget>
@@ -188,9 +204,9 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
<div className="title">Map</div>
</WidgetHead>
<WidgetBody>
<ChartRoot
hideID
{...{
<ReportChart
options={{ hideID: true }}
report={{
projectId,
startDate,
endDate,

243
apps/dashboard/src/components/overview/overview-top-pages.tsx
View File

@@ -9,7 +9,7 @@ import { parseAsBoolean, useQueryState } from 'nuqs';
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 { Button } from '../ui/button';
import { Tooltiper } from '../ui/tooltip';
import { Widget, WidgetBody } from '../widget';
@@ -31,6 +31,10 @@ export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
const [domain, setDomain] = useQueryState('d', parseAsBoolean);
const renderSerieName = (names: string[]) => {
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' ? (
<OverviewTopBots projectId={projectId} />
) : (
<LazyChart
hideID
{...widget.chart}
previous={false}
dropdownMenuContent={(serie) => [
{
title: 'Visit page',
icon: ExternalLinkIcon,
onClick: () => {
window.open(serie.names.join(''), '_blank');
<ReportChart
options={{
hideID: true,
dropdownMenuContent: (serie) => [
{
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,
}}
/>
)}
</WidgetBody>
{widget.chart?.name && (
{widget.chart?.report?.name && (
<WidgetFooter>
<OverviewDetailsButton chart={widget.chart} />
<OverviewDetailsButton chart={widget.chart.report} />
<OverviewChartToggle {...{ chartType, setChartType }} />
<div className="flex-1"></div>
<Button

489
apps/dashboard/src/components/overview/overview-top-sources.tsx
View File

@@ -6,7 +6,7 @@ import { cn } from '@/utils/cn';
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';
@@ -30,248 +30,264 @@ export default function OverviewTopSources({
title: 'Top sources',
btn: 'All',
chart: {
limit: 10,
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
filters: filters,
id: 'A',
name: isPageFilter ? 'screen_view' : 'session_start',
},
],
breakdowns: [
{
id: 'A',
name: 'referrer_name',
},
],
chartType,
lineType: 'monotone',
interval: interval,
name: 'Top sources',
range: range,
previous: previous,
metric: 'sum',
report: {
limit: 10,
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
filters: filters,
id: 'A',
name: isPageFilter ? 'screen_view' : 'session_start',
},
],
breakdowns: [
{
id: 'A',
name: 'referrer_name',
},
],
chartType,
lineType: 'monotone',
interval: interval,
name: 'Top sources',
range: range,
previous: previous,
metric: 'sum',
},
},
},
domain: {
title: 'Top urls',
btn: 'URLs',
chart: {
limit: 10,
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
filters: filters,
id: 'A',
name: isPageFilter ? 'screen_view' : 'session_start',
},
],
breakdowns: [
{
id: 'A',
name: 'referrer',
},
],
chartType,
lineType: 'monotone',
interval: interval,
name: 'Top urls',
range: range,
previous: previous,
metric: 'sum',
report: {
limit: 10,
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
filters: filters,
id: 'A',
name: isPageFilter ? 'screen_view' : 'session_start',
},
],
breakdowns: [
{
id: 'A',
name: 'referrer',
},
],
chartType,
lineType: 'monotone',
interval: interval,
name: 'Top urls',
range: range,
previous: previous,
metric: 'sum',
},
},
},
type: {
title: 'Top types',
btn: 'Types',
chart: {
limit: 10,
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
filters: filters,
id: 'A',
name: isPageFilter ? 'screen_view' : 'session_start',
},
],
breakdowns: [
{
id: 'A',
name: 'referrer_type',
},
],
chartType,
lineType: 'monotone',
interval: interval,
name: 'Top types',
range: range,
previous: previous,
metric: 'sum',
report: {
limit: 10,
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
filters: filters,
id: 'A',
name: isPageFilter ? 'screen_view' : 'session_start',
},
],
breakdowns: [
{
id: 'A',
name: 'referrer_type',
},
],
chartType,
lineType: 'monotone',
interval: interval,
name: 'Top types',
range: range,
previous: previous,
metric: 'sum',
},
},
},
utm_source: {
title: 'UTM Source',
btn: 'Source',
chart: {
limit: 10,
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
filters,
id: 'A',
name: isPageFilter ? 'screen_view' : 'session_start',
},
],
breakdowns: [
{
id: 'A',
name: 'properties.__query.utm_source',
},
],
chartType,
lineType: 'monotone',
interval: interval,
name: 'UTM Source',
range: range,
previous: previous,
metric: 'sum',
report: {
limit: 10,
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
filters,
id: 'A',
name: isPageFilter ? 'screen_view' : 'session_start',
},
],
breakdowns: [
{
id: 'A',
name: 'properties.__query.utm_source',
},
],
chartType,
lineType: 'monotone',
interval: interval,
name: 'UTM Source',
range: range,
previous: previous,
metric: 'sum',
},
},
},
utm_medium: {
title: 'UTM Medium',
btn: 'Medium',
chart: {
limit: 10,
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
filters,
id: 'A',
name: isPageFilter ? 'screen_view' : 'session_start',
},
],
breakdowns: [
{
id: 'A',
name: 'properties.__query.utm_medium',
},
],
chartType,
lineType: 'monotone',
interval: interval,
name: 'UTM Medium',
range: range,
previous: previous,
metric: 'sum',
report: {
limit: 10,
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
filters,
id: 'A',
name: isPageFilter ? 'screen_view' : 'session_start',
},
],
breakdowns: [
{
id: 'A',
name: 'properties.__query.utm_medium',
},
],
chartType,
lineType: 'monotone',
interval: interval,
name: 'UTM Medium',
range: range,
previous: previous,
metric: 'sum',
},
},
},
utm_campaign: {
title: 'UTM Campaign',
btn: 'Campaign',
chart: {
limit: 10,
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
filters,
id: 'A',
name: isPageFilter ? 'screen_view' : 'session_start',
},
],
breakdowns: [
{
id: 'A',
name: 'properties.__query.utm_campaign',
},
],
chartType,
lineType: 'monotone',
interval: interval,
name: 'UTM Campaign',
range: range,
previous: previous,
metric: 'sum',
report: {
limit: 10,
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
filters,
id: 'A',
name: isPageFilter ? 'screen_view' : 'session_start',
},
],
breakdowns: [
{
id: 'A',
name: 'properties.__query.utm_campaign',
},
],
chartType,
lineType: 'monotone',
interval: interval,
name: 'UTM Campaign',
range: range,
previous: previous,
metric: 'sum',
},
},
},
utm_term: {
title: 'UTM Term',
btn: 'Term',
chart: {
limit: 10,
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
filters,
id: 'A',
name: isPageFilter ? 'screen_view' : 'session_start',
},
],
breakdowns: [
{
id: 'A',
name: 'properties.__query.utm_term',
},
],
chartType,
lineType: 'monotone',
interval: interval,
name: 'UTM Term',
range: range,
previous: previous,
metric: 'sum',
report: {
limit: 10,
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
filters,
id: 'A',
name: isPageFilter ? 'screen_view' : 'session_start',
},
],
breakdowns: [
{
id: 'A',
name: 'properties.__query.utm_term',
},
],
chartType,
lineType: 'monotone',
interval: interval,
name: 'UTM Term',
range: range,
previous: previous,
metric: 'sum',
},
},
},
utm_content: {
title: 'UTM Content',
btn: 'Content',
chart: {
limit: 10,
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
filters,
id: 'A',
name: isPageFilter ? 'screen_view' : 'session_start',
},
],
breakdowns: [
{
id: 'A',
name: 'properties.__query.utm_content',
},
],
chartType,
lineType: 'monotone',
interval: interval,
name: 'UTM Content',
range: range,
previous: previous,
metric: 'sum',
report: {
limit: 10,
projectId,
startDate,
endDate,
events: [
{
segment: 'event',
filters,
id: 'A',
name: isPageFilter ? 'screen_view' : 'session_start',
},
],
breakdowns: [
{
id: 'A',
name: 'properties.__query.utm_content',
},
],
chartType,
lineType: 'monotone',
interval: interval,
name: 'UTM Content',
range: range,
previous: previous,
metric: 'sum',
},
},
},
});
@@ -295,44 +311,47 @@ export default function OverviewTopSources({
</WidgetButtons>
</WidgetHead>
<WidgetBody>
<LazyChart
hideID
{...widget.chart}
previous={false}
onClick={(item) => {
switch (widget.key) {
case 'all':
setFilter('referrer_name', item.names[0]);
setWidget('domain');
break;
case 'domain':
setFilter('referrer', item.names[0]);
break;
case 'type':
setFilter('referrer_type', item.names[0]);
setWidget('domain');
break;
case 'utm_source':
setFilter('properties.__query.utm_source', item.names[0]);
break;
case 'utm_medium':
setFilter('properties.__query.utm_medium', item.names[0]);
break;
case 'utm_campaign':
setFilter('properties.__query.utm_campaign', item.names[0]);
break;
case 'utm_term':
setFilter('properties.__query.utm_term', item.names[0]);
break;
case 'utm_content':
setFilter('properties.__query.utm_content', item.names[0]);
break;
}
<ReportChart
report={{
...widget.chart.report,
previous: false,
}}
options={{
onClick: (item) => {
switch (widget.key) {
case 'all':
setFilter('referrer_name', item.names[0]);
setWidget('domain');
break;
case 'domain':
setFilter('referrer', item.names[0]);
break;
case 'type':
setFilter('referrer_type', item.names[0]);
setWidget('domain');
break;
case 'utm_source':
setFilter('properties.__query.utm_source', item.names[0]);
break;
case 'utm_medium':
setFilter('properties.__query.utm_medium', item.names[0]);
break;
case 'utm_campaign':
setFilter('properties.__query.utm_campaign', item.names[0]);
break;
case 'utm_term':
setFilter('properties.__query.utm_term', item.names[0]);
break;
case 'utm_content':
setFilter('properties.__query.utm_content', item.names[0]);
break;
}
},
}}
/>
</WidgetBody>
<WidgetFooter>
<OverviewDetailsButton chart={widget.chart} />
<OverviewDetailsButton chart={widget.chart.report} />
<OverviewChartToggle {...{ chartType, setChartType }} />
</WidgetFooter>
</Widget>

4
apps/dashboard/src/components/overview/useOverviewWidget.tsx
View File

@@ -2,13 +2,13 @@ import { parseAsStringEnum, useQueryState } from 'nuqs';
import { mapKeys } from '@openpanel/validation';
import type { IChartRoot } from '../report/chart';
import type { ReportChartProps } from '../report-chart/context';
export function useOverviewWidget<T extends string>(
key: string,
widgets: Record<
T,
{ title: string; btn: string; chart: IChartRoot; hide?: boolean }
{ title: string; btn: string; chart: ReportChartProps; hide?: boolean }
>
) {
const keys = Object.keys(widgets) as T[];