feat: implement shortcut view analytics

web/src/components/AnalyticsDialog.tsx

@@ -0,0 +1,135 @@
+import { Button, Modal, ModalDialog } from "@mui/joy";
+import { useEffect, useState } from "react";
+import * as api from "../helpers/api";
+import Icon from "./Icon";
+
+interface Props {
+  shortcutId: ShortcutId;
+  onClose: () => void;
+}
+
+const AnalyticsDialog: React.FC<Props> = (props: Props) => {
+  const { shortcutId, onClose } = props;
+  const [analytics, setAnalytics] = useState<AnalysisData | null>(null);
+  const [selectedDeviceTab, setSelectedDeviceTab] = useState<"os" | "browser">("os");
+
+  useEffect(() => {
+    api.getShortcutAnalytics(shortcutId).then(({ data }) => {
+      setAnalytics(data);
+    });
+  }, []);
+
+  return (
+    <Modal open={true}>
+      <ModalDialog>
+        <div className="w-full flex flex-row justify-between items-center">
+          <span className="text-lg font-medium">Analytics</span>
+          <Button variant="plain" onClick={onClose}>
+            <Icon.X className="w-5 h-auto text-gray-600" />
+          </Button>
+        </div>
+        <div className="max-w-full w-80 sm:w-96">
+          {analytics ? (
+            <>
+              <p className="w-full py-1 px-2">Top Sources</p>
+              <div className="mt-1 overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
+                <table className="min-w-full divide-y divide-gray-300">
+                  <thead>
+                    <tr>
+                      <th scope="col" className="py-1 px-2 text-left font-semibold text-sm text-gray-500">
+                        Source
+                      </th>
+                      <th scope="col" className="py-1 pr-2 text-right font-semibold text-sm text-gray-500">
+                        Visitors
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-gray-200">
+                    {analytics.referenceData.map((reference) => (
+                      <tr key={reference.name}>
+                        <td className="whitespace-nowrap py-2 px-2 text-sm text-gray-900">
+                          {reference.name ? (
+                            <a className="hover:underline hover:text-blue-600" href={reference.name} target="_blank">
+                              {reference.name}
+                            </a>
+                          ) : (
+                            "Direct"
+                          )}
+                        </td>
+                        <td className="whitespace-nowrap py-2 pr-2 text-sm text-gray-500 text-right">{reference.count}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+
+              <div className="w-full mt-4 py-1 px-2 flex flex-row justify-between items-center">
+                <span>Devices</span>
+                <div>
+                  <button className={`text-sm ${selectedDeviceTab === "os" && "text-blue-600"}`} onClick={() => setSelectedDeviceTab("os")}>
+                    OS
+                  </button>
+                  <span className="text-gray-200 font-mono mx-1">/</span>
+                  <button
+                    className={`text-sm ${selectedDeviceTab === "browser" && "text-blue-600"}`}
+                    onClick={() => setSelectedDeviceTab("browser")}
+                  >
+                    Browser
+                  </button>
+                </div>
+              </div>
+
+              <div className="mt-1 overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
+                {selectedDeviceTab === "os" ? (
+                  <table className="min-w-full divide-y divide-gray-300">
+                    <thead>
+                      <tr>
+                        <th scope="col" className="py-2 px-2 text-left text-sm font-semibold text-gray-500">
+                          Devices
+                        </th>
+                        <th scope="col" className="py-2 pr-2 text-right text-sm font-semibold text-gray-500">
+                          Visitors
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-gray-200">
+                      {analytics.deviceData.map((reference) => (
+                        <tr key={reference.name}>
+                          <td className="whitespace-nowrap py-2 px-2 text-sm text-gray-900">{reference.name || "Unknown"}</td>
+                          <td className="whitespace-nowrap py-2 pr-2 text-sm text-gray-500 text-right">{reference.count}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                ) : (
+                  <table className="min-w-full divide-y divide-gray-300">
+                    <thead>
+                      <tr>
+                        <th scope="col" className="py-2 px-2 text-left text-sm font-semibold text-gray-500">
+                          Browsers
+                        </th>
+                        <th scope="col" className="py-2 pr-2 text-right text-sm font-semibold text-gray-500">
+                          Visitors
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-gray-200">
+                      {analytics.browserData.map((reference) => (
+                        <tr key={reference.name}>
+                          <td className="whitespace-nowrap py-2 px-2 text-sm text-gray-900">{reference.name || "Unknown"}</td>
+                          <td className="whitespace-nowrap py-2 pr-2 text-sm text-gray-500 text-right">{reference.count}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                )}
+              </div>
+            </>
+          ) : null}
+        </div>
+      </ModalDialog>
+    </Modal>
+  );
+};
+
+export default AnalyticsDialog;

web/src/components/ShortcutView.tsx

@@ -13,6 +13,7 @@ import Icon from "./Icon";
 import Dropdown from "./common/Dropdown";
 import VisibilityIcon from "./VisibilityIcon";
 import GenerateQRCodeDialog from "./GenerateQRCodeDialog";
+import AnalyticsDialog from "./AnalyticsDialog";
 
 interface Props {
   shortcut: Shortcut;
@@ -27,6 +28,7 @@ const ShortcutView = (props: Props) => {
   const faviconStore = useFaviconStore();
   const [favicon, setFavicon] = useState<string | undefined>(undefined);
   const [showQRCodeDialog, setShowQRCodeDialog] = useState<boolean>(false);
+  const [showAnalyticsDialog, setShowAnalyticsDialog] = useState<boolean>(false);
   const havePermission = currentUser.role === "ADMIN" || shortcut.creatorId === currentUser.id;
   const shortifyLink = absolutifyLink(`/s/${shortcut.name}`);
 
@@ -46,7 +48,7 @@ const ShortcutView = (props: Props) => {
   const handleDeleteShortcutButtonClick = (shortcut: Shortcut) => {
     showCommonDialog({
       title: "Delete Shortcut",
-      content: `Are you sure to delete shortcut \`${shortcut.name}\`? You can not undo this action.`,
+      content: `Are you sure to delete shortcut \`${shortcut.name}\`? You cannot undo this action.`,
       style: "danger",
       onConfirm: async () => {
         await shortcutService.deleteShortcutById(shortcut.id);
@@ -147,7 +149,10 @@ const ShortcutView = (props: Props) => {
             </div>
           </Tooltip>
           <Tooltip title="View count" variant="solid" placement="top" arrow>
-            <div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm">
+            <div
+              className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm"
+              onClick={() => setShowAnalyticsDialog(true)}
+            >
               <Icon.BarChart2 className="w-4 h-auto mr-1" />
               {shortcut.view} visits
             </div>
@@ -156,6 +161,8 @@ const ShortcutView = (props: Props) => {
       </div>
 
       {showQRCodeDialog && <GenerateQRCodeDialog shortcut={shortcut} onClose={() => setShowQRCodeDialog(false)} />}
+
+      {showAnalyticsDialog && <AnalyticsDialog shortcutId={shortcut.id} onClose={() => setShowAnalyticsDialog(false)} />}
     </>
   );
 };

web/src/helpers/api.ts

@@ -59,6 +59,10 @@ export function createShortcut(shortcutCreate: ShortcutCreate) {
   return axios.post<Shortcut>("/api/v1/shortcut", shortcutCreate);
 }
 
+export function getShortcutAnalytics(shortcutId: ShortcutId) {
+  return axios.get<AnalysisData>(`/api/v1/shortcut/${shortcutId}/analytics`);
+}
+
 export function patchShortcut(shortcutPatch: ShortcutPatch) {
   return axios.patch<Shortcut>(`/api/v1/shortcut/${shortcutPatch.id}`, shortcutPatch);
 }

web/src/types/analytics.d.ts

@@ -0,0 +1,20 @@
+interface ReferenceInfo {
+  name: string;
+  count: number;
+}
+
+interface DeviceInfo {
+  name: string;
+  count: number;
+}
+
+interface BrowserInfo {
+  name: string;
+  count: number;
+}
+
+interface AnalysisData {
+  referenceData: ReferenceInfo[];
+  deviceData: DeviceInfo[];
+  browserData: BrowserInfo[];
+}