Skip to content

Commit 8e49cf8

Browse files
izadoesdevizadoesdev
committed
feat: audience and performance tab filters
1 parent 9a3eb5d commit 8e49cf8

File tree

2 files changed

+98
-1
lines changed

2 files changed

+98
-1
lines changed

‎apps/dashboard/app/(main)/websites/[id]/_components/tabs/audience-tab.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,7 @@ export function WebsiteAudienceTab({
159159
isRefreshing,
160160
setIsRefreshing,
161161
filters,
162+
addFilter,
162163
}: FullTabProps) {
163164
const batchQueries = useMemo(
164165
() => [
@@ -216,6 +217,17 @@ export function WebsiteAudienceTab({
216217
}
217218
}, [isRefreshing, handleRefresh]);
218219

220+
const onAddFilter = useCallback((field: string, value: string, tableTitle?: string) => {
221+
// The field parameter now contains the correct filter field from the tab configuration
222+
const filter = {
223+
field,
224+
operator: 'eq' as const,
225+
value
226+
};
227+
228+
addFilter(filter);
229+
}, [addFilter]);
230+
219231
const processedData = useMemo((): ProcessedData => {
220232
if (!batchResults?.length) {
221233
return {
@@ -789,6 +801,10 @@ export function WebsiteAudienceTab({
789801
_uniqueKey: `country-${item.country_code || item.name}-${index}`,
790802
})),
791803
columns: countryColumns,
804+
getFilter: (row: any) => ({
805+
field: 'country',
806+
value: row.country_name || row.name
807+
}),
792808
},
793809
{
794810
id: 'regions',
@@ -798,6 +814,10 @@ export function WebsiteAudienceTab({
798814
_uniqueKey: `region-${item.name}-${index}`,
799815
})),
800816
columns: geographicColumns,
817+
getFilter: (row: any) => ({
818+
field: 'region',
819+
value: row.name
820+
}),
801821
},
802822
{
803823
id: 'cities',
@@ -807,6 +827,10 @@ export function WebsiteAudienceTab({
807827
_uniqueKey: `city-${item.name}-${index}`,
808828
})),
809829
columns: cityColumns,
830+
getFilter: (row: any) => ({
831+
field: 'city',
832+
value: row.name
833+
}),
810834
},
811835
...(canUseDisplayNames
812836
? [
@@ -818,6 +842,10 @@ export function WebsiteAudienceTab({
818842
_uniqueKey: `language-${item.name}-${index}`,
819843
})),
820844
columns: languageColumns,
845+
getFilter: (row: any) => ({
846+
field: 'language',
847+
value: row.name
848+
}),
821849
},
822850
]
823851
: []),
@@ -829,6 +857,10 @@ export function WebsiteAudienceTab({
829857
_uniqueKey: `timezone-${item.name}-${index}`,
830858
})),
831859
columns: timezoneColumns,
860+
getFilter: (row: any) => ({
861+
field: 'timezone',
862+
value: row.name
863+
}),
832864
},
833865
],
834866
[
@@ -864,6 +896,7 @@ export function WebsiteAudienceTab({
864896
getSubRows={(row: any) => row.versions}
865897
isLoading={isLoading}
866898
minHeight={350}
899+
onAddFilter={onAddFilter}
867900
renderSubRow={(subRow: any, parentRow: any) => {
868901
const percentage = Math.round(
869902
((subRow.visitors || 0) / (parentRow.visitors || 1)) * 100
@@ -917,6 +950,18 @@ export function WebsiteAudienceTab({
917950
}}
918951
showSearch={false}
919952
title="Browser Versions"
953+
tabs={[
954+
{
955+
id: 'browsers',
956+
label: 'Browsers',
957+
data: processedBrowserData,
958+
columns: browserColumns,
959+
getFilter: (row: any) => ({
960+
field: 'browser_name',
961+
value: row.browserName || row.name
962+
}),
963+
}
964+
]}
920965
/>
921966

922967
<DataTable
@@ -925,8 +970,21 @@ export function WebsiteAudienceTab({
925970
description="Visitors by network connection"
926971
isLoading={isLoading}
927972
minHeight={350}
973+
onAddFilter={onAddFilter}
928974
showSearch={false}
929975
title="Connection Types"
976+
tabs={[
977+
{
978+
id: 'connections',
979+
label: 'Connection Types',
980+
data: processedConnectionData,
981+
columns: connectionColumns,
982+
getFilter: (row: any) => ({
983+
field: 'connection_type',
984+
value: row.name
985+
}),
986+
}
987+
]}
930988
/>
931989
</div>
932990

@@ -938,6 +996,7 @@ export function WebsiteAudienceTab({
938996
initialPageSize={8}
939997
isLoading={isLoading}
940998
minHeight={400}
999+
onAddFilter={onAddFilter}
9411000
tabs={geographicTabs}
9421001
title="Geographic Distribution"
9431002
/>

‎apps/dashboard/app/(main)/websites/[id]/_components/tabs/performance-tab.tsx‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -304,6 +304,7 @@ export function WebsitePerformanceTab({
304304
isRefreshing,
305305
setIsRefreshing,
306306
filters,
307+
addFilter,
307308
}: FullTabProps) {
308309
const [activeFilter, setActiveFilter] = useState<'fast' | 'slow' | null>(
309310
null
@@ -343,6 +344,17 @@ export function WebsitePerformanceTab({
343344
[]
344345
);
345346

347+
const onAddFilter = useCallback((field: string, value: string, tableTitle?: string) => {
348+
// The field parameter now contains the correct filter field from the tab configuration
349+
const filter = {
350+
field,
351+
operator: 'eq' as const,
352+
value
353+
};
354+
355+
addFilter(filter);
356+
}, [addFilter]);
357+
346358
const { processedData, performanceSummary } = useMemo(() => {
347359
if (!performanceResults?.length) {
348360
return {
@@ -412,7 +424,7 @@ export function WebsitePerformanceTab({
412424

413425
const getCountryIcon = (name: string) => {
414426
const item = processedData.countries.find(
415-
(item) => item.country_name === name
427+
(item: any) => item.country_name === name
416428
);
417429
return <CountryFlag country={item?.country_code || name} size={16} />;
418430
};
@@ -453,37 +465,61 @@ export function WebsitePerformanceTab({
453465
data: processedData.pages,
454466
iconRenderer: undefined,
455467
nameFormatter: formatPageName,
468+
getFilter: (row: any) => ({
469+
field: 'path',
470+
value: row.name
471+
}),
456472
},
457473
{
458474
id: 'countries',
459475
label: 'Country',
460476
data: processedData.countries,
461477
iconRenderer: getCountryIcon,
478+
getFilter: (row: any) => ({
479+
field: 'country',
480+
value: row.name
481+
}),
462482
},
463483
{
464484
id: 'regions',
465485
label: 'Regions',
466486
data: processedData.regions,
467487
iconRenderer: getRegionCountryIcon,
468488
nameFormatter: formatRegionName,
489+
getFilter: (row: any) => ({
490+
field: 'region',
491+
value: row.name
492+
}),
469493
},
470494
{
471495
id: 'devices',
472496
label: 'Device Types',
473497
data: processedData.devices,
474498
iconRenderer: getDeviceIcon,
499+
getFilter: (row: any) => ({
500+
field: 'device_type',
501+
value: row.name
502+
}),
475503
},
476504
{
477505
id: 'browsers',
478506
label: 'Browsers',
479507
data: processedData.browsers,
480508
iconRenderer: (name: string) => <BrowserIcon name={name} size="sm" />,
509+
getFilter: (row: any) => ({
510+
field: 'browser_name',
511+
value: row.name
512+
}),
481513
},
482514
{
483515
id: 'operating_systems',
484516
label: 'Operating Systems',
485517
data: processedData.operating_systems,
486518
iconRenderer: (name: string) => <OSIcon name={name} size="sm" />,
519+
getFilter: (row: any) => ({
520+
field: 'os_name',
521+
value: row.name
522+
}),
487523
},
488524
];
489525

@@ -528,6 +564,7 @@ export function WebsitePerformanceTab({
528564
),
529565
...performanceColumns,
530566
],
567+
getFilter: config.getFilter,
531568
}));
532569
}, [processedData]);
533570

@@ -581,6 +618,7 @@ export function WebsitePerformanceTab({
581618
}
582619
isLoading={isLoading || isRefreshing}
583620
minHeight={500}
621+
onAddFilter={onAddFilter}
584622
tabs={tabs}
585623
title="Performance Analysis"
586624
/>

0 commit comments

Comments
 (0)