aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-04-16 12:23:12 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: implement shortcut view analytics

Browse Source
This commit is contained in:
Steven 2023-07-10 22:57:29 +08:00
parent d866d5b53b
commit 0cceed51f8
9 changed files with 308 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
api/v1/analytics.go Normal file
View File

@ -0,0 +1,128 @@
package v1
import (
"encoding/json"
"fmt"
"net/http"
"strconv"
"github.com/boojack/shortify/store"
"github.com/labstack/echo/v4"
"github.com/mssola/useragent"
"golang.org/x/exp/slices"
)
type ReferenceInfo struct {
Name string `json:"name"`
Count int `json:"count"`
}
type DeviceInfo struct {
Name string `json:"name"`
Count int `json:"count"`
}
type BrowserInfo struct {
Name string `json:"name"`
Count int `json:"count"`
}
type AnalysisData struct {
ReferenceData []ReferenceInfo `json:"referenceData"`
DeviceData []DeviceInfo `json:"deviceData"`
BrowserData []BrowserInfo `json:"browserData"`
}
func (s *APIV1Service) registerAnalyticsRoutes(g *echo.Group) {
g.GET("/shortcut/:shortcutId/analytics", func(c echo.Context) error {
ctx := c.Request().Context()
shortcutID, err := strconv.Atoi(c.Param("shortcutId"))
if err != nil {
return echo.NewHTTPError(http.StatusBadRequest, fmt.Sprintf("shortcut id is not a number: %s", c.Param("shortcutId"))).SetInternal(err)
}
activities, err := s.Store.ListActivities(ctx, &store.FindActivity{
Type: store.ActivityShortcutView,
Where: []string{fmt.Sprintf("json_extract(payload, '$.shortcutId') = %d", shortcutID)},
})
if err != nil {
return echo.NewHTTPError(http.StatusInternalServerError, fmt.Sprintf("failed to get activities, err: %s", err)).SetInternal(err)
}
referenceMap := make(map[string]int)
deviceMap := make(map[string]int)
browserMap := make(map[string]int)
for _, activity := range activities {
payload := &ActivityShorcutViewPayload{}
if err := json.Unmarshal([]byte(activity.Payload), payload); err != nil {
return echo.NewHTTPError(http.StatusInternalServerError, fmt.Sprintf("failed to unmarshal payload, err: %s", err)).SetInternal(err)
}
if _, ok := referenceMap[payload.Referer]; !ok {
referenceMap[payload.Referer] = 0
}
referenceMap[payload.Referer]++
ua := useragent.New(payload.UserAgent)
deviceName := ua.OSInfo().Name
browserName, _ := ua.Browser()
if _, ok := deviceMap[deviceName]; !ok {
deviceMap[deviceName] = 0
}
deviceMap[deviceName]++
if _, ok := browserMap[browserName]; !ok {
browserMap[browserName] = 0
}
browserMap[browserName]++
}
return c.JSON(http.StatusOK, &AnalysisData{
ReferenceData: mapToReferenceInfoSlice(referenceMap),
DeviceData: mapToDeviceInfoSlice(deviceMap),
BrowserData: mapToBrowserInfoSlice(browserMap),
})
})
}
func mapToReferenceInfoSlice(m map[string]int) []ReferenceInfo {
referenceInfoSlice := make([]ReferenceInfo, 0)
for key, value := range m {
referenceInfoSlice = append(referenceInfoSlice, ReferenceInfo{
Name: key,
Count: value,
})
}
slices.SortFunc(referenceInfoSlice, func(i, j ReferenceInfo) bool {
return i.Count > j.Count
})
return referenceInfoSlice
}
func mapToDeviceInfoSlice(m map[string]int) []DeviceInfo {
deviceInfoSlice := make([]DeviceInfo, 0)
for key, value := range m {
deviceInfoSlice = append(deviceInfoSlice, DeviceInfo{
Name: key,
Count: value,
})
}
slices.SortFunc(deviceInfoSlice, func(i, j DeviceInfo) bool {
return i.Count > j.Count
})
return deviceInfoSlice
}
func mapToBrowserInfoSlice(m map[string]int) []BrowserInfo {
browserInfoSlice := make([]BrowserInfo, 0)
for key, value := range m {
browserInfoSlice = append(browserInfoSlice, BrowserInfo{
Name: key,
Count: value,
})
}
slices.SortFunc(browserInfoSlice, func(i, j BrowserInfo) bool {
return i.Count > j.Count
})
return browserInfoSlice
}

1
api/v1/v1.go
View File

@ -29,6 +29,7 @@ func (s *APIV1Service) Start(apiGroup *echo.Group, secret string) {
s.registerAuthRoutes(apiV1Group, secret)
s.registerUserRoutes(apiV1Group)
s.registerShortcutRoutes(apiV1Group)
s.registerAnalyticsRoutes(apiV1Group)
redirectorGroup := apiGroup.Group("/s")
redirectorGroup.Use(func(next echo.HandlerFunc) echo.HandlerFunc {

4
go.mod
View File

@ -66,8 +66,10 @@ require (
require (
github.com/golang-jwt/jwt/v4 v4.5.0
github.com/mssola/useragent v1.0.0
github.com/pkg/errors v0.9.1
go.deanishe.net/favicon v0.1.0
golang.org/x/mod v0.8.0
golang.org/x/exp v0.0.0-20230626212559-97b1e661b5df
golang.org/x/mod v0.11.0
modernc.org/sqlite v1.23.1
)

8
go.sum
View File

@ -217,6 +217,8 @@ github.com/mitchellh/mapstructure v1.1.2/go.mod h1:FVVH3fgwuzCH5S8UJGiWEs2h04kUh
github.com/mitchellh/mapstructure v1.5.0 h1:jeMsZIYE/09sWLaz43PL7Gy6RuMjD2eJVyuac5Z2hdY=
github.com/mitchellh/mapstructure v1.5.0/go.mod h1:bFUtVrKA4DC2yAKiSyO/QUcy7e+RRV2QTWOzhPopBRo=
github.com/montanaflynn/stats v0.0.0-20171201202039-1bf9dbcd8cbe/go.mod h1:wL8QJuTMNUDYhXwkmfOly8iTdp5TEcJFWZD2D7SIkUc=
github.com/mssola/useragent v1.0.0 h1:WRlDpXyxHDNfvZaPEut5Biveq86Ze4o4EMffyMxmH5o=
github.com/mssola/useragent v1.0.0/go.mod h1:hz9Cqz4RXusgg1EdI4Al0INR62kP7aPSRNHnpU+b85Y=
github.com/pelletier/go-toml v1.7.0/go.mod h1:vwGMzjaWMwyfHwgIBhI2YUM4fB6nL6lVAvS1LBMMhTE=
github.com/pelletier/go-toml/v2 v2.0.8 h1:0ctb6s9mE31h0/lhu+J6OPmVeDxJn+kYnJc2jZR9tGQ=
github.com/pelletier/go-toml/v2 v2.0.8/go.mod h1:vuYfssBdrU2XDZ9bYydBu6t+6a6PYNcZljzZR9VXg+4=
@ -316,6 +318,8 @@ golang.org/x/exp v0.0.0-20191227195350-da58074b4299/go.mod h1:2RIsYlXP63K8oxa1u0
golang.org/x/exp v0.0.0-20200119233911-0405dc783f0a/go.mod h1:2RIsYlXP63K8oxa1u096TMicItID8zy7Y6sNkU49FU4=
golang.org/x/exp v0.0.0-20200207192155-f17229e696bd/go.mod h1:J/WKrq2StrnmMY6+EHIKF9dgMWnmCNThgcyBT1FY9mM=
golang.org/x/exp v0.0.0-20200224162631-6cc2880d07d6/go.mod h1:3jZMyOhIsHpP37uCMkUooju7aAi5cS1Q23tOzKc+0MU=
golang.org/x/exp v0.0.0-20230626212559-97b1e661b5df h1:UA2aFVmmsIlefxMk29Dp2juaUSth8Pyn3Tq5Y5mJGME=
golang.org/x/exp v0.0.0-20230626212559-97b1e661b5df/go.mod h1:FXUEEKJgO7OQYeo8N01OfiKP8RXMtf6e8aTskBGqWdc=
golang.org/x/image v0.0.0-20190227222117-0694c2d4d067/go.mod h1:kZ7UVZpmo3dzQBMxlp+ypCbDeSB+sBbTgSJuh5dn5js=
golang.org/x/image v0.0.0-20190802002840-cff245a6509b/go.mod h1:FeLwcggjj3mMvU+oOTbSwawSJRM1uh48EjtB4UJZlP0=
golang.org/x/lint v0.0.0-20181026193005-c67002cb31c3/go.mod h1:UVdnD1Gm6xHRNCYTkRU2/jEulfH38KcIWyp/GAMgvoE=
@ -339,8 +343,8 @@ golang.org/x/mod v0.2.0/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
golang.org/x/mod v0.3.0/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
golang.org/x/mod v0.4.0/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
golang.org/x/mod v0.4.1/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
golang.org/x/mod v0.8.0 h1:LUYupSeNrTNCGzR/hVBk2NHZO4hXcVaW1k4Qx7rjPx8=
golang.org/x/mod v0.8.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs=
golang.org/x/mod v0.11.0 h1:bUO06HqtnRcc/7l71XBe4WcqTZ+3AH1J59zWDDwLKgU=
golang.org/x/mod v0.11.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs=
golang.org/x/net v0.0.0-20180218175443-cbe0f9307d01/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
golang.org/x/net v0.0.0-20180724234803-3673e40ba225/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
golang.org/x/net v0.0.0-20180826012351-8a410e7b638d/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=

4
server/server.go
View File

@ -61,10 +61,10 @@ func NewServer(ctx context.Context, profile *profile.Profile, store *store.Store
}
}
apiGroup := e.Group("")
rootGroup := e.Group("")
// Register API v1 routes.
apiV1Service := apiv1.NewAPIV1Service(profile, store)
apiV1Service.Start(apiGroup, secret)
apiV1Service.Start(rootGroup, secret)
return s, nil
}

135
web/src/components/AnalyticsDialog.tsx Normal file
View File

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

11
web/src/components/ShortcutView.tsx
View File

@ -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)} />}
</>
);
};

4
web/src/helpers/api.ts
View File

@ -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);
}

20
web/src/types/analytics.d.ts vendored Normal file
View File

@ -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[];
}