vngrup/dress
vngrup/dress
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add YAxis to all chart components for improved data visualization

Browse Source
This commit is contained in:
Yoga Pangestu 2026-04-23 20:17:51 +07:00
parent ee79523a4b
commit 07d5219e78
4 changed files with 32 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
resources/js/components/charts/revenue-vs-profit-chart.tsx
View File

@ -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={

11
resources/js/components/charts/revenue-vs-purchases-chart.tsx
View File

@ -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={

8
resources/js/components/charts/sales-by-hour-chart.tsx
View File

@ -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" />}

8
resources/js/components/charts/transaction-volume-chart.tsx
View File

@ -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={