Merge pull request #351 from SimonStnn/feature/global-pop-graph

Add global option to history page
SimonStnn · Nov 9, 2024 · 86d76e3 · 86d76e3
2 parents 4b8597a + 241c20f
commit 86d76e3
Show file tree

Hide file tree

Showing 5 changed files with 246 additions and 56 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -45,6 +45,7 @@
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.0.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",

diff --git a/src/popup/components/graph.tsx b/src/popup/components/graph.tsx
@@ -9,7 +9,7 @@ import {
 import { BalloonName, HistoryNode } from '@/const';
 import remote from '@/remote';
 
-export default (props: { startDate: Date; endDate: Date }) => {
+export default (props: { startDate: Date; endDate: Date; global: boolean }) => {
   const [data, setData] = useState({} as (HistoryNode & { total: number })[]);
   const [poppedBalloonTypes, setPoppedBalloonTypes] = useState<BalloonName[]>(
     []
@@ -20,7 +20,8 @@ export default (props: { startDate: Date; endDate: Date }) => {
     const fetchData = async () => {
       const response = await remote.getPopHistory(
         props.startDate,
-        props.endDate
+        props.endDate,
+        props.global
       );
 
       const allBalloonNames = [
@@ -62,7 +63,7 @@ export default (props: { startDate: Date; endDate: Date }) => {
     };
 
     fetchData();
-  }, [props.startDate, props.endDate]);
+  }, [props.startDate, props.endDate, props.global]);
 
   return (
     <>

diff --git a/src/popup/components/ui/toggle.tsx b/src/popup/components/ui/toggle.tsx
@@ -0,0 +1,42 @@
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '@/utils';
+
+const toggleVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline:
+          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-10 px-3',
+        sm: 'h-9 px-2.5',
+        lg: 'h-11 px-5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };
diff --git a/src/popup/pages/Statistics.tsx b/src/popup/pages/Statistics.tsx
@@ -1,11 +1,16 @@
 import { format, subDays } from 'date-fns';
-import { Calendar as CalendarIcon } from 'lucide-react';
+import { Calendar as CalendarIcon, Globe, CircleUser } from 'lucide-react';
 import React from 'react';
 import { DateRange } from 'react-day-picker';
 import Main from '@/components/Main';
 import Graph from '@/components/graph';
 import { Button } from '@/components/ui/button';
 import { Calendar } from '@/components/ui/calendar';
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@/components/ui/hover-card';
 import {
   Popover,
   PopoverContent,
@@ -19,6 +24,7 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { Skeleton } from '@/components/ui/skeleton';
+import { Toggle } from '@/components/ui/toggle';
 import storage from '@/managers/storage';
 import { cn } from '@/utils';
 
@@ -27,6 +33,7 @@ export default () => {
     from: subDays(new Date(), 7),
     to: new Date(),
   });
+  const [global, setGlobal] = React.useState(true);
 
   const handleDatePresetChange = async (value: string) => {
     const minDate = new Date('2024-07-01');
@@ -67,61 +74,86 @@ export default () => {
 
   return (
     <Main>
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button
-            id="date"
-            variant={'outline'}
-            className={cn(
-              'mb-8 justify-start text-left font-normal',
-              !date && 'text-muted-foreground'
-            )}
+      <div className="mb-8 flex flex-row gap-1">
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button
+              id="date"
+              variant={'outline'}
+              className={cn(
+                'flex-grow justify-start text-left font-normal',
+                !date && 'text-muted-foreground'
+              )}
+            >
+              <CalendarIcon className="mr-2 size-4" />
+              {date?.from ? (
+                date.to ? (
+                  <>
+                    {format(date.from, 'LLL dd, y')} -{' '}
+                    {format(date.to, 'LLL dd, y')}
+                  </>
+                ) : (
+                  format(date.from, 'LLL dd, y')
+                )
+              ) : (
+                <span>Pick a date</span>
+              )}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            className="flex w-full flex-col gap-2 p-2"
+            align="start"
           >
-            <CalendarIcon className="mr-2 h-4 w-4" />
-            {date?.from ? (
-              date.to ? (
-                <>
-                  {format(date.from, 'LLL dd, y')} -{' '}
-                  {format(date.to, 'LLL dd, y')}
-                </>
+            <Select onValueChange={handleDatePresetChange}>
+              <SelectTrigger>
+                <SelectValue placeholder="Select" />
+              </SelectTrigger>
+              <SelectContent position="popper">
+                <SelectItem value="last-week">Last week</SelectItem>
+                <SelectItem value="last-month">Last month</SelectItem>
+                <SelectItem value="last-3-months">Last 3 months</SelectItem>
+                <SelectItem value="all-time">All time</SelectItem>
+              </SelectContent>
+            </Select>
+            <Calendar
+              initialFocus
+              className="p-0"
+              mode="range"
+              defaultMonth={date?.from}
+              selected={date}
+              onSelect={setDate}
+              numberOfMonths={1}
+              fromDate={new Date('2024-07-01')}
+              toDate={new Date()}
+            />
+          </PopoverContent>
+        </Popover>
+        <HoverCard>
+          <HoverCardTrigger asChild>
+            <Toggle
+              variant="outline"
+              aria-label="Toggle global stats"
+              onClick={(e) => setGlobal(!global)}
+            >
+              {global ? (
+                <Globe className="size-4" />
               ) : (
-                format(date.from, 'LLL dd, y')
-              )
-            ) : (
-              <span>Pick a date</span>
-            )}
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent
-          className="flex w-full flex-col gap-2 p-2"
-          align="start"
-        >
-          <Select onValueChange={handleDatePresetChange}>
-            <SelectTrigger>
-              <SelectValue placeholder="Select" />
-            </SelectTrigger>
-            <SelectContent position="popper">
-              <SelectItem value="last-week">Last week</SelectItem>
-              <SelectItem value="last-month">Last month</SelectItem>
-              <SelectItem value="last-3-months">Last 3 months</SelectItem>
-              <SelectItem value="all-time">All time</SelectItem>
-            </SelectContent>
-          </Select>
-          <Calendar
-            initialFocus
-            className="p-0"
-            mode="range"
-            defaultMonth={date?.from}
-            selected={date}
-            onSelect={setDate}
-            numberOfMonths={1}
-            fromDate={new Date('2024-07-01')}
-            toDate={new Date()}
-          />
-        </PopoverContent>
-      </Popover>
+                <CircleUser className="size-4" />
+              )}
+            </Toggle>
+          </HoverCardTrigger>
+          <HoverCardContent>
+            <h4 className="mb-1 font-medium leading-none">
+              Toggle global history
+            </h4>
+            <p className="text-sm font-normal leading-tight text-muted-foreground">
+              View global history or your own history.
+            </p>
+          </HoverCardContent>
+        </HoverCard>
+      </div>
       {date?.from && date?.to ? (
-        <Graph startDate={date?.from} endDate={date?.to} />
+        <Graph startDate={date?.from} endDate={date?.to} global={global} />
       ) : (
         <Skeleton className="h-[200px] w-full" />
       )}