Chart update

Author: dcodesdev

RELEASE_NOTES.md

@@ -1,6 +1,6 @@
 ### ✨ Features
 
-- Chart updated
+- Min value added for subscriber growth chart.
 - New features and improvements.
 
 ### 🐛 Bug Fixes

apps/backend/prisma/seed.ts

@@ -1,6 +1,7 @@
 import { hashPassword } from "../src/utils/auth"
 import { prisma } from "../src/utils/prisma"
 import { SmtpEncryption } from "./client"
+import dayjs from "dayjs"
 
 async function seed() {
   if (!(await prisma.organization.findFirst())) {
@@ -55,6 +56,37 @@ async function seed() {
       },
     })
   }
+
+  // Create 5000 subscribers
+  const subscribers = Array.from({ length: 5000 }, (_, i) => ({
+    name: `Subscriber ${i + 1}`,
+    email: `subscriber${i + 1}@example.com`,
+    organizationId: orgId,
+    createdAt: dayjs().subtract(12, "days").toDate(),
+  }))
+  await prisma.subscriber.createMany({
+    data: subscribers,
+    skipDuplicates: true,
+  })
+  // Then 10 more for each day for 10 days
+  const now = new Date()
+  for (let d = 0; d < 10; d++) {
+    const day = dayjs(now)
+      .subtract(d + 1, "day")
+      .toDate()
+
+    const dailySubs = Array.from({ length: 10 }, (_, i) => ({
+      name: `DailySub ${d + 1}-${i + 1}`,
+      email: `dailysub${d + 1}-${i + 1}@example.com`,
+      organizationId: orgId,
+      createdAt: day,
+      updatedAt: day,
+    }))
+    await prisma.subscriber.createMany({
+      data: dailySubs,
+      skipDuplicates: true,
+    })
+  }
 }
 
 seed()

apps/web/src/pages/dashboard/dashboard/subscriber-growth-chart.tsx

@@ -15,6 +15,7 @@ import {
 } from "@repo/ui"
 import dayjs from "dayjs"
 import { ArrowDown, TrendingUp } from "lucide-react"
+import { useMemo } from "react"
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
 
 const chartConfig = {
@@ -49,9 +50,12 @@ export const SubscriberGrowthChart = () => {
 
   const isLoading = analyticsLoading || dashboardLoading
 
-  const maxCount = Math.max(
-    ...(dashboard?.subscriberGrowth.map((item) => item.count) || [])
+  const countMapped = useMemo(
+    () => dashboard?.subscriberGrowth.map((item) => item.count) || [],
+    [dashboard?.subscriberGrowth]
   )
+  const maxCount = useMemo(() => Math.max(...countMapped), [countMapped])
+  const minCount = useMemo(() => Math.min(...countMapped), [countMapped])
 
   return (
     <Card hoverEffect className="col-span-4">
@@ -88,7 +92,8 @@ export const SubscriberGrowthChart = () => {
                 tickLine={false}
                 axisLine={false}
                 tickMargin={8}
-                tickCount={Math.min(maxCount, 10)}
+                domain={[minCount, maxCount]}
+                allowDataOverflow={true}
               />
               <ChartTooltip
                 cursor={false}

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.11",
+  "version": "0.4.12",
   "name": "letterspace",
   "private": true,
   "scripts": {