feat(dashboard): add external link icon to table (#145)

medama-io · Sep 10, 2024 · 3fc42fd · 3fc42fd
1 parent 02bf0b8
commit 3fc42fd
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 2 deletions.
diff --git a/dashboard/app/components/stats/StatsItem.module.css b/dashboard/app/components/stats/StatsItem.module.css
@@ -50,17 +50,24 @@
 }
 
 .external {
+	opacity: 0;
+	transition: opacity 100ms cubic-bezier(0.65, 0, 0.35, 1);
+
 	svg {
 		margin-bottom: -2px;
 		color: var(--text-muted);
-		width: 17px;
-		height: 17px;
+		width: 16px;
+		height: 16px;
 	}
 
 	&[data-hidden="true"] {
 		display: none;
 	}
 
+	&[data-hover="true"] {
+		opacity: 1;
+	}
+
 	@media (--lt-xs) {
 		display: none;
 	}

diff --git a/dashboard/app/components/stats/StatsItem.tsx b/dashboard/app/components/stats/StatsItem.tsx
@@ -83,6 +83,7 @@ const StatsItem = ({
 							href={`https://${label}`}
 							target="_blank"
 							rel="noreferrer noopener"
+							data-hover={hovered ? 'true' : undefined}
 							data-hidden={!isFQDN(label)}
 							onClick={(event) => event.stopPropagation()}
 						>

diff --git a/dashboard/app/components/stats/Table.module.css b/dashboard/app/components/stats/Table.module.css
@@ -172,3 +172,29 @@
 		height: inherit;
 	}
 }
+
+.external {
+	margin-left: 8px;
+
+	opacity: 0;
+	transition: opacity 100ms cubic-bezier(0.65, 0, 0.35, 1);
+
+	svg {
+		margin-bottom: -2px;
+		color: var(--text-muted);
+		width: 16px;
+		height: 16px;
+	}
+
+	&[data-hidden="true"] {
+		display: none;
+	}
+
+	&[data-hover="true"] {
+		opacity: 1;
+	}
+
+	@media (--lt-sm) {
+		display: none;
+	}
+}
diff --git a/dashboard/app/components/stats/Table.tsx b/dashboard/app/components/stats/Table.tsx
@@ -8,11 +8,14 @@ import {
 	type DataTableSortStatus,
 } from 'mantine-datatable';
 import { useCallback, useMemo, useState } from 'react';
+import isFQDN from 'validator/lib/isFQDN';
 
 import { ButtonIcon, ButtonLink } from '@/components/Button';
+import { IconExternal } from '@/components/icons/external';
 import { Group } from '@/components/layout/Flex';
 import { useDidUpdate } from '@/hooks/use-did-update';
 import { useFilter } from '@/hooks/use-filter';
+import { useHover } from '@/hooks/use-hover';
 import { useMediaQuery } from '@/hooks/use-media-query';
 
 import { formatCount, formatDuration, formatPercentage } from './formatter';
@@ -366,6 +369,44 @@ const getColumnsForQuery = (
 				PRESET_COLUMNS.duration_percentage,
 			];
 		case 'referrers':
+			return [
+				{
+					// Referrer, Source, Medium, Campaign
+					accessor: ACCESSOR_MAP[query],
+					title: LABEL_MAP[query].slice(0, -1),
+					width: '100%',
+					render: (record) => {
+						const label = record[ACCESSOR_MAP[query]];
+						const { ref, hovered } = useHover<HTMLDivElement>();
+
+						if (label) {
+							return (
+								<div ref={ref}>
+									{label}
+									<a
+										className={classes.external}
+										aria-label={`Visit ${label}`}
+										href={`https://${label}`}
+										target="_blank"
+										rel="noreferrer noopener"
+										data-hidden={!isFQDN(String(label))}
+										data-hover={hovered ? 'true' : undefined}
+										onClick={(event) => event.stopPropagation()}
+									>
+										<IconExternal />
+									</a>
+								</div>
+							);
+						}
+
+						return 'Direct/None';
+					},
+				},
+				PRESET_COLUMNS.visitors,
+				PRESET_COLUMNS.visitors_percentage,
+				PRESET_COLUMNS.bounce_percentage,
+				PRESET_COLUMNS.duration,
+			];
 		case 'sources':
 		case 'mediums':
 		case 'campaigns':