monthly

Author: alrocar

apps/web/src/components/tools/auth0/daily-login-fails-chart.tsx

@@ -13,6 +13,7 @@ import {
     ChartTooltipContent
 } from "@/components/ui/chart"
 import { Line, LineChart, XAxis, YAxis } from "recharts"
+import { format } from "date-fns"
 
 export interface DailyLoginFailsDataPoint {
     day: string
@@ -21,6 +22,7 @@ export interface DailyLoginFailsDataPoint {
 
 export interface DailyLoginFailsChartData {
     data: DailyLoginFailsDataPoint[]
+    timeRange: 'hourly' | 'daily' | 'monthly'
 }
 
 const chartConfig = {
@@ -30,11 +32,11 @@ const chartConfig = {
     },
 } satisfies ChartConfig
 
-export function DailyLoginFailsChart({ data }: DailyLoginFailsChartData) {
+export function DailyLoginFailsChart({ data, timeRange }: DailyLoginFailsChartData) {
     return (
         <Card>
             <CardHeader>
-                <CardTitle>Daily Login Fails</CardTitle>
+                <CardTitle>Daily Login Failures</CardTitle>
             </CardHeader>
             <CardContent className="">
                 <ChartContainer config={chartConfig} className="h-[400px] w-full">
@@ -53,9 +55,14 @@ export function DailyLoginFailsChart({ data }: DailyLoginFailsChartData) {
                             axisLine={false}
                             tickMargin={8}
                             interval="equidistantPreserveStart"
-                            tickFormatter={(value) => value.split('-')[2]}
+                            tickFormatter={(value) => {
+                                const date = new Date(value)
+                                return timeRange === 'monthly' 
+                                    ? format(date, 'MMM yyyy')
+                                    : value.split('-')[2]
+                            }}
                             label={{
-                                value: "Day of Month",
+                                value: timeRange === 'monthly' ? "Month of Year" : "Day of Month",
                                 position: "bottom",
                                 offset: 20
                             }}

apps/web/src/components/tools/auth0/daily-signups-chart.tsx

@@ -13,6 +13,7 @@ import {
     ChartTooltipContent
 } from "@/components/ui/chart"
 import { Line, LineChart, XAxis, YAxis } from "recharts"
+import { format } from "date-fns"
 
 export interface DailySignupsDataPoint {
     day: string
@@ -21,6 +22,7 @@ export interface DailySignupsDataPoint {
 
 export interface DailySignupsChartData {
     data: DailySignupsDataPoint[]
+    timeRange: 'hourly' | 'daily' | 'monthly'
 }
 
 const chartConfig = {
@@ -30,14 +32,14 @@ const chartConfig = {
     },
 } satisfies ChartConfig
 
-export function DailySignupsChart({ data }: DailySignupsChartData) {
+export function DailySignupsChart({ data, timeRange }: DailySignupsChartData) {
     return (
         <Card>
             <CardHeader>
                 <CardTitle>Daily Signups</CardTitle>
             </CardHeader>
             <CardContent className="">
-                <ChartContainer config={chartConfig} >
+                <ChartContainer config={chartConfig} className="h-[400px] w-full">
                     <LineChart
                         data={data}
                         margin={{
@@ -53,9 +55,14 @@ export function DailySignupsChart({ data }: DailySignupsChartData) {
                             axisLine={false}
                             tickMargin={8}
                             interval="equidistantPreserveStart"
-                            tickFormatter={(value) => value.split('-')[2]}
+                            tickFormatter={(value) => {
+                                const date = new Date(value)
+                                return timeRange === 'monthly' 
+                                    ? format(date, 'MMM yyyy')
+                                    : value.split('-')[2]
+                            }}
                             label={{
-                                value: "Day of Month",
+                                value: timeRange === 'monthly' ? "Month of Year" : "Day of Month",
                                 position: "bottom",
                                 offset: 20
                             }}

apps/web/src/components/tools/auth0/dashboard.tsx

@@ -312,14 +312,24 @@ export default function Auth0Dashboard() {
 
             {/* Charts Grid */}
             <div className="grid gap-4 grid-cols-1">
-                <DauChart data={dauData} />
+                <DauChart 
+                    data={dauData} 
+                    comparisonData={dateRange.compareMode ? dauComparisonData : undefined}
+                    timeRange={timeRange}
+                />
             </div>
             <div className="grid gap-4 md:grid-cols-1 xl:grid-cols-2">
                 <AuthMechChart data={authMechData} />
-                <DailySignupsChart data={dailySignupsData} />
+                <DailySignupsChart 
+                    data={dailySignupsData}
+                    timeRange={timeRange}
+                />
             </div>
             <div className="grid gap-4 grid-cols-1">
-                <DailyLoginFailsChart data={dailyLoginFailsData} />
+                <DailyLoginFailsChart 
+                    data={dailyLoginFailsData}
+                    timeRange={timeRange}
+                />
             </div>
         </div>
     )

apps/web/src/components/tools/auth0/dau-chart.tsx

@@ -13,6 +13,7 @@ import {
     ChartTooltipContent
 } from "@/components/ui/chart"
 import { Line, LineChart, XAxis, YAxis } from "recharts"
+import { format } from "date-fns"
 
 export interface DauDataPoint {
     day: string
@@ -21,6 +22,8 @@ export interface DauDataPoint {
 
 export interface DauChartData {
     data: DauDataPoint[]
+    comparisonData?: DauDataPoint[]
+    timeRange: 'hourly' | 'daily' | 'monthly'
 }
 
 const chartConfig = {
@@ -30,7 +33,7 @@ const chartConfig = {
     },
 } satisfies ChartConfig
 
-export function DauChart({ data }: DauChartData) {
+export function DauChart({ data, comparisonData, timeRange }: DauChartData) {
     return (
         <Card>
             <CardHeader>
@@ -53,9 +56,14 @@ export function DauChart({ data }: DauChartData) {
                             axisLine={false}
                             tickMargin={8}
                             interval="equidistantPreserveStart"
-                            tickFormatter={(value) => value.split('-')[2]}
+                            tickFormatter={(value) => {
+                                const date = new Date(value)
+                                return timeRange === 'monthly' 
+                                    ? format(date, 'MMM yyyy')
+                                    : value.split('-')[2]
+                            }}
                             label={{
-                                value: "Day of Month",
+                                value: timeRange === 'monthly' ? "Month of Year" : "Day of Month",
                                 position: "bottom",
                                 offset: 20
                             }}