From 07d5219e78add301096ff99dbe420f7a0093ce43 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Thu, 23 Apr 2026 20:17:51 +0700
Subject: [PATCH] feat: add YAxis to all chart components for improved data
 visualization

---
 .../js/components/charts/revenue-vs-profit-chart.tsx  | 11 +++++++++--
 .../components/charts/revenue-vs-purchases-chart.tsx  | 11 +++++++++--
 .../js/components/charts/sales-by-hour-chart.tsx      |  8 +++++++-
 .../js/components/charts/transaction-volume-chart.tsx |  8 +++++++-
 4 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/resources/js/components/charts/revenue-vs-profit-chart.tsx b/resources/js/components/charts/revenue-vs-profit-chart.tsx
index a08610a..1b0a589 100644
--- a/resources/js/components/charts/revenue-vs-profit-chart.tsx
+++ b/resources/js/components/charts/revenue-vs-profit-chart.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"
 
 import {
   Card,
@@ -15,7 +15,7 @@ import {
   ChartTooltipContent,
   type ChartConfig,
 } from "@/components/ui/chart"
-import { formatCurrency } from "@/lib/formatters"
+import { formatCurrency, formatShortCurrency } from "@/lib/formatters"
 
 export const description = "Perbandingan Pendapatan vs Laba Bersih per bulan."
 
@@ -55,6 +55,13 @@ export function RevenueVsProfitChart({ data }: { data: any[] }) {
               tickMargin={8}
               tickFormatter={(value) => value.slice(0, 3)}
             />
+            <YAxis
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={formatShortCurrency}
+              width={60}
+            />
             <ChartTooltip
               cursor={false}
               content={
diff --git a/resources/js/components/charts/revenue-vs-purchases-chart.tsx b/resources/js/components/charts/revenue-vs-purchases-chart.tsx
index 561411c..5d3aaca 100644
--- a/resources/js/components/charts/revenue-vs-purchases-chart.tsx
+++ b/resources/js/components/charts/revenue-vs-purchases-chart.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"
 
 import {
   Card,
@@ -17,7 +17,7 @@ import {
   ChartTooltipContent,
   type ChartConfig,
 } from "@/components/ui/chart"
-import { formatCurrency } from "@/lib/formatters"
+import { formatCurrency, formatShortCurrency } from "@/lib/formatters"
 
 export const description = "Perbandingan total penjualan dan belanja per bulan."
 
@@ -50,6 +50,13 @@ export function RevenueVsPurchasesChart({ data }: { data: any[] }) {
               axisLine={false}
               tickFormatter={(value) => value.slice(0, 3)}
             />
+            <YAxis
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={formatShortCurrency}
+              width={60}
+            />
             <ChartTooltip
               cursor={false}
               content={
diff --git a/resources/js/components/charts/sales-by-hour-chart.tsx b/resources/js/components/charts/sales-by-hour-chart.tsx
index c8fe01f..29913a4 100644
--- a/resources/js/components/charts/sales-by-hour-chart.tsx
+++ b/resources/js/components/charts/sales-by-hour-chart.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
 
 import {
     Card,
@@ -82,6 +82,12 @@ export function SalesByHourChart({
                             axisLine={false}
                             tickMargin={8}
                         />
+                        <YAxis
+                            tickLine={false}
+                            axisLine={false}
+                            tickMargin={8}
+                            width={30}
+                        />
                         <ChartTooltip
                             cursor={false}
                             content={<ChartTooltipContent indicator="dot" />}
diff --git a/resources/js/components/charts/transaction-volume-chart.tsx b/resources/js/components/charts/transaction-volume-chart.tsx
index 7489387..f69c72c 100644
--- a/resources/js/components/charts/transaction-volume-chart.tsx
+++ b/resources/js/components/charts/transaction-volume-chart.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { GitCommitVertical, TrendingUp } from "lucide-react"
-import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"
 
 import {
   Card,
@@ -57,6 +57,12 @@ export function TransactionVolumeChart({ data }: { data: any[] }) {
               tickMargin={8}
               tickFormatter={(value) => value.slice(0, 3)}
             />
+            <YAxis
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              width={30}
+            />
             <ChartTooltip
               cursor={false}
               content={