feat(web): update charts

apps/web/package.json

@@ -45,6 +45,7 @@
  "@radix-ui/react-select": "^1.2.2",
  "@radix-ui/react-slot": "^1.0.2",
  "@radix-ui/react-switch": "^1.0.2",
+ "@radix-ui/react-tabs": "^1.1.0",
  "@radix-ui/react-tooltip": "^1.0.5",
  "@react-email/button": "0.0.5",
  "@react-email/container": "0.0.5",
@@ -99,6 +100,7 @@
  "next-themes": "^0.2.1",
  "nextjs-cors": "^2.1.2",
  "nodemailer": "^6.9.1",
+ "nuqs": "^1.17.8",
  "octokit": "^2.0.18",
  "rate-limiter-flexible": "^5.0.3",
  "react": "18.2.0",

apps/web/src/components/DashboardSection.tsx

@@ -9,7 +9,7 @@ export function DashboardSection({
 }) {
  return (
  <section
- className={twMerge("rounded-lg bg-secondary px-6 py-3", className)}
+ className={twMerge("rounded-lg bg-secondary p-6 h-full", className)}
  >
  {children}
  </section>

apps/web/src/components/Layout.tsx

@@ -96,7 +96,7 @@ export const Layout = ({ children }: { children: ReactNode }) => {
  />
  </nav>
  <main className="relative w-full flex-1 overflow-y-auto overflow-x-hidden text-white">
- <div className="p-8 lg:p-10">{children}</div>
+ <div className="p-8 lg:p-10 h-full">{children}</div>
  </main>
  </div>
  </>

apps/web/src/components/analytics/EventGraph.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as React from "react";
-import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
+import { LineChart, CartesianGrid, XAxis, YAxis, Line } from "recharts";
 
 import {
  Card,
@@ -52,9 +52,6 @@ export function EventGraph({
  ) as Record<string, { label: string; color: string }>;
 
  return {
- visitors: {
- label: "Visitors",
- },
  ...variantsConfig,
  } satisfies ChartConfig;
  }, [variants]);
@@ -72,7 +69,7 @@ export function EventGraph({
  config={chartConfig}
  className="aspect-auto h-[250px] w-full"
  >
- <AreaChart data={events}>
+ <LineChart data={events} accessibilityLayer syncId="events">
  <defs>
  {variants.map((variant) => (
  <linearGradient
@@ -99,34 +96,35 @@ export function EventGraph({
  <CartesianGrid vertical={false} />
  <XAxis
  dataKey="date"
- tickLine={false}
- axisLine={false}
+ // tickLine={false}
+ // axisLine={false}
  tickMargin={8}
  minTickGap={32}
  tickFormatter={(value) => {
  return dayjs(value).format(getFormattingByInterval(interval));
  }}
  />
+ <YAxis />
  <ChartTooltip
- cursor={false}
  labelFormatter={(value) => {
  return dayjs(value).format(getFormattingByInterval(interval));
  }}
- content={<ChartTooltipContent indicator="dot" />}
+ content={<ChartTooltipContent indicator="line" />}
  />
  {variants.map((variant) => (
- <Area
+ <Line
  key={variant}
  dataKey={variant}
- type="natural"
+ type="monotone"
  fill={`url(#fill${variant})`}
  stroke={`var(--color-${variant})`}
- stackId="a"
+ strokeWidth={2}
+ dot={false}
  />
  ))}
 
  <ChartLegend content={<ChartLegendContent />} />
- </AreaChart>
+ </LineChart>
  </ChartContainer>
  </CardContent>
  </Card>

apps/web/src/components/ui/tabs.tsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+ React.ElementRef<typeof TabsPrimitive.List>,
+ React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+ <TabsPrimitive.List
+ ref={ref}
+ className={cn(
+ "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+ className
+ )}
+ {...props}
+ />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+ React.ElementRef<typeof TabsPrimitive.Trigger>,
+ React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+ <TabsPrimitive.Trigger
+ ref={ref}
+ className={cn(
+ "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all 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=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+ className
+ )}
+ {...props}
+ />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+ React.ElementRef<typeof TabsPrimitive.Content>,
+ React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+ <TabsPrimitive.Content
+ ref={ref}
+ className={cn(
+ "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+ className
+ )}
+ {...props}
+ />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }