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

feat: add repeat order percentage analysis using new KnobChart component

Browse Source
This commit is contained in:
Yoga Pangestu 2026-04-30 09:30:53 +07:00
parent 120c5d28e8
commit 305c9572cf
4 changed files with 156 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/Http/Controllers/AnalysisController.php
View File

@ -44,7 +44,14 @@ public function __invoke(Request $request)
'total_discount' => $this->getStats(fn () => $applyFilter(Order::query())->sum('discount')),
'total_purchases' => $this->getStats(fn () => $applyFilter(Purchase::query())->sum('total')),
'products_sold' => $this->getStats(fn () => $applyFilter(OrderItem::query())->sum('qty')),
'total_customers' => $this->getStats(fn () => $applyFilter(Order::query())->distinct('customer_name')->count('customer_name')),
'total_customers' => $this->getStats(fn () => $applyFilter(Order::query())->whereNotNull('customer_name')->distinct('customer_name')->count('customer_name')),
'repeat_customers' => $this->getStats(fn () => $applyFilter(DB::table('orders'))
->whereNotNull('customer_name')
->select('customer_name')
->groupBy('customer_name')
->havingRaw('COUNT(*) > 1')
->get()
->count()),
];
$stats['aov'] = $this->calculateAov($stats['total_revenue'], $stats['total_sales']);
@ -56,6 +63,14 @@ public function __invoke(Request $request)
];
$stats['profit_margin'] = $this->calculateMargin($stats['net_profit'], $stats['total_revenue']);
$totalCustomers = $stats['total_customers']['value'];
$repeatCustomers = $stats['repeat_customers']['value'];
$stats['repeat_order_percentage'] = [
'value' => $totalCustomers > 0 ? round(($repeatCustomers / $totalCustomers) * 100, 2) : 0,
'yesterday' => null,
'change' => null,
];
$isSqlite = DB::getDriverName() === 'sqlite';
$monthSelect = $isSqlite ? "CAST(strftime('%m', created_at) AS INTEGER)" : 'MONTH(created_at)';

129
resources/js/components/charts/knob-chart.tsx Normal file
View File

@ -0,0 +1,129 @@
"use client"
import React, { useMemo } from "react"
import {
Label,
PolarGrid,
PolarRadiusAxis,
RadialBar,
RadialBarChart,
} from "recharts"
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import { ChartConfig, ChartContainer } from "@/components/ui/chart"
export const KnobChart = React.memo(function KnobChart({
title,
description,
percentage,
label,
footerText
}: {
title: string
description: string
percentage: number
label?: string
footerText?: string
}) {
const { chartData, chartConfig } = useMemo(() => {
return {
chartData: [
{
name: "value",
value: percentage,
fill: "hsl(var(--primary))",
},
],
chartConfig: {
value: {
label: label || "Value",
},
} satisfies ChartConfig,
}
}, [percentage, label])
return (
<Card className="flex flex-col">
<CardHeader className="items-center pb-0">
<CardTitle>{title}</CardTitle>
<CardDescription>{description}</CardDescription>
</CardHeader>
<CardContent className="flex-1 pb-0">
<ChartContainer
config={chartConfig}
className="mx-auto aspect-square max-h-[250px]"
>
<RadialBarChart
data={chartData}
startAngle={90}
endAngle={90 - (360 * (percentage / 100))}
innerRadius={80}
outerRadius={110}
>
<PolarGrid
gridType="circle"
radialLines={false}
stroke="none"
className="first:fill-muted last:fill-background"
polarRadius={[86, 74]}
/>
<RadialBar
dataKey="value"
background
cornerRadius={10}
/>
<PolarRadiusAxis
tick={false}
tickLine={false}
axisLine={false}
>
<Label
content={({ viewBox }) => {
if (viewBox && "cx" in viewBox && "cy" in viewBox) {
return (
<text
x={viewBox.cx}
y={viewBox.cy}
textAnchor="middle"
dominantBaseline="middle"
>
<tspan
x={viewBox.cx}
y={viewBox.cy}
className="fill-foreground text-4xl font-bold"
>
{percentage.toFixed(1)}%
</tspan>
<tspan
x={viewBox.cx}
y={(viewBox.cy || 0) + 24}
className="fill-muted-foreground"
>
{label || "Percentage"}
</tspan>
</text>
)
}
}}
/>
</PolarRadiusAxis>
</RadialBarChart>
</ChartContainer>
</CardContent>
{footerText && (
<CardFooter className="flex-col gap-2 text-sm">
<div className="leading-none text-muted-foreground">
{footerText}
</div>
</CardFooter>
)}
</Card>
)
})

10
resources/js/pages/analysis.tsx
View File

@ -16,6 +16,7 @@ import { RevenueVsProfitChart } from '../components/charts/revenue-vs-profit-cha
import { RevenueVsPurchasesChart } from '../components/charts/revenue-vs-purchases-chart';
import { SalesByHourChart } from '../components/charts/sales-by-hour-chart';
import { TransactionVolumeChart } from '../components/charts/transaction-volume-chart';
import { KnobChart } from '../components/charts/knob-chart';
export default function Analisa() {
const { stats, salesByMonth, revenueVsProfit, transactionVolume, salesByHour, paymentMethods, orderStatuses, orderChannels, topProducts, topCustomers, topCategories, filters } =
@ -228,7 +229,7 @@ export default function Analisa() {
</div>
{/* Activity & Volume Grid */}
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
<div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
<TransactionVolumeChart
data={transactionVolume}
title="Volume Transaksi"
@ -239,6 +240,13 @@ export default function Analisa() {
title="Tren AOV"
description={getFilterDescription("Rata-rata nilai belanja per pesanan pelanggan setiap bulannya.")}
/>
<KnobChart
title="Repeat Order"
description={getFilterDescription("Persentase pelanggan yang kembali berbelanja.")}
percentage={stats.repeat_order_percentage.value}
label="Repeat Order"
footerText={`${stats.repeat_customers.value} dari ${stats.total_customers.value} pelanggan melakukan repeat order.`}
/>
</div>
<SalesByHourChart

2
resources/js/types/dashboard.ts
View File

@ -20,6 +20,8 @@ export interface DashboardStats {
total_purchases: StatItem;
products_sold: StatItem;
total_customers: StatItem;
repeat_customers: StatItem;
repeat_order_percentage: StatItem;
}
export interface DashboardPageProps {