commit 26e0a4f92f9498c599fbe03f55acbf038ba718ef · nekomimi.pet/simplelink

+7 -1

frontend/src/components/LinkList.tsx

···

       85
       85
        
       		const baseUrl = window.location.origin

     

       86
       86
        
       		navigator.clipboard.writeText(`${baseUrl}/${shortCode}`)

     

       87
       87
        
       		toast({

     

       88
       88
       -
       		  description: "Link copied to clipboard",

     

       88
       88
       +
       		  description: (

     

       89
       89
       +
       			<>

     

       90
       90
       +
       			  Link copied to clipboard

     

       91
       91
       +
       			  <br />

     

       92
       92
       +
       			  You can add ?source=TextHere to the end of the link to track the source of clicks

     

       93
       93
       +
       			</>

     

       94
       94
       +
       		  ),

     

       89
       95
        
       		})

     

       90
       96
        
       	}

     

       91
       97

+148 -104

frontend/src/components/StatisticsModal.tsx

···

       1
       1
        
       import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";

     

       2
       2
        
       import {

     

       3
       3
       -
           LineChart,

     

       4
       4
       -
           Line,

     

       5
       5
       -
           XAxis,

     

       6
       6
       -
           YAxis,

     

       7
       7
       -
           CartesianGrid,

     

       8
       8
       -
           Tooltip,

     

       9
       9
       -
           ResponsiveContainer,

     

       3
       3
       +
         LineChart,

     

       4
       4
       +
         Line,

     

       5
       5
       +
         XAxis,

     

       6
       6
       +
         YAxis,

     

       7
       7
       +
         CartesianGrid,

     

       8
       8
       +
         Tooltip,

     

       9
       9
       +
         ResponsiveContainer,

     

       10
       10
        
       } from "recharts";

     

       11
       11
        
       import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

     

       12
       12
       -
       import { toast } from "@/hooks/use-toast"

     

       12
       12
       +
       import { toast } from "@/hooks/use-toast";

     

       13
       13
        
       import { useState, useEffect } from "react";

     

       14
       14
        
       

     

       15
       15
       -
       import { getLinkClickStats, getLinkSourceStats } from '../api/client';

     

       16
       16
       -
       import { ClickStats, SourceStats } from '../types/api';

     

       15
       15
       +
       import { getLinkClickStats, getLinkSourceStats } from "../api/client";

     

       16
       16
       +
       import { ClickStats, SourceStats } from "../types/api";

     

       17
       17
        
       

     

       18
       18
        
       interface StatisticsModalProps {

     

       19
       19
       -
           isOpen: boolean;

     

       20
       20
       -
           onClose: () => void;

     

       21
       21
       -
           linkId: number;

     

       19
       19
       +
         isOpen: boolean;

     

       20
       20
       +
         onClose: () => void;

     

       21
       21
       +
         linkId: number;

     

       22
       22
        
       }

     

       23
       23
       +
       

     

       24
       24
       +
       interface EnhancedClickStats extends ClickStats {

     

       25
       25
       +
         sources?: { source: string; count: number }[];

     

       26
       26
       +
       }

     

       27
       27
       +
       

     

       28
       28
       +
       const CustomTooltip = ({

     

       29
       29
       +
         active,

     

       30
       30
       +
         payload,

     

       31
       31
       +
         label,

     

       32
       32
       +
       }: {

     

       33
       33
       +
         active?: boolean;

     

       34
       34
       +
         payload?: any[];

     

       35
       35
       +
         label?: string;

     

       36
       36
       +
       }) => {

     

       37
       37
       +
         if (active && payload && payload.length > 0) {

     

       38
       38
       +
           const data = payload[0].payload;

     

       39
       39
       +
           return (

     

       40
       40
       +
             <div className="bg-background text-foreground p-4 rounded-lg shadow-lg border">

     

       41
       41
       +
               <p className="font-medium">{label}</p>

     

       42
       42
       +
               <p className="text-sm">Clicks: {data.clicks}</p>

     

       43
       43
       +
               {data.sources && data.sources.length > 0 && (

     

       44
       44
       +
                 <div className="mt-2">

     

       45
       45
       +
                   <p className="font-medium text-sm">Sources:</p>

     

       46
       46
       +
                   <ul className="text-sm">

     

       47
       47
       +
                     {data.sources.map((source: { source: string; count: number }) => (

     

       48
       48
       +
                       <li key={source.source}>

     

       49
       49
       +
                         {source.source}: {source.count}

     

       50
       50
       +
                       </li>

     

       51
       51
       +
                     ))}

     

       52
       52
       +
                   </ul>

     

       53
       53
       +
                 </div>

     

       54
       54
       +
               )}

     

       55
       55
       +
             </div>

     

       56
       56
       +
           );

     

       57
       57
       +
         }

     

       58
       58
       +
         return null;

     

       59
       59
       +
       };

     

       23
       60
        
       

     

       24
       61
        
       export function StatisticsModal({ isOpen, onClose, linkId }: StatisticsModalProps) {

     

       25
       25
       -
           const [clicksOverTime, setClicksOverTime] = useState<ClickStats[]>([]);

     

       26
       26
       -
           const [sourcesData, setSourcesData] = useState<SourceStats[]>([]);

     

       27
       27
       -
           const [loading, setLoading] = useState(true);

     

       62
       62
       +
         const [clicksOverTime, setClicksOverTime] = useState<EnhancedClickStats[]>([]);

     

       63
       63
       +
         const [sourcesData, setSourcesData] = useState<SourceStats[]>([]);

     

       64
       64
       +
         const [loading, setLoading] = useState(true);

     

       65
       65
       +
       

     

       66
       66
       +
         useEffect(() => {

     

       67
       67
       +
           if (isOpen && linkId) {

     

       68
       68
       +
             const fetchData = async () => {

     

       69
       69
       +
               try {

     

       70
       70
       +
                 setLoading(true);

     

       71
       71
       +
                 const [clicksData, sourcesData] = await Promise.all([

     

       72
       72
       +
                   getLinkClickStats(linkId),

     

       73
       73
       +
                   getLinkSourceStats(linkId),

     

       74
       74
       +
                 ]);

     

       28
       75
        
       

     

       29
       29
       -
           useEffect(() => {

     

       30
       30
       -
               if (isOpen && linkId) {

     

       31
       31
       -
                   const fetchData = async () => {

     

       32
       32
       -
                       try {

     

       33
       33
       -
                           setLoading(true);

     

       34
       34
       -
                           const [clicksData, sourcesData] = await Promise.all([

     

       35
       35
       -
                               getLinkClickStats(linkId),

     

       36
       36
       -
                               getLinkSourceStats(linkId),

     

       37
       37
       -
                           ]);

     

       38
       38
       -
                           setClicksOverTime(clicksData);

     

       39
       39
       -
                           setSourcesData(sourcesData);

     

       40
       40
       -
                       } catch (error: any) {

     

       41
       41
       -
                           console.error("Failed to fetch statistics:", error);

     

       42
       42
       -
                           toast({

     

       43
       43
       -
                               variant: "destructive",

     

       44
       44
       -
                               title: "Error",

     

       45
       45
       -
                               description: error.response?.data || "Failed to load statistics",

     

       46
       46
       -
                           });

     

       47
       47
       -
                       } finally {

     

       48
       48
       -
                           setLoading(false);

     

       49
       49
       -
                       }

     

       50
       50
       -
                   };

     

       51
       51
       -
           

     

       52
       52
       -
                   fetchData();

     

       76
       76
       +
                 // Enhance clicks data with source information

     

       77
       77
       +
                 const enhancedClicksData = clicksData.map((clickData) => ({

     

       78
       78
       +
                   ...clickData,

     

       79
       79
       +
                   sources: sourcesData.filter((source) => source.date === clickData.date),

     

       80
       80
       +
                 }));

     

       81
       81
       +
       

     

       82
       82
       +
                 setClicksOverTime(enhancedClicksData);

     

       83
       83
       +
                 setSourcesData(sourcesData);

     

       84
       84
       +
               } catch (error: any) {

     

       85
       85
       +
                 console.error("Failed to fetch statistics:", error);

     

       86
       86
       +
                 toast({

     

       87
       87
       +
                   variant: "destructive",

     

       88
       88
       +
                   title: "Error",

     

       89
       89
       +
                   description: error.response?.data || "Failed to load statistics",

     

       90
       90
       +
                 });

     

       91
       91
       +
               } finally {

     

       92
       92
       +
                 setLoading(false);

     

       53
       93
        
               }

     

       54
       54
       -
           }, [isOpen, linkId]);

     

       94
       94
       +
             };

     

       55
       95
        
       

     

       56
       56
       -
           return (

     

       57
       57
       -
               <Dialog open={isOpen} onOpenChange={onClose}>

     

       58
       58
       -
                   <DialogContent className="max-w-3xl">

     

       59
       59
       -
                       <DialogHeader>

     

       60
       60
       -
                           <DialogTitle>Link Statistics</DialogTitle>

     

       61
       61
       -
                       </DialogHeader>

     

       96
       96
       +
             fetchData();

     

       97
       97
       +
           }

     

       98
       98
       +
         }, [isOpen, linkId]);

     

       62
       99
        
       

     

       63
       63
       -
                       {loading ? (

     

       64
       64
       -
                           <div className="flex items-center justify-center h-64">Loading...</div>

     

       65
       65
       -
                       ) : (

     

       66
       66
       -
                           <div className="grid gap-4">

     

       67
       67
       -
                               <Card>

     

       68
       68
       -
                                   <CardHeader>

     

       69
       69
       -
                                       <CardTitle>Clicks Over Time</CardTitle>

     

       70
       70
       -
                                   </CardHeader>

     

       71
       71
       -
                                   <CardContent>

     

       72
       72
       -
                                       <div className="h-[300px]">

     

       73
       73
       -
                                           <ResponsiveContainer width="100%" height="100%">

     

       74
       74
       -
                                               <LineChart data={clicksOverTime}>

     

       75
       75
       -
                                                   <CartesianGrid strokeDasharray="3 3" />

     

       76
       76
       -
                                                   <XAxis dataKey="date" />

     

       77
       77
       -
                                                   <YAxis />

     

       78
       78
       -
                                                   <Tooltip />

     

       79
       79
       -
                                                   <Line

     

       80
       80
       -
                                                       type="monotone"

     

       81
       81
       -
                                                       dataKey="clicks"

     

       82
       82
       -
                                                       stroke="#8884d8"

     

       83
       83
       -
                                                       strokeWidth={2}

     

       84
       84
       -
                                                   />

     

       85
       85
       -
                                               </LineChart>

     

       86
       86
       -
                                           </ResponsiveContainer>

     

       87
       87
       -
                                       </div>

     

       88
       88
       -
                                   </CardContent>

     

       89
       89
       -
                               </Card>

     

       100
       100
       +
         return (

     

       101
       101
       +
           <Dialog open={isOpen} onOpenChange={onClose}>

     

       102
       102
       +
             <DialogContent className="max-w-3xl">

     

       103
       103
       +
               <DialogHeader>

     

       104
       104
       +
                 <DialogTitle>Link Statistics</DialogTitle>

     

       105
       105
       +
               </DialogHeader>

     

       90
       106
        
       

     

       91
       91
       -
                               <Card>

     

       92
       92
       -
                                   <CardHeader>

     

       93
       93
       -
                                       <CardTitle>Top Sources</CardTitle>

     

       94
       94
       -
                                   </CardHeader>

     

       95
       95
       -
                                   <CardContent>

     

       96
       96
       -
                                       <ul className="space-y-2">

     

       97
       97
       -
                                           {sourcesData.map((source, index) => (

     

       98
       98
       -
                                               <li

     

       99
       99
       -
                                                   key={source.source}

     

       100
       100
       -
                                                   className="flex items-center justify-between py-2 border-b last:border-0"

     

       101
       101
       -
                                               >

     

       102
       102
       -
                                                   <span className="text-sm">

     

       103
       103
       -
                                                       <span className="font-medium text-muted-foreground mr-2">

     

       104
       104
       -
                                                           {index + 1}.

     

       105
       105
       -
                                                       </span>

     

       106
       106
       -
                                                       {source.source}

     

       107
       107
       -
                                                   </span>

     

       108
       108
       -
                                                   <span className="text-sm font-medium">

     

       109
       109
       -
                                                       {source.count} clicks

     

       110
       110
       -
                                                   </span>

     

       111
       111
       -
                                               </li>

     

       112
       112
       -
                                           ))}

     

       113
       113
       -
                                       </ul>

     

       114
       114
       -
                                   </CardContent>

     

       115
       115
       -
                               </Card>

     

       116
       116
       -
                           </div>

     

       117
       117
       -
                       )}

     

       118
       118
       -
                   </DialogContent>

     

       119
       119
       -
               </Dialog>

     

       120
       120
       -
           );

     

       107
       107
       +
               {loading ? (

     

       108
       108
       +
                 <div className="flex items-center justify-center h-64">Loading...</div>

     

       109
       109
       +
               ) : (

     

       110
       110
       +
                 <div className="grid gap-4">

     

       111
       111
       +
                   <Card>

     

       112
       112
       +
                     <CardHeader>

     

       113
       113
       +
                       <CardTitle>Clicks Over Time</CardTitle>

     

       114
       114
       +
                     </CardHeader>

     

       115
       115
       +
                     <CardContent>

     

       116
       116
       +
                       <div className="h-[300px]">

     

       117
       117
       +
                         <ResponsiveContainer width="100%" height="100%">

     

       118
       118
       +
                           <LineChart data={clicksOverTime}>

     

       119
       119
       +
                             <CartesianGrid strokeDasharray="3 3" />

     

       120
       120
       +
                             <XAxis dataKey="date" />

     

       121
       121
       +
                             <YAxis />

     

       122
       122
       +
                             <Tooltip content={<CustomTooltip />} />

     

       123
       123
       +
                             <Line

     

       124
       124
       +
                               type="monotone"

     

       125
       125
       +
                               dataKey="clicks"

     

       126
       126
       +
                               stroke="#8884d8"

     

       127
       127
       +
                               strokeWidth={2}

     

       128
       128
       +
                             />

     

       129
       129
       +
                           </LineChart>

     

       130
       130
       +
                         </ResponsiveContainer>

     

       131
       131
       +
                       </div>

     

       132
       132
       +
                     </CardContent>

     

       133
       133
       +
                   </Card>

     

       134
       134
       +
       

     

       135
       135
       +
                   <Card>

     

       136
       136
       +
                     <CardHeader>

     

       137
       137
       +
                       <CardTitle>Top Sources</CardTitle>

     

       138
       138
       +
                     </CardHeader>

     

       139
       139
       +
                     <CardContent>

     

       140
       140
       +
                       <ul className="space-y-2">

     

       141
       141
       +
                         {sourcesData.map((source, index) => (

     

       142
       142
       +
                           <li

     

       143
       143
       +
                             key={source.source}

     

       144
       144
       +
                             className="flex items-center justify-between py-2 border-b last:border-0"

     

       145
       145
       +
                           >

     

       146
       146
       +
                             <span className="text-sm">

     

       147
       147
       +
                               <span className="font-medium text-muted-foreground mr-2">

     

       148
       148
       +
                                 {index + 1}.

     

       149
       149
       +
                               </span>

     

       150
       150
       +
                               {source.source}

     

       151
       151
       +
                             </span>

     

       152
       152
       +
                             <span className="text-sm font-medium">

     

       153
       153
       +
                               {source.count} clicks

     

       154
       154
       +
                             </span>

     

       155
       155
       +
                           </li>

     

       156
       156
       +
                         ))}

     

       157
       157
       +
                       </ul>

     

       158
       158
       +
                     </CardContent>

     

       159
       159
       +
                   </Card>

     

       160
       160
       +
                 </div>

     

       161
       161
       +
               )}

     

       162
       162
       +
             </DialogContent>

     

       163
       163
       +
           </Dialog>

     

       164
       164
       +
         );

     

       121
       165
        
       }

frontend/src/types/api.ts

···

       32
       32
        
       }

     

       33
       33
        
       

     

       34
       34
        
       export interface SourceStats {

     

       35
       35
       +
       	date: string;

     

       35
       36
        
       	source: string;

     

       36
       37
        
       	count: number;

     

       37
       38
        
       }

+8 -6

src/handlers.rs

···

       643
       643
        
                   sqlx::query_as::<_, SourceStats>(

     

       644
       644
        
                       r#"

     

       645
       645
        
                       SELECT 

     

       646
       646
       +
                           DATE(created_at)::text as date,

     

       646
       647
        
                           query_source as source,

     

       647
       648
        
                           COUNT(*)::bigint as count

     

       648
       649
        
                       FROM clicks

     

       649
       650
        
                       WHERE link_id = $1

     

       650
       651
        
                           AND query_source IS NOT NULL

     

       651
       652
        
                           AND query_source != ''

     

       652
       652
       -
                       GROUP BY query_source

     

       653
       653
       -
                       ORDER BY COUNT(*) DESC

     

       654
       654
       -
                       LIMIT 10

     

       653
       653
       +
                       GROUP BY DATE(created_at), query_source

     

       654
       654
       +
                       ORDER BY DATE(created_at) ASC, COUNT(*) DESC

     

       655
       655
       +
                       LIMIT 300

     

       655
       656
        
                       "#,

     

       656
       657
        
                   )

     

       657
       658
        
                   .bind(link_id)

     
···

       662
       663
        
                   sqlx::query_as::<_, SourceStats>(

     

       663
       664
        
                       r#"

     

       664
       665
        
                       SELECT 

     

       666
       666
       +
                           DATE(created_at) as date,

     

       665
       667
        
                           query_source as source,

     

       666
       668
        
                           COUNT(*) as count

     

       667
       669
        
                       FROM clicks

     

       668
       670
        
                       WHERE link_id = ?

     

       669
       671
        
                           AND query_source IS NOT NULL

     

       670
       672
        
                           AND query_source != ''

     

       671
       671
       -
                       GROUP BY query_source

     

       672
       672
       -
                       ORDER BY COUNT(*) DESC

     

       673
       673
       -
                       LIMIT 10

     

       673
       673
       +
                       GROUP BY DATE(created_at), query_source

     

       674
       674
       +
                       ORDER BY DATE(created_at) ASC, COUNT(*) DESC

     

       675
       675
       +
                       LIMIT 300

     

       674
       676
        
                       "#,

     

       675
       677
        
                   )

     

       676
       678
        
                   .bind(link_id)

src/models.rs

···

       150
       150
        
       

     

       151
       151
        
       #[derive(sqlx::FromRow, Serialize)]

     

       152
       152
        
       pub struct SourceStats {

     

       153
       153
       +
           pub date: String,

     

       153
       154
        
           pub source: String,

     

       154
       155
        
           pub count: i64,

     

       155
       156
        
       }