src/app/dashboard/(overview)/page.tsx

@@ -1,7 +1,7 @@
 import { LatestInvoicesSkeleton, RevenueChartSkeleton } from "@/app/dashboard/components/skeletons/skeletons";
 import CardWrapper from "@/app/dashboard/components/cards/cards";
 import LatestInvoices from "@/app/dashboard/components/latest-invoices";
-import RevenueChart from "@/app/dashboard/components/revenue-chart";
+import RevenueChart from "@/app/dashboard/components/revenue-chart/revenue-chart";
 import { Suspense } from "react";
 
 export default async function Dashboard() {

src/app/dashboard/components/revenue-chart/revenue-chart-controller.ts

@@ -1,7 +1,21 @@
 import Revenue from "@/feature/core/revenue/domain/entity/revenue";
+import fetchRevenuesUsecase from "@/feature/core/revenue/domain/usecase/fetch-revenues-usecase";
 
+export default async function revenueChartController() {
+  const revenue = await fetchRevenuesUsecase();
+  const chartHeight = 350;
 
-export const generateYAxis = (revenue: Revenue[]) => {
+  const { yAxisLabels, topLabel } = generateYAxis(revenue);
+
+  return {
+    revenue,
+    chartHeight,
+    yAxisLabels,
+    topLabel
+  }
+}
+
+function generateYAxis(revenue: Revenue[]) {
   // Calculate what labels we need to display on the y-axis
   // based on highest record and in 1000s
   const yAxisLabels = [];

src/app/dashboard/components/revenue-chart/revenue-chart.tsx

@@ -1,13 +1,8 @@
-import { generateYAxis } from '@/app/lib/utils';
+import revenueChartController from '@/app/dashboard/components/revenue-chart/revenue-chart-controller';
-import fetchRevenuesUsecase from '@/feature/core/revenue/domain/usecase/fetch-revenues-usecase';
 import { CalendarIcon } from '@heroicons/react/24/outline';
 
 export default async function RevenueChart() {
-  const revenue = await fetchRevenuesUsecase();
+  const { chartHeight, revenue, topLabel, yAxisLabels } = await revenueChartController()
-
-  const chartHeight = 350;
-
-  const { yAxisLabels, topLabel } = generateYAxis(revenue);
 
   if (!revenue || revenue.length === 0) {
     return <p className="mt-4 text-gray-400">No data available.</p>;